perf:调整 告警响应页面 asset，datacenter，project，module，endpoint ，rule 详情标签页样式
This commit is contained in:
likexuan
@@ -1,51 +1,96 @@
|
||||
<template>
|
||||
<div style="height: 100%;width: 100%">
|
||||
<div style="height: 100%; width: 100%">
|
||||
<div class="time-line-header">
|
||||
<span>{{$t('alert.relatedAlerts')}}</span>
|
||||
<span>{{ $t("alert.relatedAlerts") }}</span>
|
||||
<div class="scope-icon-box">
|
||||
<div class="scope-box" v-for="item in scopeList" :class="item.isSelect ? 'is-select' : ''" :key="item.type" @click="scopeChange(item)" :title="item.label">
|
||||
<div
|
||||
class="scope-box"
|
||||
v-for="item in scopeList"
|
||||
:class="item.isSelect ? 'is-select' : ''"
|
||||
:key="item.type"
|
||||
@click="scopeChange(item)"
|
||||
:title="item.label"
|
||||
>
|
||||
<i class="nz-icon" :class="selectIcon(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-timeline v-my-loading="loading" v-if="!noData && timeLineData.length">
|
||||
<el-timeline-item
|
||||
v-for="(item,index) in timeLineData"
|
||||
v-for="(item, index) in timeLineData"
|
||||
:key="item.id"
|
||||
:class="{
|
||||
'only': timeLineData.length === 1 ,
|
||||
only: timeLineData.length === 1,
|
||||
'has-time': item.startAt,
|
||||
'last': index === timeLineData.length-1 && index !==0
|
||||
last: index === timeLineData.length - 1 && index !== 0,
|
||||
}"
|
||||
:color="item.severity.color"
|
||||
:timestamp="item.startAt?item.startAt: ''"
|
||||
placement="top">
|
||||
<div >
|
||||
<div class='margin-b-10'>
|
||||
<span slot="title-icon" v-if="item['state']" style="margin-left: 5px" class="alert-message-state" :class="{'gray-bg': item['state'] == 3, 'red-bg': item['state'] == 1,'yellow-bg': item['state'] == 2}">{{$t(stateOptions.find(state=>state.value == item['state']).label)}}</span>
|
||||
<span class="time-line-item-header"> {{item.alertRule.name}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span v-for="(label, i) in labelsSort(JSON.parse(item.labels))" :key="i">
|
||||
:timestamp="item.startAt ? item.startAt : ''"
|
||||
placement="top"
|
||||
>
|
||||
<div>
|
||||
<div class="margin-b-10">
|
||||
<span
|
||||
@mouseenter="labelHover(item, label.label, true, true, $event)"
|
||||
@mouseleave="labelHover(item, label.label, false, true,)">
|
||||
<nz-alert-tag
|
||||
v-if="label.label !== 'alertname' && label.label !== 'severity'" :key="label.label" :cursor-point="tagType(label.label) !== 'info'"
|
||||
:label="label.label"
|
||||
:type="tagType(label.label)"
|
||||
style="margin: 5px 0 5px 5px;"
|
||||
slot="title-icon"
|
||||
v-if="item['state']"
|
||||
style="margin-left: 5px"
|
||||
class="alert-message-state"
|
||||
:class="{
|
||||
'gray-bg': item['state'] == 3,
|
||||
'red-bg': item['state'] == 1,
|
||||
'yellow-bg': item['state'] == 2,
|
||||
}"
|
||||
>{{
|
||||
$t(
|
||||
stateOptions.find((state) => state.value == item["state"])
|
||||
.label
|
||||
)
|
||||
}}</span
|
||||
>
|
||||
<span class="time-line-item-header">
|
||||
{{ item.alertRule.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="alert-message-summary">{{ item.summary }}</div>
|
||||
<div class="alert-message-startAt">
|
||||
<span>Start time:</span>
|
||||
<span>{{item.startTime.split(" ")[1]}}</span>
|
||||
<span>Duration:</span>
|
||||
<span>{{getDuration(item)}}</span>
|
||||
</div>
|
||||
<div class="alert-message-labels">
|
||||
<span
|
||||
v-for="(label, i) in labelsSort(JSON.parse(item.labels))"
|
||||
:key="i"
|
||||
>
|
||||
<span
|
||||
@mouseenter="labelHover(item, label.label, true, true, $event)"
|
||||
@mouseleave="labelHover(item, label.label, false, true)"
|
||||
>
|
||||
{{label.value}}
|
||||
</nz-alert-tag>
|
||||
<nz-alert-tag
|
||||
v-if="
|
||||
label.label !== 'alertname' && label.label !== 'severity'
|
||||
"
|
||||
:key="label.label"
|
||||
:cursor-point="tagType(label.label) !== 'info'"
|
||||
:label="label.label"
|
||||
:type="tagType(label.label)"
|
||||
style="margin: 5px 0 5px 5px"
|
||||
>
|
||||
{{ label.value }}
|
||||
</nz-alert-tag>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
<div v-if="timeLineData.length >= total" style="text-align: center">{{$t('overall.noMoreData')}}</div>
|
||||
<div v-if="timeLineData.length >= total" style="text-align: center">
|
||||
{{ $t("overall.noMoreData") }}
|
||||
</div>
|
||||
<div v-else class="load-more-box">
|
||||
<el-button size="small" @click="getTimeLineData()" :loading="loading">{{$t('overall.loadMore')}}</el-button>
|
||||
<el-button size="small" @click="getTimeLineData()" :loading="loading">{{
|
||||
$t("overall.loadMore")
|
||||
}}</el-button>
|
||||
</div>
|
||||
</el-timeline>
|
||||
<div class="table-no-data" v-else>
|
||||
@@ -65,178 +110,224 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
|
||||
import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
|
||||
import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
|
||||
import { alertMessage as alertMessageConstant } from "@/components/common/js/constants";
|
||||
import alertMessageLabelMixin from "@/components/common/alert/alertMessageLabelMixin";
|
||||
import alertLabelMixin from "@/components/common/mixin/alertLabelMixin";
|
||||
import { calcDurationByStringTimeB } from '@/components/common/js/tools.js'
|
||||
|
||||
export default {
|
||||
name: 'alertMessageInfoTimeLine',
|
||||
name: "alertMessageInfoTimeLine",
|
||||
props: {
|
||||
infoData: {
|
||||
type: Object
|
||||
type: Object,
|
||||
},
|
||||
time: {}
|
||||
time: {},
|
||||
},
|
||||
mixins: [alertMessageLabelMixin, alertLabelMixin],
|
||||
computed: {
|
||||
severityData () {
|
||||
return this.$store.getters.severityData
|
||||
severityData() {
|
||||
return this.$store.getters.severityData;
|
||||
},
|
||||
getDuration () {
|
||||
return function (record) {
|
||||
if (record.endAt) {
|
||||
return calcDurationByStringTimeB(record.startTime, record.endAt)
|
||||
}
|
||||
return calcDurationByStringTimeB(record.startTime, this.nowTime)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
time: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
handler(n) {
|
||||
if (n && n.length) {
|
||||
this.pageNo = 1
|
||||
this.getTimeLineData()
|
||||
this.pageNo = 1;
|
||||
this.getTimeLineData();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
scope: ['asset', 'datacenter', 'project', 'module', 'endpoint', 'alertrule', 'hash'],
|
||||
scope: [
|
||||
"asset",
|
||||
"datacenter",
|
||||
"project",
|
||||
"module",
|
||||
"endpoint",
|
||||
"alertrule",
|
||||
"hash",
|
||||
],
|
||||
timeLineData: [],
|
||||
lastDataTime: '',
|
||||
lastDataTime: "",
|
||||
loading: false,
|
||||
dateFormatStr: localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat') : 'YYYY-MM-DD HH:ss:mm',
|
||||
dateFormatStr: localStorage.getItem("nz-default-dateFormat")
|
||||
? localStorage.getItem("nz-default-dateFormat")
|
||||
: "YYYY-MM-DD HH:ss:mm",
|
||||
noData: false,
|
||||
stateOptions: alertMessageConstant.states,
|
||||
scopeList: [{
|
||||
key: 'asset',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.asset')
|
||||
}, {
|
||||
key: 'datacenter',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.dc')
|
||||
}, {
|
||||
key: 'project',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.project')
|
||||
}, {
|
||||
key: 'module',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.module')
|
||||
}, {
|
||||
key: 'endpoint',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.endpoint')
|
||||
},
|
||||
{
|
||||
key: 'alertrule',
|
||||
isSelect: true,
|
||||
label: this.$t('alert.alertRule')
|
||||
}, {
|
||||
key: 'hash',
|
||||
isSelect: true,
|
||||
label: this.$t('overall.hash')
|
||||
}
|
||||
scopeList: [
|
||||
{
|
||||
key: "asset",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.asset"),
|
||||
},
|
||||
{
|
||||
key: "datacenter",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.dc"),
|
||||
},
|
||||
{
|
||||
key: "project",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.project"),
|
||||
},
|
||||
{
|
||||
key: "module",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.module"),
|
||||
},
|
||||
{
|
||||
key: "endpoint",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.endpoint"),
|
||||
},
|
||||
{
|
||||
key: "alertrule",
|
||||
isSelect: true,
|
||||
label: this.$t("alert.alertRule"),
|
||||
},
|
||||
{
|
||||
key: "hash",
|
||||
isSelect: true,
|
||||
label: this.$t("overall.hash"),
|
||||
},
|
||||
],
|
||||
total: 20,
|
||||
scopeChangeTimer: null
|
||||
}
|
||||
scopeChangeTimer: null,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
// this.getTimeLineData(1)
|
||||
const dateFormatStr = localStorage.getItem('nz-default-dateFormat')
|
||||
const dateFormatStr = localStorage.getItem("nz-default-dateFormat");
|
||||
if (dateFormatStr) {
|
||||
this.dateFormatStr = dateFormatStr.split(' ')[0]
|
||||
this.dateFormatStr = dateFormatStr.split(" ")[0];
|
||||
} else {
|
||||
this.dateFormatStr = 'YYYY-MM-DD'
|
||||
this.dateFormatStr = "YYYY-MM-DD";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTimeLineData () {
|
||||
this.noData = false
|
||||
this.loading = true
|
||||
getTimeLineData() {
|
||||
this.noData = false;
|
||||
this.loading = true;
|
||||
const params = {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
scope: this.scopeList.filter(item => item.isSelect).map(item => item.key).join(','),
|
||||
scope: this.scopeList
|
||||
.filter((item) => item.isSelect)
|
||||
.map((item) => item.key)
|
||||
.join(","),
|
||||
id: this.infoData.id,
|
||||
state: '',
|
||||
startAt: this.timezoneToUtcTimeStr(this.time[0] * 1000, 'YYYY-MM-DD HH:mm:ss'),
|
||||
endAt: this.timezoneToUtcTimeStr(this.time[1] * 1000, 'YYYY-MM-DD HH:mm:ss'),
|
||||
orderBy: '-startAt'
|
||||
}
|
||||
this.$get('/alert/message/rel', params).then(res => {
|
||||
this.loading = false
|
||||
if (res.code === 200) {
|
||||
this.total = res.data.total
|
||||
if (this.pageNo == 1) {
|
||||
this.timeLineData = res.data.list
|
||||
state: "",
|
||||
startAt: this.timezoneToUtcTimeStr(
|
||||
this.time[0] * 1000,
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
),
|
||||
endAt: this.timezoneToUtcTimeStr(
|
||||
this.time[1] * 1000,
|
||||
"YYYY-MM-DD HH:mm:ss"
|
||||
),
|
||||
orderBy: "-startAt",
|
||||
};
|
||||
this.$get("/alert/message/rel", params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code === 200) {
|
||||
this.total = res.data.total;
|
||||
if (this.pageNo == 1) {
|
||||
this.timeLineData = res.data.list;
|
||||
} else {
|
||||
this.timeLineData.push(...res.data.list);
|
||||
}
|
||||
this.disposeTime(this.pageNo);
|
||||
this.noData = false;
|
||||
this.pageNo++;
|
||||
} else {
|
||||
this.timeLineData.push(...res.data.list)
|
||||
this.noData = true;
|
||||
}
|
||||
this.disposeTime(this.pageNo)
|
||||
this.noData = false
|
||||
this.pageNo++
|
||||
} else {
|
||||
this.noData = true
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
this.noData = true
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
this.noData = true;
|
||||
});
|
||||
},
|
||||
disposeTime (pageNo) {
|
||||
let i = (pageNo - 1) * this.pageSize
|
||||
disposeTime(pageNo) {
|
||||
let i = (pageNo - 1) * this.pageSize;
|
||||
for (i; i < this.timeLineData.length; i++) {
|
||||
const lastDataTime = this.timestampStr(this.timeLineData[i].startAt, this.dateFormatStr)
|
||||
this.timeLineData[i].color = '#fa8'
|
||||
const lastDataTime = this.timestampStr(
|
||||
this.timeLineData[i].startAt,
|
||||
this.dateFormatStr
|
||||
);
|
||||
this.timeLineData[i].color = "#fa8";
|
||||
this.timeLineData[i].startTime = this.timeLineData[i].startAt;
|
||||
if (this.lastDataTime !== lastDataTime) {
|
||||
this.lastDataTime = lastDataTime
|
||||
this.timeLineData[i].startAt = lastDataTime
|
||||
this.lastDataTime = lastDataTime;
|
||||
this.timeLineData[i].startAt = lastDataTime;
|
||||
} else {
|
||||
this.timeLineData[i].startAt = ''
|
||||
this.timeLineData[i].startAt = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
selectIcon (item) {
|
||||
selectIcon(item) {
|
||||
switch (item.key) {
|
||||
case 'asset' : return 'nz-icon-overview-project'
|
||||
case 'datacenter' : return 'nz-icon-Datacenter2'
|
||||
case 'project' : return 'nz-icon-project'
|
||||
case 'module' : return 'nz-icon-overview-module'
|
||||
case 'endpoint' : return 'nz-icon-overview-endpoint'
|
||||
case 'alertrule' : return 'nz-icon-Alertrule'
|
||||
case 'hash' : return 'nz-icon-module5'
|
||||
case "asset":
|
||||
return "nz-icon-overview-project";
|
||||
case "datacenter":
|
||||
return "nz-icon-Datacenter2";
|
||||
case "project":
|
||||
return "nz-icon-project";
|
||||
case "module":
|
||||
return "nz-icon-overview-module";
|
||||
case "endpoint":
|
||||
return "nz-icon-overview-endpoint";
|
||||
case "alertrule":
|
||||
return "nz-icon-Alertrule";
|
||||
case "hash":
|
||||
return "nz-icon-module5";
|
||||
}
|
||||
return 'nz-icon-module5'
|
||||
return "nz-icon-module5";
|
||||
},
|
||||
scopeChange (scope) {
|
||||
scopeChange(scope) {
|
||||
if (this.scopeChangeTimer) {
|
||||
clearInterval(this.scopeChangeTimer)
|
||||
this.scopeChangeTimer = null
|
||||
clearInterval(this.scopeChangeTimer);
|
||||
this.scopeChangeTimer = null;
|
||||
}
|
||||
this.loading = true
|
||||
const isSelectArr = this.scopeList.filter(item => item.isSelect)
|
||||
this.loading = true;
|
||||
const isSelectArr = this.scopeList.filter((item) => item.isSelect);
|
||||
if (isSelectArr.length === this.scopeList.length) {
|
||||
this.scopeList.forEach(item => {
|
||||
item.isSelect = false
|
||||
})
|
||||
scope.isSelect = !scope.isSelect
|
||||
this.scopeList.forEach((item) => {
|
||||
item.isSelect = false;
|
||||
});
|
||||
scope.isSelect = !scope.isSelect;
|
||||
} else if (isSelectArr.length === 1 && isSelectArr[0].key === scope.key) {
|
||||
this.scopeList.forEach(item => {
|
||||
item.isSelect = true
|
||||
})
|
||||
this.scopeList.forEach((item) => {
|
||||
item.isSelect = true;
|
||||
});
|
||||
} else {
|
||||
scope.isSelect = !scope.isSelect
|
||||
scope.isSelect = !scope.isSelect;
|
||||
}
|
||||
this.scopeChangeTimer = setTimeout(() => {
|
||||
this.pageNo = 1
|
||||
this.getTimeLineData()
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.pageNo = 1;
|
||||
this.getTimeLineData();
|
||||
}, 100);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user