feat(subscription): add MQTT5 prop subscription support

emqx · Oct 18, 2021 · 278bdcd · 278bdcd
1 parent a498c88
commit 278bdcd
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 2 deletions.
diff --git a/src/components/SubscriptionsList.vue b/src/components/SubscriptionsList.vue
@@ -99,6 +99,51 @@
               <el-input v-model="subRecord.alias" size="small"> </el-input>
             </el-form-item>
           </el-col>
+          <template v-if="record.mqttVersion === '5.0'">
+            <h3 class="topic-mqtt5-title">
+              MQTT 5 Options
+              <a
+                :class="['collapse-btn', subMQTT5Visible ? 'bottom' : 'top']"
+                href="javascript:;"
+                @click="handleCollapse"
+              >
+                <i class="el-icon-caret-top"></i>
+              </a>
+            </h3>
+            <el-collapse-transition>
+              <div v-show="subMQTT5Visible" class="topic-mqtt5">
+                <el-col :span="24">
+                  <el-form-item label-width="180px" label="No Local flag" prop="nl">
+                    <el-radio-group v-model="subRecord.nl">
+                      <el-radio :label="true">true</el-radio>
+                      <el-radio :label="false">false</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label-width="180px" label="Retain as Published flag" prop="rap">
+                    <el-radio-group v-model="subRecord.rap">
+                      <el-radio :label="true">true</el-radio>
+                      <el-radio :label="false">false</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label-width="180px" label="Retain Handling" prop="rh">
+                    <el-select v-model="subRecord.rh" size="small">
+                      <el-option
+                        v-for="retainOps in retainHandling"
+                        :key="retainOps"
+                        :label="retainOps"
+                        :value="retainOps"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </div>
+            </el-collapse-transition>
+          </template>
         </el-form>
       </el-row>
     </my-dialog>
@@ -137,6 +182,7 @@ export default class SubscriptionsList extends Vue {
 
   @Action('SHOW_SUBSCRIPTIONS') private changeShowSubscriptions!: (payload: SubscriptionsVisible) => void
   @Action('CHANGE_SUBSCRIPTIONS') private changeSubs!: (payload: Subscriptions) => void
+  @Action('TOGGLE_SUBMQTT5_VISIBLE') private toggleSubMQTT5Visible!: (payload: { subMQTT5Visible: boolean }) => void
   @Getter('activeConnection') private activeConnection!: ActiveConnection
   @Getter('currentTheme') private theme!: Theme
 
@@ -145,12 +191,17 @@ export default class SubscriptionsList extends Vue {
     connected: false,
   }
   private showDialog: boolean = false
+  private subMQTT5Visible: boolean = false
   private subRecord: SubscriptionModel = {
     topic: 'testtopic/#',
     qos: 0,
     createAt: time.getNowDate(),
     alias: '',
+    nl: false,
+    rap: false,
+    rh: 0,
   }
+  private retainHandling: RetainHandlingList = [0, 1, 2]
   private qosOption: QoSList = [0, 1, 2]
   private subsList: SubscriptionModel[] = []
   private copySuccess = false
@@ -180,6 +231,13 @@ export default class SubscriptionsList extends Vue {
     }
   }
 
+  private handleCollapse() {
+    this.subMQTT5Visible = !this.subMQTT5Visible
+    this.toggleSubMQTT5Visible({
+      subMQTT5Visible: this.subMQTT5Visible,
+    })
+  }
+
   private setColor() {
     this.topicColor = getRandomColor()
   }
@@ -261,15 +319,18 @@ export default class SubscriptionsList extends Vue {
     }
   }
 
