+
-
-
diff --git a/src/views/charts/charts/chart-relation-ship.js b/src/views/charts/charts/chart-relation-ship.js
new file mode 100644
index 00000000..90ce502c
--- /dev/null
+++ b/src/views/charts/charts/chart-relation-ship.js
@@ -0,0 +1,269 @@
+import _ from 'lodash'
+import { get } from '@/utils/http'
+import * as echarts from 'echarts'
+import { entityListLineOption } from '@/views/charts/charts/chart-options'
+import { riskLevelMapping, unitTypes } from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
+import { shallowRef } from 'vue'
+
+export default {
+ props: {
+ entity: Object,
+ timeFilter: Object
+ },
+ data () {
+ return {
+ entityData: {
+ chartOptionSent: null,
+ chartOptionReceived: null,
+ chartOption: null,
+ sentChart: null,
+ receivedChart: null,
+ tableData: {}
+ },
+ chartOption: null,
+ echartsArray: []
+ }
+ },
+ computed: {
+ iconClass () {
+ return function (entityData) {
+ let className
+ switch (entityData.eventSeverity) {
+ case ('critical'): {
+ className = 'critical'
+ break
+ }
+ case ('high'): {
+ className = 'high'
+ break
+ }
+ case ('info'): {
+ className = 'info'
+ break
+ }
+ case ('medium'): {
+ className = 'medium'
+ break
+ }
+ case ('low'): {
+ className = 'low'
+ break
+ }
+ default:
+ break
+ }
+ return className
+ }
+ },
+ appRisk () {
+ return function (level) {
+ const m = riskLevelMapping.find(mapping => {
+ return mapping.value == level
+ })
+ return (m && m.name) || level
+ }
+ },
+ ipLocationRegion () {
+ return function (entityData) {
+ let result = ''
+ if (entityData.country) {
+ result += `${entityData.country},`
+ }
+ if (entityData.province) {
+ result += `${entityData.province},`
+ }
+ if (entityData.city) {
+ result += `${entityData.city},`
+ }
+ result = result.substr(0, result.length - 1)
+ if (!result) {
+ result = '-'
+ }
+ return result
+ }
+ }
+ },
+ methods: {
+ queryEntityDetailTraffic (urlObj, params, queryParams) {
+ if (!echarts.init(document.getElementById('entityDetailSend')) && !echarts.init(document.getElementById('entityDetailReceived'))) return ''
+ this.chartOption = _.cloneDeep(entityListLineOption)
+ this.sentChart = echarts.init(document.getElementById('entityDetailSend'))
+ this.receivedChart = echarts.init(document.getElementById('entityDetailReceived'))
+ this.loadingTraffic = true
+ get(urlObj.trafficUrl, queryParams).then(response => {
+ if (response.code === 200 && response.data.result && response.data.result.length > 0) {
+ response.data.result.forEach(t => {
+ if (t.legend === 'bytesSentRate') {
+ this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
+ this.chartOptionSent = {
+ ...this.chartOption,
+ series: [
+ {
+ name: this.$t('entities.sentThroughput'),
+ type: 'line',
+ legendHoverLink: false,
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 1
+ }
+ }
+ },
+ color: '#69b072',
+ data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+ showSymbol: false
+ }
+ ]
+ }
+ } else if (t.legend === 'bytesReceivedRate') {
+ this.entityData.bytesReceivedRate = t.aggregation.last
+ this.chartOptionReceived = {
+ ...this.chartOption,
+ series: [
+ {
+ name: this.$t('entities.receivedThroughput'),
+ type: 'line',
+ legendHoverLink: false,
+ itemStyle: {
+ normal: {
+ lineStyle: {
+ width: 1
+ }
+ }
+ },
+ color: '#7899c6',
+ data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+ showSymbol: false
+ }
+ ]
+ }
+ }
+ })
+ this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
+ this.sentChart.setOption(this.chartOptionSent)
+ this.receivedChart.setOption(this.chartOptionReceived)
+ this.loadingTraffic = false
+ } else {
+ this.loadingTraffic = false
+ }
+ })
+ },
+
+ queryEntityDetaServerOverview (urlObj, params, queryParams) {
+ this.loadingServiceQuality = true
+ get(urlObj.ServerOverviewUrl, queryParams).then(response => {
+ if (response.code === 200) {
+ this.entityData.establishLatencyMs = response.data.result.establishLatencyMs
+ this.entityData.pktRetransPercent = response.data.result.pktRetransPercent
+ }
+ this.loadingServiceQuality = false
+ })
+ },
+
+ queryEntityDetailPerformance (urlObj, params, queryParams) {
+ this.loadingAlert = true
+ get(urlObj.performanceUrl, queryParams).then(response => {
+ if (response.code === 200) {
+ this.entityData.shipServerity = []
+ const criticalList = response.data.result.filter(item => item.eventSeverity === 'critical')
+ const highList = response.data.result.filter(item => item.eventSeverity === 'high')
+ const infoList = response.data.result.filter(item => item.eventSeverity === 'info')
+ const mediumList = response.data.result.filter(item => item.eventSeverity === 'medium')
+ const lowList = response.data.result.filter(item => item.eventSeverity === 'low')
+ this.entityData.shipServerity.push(
+ {
+ severityData: criticalList,
+ eventSeverity: 'critical'
+ }, {
+ severityData: highList,
+ eventSeverity: 'high'
+ }, {
+ severityData: infoList,
+ eventSeverity: 'info'
+ }, {
+ severityData: mediumList,
+ eventSeverity: 'medium'
+ }, {
+ severityData: lowList,
+ eventSeverity: 'low'
+ }
+ )
+ this.entityData.shipServerity.forEach(item => {
+ if (item.severityData.length > 0) {
+ this.entityData.showShipServerity = true
+ } else {
+ this.entityData.showShipServerity = false
+ }
+ })
+ }
+ this.loadingAlert = false
+ })
+ },
+ getBasicProperties (urlObj, params, queryParams) {
+ this.loadingIp = true
+ this.loadingDomain = true
+ this.loadingApp = true
+ get(urlObj.basicProperties, queryParams).then(response => {
+ if (response.code === 200) {
+ if (urlObj.entityType === 'ip') {
+ this.entityData = {
+ ...this.entityData,
+ asn: response.data.result.asn,
+ country: response.data.result.country,
+ province: response.data.result.province,
+ city: response.data.result.city
+ }
+ } else if (urlObj.entityType === 'domain') {
+ this.entityData = {
+ ...this.entityData,
+ domainCategory: response.data.result.domainCategory,
+ domainCategoryGroup: response.data.result.domainCategoryGroup,
+ domainDescription: response.data.result.domainDescription,
+ domainReputationScore: response.data.result.domainReputationScore,
+ domainWhoisAddress: response.data.result.domainWhoisAddress,
+ domainWhoisOrg: response.data.result.domainWhoisOrg
+ }
+ } else if (urlObj.entityType === 'app') {
+ this.entityData = {
+ ...this.entityData,
+ name: response.data.result.name,
+ appId: response.data.result.appId,
+ category: response.data.result.category,
+ subcategory: response.data.result.subcategory
+ }
+ }
+ }
+ this.loadingIp = false
+ this.loadingDomain = false
+ this.loadingApp = false
+ })
+ },
+
+ queryEntityDetail (urlObj, params, queryParams) {
+ this.entityData.tableData.name = params.data.name
+ this.entityData.tableData.symbol = params.data.symbol.slice(8)
+ this.entityData.tableData.type = urlObj.entityType
+ this.queryEntityDetailTraffic(urlObj, params, queryParams)
+ this.queryEntityDetailPerformance(urlObj, params, queryParams)
+ this.queryEntityDetaServerOverview(urlObj, params, queryParams)
+ this.getBasicProperties(urlObj, params, queryParams)
+ },
+ resize () {
+ this.echartsArray.forEach(item => { item.value.resize() })
+ }
+ },
+ setup () {
+ return {
+ unitTypes,
+ unitConvert
+ }
+ },
+ mounted () {
+ this.debounceFunc = this.$_.debounce(this.resize, 200)
+ window.addEventListener('resize', this.debounceFunc)
+ },
+ beforeUnmount () {
+ window.removeEventListener('resize', this.debounceFunc)
+ }
+}
+ ![]()
+
+ {{ $_.get(entityData.tableData, 'name') || '-' }}
+
+
+
+
+
+
+ {{$t('overall.location')}}
+ {{ipLocationRegion(entityData)}}
+
+
+ ASN
+ {{entityData.asn || '-'}}
+
+
+
+
+ APP ID
+ {{entityData.appId|| '-'}}
+
+
+ {{$t('entities.category')}}
+ {{entityData.category|| '-'}}
+
+
+ {{$t('entities.subcategory')}}
+ {{entityData.subcategory || '-'}}
+
+
+ {{$t('entities.riskLevel')}}
+ {{appRisk(entityData.appRisk) || '-'}}
+
+
+
+
+ {{$t('entities.category')}}
+ {{entityData.domainCategory || '-'}}
+
+
+ {{$t('entities.domainDetail.categoryGroup')}}
+ {{entityData.domainCategoryGroup || '-'}}
+
+
+ {{$t('entities.reputationLevel')}}
+ {{entityData.domainReputationScore || '-'}}
+
+
+ {{$t('entities.registration')}}
+ {{entityData.domainWhoisAddress || '-'}}
+
+
+ {{$t('entities.org')}}
+ {{entityData.domainWhoisOrg || '-'}}
+
+
+ {{$t('overall.traffic')}}
+
+
+
+
+ {{$t('overall.received')}}
+
+
+ {{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps
+
+
+
+
+
+ {{$t('overall.sent')}}
+
+
+ {{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps
+
+
+
+
+
+ {{$t('relationShip.serviceQuality')}}
+
+
+
+
+ {{$t('networkAppPerformance.tripTime')}}:
{{unitConvert(entityData.establishLatencyMs, unitTypes.time).join(' ')}}
+
+
+ {{$t('overall.packetLoss')}}:
{{unitConvert(entityData.pktRetransPercent, unitTypes.percent).join(' ')}}
+
+
+ {{$t('relationShip.alert')}}
+
+
+
+
+ {{ item.eventSeverity }}
+ {{ item.severityData.length }}
+
+
+
+ {{$t('relationShip.noRecentAlerts')}}
+
+