抽出alertMessage Table部分为公共
This commit is contained in:
zhangyu
@@ -25,116 +25,124 @@
|
||||
<i style="cursor: pointer" class="el-icon-delete"></i>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
class="nz-table"
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
ref="alertMessageSubList"
|
||||
tooltip-effect="light"
|
||||
v-scrollBar:el-table="'large'"
|
||||
:height="$tableHeight.openSubList.subList"
|
||||
:cell-class-name="labelsClassName"
|
||||
@selection-change="selectChange"
|
||||
style="width: 100%;"
|
||||
@sort-change="tableDataSort"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
type="selection"
|
||||
width="38"
|
||||
align="center"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
v-for="(item, index) in tablelable"
|
||||
v-if="item.show"
|
||||
:width="item.width"
|
||||
:key="`col-${index}`"
|
||||
:label="item.label"
|
||||
:show-overflow-tooltip="item.prop != 'labels'"
|
||||
min-width="110px"
|
||||
:sortable="sortableShow(item.prop)"
|
||||
:prop="propTitle(item.prop)"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
>
|
||||
<template slot-scope="scope" :column="item">
|
||||
<template v-if="item.prop == 'alertRule'">
|
||||
<div class="too-long-split" :id="'view-rule-'+scope.row[item.prop].id"
|
||||
v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<!--<div v-else-if="item.prop == 'type'" class="content-right-options">
|
||||
<span v-if="scope.row[item.prop] == 1">Project</span>
|
||||
<span v-if="scope.row[item.prop] == 2">Module</span>
|
||||
<span v-if="scope.row[item.prop] == 3">Device</span>
|
||||
</div>-->
|
||||
<template v-else-if="item.prop == 'summary'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop == 'description'">
|
||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<span v-else-if="item.prop == 'severity'">
|
||||
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{severityData[1].value}}</span>
|
||||
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
|
||||
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{severityData[2].value}}</span>
|
||||
</span>
|
||||
<!--<div v-else-if="item.prop == 'linkObject'">
|
||||
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
|
||||
@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
|
||||
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
|
||||
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"
|
||||
@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
|
||||
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
|
||||
<span v-else>-</span>
|
||||
</div>-->
|
||||
<template v-else-if="item.prop == 'labels'">
|
||||
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
|
||||
:cursor-point="false"
|
||||
:key="item.label"
|
||||
v-if="item.label != 'alertname' && item.label != 'severity'"
|
||||
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
|
||||
<!--<el-tag v-if="key != 'alertname' && key != 'severity'"
|
||||
:key="key"
|
||||
type="info"
|
||||
size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
|
||||
</template>
|
||||
<div v-else-if="item.prop == 'state'">
|
||||
<span class="">
|
||||
{{scope.row['state'] == 1 ? "Pending" : ""}}
|
||||
{{scope.row['state'] == 2 ? "Expired" : ""}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'current'" class="too-long-split" >
|
||||
<span v-if="!scope.row.current">-</span>
|
||||
<el-popover v-else placement="right" trigger="hover">
|
||||
<span slot="reference">{{scope.row.current[1]}}</span>
|
||||
<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div v-else-if="item.prop == 'option'" class="content-right-options">
|
||||
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'sub-alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
|
||||
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'sub-alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>
|
||||
</div>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="28" :resizable="false">
|
||||
<template slot="header" slot-scope="scope">
|
||||
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
|
||||
<i class="nz-icon nz-icon-gear"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-slot="scope">
|
||||
<button v-if="scope.$index == 0" :class="{'to-top-is-hover': tableHover}" class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--<el-table-->
|
||||
<!--class="nz-table"-->
|
||||
<!--:data="tableData"-->
|
||||
<!--border-->
|
||||
<!--v-loading="loading"-->
|
||||
<!--ref="alertMessageSubList"-->
|
||||
<!--tooltip-effect="light"-->
|
||||
<!--v-scrollBar:el-table="'large'"-->
|
||||
<!--:height="$tableHeight.openSubList.subList"-->
|
||||
<!--:cell-class-name="labelsClassName"-->
|
||||
<!--@selection-change="selectChange"-->
|
||||
<!--style="width: 100%;"-->
|
||||
<!--@sort-change="tableDataSort"-->
|
||||
<!-->-->
|
||||
<!--<el-table-column-->
|
||||
<!--:resizable="false"-->
|
||||
<!--type="selection"-->
|
||||
<!--width="38"-->
|
||||
<!--align="center"-->
|
||||
<!-->-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column-->
|
||||
<!--:resizable="false"-->
|
||||
<!--v-for="(item, index) in tablelable"-->
|
||||
<!--v-if="item.show"-->
|
||||
<!--:width="item.width"-->
|
||||
<!--:key="`col-${index}`"-->
|
||||
<!--:label="item.label"-->
|
||||
<!--:show-overflow-tooltip="item.prop != 'labels'"-->
|
||||
<!--min-width="110px"-->
|
||||
<!--:sortable="sortableShow(item.prop)"-->
|
||||
<!--:prop="propTitle(item.prop)"-->
|
||||
<!--:sort-orders="['ascending', 'descending']"-->
|
||||
<!-->-->
|
||||
<!--<template slot-scope="scope" :column="item">-->
|
||||
<!--<template v-if="item.prop == 'alertRule'">-->
|
||||
<!--<div class="too-long-split" :id="'view-rule-'+scope.row[item.prop].id"-->
|
||||
<!--v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
|
||||
<!--<template v-else>-</template>-->
|
||||
<!--</template>-->
|
||||
<!--<!–<div v-else-if="item.prop == 'type'" class="content-right-options">-->
|
||||
<!--<span v-if="scope.row[item.prop] == 1">Project</span>-->
|
||||
<!--<span v-if="scope.row[item.prop] == 2">Module</span>-->
|
||||
<!--<span v-if="scope.row[item.prop] == 3">Device</span>-->
|
||||
<!--</div>–>-->
|
||||
<!--<template v-else-if="item.prop == 'summary'">-->
|
||||
<!--<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>-->
|
||||
<!--<template v-else>-</template>-->
|
||||
<!--</template>-->
|
||||
<!--<template v-else-if="item.prop == 'description'">-->
|
||||
<!--<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>-->
|
||||
<!--<span v-else>-</span>-->
|
||||
<!--</template>-->
|
||||
<!--<span v-else-if="item.prop == 'severity'">-->
|
||||
<!--<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i> {{severityData[1].value}}</span>-->
|
||||
<!--<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>-->
|
||||
<!--<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i> {{severityData[2].value}}</span>-->
|
||||
<!--</span>-->
|
||||
<!--<!–<div v-else-if="item.prop == 'linkObject'">-->
|
||||
<!--<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"-->
|
||||
<!--@click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"-->
|
||||
<!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>-->
|
||||
<!--<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"-->
|
||||
<!--@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"-->
|
||||
<!--:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>-->
|
||||
<!--<span v-else>-</span>-->
|
||||
<!--</div>–>-->
|
||||
<!--<template v-else-if="item.prop == 'labels'">-->
|
||||
<!--<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"-->
|
||||
<!--:cursor-point="false"-->
|
||||
<!--:key="item.label"-->
|
||||
<!--v-if="item.label != 'alertname' && item.label != 'severity'"-->
|
||||
<!--v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>-->
|
||||
<!--<!–<el-tag v-if="key != 'alertname' && key != 'severity'"-->
|
||||
<!--:key="key"-->
|
||||
<!--type="info"-->
|
||||
<!--size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>–>-->
|
||||
<!--</template>-->
|
||||
<!--<div v-else-if="item.prop == 'state'">-->
|
||||
<!--<span class="">-->
|
||||
<!--{{scope.row['state'] == 1 ? "Pending" : ""}}-->
|
||||
<!--{{scope.row['state'] == 2 ? "Expired" : ""}}-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<!--<div v-else-if="item.prop == 'current'" class="too-long-split" >-->
|
||||
<!--<span v-if="!scope.row.current">-</span>-->
|
||||
<!--<el-popover v-else placement="right" trigger="hover">-->
|
||||
<!--<span slot="reference">{{scope.row.current[1]}}</span>-->
|
||||
<!--<div>{{$unixTimeParseToString(scope.row.current[0])}}</div>-->
|
||||
<!--</el-popover>-->
|
||||
<!--</div>-->
|
||||
<!--<div v-else-if="item.prop == 'option'" class="content-right-options">-->
|
||||
<!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'sub-alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>-->
|
||||
<!--<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'sub-alert-list-delete-'+scope.row.id"><i class="el-icon-delete"></i></span>-->
|
||||
<!--</div>-->
|
||||
<!--<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>-->
|
||||
<!--<template v-else>-</template>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--<el-table-column width="28" :resizable="false">-->
|
||||
<!--<template slot="header" slot-scope="scope">-->
|
||||
<!--<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">-->
|
||||
<!--<i class="nz-icon nz-icon-gear"></i>-->
|
||||
<!--</span>-->
|
||||
<!--</template>-->
|
||||
<!--<template v-slot="scope">-->
|
||||
<!--<button v-if="scope.$index == 0" :class="{'to-top-is-hover': tableHover}" class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>-->
|
||||
<!--</template>-->
|
||||
<!--</el-table-column>-->
|
||||
<!--</el-table>-->
|
||||
<alertMessageTable
|
||||
:tableData="tableData"
|
||||
:loading="loading"
|
||||
:tableHeight="$tableHeight.openSubList.subList"
|
||||
:tableId="tableId"
|
||||
@tableDataSort="tableDataSort"
|
||||
@deleteMessage="deleteMessage"
|
||||
></alertMessageTable>
|
||||
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||
|
||||
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
|
||||
@@ -202,11 +210,13 @@
|
||||
import nzAlertTag from '../../../page/alert/nzAlertTag';
|
||||
import chart from '../../../page/dashboard/overview/chart'
|
||||
import bus from '../../../../libs/bus'
|
||||
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
|
||||
export default {
|
||||
name: "alertMessageTab",
|
||||
components: {
|
||||
'nz-alert-tag': nzAlertTag,
|
||||
'chart': chart
|
||||
'chart': chart,
|
||||
'alertMessageTable':alertMessageTable,
|
||||
},
|
||||
props: {
|
||||
from: String, //来自哪个主页面，有："asset"、"alertRule"
|
||||
@@ -445,11 +455,10 @@
|
||||
toDeleteMessage() {
|
||||
this.deleteBox.show = true;
|
||||
},
|
||||
deleteMessage() {
|
||||
this.$put("alert/message", this.deleteBox).then(res => {
|
||||
deleteMessage(deleteBox) {
|
||||
this.$put("alert/message", deleteBox).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||
this.deleteBox.show = false;
|
||||
this.getAlertList();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
@@ -657,6 +666,7 @@
|
||||
}, 1000);
|
||||
},
|
||||
promQueryParamConvert(obj) {
|
||||
console.log(obj)
|
||||
return "(" + obj.alertRule.expr + ") and (" + function(){
|
||||
let q = "{";
|
||||
for (let k in obj.labels) {
|
||||
@@ -825,25 +835,6 @@
|
||||
if (pageSize) {
|
||||
this.pageObj.pageSize = pageSize
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
//绑定滚动条事件，控制top按钮
|
||||
let el = this.$refs.alertMessageSubList.$el.querySelector(".el-table__body-wrapper");
|
||||
if (el._ps_) {
|
||||
el.addEventListener("ps-scroll-y", () => {
|
||||
if (el._ps_.scrollbarYTop > 50) {
|
||||
this.showTopBtn = true;
|
||||
} else {
|
||||
this.showTopBtn = false;
|
||||
}
|
||||
});
|
||||
el.addEventListener("mouseenter", () => {
|
||||
this.tableHover = true;
|
||||
});
|
||||
el.addEventListener("mouseleave", () => {
|
||||
this.tableHover = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList")
|
||||
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/alertList"))
|
||||
: this.tableTitle;
|
||||
|
||||
Reference in New Issue
Block a user