From 9a40ada4d0becd6fc908ddcdd7ccad55aaab5d57 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Tue, 31 Mar 2020 21:56:51 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=201=20chart=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2metric?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E4=BC=98=E5=8C=96=202=20webshell=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E8=AF=A2=E9=97=AE=E5=BC=B9=E5=87=BA=EF=BC=8C=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=AA=E6=9C=89=E4=B8=80=E4=B8=AA=E8=BF=9E=E6=8E=A5=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=E4=B8=8D=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/webSSH.vue   | 12 ++-
 .../components/page/dashboard/chartBox.vue    | 30 +++---
 .../components/page/dashboard/chartMetric.vue | 94 ++++++++++++++++++-
 3 files changed, 108 insertions(+), 28 deletions(-)

diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index 589ded398..31e3e1a7b 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -266,13 +266,15 @@
       //可以做最小化的处理，点击窗口外的空白处会调用此方法
       closeConsole(){
         //弹窗询问是否关闭所有链接，关闭窗口？复选框：记住我的选择（用户勾选且选择yes 后，保存到localstorage，之后关闭不再提醒）
-        //localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', //en/cn
-        //localStorage.setItem('nz-language', this.lang);
-        let remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false;
-        if(remember){
+        if(this.editableTabs.length===1){
           this.closeShellWindow();
         }else {
-          this.closeConfirmShow = true;
+          let remember = localStorage.getItem('close-shell-remember') ? localStorage.getItem('close-shell-remember') : false;
+          if(remember){
+            this.closeShellWindow();
+          }else {
+            this.closeConfirmShow = true;
+          }
         }
       },
       cancleConfirm(){
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 3a2aa3c70..5b9f838c6 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -630,31 +630,25 @@
       },
       // 获取metric列表
       getSuggestMetric() {
-        //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
-        this.$get('/prom/api/v1/label/__name__/values').then(response => {
-          //if (response.code === 200) {
-          if (response.status === 'success') {
-            this.metricList = response.data;
+        //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 arr = [];
-              let par = '';//父value
-              //let metricTmp = item.metric;//子value
-              let metricTmp = item;//子value
-              if(metricTmp){
-                arr  = metricTmp.split('_');
-                par = arr[0];
-              }
+              let projectName = item.project.name;
+              let moduleName = item.name;
               const childOption = {
-                value: metricTmp,
-                label: metricTmp,
+                value: moduleName,
+                label: moduleName,
+                children:[],
               };
-              if(cascaderMap.has(par)){
-                cascaderMap.get(par).push(childOption);
+              if(cascaderMap.has(projectName)){
+                cascaderMap.get(projectName).push(childOption);
               }else {
                 let childArr = [];
                 childArr.push(childOption);
-                cascaderMap.set(par,childArr);
+                cascaderMap.set(projectName,childArr);
               }
             });
             let metricCascaderArr = [];
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index 5027c6f8d..9d8b19e97 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -82,6 +82,10 @@
   .mt1{
     margin-top:1px;
   }
+  .chart-metric-box-dropdown{
+    width: 619px;
+    z-index: 2950 !important;
+  }
 </style>
 <style>
   .li-list-part-label-val-list .metric-title-position .el-form-item__label {
@@ -141,7 +145,9 @@
                  :options="metricCascaderList"
                  :props="{ expandTrigger: 'hover' }"
                  :show-all-levels="false"
-                 @change="selectMetric"></el-cascader>
+                 @change="selectMetric"
+                 @expand-change="handleItemChange"
+        ></el-cascader>
         <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
         <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1">
           <i class="el-icon-minus"></i>
@@ -253,6 +259,7 @@ export default {
       tagSet: null, // 根据你metric获取的tags信息
       setDataFlag: false, // true时为获取数据,编辑状态
       vendorCount: '',
+      labelSort:['project','module','endpoint','datacenter','asset'],
     };
   },
   watch: {},
@@ -321,11 +328,63 @@ export default {
         }
 
     },
+    //动态加载第三级选项metric及label
+    handleItemChange(val) {
+      if(val && val.length===2) {//点击二级菜单，才进行查询
+        let proTmp = val[0];
+        let module = val[1];
+        let project = proTmp.substring(0, proTmp.length - 4);
+        this.metricCascaderList.map((item, index) => {
+          if(item.value===proTmp){//选择的project
+            item.children.map((innerItem, innerIndex) => {
+              if (innerItem.value === module && innerItem.children.length === 0) {//不重复加载
+                // 当二级分类的的child为空时才请求一次数据
+                let match = '{project="'+project+'",module="'+module+'"}';
+                this.$get('/prom/api/v1/series?match[]='+match).then(res => {
+                //this.$get('http://192.168.40.247:9090/api/v1/series?match[]='+match).then(res => {
+                  if (res.status === 'success') {
+                    let queryItem = res.data;//[]设置  metric和label
+                    let metricArr = [];
+                    let metricArrTmp = [];
+                    res.data.forEach((tag, i) => {
+                      //const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
+                      let metricName = tag.__name__;
+                      if(metricArrTmp.indexOf(metricName)===-1){
+                        const childOption = {
+                          value: metricName,//+"_par",
+                          label: metricName
+                        };
+                        metricArrTmp.push(metricName);
+                        metricArr.push(childOption);
+                      }
+                    });
+                    this.$set(item.children[innerIndex], 'children', metricArr);
+                    //this.$set(innerItem, 'children', metricArr);
+
+
+                    /*
+                    const tagObj = {
+                      name: item[0],
+                      list:item[1],
+                      value:[]//最终选择的值
+                    };
+                    this.elementInfo.selectedTagList.push(tagObj);
+                     */
+
+                  }
+                })
+              }
+            })
+          }
+        });
+      }
+    },
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
-        this.elementInfo.metric = this.elementInfo.metric[1];
         this.getSuggestTags(this.elementInfo.metric);
+        this.elementInfo.metric = this.elementInfo.metric[2];
+
       } else {
         this.elementInfo.tagList = [];
         this.setLabelDivHeight(0);
@@ -355,11 +414,15 @@ export default {
     },
     */
     // 获取tags列表
-    getSuggestTags(metric) {
+    getSuggestTags(metricArr) {
+      let metric = metricArr[2];
+      let proTmp = metricArr[0];
+      let project = proTmp.substring(0, proTmp.length - 4);
+      let module = metricArr[1];
       //this.$get('metric/labelName?metric='+metric).then(response => {
       this.$get('/metric/series?match[]='+metric).then(response => {
         this.elementInfo.selectedTagList = [];
-        //this.elementInfo.tagList = [];
+        let tagListTmp = [];
         if (response.code === 200) {
           const objList = Object.entries(response.data);
           objList.forEach((item) => {
@@ -368,8 +431,29 @@ export default {
               list:item[1],
               value:[]//最终选择的值
             };
-            this.elementInfo.selectedTagList.push(tagObj);
+            if(item[0]==='project'){
+              tagObj.value.push(project);
+            }else if(item[0]==='module'){
+              tagObj.value.push(module);
+            }
+            tagListTmp.push(tagObj);
           });
+          this.labelSort.forEach((sortItem) => {
+            let itemIndex = -1;
+            tagListTmp.forEach((item,i) => {
+              if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'],
+                this.elementInfo.selectedTagList.push(item);
+                itemIndex = i;
+              }
+            });
+            if(itemIndex!==-1){
+              tagListTmp.splice(itemIndex,1);
+            }
+          });
+          tagListTmp.forEach((item,i) => {
+            this.elementInfo.selectedTagList.push(item);
+          });
+
           let tagNum = this.elementInfo.selectedTagList.length;
           this.setLabelDivHeight(tagNum);
         }else {