feat: dc和tag过滤（进行中）

nezha-fronted/src/components/common/timePicker.vue

@@ -279,16 +279,19 @@ export default {
         let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
         this.$set(this.searchTime, 0, startTime);
         this.$set(this.searchTime, 1, endTime);
+        this.$set(this.searchTime, 2, val + "m");
       }else if(type==='hour'){
         let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
         let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
         this.$set(this.searchTime, 0, startTime);
         this.$set(this.searchTime, 1, endTime);
+        this.$set(this.searchTime, 2, val + "h");
       }else if(type==='date'){
         let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
         let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
         this.$set(this.searchTime, 0, startTime);
         this.$set(this.searchTime, 1, endTime);
+        this.$set(this.searchTime, 2, val + "d");
       }
     },
     setCostomTime:function(costomTime){

nezha-fronted/src/components/page/dashboard/overview/overview2.scss

@@ -100,6 +100,7 @@
 .content-col-title .el-dropdown {
   font-size: 0.85rem;
 }
+
 .content-col-title-tools {
   display: flex;
   font-size: 0.85rem;
@@ -109,6 +110,40 @@
   padding-left: 7px;
   border-left: 1px solid #dadada;
   margin-left: 7px;
+  .el-cascader {
+    height: 100%;
+    line-height: 1.6rem;
+    .el-input__suffix i {
+      color: #606266;
+    }
+    .el-tag {
+      background-color: #efefef;
+      height: 100%;
+      line-height: 1.6rem;
+      margin: 0;
+      border: none;
+      padding-left: 2px;
+      font-size: 0.85rem;
+      color: #606266;
+      max-width: calc(100% - 25px);
+    }
+    .el-tag:last-of-type:not(first-of-type) {
+      padding-right: 0;
+    }
+    .el-input {
+      height: 100%;
+      line-height: 1.6rem;
+      i {
+        line-height: 1.6rem;
+      }
+      .el-input__inner {
+        height: 100% !important;
+        line-height: 1.6rem;
+        background-color: #efefef;
+        border: none;
+      }
+    }
+  }
 }
 .content-col-box .content-col-title .nz-dashboard-picker {
   height: 100%;
@@ -157,6 +192,9 @@
   padding: 0.7rem;
   height: calc(100% - 3rem);
 }
+.content-row-box:nth-of-type(2) .content-col-box:first-of-type .content-col-title {
+  padding-right: 0;
+}
 .content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
   position: relative;
 }

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -69,7 +69,7 @@
                 <span>{{$t("dashboard.overview.alert.chart.chartTitle")}}</span>
                 <span class="content-col-title-tools">
                   <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-                  <el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectDatacenter">
+                  <!--<el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectDatacenter">
                     <span class="content-col-title-tool">{{$t("dashboard.overview.dataCenter.dataCenter")}}&nbsp;<i class="el-icon-arrow-down"></i></span>
                     <el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
                       <el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.dc.indexOf(item.id) > -1}" :command="item" v-for="(item,index) in trafficDatacenterData" :key="index">{{item.name}}</el-dropdown-item>
@@ -80,7 +80,16 @@
                     <el-dropdown-menu slot="dropdown" class="el-dropdown-multi">
                       <el-dropdown-item :class="{'dropdown-item-active': trendSearchParam.tag.some(tag => {return item.name == tag.name && item.value == tag.value;})}" :command="item" v-for="(item,index) in trafficTagData" :key="index">{{item.name}}&nbsp;:&nbsp;{{item.value}}</el-dropdown-item>
                     </el-dropdown-menu>
-                  </el-dropdown>
+                  </el-dropdown>-->
+                  <span class="content-col-title-tool">
+                    <el-cascader
+                      :options="trafficData"
+                      :props="{multiple: true, checkStrictly: true}"
+                      clearable
+                      collapse-tags
+                      v-model="trendSearchParam.select"
+                    ></el-cascader>
+                  </span>
                 </span>
               </div>
               <div class="content-col-content">
@@ -207,8 +216,9 @@
         dataCenterMapSeries: [],
         trafficDatacenterData: [],
         trafficTagData: [],
+        trafficData: [],
 
-        trendSearchParam: {start: '', end: '', dc: [], tag: []},
+        trendSearchParam: {start: '', end: '', dc: [], tag: [], select: []},
 
         alertMessageShow: 'asset', //asset/module
         bottom3DropdownShow: false, //最底部行第三列的下拉选择框
