Merge pull request #101 from emqx/develop

Release v1.1.1

.yarnclean

@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md

README-CN.md

@@ -24,6 +24,13 @@ MQTTX 采用了聊天界面形式，简化了页面操作逻辑，方便用户
 
 1. 首先创建一个 Broker
 
+```conf
+# 如果你暂时没有一个可用的 MQTT Broker，你可以用这个公共的 Broker 进行测试
+
+Broker 地址: broker.emqx.io
+Broker 端口: 1883
+```
+
 2. 同一个 Broker 下可以创建多个客户端
 
 3. 回到连接页面，选择刚才创建的 Broker 下的客户端进行连接测试

README.md

@@ -24,6 +24,13 @@ Download from [GitHub Releases](https://github.com/emqx/MQTTX/releases) and inst
 
 1. Create broker
 
+```conf
+# If you don't have a mqtt broker available, you can use this public broker test.
+
+Broker Address: broker.emqx.io
+Broker Port: 1883
+```
+
 2. The same broker can create many clients
 
 3. Go back to connectons page, select the broker's client for connection testing

main/updateChecker.ts

@@ -1,7 +1,7 @@
 import { dialog, shell } from 'electron'
 import axios from 'axios'
 
-const version: string = 'v1.1.0'
+const version: string = 'v1.1.1'
 const release: string = 'https://api.github.com/repos/emqx/MQTTX/releases/latest'
 const downloadUrl: string = 'https://github.com/emqx/MQTTX/releases/latest'
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "MQTTX",
   "author": "EMQ X Team",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "Apache",
   "description": "MQTT desktop client",
   "repository": "https://github.com/emqx/MQTTX",

src/assets/scss/element/element-reset.scss

@@ -29,6 +29,9 @@
   border: 1px solid var(--color-border-default);
   background-color: var(--color-bg-normal);
 }
