gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix： 修正抽取组件没有批量删除的功能 style：修改小驼峰为中划线的格式

Browse Source
This commit is contained in:
zhangyu
2020-07-31 10:55:25 +08:00
parent 0c9d6090cd
commit 99609a06bf
6 changed files with 125 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -41,104 +41,16 @@
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<transition name="el-zoom-in-bottom">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
<el-table
:id="'tableContainer'+chartIndex"
class="nz-table"
:data="storedTableData"
border
:height="tableHeight"
<alertMessageTable
:tableData="storedScreanTableData"
:loading="loading"
:tableHeight="tableHeight"
:tableId="''"
:projectAlertId="'tableContainer'+chartIndex"
@tableDataSort="tableDataSort"
@deleteMessage="deleteMessage"
ref="alertListTable"
tooltip-effect="light"
v-scrollBar:el-table="'normal'"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
style="width: 100%;"
@sort-change="tableDataSort"
v-loading="loading"
>
<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"
@click="" :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>
<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>&nbsp;{{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>&nbsp;{{severityData[2].value}}</span>
</span>
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-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">{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</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="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
<span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'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" v-if="!isPreview">
<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" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
></alertMessageTable>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
</div>
<!--全屏-->
@@ -148,100 +60,16 @@
<div class="float-right panel-calendar dialog-tool">
</div>
</div>
<transition name="el-zoom-in-bottom">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
<el-table
:id="'tableContainer'+chartIndex"
class="nz-table"
:data="storedScreanTableData"
border
height="95%"
<alertMessageTable
:tableData="storedScreanTableData"
:loading="loading"
:tableHeight="'95%'"
:tableId="''"
:projectAlertId="'tableContainer'+chartIndex"
@tableDataSort="tableDataSort"
@deleteMessage="deleteMessage"
ref="alertListScreenTable"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
style="width: 100%;"
>
<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"
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'">
<div class="too-long-split"
@click="" :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>
<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>&nbsp;{{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>&nbsp;{{severityData[2].value}}</span>
</span>
<template v-else-if="item.prop == 'labels'">
<nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
:cursor-point="tagType(item.label) == 'info' ? false : true"
:key="item.label"
v-if="item.label != 'alertname' && item.label != 'severity'"
v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-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="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
<span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'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" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
></alertMessageTable>
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
@@ -298,6 +126,7 @@ import nzAlertTag from "../page/alert/nzAlertTag";
import axios from "axios";
import pickTime from "../common/pickTime";
import chart from "../page/dashboard/overview/chart";
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
export default {
name: 'chartTable',
components: {
@@ -306,6 +135,7 @@ export default {
'nz-alert-tag':nzAlertTag,
'chart':chart,
'pick-time':pickTime,
'alertMessageTable':alertMessageTable
},
props: {
// 看板id
@@ -505,28 +335,6 @@ export default {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
labelsSort:function(obj){
let buildIn=['asset','endpoint','module','project','datacenter']
let labels=JSON.parse(JSON.stringify(obj));
let result=[];
for(let key of buildIn){
if(key in labels){
result.push({label:key,value:labels[key]})
delete labels[key]
}
}
Object.keys(labels).sort().forEach(key=>{
result.push({label:key,value:labels[key]})
})
return result;
},
labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) {
return "alert-message-list-labels";
} else {
return "";
}
},
formatThreshold:function(value,unit){
let unitMethod=chartDataFormat.getUnit(unit)
if(unitMethod&&value){
@@ -574,13 +382,7 @@ export default {
screenDialogClose:function(){
this.screenModal = false
this.deleteBox.ids=[];
this.$refs.alertListScreenTable.clearSelection();
},
toDeleteMessage(obj) {
if (obj) {
this.deleteBox.ids = obj.id + "";
}
this.deleteBox.show = true;
this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection();
},
selectChange(s) {
let ids = [];
@@ -590,8 +392,8 @@ export default {
});
this.deleteBox.ids = ids.join(",");
},
deleteMessage() {
this.$put("alert/message", this.deleteBox).then(res => {
deleteMessage(deleltebox) {
this.$put("alert/message", deleltebox).then(res => {
if (res.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.deleteBox.show = false;
@@ -970,7 +772,7 @@ export default {
this.storedScreanTableData = this.storedTableData
this.screenModal = true;
this.deleteBox.ids=[];
this.$refs.alertListTable.clearSelection();
this.$refs.alertListTable.$refs.alertListTable.clearSelection();
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {

134
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -1,96 +1,96 @@
<template>
<span>
<div class="alertLabelInfo" v-if="type==='asset'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">SN</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">SN</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.sn:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Host</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.host:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">State</div>
<div class="alertLabelValue">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">State</div>
<div class="alert-label-value">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Ping</div>
<div class="alertLabelValue">
<div class="alert-label-box">
<div class="alert-label-title">Ping</div>
<div class="alert-label-value">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingStatus == 1,'active-icon red':alertLabelData.pingStatus == 0}"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Asset Type</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.assetType:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Asset Type</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.assetType:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Vendor</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.vendor:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Vendor</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.vendor:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Model</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.model:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Model</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.model:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">PingLastReply</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">PingLastReply</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.pingLastReply:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Alert</div>
<div class="alertLabelValue">
<div class="alert-label-box">
<div class="alert-label-title">Alert</div>
<div class="alert-label-value">
<span v-if="alertLabelData" :class="{danger:alertLabelData.alert>0,success:alertLabelData.alert<=0}">{{alertLabelData.alert + alertActiveStr()}}</span>
</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">DC</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">DC</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.dataCenter:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Endpoint</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.endpoint:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Endpoint</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.endpoint:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Administrator</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.principal:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Administrator</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.principal:''}}</div>
</div>
</div>
<div class="alertLabelInfo" v-if="type==='module'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
<div class="alert-label-info" v-if="type==='module'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Name</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Project</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.project.name:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Description</div>
<div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
<div class="alertLabelInfo" v-if="type==='project'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
<div class="alert-label-info" v-if="type==='project'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Name</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Name</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Description</div>
<div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
<div class="alert-label-box">
<div class="alert-label-title">Description</div>
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
</span>
@@ -172,25 +172,25 @@
</script>
<style scoped>
.alertLabelInfo{
.alert-label-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alertLabelBox{
.alert-label-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid #ebeef5;
}
.alertLabelTitle{
.alert-label-title{
text-align: left;
width: 90px;
border-right: 1px solid #ebeef5;
color: #666;
padding: 0 3px 0 13px;
}
.alertLabelValue{
.alert-label-value{
text-align: left;
width: 150px;
color: #1a1a1a;

18
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -2,7 +2,12 @@
@import '../../charts/chart';
</style>
<template>
<div class="content">
<div class="content relative-position">
<transition name="el-zoom-in-bottom">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
<!--表格-->
<el-table
class="nz-table tabelH100"
@@ -18,6 +23,7 @@
@selection-change="selectChange"
style="width: 100%;height: 100%"
@sort-change="tableDataSort"
:id="projectAlertId"
>
<el-table-column
:resizable="false"
@@ -224,7 +230,8 @@
tableData:{},
loading:{},
tableHeight:{},
tableId:{}
tableId:{},
projectAlertId:{}
},
data() {
vm = this;
@@ -618,8 +625,10 @@
this.deleteBox.show = true;
},
deleteMessage() {
this.$emit('deleteMessage',this.deleteBox);
// this.$emit('deleteMessage',this.deleteBox);
console.log(this.deleteBox);
this.deleteBox.show = false;
// this.deleteBox.ids=[];
},
selectChange(s) {
let ids = [];
@@ -947,4 +956,7 @@
/deep/.el-tooltip{
display: inline-block;
}
/deep/.alert-clean-pop.el-popover{
top: -30px;
}
</style>

36
nezha-fronted/src/components/common/alert/alertRuleInfo.vue
View File

@@ -1,20 +1,20 @@
<template>
<div class="alertRuleInfo" v-loading="loading">
<div class="alertRuleBox">
<div class="alertRuleTitle">ID</div>
<div class="alertRuleValue">{{alertRuleData?alertRuleData.id:''}}</div>
<div class="alert-rule-info" v-loading="loading">
<div class="alert-rule-box">
<div class="alert-rule-title">ID</div>
<div class="alert-rule-value">{{alertRuleData?alertRuleData.id:''}}</div>
</div>
<!--<div class="alertRuleBox">-->
<!--<div class="alertRuleTitle">ID</div>-->
<!--<div class="alertRuleValue">{{alertRuleData.id}}</div>-->
<!--<div class="alert-rule-box">-->
<!--<div class="alert-rule-title">ID</div>-->
<!--<div class="alert-rule-value">{{alertRuleData.id}}</div>-->
<!--</div>-->
<div class="alertRuleBox">
<div class="alertRuleTitle">Expression</div>
<div class="alertRuleValue">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
<div class="alert-rule-box">
<div class="alert-rule-title">Expression</div>
<div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
</div>
<div class="alertRuleBox">
<div class="alertRuleTitle">Level</div>
<div class="alertRuleValue">
<div class="alert-rule-box">
<div class="alert-rule-title">Level</div>
<div class="alert-rule-value">
<span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{severityData[0].value}}</span>
<span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
@@ -26,7 +26,7 @@
<script>
import chartDataFormat from '../../charts/chartDataFormat'
export default {
name:"alertRuleInfo",
name:"alert-rule-info",
props:{
id:{},
severityData:{
@@ -77,25 +77,25 @@
</script>
<style scoped>
.alertRuleInfo{
.alert-rule-info{
border: 1px solid #ebeef5;
border-bottom: none;
font-size: 13px;
line-height: 26px;
}
.alertRuleBox{
.alert-rule-box{
display: flex;
justify-content:space-between;
border-bottom: 1px solid #ebeef5;
}
.alertRuleTitle{
.alert-rule-title{
text-align: left;
width: 80px;
border-right: 1px solid #ebeef5;
color: #666;
padding: 0 3px 0 13px;
}
.alertRuleValue{
.alert-rule-value{
text-align: left;
width: 180px;
color: #1a1a1a;

141
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -20,121 +20,6 @@
</button>
</div>
</div>
<!--删除message按钮-->
<div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
<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"-->
<!--&gt;-->
<!--<el-table-column-->
<!--:resizable="false"-->
<!--type="selection"-->
<!--width="38"-->
<!--align="center"-->
<!--&gt;-->
<!--</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']"-->
<!--&gt;-->
<!--<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>-->
<!--&lt;!&ndash;<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>&ndash;&gt;-->
<!--<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>&nbsp;{{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>&nbsp;{{severityData[2].value}}</span>-->
<!--</span>-->
<!--&lt;!&ndash;<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>&ndash;&gt;-->
<!--<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>-->
<!--&lt;!&ndash;<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>&ndash;&gt;-->
<!--</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"
@@ -392,21 +277,6 @@
}
},
methods: {
labelsSort:function(obj){
let buildIn=['asset','endpoint','module','project','datacenter']
let labels=JSON.parse(JSON.stringify(obj));
let result=[];
for(let key of buildIn){
if(key in labels){
result.push({label:key,value:labels[key]})
delete labels[key]
}
}
Object.keys(labels).sort().forEach(key=>{
result.push({label:key,value:labels[key]})
})
return result;
},
elementsetShow(s, e) {
this.showElementSet = true;
this.$nextTick(() => {
@@ -446,9 +316,6 @@
changeTab(tab) {
this.$emit('changeTab', tab);
},
toDeleteMessage() {
this.deleteBox.show = true;
},
deleteMessage(deleteBox) {
this.$put("alert/message", deleteBox).then(res => {
if (res.code === 200) {
@@ -459,14 +326,6 @@
}
})
},
selectChange(s) {
let ids = [];
this.deleteBox.ids = "";
s.forEach(item => {
ids.push(item.id);
});
this.deleteBox.ids = ids.join(",");
},
exportCur:function(){
this.exportExcel(this.searchLabel);
this.importBox.show = false;

152
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -42,156 +42,6 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<transition name="el-zoom-in-bottom">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
<!--<el-table-->
<!--class="nz-table"-->
<!--:data="tableData"-->
<!--border-->
<!--v-show="mainResizeShow"-->
<!--ref="alertListTable"-->
<!--tooltip-effect="light"-->
<!--:height="mainTableHeight"-->
<!--v-scrollBar:el-table="'large'"-->
<!--v-loading="loading"-->
<!--:cell-class-name="labelsClassName"-->
<!--@selection-change="selectChange"-->
<!--style="width: 100%;"-->
<!--@sort-change="tableDataSort"-->
<!--&gt;-->
<!--<el-table-column-->
<!--:resizable="false"-->
<!--type="selection"-->
<!--width="38"-->
<!--align="center"-->
<!--&gt;-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--:resizable="false"-->
<!--v-for="(item, index) in tablelable"-->
<!--v-if="item.show"-->
<!--:width="item.width"-->
<!--:minWidth="item.minWidth"-->
<!--: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']"-->
<!--&gt;-->
<!--<template slot-scope="scope" :column="item">-->
<!--<template v-if="item.prop == 'alertRule'">-->
<!--&lt;!&ndash;<div class="link too-long-split"-->
<!--@click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"-->
<!--v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>&ndash;&gt;-->
<!--<span class="too-long-split" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">-->
<!--<el-tooltip placement="right" effect="light">-->
<!--<alertRuleInfo slot="content" :id="scope.row.alertRule.id" :severityData="severityData" :messageLoad="scope.row.loading"></alertRuleInfo>-->
<!--<span>{{scope.row[item.prop].alertName}}</span>-->
<!--</el-tooltip>-->
<!--</span>-->
<!--<template v-else>-</template>-->
<!--</template>-->
<!--&lt;!&ndash;<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>&ndash;&gt;-->
<!--<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>&nbsp;{{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>&nbsp;{{severityData[2].value}}</span>-->
<!--</span>-->
<!--&lt;!&ndash;<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"-->
<!--@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>&ndash;&gt;-->
<!--<template v-else-if="item.prop == 'labels'" class="labels">-->
<!--&lt;!&ndash; <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;" @click="showTagDetail(scope.row, key)"&ndash;&gt;-->
<!--<el-tooltip-->
<!--v-for="item in labelsSort(scope.row.labels)"-->
<!--placement="right"-->
<!--effect="light"-->
<!--:disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"-->
<!--:key="item.label"-->
<!--&gt;-->
<!--<alertLabel-->
<!--v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"-->
<!--slot="content"-->
<!--:id="scope.row[item.label].id"-->
<!--:type="item.label"-->
<!--:labelLoading="scope.row[item.label].loading"-->
<!--&gt;</alertLabel>-->
<!--<span @mouseover="labelHover(scope.row,scope.$index,item.label)">-->
<!--<nz-alert-tag-->
<!--:label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"-->
<!--:cursor-point="tagType(item.label) == 'info' ? false : true"-->
<!--:key="item.label"-->
<!--v-if="item.label != 'alertname' && item.label != 'severity'"-->
<!--&gt;-->
<!--{{item.value}}-->
<!--</nz-alert-tag>-->
<!--</span>-->
<!--</el-tooltip>-->
<!--&lt;!&ndash;<el-tag @click="showTagDetail(scope.row, key)"-->
<!--:key="key"-->
<!--:class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"-->
<!--v-if="key != 'alertname' && key != 'severity'"-->
<!--:type="tagType(key)"-->
<!--size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>&ndash;&gt;-->
<!--</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">-->
<!--<div slot="reference">-->
<!--<span @click="detail(scope.row)" class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>-->
<!--<span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>-->
<!--</div>-->
<!--<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.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'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" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>-->
<!--</template>-->
<!--</el-table-column>-->
<!--</el-table>-->
<alertMessageTable
:tableData="tableData"
:loading="loading"
@@ -276,7 +126,7 @@
import chartDataFormat from "../../charts/chartDataFormat";
import alertRuleInfo from '../../common/alert/alertRuleInfo'
import alertLabel from '../../common/alert/alertLabel'
import alertMessageTable from '../../common/alert/alertMessageTable'
import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
var vm;
export default {
name: "alertList",