feat: alert-trend step & dc/tag过滤

nezha-fronted/src/assets/stylus/main.scss

@@ -1855,6 +1855,14 @@ li{
 .dropdown-content{
   font-size: 14px !important;
 }
+.dropdown-item-active {
+  color: $global-text-color-active !important;
+  font-weight: bold;
+  background-color: #FAFAFA;
+}
+.el-dropdown-multi .el-dropdown-menu__item:focus {
+  color: #606266;
+}
 /*一些单选label宽度设为一样*/
 .same-label-width .el-radio-button__inner {
   width: 90px;

nezha-fronted/src/components/common/language/cn.js

@@ -69,6 +69,7 @@ const cn = {
     reset: "重置",
     submit: "提交",
     noData:'没有数据',
+    tag: '标签'
   },
   webshell: {
     shellTitle: "本地 Shell",

nezha-fronted/src/components/common/language/en.js

@@ -72,7 +72,8 @@ const en = {
     },
     reset:'Reset',
     submit:'Submit',
-    noData:'No data'
+    noData:'No data',
+    tag: 'Tag'
   },
   pageSize: '/page',
   webshell:{

nezha-fronted/src/components/page/config/mibBrowser.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="top-tool-main-right">
-        <div class="top-tool-search">
+        <div class="top-tool-search host-input">
           <el-autocomplete
             v-model="searchParam.host"
             :fetch-suggestions="assetSuggestion"
@@ -137,8 +137,8 @@
           <span>SNMP MIBs</span>
           <el-dropdown trigger="click" v-scrollBar:el-dropdown="'small'" :hide-on-click="false" @command="selectModel" ref="modelDropdown">
             <span class="mib-browser-table-op" @click="scrollbarHeightHandler">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
-            <el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown">
+            <el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown el-dropdown-multi">
-              <el-dropdown-item :class="{'mib-browser-model-dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
+              <el-dropdown-item :class="{'dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -391,7 +391,7 @@
         });
       },
       selectModel(model) {
-        let index = this.walkParam.models.indexOf(model.id);
+        let index = this.walkParam.models.indexOf(parseInt(model.id));
         if (index == -1) {
           this.walkParam.models.push(parseInt(model.id));
         } else {
@@ -606,14 +606,6 @@
 .mib-browser-model-dropdown {
   height: 300px;
 }
-.mib-browser-model-dropdown .el-dropdown-menu__item:focus {
-  color: #606266;
-}
-.mib-browser-model-dropdown-item-active {
-  color: $global-text-color-active !important;
-  font-weight: bold;
-  background-color: #FAFAFA;
-}
 .mib-browser {
   .top-tool-search .el-input__inner {
     height: 25px;
@@ -627,7 +619,10 @@
     border-right: 1px solid rgba(162,162,162,0.50);
   }
   .oid-input.top-tool-search {
-    width: 500px;
+    width: 380px;
+  }
+  .host-input.top-tool-search {
+    width: 160px;
   }
   .mib-browser-btn-group {
     position: relative;

nezha-fronted/src/components/page/dashboard/chartMetric.vue

@@ -115,7 +115,7 @@
     display: inline-block;
   }
   .nz-tab-chart-style-left{
-    margin-left:40px;
+    margin-left: 0;
   }
   .dashboard-metric-dropdown .el-scrollbar__wrap{
     margin-bottom: 0px !important;

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

@@ -97,6 +97,19 @@
   display: flex;
   justify-content: space-between;
 }
+.content-col-title .el-dropdown {
+  font-size: 0.85rem;
+}
+.content-col-title-tools {
+  display: flex;
+  font-size: 0.85rem;
+}
+.content-col-title-tool {
+  cursor: pointer;
+  padding-left: 7px;
+  border-left: 1px solid #dadada;
+  margin-left: 7px;
+}
 .content-col-box .content-col-title .nz-dashboard-picker {
   height: 100%;
 }

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

@@ -67,7 +67,21 @@
             <div class="content-col-box">
               <div class="content-col-title">
                 <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">
+                    <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>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <el-dropdown trigger="hover" :show-timeout="0" size="small" :hide-on-click="false" @command="selectTag">
+                    <span class="content-col-title-tool">{{$t("overall.tag")}}&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.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>
+                </span>
               </div>
               <div class="content-col-content">
                 <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend"></chart-box>
@@ -152,6 +166,7 @@
   import chart from "./chart";
   import chartDataFormat from "../../../charts/chartDataFormat";
   import axios from 'axios';
+  import bus from '../../../../libs/bus';
   import timePicker from '../../../common/timePicker'
   var timeout;
 
@@ -190,8 +205,10 @@
         messageByModuleSeries: [],
         alertRuleStatData: {},
         dataCenterMapSeries: [],
+        trafficDatacenterData: [],
+        trafficTagData: [],
 
-        trendSearchTime: {start: '', end: ''},
+        trendSearchParam: {start: '', end: '', dc: [], tag: []},
 
         alertMessageShow: 'asset', //asset/module
         bottom3DropdownShow: false, //最底部行第三列的下拉选择框
@@ -237,6 +254,7 @@
         this.queryMapChartGeoJson();
         this.queryAlertStatByRule();
         this.queryAlertStatByAsset();
+        this.getDcTrafficData();
       },
       queryAssetData() {
         this.assetLoading = true;
@@ -420,15 +438,15 @@
         this.$refs.chartbox.startLoading();
         let before;
         let end;
-        if (this.trendSearchTime.start) {
+        if (this.trendSearchParam.start) {
-          before = this.trendSearchTime.start;
+          before = this.trendSearchParam.start;
         } else {
           before = new Date();
-          before.setMinutes(new Date().getMinutes()-5);
+          before.setHours(new Date().getHours()-1);
           before = this.dateFormat('yyyy-mm-dd HH:MM:SS', before);
         }
-        if (this.trendSearchTime.end) {
+        if (this.trendSearchParam.end) {
-          end = this.trendSearchTime.end;
+          end = this.trendSearchParam.end;
         } else {
           end = new Date();
           end = this.dateFormat('yyyy-mm-dd HH:MM:SS', end);
@@ -437,7 +455,11 @@
           query: 'sum(nz_alert_nums)',
           start: before,
           end: end,
-          step: '15s'
+          step: bus.getStep(before, end),
+          dc: this.trendSearchParam.dc.join(","),
+          tag: this.trendSearchParam.tag.map(item => {
+            return "{" + item.name + ":" + item.value + "}"
+          }).join(",")
         };
         this.$get('/prom/api/v1/query_range',params).then(response=>{
           if(response.status == 'success'){
@@ -449,9 +471,11 @@
                 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();
@@ -618,10 +642,37 @@
           }
         });
       },
+      getDcTrafficData() {
+        this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
+          if (response.code === 200) {
+            this.trafficTagData = [];
+            response.data.list.forEach(item => {
+              if (!(this.trafficDatacenterData.some(idc => {
+                return item.idc.id == idc.id;
+              }))) {
+                this.trafficDatacenterData.push(item.idc);
+              }
+            });
+            response.data.list.forEach(item => {
+              if (item.tags) {
+                for (let key in item.tags) {
+                  //过滤重复的tag（key、value同时相等）
+                  if (!(this.trafficTagData.some(tag => {
+                    return tag.name == key && tag.value == item.tags[key];
+                  }))) {
+                    this.trafficTagData.push({name: key, value: item.tags[key]});
+                  }
+                }
+              }
+            });
+          }
+        });
+      },
       /*初始化数据 end*/
+
       dateChange(val) {
-        this.trendSearchTime.start = val[0];
+        this.trendSearchParam.start = val[0];
-        this.trendSearchTime.end = val[1];
+        this.trendSearchParam.end = val[1];
         this.queryAlertTrendData();
       },
       topNChange(type, top) {
@@ -634,6 +685,31 @@
           this.queryAlertStatByRule();
         }
       },
+      selectDatacenter(dc) {
+        let index = this.trendSearchParam.dc.indexOf(parseInt(dc.id));
+        if (index == -1) {
+          this.trendSearchParam.dc.push(parseInt(dc.id));
+        } else {
+          this.trendSearchParam.dc.splice(index, 1);
+        }
+        this.queryAlertTrendData();
+      },
+      selectTag(tag) {
+        let index = -1;
+        this.trendSearchParam.tag.some((item, i) => {
+          if (item.name == tag.name && item.value == tag.value) {
+            index = i;
+            return true;
+          }
+          return false;
+        });
+        if (index == -1) {
+          this.trendSearchParam.tag.push(tag);
+        } else {
+          this.trendSearchParam.tag.splice(index, 1);
+        }
+        this.queryAlertTrendData();
+      },
       alertMessageChange(type) {
         this.bottom3DropdownShow = false;
         this.alertMessageShow = type;