From f42698fff1449bdceff7f4d59946e4a3b57257f9 Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Wed, 22 Jul 2020 19:04:30 +0800
Subject: [PATCH] =?UTF-8?q?perf:alertMessage=20label=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=20&=20=E9=83=A8=E5=88=86=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96=E8=A1=A5=E5=85=85=E3=80=81=E6=9B=B4=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-alert-list.vue    | 35 +++++++++++++------
 .../common/bottomBox/tabs/alertMessageTab.vue | 32 ++++++++++++++---
 .../src/components/common/language/cn.js      |  9 +++--
 .../src/components/common/language/en.js      |  5 ++-
 .../common/rightBox/alertConfigBox.vue        |  2 +-
 .../src/components/page/alert/list.vue        | 25 ++++++++++---
 .../src/components/page/config/system.vue     |  4 +--
 7 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index 468cf636d..7bca21891 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -100,11 +100,11 @@
                 <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
               </span>
                 <template v-else-if="item.prop == 'labels'">
-                  <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
-                                :cursor-point="tagType(key) == 'info' ? false : true"
-                                :key="key"
-                                v-if="key != 'alertname' && key != 'severity'"
-                                v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                  <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
+                                :cursor-point="tagType(item.label) == 'info' ? false : true"
+                                :key="item.label"
+                                v-if="item.label != 'alertname' && item.label != 'severity'"
+                                v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
                 </template>
                 <div v-else-if="item.prop == 'state'">
                 <span class="">
@@ -203,11 +203,11 @@
               <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
             </span>
                 <template v-else-if="item.prop == 'labels'">
-                  <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
-                                :cursor-point="tagType(key) == 'info' ? false : true"
-                                :key="key"
-                                v-if="key != 'alertname' && key != 'severity'"
-                                v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                  <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
+                                :cursor-point="tagType(item.label) == 'info' ? false : true"
+                                :key="item.label"
+                                v-if="item.label != 'alertname' && item.label != 'severity'"
+                                v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
                 </template>
                 <div v-else-if="item.prop == 'state'">
               <span class="">
