From f47f322bae0cf9b220cb0d2804974f7e1aecce79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Wed, 8 Apr 2020 21:23:17 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20alert-msg=E4=BA=8C=E7=BA=A7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2labels=E6=A0=BC=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  6 ++++
 .../common/bottomBox/tabs/alertMessageTab.vue | 28 +++++++++++++------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 0a26c19de..4c8f7bebe 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1336,6 +1336,9 @@ li{
 /* --end--复选框自定义颜色 */
 
 /* dashboard-dialog */
+.nz-message .el-dialog__body {
+  padding: 0 20px 10px 20px;
+}
 .nz-dialog {
   overflow: hidden;
 }
@@ -1409,6 +1412,9 @@ li{
 .el-textarea textarea {
   height: 140px !important;
 }
+.nz-message .el-textarea textarea {
+  height: 70px !important;
+}
 /*el-data-picker选中背景色*/
 .el-date-table td.current:not(.disabled) span {
   background-color: $global-text-color-active;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 24e261039..0ea1b296c 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -26,6 +26,7 @@
       tooltip-effect="light"
       v-scrollBar:el-table
       :height="$tableHeight.openSubList.subList"
+      :cell-class-name="labelsClassName"
       style="width: 100%;">
       <el-table-column
         :resizable="false"
@@ -34,7 +35,7 @@
         :width="item.width"
         :key="`col-${index}`"
         :label="item.label"
-        show-overflow-tooltip
+        :show-overflow-tooltip="item.prop != 'labels'"
         min-width="110px"
       >
         <template slot-scope="scope" :column="item">
@@ -70,6 +71,11 @@
                   :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
             <span v-else>-</span>
           </div>-->
+          <template v-else-if="item.prop == 'labels'">
+            <el-tag v-if="key != 'alertname' && key != 'severity'"
+                    type="info"
+                    size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{key}}：{{value}}</el-tag>
+          </template>
           <div v-else-if="item.prop == 'state'">
             <span class="">
               {{scope.row['state'] == 1 ? "Pending" : ""}}
@@ -134,15 +140,9 @@
             show: true,
             width: 180
           }, {
-            label: this.$t("alert.list.type"),
-            prop: 'type',
+            label: this.$t("alert.list.labels"),
+            prop: 'labels',
             show: true,
-            width: 100
-          }, {
-            label: this.$t("alert.list.linked"),
-            prop: 'linkObject',
-            show: true,
-            width: 140
           }, {
             label: this.$t("alert.severity"),
             prop: 'severity',
@@ -279,6 +279,9 @@
           if (response.code == 200) {
             this.loading = false;
             this.tableData = response.data.list;
+            this.tableData.forEach((item) => {
+              item.labels = JSON.parse(item.labels);
+            });
             this.pageObj.total = response.data.total;
           }
         });
@@ -316,6 +319,13 @@
             break;
         }
       },
+      labelsClassName(row) {
+        if (row.columnIndex == 1) {
+          return "alert-message-list-labels";
+        } else {
+          return "";
+        }
+      },
       fillProject: function (module) {
         this.$get('project', {"id": module.projectId}).then(response => {
           if (response.code == 200) {