perf:调整 告警响应页面 asset，datacenter，project，module，endpoint ，rule 详情标签页样式
This commit is contained in:
likexuan
@@ -1,38 +1,80 @@
|
||||
.chart-fullscreen.nz-dialog .panel-chart--fullscreen{
|
||||
.alert-message-info-header{
|
||||
border-bottom: 1px solid rgba(0,0,0,0.09);;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.alert-message-info-box{
|
||||
box-sizing: border-box;
|
||||
.chart-fullscreen.nz-dialog .panel-chart--fullscreen {
|
||||
.alert-message-info-header {
|
||||
height: 72px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
|
||||
padding: 20px;
|
||||
margin-top: 0;
|
||||
|
||||
.chart-header__title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
font-family: PingFangSC-Medium;
|
||||
|
||||
.alert-message-state {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
color: $--color-text-label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.alert-message-info-box {
|
||||
box-sizing: border-box;
|
||||
padding: 20px 20px 33px 30px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
.info-box-left{
|
||||
|
||||
.info-box-left {
|
||||
width: 66%;
|
||||
min-width: 500px;
|
||||
min-height: 600px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.nz-chart {
|
||||
height: 36%;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid $--border-color-light;
|
||||
flex: none;
|
||||
}
|
||||
.alert-message-info-tab{
|
||||
|
||||
.alert-message-info-tab {
|
||||
height: 63%;
|
||||
flex: 1;
|
||||
|
||||
.alert-label-header-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert-rule-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-rule-value {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs.el-tabs--card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-tabs__header{
|
||||
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
.el-tabs__item{
|
||||
|
||||
.el-tabs__item {
|
||||
border: 1px solid $--border-color-light;
|
||||
border-radius: 2px;
|
||||
//border-bottom: none;
|
||||
@@ -40,19 +82,22 @@
|
||||
background: $--background-color-base;
|
||||
color: $--color-text-regular;
|
||||
}
|
||||
.el-tabs__item:hover{
|
||||
|
||||
.el-tabs__item:hover {
|
||||
color: $--color-warning;
|
||||
background: $--background-color-empty;
|
||||
border-bottom-color: $--background-color-empty;
|
||||
}
|
||||
.el-tabs__item.is-active{
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: $--color-warning;
|
||||
background: $--background-color-empty;
|
||||
border-bottom-color: $--background-color-empty;
|
||||
}
|
||||
}
|
||||
.el-tabs__content{
|
||||
padding: 20px;
|
||||
|
||||
.el-tabs__content {
|
||||
padding: 25px 30px;
|
||||
flex: 1;
|
||||
border: 1px solid $--border-color-light;
|
||||
border-top: none;
|
||||
@@ -61,72 +106,118 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-box-right{
|
||||
|
||||
.info-box-right {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 20px 20px 0;
|
||||
|
||||
.table-no-data {
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.time-line-header{
|
||||
padding: 20px;
|
||||
|
||||
.time-line-header {
|
||||
padding: 20px 20px 35px 20px;
|
||||
font-size: 16px;
|
||||
color: $--color-text-primary;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.scope-icon-box {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.scope-box {
|
||||
cursor: pointer;
|
||||
color: $--background-color-disabled;
|
||||
|
||||
.nz-icon {
|
||||
margin-right: 5px;
|
||||
color: $--background-color-disabled ;
|
||||
margin-right: 20px;
|
||||
color: $--background-color-disabled;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.scope-box.is-select{
|
||||
|
||||
.scope-box.is-select {
|
||||
color: $--color-monitor;
|
||||
|
||||
.nz-icon {
|
||||
color: $--color-monitor;
|
||||
}
|
||||
}
|
||||
#time-line-scope{
|
||||
|
||||
#time-line-scope {
|
||||
//float: right;
|
||||
}
|
||||
}
|
||||
.el-timeline{
|
||||
|
||||
.el-timeline {
|
||||
height: calc(100% - 80px);
|
||||
overflow-y: auto;
|
||||
padding-top: 14px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
.el-timeline-item{
|
||||
padding-bottom: 24px;
|
||||
|
||||
.el-timeline-item {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.el-timeline-item__wrapper {
|
||||
.el-timeline-item__timestamp.is-top {
|
||||
top: -50px;
|
||||
}
|
||||
.has-time{
|
||||
|
||||
.el-timeline-item__content {
|
||||
.nz-alert-tag.nz-alert-tag_info {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nz-alert-tag_info {
|
||||
.nz-alert-tag__label {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nz-alert-tag__content {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-time {
|
||||
padding-top: 36px;
|
||||
.el-timeline-item__tail{
|
||||
|
||||
.el-timeline-item__tail {
|
||||
height: calc(100% + 14px);
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
.el-timeline-item.last .el-timeline-item__tail{
|
||||
|
||||
.el-timeline-item.last .el-timeline-item__tail {
|
||||
display: block;
|
||||
top: -100%;
|
||||
}
|
||||
.el-timeline-item:last-child .el-timeline-item__tail.only{
|
||||
|
||||
.el-timeline-item:last-child .el-timeline-item__tail.only {
|
||||
display: block;
|
||||
top: -100%;
|
||||
}
|
||||
.el-timeline-item__timestamp.is-top{
|
||||
|
||||
.el-timeline-item__timestamp.is-top {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: -20px;
|
||||
@@ -137,21 +228,25 @@
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.el-timeline-item__node {
|
||||
z-index: 1;
|
||||
}
|
||||
.time-line-item-header{
|
||||
|
||||
.time-line-item-header {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.load-more-box{
|
||||
|
||||
.load-more-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.table-no-data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -160,20 +255,24 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.el-tabs__nav{
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none;
|
||||
}
|
||||
.info-box-header{
|
||||
|
||||
.info-box-header {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.info-box-title{
|
||||
|
||||
.info-box-title {
|
||||
font-size: 16px;
|
||||
color: $--color-text-primary;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.info-box-content{
|
||||
|
||||
.info-box-content {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
@@ -183,3 +282,223 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
.alert-message-info-box {
|
||||
.info-box-right {
|
||||
.el-timeline {
|
||||
.el-timeline-item {
|
||||
.el-timeline-item__wrapper {
|
||||
.el-timeline-item__content {
|
||||
.alert-message-summary {
|
||||
margin: 10px 0 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.alert-message-startAt {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
margin: 3px 0 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
span:nth-of-type(n) {
|
||||
color: #999999;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2n) {
|
||||
color: #666666;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-b-10 {
|
||||
.alert-message-state.gray-bg {
|
||||
margin-right: 5px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-message-labels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.nz-alert-tag.nz-alert-tag_normal {
|
||||
display: inline-block;
|
||||
margin-right: 10px !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.nz-alert-tag__label {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nz-alert-tag__content {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nz-alert-tag.nz-alert-tag_info {
|
||||
display: inline-block;
|
||||
margin-right: 20px !important;
|
||||
|
||||
.nz-alert-tag__label {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nz-alert-tag__content {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-left {
|
||||
.alert-message-info-tab {
|
||||
.el-tabs.el-tabs--card.el-tabs--top {
|
||||
.el-tabs__content {
|
||||
#pane-detail {
|
||||
.info-box-header {
|
||||
.info-box-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.nz-alert-tag.nz-alert-tag_normal {
|
||||
display: inline-block;
|
||||
margin-right: 20px !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.nz-alert-tag__label {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nz-alert-tag__content {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nz-alert-tag.nz-alert-tag_info {
|
||||
display: inline-block;
|
||||
margin-right: 20px !important;
|
||||
|
||||
.nz-alert-tag__label {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nz-alert-tag__content {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-dc {
|
||||
.alert-label-info {
|
||||
.alert-label-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-label-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-asset {
|
||||
.alert-label-info {
|
||||
.alert-label-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-label-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-endpoint {
|
||||
.alert-label-info {
|
||||
.alert-label-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-label-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-module {
|
||||
.alert-label-info {
|
||||
.alert-label-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-label-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-project {
|
||||
.alert-label-info {
|
||||
.alert-label-box {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.alert-label-title {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pane-trbShot {
|
||||
.editor-core.ql-container.ql-snow {
|
||||
background-color: #23241E;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<template>
|
||||
|
||||
<template>
|
||||
<div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" >
|
||||
<loading :loading="loading"></loading>
|
||||
<chart-no-data v-if="isNoData || isError || chartChildrenData"></chart-no-data>
|
||||
|
||||
@@ -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>
|
||||
:timestamp="item.startAt ? item.startAt : ''"
|
||||
placement="top"
|
||||
>
|
||||
<div>
|
||||
<span v-for="(label, i) in labelsSort(JSON.parse(item.labels))" :key="i">
|
||||
<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 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,)">
|
||||
@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'"
|
||||
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;"
|
||||
style="margin: 5px 0 5px 5px"
|
||||
>
|
||||
{{label.value}}
|
||||
{{ label.value }}
|
||||
</nz-alert-tag>
|
||||
</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',
|
||||
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')
|
||||
label: this.$t("overall.asset"),
|
||||
},
|
||||
{
|
||||
key: 'alertrule',
|
||||
key: "datacenter",
|
||||
isSelect: true,
|
||||
label: this.$t('alert.alertRule')
|
||||
}, {
|
||||
key: 'hash',
|
||||
label: this.$t("overall.dc"),
|
||||
},
|
||||
{
|
||||
key: "project",
|
||||
isSelect: true,
|
||||
label: this.$t('overall.hash')
|
||||
}
|
||||
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
|
||||
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
|
||||
this.total = res.data.total;
|
||||
if (this.pageNo == 1) {
|
||||
this.timeLineData = res.data.list
|
||||
this.timeLineData = res.data.list;
|
||||
} else {
|
||||
this.timeLineData.push(...res.data.list)
|
||||
this.timeLineData.push(...res.data.list);
|
||||
}
|
||||
this.disposeTime(this.pageNo)
|
||||
this.noData = false
|
||||
this.pageNo++
|
||||
this.disposeTime(this.pageNo);
|
||||
this.noData = false;
|
||||
this.pageNo++;
|
||||
} else {
|
||||
this.noData = true
|
||||
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>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
{{alertRuleData && alertRuleData.name ? alertRuleData.name : '--'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-rule-info" >
|
||||
<div class="alert-rule-nfo" >
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">ID</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
|
||||
|
||||
Reference in New Issue
Block a user