@@ -436,6 +446,55 @@
       },
       queryAlertTrendData() {
         this.$refs.chartbox.startLoading();
+        this.chartSeries = [];
+        this.$get('/prom/api/v1/query_range', this.trendParamHandle('rx')).then(response=>{
+          if(response.status == 'success'){
+            if(response.data.result){
+              let series={
+                name: 'ifHCInOctets',
+                symbol:'none',  //去掉点
+                smooth:true,  //曲线变平滑
+                data: [],
+                type:'line',
+              };
+              if (response.data.result.length > 0) {
+                series.data=response.data.result[0].values.map((item)=>{
+                  return [item[0]*1000,item[1]];
+                });
+              }
+              this.chartSeries.push(series);
+              this.$refs.chartbox.setSeries(this.chartSeries);
+              this.$refs.chartbox.endLoading();
+            }
+          }else{
+            console.error(response)
+          }
+        });
+        this.$get('/prom/api/v1/query_range', this.trendParamHandle('tx')).then(response=>{
+          if(response.status == 'success'){
+            if(response.data.result){
+              let series={
+                name: 'ifHCOutOctets',
+                symbol:'none',  //去掉点
+                smooth:true,  //曲线变平滑
+                data: [],
+                type:'line',
+              };
+              if (response.data.result.length > 0) {
+                series.data=response.data.result[0].values.map((item)=>{
+                  return [item[0]*1000,item[1]];
+                });
+              }
+              this.chartSeries.push(series);
+              this.$refs.chartbox.setSeries(this.chartSeries);
+              this.$refs.chartbox.endLoading();
+            }
+          }else{
+            console.error(response)
+          }
+        });
+      },
+      trendParamHandle(t) {
         let before;
         let end;
         if (this.trendSearchParam.start) {
@@ -451,39 +510,96 @@
           end = new Date();
           end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end);
         }
+        let metric;
+        let rule;
+        if (t == 'rx') {
+          metric = {rx: '"1"'};
+          rule = "ifHCInOctets";
+        } else if (t == 'tx') {
+          metric = {tx: '"1"'};
+          rule = "ifHCOutOctets";
+        }
+        if (this.trendSearchParam.select.length > 0) {
+          let dc = [];
+          let tags = [];
+          this.trendSearchParam.select.forEach(select => {
+            let item = select[select.length-1];
+            let type = item.split("::")[0];
+            let value = item.split("::")[1];
+            if (type == "$dc$") {
+              dc.push(value);
+            } else if (type == "$key$") {
+              let hasDc = dc.some(d => {
+                if (d == select[0].split("::")[1]) {
+                  return true;
+                }
+                return false;
+              });
+              if (!hasDc) {
+                dc.push(select[0].split("::")[1]);
+              }
+              let hasKey = tags.some(tag => {
+                if (tag.key == value) {
+                  //TODO 选择所有这个tag的value
+                  return true;
+                }
+                return false;
+              });
+              if (!hasKey) {
+                //TODO 选择所有这个tag的value
+                tags.push({key: value, value: []});
+              }
+            } else {
+              let key = select[1].split("::")[1];
+              let hasKey = tags.some(tag => {
+                if (tag.key == key) {
+                  tag.value.push(value);
+                  console.info(tag.value)
+                  console.info(tags)
+                  return true;
+                }
+                return false;
+              });
+              if (!hasKey) {
+                tags.push({key: key, value: [value]});
+              }
+            }
+          });
+console.info(dc);
+console.info(metric);
+          if (dc.length == 1) {
+            metric.datacenter = '"' + dc[0] + '"';
+          } else if (dc.length > 1) {
+            metric.datacenter = '~"' + dc.join("|") + '"'
+          }
+          tags.forEach(item => {
+            if (item.value.length == 1) {
+              metric[item.key] = '"' + item.value[0] + '"';
+              //eval('metric.' + item.key + '="' + item.value[0] + '"');
+            } else if (item.value.length > 1) {
+              metric[item.key] = '~"' + item.value.join("|") + '"';
+              //eval('metric.' + item.key + '="~' + item.value.join("|") + '"');
+            }
+          });
+        }
+        let metricString = "{";
+        for (let key in metric) {
+          /*if (key != 'rx' && key != 'tx' && key != 'datacenter') {
+            metricString += key + '=' + metric[key] + ',';
+          } else {
+            metricString += key + "=" + metric[key] + ",";
+          }*/
+          metricString += key + "=" + metric[key] + ",";
+        }
+        metricString = metricString.substring(0, metricString.length-1);
+        metricString += "}";
         let params = {
-          query: 'sum(nz_alert_nums)',
           start: before,
           end: end,
           step: bus.getStep(before, end),
-          dc: this.trendSearchParam.dc.join(","),
+          query: 'sum(irate(' + rule + metricString + '[' + (this.trendSearchParam.timeRange ? this.trendSearchParam.timeRange : "1h") + ']))'
-          tag: this.trendSearchParam.tag.map(item => {
-            return "{" + item.name + ":" + item.value + "}"
-          }).join(",")
         };