-  public async subscribe({ topic, qos }: SubscriptionModel, isAuto?: boolean) {
+  public async subscribe({ topic, qos, nl, rap, rh }: SubscriptionModel, isAuto?: boolean) {
     if (isAuto) {
+      this.subRecord.nl = nl
+      this.subRecord.rap = rap
+      this.subRecord.rh = rh
       this.subRecord.topic = topic
       this.subRecord.qos = qos
       this.subRecord.color = getRandomColor()
     }
     let isFinshed = false
     if (this.client.subscribe) {
-      this.client.subscribe(topic, { qos: qos as QoS }, async (error, res) => {
+      this.client.subscribe(topic, { qos: qos as QoS, nl, rap, rh }, async (error, res) => {
         if (error) {
           this.$message.error(error)
           this.$log.error(`Topic: ${topic} subscribe error ${error} `)
@@ -403,6 +464,7 @@ export default class SubscriptionsList extends Vue {
 
 <style lang="scss">
 @import '~@/assets/scss/variable.scss';
+@import '~@/assets/scss/mixins.scss';
 
 .subscriptions-list-view {
   &.el-card {
@@ -516,6 +578,24 @@ export default class SubscriptionsList extends Vue {
       right: 0;
       top: 6px;
     }
+    .topic-mqtt5-title {
+      margin: 0 0 10px 10px;
+    }
+    .topic-mqtt5 {
+      .el-form-item {
+        margin-bottom: 8px;
+        .el-form-item__label {
+          text-align: left;
+        }
+      }
+    }
+    a.collapse-btn {
+      color: var(--color-text-light);
+      font-size: 1rem;
+      position: relative;
+      top: 1px;
+    }
+    @include collapse-btn-transform(0deg, 180deg);
   }
 }
 .topic-tooltip {

diff --git a/src/database/models/SubscriptionEntity.ts b/src/database/models/SubscriptionEntity.ts
@@ -2,6 +2,7 @@ import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from 't
 import ConnectionEntity from './ConnectionEntity'
 
 type QoS = 0 | 1 | 2
+type RetainHandling = 0 | 1 | 2
 
 @Entity('SubscriptionEntity')
 export default class SubscriptionEntity {
@@ -20,6 +21,15 @@ export default class SubscriptionEntity {
   @Column({ type: 'boolean', nullable: true, default: false })
   retain?: boolean
 
+  @Column({ type: 'boolean', nullable: true, default: false })
+  nl?: boolean
+
+  @Column({ type: 'boolean', nullable: true, default: false })
+  rap?: boolean
+
+  @Column({ type: 'simple-enum', enum: [0, 1, 2], default: 0 })
+  rh?: RetainHandling
+
   @Column({ type: 'varchar', nullable: true })
   color?: string
 

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
@@ -16,6 +16,7 @@ const UNREAD_MESSAGE_COUNT_INCREMENT = 'UNREAD_MESSAGE_COUNT_INCREMENT'
 const SET_CONNECTIONS_TREE = 'SET_CONNECTIONS_TREE'
 const TOGGLE_WILL_MESSAGE_VISIBLE = 'TOGGLE_WILL_MESSAGE_VISIBLE'
 const TOGGLE_ADVANCED_VISIBLE = 'TOGGLE_ADVANCED_VISIBLE'
+const TOGGLE_SUBMQTT5_VISIBLE = 'TOGGLE_SUBMQTT5_VISIBLE'
 const CHANGE_ALL_CONNECTIONS = 'CHANGE_ALL_CONNECTIONS'
 const SET_SCRIPT = 'SET_SCRIPT'
 const CHANGE_CONNECTION_COLLECTION = 'CHANGE_CONNECTION_COLLECTION'
@@ -118,6 +119,9 @@ const app = {
     [TOGGLE_WILL_MESSAGE_VISIBLE](state: App, willMessageVisible: boolean) {
       state.willMessageVisible = willMessageVisible
     },
+    [TOGGLE_SUBMQTT5_VISIBLE](state: App, subMQTT5Visible: boolean) {
+      state.subMQTT5Visible = subMQTT5Visible
+    },
     [CHANGE_ALL_CONNECTIONS](state: App, allConnections: ConnectionModel[] | []) {
       state.allConnections = allConnections
     },
@@ -183,6 +187,9 @@ const app = {
     TOGGLE_WILL_MESSAGE_VISIBLE({ commit }: any, payload: App) {
       commit(TOGGLE_WILL_MESSAGE_VISIBLE, payload.willMessageVisible)
     },
+    TOGGLE_SUBMQTT5_VISIBLE({ commit }: any, payload: App) {
+      commit(TOGGLE_SUBMQTT5_VISIBLE, payload.subMQTT5Visible)
+    },
     CHANGE_ALL_CONNECTIONS({ commit }: any, payload: App) {
       commit(CHANGE_ALL_CONNECTIONS, payload.allConnections)
     },

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { TranslateResult } from 'vue-i18n'
 import { MqttClient } from 'mqtt'
+import { type } from 'os'
 
 declare global {
   type $TSFixed = any
@@ -15,8 +16,12 @@ declare global {
 
   type QoS = 0 | 1 | 2
 
+  type RetainHandling = 0 | 1 | 2
+
   type QoSList = [0, 1, 2]
 
+  type RetainHandlingList = [0, 1, 2]
+
   type ProtocolMap = {
     [key in ProtocolOption]: string
   }
@@ -96,6 +101,7 @@ declare global {
     activeConnection: ActiveConnection
     willMessageVisible: boolean
     advancedVisible: boolean
+    subMQTT5Visible: boolean
     allConnections: ConnectionModel[]
     currentScript: ScriptState | null
     connectionTreeState: ConnectionTreeStateMap
@@ -153,6 +159,10 @@ declare global {
     retain?: boolean
     color?: string
     createAt: string
+    // MQTT 5.0 only
+    nl?: boolean
+    rap?: boolean
+    rh?: RetainHandling
   }
 
   interface MessageModel {