feat(connections):add script tags

emqx · Jul 4, 2023 · 812be47 · 812be47
1 parent c844653
commit 812be47
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 6 deletions.
diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -1,5 +1,20 @@
 <template>
   <div class="msg-left-item">
+    <div v-if="functionName || schemaName">
+      <el-tag size="mini" color="#f4f4f5">
+        <span>&nbsp;{{ $t('connections.usedScript') }}</span>
+
+        <span v-if="functionName"
+          >&nbsp;<b>{{ functionName }}</b
+          >&nbsp;{{ $t('script.functionName') }}&nbsp;</span
+        >
+        <span v-if="functionName && schemaName">{{ $t('connections.usedScriptAnd') }}</span
+        ><span v-if="schemaName"
+          >&nbsp;<b>{{ schemaName }}</b
+          >&nbsp;{{ $t('script.schemaName') }}&nbsp;</span
+        ></el-tag
+      >
+    </div>
     <span class="topic-color" :style="{ background: color }"></span>
     <div ref="leftPayload" class="left-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="left-info">
@@ -52,6 +67,8 @@ export default class MsgLeftItem extends Vue {
   @Prop({ required: true }) public qos!: number
   @Prop({ required: true }) public payload!: string
   @Prop({ required: true }) public createAt!: string
+  @Prop({ required: false }) public functionName?: string
+  @Prop({ required: false }) public schemaName?: string
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
@@ -69,12 +86,15 @@ export default class MsgLeftItem extends Vue {
   @include msg-item;
   text-align: left;
   position: relative;
+  .el-tag {
+    color: var(--color-text-default);
+  }
   .topic-color {
-    height: calc(100% - 44px);
+    height: calc(100% - 58px);
     display: inline-block;
     width: 4px;
     position: absolute;
-    top: 11px;
+    top: 30px;
     border-radius: 8px;
     left: -4px;
   }

diff --git a/src/components/MsgRightItem.vue b/src/components/MsgRightItem.vue
@@ -1,5 +1,20 @@
 <template>
   <div class="msg-right-item">
+    <div v-if="functionName || schemaName">
+      <el-tag size="mini" color="#f4f4f5">
+        <span>&nbsp;{{ $t('connections.usedScript') }}</span>
+
+        <span v-if="functionName"
+          >&nbsp;<b>{{ functionName }}</b
+          >&nbsp;{{ $t('script.functionName') }}&nbsp;</span
+        >
+        <span v-if="functionName && schemaName">{{ $t('connections.usedScriptAnd') }}</span
+        ><span v-if="schemaName"
+          >&nbsp;<b>{{ schemaName }}</b
+          >&nbsp;{{ $t('script.schemaName') }}&nbsp;</span
+        ></el-tag
+      >
+    </div>
     <div class="right-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="right-info">
         <span class="topic">Topic: {{ topic }}</span>
@@ -50,6 +65,8 @@ export default class MsgrightItem extends Vue {
   @Prop({ required: true }) public qos!: number
   @Prop({ required: true }) public payload!: string
   @Prop({ required: true }) public createAt!: string
+  @Prop({ required: false }) public functionName?: string
+  @Prop({ required: false }) public schemaName?: string
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
 
   private customMenu(event: MouseEvent) {
@@ -64,6 +81,9 @@ export default class MsgrightItem extends Vue {
 .msg-right-item {
   text-align: right;
   @include msg-item;
+  .el-tag {
+    color: var(--color-text-default);
+  }
   .right-payload {
     color: var(--color-text-active);
     background: var(--color-text-right_block);

diff --git a/src/database/database.config.ts b/src/database/database.config.ts
@@ -35,6 +35,7 @@ import { autoScrollInterval1668415942736 } from './migration/1668415942736-autoS
 import { modifyDefaultValueOfAutoScrollInterval1668672504891 } from './migration/1668672504891-modifyDefaultValueOfAutoScrollInterval'
 import { removeAutoScroll1673603594888 } from './migration/1673603594888-removeAutoScroll'
 import { supportSchemas1688042450818 } from './migration/1688042450818-supportSchemas'
+import { saveScriptName1688435003384 } from './migration/1688435003384-saveScriptName'
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
   if (!fs.pathExistsSync(STORE_PATH)) {
@@ -76,6 +77,7 @@ const ORMConfig = {
     modifyDefaultValueOfAutoScrollInterval1668672504891,
     removeAutoScroll1673603594888,
     supportSchemas1688042450818,
+    saveScriptName1688435003384,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

diff --git a/src/database/migration/1688435003384-saveScriptName.ts b/src/database/migration/1688435003384-saveScriptName.ts
@@ -0,0 +1,143 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class saveScriptName1688435003384 implements MigrationInterface {
+  name = 'saveScriptName1688435003384'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "temporary_MessageEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "createAt" varchar NOT NULL,
+                "out" boolean NOT NULL,
+                "payload" varchar NOT NULL,
+                "qos" varchar CHECK(qos IN ('0', '1', '2')) NOT NULL DEFAULT (0),
+                "retain" boolean NOT NULL,
+                "topic" varchar NOT NULL,
+                "connection_id" varchar,
+                "payloadFormatIndicator" boolean,
+                "messageExpiryInterval" integer,
+                "topicAlias" integer,
+                "responseTopic" varchar,
+                "correlationData" varchar,
+                "userProperties" varchar,
+                "subscriptionIdentifier" integer,
+                "contentType" varchar,
+                "functionName" varchar,
+                "schemaName" varchar,
+                CONSTRAINT "FK_0ec5f9ea56492cdc39eb70dafd0" FOREIGN KEY ("connection_id") REFERENCES "ConnectionEntity" ("id") ON DELETE CASCADE ON UPDATE NO ACTION
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_MessageEntity"(
+                    "id",
+                    "createAt",
+                    "out",
+                    "payload",
+                    "qos",
+                    "retain",
+                    "topic",
+                    "connection_id",
+                    "payloadFormatIndicator",
+                    "messageExpiryInterval",
+                    "topicAlias",
+                    "responseTopic",
+                    "correlationData",
+                    "userProperties",
+                    "subscriptionIdentifier",
+                    "contentType"
+                )
+            SELECT "id",
+                "createAt",
+                "out",
+                "payload",
+                "qos",
+                "retain",
+                "topic",
+                "connection_id",
+                "payloadFormatIndicator",
+                "messageExpiryInterval",
+                "topicAlias",
+                "responseTopic",
+                "correlationData",
+                "userProperties",
+                "subscriptionIdentifier",
+                "contentType"
+            FROM "MessageEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "MessageEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_MessageEntity"
+                RENAME TO "MessageEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "MessageEntity"
+                RENAME TO "temporary_MessageEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "MessageEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "createAt" varchar NOT NULL,
+                "out" boolean NOT NULL,
+                "payload" varchar NOT NULL,
+                "qos" varchar CHECK(qos IN ('0', '1', '2')) NOT NULL DEFAULT (0),
+                "retain" boolean NOT NULL,
+                "topic" varchar NOT NULL,
+                "connection_id" varchar,
+                "payloadFormatIndicator" boolean,
+                "messageExpiryInterval" integer,
+                "topicAlias" integer,
+                "responseTopic" varchar,
+                "correlationData" varchar,
+                "userProperties" varchar,
+                "subscriptionIdentifier" integer,
+                "contentType" varchar,
+                CONSTRAINT "FK_0ec5f9ea56492cdc39eb70dafd0" FOREIGN KEY ("connection_id") REFERENCES "ConnectionEntity" ("id") ON DELETE CASCADE ON UPDATE NO ACTION
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "MessageEntity"(
+                    "id",
+                    "createAt",
+                    "out",
+                    "payload",
+                    "qos",
+                    "retain",
+                    "topic",
+                    "connection_id",
+                    "payloadFormatIndicator",
+                    "messageExpiryInterval",
+                    "topicAlias",
+                    "responseTopic",
+                    "correlationData",
+                    "userProperties",
+                    "subscriptionIdentifier",
+                    "contentType"
+                )
+            SELECT "id",
+                "createAt",
+                "out",
+                "payload",
+                "qos",
+                "retain",
+                "topic",
+                "connection_id",
+                "payloadFormatIndicator",
+                "messageExpiryInterval",
+                "topicAlias",
+                "responseTopic",
+                "correlationData",
+                "userProperties",
+                "subscriptionIdentifier",
+                "contentType"
+            FROM "temporary_MessageEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_MessageEntity"
+        `)
+  }
+}
diff --git a/src/database/models/MessageEntity.ts b/src/database/models/MessageEntity.ts
@@ -26,6 +26,12 @@ export default class MessageEntity {
   @Column({ type: 'varchar' })
   topic!: string
 
+  @Column({ type: 'varchar', nullable: true })
+  functionName?: string
+
+  @Column({ type: 'varchar', nullable: true })
+  schemaName?: string
+
   // MQTT5 props begin
   @Column({ type: 'boolean', nullable: true })
   payloadFormatIndicator?: boolean

diff --git a/src/lang/connections.ts b/src/lang/connections.ts
@@ -810,4 +810,18 @@ export default {
     ja: '少なくとも1つの証明書ファイルをアップロードしてください',
     hu: 'Legalább egy tanúsítványfájlt töltsön fel',
   },
+  usedScript: {
+    zh: '使用',
+    en: 'Used',
+    tr: '',
+    ja: '',
+    hu: '',
+  },
+  usedScriptAnd: {
+    zh: '和',
+    en: 'And',
+    tr: '',
+    ja: '',
+    hu: '',
+  },
 }
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -176,8 +176,8 @@ declare global {
     topic: string
     color?: string
     properties?: PushPropertiesModel
-    function?: string
-    schema?: string
+    functionName?: string
+    schemaName?: string
   }
 
   interface MessagePaginationModel {

diff --git a/src/utils/element.ts b/src/utils/element.ts
@@ -43,7 +43,7 @@ import {
   FormItem,
   Tabs,
   TabPane,
-  // Tag,
+  Tag,
   Tree,
   Alert,
   // Slider,
@@ -116,7 +116,7 @@ export default (Vue: typeof _Vue) => {
   Vue.use(FormItem)
   Vue.use(Tabs)
   Vue.use(TabPane)
-  // Vue.use(Tag)
+  Vue.use(Tag)
   Vue.use(Tree)
   Vue.use(Alert)
   // Vue.use(Slider)

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -1115,6 +1115,17 @@ export default class ConnectionsDetail extends Vue {
       retain,
       properties,
     }
+    if (
+      this.scriptOption &&
+      ['all', 'received'].includes(this.scriptOption.apply) &&
+      this.scriptOption?.function?.name
+    ) {
+      receivedMessage.functionName = this.scriptOption.function.name
+    }
+    if (this.scriptOption && ['all', 'received'].includes(this.scriptOption.apply) && this.scriptOption?.schema?.name) {
+      receivedMessage.schemaName = this.scriptOption.schema.name
+    }
+
     return receivedMessage
   }
 
@@ -1386,6 +1397,20 @@ export default class ConnectionsDetail extends Vue {
           retain,
           properties,
         }
+        if (
+          this.scriptOption &&
+          ['all', 'publish'].includes(this.scriptOption.apply) &&
+          this.scriptOption?.function?.name
+        ) {
+          publishMessage.functionName = this.scriptOption.function.name
+        }
+        if (
+          this.scriptOption &&
+          ['all', 'publish'].includes(this.scriptOption.apply) &&
+          this.scriptOption?.schema?.name
+        ) {
+          publishMessage.schemaName = this.scriptOption.schema.name
+        }
         if (this.record.id) {
           // Save message
           const { messageService } = useServices()