From 21018274d52c24cbeeb10f9a5533dac1105ab22c Mon Sep 17 00:00:00 2001 From: hanyuxia Date: Fri, 31 Dec 2021 10:40:37 +0800 Subject: [PATCH] =?UTF-8?q?CN-257=20Entity=20Explorer--=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/entityExplorer/entityList/card.scss | 4 +- src/utils/api.js | 12 +- src/views/entityExplorer/EntityExplorer.vue | 87 +++++++- src/views/entityExplorer/entityList/Card.vue | 2 +- .../entityExplorer/entityList/EntityList.vue | 7 +- src/views/entityExplorer/entityList/Row.vue | 3 +- .../entityList/entityListMixin.js | 192 +++++++++++++++++- 7 files changed, 288 insertions(+), 19 deletions(-) diff --git a/src/assets/css/components/views/entityExplorer/entityList/card.scss b/src/assets/css/components/views/entityExplorer/entityList/card.scss index 2c842765..eadf5f49 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/card.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/card.scss @@ -93,7 +93,7 @@ } .body__drawing-box { position: relative; - height: 100px; + height: 60px; .chart__loading { top: 0; height: 100%; @@ -102,7 +102,7 @@ .body__drawing { position: absolute; padding: 10px 30px; - height: 100px; + height: 60px; width: 100%; } diff --git a/src/utils/api.js b/src/utils/api.js index 226a2762..de3ef593 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -27,7 +27,17 @@ export const api = { ipThroughput: '/interface/entity/ip/detail/throughput', domainThroughput: '/interface/entity/domain/detail/throughput', appThroughput: '/interface/entity/app/detail/throughput', - filterTop: '/interface/entity/filter/top' + filterTop: '/interface/entity/filter/top', + entityTotal: '/interface/entity/index/total', + entityNew: '/interface/entity/index/new', + entityActive: '/interface/entity/index/active', + entityTraffic: '/interface/entity/list/traffic', + entityAlertNum: '/interface/entity/list/alertNum', + entitySecurityNum: '/interface/entity/list/detectionNum', + ipBytes: '/interface/entity/detail/ip/bytes', + domainBytes: '/interface/entity/detail/domain/bytes', + appBytes: '/interface/entity/detail/app/bytes' + } /* panel */ diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue index ec5fd75a..7b0d2165 100644 --- a/src/views/entityExplorer/EntityExplorer.vue +++ b/src/views/entityExplorer/EntityExplorer.vue @@ -32,57 +32,57 @@
- 86 + {{entityAppTotal}} APP
New
-
51
+
{{entityAppNew}}
Active
-
56
+
{{entityAppActive}}
- 186 + {{entityDomainTotal}} DOMAIN
New
-
40
+
{{entityDomainNew}}
Active
-
18
+
{{entityDomainActive}}
- 861 + {{entityIpTotal}} IP
New
-
99
+
{{entityIpNew}}
Active
-
37
+
{{entityIpActive}}
@@ -99,6 +99,8 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh' import EntityFilter from '@/views/entityExplorer/EntityFilter' import EntityList from '@/views/entityExplorer/entityList/EntityList' import { entityType, entityFilterType } from '@/utils/constants' +import { get } from '@/utils/http' +import { api } from '@/utils/api' export default { name: 'entity-explorer', @@ -115,6 +117,18 @@ export default { listMode: 'list', // entity列表的模式，list|block timeFilter: {}, + entityAppTotal: '-', + entityAppNew: '-', + entityAppActive: '-', + + entityDomainTotal: '-', + entityDomainNew: '-', + entityDomainActive: '-', + + entityIpTotal: '-', + entityIpNew: '-', + entityIpActive: '-', + filterData: [ { type: 'ip', @@ -382,7 +396,62 @@ export default { }, queryList () { + }, + + getEntityIndexData () { + // Total + get(api.entityTotal, { entityType: 'app' }).then(response => { + if (response.code === 200) { + this.entityAppTotal = response.data.result + } + }), + get(api.entityTotal, { entityType: 'domain' }).then(response => { + if (response.code === 200) { + this.entityDomainTotal = response.data.result + } + }), + get(api.entityTotal, { entityType: 'ip' }).then(response => { + if (response.code === 200) { + this.entityIpTotal = response.data.result + } + }), + // New + get(api.entityNew, { entityType: 'app' }).then(response => { + if (response.code === 200) { + this.entityAppNew = response.data.result + } + }), + get(api.entityNew, { entityType: 'domain' }).then(response => { + if (response.code === 200) { + this.entityDomainNew = response.data.result + } + }), + get(api.entityNew, { entityType: 'ip' }).then(response => { + if (response.code === 200) { + this.entityIpNew = response.data.result + } + }) + // Active + get(api.entityActive, { entityType: 'app' }).then(response => { + if (response.code === 200) { + this.entityAppActive = response.data.result + } + }), + get(api.entityActive, { entityType: 'domain' }).then(response => { + if (response.code === 200) { + this.entityDomainActive = response.data.result + } + }), + get(api.entityActive, { entityType: 'ip' }).then(response => { + if (response.code === 200) { + this.entityIpActive = response.data.result + } + }) } + + }, + mounted () { + this.getEntityIndexData() } } diff --git a/src/views/entityExplorer/entityList/Card.vue b/src/views/entityExplorer/entityList/Card.vue index b3cc4b7e..550dc7ce 100644 --- a/src/views/entityExplorer/entityList/Card.vue +++ b/src/views/entityExplorer/entityList/Card.vue @@ -115,7 +115,7 @@
-
+
{{entityData.bytesReceivedRate || 0}} bps
diff --git a/src/views/entityExplorer/entityList/EntityList.vue b/src/views/entityExplorer/entityList/EntityList.vue index e4b33fa0..b34381db 100644 --- a/src/views/entityExplorer/entityList/EntityList.vue +++ b/src/views/entityExplorer/entityList/EntityList.vue @@ -11,6 +11,8 @@
@@ -62,7 +66,8 @@ export default { from: String, pageObj: Object, loading: Boolean, - listMode: String + listMode: String, + timeFilter: Object }, components: { 'entity-card': Card, diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue index a7fbbfff..cd9d41e8 100644 --- a/src/views/entityExplorer/entityList/Row.vue +++ b/src/views/entityExplorer/entityList/Row.vue @@ -106,7 +106,8 @@ import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/Det export default { name: 'Row', props: { - index: Number + index: Number, + timeFilter: Object }, components: { DetailOverview diff --git a/src/views/entityExplorer/entityList/entityListMixin.js b/src/views/entityExplorer/entityList/entityListMixin.js index 5a63dbdd..2c008927 100644 --- a/src/views/entityExplorer/entityList/entityListMixin.js +++ b/src/views/entityExplorer/entityList/entityListMixin.js @@ -1,12 +1,20 @@ import _ from 'lodash' +import { get } from '@/utils/http' +import { api } from '@/utils/api' +import * as echarts from 'echarts' +import { entityListLineOption } from '@/components/charts/chart-options' +import { unitTypes } from '@/utils/constants' export default { props: { - entity: Object + entity: Object, + timeFilter: {}, + listMode: '' }, data () { return { - entityData: {} + entityData: {}, + chartOption: null } }, computed: { @@ -28,6 +36,82 @@ export default { default: break } return className + }, + entityName () { + let name + switch (this.entityData.entityType) { + case ('ip'): { + name = this.entity.ip + break + } + case ('domain'): { + name = this.entity.domainName + break + } + case ('app'): { + name = this.entity.appName + break + } + default: break + } + return name + }, + queryUrl () { + let url + switch (this.entityData.entityType) { + case ('ip'): { + url = api.ipBytes + break + } + case ('domain'): { + url = api.domainBytes + break + } + case ('app'): { + url = api.appBytes + break + } + default: break + } + return url + }, + queryParams () { + let params + const now = new Date() + switch (this.entityData.entityType) { + case ('ip'): { + params = { + queryTimeRange: { + startTime: Math.floor(now.getTime() / 1000 - 3600), + endTime: Math.floor(now.getTime() / 1000) + }, + ip: this.entityData.ip + } + break + } + case ('domain'): { + params = { + queryTimeRange: { + startTime: Math.floor(now.getTime() / 1000 - 3600), + endTime: Math.floor(now.getTime() / 1000) + }, + domain: this.entityData.domainName + } + break + } + case ('app'): { + params = { + queryTimeRange: { + startTime: Math.floor(now.getTime() / 1000 - 3600), + endTime: Math.floor(now.getTime() / 1000) + }, + appName: this.entityData.appName + } + break + } + default: break + } + return params } }, methods: { @@ -35,13 +119,110 @@ export default { }, queryTraffic () { - + get(api.entityTraffic, { entityType: this.entityData.entityType, name: this.entityName }).then(response => { + if (response.code === 200) { + response.data.result.forEach(t => { + if (t.name === 'bytes_sent_rate') { + this.entityData.bytesSentRate = t.value + } + if (t.name === 'bytes_received_rate') { + this.entityData.bytesReceivedRate = t.value + } + }) + } + }) }, querySecurity () { - + get(api.entitySecurityNum, { entityType: this.entityData.entityType, name: this.entityName }).then(response => { + if (response.code === 200) { + this.entityData.securityCount = response.data.result[0].count + } + }) }, queryAlert () { + get(api.entityAlertNum, { entityType: this.entityData.entityType, name: this.entityName }).then(response => { + if (response.code === 200) { + this.entityData.securityCount = response.data.result[0].value + } + }) + }, + queryTrafficLine () { + let chartOption + this.chartOption = this.$_.cloneDeep(entityListLineOption) + get(this.queryUrl, this.queryParams).then(response => { + if (response.code === 200) { + const seriesTemplate = this.chartOption.series[0] + const series = response.data.result.map((r, i) => { + if (r.legend === 'bytes_sent_rate') { + return { + ...seriesTemplate, + name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`], + data: r.values.map(v => [Number(v[0]), Number(v[1]), unitTypes.byte]), + itemStyle: { + normal: { + color: '#69b072', + lineStyle: { + width: 1.5 + } + } + }, + smooth: true, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#f0fff8' + }, + { + offset: 1, + color: '#f0fff8' + } + ]) + } + } + } else if (r.legend === 'bytes_received_rate') { + return { + ...seriesTemplate, + name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`], + data: r.values.map(v => [Number(v[0]), Number(v[1]), unitTypes.byte]), + itemStyle: { + normal: { + color: '#7899c6', + lineStyle: { + width: 1.5 + } + } + }, + smooth: true, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#f0f4ff' + }, + { + offset: 1, + color: '#f0f4ff' + } + ]) + } + } + } + }) + chartOption = { + ...this.chartOption, + series + } + } + }).finally(() => { + this.$nextTick(() => { + const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`)) + myChart.setOption(chartOption) + }) + }) } }, mounted () { @@ -49,5 +230,8 @@ export default { setTimeout(() => { this.queryTraffic() }) setTimeout(() => { this.querySecurity() }) setTimeout(() => { this.queryAlert() }) + if (this.listMode === 'block') { + setTimeout(() => { this.queryTrafficLine() }) + } } }