CN-652 Dahsboard - npm - event app事件表格开发
This commit is contained in:
hyx
@@ -59,4 +59,5 @@
|
||||
@import './views/charts2/npmEventsHeader';
|
||||
@import './views/charts2/npmEventsByType';
|
||||
@import './views/charts2/npmRecentEvents';
|
||||
@import './views/charts2/npmAppEventTable';
|
||||
//@import '../chart';
|
||||
|
||||
135
src/assets/css/components/views/charts2/npmAppEventTable.scss
Normal file
135
src/assets/css/components/views/charts2/npmAppEventTable.scss
Normal file
@@ -0,0 +1,135 @@
|
||||
.npm-app-event {
|
||||
$blue:#046ECA;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.metric-select {
|
||||
color:#575757;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
.el-scrollbar {
|
||||
width:100%;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.option__select.select-column {
|
||||
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.10);
|
||||
border-radius: 2px;
|
||||
.el-input__inner {
|
||||
width: 100px;
|
||||
height:24px;
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #2C72C6;
|
||||
font-weight:400;
|
||||
}
|
||||
}
|
||||
.option-popper {
|
||||
margin-bottom:0px;
|
||||
.el-select-dropdown__item.selected {
|
||||
span{
|
||||
color: #2C72C6 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.npm-app-event-table {
|
||||
height: calc(100% - 30px) !important;
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
.el-table__header-wrapper {
|
||||
tr th {
|
||||
padding: 4px 0;
|
||||
.data-column__span {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-table__body-wrapper.is-scrolling-none {
|
||||
tr td {
|
||||
padding: 7.5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.data-app-event-table{
|
||||
display: flex !important;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.data-severity {
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
margin-left:6px;
|
||||
}
|
||||
.red-dot {
|
||||
width:6px;
|
||||
height:6px;
|
||||
background: #E26154;
|
||||
border-radius: 3px;
|
||||
margin-right:4px;
|
||||
}
|
||||
.grey-dot {
|
||||
opacity: 0.35;
|
||||
background: #717171;
|
||||
border-radius: 3px;
|
||||
width:6px;
|
||||
height:6px;
|
||||
margin-right:4px;
|
||||
}
|
||||
.critical {
|
||||
color: #E26154;
|
||||
background: rgba(226,97,84, .18);
|
||||
}
|
||||
.high {
|
||||
color: #E48E4D;
|
||||
background: rgba(228,142,77, .18);
|
||||
}
|
||||
.info {
|
||||
color: #88AF65;
|
||||
background: rgba(136,175,101, .18);
|
||||
}
|
||||
.medium {
|
||||
color: #E7B34E;
|
||||
background: rgba(231,179,78, .18);
|
||||
}
|
||||
.low {
|
||||
color: #DAC74B;
|
||||
background: rgba(218,199,75, .18);
|
||||
}
|
||||
.data-applications {
|
||||
font-size: 12px;
|
||||
color: $blue;
|
||||
font-weight: 400;
|
||||
}
|
||||
.data-eventType {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
background: #EBF1F4;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
margin-right:10px;
|
||||
}
|
||||
.data-eventCount {
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-table--group::after,.el-table--border::after, .el-table::before {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,13 @@
|
||||
:chartData="chartData"
|
||||
:ref="`tab${chart.id}`"
|
||||
></network-overview-tabs>
|
||||
<npm-app-event-table @getChartData="getChartData"
|
||||
v-else-if="chart.type === typeMapping.npm.appEventTable"
|
||||
:time-filter="timeFilter"
|
||||
:chart="chart"
|
||||
:chartData="chartData"
|
||||
:ref="`tab${chart.id}`"
|
||||
></npm-app-event-table>
|
||||
<network-overview-apps
|
||||
v-else-if="chart.type === typeMapping.networkOverview.appList"
|
||||
:chart="chart"
|
||||
@@ -84,6 +91,7 @@ import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverv
|
||||
import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
|
||||
import NetworkOverviewApps from '@/views/charts2/charts/NetworkOverviewApps'
|
||||
import NpmTabs from '@/views/charts2/charts/NpmTabs'
|
||||
import NpmAppEventTable from '@/views/charts2/charts/NpmAppEventTable'
|
||||
import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
|
||||
import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
|
||||
import NpmMap from '@/views/charts2/charts/NpmMap'
|
||||
@@ -111,7 +119,8 @@ export default {
|
||||
NetworkOverviewTabs,
|
||||
NetworkOverviewApps,
|
||||
NpmTabs,
|
||||
NpmNetworkQuantity
|
||||
NpmNetworkQuantity,
|
||||
NpmAppEventTable
|
||||
},
|
||||
props: {
|
||||
chart: Object,
|
||||
@@ -175,7 +184,7 @@ export default {
|
||||
}
|
||||
let requestUrl = url
|
||||
|
||||
if (this.chart.type === 601) {
|
||||
if (this.chart.type === typeMapping.networkOverview.table) {
|
||||
const chartObj = this.$refs['tab' + this.chart.id]
|
||||
requestUrl = url || chartObj.getCurUrl()
|
||||
this.queryParams = {
|
||||
|
||||
@@ -14,6 +14,7 @@ export const typeMapping = {
|
||||
npmTabs: 704,
|
||||
npmEventsHeader: 705,
|
||||
npmNetworkQuantity: 703,
|
||||
npmRecentEvents: 602
|
||||
npmRecentEvents: 602,
|
||||
appEventTable: 603
|
||||
}
|
||||
}
|
||||
|
||||
147
src/views/charts2/charts/NpmAppEventTable.vue
Normal file
147
src/views/charts2/charts/NpmAppEventTable.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="npm-app-event">
|
||||
<div class="metric-select" >
|
||||
<el-select v-model="metric"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper metric-select"
|
||||
:popper-append-to-body="false"
|
||||
key="tabMetric"
|
||||
@change="changeMetric"
|
||||
size="mini"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{$t('network.metric')}}：</span>
|
||||
</div>
|
||||
<el-table
|
||||
:id="`tabTable_${index}`"
|
||||
:ref="`dataTable_${index}`"
|
||||
:data="tableData"
|
||||
class="npm-app-event-table"
|
||||
height="100%"
|
||||
>
|
||||
<template v-for="(item, index) in customTableTitles" :key="index">
|
||||
<el-table-column class="data-column">
|
||||
<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 === 'applications'">
|
||||
<span class="data-applications">{{$t(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 in 5" class="red-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='High'">
|
||||
<div v-for="item in 4" class="red-dot"></div>
|
||||
<div class="grey-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='Medium'">
|
||||
<div v-for="item in 3" class="red-dot"></div>
|
||||
<div v-for="item in 2" class="grey-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='Low'">
|
||||
<div v-for="item in 2" class="red-dot"></div>
|
||||
<div v-for="item in 3" class="grey-dot"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='Info'">
|
||||
<div v-for="item in 1" class="red-dot"></div>
|
||||
<div v-for="item in 4" class="grey-dot"></div>
|
||||
</template>
|
||||
<span class="data-severity" >{{$t(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventType'">
|
||||
<span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventCount'">
|
||||
<span class="data-eventCount">{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NpmAppEventTable',
|
||||
data () {
|
||||
return {
|
||||
metric: 'Application',
|
||||
options: [
|
||||
{
|
||||
value: 'Application',
|
||||
label: 'Application'
|
||||
},
|
||||
{
|
||||
value: 'Provider',
|
||||
label: 'Provider'
|
||||
}
|
||||
],
|
||||
dotList: ['grey-dot', 'grey-dot', 'grey-dot', 'grey-dot', 'grey-dot'],
|
||||
tableData: [
|
||||
{
|
||||
applications: 'Critical',
|
||||
severity: 'Critical',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'http error', 'high dns response time']
|
||||
}, {
|
||||
applications: 'High',
|
||||
severity: 'High',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error']
|
||||
}, {
|
||||
applications: 'Critical',
|
||||
severity: 'Critical',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'high dns response time']
|
||||
}, {
|
||||
applications: 'Medium',
|
||||
severity: 'Medium',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'http error', 'high dns response time']
|
||||
}, {
|
||||
applications: 'Low',
|
||||
severity: 'Low',
|
||||
eventCount: 8,
|
||||
eventType: ['http error', 'high dns response time']
|
||||
}, {
|
||||
applications: 'Info',
|
||||
severity: 'Info',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'high dns response time']
|
||||
}, {
|
||||
applications: 'Critical',
|
||||
severity: 'Critical',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'http error']
|
||||
}, {
|
||||
applications: 'Critical',
|
||||
severity: 'Critical',
|
||||
eventCount: 8,
|
||||
eventType: ['dns error', 'http error', 'high dns response time']
|
||||
}
|
||||
],
|
||||
customTableTitles: [
|
||||
{ label: 'network.applications', prop: 'applications' },
|
||||
{ label: 'network.severity', prop: 'severity' },
|
||||
{ label: 'network.eventType', prop: 'eventType' },
|
||||
{ label: 'network.eventCount', prop: 'eventCount' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user