-        this.$get('/prom/api/v1/query_range',params).then(response=>{
+        return params;
-          if(response.status == 'success'){
-            if(response.data.result){
-              let series={
-                name: 'nz_alert_nums',
-                symbol:'none',  //去掉点
-                smooth:true,  //曲线变平滑
-                data: [],
-                type:'line',
-              };
-              if (response.data.result.length > 0) {
-                series.data=response.data.result[0].values.map((item)=>{
-                  return [item[0]*1000,item[1]];
-                });
-              }
-              this.chartSeries = [series];
-              this.$refs.chartbox.setSeries(this.chartSeries);
-              this.$refs.chartbox.endLoading();
-            }
-          }else{
-            console.error(response)
-          }
-        })
       },
       queryMapChartGeoJson() {
         this.$get('/sysConfig?paramKey=geoJson').then(response=>{
@@ -645,7 +761,8 @@
       getDcTrafficData() {
         this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
           if (response.code === 200) {
-            this.trafficTagData = [];
+            this.trafficData = this.convertTrafficData(response.data.list);
+            /*this.trafficTagData = [];
             response.data.list.forEach(item => {
               if (!(this.trafficDatacenterData.some(idc => {
                 return item.idc.id == idc.id;
@@ -664,15 +781,57 @@
                   }
                 }
               }
-            });
+            });*/
           }
         });
       },
+      convertTrafficData(data) {
+        let result = [];
+        data.forEach(item => {
+          let hasDc = result.some(dc => { //dc去重
+            if (dc.label == item.idc.name) {
+              handleTag(dc, item.tags);
+              return true;
+            }
+            return false;
+          });
+          if (!hasDc) {
+            let dc = {label: item.idc.name, value: "$dc$::" + item.idc.name, children: []};
+            handleTag(dc, item.tags);
+            result.push(dc);
+          }
+        });
+        function handleTag(dc, tagData) { // dc: cascader数据里的第一级；tagData: 原始数据中的tags
+          if (tagData) {
+            let tags = dc.children;
+            for (let key in tagData) {
+              let hasKey = tags.some(tag => { //tag-key去重
+                if (tag.label == key) {
+                  let hasValue = tag.children.some(value => { //tag-value去重
+                    return value.label == tagData[key];
+                  });
+                  if (!hasValue) {
+                    tag.children.push({label: tagData[key], value: key + "::" + tagData[key]});
+                  }
+                  return true;
+                }
+                return false;
+              });
+              if (!hasKey) {
+                tags.push({label: key, value: "$key$::" + key, children: [{label: tagData[key], value: key + "::" + tagData[key]}]});
+              }
+            }
+            dc.children = tags;
+          }
+        }
+        return result;
+      },
       /*初始化数据 end*/
 
       dateChange(val) {
         this.trendSearchParam.start = val[0];
         this.trendSearchParam.end = val[1];
+        this.trendSearchParam.timeRange = val[2];
         this.queryAlertTrendData();
       },
       topNChange(type, top) {
@@ -685,7 +844,7 @@
           this.queryAlertStatByRule();
         }
       },
-      selectDatacenter(dc) {
+      /*selectDatacenter(dc) {
         let index = this.trendSearchParam.dc.indexOf(parseInt(dc.id));
         if (index == -1) {
           this.trendSearchParam.dc.push(parseInt(dc.id));
@@ -709,7 +868,7 @@
           this.trendSearchParam.tag.splice(index, 1);
         }
         this.queryAlertTrendData();
-      },
+      },*/
       alertMessageChange(type) {
         this.bottom3DropdownShow = false;
         this.alertMessageShow = type;
@@ -913,6 +1072,11 @@
         });
       },
     },
+    watch: {
+      "trendSearchParam.select": function() {
+        this.queryAlertTrendData();
+      }
+    },
     mounted() {
       this.initDate();
       this.initData();