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

CN-1483 network overview单位统一

Browse Source
This commit is contained in:
hanyuxia
2023-11-24 17:11:42 +08:00
parent 6450e8e050
commit a9e84fd714
7 changed files with 63 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/css/components/views/charts2/networkOverviewTabs.scss
View File

@@ -52,6 +52,12 @@
display:flex;
flex-direction:column;
align-items: flex-start;
color: #778391;
font-weight: 400;
.data-column__span {
font-weight: bold;
color:#353636;
}
.unit__span {
color: #778391;
font-weight: 400;

13
src/utils/constants.js
View File

@@ -247,18 +247,25 @@ export const networkOverviewTabs = [
export const metricOptions = [
{
value: 'Bits/s',
label: 'Bits/s'
label: 'metric.bps'
},
{
value: 'Packets/s',
label: 'Packets/s'
label: 'metric.packets'
},
{
value: 'Sessions/s',
label: 'Sessions/s'
label: 'metric.sessions'
}
]
export const metricType = {
Bits: 'Bits/s',
Packets: 'Packets/s',
Sessions: 'Sessions/s'
}
export const operationType = {
mainMenu: 0, // 菜单
secondMenu: 2, // 二级菜单

2
src/views/charts2/Panel.vue
View File

@@ -33,7 +33,7 @@
<template #prefix>
<span class="select-prefix">{{$t('detections.metric')}}:</span>
</template>
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
<div class="panel__time">
<date-time-range

18
src/views/charts2/charts/entityDetail/EntityDetailLine.vue
View File

@@ -55,7 +55,7 @@
:popper-append-to-body="false"
@change="metricChange"
>
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
</div>
</div>
@@ -92,7 +92,7 @@ import chartMixin from '@/views/charts2/chart-mixin'
import * as echarts from 'echarts'
import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
import { unitTypes, chartColor3, chartColor4, metricType, metricOptions } from '@/utils/constants.js'
import { ref, shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import _ from 'lodash'
@@ -104,7 +104,6 @@ import { useRoute } from 'vue-router'
import { getLineType, getMarkLineByLineRefer, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import ChartError from '@/components/common/Error'
import { dataForNetworkOverviewLine } from '@/utils/static-data'
import { metricOptions } from '@/utils/constants'
export default {
name: 'EntityDetailLine',
@@ -542,7 +541,7 @@ export default {
}
}
if (val === 'Sessions/s') {
if (val === metricType.Sessions) {
const tabs = _.cloneDeep(this.tabsTemplate)
lineData.forEach((d, i) => {
tabs[i].data = d.values
@@ -552,7 +551,8 @@ export default {
if (i !== 0) {
e.show = false
}
e.unitType = 'sessions/s'
const metric = metricOptions.find(item => item.value === metricType.Sessions)
e.unitType = metric ? this.$t(metric.label) : ''
e.invertTab = false
this.lineTab = 'total'
this.legendSelectChange(e, 0)
@@ -563,7 +563,11 @@ export default {
this.echartsInit(this.tabs, true)
})
} else {
const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
let metric = metricOptions.find(item => item.value === val)
if (!metric) {
metric = metricOptions.find(item => item.value === metricType.Packets)
}
const unit = metric ? this.$t(metric.label) : ''
this.legendInit(lineData, active, show, unit, n)
}
},
@@ -689,7 +693,7 @@ export default {
this.chartOption = null
const self = this
self.timer = setTimeout(() => {
if (self.lineTab && self.metric !== 'Sessions/s') {
if (self.lineTab && self.metric !== metricType.Sessions) {
const data = self.tabsTemplate.find(t => t.class === self.lineTab)
self.activeChange(data, data.positioning)
} else {

12
src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue
View File

@@ -37,7 +37,7 @@
<div v-else-if="app.value === '-' || app.value === 0" class="app-card__body-content-percent">+0.00%</div>
</div>
</div>
<div class="app-card__body-unit">{{this.metric}}</div>
<div class="app-card__body-unit">{{$t(metricShow.label)}}</div>
<div class="app-card__body-previous">
<div>{{$t('network.total')}}</div>
<div v-if="metric === 'Bits/s'" :test-id="`total${index}`">{{valueToRangeValue(app.total, unitTypes.byte).join(' ')}}</div>
@@ -122,7 +122,7 @@
<script>
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
import { storageKey, unitTypes, networkTable, operationType, curTabState } from '@/utils/constants'
import { storageKey, unitTypes, networkTable, operationType, curTabState, metricType, metricOptions } from '@/utils/constants'
import * as echarts from 'echarts'
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
import { shallowRef } from 'vue'
@@ -174,7 +174,11 @@ export default {
curTabState: curTabState,
urlChangeParams: {},
showError: false,
errorMsg: ''
errorMsg: '',
metricShow: {
value: 'Bits/s',
label: 'metric.bps'
}
}
},
props: {
@@ -204,6 +208,7 @@ export default {
this.init()
},
metric (n) {
this.metricShow = metricOptions.find(item => item.value === this.metric)
this.init()
}
},
@@ -721,6 +726,7 @@ export default {
}
},
mounted () {
this.metricShow = metricOptions.find(item => item.value === this.metric)
if (this.chart && this.chart.params && this.chart.params.app) {
const userId = parseInt(localStorage.getItem(storageKey.userId))
const apps = _.cloneDeep(this.chart.params.app)

16
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -62,7 +62,7 @@
import * as echarts from 'echarts'
import { stackedLineChartOption } from '@/views/charts2/charts/options/echartOption'
import { valueToRangeValue } from '@/utils/unit-convert'
import { unitTypes, chartColor3, chartColor4 } from '@/utils/constants.js'
import { unitTypes, chartColor3, chartColor4, metricType, metricOptions } from '@/utils/constants.js'
import { ref, shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import _ from 'lodash'
@@ -509,7 +509,7 @@ export default {
}
}
if (val === 'Sessions/s') {
if (val === metricType.Sessions) {
const tabs = _.cloneDeep(this.tabsTemplate)
lineData.forEach((d, i) => {
tabs[i].data = d.values
@@ -519,7 +519,8 @@ export default {
if (i !== 0) {
e.show = false
}
e.unitType = 'sessions/s'
const metric = metricOptions.find(item => item.value === metricType.Sessions)
e.unitType = metric ? this.$t(metric.label) : ''
e.invertTab = false
this.lineTab = 'total'
this.legendSelectChange(e, 0)
@@ -530,7 +531,12 @@ export default {
this.echartsInit(this.tabs, true)
})
} else {
const unit = val === 'Bits/s' ? 'bps' : 'packets/s'
let metric = metricOptions.find(item => item.value === val)
if (!metric) {
metric = metricOptions.find(item => item.value === metricType.Packets)
}
const unit = metric ? this.$t(metric.label) : ''
this.legendInit(lineData, active, show, unit, n)
}
},
@@ -623,7 +629,7 @@ export default {
this.chartOption = null
const self = this
self.timer = setTimeout(() => {
if (self.lineTab && self.metric !== 'Sessions/s') {
if (self.lineTab && self.metric !== metricType.Sessions) {
const data = self.tabsTemplate.find(t => t.class === self.lineTab)
self.activeChange(data, data.positioning)
} else {

23
src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue
View File

@@ -114,7 +114,7 @@
<div v-else>
<div class="title-unit" v-if="tableType === 'networkOverview'">
<span class="data-column__span" >{{$t(item.label)}}</span>
<span class="unit__span" >{{metric}}</span>
{{$t(metricShow.label)}}
</div>
<div v-else>
<span class="data-column__span" >{{$t(item.label)}}</span>
@@ -291,7 +291,9 @@ import {
drillDownPanelTypeMapping,
commonErrorTip,
ZH,
EN
EN,
metricType,
metricOptions
} from '@/utils/constants'
import axios from 'axios'
import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
@@ -319,7 +321,11 @@ export default {
commonTabList: [],
commonColumnList: [],
tables: [],
list: [], // 当前状态列表
list: [], // 当前状态列表,
metricShow: {
value: 'Bits/s',
label: 'metric.bps'
},
allList: [], // 包含2级标签的所有状态的列表
networkTabList: [], // 原始状态列表
showBackground: false,
@@ -374,7 +380,7 @@ export default {
chart: Object,
metric: {
type: String,
default: 'Bits/s'
default: metricType.Bits
}
},
watch: {
@@ -386,6 +392,7 @@ export default {
}
},
metric (n) {
this.metricShow = metricOptions.find(item => item.value === n)
this.changeMetric()
},
scoreBaseState (n) {
@@ -2225,17 +2232,17 @@ export default {
return tabs
},
initMetric () {
if (this.metric === 'Bits/s') {
if (this.metric === metricType.Bits) {
this.columnNameGroup = this.curTableInCode ? this.curTableInCode.bytesColumnNameGroup : []
this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.bytesCycleColumnNameGroup : []
this.orderBy = 'totalBytes'
this.metricUnit = 'bytes'
} else if (this.metric === 'Packets/s') {
} else if (this.metric === metricType.Packets) {
this.columnNameGroup = this.curTableInCode ? this.curTableInCode.packetsColumnNameGroup : []
this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.packetsCycleColumnNameGroup : []
this.orderBy = 'totalPackets'
this.metricUnit = 'packets'
} else if (this.metric === 'Sessions/s') {
} else if (this.metric === metricType.Sessions) {
this.columnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsColumnNameGroup : []
this.cycleColumnNameGroup = this.curTableInCode ? this.curTableInCode.sessionsCycleColumnNameGroup : []
this.orderBy = 'sessions'
@@ -2257,6 +2264,7 @@ export default {
},
async mounted () {
this.list = null
this.metricShow = metricOptions.find(item => item.value === this.metric)
this.tabList = null
this.allList = null
this.drillDownTableConfigs = null
@@ -2332,7 +2340,6 @@ export default {
}
this.activeCustomize = ref('tabs')
this.networkSearchUrl = this.curTable.url
// let metric = this.getUrlParam(this.curTabState.tableMetric, 'Bits/s')
this.initMetric()
this.isOnlyRead = this.curTable.isOnlyRead ? this.curTable.isOnlyRead : false
this.showUnit = this.curTable.showUnit ? this.curTable.showUnit : false