feat(mqtt5): add message mqtt5 props support

emqx · Nov 22, 2021 · 716b7b8 · 716b7b8
1 parent 739da1e
commit 716b7b8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 23 deletions.
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
@@ -6,19 +6,19 @@
           <el-form ref="form" label-width="175px" label-position="left" :model="MQTT5Props" :rules="rules">
             <el-row class="form-row" :gutter="20">
               <el-col :span="24">
-                <el-form-item :label="`Content Type`" prop="contentType">
+                <el-form-item label="Content Type" prop="contentType">
                   <el-input size="mini" v-model="MQTT5Props.contentType"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="`Payload Format Indicator`" prop="payloadFormatIndicator">
+                <el-form-item label="Payload Format Indicator" prop="payloadFormatIndicator">
                   <el-checkbox style="width: 100%" size="mini" v-model="MQTT5Props.payloadFormatIndicator" border>{{
                     MQTT5Props.payloadFormatIndicator ? 'true' : 'false'
                   }}</el-checkbox>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="`Message Expiry Interval`" prop="messageExpiryInterval">
+                <el-form-item label="Message Expiry Interval" prop="messageExpiryInterval">
                   <el-input-number
                     v-model="MQTT5Props.messageExpiryInterval"
                     size="mini"
@@ -29,7 +29,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="`Correlation Data`" prop="correlationData">
+                <el-form-item label="Correlation Data" prop="correlationData">
                   <el-input
                     placeholder="correlation data"
                     size="mini"
@@ -39,17 +39,23 @@
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="`Topic Alias`" prop="topicAlias">
-                  <el-input placeholder="topic alias" size="mini" v-model="MQTT5Props.topicAlias" type="text" />
+                <el-form-item label="Topic Alias" prop="topicAlias">
+                  <el-input-number
+                    v-model="MQTT5Props.topicAlias"
+                    size="mini"
+                    :min="1"
+                    controls-position="right"
+                    type="number"
+                  />
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="`Response Topic`" prop="responseTopic">
+                <el-form-item label="Response Topic" prop="responseTopic">
                   <el-input placeholder="response topic" size="mini" v-model="MQTT5Props.responseTopic" type="text" />
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item class="form-user" :label="`User Properties`" prop="userPropertie">
+                <el-form-item class="form-user" label="User Properties" prop="userPropertie">
                   <el-button icon="el-icon-plus" class="btn-props-plus" type="text" @click="addItem" />
                   <div class="user-props">
                     <div v-for="(item, index) in listData" class="user-props-row" :key="index">
@@ -77,8 +83,8 @@
             </el-row>
           </el-form>
           <div class="meta-btn">
-            <el-button size="mini" type="outline" @click="submitForm">save</el-button>
-            <el-button size="mini" type="outline" @click="resetForm">reset</el-button>
+            <el-button size="mini" type="outline" @click="submitForm">{{ $t('common.save') }}</el-button>
+            <el-button size="mini" type="outline" @click="resetForm">{{ $t('common.reset') }}</el-button>
           </div>
         </el-card>
       </div>
@@ -399,6 +405,7 @@ export default class MsgPublish extends Vue {
   private async send() {
     this.msgRecord.id = getMessageId()
     this.msgRecord.createAt = time.getNowDate()
+    this.mqtt5PropsEnable && (this.msgRecord.props = this.MQTT5Props)
     this.$emit('handleSend', this.msgRecord, this.payloadType, this.loadHistoryData)
   }
 
@@ -510,10 +517,13 @@ export default class MsgPublish extends Vue {
             max-height: 80px;
             overflow-y: scroll;
             white-space: nowrap;
+            .el-form-item__label {
+              position: fixed;
+            }
             .btn-props-plus {
-              position: absolute;
-              left: -40px;
-              top: -0px;
+              position: fixed;
+              left: 152px;
+              top: 263px;
             }
             .user-props {
               .user-props-row {
@@ -636,12 +646,14 @@ export default class MsgPublish extends Vue {
       width: 46px;
     }
     .retain-block {
-      margin-left: 4px;
+      margin-left: 8px;
     }
     .meta-block {
-      margin-left: 4px;
-      border-color: var(--color-border-default);
-      color: var(--color-text-default);
+      margin-left: 6px;
+      &:not(.is-disabled) {
+        border-color: var(--color-border-default);
+        color: var(--color-text-default);
+      }
       &.meta-block-active {
         color: var(--color-main-green);
         border-color: var(--color-main-green);

diff --git a/src/lang/common.ts b/src/lang/common.ts
@@ -41,6 +41,13 @@ export default {
     ja: '保存',
     hu: 'Mentés',
   },
+  reset: {
+    zh: '重置',
+    en: 'Reset',
+    tr: 'sıfırlama',
+    ja: 'リセット',
+    hu: 'átszed',
+  },
   noData: {
     zh: '暂无数据',
     en: 'No Data',

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -172,6 +172,7 @@ declare global {
     retain: boolean
     topic: string
     color?: string
+    props?: PushPropertiesModel
   }
 
   interface HistoryMessageHeaderModel {
@@ -271,9 +272,9 @@ declare global {
 
   // MQTT 5 feature
   interface PushPropertiesModel {
-    payloadFormatIndicator?: number
+    payloadFormatIndicator?: boolean
     messageExpiryInterval?: number
-    topicAlias?: string
+    topicAlias?: number
     responseTopic?: string
     correlationData?: Buffer
     userProperties?: Object

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -196,7 +196,7 @@
       :style="{
         paddingTop: showClientInfo ? msgTop.open : msgTop.close,
         paddingBottom: `${msgBottom}px`,
-        marginLeft: showSubs ? '570px' : '341px',
+        marginLeft: showSubs ? '571px' : '341px',
       }"
     >
       <div class="connections-body">
@@ -253,7 +253,7 @@
         </contextmenu>
       </div>
 
-      <div ref="connectionFooter" class="connections-footer" :style="{ marginLeft: showSubs ? '570px' : '341px' }">
+      <div ref="connectionFooter" class="connections-footer" :style="{ marginLeft: showSubs ? '571px' : '341px' }">
         <ResizeHeight v-model="inputHeight" />
         <MsgPublish
           :mqtt5PropsEnable="record.mqttVersion === '5.0'"
@@ -1170,7 +1170,12 @@ export default class ConnectionsDetail extends Vue {
       this.stopTimedSend()
       return false
     }
-    const { id, topic, qos, payload, retain } = message
+    const { id, topic, qos, payload, retain, props } = message
+    let properties: PushPropertiesModel | undefined = undefined
+    if (props && Object.entries(props).filter(([_, v]) => v !== null && v !== undefined).length > 0) {
+      properties = Object.fromEntries(Object.entries(props).filter(([k, v]) => v !== null && v !== undefined))
+    }
+
     if (!topic) {
       this.$message.warning(this.$t('connections.topicReuired') as string)
       this.stopTimedSend()
@@ -1185,7 +1190,8 @@ export default class ConnectionsDetail extends Vue {
     const convertPayload = this.convertPayloadByScript(payload, 'received')
     const sendPayload = this.convertPayloadByType(convertPayload, type, 'publish')
 
-    this.client.publish!(topic, sendPayload, { qos: qos as QoS, retain }, async (error: Error) => {
+    // @ts-ignore properties issue, waiting PR https://github.com/mqttjs/MQTT.js/pull/1359 merged
+    this.client.publish!(topic, sendPayload, { qos: qos as QoS, retain, properties }, async (error: Error) => {
       if (error) {
         const errorMsg = error.toString()
         this.$message.error(errorMsg)