feat(client): allow client empty

emqx · Sep 24, 2024 · 337a8be · 337a8be
1 parent 80a3dd0
commit 337a8be
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 63 deletions.
diff --git a/src/utils/mqttUtils.ts b/src/utils/mqttUtils.ts
@@ -53,6 +53,7 @@ export const getClientOptions = (record: ConnectionModel): IClientOptions => {
     clientIdWithTime,
   } = record
   const protocolVersion = mqttVersionDict[mqttVersion as '3.1' | '3.1.1' | '5.0']
+  console.log(typeof clientId)
   const options: IClientOptions = {
     clientId,
     keepalive,

diff --git a/src/views/connections/ConnectionForm.vue b/src/views/connections/ConnectionForm.vue
@@ -71,35 +71,6 @@
                 </a>
               </el-tooltip>
             </el-col>
-            <el-col :span="22">
-              <el-form-item label-width="93px" label="Client ID" prop="clientId">
-                <el-input size="mini" v-model="record.clientId"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <a href="javascript:;" class="icon-oper" @click="setClientID">
-                <i class="el-icon-refresh-right"></i>
-              </a>
-            </el-col>
-            <!-- add clientID timestamp check icon -->
-            <el-col :span="1">
-              <el-tooltip
-                placement="top"
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                :open-delay="500"
-                :offset="80"
-                :content="$t('connections.clientIdWithTimeTip')"
-              >
-                <a
-                  href="javascript:;"
-                  class="icon-oper-pure"
-                  @click="reverseClientIDWithTime"
-                  :class="{ 'icon-oper-active': clientIdWithTime }"
-                >
-                  <i class="el-icon-time"></i>
-                </a>
-              </el-tooltip>
-            </el-col>
             <el-col :span="22">
               <el-form-item class="host-item" label-width="93px" :label="$t('connections.brokerIP')" prop="host">
                 <el-col :span="6">
@@ -129,7 +100,35 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
-
+            <el-col :span="22">
+              <el-form-item label-width="93px" label="Client ID" prop="clientId">
+                <el-input size="mini" v-model="record.clientId" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <a href="javascript:;" class="icon-oper" @click="setClientID">
+                <i class="el-icon-refresh-right"></i>
+              </a>
+            </el-col>
+            <!-- add clientID timestamp check icon -->
+            <el-col :span="1">
+              <el-tooltip
+                placement="top"
+                :effect="theme !== 'light' ? 'light' : 'dark'"
+                :open-delay="500"
+                :offset="80"
+                :content="$t('connections.clientIdWithTimeTip')"
+              >
+                <a
+                  href="javascript:;"
+                  class="icon-oper-pure"
+                  @click="reverseClientIDWithTime"
+                  :class="{ 'icon-oper-active': clientIdWithTime }"
+                >
+                  <i class="el-icon-time"></i>
+                </a>
+              </el-tooltip>
+            </el-col>
             <template v-if="record.protocol === 'ws' || record.protocol === 'wss'">
               <el-col :span="22">
                 <el-form-item label-width="93px" label="Path" prop="path">
@@ -656,7 +655,6 @@ export default class ConnectionForm extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
       path: [{ required: true, message: this.$t('common.inputRequired') }],
       host: [{ required: true, message: this.$t('common.inputRequired') }],
       port: [{ required: true, message: this.$t('common.inputRequired') }],

diff --git a/src/views/connections/ConnectionInfo.vue b/src/views/connections/ConnectionInfo.vue
@@ -146,7 +146,7 @@ export default class ConnectionInfo extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
+      // clientId: [{ required: true, message: this.$t('common.inputRequired') }],
     }
   }
 

diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
@@ -61,35 +61,6 @@
                 </a>
               </el-tooltip>
             </el-col>
-            <el-col :span="22">
-              <el-form-item label-width="93px" label="Client ID" prop="clientId">
-                <el-input size="mini" v-model="record.clientId"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="1">
-              <a href="javascript:;" class="icon-oper" @click="setClientID">
-                <i class="el-icon-refresh-right"></i>
-              </a>
-            </el-col>
-            <!-- add clientID timestamp check icon -->
-            <el-col :span="1">
-              <el-tooltip
-                placement="top"
-                :effect="theme !== 'light' ? 'light' : 'dark'"
-                :open-delay="500"
-                :offset="80"
-                :content="$t('connections.clientIdWithTimeTip')"
-              >
-                <a
-                  href="javascript:;"
-                  class="icon-oper-pure"
-                  @click="reverseClientIDWithTime"
-                  :class="{ 'icon-oper-active': clientIdWithTime }"
-                >
-                  <i class="el-icon-time"></i>
-                </a>
-              </el-tooltip>
-            </el-col>
             <el-col :span="22">
               <el-form-item class="host-item" label-width="93px" :label="$t('connections.brokerIP')" prop="host">
                 <el-col :span="6">
@@ -156,6 +127,35 @@
                 </el-input-number>
               </el-form-item>
             </el-col>
+            <el-col :span="22">
+              <el-form-item label-width="93px" label="Client ID" prop="clientId">
+                <el-input size="mini" v-model="record.clientId" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <a href="javascript:;" class="icon-oper" @click="setClientID">
+                <i class="el-icon-refresh-right"></i>
+              </a>
+            </el-col>
+            <!-- add clientID timestamp check icon -->
+            <el-col :span="1">
+              <el-tooltip
+                placement="top"
+                :effect="theme !== 'light' ? 'light' : 'dark'"
+                :open-delay="500"
+                :offset="80"
+                :content="$t('connections.clientIdWithTimeTip')"
+              >
+                <a
+                  href="javascript:;"
+                  class="icon-oper-pure"
+                  @click="reverseClientIDWithTime"
+                  :class="{ 'icon-oper-active': clientIdWithTime }"
+                >
+                  <i class="el-icon-time"></i>
+                </a>
+              </el-tooltip>
+            </el-col>
 
             <template v-if="record.protocol === 'ws' || record.protocol === 'wss'">
               <el-col :span="22">
@@ -614,7 +614,6 @@ export default class ConnectionCreate extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
       path: [{ required: true, message: this.$t('common.inputRequired') }],
       host: [{ required: true, message: this.$t('common.inputRequired') }],
       port: [{ required: true, message: this.$t('common.inputRequired') }],

diff --git a/web/src/views/connections/ConnectionInfo.vue b/web/src/views/connections/ConnectionInfo.vue
@@ -131,7 +131,6 @@ export default class ConnectionInfo extends Vue {
         { required: true, message: this.$t('common.inputRequired') },
         { validator: this.validateName, trigger: 'blur' },
       ],
-      clientId: [{ required: true, message: this.$t('common.inputRequired') }],
     }
   }