From d61e9458bb15950ee562eb816a9613ce7e0620a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= Date: Tue, 28 Apr 2020 23:04:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20alert-trend=20step=20&=20dc/tag?= =?UTF-8?q?=E8=BF=87=E6=BB=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/assets/stylus/main.scss | 8 ++ .../src/components/common/language/cn.js | 1 + .../src/components/common/language/en.js | 3 +- .../src/components/page/config/mibBrowser.vue | 21 ++-- .../components/page/dashboard/chartMetric.vue | 2 +- .../page/dashboard/overview/overview2.scss | 13 +++ .../page/dashboard/overview/overview2.vue | 102 +++++++++++++++--- 7 files changed, 122 insertions(+), 28 deletions(-) diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 74297e05c..746e21840 100644 --- 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; diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index b879e2b4e..7dd778b86 100644 --- 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", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index ec3c12a97..56f3d142c 100644 --- 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:{ diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue index b7d7634c5..0bd813cfe 100644 --- a/nezha-fronted/src/components/page/config/mibBrowser.vue +++ b/nezha-fronted/src/components/page/config/mibBrowser.vue @@ -10,7 +10,7 @@
-
+
SNMP MIBs {{$t("config.model.model") + " "}} - - {{item.name}} + + {{item.name}}
@@ -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; diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue index 79608ca0c..def651cba 100644 --- 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; diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss index bb575b152..b433fc880 100644 --- 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%; } diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue index 780f74d96..a654e7294 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue @@ -67,7 +67,21 @@
{{$t("dashboard.overview.alert.chart.chartTitle")}} - + + + + {{$t("dashboard.overview.dataCenter.dataCenter")}}  + + {{item.name}} + + + + {{$t("overall.tag")}}  + + {{item.name}} : {{item.value}} + + +
@@ -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', }; - series.data=response.data.result[0].values.map((item)=>{ - return [item[0]*1000,item[1]]; - }); + 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;