gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 实体代码整理

Browse Source
This commit is contained in:
chenjinsong
2022-03-27 13:04:47 +08:00
parent 8513bc4f20
commit 5fbd73103f
15 changed files with 384 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/views/entityExplorer/entityList/Row.vue
View File

@@ -101,17 +101,17 @@
<!-- 曲线-->
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'"
></div>
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'app'"
></div>
<div
class="row__charts"
:id="`entityDetailSend${entityType}`"
:id="`entityDetailSend${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'"
></div>
</div>
@@ -136,17 +136,17 @@
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'domain'"
></div>
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'app'"
></div>
<div
class="row__charts"
:id="`entityDetailReceived${entityType}`"
:id="`entityDetailReceived${entityType}${listMode}`"
v-if="entityData.entityType === 'ip'"
></div>
</div>
@@ -166,10 +166,9 @@
</div>
<div
class="show-detail"
:style="{ visibility: !isCollapse ? 'visible' : 'hidden' }"
@click="showDetail"
>
{{ $t('overall.detail') }}>>
{{ $t('overall.detail') }}>
</div>
</div>
</div>
@@ -188,29 +187,24 @@
</template>
<script>
import entityListMixin from './entityListMixin'
import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import entityDetailMixin from './detailOverview/entityDetailMixin'
import entityListMixin from './entityListMixin'
import relatedServer from '@/mixins/relatedServer'
import { api } from '@/utils/api'
export default {
name: 'Row',
props: {
index: Number,
timeFilter: Object
timeFilter: Object,
listMode: String
},
components: {
DetailOverview
},
mixins: [entityListMixin, entityDetailMixin, relatedServer],
mixins: [entityListMixin, relatedServer],
data () {
return {
isCollapse: true, // 是否是折叠状态
trafficUrl: '',
entityType: ''
isCollapse: true // 是否是折叠状态
}
},
computed: {
@@ -236,58 +230,6 @@ export default {
return '-'
}
}
},
entityType () {
let type
switch (this.entityData.entityType) {
case 'ip': {
type = this.entityData.ipAddr
break
}
case 'domain': {
type = this.entityData.domainName
break
}
case 'app': {
type = this.entityData.appName
break
}
default:
break
}
this.entityType = type
return type
}
},
watch: {
entityData: {
deep: true,
handler (n) {
if (n.entityType) {
switch (n.entityType) {
case 'ip': {
this.trafficUrl = api.entityIpDetailTraffic
break
}
case 'domain': {
this.trafficUrl = api.entityDomainDetailTraffic
break
}
case 'app': {
this.trafficUrl = api.entityAppDetailTraffic
break
}
default:
break
}
}
}
}
},
setup () {
return {
unitConvert,
unitTypes
}
},
methods: {
@@ -299,16 +241,6 @@ export default {
/* 设为折叠状态 */
collapse () {
this.isCollapse = true
},
getQueryParams () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
appName: this.entityType,
domain: this.entityType,
ip: this.entityType
}
return queryParams
}
}
}

11
src/views/entityExplorer/entityList/detailOverview/App.vue
View File

@@ -224,7 +224,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -232,7 +232,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -240,7 +240,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -248,7 +248,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -256,7 +256,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -295,6 +295,7 @@ export default {
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.queryRelated()
}, 250)
})
},

11
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -229,7 +229,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -237,7 +237,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -245,7 +245,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -253,7 +253,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -261,7 +261,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -316,6 +316,7 @@ export default {
setTimeout(() => {
this.chartGetMap()
this.getBasicProperties()
this.queryRelated()
}, 250)
})
},

11
src/views/entityExplorer/entityList/detailOverview/Ip.vue
View File