@@ -503,6 +503,21 @@ export default {
       startResize(e) {
         let vm = this;
         this.$chartResizeTool.start(vm, this.data, e);
+      },
+      labelsSort:function(obj){
+        let buildIn=['asset','endpoint','module','project','datacenter']
+        let labels=JSON.parse(JSON.stringify(obj));
+        let result=[];
+        for(let key of buildIn){
+          if(key in labels){
+            result.push({label:key,value:labels[key]})
+            delete labels[key]
+          }
+        }
+        Object.keys(labels).sort().forEach(key=>{
+          result.push({label:key,value:labels[key]})
+        })
+        return result;
       },
         labelsClassName(row) {
           if (row.column.label == this.$t("alert.list.labels")) {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 32a8e437f..dac983e03 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -92,11 +92,11 @@
             <span v-else>-</span>
           </div>-->
           <template v-else-if="item.prop == 'labels'">
-            <nz-alert-tag :label="key" type="info" style="margin: 5px;"
+            <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
                           :cursor-point="false"
-                          :key="key"
-                          v-if="key != 'alertname' && key != 'severity'"
-                          v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                          :key="item.label"
+                          v-if="item.label != 'alertname' && item.label != 'severity'"
+                          v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
             <!--<el-tag v-if="key != 'alertname' && key != 'severity'"
                     :key="key"
                     type="info"
@@ -362,6 +362,15 @@
       }
     },
     computed: {
+      tagType() {
+        return (key) => {
+          if (key == 'asset' || key == 'module' || key == 'project' || key == 'datacenter' || key == 'endpoint') {
+            return "normal";
+          } else {
+            return "info";
+          }
+        }
+      },
       tagValue() {
         return (key, value) => {
           if (key == 'type') {
@@ -378,6 +387,21 @@
       }
     },
     methods: {
+      labelsSort:function(obj){
+        let buildIn=['asset','endpoint','module','project','datacenter']
+        let labels=JSON.parse(JSON.stringify(obj));
+        let result=[];
+        for(let key of buildIn){
+          if(key in labels){
+            result.push({label:key,value:labels[key]})
+            delete labels[key]
+          }
+        }
+        Object.keys(labels).sort().forEach(key=>{
+          result.push({label:key,value:labels[key]})
+        })
+        return result;
+      },
       elementsetShow(s, e) {
         this.showElementSet = true;
         this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 478aee039..92937b286 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -139,7 +139,7 @@ const cn = {
             label: "表格"
           },
           stackArea: {
-            label: "面积图"
+            label: "堆叠区域图"
           },
           url: {
             label: "URL",
@@ -703,7 +703,9 @@ const cn = {
         systemName: "系统名称",
         curUrl: "网站URL",
         timezone: "时区",
-        defaultCabinetUsize: "机柜默认U位"
+        defaultCabinetUsize: "机柜默认U位",
+        second:'秒',
+        day:'天'
       },
       email: {
         email: "邮件",
@@ -791,7 +793,8 @@ const cn = {
       name: "名称",
       receiver: "用户组",
       expr: "表达式",
-      for: "For (s)",
+      for: "持续(秒)",
+      second:'秒',
       link: "关联",
       option: "操作",
       alertConfig: "告警规则",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 962d455b0..43f91737f 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -710,7 +710,9 @@ const en = {
         systemName:'System name',
         curUrl:'Current site URL',
         timezone:'Timezone',
-        defaultCabinetUsize:'Cabinet U Size'
+        defaultCabinetUsize:'Cabinet U Size',
+        second:'second',
+        day:'day'
       },
       email:{
         email:'Email',
@@ -801,6 +803,7 @@ const en = {
       receiver: 'Receiver',//"用户组"
       expr: 'Expression',//"表达式"
       for: "Duration (s)",//For (s)
+      second:'second',
       link: 'Link',//'关联'
       option: 'Operation',//"操作"
       alertConfig: 'Alert rule',//"告警规则"
diff --git a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
index cdadfaf83..0c433965f 100644
--- a/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
@@ -65,7 +65,7 @@
           <!--last-->
           <el-form-item :label="$t('alert.config.for')" prop="last">
             <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
-              <template slot="append">second</template>
+              <template slot="append">{{$t('alert.config.second')}}</template>
             </el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
           </el-form-item>
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 11ce0f201..33796f2b6 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -107,11 +107,11 @@
               </div>-->
               <template v-else-if="item.prop == 'labels'">
 <!--                <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;" @click="showTagDetail(scope.row, key)"-->
-                <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;"
-                              :cursor-point="tagType(key) == 'info' ? false : true"
-                              :key="key"
-                              v-if="key != 'alertname' && key != 'severity'"
-                              v-for="(value, key) in scope.row.labels">{{value}}</nz-alert-tag>
+                <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
+                              :cursor-point="tagType(item.label) == 'info' ? false : true"
+                              :key="item.label"
+                              v-if="item.label != 'alertname' && item.label != 'severity'"
+                              v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
                 <!--<el-tag @click="showTagDetail(scope.row, key)"
                         :key="key"
                         :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
@@ -443,6 +443,21 @@
       }
     },
     methods: {
+      labelsSort:function(obj){
+        let buildIn=['asset','endpoint','module','project','datacenter']
+        let labels=JSON.parse(JSON.stringify(obj));
+        let result=[];
+        for(let key of buildIn){
+          if(key in labels){
+            result.push({label:key,value:labels[key]})
+            delete labels[key]
+          }
+        }
+        Object.keys(labels).sort().forEach(key=>{
+          result.push({label:key,value:labels[key]})
+        })
+        return result;
+      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index c2234b94e..6b23eb0ae 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -53,10 +53,10 @@
                 <el-input v-model="basic.node_exporter_target_path"></el-input>
               </el-form-item>
               <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
-                <el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">s</span>
+                <el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
               </el-form-item>
               <el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
-                <el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">d</span>
+                <el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
               </el-form-item>
               <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
 <!--                <el-input v-model.number="basic.timezone" ></el-input>-->