feat(connections):add script tags

emqx · Jul 5, 2023 · 96960ce · 96960ce
1 parent c844653
commit 96960ce
Show file tree

Hide file tree

Showing 14 changed files with 262 additions and 11 deletions.
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
@@ -21,6 +21,7 @@ body.dark {
   --color-bg-card-normal: #34363c;
   --color-bg-card-gradient: linear-gradient(33deg, #27393c 0%, #2c2f3e 100%);
   --color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
+  --color-bg-tags: #262729;
 
   /* Font color */
   --color-text-title: #fff;
@@ -35,6 +36,7 @@ body.dark {
   --color-text-historybtn: #fff;
   --color-text-historybtn_disabled: #6f6f6f;
   --color-text-card_icon: #eaebec;
+  --color-text-tags: #d3d3d3;
 
   /* Accent color */
   --color-main-green: #34c388;

diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
@@ -21,6 +21,7 @@ body.light {
   --color-bg-card-normal: #edf4fc;
   --color-bg-card-gradient: linear-gradient(33deg, #e5fafc 0%, #eceeff 100%);
   --color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
+  --color-bg-tags: #f4f4f5;
 
   /* Font color */
   --color-text-title: #222b3b;
@@ -35,6 +36,7 @@ body.light {
   --color-text-historybtn: #25465f;
   --color-text-historybtn_disabled: #c0c4cc;
   --color-text-card_icon: #2f4852;
+  --color-text-tags: #616161;
 
   /* Accent color */
   --color-main-green: #34c388;

diff --git a/src/assets/scss/theme/night.scss b/src/assets/scss/theme/night.scss
@@ -21,6 +21,7 @@ body.night {
   --color-bg-card-normal: #323e4f;
   --color-bg-card-gradient: linear-gradient(33deg, #263e4b 0%, #2b344d 100%);
   --color-bg-btn-gradient: linear-gradient(90deg, #35c98d 0%, #37dc85 100%);
+  --color-bg-tags: #262729;
 
   /* Font color */
   --color-text-title: #fff;
@@ -35,6 +36,7 @@ body.night {
   --color-text-historybtn: #fff;
   --color-text-historybtn_disabled: #9d9fa0;
   --color-text-card_icon: #eaebec;
+  --color-text-tags: #d3d3d3;
 
   /* Accent color */
   --color-main-green: #34c388;

diff --git a/src/components/MsgLeftItem.vue b/src/components/MsgLeftItem.vue
@@ -1,6 +1,28 @@
 <template>
   <div class="msg-left-item">
-    <span class="topic-color" :style="{ background: color }"></span>
+    <div v-if="functionName || schemaName">
+      <el-tag size="mini">
+        <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,
+        height: functionName || schemaName ? 'calc(100% - 62px)' : 'calc(100% - 44px)',
+        top: functionName || schemaName ? '32px' : '11px',
+      }"
+    ></span>
     <div ref="leftPayload" class="left-payload payload" @contextmenu.prevent="customMenu($event)">
       <p class="left-info">
         <span class="topic">Topic: {{ topic }}</span>
@@ -52,13 +74,22 @@ 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 meta?: string
   @Prop({ required: false, default: false }) public retain!: boolean
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
   @Prop({ required: false, default: '' }) public color!: string
 
   private customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)
   }
+
+  get functionName() {
+    return this.meta ? JSON.parse(this.meta).functionName : null
+  }
+
+  get schemaName() {
+    return this.meta ? JSON.parse(this.meta).schemaName : null
+  }
 }
 </script>
 
@@ -69,12 +100,17 @@ export default class MsgLeftItem extends Vue {
   @include msg-item;
   text-align: left;
   position: relative;
+  .el-tag {
+    color: var(--color-text-tags);
+    background: var(--color-bg-tags);
+    border-color: var(--color-border-right_metainfo);
+  }
   .topic-color {
-    height: calc(100% - 44px);
+    height: calc(100% - 62px);
     display: inline-block;
     width: 4px;
     position: absolute;
-    top: 11px;
+    top: 32px;
     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">
+        <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,11 +65,20 @@ 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 meta?: string
   @Prop({ required: false, default: () => ({}) }) public properties!: PushPropertiesModel
 
   private customMenu(event: MouseEvent) {
     this.$emit('showmenu', this.payload, event)
   }
+
+  get functionName() {
+    return this.meta ? JSON.parse(this.meta).functionName : null
+  }
+
+  get schemaName() {
+    return this.meta ? JSON.parse(this.meta).schemaName : null
+  }
 }
 </script>
 
@@ -64,6 +88,11 @@ export default class MsgrightItem extends Vue {
 .msg-right-item {
   text-align: right;
   @include msg-item;
+  .el-tag {
+    color: var(--color-text-tags);
+    background: var(--color-bg-tags);
+    border-color: var(--color-border-right_metainfo);
+  }
   .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 { saveScriptName1688449795669 } from './migration/1688449795669-saveScriptName'
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
   if (!fs.pathExistsSync(STORE_PATH)) {
@@ -76,6 +77,7 @@ const ORMConfig = {
     modifyDefaultValueOfAutoScrollInterval1668672504891,
     removeAutoScroll1673603594888,
     supportSchemas1688042450818,
+    saveScriptName1688449795669,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

diff --git a/src/database/migration/1688042450818-supportSchemas.ts b/src/database/migration/1688042450818-supportSchemas.ts
@@ -9,7 +9,7 @@ export class supportSchemas1688042450818 implements MigrationInterface {
                 "id" varchar PRIMARY KEY NOT NULL,
                 "name" varchar NOT NULL,
                 "script" varchar NOT NULL,
-                "type" varchar NOT NULL
+                "type" varchar NULL DEFAULT NULL
             )
         `)
     await queryRunner.query(`

diff --git a/src/database/migration/1688449795669-saveScriptName.ts b/src/database/migration/1688449795669-saveScriptName.ts
@@ -0,0 +1,142 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class saveScriptName1688449795669 implements MigrationInterface {
+  name = 'saveScriptName1688449795669'
+
+  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,
+                "meta" 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,9 @@ export default class MessageEntity {
   @Column({ type: 'varchar' })
   topic!: string
 
+  @Column({ type: 'varchar', nullable: true })
+  meta?: string
+
   // MQTT5 props begin
   @Column({ type: 'boolean', nullable: true })
   payloadFormatIndicator?: boolean

diff --git a/src/database/models/ScriptEntity.ts b/src/database/models/ScriptEntity.ts
@@ -11,6 +11,6 @@ export default class ScriptEntity {
   @Column({ type: 'varchar' })
   script!: string
 
-  @Column({ type: 'varchar' })
+  @Column({ type: 'varchar', nullable: true, default: null })
   type?: string | null
 }
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,7 @@ declare global {
     topic: string
     color?: string
     properties?: PushPropertiesModel
-    function?: string
-    schema?: string
+    meta?: string
   }
 
   interface MessagePaginationModel {