107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
<div class="npm-header">
|
|
<div class="npm-header-body" v-for="(item, index) in chartData" :key=index>
|
|
<div class="npm-header-body-severity">
|
|
<div class="npm-header-body-severity-icon" :class="item.eventSeverity" :test-id="`icon${index}`"></div>
|
|
<div class="npm-header-body-severity-value" :test-id="`severity${index}`">{{item.eventSeverity}}</div>
|
|
</div>
|
|
<chart-error v-if="showError" tooltip :content="errorMsg" />
|
|
<div v-else class="npm-header-body-total" :test-id="`total${index}`">{{item.count}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSecond } from '@/utils/date-util'
|
|
import { api } from '@/utils/api'
|
|
import chartMixin from '@/views/charts2/chart-mixin'
|
|
import ChartError from '@/components/common/Error'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'NpmEventsHeader',
|
|
components: { ChartError },
|
|
mixins: [chartMixin],
|
|
data () {
|
|
return {
|
|
chartData: [
|
|
{
|
|
eventSeverity: 'critical',
|
|
count: '-',
|
|
index: 0
|
|
},
|
|
{
|
|
eventSeverity: 'high',
|
|
count: '-',
|
|
index: 1
|
|
},
|
|
{
|
|
eventSeverity: 'medium',
|
|
count: '-',
|
|
index: 2
|
|
},
|
|
{
|
|
eventSeverity: 'low',
|
|
count: '-',
|
|
index: 3
|
|
},
|
|
{
|
|
eventSeverity: 'info',
|
|
count: '-',
|
|
index: 4
|
|
}
|
|
],
|
|
type: 'severity',
|
|
showError: false,
|
|
errorMsg: ''
|
|
}
|
|
},
|
|
watch: {
|
|
timeFilter: {
|
|
handler () {
|
|
this.recentEventsListData()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
recentEventsListData () {
|
|
const params = {
|
|
startTime: this.timeFilter && this.timeFilter.startTime ? getSecond(this.timeFilter.startTime) : '',
|
|
endTime: this.timeFilter && this.timeFilter.endTime ? getSecond(this.timeFilter.endTime) : '',
|
|
type: this.type
|
|
}
|
|
this.toggleLoading(true)
|
|
axios.get(api.npm.events.list, { params: params }).then(res => {
|
|
res = res.data
|
|
if (res.code === 200) {
|
|
this.showError = false
|
|
if (res.data.result.length === 0) {
|
|
this.chartData.forEach(d => { d.count = '-' })
|
|
}
|
|
res.data.result.forEach(t => {
|
|
this.chartData.forEach(d => {
|
|
if (d.eventSeverity === t.eventSeverity) {
|
|
d.count = t.count.toLocaleString()
|
|
}
|
|
})
|
|
})
|
|
} else {
|
|
this.showError = true
|
|
this.errorMsg = res.message
|
|
}
|
|
}).catch(e => {
|
|
this.showError = true
|
|
this.errorMsg = this.errorMsgHandler(e)
|
|
}).finally(() => {
|
|
this.toggleLoading(false)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.recentEventsListData()
|
|
})
|
|
}
|
|
}
|
|
</script>
|