+.el-card.is-hover-shadow:hover {
+  box-shadow: 0 2px 12px 0 var(--color-shadow-card);
+}
 
 /* Form */
 .el-form {

src/assets/scss/theme/dark.scss

@@ -29,4 +29,5 @@ body.dark {
   /* Border color */
   --color-border-default: #383838;
   --color-border-bold: #969696;
+  --color-shadow-card: #00000059;
 }

src/assets/scss/theme/light.scss

@@ -29,4 +29,5 @@ body.light {
   /* Border color */
   --color-border-default: #E6E8F1;
   --color-border-bold: #979797;
+  --color-shadow-card: #0000001a;
 }

src/assets/scss/theme/purple.scss

@@ -29,4 +29,5 @@ body.purple {
   /* Border color */
   --color-border-default: #40414E;
   --color-border-bold: #4F5367;
+  --color-shadow-card: #00000085;
 }

src/datastore/index.ts

@@ -13,7 +13,7 @@ const STORE_PATH: string = APP.getPath('userData')
 
 // In production mode, during the first open application
 // APP.getPath('userData') gets the path nested and the datastore.js is loaded.
-// So if it doesn't exist, create it.
+// if it doesn't exist, create it.
 if (!isRenderer) {
   if (!fs.pathExistsSync(STORE_PATH)) {
     fs.mkdirpSync(STORE_PATH)

src/lang/brokers.ts

@@ -44,6 +44,10 @@ export default {
     zh: '新建客户端',
     en: 'New Client',
   },
+  editClient: {
+    zh: '编辑客户端',
+    en: 'Edit Client',
+  },
   username: {
     zh: '用户名',
     en: 'Username',

src/lang/common.ts

@@ -59,4 +59,12 @@ export default {
     zh: '此操作将删除该 {name}，是否继续？',
     en: 'This will delete {name}, Continue?',
   },
+  delete: {
+    zh: '删除',
+    en: 'Delete',
+  },
+  edit: {
+    zh: '编辑',
+    en: 'Edit',
+  },
 }

src/types/global.d.ts

@@ -87,6 +87,7 @@ declare global {
     value: any,
     label: string | TranslateResult,
     children?: Options[],
+    disabled?: boolean,
   }
 
   interface SubscriptionModel {

src/utils/api/broker.ts

@@ -3,11 +3,18 @@ import { BrokerModel, ClientModel } from '@/views/brokers/types'
 import { ConnectionModel } from '@/views/connections/types'
 import { deleteConnection, updateConnection, loadConnections } from './connection'
 
+type Type = 'broker' | 'client'
+
 interface QueryClient {
   brokeruuid: string
 }
 
-const deleteConnectionList = (id: string, type: 'broker' | 'client'): void => {
+interface Data {
+  brokerData?: BrokerModel,
+  clientData?: ClientModel,
+}
+
+const deleteConnectionList = (id: string, type: Type): void => {
   const uuid = type === 'broker' ? 'brokeruuid' : 'clientuuid'
   const connections: ConnectionModel[] | [] = loadConnections()
   connections.forEach((connection: ConnectionModel) => {
@@ -17,17 +24,38 @@ const deleteConnectionList = (id: string, type: 'broker' | 'client'): void => {
   })
 }
 
-const updateConnectionList = (brokeruuid: string, data: BrokerModel): void => {
+const updateConnectionList = (id: string, type: Type, payload: Data): void => {
+  const uuid = type === 'broker' ? 'brokeruuid' : 'clientuuid'
   const connections: ConnectionModel[] | [] = loadConnections()
-  connections.forEach((connection: ConnectionModel) => {
-    if (connection.brokeruuid === brokeruuid) {
-      connection.host = data.brokerAddress
-      connection.port = data.brokerPort
-      connection.path = data.path
-      connection.ssl = data.tls
-      updateConnection(connection.id as string, connection)
-    }
-  })
+  if (type === 'broker') {
+    const { brokerData } = payload
+    connections.forEach((connection: ConnectionModel) => {
+      if (connection[uuid] === id && brokerData) {
+        connection.host = brokerData.brokerAddress
+        connection.port = brokerData.brokerPort
+        connection.path = brokerData.path
+        connection.ssl = brokerData.tls
+        updateConnection(connection.id as string, connection)
+      }
+    })
+  } else if (type === 'client') {
+    const { clientData } = payload
+    connections.forEach((connection: ConnectionModel) => {
+      if (connection[uuid] === id && clientData) {
+        connection.name = clientData.clientName
+        connection.clientId = clientData.clientId
+        connection.username = clientData.username || ''
+        connection.password = clientData.password || ''
+        connection.keepalive = clientData.keepAlive
+        connection.connectTimeout = clientData.connectionTimeout || 4000
+        connection.clean = clientData.cleanSession
+        connection.ca = clientData.ca
+        connection.cert = clientData.cert
+        connection.key = clientData.key
+        updateConnection(connection.id as string, connection)
+      }
+    })
+  }
 }
 
 export const loadBrokers = (): BrokerModel[] | [] => {
@@ -43,7 +71,8 @@ export const createBroker = (data: BrokerModel): BrokerModel => {
 }
 
 export const updateBroker = (id: string, data: BrokerModel): BrokerModel => {
-  updateConnectionList(id, data)
+  const payload: Data = { brokerData: data }
+  updateConnectionList(id, 'broker', payload)
   return db.update<BrokerModel>('brokers', id, data)
 }
 
@@ -53,7 +82,15 @@ export const deleteBroker = (id: string): BrokerModel => {
   return db.remove<BrokerModel>('brokers', id)
 }
 
-export const updateClient = (id: string, data: ClientModel): ClientModel => {
+export const updateClient = (
+  id: string,
+  data: ClientModel,
+  updateConnect: boolean = false,
+): ClientModel => {
+  if (updateConnect) {
+    const payload = { clientData: data }
+    updateConnectionList(id, 'client', payload)
+  }
   return db.update<ClientModel>('clients', id, data)
 }
 
@@ -88,15 +125,22 @@ export const deleteClient = (clientId: string): ClientModel => {
 }
 
 export const loadClientOptions = (): Options[] => {
-  const brokers: BrokerModel[] | [] = db.get<BrokerModel[]>('brokers')
+  const brokers: BrokerModel[] = loadBrokers()
+  const connections: ConnectionModel[] = loadConnections()
+  const connectionIds = connections.map((connection) => connection.clientuuid)
+
   const res: Options[] = brokers.map((broker: BrokerModel): Options => {
     const clients = loadClients(broker.id as string)
-    const children: Options[] = clients.map((client: ClientModel): Options => (
-      {
+    const children: Options[] = clients.map((client: ClientModel): Options => {
+      const clientData: Options = {
         label: client.clientName,
         value: client.id,
       }
-    ))
+      if (connectionIds.includes(client.id as string)) {
+        clientData.disabled = true
+      }
+      return clientData
+    })
     return {
       label: broker.brokerName,
       value: broker.id,

src/utils/i18n.ts

@@ -13,7 +13,7 @@ export const formati18n = (transItems: i18nLocaleModel): VueI18n.LocaleMessages
     settings: {},
     common: {},
   }
-  transItems.forEach((item: string) => {
+  transItems.forEach((item) => {
     const values = require(`@/lang/${item}`).default
     Object.keys(values).forEach((key: string) => {
       const { zh: $zh, en: $en } = values[key]

src/views/brokers/BrokerContent.vue

@@ -65,10 +65,22 @@
     </div>
     <el-row :gutter="10">
       <el-col v-for="client in clients" :key="client.id" :span="12">
-        <el-card shadow="never" class="item-card client-card">
-          <a class="remove-icon" href="javascript:;" @click="removeClient(client)">
-            <i class="el-icon-close"></i>
-          </a>
+        <el-card shadow="hover" class="item-card client-card">
+          <el-dropdown class="oper-dropdown" trigger="click" @command="handleCommand">
+            <a class="oper-icon" href="javascript:;">
+              <i class="el-icon-more"></i>
+            </a>
+            <el-dropdown-menu slot="dropdown">
+              <a class="dropdown-clients-item" href="javascript:;" @click="editClient(client)">
+                <i class="el-icon-edit"></i>
+                {{ $t('common.edit') }}
+              </a>
+              <a class="dropdown-clients-item" href="javascript:;" @click="removeClient(client)">
+                <i class="el-icon-delete"></i>
+                {{ $t('common.delete') }}
+              </a>
+            </el-dropdown-menu>
+          </el-dropdown>
           <el-form label-suffix=":">
             <el-form-item :label="$t('brokers.clientName')">
               <span>{{ client.clientName }}</span>
@@ -104,6 +116,13 @@ export default class BrokerContent extends Vue {
     }
   }
 
+  private editClient(row: ClientModel): void {
+    this.$router.push({
+      path: `/clients/${this.record.id}`,
+      query: { oper: 'edit', clientId: row.id },
+    })
+  }
+
   private removeClient(row: ClientModel): void {
     const confirmDelete: string = this.$t('common.confirmDelete', { name: row.clientName }) as string
     this.$confirm(confirmDelete, this.$t('common.warning') as string, {
@@ -147,17 +166,24 @@ export default class BrokerContent extends Vue {
   .client-card {
     margin: 10px 5px 10px 0px;
     cursor: pointer;
-    .remove-icon {
+    .oper-dropdown {
       position: absolute;
       right: 10px;
-      top: 5px;
-      visibility: hidden;
-    }
-    &:hover {
-      .remove-icon {
-        visibility: visible;
+      top: 8px;
+      .oper-icon {
+        display: inline-block;
+        transform: rotate(90deg);
       }
     }
   }
 }
+.dropdown-clients-item {
+  display: block;
+  text-align: left;
+  padding: 5px 16px;
+  min-width: 85px;
+  i {
+    margin-right: 8px;
+  }
+}
 </style>

src/views/brokers/BrokersList.vue

@@ -10,7 +10,7 @@
         <div>
           <div class="broker-name">{{ broker.brokerName }}</div>
           <el-tooltip
-            :effect="theme"
+            :effect="theme !== 'light' ? 'dark' : 'light'"
             :disabled="`${broker.brokerAddress}:${broker.brokerPort}`.length < 35"
             :content="`${broker.brokerAddress}:${broker.brokerPort}`"
             placement="top">