@@ -211,7 +211,7 @@ export default {
icon: 'cn-icon cn-icon-time',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.avgRoundTripTime'
},
{
@@ -219,7 +219,7 @@ export default {
icon: 'cn-icon cn-icon-http',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.httpResponseLatency'
},
{
@@ -227,7 +227,7 @@ export default {
icon: 'cn-icon cn-icon-ssl',
unitType: unitTypes.time
},
type: 51,
type: 501,
i18n: 'entities.sslConLatency'
},
{
@@ -235,7 +235,7 @@ export default {
icon: 'cn-icon cn-icon-package-loss',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.sequenceGapLossPercent'
},
{
@@ -243,7 +243,7 @@ export default {
icon: 'cn-icon cn-icon-upload',
unitType: unitTypes.percent
},
type: 51,
type: 501,
i18n: 'entities.pktRetransPercent'
}
],
@@ -302,6 +302,7 @@ export default {
this.$nextTick(() => {
setTimeout(() => {
this.chartGetMap()
this.queryRelated()
}, 250)
})
},

235
src/views/entityExplorer/entityList/entityListMixin.js
View File

@@ -5,17 +5,21 @@ import * as echarts from 'echarts'
import { entityListLineOption } from '@/views/charts/charts/chart-options'
import { riskLevelMapping, unitTypes } from '@/utils/constants'
import { getSecond } from '@/utils/date-util'
import unitConvert from '@/utils/unit-convert'
export default {
props: {
entity: Object,
timeFilter: {},
listMode: ''
listMode: String
},
data () {
return {
entityData: {},
chartOption: null
trafficUrl: '',
chartOption: null,
unitTypes,
unitConvert
}
},
computed: {
@@ -38,6 +42,26 @@ export default {
}
return className
},
entityType () {
let type
switch (this.entityData.entityType) {
case 'ip': {
type = this.entityData.ipAddr
break
}
case 'domain': {
type = this.entityData.domainName
break
}
case 'app': {
type = this.entityData.appName
break
}
default:
break
}
return type
},
entityName () {
let name
switch (this.entityData.entityType) {
@@ -57,25 +81,6 @@ export default {
}
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
},
appRisk () {
return function (level) {
const m = riskLevelMapping.find(mapping => {
@@ -128,26 +133,6 @@ export default {
})
window.open(href, '_blank')
},
queryTraffic () {
const queryParams = {
startTime: parseInt(this.timeFilter.startTime / 1000),
endTime: parseInt(this.timeFilter.endTime / 1000),
entityType: this.entityData.entityType,
name: this.entityName
}
get(api.entityTraffic, queryParams).then(response => {
if (response.code === 200) {
response.data.result.forEach(t => {
if (t.legend === 'bytesSentRate') {
this.entityData.bytesSentRate = t.aggregation.last
}
if (t.legend === 'bytesReceivedRate') {
this.entityData.bytesReceivedRate = t.aggregation.last
}
})
}
})
},
querySecurity () {
const queryParams = {
startTime: getSecond(this.timeFilter.startTime),
@@ -174,7 +159,7 @@ export default {
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.securityCount = response.data.result && response.data.result.length
this.entityData.securityCount = response.data.result ? response.data.result.length : 0
}
})
},
@@ -204,99 +189,129 @@ export default {
}
get(url, queryParams).then(response => {
if (response.code === 200) {
this.entityData.performanceCount = response.data.result && response.data.result.length
this.entityData.performanceCount = response.data.result ? response.data.result.length : 0
}
})
},
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]) * 1000, Number(v[1]), unitTypes.byte]),
getQueryParams () {
return {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
appName: this.entityType,
domain: this.entityType,
ip: this.entityType
}
},
queryEntityDetailTraffic () {
get(this.trafficUrl, this.getQueryParams()).then(response => {
if (response.code === 200 && response.data.result && response.data.result.length > 0) {
let sentSeries
let receivedSeries
response.data.result.forEach(t => {
if (t.legend === 'bytesRate') {
this.entityData.max = t.aggregation.max
this.entityData.avg = t.aggregation.avg
this.entityData.p50 = t.aggregation.p50
this.entityData.p90 = t.aggregation.p90
} else if (t.legend === 'bytesSentRate') {
this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
sentSeries = {
name: this.$t('entities.sentThroughput'),
type: 'line',
legendHoverLink: false,
itemStyle: {
normal: {
color: '#69b072',
lineStyle: {
width: 1.5
width: 1
}
}
},
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#f0fff8'
},
{
offset: 1,
color: '#f0fff8'
}
])
}
color: '#69b072',
data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
showSymbol: false
}
} 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]) * 1000, Number(v[1]), unitTypes.byte]),
} else if (t.legend === 'bytesReceivedRate') {
this.entityData.bytesReceivedRate = t.aggregation.last
receivedSeries = {
name: this.$t('entities.receivedThroughput'),
type: 'line',
legendHoverLink: false,
itemStyle: {
normal: {
color: '#7899c6',
lineStyle: {
width: 1.5
width: 1
}
}
},
smooth: true,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#f0f4ff'
},
{
offset: 1,
color: '#f0f4ff'
}
])
}
color: '#7899c6',
data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
showSymbol: false
}
}
return {}
})
chartOption = {
...this.chartOption,
series
if (this.listMode === 'block') {
const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`))
chart.setOption({
...this.chartOption,
series: [sentSeries, receivedSeries]
})
} else if (this.listMode === 'list') {
const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`))
const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`))
sentChart.setOption({
...this.chartOption,
series: [sentSeries]
})
receivedChart.setOption({
...this.chartOption,
series: [receivedSeries]
})
}
}
}).finally(() => {
this.$nextTick(() => {
if (chartOption) {
const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`))
myChart.setOption(chartOption)
}
})
setTimeout(() => {
try {
this.$nextTick(() => {
this.sentChart && this.sentChart.resize()
this.receivedChart && this.receivedChart.resize()
})
} catch (e) {}
}, 250)
})
}
},
mounted () {
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => { this.queryTraffic() })
setTimeout(() => { this.querySecurity() })
setTimeout(() => { this.queryPerformance() })
if (this.listMode === 'block') {
setTimeout(() => { this.queryTrafficLine() })
watch: {
entityData: {
deep: true,
handler (n) {
if (n.entityType) {
switch (n.entityType) {
case 'ip': {
this.trafficUrl = api.entityIpDetailTraffic
break
}
case 'domain': {
this.trafficUrl = api.entityDomainDetailTraffic
break
}
case 'app': {
this.trafficUrl = api.entityAppDetailTraffic
break
}
default:
break
}
}
}
}
},
mounted () {
this.chartOption = _.cloneDeep(entityListLineOption)
this.entityData = _.cloneDeep(this.entity)
setTimeout(() => {
this.querySecurity()
this.queryEntityDetailTraffic()
this.queryPerformance()
})
}
}