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

2020-04-28 23:04:07 +08:00
parent e50dbec90a
commit d61e9458bb
7 changed files with 122 additions and 28 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -69,6 +69,7 @@ const cn = {
    reset: "重置",
    submit: "提交",
    noData:'没有数据',
+    tag: '标签'
  },
  webshell: {
    shellTitle: "本地 Shell",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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:{
--- a/nezha-fronted/src/components/page/config/mibBrowser.vue
+++ b/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-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-menu slot="dropdown" class="mib-browser-model-dropdown el-dropdown-multi">
+              <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;
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/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;
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/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%;
 }
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/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) {
-          before = this.trendSearchTime.start;
+        if (this.trendSearchParam.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) {
-          end = this.trendSearchTime.end;
+        if (this.trendSearchParam.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.trendSearchTime.end = val[1];
+        this.trendSearchParam.start = val[0];
+        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;