From 1018584b79b302d7439bd646898816cc04ca155e 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, 16 Dec 2020 18:41:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BF=AE=E5=A4=8Dmetric=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B2=A1=E6=95=B0=E6=8D=AEbug=EF=BC=9B=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  12 +-
 .../src/components/common/header.vue          |   3 +-
 .../src/components/common/project/addLine.vue |  45 +++++++
 .../src/components/common/project/addNode.vue | 127 ++++++++++++++++--
 .../components/common/project/topology.vue    |   2 +-
 .../components/common/rightBox/moduleBox.vue  |   2 +-
 .../src/components/page/config/mibBrowser.vue |   4 +-
 .../src/components/page/config/system.vue     |  12 +-
 8 files changed, 179 insertions(+), 28 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 7c73e74ce..834265944 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -288,14 +288,12 @@ li{
 .nz-btn.nz-btn-style-normal-new { /* 新版橙色按钮 */
   background: $btn-normal-background-color-new;
   color: $btn-normal-txt-color-new;
-  //box-shadow: $btn-normal-shadow;
-  border: 0px;
+  border: 1px solid $btn-normal-background-color-new;
 }
 .nz-btn.nz-btn-style-error-new { /* 新版红色色按钮 */
   background: $btn-error-background-color-new;
   color: $btn-error-txt-color-new;
-  //box-shadow: $btn-normal-shadow;
-  border: 0px;
+  border: 1px solid $btn-error-background-color-new;
 }
 .nz-btn.nz-btn-style-light-new { /* 新版浅色按钮 */
   background: #fff;
@@ -1271,16 +1269,16 @@ li{
   margin-right: 15px
 }
 .dc-asset-state-in {
-  background-color: #90ee90;
+  background-color: $success-color;
 }
 .dc-asset-state-out {
   background-color: orange;
 }
 .dc-asset-state-suspended {
-  background-color:  rgba(255, 0, 0, 0.6);;
+  background-color: $danger-color;
 }
 .dc-asset-state-P1 {
-  background-color: rgba(255, 0, 0, 0.6);
+  background-color: $danger-color;
 }
 .chart-box-dropdown {
   width: 519px;
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 23ac88689..7c7ca221f 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -460,8 +460,9 @@
       logout() {
         this.$get('logout').then(() => {
           this.logoutSuccess();
+          document.location.href = "/";
         });
-        document.location.reload();
+
         //this.jumpTo('/login');
       },
       refreshLang() {
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 577d12e04..97bf1eb48 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -311,6 +311,10 @@
     },
     data(){
       return{
+        metricList: [], // metric列表
+        metricCascaderList:[],//metric级联列表
+        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
+        metricOptions: [],
         form:{
           arrows:'0',
           label:'',
@@ -354,6 +358,7 @@
     },
     mounted(){
       // this.addExpression();
+      this.queryMetrics();
       if( this.lineData.expressions){
         this.lineData.expressions.forEach((item,index)=>{
           this.$refs['promql-'+(index)][0].metricChange(this.expressions[index]);
@@ -361,6 +366,46 @@
       }
     },
     methods:{
+      getMetricOptions() {
+        return this.metricOptions;
+      },
+      queryMetrics() {
+        this.metricOptions = [];
+        this.$get('prom/api/v1/label/__name__/values').then(response=>{
+          if(response.status == 'success'){
+            let metrics=response.data.sort();
+            let metricMap=new Map();
+            metrics.forEach((item)=>{
+              let key='';
+              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+                key=item.split('_')[0];
+              }else if(/^_\w*/.test(item)){
+                key='      ';
+              }else{
+                key=item;
+              }
+              if(metricMap.get(key)){
+                let values=metricMap.get(key);
+                values.push({label:item,value:item});
+              }else{
+                let values=[{label:item,value:item}];
+                metricMap.set(key,values);
+              }
+              //this.metricStore.push({label:item,value:item,insertText:item})
+            });
+            for(let key of metricMap.keys()){
+              let option={
+                label:key,
+                value:key,
+              };
+              if(metricMap.get(key) && metricMap.get(key).length>1){
+                option.children=metricMap.get(key);
+              }
+              this.metricOptions.push(option);
+            }
+          }
+        })
+      },
       onSubmit(){
         this.$refs['form'].validate((valid) => {
           if (valid) {
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
index f4e50d9bb..d1e1ff690 100644
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -34,9 +34,9 @@
         </el-form-item>
 
         <el-form-item label="Icon" prop="iconId" class="icon">
-          <el-select v-model="form.iconId" placeholder=""  popper-class="asset-dropdown" size="small" :loading="imgageLoading">
+          <el-select :loading="imgageLoading" class="icon-select" placeholder="" popper-class="asset-dropdown" size="small" v-model="form.iconId">
             <div slot="prefix" class="sel-image">
-              <img v-if="form.iconId" :src="selImage.image" style="height: 24px;margin-top: 2px"/>
+              <img :src="selImage.image" style="height: 24px; width: auto; max-width: 48px; margin-top: 2px" v-if="form.iconId"/>
               <span v-if="form.iconId" class="sel-image-name">{{selImage.imageName}}</span>
             </div>
             <el-option
@@ -44,10 +44,10 @@
               :key="item.id"
               :label="item.label"
               :value="item.id">
-              <span style="float: left;width: 50%">
-                <img :src="item.image" style="height: 28px;margin-top: 2px"/>
+              <span style="float: left; width: 55px;">
+                <img :src="item.image" style="height: 28px; width: auto; max-width: 48px; margin-top: 2px"/>
               </span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
+              <span style="color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
             </el-option>
           </el-select>
           <el-upload
@@ -65,9 +65,9 @@
           <span>{{$t('alert.config.expr')}}</span>
           <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
-        <el-row class="element-item expr form-row-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-          <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px"><i class="nz-icon nz-icon-minus" @click="removeExpression(index-1)"></i></span>
-          <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
+        <el-row :key="'ele' + index" class="element-item expr form-row-item" v-for="index of promqlKeys.length">
+          <span class="nz-icon-minus-medium nz-icon-minus-position" style="padding: 0 8px; margin-left: 8px;"><i @click="removeExpression(index-1)" class="nz-icon nz-icon-minus"></i></span>
+          <el-form-item :prop="'name.' + (index-1)" :rules="{required: true,message: '名称不能为空', trigger: 'blur'}">
             <el-row>
               <template>
                 <el-col class="expr-title" style="">
@@ -223,9 +223,15 @@
           ],
         },
         iconArray:[],
+        metricList: [], // metric列表
+        metricCascaderList:[],//metric级联列表
+        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
+        metricOptions: [],
       }
     },
     mounted(){
+      this.getSuggestMetric();
+      this.queryMetrics();
       // this.addExpression();
       this.addNodeInit();
       if( this.nodeData.expressions){
@@ -235,6 +241,43 @@
       }
     },
     methods:{
+      queryMetrics() {
+        this.metricOptions = [];
+        this.$get('prom/api/v1/label/__name__/values').then(response=>{
+          if(response.status == 'success'){
+            let metrics=response.data.sort();
+            let metricMap=new Map();
+            metrics.forEach((item)=>{
+              let key='';
+              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+                key=item.split('_')[0];
+              }else if(/^_\w*/.test(item)){
+                key='      ';
+              }else{
+                key=item;
+              }
+              if(metricMap.get(key)){
+                let values=metricMap.get(key);
+                values.push({label:item,value:item});
+              }else{
+                let values=[{label:item,value:item}];
+                metricMap.set(key,values);
+              }
+              //this.metricStore.push({label:item,value:item,insertText:item})
+            });
+            for(let key of metricMap.keys()){
+              let option={
+                label:key,
+                value:key,
+              };
+              if(metricMap.get(key) && metricMap.get(key).length>1){
+                option.children=metricMap.get(key);
+              }
+              this.metricOptions.push(option);
+            }
+          }
+        })
+      },
       addNodeInit(selImageId){
         this.$get('/project/topo/icon').then(res=>{
           this.imgageLoading=true;
@@ -299,6 +342,63 @@
       },
       expressionChange: function () {
 
+      },
+      // 获取metric列表
+      getSuggestMetric() {
+        //this.$get('/prom/api/v1/label/__name__/values').then(response => {
+        this.$get('/module?pageSize=-1').then(response => {
+          if (response.code === 200) {
+            this.metricList = response.data.list;
+            const cascaderMap = new Map();
+            this.metricList.forEach((item,index) => {
+              let projectName = item.project.name;
+              let moduleName = item.name;
+              const childOption = {
+                value: moduleName,
+                label: moduleName,
+                children:[],
+              };
+              if(cascaderMap.has(projectName)){
+                cascaderMap.get(projectName).push(childOption);
+              }else {
+                let childArr = [];
+                childArr.push(childOption);
+                cascaderMap.set(projectName,childArr);
+              }
+
+              //缓存全局数据
+              const moduleItem = {
+                name:moduleName,
+                metricMap:new Map()
+              };
+              if(this.metricAllData.has(projectName)){
+                let moduleGroup = this.metricAllData.get(projectName);
+                this.metricAllData.get(projectName).push(moduleItem);
+              }else {
+                let moduleList = [];
+                moduleList.push(moduleItem);
+                this.metricAllData.set(projectName,moduleList);
+              }
+            });
+            let metricCascaderArr = [];
+            cascaderMap.forEach(function(value,index){
+              const option = {
+                value: index+"_par",
+                label: index,
+                children:value,
+              };
+              metricCascaderArr.push(option);
+            });
+
+            this.metricCascaderList = metricCascaderArr;
+          }else {
+            this.metricList = [];
+            this.metricCascaderList = [];
+          }
+        })
+      },
+      getMetricOptions() {
+        return this.metricOptions;
       },
       addExpression() {
         this.expressions.push('');
@@ -398,8 +498,13 @@
 
   }
 </script>
-
+<style>
+  .icon-select>.el-input {
+    border-radius: 4px;
+  }
+</style>
 <style scoped>
+
   .mc{
     position: fixed;
     width: 100vw;
@@ -624,9 +729,9 @@
   }
   /*metric样式--begin*/
   .element-item {
-    padding: 20px 0;
+    padding: 20px;
     border-bottom: 1px dashed #dfe7f2;
-    width: 100%;
+    width: 700px;
   }
   /*metric样式--end*/
   .label-center{
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index d874e6ce0..fc5561c5f 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -1216,7 +1216,7 @@
   }
   .edit-topology{
     color: #1a1a1a;
-    font-size: 18px;
+    font-size: 14px;
     /*font-weight: bold;*/
     height: 28px;
     position: absolute;
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 66e04d823..6b7a8823d 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -749,6 +749,6 @@
     width: 14px;
   }
   .walk-close {
-    margin-left: -6px;
+    font-size: 12px;
   }
 </style>
diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue
index 3c34742b8..d8ff5b488 100644
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/nezha-fronted/src/components/page/config/mibBrowser.vue
@@ -726,6 +726,7 @@
     font-size: 14px;
     padding-bottom: 5px;
     width: 100%;
+    overflow: auto;
   }
   .mib-browser-detail {
     height: 31%;
@@ -758,8 +759,9 @@
     position: absolute;
     left: calc(25% + 2px);
     width: calc(75% - 20px);
-    min-height: 100%;
+    height: 100%;
     padding-right: 12px;
+    overflow: auto;
   }
   /*第一列宽25%*/
   .mib-browser-detail-row>div:first-of-type {
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 54cf97c2f..f85a3bcf2 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -39,7 +39,7 @@
               </el-select>
             </el-form-item>
             <el-form-item>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</button>
+              <button @click="resetForm('basicForm','basic')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
               <button @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
@@ -85,8 +85,8 @@
               </el-row>
             </el-form-item>
             <el-form-item>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</button>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
+              <button @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
+              <button :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('config.system.email.testConnection')}}</button>
               <button @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_email_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
@@ -129,8 +129,8 @@
               <el-input v-model="ldap.ldap_mapping"></el-input>
             </el-form-item>
             <el-form-item>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</button>
-              <button type="button" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</button>
+              <button @click="resetForm('ldapForm','ldap')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
+              <button @click="testSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('config.system.email.testConnection')}}</button>
               <button @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_ldap_save'">{{$t('overall.submit')}}</button>
             </el-form-item>
           </el-form>
@@ -325,7 +325,7 @@
               </div>
             </el-form-item>
             <el-form-item>
-              <button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" style="top:2px" type="button" v-has="'system_reset_reset'">{{$t('overall.reset')}}</button>
+              <button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'">{{$t('overall.reset')}}</button>
             </el-form-item>
           </el-form>
         </div>