fix: 一系列优化和调整:左侧筛选空串处理、下拉增加网络质量和链路、app风险等级映射
This commit is contained in:
@@ -34,9 +34,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.chart-drawing{
|
||||
/*.chart-drawing{
|
||||
height: calc(100% - 36px) !important;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
.cn-chart__body.pie-with-table {
|
||||
flex-basis: 40%;
|
||||
|
||||
@@ -14,6 +14,11 @@
|
||||
.single-value__content {
|
||||
.content__data {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
.single-value__unit {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.content__title {
|
||||
font-size: 12px;
|
||||
|
||||
@@ -11,6 +11,12 @@
|
||||
width: 550px;
|
||||
height: 350px;
|
||||
|
||||
&.overview-map--ip {
|
||||
height: 300px;
|
||||
}
|
||||
&.overview-map--app {
|
||||
height: 325px;
|
||||
}
|
||||
.cn-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -128,11 +134,11 @@
|
||||
border-radius: 4px;
|
||||
|
||||
.tag__value {
|
||||
padding-right: 5px;
|
||||
color: #3976CB;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tag__desc {
|
||||
padding-right: 5px;
|
||||
color: #3976CB;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<!-- 值 -->
|
||||
<div class="condition__value">
|
||||
<div v-if="meta.value.isEditing">
|
||||
<el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput"></el-input>
|
||||
<el-input v-model="meta.value.value" size="mini" @blur="valueBlur(meta)" ref="valueInput" @keyup.enter="valueBlur(meta)"></el-input>
|
||||
</div>
|
||||
<span v-else @click="valueClick(meta)">{{meta.value.label}}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { GenericSQL, SqlParserVisitor } from 'dt-sql-parser'
|
||||
import Meta, { connection, condition, columnType, cloneMeta } from '@/components/advancedSearch/meta/meta'
|
||||
import { riskLevelMapping } from '@/utils/constants'
|
||||
import _ from 'lodash'
|
||||
// 补全语句,用于解析
|
||||
const sqlPrev = 'select a from b where '
|
||||
@@ -87,7 +88,7 @@ export default class SqlParser extends SqlParserVisitor {
|
||||
if (isFullText) {
|
||||
if (meta.meta === condition) {
|
||||
if (meta.column.type !== columnType.fullText) {
|
||||
sql += `${meta.column.name}${meta.operator.value}${meta.value.value} `
|
||||
sql += `${meta.column.name}${meta.operator.value}${valueHandle(meta.value.value, meta.column.name)} `
|
||||
} else {
|
||||
sql += "QUERY('"
|
||||
this.columnList.forEach(column => {
|
||||
@@ -100,7 +101,7 @@ export default class SqlParser extends SqlParserVisitor {
|
||||
if (meta.meta === condition) {
|
||||
sql += (meta.column.name)
|
||||
if (meta.column.type !== columnType.fullText) {
|
||||
sql += `${meta.operator.value}${meta.value.value} `
|
||||
sql += `${meta.operator.value}${valueHandle(meta.value.value, meta.column.name)} `
|
||||
} else {
|
||||
sql += ' '
|
||||
}
|
||||
@@ -275,3 +276,19 @@ function handleInOrLike (value, type) {
|
||||
handleValue: v
|
||||
}
|
||||
}
|
||||
|
||||
function valueHandle (value, columnName) {
|
||||
if (value === "'unknown'") {
|
||||
return "''"
|
||||
} else {
|
||||
if (columnName) {
|
||||
if (columnName === 'app_risk') {
|
||||
const m = riskLevelMapping.find(mapping => {
|
||||
return `'${mapping.name}'` === value || `'${mapping.value}'` === value
|
||||
})
|
||||
return (m && m.value) || value
|
||||
}
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
:current-row-key="tableNameColumn"
|
||||
tooltip-effect="light"
|
||||
:expand-row-keys="expandRowKeys"
|
||||
:size="'mini'"
|
||||
:height="'100%'">
|
||||
<el-table-column type="expand" :min-width="'5%'">
|
||||
size="mini"
|
||||
height="100%">
|
||||
<el-table-column type="expand" min-width="5%">
|
||||
<template #default="props">
|
||||
<div style="position: relative">
|
||||
<div class="chart__loading" style="top: 0; height: 100%; z-index: 1;" v-show="loading">
|
||||
@@ -37,7 +37,7 @@
|
||||
:prop="item.prop"
|
||||
#default="{row}">
|
||||
<span v-if="item.prop === 'nameColumn'">
|
||||
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
|
||||
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'tableNameColumn'">
|
||||
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
|
||||
@@ -65,7 +65,7 @@
|
||||
:prop="item.prop"
|
||||
#default="{row}">
|
||||
<span v-if="item.prop === 'nameColumn'">
|
||||
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:row['appRiskLevel']))}}
|
||||
{{ nameColumn === 'domainCategoryName' ? row['categoryName'] :(nameColumn === 'domainReputationLevel'? row['reputationLevel']:(nameColumn==='appCategory'?row['appCategoryName']:appRisk(row['appRiskLevel'])))}}
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'tableNameColumn'">
|
||||
{{ tableNameColumn === 'appName' ? row['appName'] : row['domain']}}
|
||||
@@ -87,7 +87,7 @@
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { get } from '@/utils/http'
|
||||
import { replaceUrlPlaceholder } from '@/utils/tools'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import { unitTypes, riskLevelMapping } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'PieTable',
|
||||
@@ -119,6 +119,16 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
appRisk () {
|
||||
return function (level) {
|
||||
const m = riskLevelMapping.find(mapping => {
|
||||
return mapping.value == level
|
||||
})
|
||||
return (m && m.name) || level
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
nameColumn: '',
|
||||
@@ -133,7 +143,7 @@ export default {
|
||||
width: '20%'
|
||||
},
|
||||
{
|
||||
label: this.$t('entities.category'),
|
||||
label: this.$t(this.chartInfo.params.tableTypeColumnLabel),
|
||||
prop: 'nameColumn',
|
||||
width: '22%'
|
||||
},
|
||||
|
||||
@@ -81,9 +81,12 @@ export default {
|
||||
this.entityTopTenData = data.map(d => {
|
||||
return {
|
||||
...d,
|
||||
name: d.name || 'unknown',
|
||||
percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.entityTopTenData = []
|
||||
}
|
||||
},
|
||||
indexMethod (index) {
|
||||
|
||||
@@ -42,6 +42,9 @@ export const api = {
|
||||
// app detail
|
||||
entityAppDetailTraffic: '/interface/entity/detail/overview/app/traffic',
|
||||
entityAppDetailRelation: '/interface/entity/detail/overview/app/relation',
|
||||
entityAppDetailNetworkQuantity: '/interface/entity/detail/overview/app/networkQuantity',
|
||||
entityAppDetailLinkIn: '/interface/entity/detail/overview/app/linkIn',
|
||||
entityAppDetailLinkOut: '/interface/entity/detail/overview/app/linkOut',
|
||||
entityAppDetailAlert: '/interface/entity/detail/overview/app/alert',
|
||||
entityAppDetailSecurity: '/interface/entity/detail/overview/app/security',
|
||||
// domain detail
|
||||
@@ -59,6 +62,9 @@ export const api = {
|
||||
entityDomainDetailTrafficMap: '/interface/entity/detail/domain/trafficMap',
|
||||
entityAppDetailTrafficMap: '/interface/entity/detail/app/trafficMap',
|
||||
entityIpDetailRelation: '/interface/entity/detail/overview/ip/relation',
|
||||
entityIpDetailNetworkQuantity: '/interface/entity/detail/overview/ip/networkQuantity',
|
||||
entityIpDetailLinkIn: '/interface/entity/detail/overview/ip/linkIn',
|
||||
entityIpDetailLinkOut: '/interface/entity/detail/overview/ip/linkOut',
|
||||
entityIpDetailAlert: '/interface/entity/detail/overview/ip/alert',
|
||||
entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security'
|
||||
}
|
||||
|
||||
@@ -136,7 +136,13 @@ export const chartPieTableTopOptions = [
|
||||
{ name: 'Packets', value: 'packets' },
|
||||
{ name: 'Bytes', value: 'bytes' }
|
||||
]
|
||||
|
||||
export const riskLevelMapping = [
|
||||
{ name: 'Trustworthy', value: 1 },
|
||||
{ name: 'Low Risk', value: 2 },
|
||||
{ name: 'Moderate Risk', value: 3 },
|
||||
{ name: 'Suspicious', value: 4 },
|
||||
{ name: 'High Risk', value: 5 }
|
||||
]
|
||||
export const iso36112 = {
|
||||
[storageKey.iso36112Capital]: 'data/countriesWithCapital',
|
||||
[storageKey.iso36112WorldLow]: 'worldChinaLow',
|
||||
|
||||
@@ -19,6 +19,7 @@ import { getUnitType } from '@/utils/unit-convert'
|
||||
import { replaceUrlPlaceholder } from '@/utils/tools'
|
||||
import { get } from '@/utils/http'
|
||||
import chartEchartMixin from './chart-echart-mixin'
|
||||
import { riskLevelMapping } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'ChartEchartWithTable',
|
||||
@@ -38,7 +39,15 @@ export default {
|
||||
components: {
|
||||
PieTable
|
||||
},
|
||||
mounted () {
|
||||
computed: {
|
||||
appRisk () {
|
||||
return function (level) {
|
||||
const m = riskLevelMapping.find(mapping => {
|
||||
return mapping.value == level
|
||||
})
|
||||
return (m && m.name) || level
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleQueryParams (queryParams) {
|
||||
@@ -61,7 +70,7 @@ export default {
|
||||
}
|
||||
return {
|
||||
data: d,
|
||||
name: d[chartParams.nameColumn],
|
||||
name: this.appRisk(d[chartParams.nameColumn]),
|
||||
value: parseInt(d[chartParams.valueColumn]),
|
||||
unitType: unitType
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<div class="content__desc" >
|
||||
<span class="desc__label">{{$t('entities.risk')}}: </span>
|
||||
<span>{{entityData.appRisk || '-'}}</span>
|
||||
<span>{{appRisk(entityData.appRisk) || '-'}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -49,17 +49,17 @@
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-id"></i>
|
||||
<span>{{$t('entities.category')}} : </span>
|
||||
<span>{{entityData.appId || '-'}}</span>
|
||||
<span>{{entityData.appCategory || '-'}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-category"></i>
|
||||
<span>{{$t('entities.subcategory')}} : </span>
|
||||
<span>{{entityData.appCategory || '-'}}</span>
|
||||
<span>{{entityData.appSubategory || '-'}}</span>
|
||||
</div>
|
||||
<div class="basic-info__item">
|
||||
<i class="cn-icon cn-icon-sub-category"></i>
|
||||
<span>{{$t('entities.risk')}} : </span>
|
||||
<span>{{entityData.appSubategory || '-'}}</span>
|
||||
<span>{{appRisk(entityData.appRisk) || '-'}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 通用字段 -->
|
||||
|
||||
@@ -63,6 +63,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
|
||||
<div class="overview__content">
|
||||
<div class="overview__row">
|
||||
<chart-single-value
|
||||
v-for="(chartInfo, i) in singleValues.chartInfos"
|
||||
:chart-info="chartInfo"
|
||||
:chart-data="singleValues.chartDatas[i]"
|
||||
:key="i"
|
||||
class="cn-chart__single-value--detail-overview"
|
||||
></chart-single-value>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('entities.accessLink')}}</div>
|
||||
<div class="overview__content">
|
||||
<div class="overview__tags">
|
||||
<div class="overview__tag">
|
||||
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
|
||||
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
|
||||
</div>
|
||||
<div class="overview__tag">
|
||||
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
|
||||
<span class="tag__value">{{entityData.linkInPercent ? unitConvert(entityData.linkInPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.alert')}}</div>
|
||||
<div class="overview__content">
|
||||
@@ -103,7 +132,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-map">
|
||||
<div class="overview-map overview-map--app">
|
||||
<chart2
|
||||
:chart-info="chart"
|
||||
:chart-data="chartData"
|
||||
@@ -122,13 +151,15 @@ import { unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import Chart2 from '@/views/charts/Chart2'
|
||||
import _ from 'lodash'
|
||||
import {get} from "@/utils/http";
|
||||
import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
|
||||
import { get } from '@/utils/http'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
mixins: [entityDetailMixin],
|
||||
components: {
|
||||
Chart2
|
||||
Chart2,
|
||||
ChartSingleValue
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -136,11 +167,59 @@ export default {
|
||||
entityType: 'app',
|
||||
trafficUrl: api.entityAppDetailTraffic,
|
||||
relationUrl: api.entityAppDetailRelation,
|
||||
networkQuantityUrl: api.entityAppDetailNetworkQuantity,
|
||||
linkInUrl: api.entityAppDetailLinkIn,
|
||||
linkOutUrl: api.entityAppDetailLinkOut,
|
||||
alertUrl: api.entityAppDetailAlert,
|
||||
securityUrl: api.entityAppDetailSecurity,
|
||||
trafficUrlMap: api.entityAppDetailTrafficMap,
|
||||
chartData: null,
|
||||
listMode: 'list'
|
||||
listMode: 'list',
|
||||
singleValues: {
|
||||
chartInfos: [
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-time',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.avgRoundTripTime'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-http',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.httpResponseLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-ssl',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.sslConLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-package-loss',
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.sequenceGapLossPercent'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-upload',
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.pktRetransPercent'
|
||||
}
|
||||
],
|
||||
chartDatas: [null, null, null, null, null]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -164,6 +243,19 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
entityData: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
|
||||
this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
|
||||
this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
|
||||
this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
|
||||
this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
|
||||
},
|
||||
|
||||
@@ -160,7 +160,7 @@ import { unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import Chart2 from '@/views/charts/Chart2'
|
||||
import _ from 'lodash'
|
||||
import {get} from "@/utils/http";
|
||||
import { get } from '@/utils/http'
|
||||
export default {
|
||||
name: 'Domain',
|
||||
components: {
|
||||
@@ -170,7 +170,7 @@ export default {
|
||||
mixins: [entityDetailMixin],
|
||||
data () {
|
||||
return {
|
||||
entityData: {},
|
||||
// entityData: {},
|
||||
entityType: 'domain',
|
||||
trafficUrl: api.entityDomainDetailTraffic,
|
||||
relationUrl: api.entityDomainDetailRelation,
|
||||
@@ -211,7 +211,7 @@ export default {
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-package-loss',
|
||||
unitType: unitTypes.time
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.sequenceGapLossPercent'
|
||||
@@ -219,10 +219,10 @@ export default {
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-upload',
|
||||
unitType: unitTypes.time
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.avgRoundTripTime'
|
||||
i18n: 'entities.pktRetransPercent'
|
||||
}
|
||||
],
|
||||
chartDatas: [null, null, null, null, null]
|
||||
@@ -255,13 +255,11 @@ export default {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if ((n.pktRetransPercent && n.sequenceGapLossPercent && n.sslConLatency && n.establishLatency && n.httpResponseLatency) !== undefined) {
|
||||
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency') || null)
|
||||
this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency') || null)
|
||||
this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency') || null)
|
||||
this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent') || null)
|
||||
this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent') || null)
|
||||
}
|
||||
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
|
||||
this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
|
||||
this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
|
||||
this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
|
||||
this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -55,6 +55,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.networkQuality')}}</div>
|
||||
<div class="overview__content">
|
||||
<div class="overview__row">
|
||||
<chart-single-value
|
||||
v-for="(chartInfo, i) in singleValues.chartInfos"
|
||||
:chart-info="chartInfo"
|
||||
:chart-data="singleValues.chartDatas[i]"
|
||||
:key="i"
|
||||
class="cn-chart__single-value--detail-overview"
|
||||
></chart-single-value>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('entities.accessLink')}}</div>
|
||||
<div class="overview__content">
|
||||
<div class="overview__tags">
|
||||
<div class="overview__tag">
|
||||
<span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
|
||||
<span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
|
||||
</div>
|
||||
<div class="overview__tag">
|
||||
<span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
|
||||
<span class="tag__value">{{entityData.linkInPercent ? unitConvert(entityData.linkInPercent, unitTypes.percent).join(' ') + '%' : '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="overview__title">{{$t('overall.alert')}}</div>
|
||||
<div class="overview__content">
|
||||
@@ -95,7 +124,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-map">
|
||||
<div class="overview-map overview-map--ip">
|
||||
<chart2
|
||||
:chart-info="chart"
|
||||
:chart-data="chartData"
|
||||
@@ -109,18 +138,20 @@
|
||||
|
||||
<script>
|
||||
import entityDetailMixin from './entityDetailMixin'
|
||||
import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
|
||||
import { api } from '@/utils/api'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import Chart2 from '@/views/charts/Chart2'
|
||||
import _ from 'lodash'
|
||||
import {get} from "@/utils/http";
|
||||
import { get } from '@/utils/http'
|
||||
|
||||
export default {
|
||||
name: 'Ip',
|
||||
mixins: [entityDetailMixin],
|
||||
components: {
|
||||
Chart2
|
||||
Chart2,
|
||||
ChartSingleValue
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -129,10 +160,58 @@ export default {
|
||||
trafficUrl: api.entityIpDetailTraffic,
|
||||
trafficUrlMap: api.entityIpDetailTrafficMap,
|
||||
relationUrl: api.entityIpDetailRelation,
|
||||
networkQuantityUrl: api.entityIpDetailNetworkQuantity,
|
||||
linkInUrl: api.entityIpDetailLinkIn,
|
||||
linkOutUrl: api.entityIpDetailLinkOut,
|
||||
alertUrl: api.entityIpDetailAlert,
|
||||
securityUrl: api.entityIpDetailSecurity,
|
||||
listMode: 'list',
|
||||
chartData: null
|
||||
chartData: null,
|
||||
singleValues: {
|
||||
chartInfos: [
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-time',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.avgRoundTripTime'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-http',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.httpResponseLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-ssl',
|
||||
unitType: unitTypes.time
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.sslConLatency'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-package-loss',
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.sequenceGapLossPercent'
|
||||
},
|
||||
{
|
||||
params: {
|
||||
icon: 'cn-icon cn-icon-upload',
|
||||
unitType: unitTypes.percent
|
||||
},
|
||||
type: 51,
|
||||
i18n: 'entities.pktRetransPercent'
|
||||
}
|
||||
],
|
||||
chartDatas: [null, null, null, null, null]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -155,7 +234,20 @@ export default {
|
||||
this.chartData = response.data.result
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
entityData: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.singleValues.chartDatas.splice(0, 1, this.$_.get(n, 'establishLatency'))
|
||||
this.singleValues.chartDatas.splice(1, 1, this.$_.get(n, 'httpResponseLatency'))
|
||||
this.singleValues.chartDatas.splice(2, 1, this.$_.get(n, 'sslConLatency'))
|
||||
this.singleValues.chartDatas.splice(3, 1, this.$_.get(n, 'sequenceGapLossPercent'))
|
||||
this.singleValues.chartDatas.splice(4, 1, this.$_.get(n, 'pktRetransPercent'))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => { setTimeout(() => { this.chartGetMap() }, 250) })
|
||||
|
||||
@@ -160,11 +160,19 @@ export default {
|
||||
queryEntityDetailLinkOutUrl () {
|
||||
if (this.linkOutUrl) {
|
||||
get(this.linkOutUrl, this.getQueryParams()).then(response => {
|
||||
if (response.code === 200 && response.data.aggregation) {
|
||||
const sum = response.data.aggregation.sum
|
||||
const max = response.data.aggregation.max
|
||||
if (response.code === 200) {
|
||||
if (!this.$_.isEmpty(response.data.result)) {
|
||||
let sum = 0
|
||||
response.data.result.forEach(r => {
|
||||
sum += parseFloat(r.bytes)
|
||||
})
|
||||
const sorted = response.data.result.sort((r1, r2) => {
|
||||
return parseFloat(r2.bytes) - parseFloat(r1.bytes)
|
||||
})
|
||||
const max = parseFloat(sorted[0].bytes)
|
||||
this.entityData.linkOutPercent = (parseFloat(max / sum) * 100).toFixed(2)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -192,12 +200,10 @@ export default {
|
||||
this.queryEntityDetailRelation()
|
||||
this.queryEntityDetailAlert()
|
||||
this.queryEntityDetailSecurity()
|
||||
if (this.entityData.entityType === 'domain') {
|
||||
this.queryEntityDetailNetworkQuantity()
|
||||
this.queryEntityDetailLinkOutUrl()
|
||||
this.queryEntityDetailLinkInUrl()
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
|
||||
@@ -3,7 +3,7 @@ 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'
|
||||
import {riskLevelMapping, unitTypes} from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -75,6 +75,14 @@ export default {
|
||||
}
|
||||
return url
|
||||
},
|
||||
appRisk () {
|
||||
return function (level) {
|
||||
const m = riskLevelMapping.find(mapping => {
|
||||
return mapping.value == level
|
||||
})
|
||||
return (m && m.name) || level
|
||||
}
|
||||
},
|
||||
queryParams () {
|
||||
let params
|
||||
const now = window.$dayJs.tz().valueOf()
|
||||
|
||||
@@ -187,12 +187,12 @@ export default {
|
||||
},
|
||||
{
|
||||
name: 'app_risk',
|
||||
type: 'long',
|
||||
type: 'string',
|
||||
// label: this.$t('trafficSummary.appRisk')
|
||||
label: 'APP risk'
|
||||
}
|
||||
],
|
||||
operatorList: ['=', '!=', '>', '<', '>=', '<=', 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'],
|
||||
operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
|
||||
connectionList: [
|
||||
{
|
||||
value: 'AND',
|
||||
|
||||
Reference in New Issue
Block a user