CN-1594 feat: 清理过时scss文件
This commit is contained in:
chenjinsong
@@ -136,24 +136,6 @@
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></link-direction-grid>
|
||||
<dns-active-malicious-domain
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsActiveMaliciousDomain"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-active-malicious-domain>
|
||||
<dns-event-chart
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsEventChart"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-event-chart>
|
||||
<dns-recent-events
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsRecentEvents"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
@toggleLoading="toggleLoading"
|
||||
></dns-recent-events>
|
||||
<dns-traffic-line
|
||||
v-else-if="chart.type === typeMapping.dnsInsight.dnsTrafficLine"
|
||||
:time-filter="timeFilter"
|
||||
@@ -228,9 +210,6 @@ import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
|
||||
import LinkBlock from '@/views/charts2/charts/linkMonitor/LinkBlock'
|
||||
import LinkTrafficSankey from '@/views/charts2/charts/linkMonitor/LinkTrafficSankey'
|
||||
import LinkTrafficLine from '@/views/charts2/charts/linkMonitor/LinkTrafficLine'
|
||||
import DnsActiveMaliciousDomain from '@/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain'
|
||||
import DnsEventChart from '@/views/charts2/charts/dnsInsight/DnsEventChart'
|
||||
import DnsRecentEvents from '@/views/charts2/charts/dnsInsight/DnsRecentEvents'
|
||||
import DnsTrafficLine from '@/views/charts2/charts/dnsInsight/DnsTrafficLine'
|
||||
import EntityDetailBasicInfo from '@/views/charts2/charts/entityDetail/EntityDetailBasicInfo'
|
||||
import EntityDetailLine from '@/views/charts2/charts/entityDetail/EntityDetailLine'
|
||||
@@ -268,9 +247,6 @@ export default {
|
||||
LinkBlock,
|
||||
LinkTrafficSankey,
|
||||
LinkTrafficLine,
|
||||
DnsActiveMaliciousDomain,
|
||||
DnsEventChart,
|
||||
DnsRecentEvents,
|
||||
DnsTrafficLine,
|
||||
EntityDetailBasicInfo,
|
||||
EntityDetailSubscriberKpi,
|
||||
|
||||
@@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-mailcious-domain">
|
||||
<div class="dns-mailcious-domain-title">
|
||||
{{ $t('dns.activeMaliciousDomains') }}
|
||||
</div>
|
||||
<el-table :data="tableData" class="dns-mailcious-domain-table" height="100%">
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column">
|
||||
<!--表头-->
|
||||
<template #header>
|
||||
<span class="dns-column__span">{{ $t(item.label) }}</span>
|
||||
</template>
|
||||
<!--表格内容-->
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-mailcious-domain-table">
|
||||
<template v-if="item.prop === 'domain'">
|
||||
<span class="data-column-domain">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'ips'">
|
||||
<el-popover placement="right" :width="126" trigger="hover" v-if="scope.row['ips'].split(',').length >=3">
|
||||
<template #reference>
|
||||
<span class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
<!--超过3个ip就省略号显示，移动鼠标block块展示，并换行-->
|
||||
<pre style="max-height: 152px;margin: 0 -10px -15px 0;overflow: scroll;"><span style="height: 24px;line-height: 24px;color: #046ECA;">{{scope.row[item.prop].replace(/,/g, '\n')}}</span></pre>
|
||||
</el-popover>
|
||||
<span v-else class="data-column-ips">{{ $t(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'numberOfIPs'">
|
||||
<span>{{ scope.row['ips'].split(',').length }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'queries'">
|
||||
<span>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'firstSeenTime'">
|
||||
<span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.prop === 'lastSeenTime'">
|
||||
<span>{{ dateFormatByAppearance(scope.row[item.prop]) }}</span>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
|
||||
<template v-slot:empty>
|
||||
<div class="table-no-data" v-show="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import axios from 'axios'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
|
||||
export default {
|
||||
name: 'DnsActiveMaliciousDomain',
|
||||
data () {
|
||||
return {
|
||||
tableData: [], // 表格数据
|
||||
// 表头数据
|
||||
customTableTitles: [
|
||||
{
|
||||
label: 'dns.domain',
|
||||
prop: 'domain'
|
||||
},
|
||||
{
|
||||
label: 'dns.IPs',
|
||||
prop: 'ips'
|
||||
},
|
||||
{
|
||||
label: 'dns.numberOfIPs',
|
||||
prop: 'numberOfIPs'
|
||||
},
|
||||
{
|
||||
label: 'dns.queries',
|
||||
prop: 'queries'
|
||||
},
|
||||
{
|
||||
label: 'dns.firstSeenTime',
|
||||
prop: 'firstSeenTime'
|
||||
},
|
||||
{
|
||||
label: 'dns.lastSeenTime',
|
||||
prop: 'lastSeenTime'
|
||||
}
|
||||
],
|
||||
isNoData: false // 无数据标识，true为无数据，false有数据
|
||||
}
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData () {
|
||||
this.toggleLoading(true)
|
||||
|
||||
this.tableData = []
|
||||
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.activeMaliciousDomain, { params: params }).then(response => {
|
||||
const res = response.data
|
||||
if (response.status === 200) {
|
||||
this.isNoData = res.data.result.length === 0
|
||||
this.tableData = res.data.result
|
||||
} else {
|
||||
this.isNoData = true
|
||||
this.tableData = []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-event-chart">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<template v-else>
|
||||
<div class="dns-event-chart-pie">
|
||||
<dns-event-chart-by-pie :timeFilter="timeFilter" :pieData="pieData"/>
|
||||
</div>
|
||||
<div class="dns-event-chart-bar">
|
||||
<dns-event-chart-by-bar :timeFilter="timeFilter" :series="series"/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import dnsEventChartByPie from './DnsEventChartByPie'
|
||||
import dnsEventChartByBar from './DnsEventChartByBar'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChart',
|
||||
props: {
|
||||
type: String
|
||||
},
|
||||
components: {
|
||||
ChartNoData,
|
||||
dnsEventChartByPie,
|
||||
dnsEventChartByBar
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pieData: [], // 饼状图数据
|
||||
series: [], // 柱状图的series数据
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.initData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
initData () {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.eventChart, { params }).then(res => {
|
||||
const data = res.data.data.result
|
||||
this.pieData = []
|
||||
|
||||
if (data !== undefined && data.length > 0) {
|
||||
this.isNoData = false
|
||||
const series = []
|
||||
data.forEach((item, index) => {
|
||||
this.pieData.push({
|
||||
name: item.type,
|
||||
value: item.analysis.sum
|
||||
})
|
||||
|
||||
const tempArr = []
|
||||
tempArr.push(item.values)
|
||||
series.push({
|
||||
data: item.values,
|
||||
stack: 'total',
|
||||
name: item.type,
|
||||
barWidth: 26,
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
})
|
||||
})
|
||||
this.series = series
|
||||
} else {
|
||||
this.isNoData = true
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.isNoData = true
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--堆叠柱状图-->
|
||||
<div style="width: 100%;height: 100%" id="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { stackedBarChartOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
series: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
series: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = stackedBarChartOption
|
||||
this.chartOption.series = this.series
|
||||
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.chartOption.series = this.series
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
this.toggleLoading(false)
|
||||
if (this.series.length > 0) {
|
||||
this.init()
|
||||
this.toggleLoading(true)
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.myChart) {
|
||||
echarts.dispose(this.myChart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div class="npm-event dns-event">
|
||||
<div class="npm-event-pie dns-event-pie">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="npm-event-pies dns-event-pies" v-else>
|
||||
<!--pie图-->
|
||||
<div class="chart-drawing" id="chart1"></div>
|
||||
|
||||
<div class="npm-event-pie-legends">
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('overall.type') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-type">
|
||||
<span class="color-block" :style="{background: chartColor6[index]}"></span>
|
||||
<div class="npm-event-pie-legend-type-severity">{{ legend.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="npm-event-pie-legend">
|
||||
<div class="npm-event-pie-legend-title" v-if="chartData.length > 0">{{ $t('network.total') }}</div>
|
||||
<template v-for="(legend, index) in chartData" :key="index">
|
||||
<div class="npm-event-pie-legend-total">{{ legend.value }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shallowRef } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { pieChartOption3 } from '@/views/charts2/charts/options/echartOption'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { chartColor6 } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'DnsEventChartByPie',
|
||||
props: {
|
||||
type: String,
|
||||
timeFilter: Object,
|
||||
pieData: Array
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
setup () {
|
||||
return {
|
||||
myChart: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartData: [],
|
||||
timer: null,
|
||||
isNoData: false,
|
||||
chartColor6: chartColor6
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
},
|
||||
pieData: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.eventsByTypeData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const dom = document.getElementById('chart1')
|
||||
if (!this.myChart) {
|
||||
this.myChart = echarts.init(dom)
|
||||
this.chartOption = pieChartOption3
|
||||
this.chartOption.color = chartColor6
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.chartOption.series[0].label = {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
formatter: function () {
|
||||
let num = 0
|
||||
_this.chartData.forEach(t => {
|
||||
num += t.value
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.on('mouseover', function (params) {
|
||||
_this.chartOption.series[0].label.show = false
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.on('mouseout', function (params) {
|
||||
_this.chartOption.series[0].label.show = true
|
||||
_this.myChart.setOption(_this.chartOption)
|
||||
})
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.chartOption.color = chartColor6
|
||||
this.chartOption.series[0].data = this.chartData
|
||||
this.chartOption.series[0].label = {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontFamily: 'NotoSansHans-Medium',
|
||||
fontSize: 20,
|
||||
fontWeight: 500,
|
||||
formatter: function () {
|
||||
let num = 0
|
||||
_this.chartData.forEach(t => {
|
||||
num += t.value
|
||||
})
|
||||
return num
|
||||
}
|
||||
}
|
||||
this.myChart.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
eventsByTypeData () {
|
||||
this.toggleLoading(false)
|
||||
if (this.pieData.length > 0) {
|
||||
this.chartData = this.pieData
|
||||
this.init()
|
||||
this.toggleLoading(true)
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
this.myChart.resize()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.eventsByTypeData()
|
||||
})
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
window.removeEventListener('resize', this.resize)
|
||||
if (this.myChart) {
|
||||
echarts.dispose(this.myChart)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,244 +0,0 @@
|
||||
<template>
|
||||
<div class="dns-recent-event npm-app-event">
|
||||
<div class="dns-recent-event-header">
|
||||
<div class="dns-recent-event-title">{{ $t('network.recentEvents') }}</div>
|
||||
<div class="dns-recent-event-select">
|
||||
<div class="metric-select">
|
||||
<el-select v-model="tableType"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper common-select"
|
||||
:teleported="false"
|
||||
key="tabMetric"
|
||||
:placeholder="$t('overall.select')"
|
||||
@change="changeMetric"
|
||||
size="small"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{$t('overall.type')}}：</span>
|
||||
</div>
|
||||
<div class="metric-select">
|
||||
<el-select v-model="tableSeverity"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper common-select"
|
||||
:teleported="false"
|
||||
key="tabMetric"
|
||||
:placeholder="$t('overall.select')"
|
||||
@change="changeMetric"
|
||||
size="small"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in severityOption"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{$t('network.severity')}}：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
id="tabTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
class="npm-app-event-table dns-recent-event-table"
|
||||
height="100%"
|
||||
empty-text=""
|
||||
>
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column" :min-width="columnWidth(index)">
|
||||
<template #header>
|
||||
<span class="data-column__span">{{$t(item.label)}}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-app-event-table">
|
||||
<template v-if="item.prop === 'type'">
|
||||
<span v-if="scope.row[item.prop] === 'Performance Event'" class="data-applications">
|
||||
<span class="cn-icon cn-icon-events-type performance"> </span>
|
||||
{{scope.row[item.prop]}}
|
||||
</span>
|
||||
<span v-else class="data-applications">
|
||||
<span class="cn-icon cn-icon-events-type security"> </span>
|
||||
{{scope.row[item.prop]}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'event'">
|
||||
<span class="data-eventType">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'severity'">
|
||||
<template v-if="scope.row[item.prop]==='critical'">
|
||||
<div v-for="(item, index) in 5" class="red-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='high'">
|
||||
<div v-for="(item, index) in 4" class="red-dot" :key="index"></div>
|
||||
<div class="grey-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='medium'">
|
||||
<div v-for="(item, index) in 3" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 2" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='low'">
|
||||
<div v-for="(item, index) in 2" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 3" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='info'">
|
||||
<div v-for="(item, index) in 1" class="red-dot" :key="index"></div>
|
||||
<div v-for="(item, index) in 4" class="grey-dot" :key="index"></div>
|
||||
</template>
|
||||
<span class="data-severity" >{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-slot:empty>
|
||||
<div class="table-no-data" v-show="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import axios from 'axios'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'DnsRecentEvents',
|
||||
setup () {
|
||||
const { query } = useRoute()
|
||||
const tableType = ref(query.tableType || '')
|
||||
const tableSeverity = ref(query.tableSeverity || '')
|
||||
return {
|
||||
tableType,
|
||||
tableSeverity
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: this.$t('dnsInsight.securityEvent'),
|
||||
value: 'securityEvent'
|
||||
},
|
||||
{
|
||||
label: this.$t('dnsInsight.PerEvent'),
|
||||
value: 'performanceEvent'
|
||||
}
|
||||
],
|
||||
severityOption: [
|
||||
{
|
||||
value: 'critical',
|
||||
label: 'Critical'
|
||||
},
|
||||
{
|
||||
value: 'high',
|
||||
label: 'High'
|
||||
},
|
||||
{
|
||||
value: 'medium',
|
||||
label: 'Medium'
|
||||
},
|
||||
{
|
||||
value: 'low',
|
||||
label: 'Low'
|
||||
},
|
||||
{
|
||||
value: 'info',
|
||||
label: 'Info'
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
customTableTitles: [
|
||||
{ label: 'overall.type', prop: 'type' },
|
||||
{ label: 'dnsInsight.event', prop: 'event' },
|
||||
{ label: 'network.severity', prop: 'severity' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mixins: [chartMixin],
|
||||
watch: {
|
||||
timeFilter: {
|
||||
handler (n) {
|
||||
this.dnsRecentEventData()
|
||||
}
|
||||
},
|
||||
tableType (n) {
|
||||
const { query } = this.$route
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
tableType: n
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
tableSeverity (n) {
|
||||
const { query } = this.$route
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
tableSeverity: n
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dnsRecentEventData()
|
||||
},
|
||||
methods: {
|
||||
dnsRecentEventData () {
|
||||
this.toggleLoading(true)
|
||||
this.tableData = []
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
limit: 8,
|
||||
type: this.tableType,
|
||||
severity: this.tableSeverity
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
axios.get(api.dnsInsight.recentEvents, { params }).then(res => {
|
||||
if (res.status === 200) {
|
||||
this.isNoData = res.data.data.result.length === 0
|
||||
this.tableData = res.data.data.result
|
||||
this.tableData.forEach((t, index) => {
|
||||
if (index > 5) {
|
||||
t.type = 'Security Event'
|
||||
} else {
|
||||
t.type = 'Performance Event'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.isNoData = true
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
changeMetric () {
|
||||
this.dnsRecentEventData()
|
||||
},
|
||||
columnWidth (index) {
|
||||
if (index === 0 || index === 1) {
|
||||
return '50%'
|
||||
} else if (index === 2) {
|
||||
return '25%'
|
||||
} else if (index === 3) {
|
||||
return '15%'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user