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

NEZ-290 feat: panel-alertList样式调整、resize实现

Browse Source
This commit is contained in:
chenjinsong
2020-06-01 20:47:36 +08:00
parent cde04a6a68
commit b4d38263e4
7 changed files with 445 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -726,7 +726,7 @@ li{
.nz-table .el-table__virtual-wrapper {
width: 100% !important;
}
.chart-table .nz-table td {
.chart-table .nz-table td, .chart-alert-info .nz-table td {
background-color: white;
}
.nz-table td {

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

@@ -1,22 +1,12 @@
<style lang="scss">
@import './chart.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
@import './chart.scss';
</style>
<template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>
</div>
</div>
-->
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-alert" ref="resizeBox">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
@@ -25,9 +15,9 @@
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="!isPreview&&firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
@@ -49,7 +39,6 @@
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<transition name="el-zoom-in-bottom">
@@ -60,9 +49,9 @@
<el-table
:id="'tableContainer'+chartIndex"
class="nz-table"
:height="290"
:data="storedTableData"
border
:height="tableHeight"
ref="alertListTable"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
@@ -147,147 +136,148 @@
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination" :append-to-body="false"></Pagination>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
</div>
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
</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%"
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="key" :type="tagType(key)" style="margin: 5px;"
:cursor-point="tagType(key) == 'info' ? false : true"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{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>
</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%"
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>
</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>
<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="key" :type="tagType(key)" style="margin: 5px;"
:cursor-point="tagType(key) == 'info' ? false : true"
:key="key"
v-if="key != 'alertname' && key != 'severity'"
v-for="(value, key) in scope.row.labels">{{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>
</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>
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</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>
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<div class="export-xlsx">
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
<div class="upload-body">
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
<div style="text-align: right; margin-top: 10px;">
<button @click="closeDialog" class="el-button el-button--default el-button--small">
<span>{{$t('tip.no')}}</span>
</button>
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
<span>{{$t('tip.yes')}}</span>
</button>
<div class="export-xlsx">
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
<div class="upload-body">
<el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
<div style="text-align: right; margin-top: 10px;">
<button @click="closeDialog" class="el-button el-button--default el-button--small">
<span>{{$t('tip.no')}}</span>
</button>
<button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
<span>{{$t('tip.yes')}}</span>
</button>
</div>
</div>
</el-dialog>
</div>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
:title="$t('overall.detail')"
:visible.sync="graphShow"
width="90%"
:append-to-body="true"
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<div class="float-right panel-calendar dialog-tool" style="display: flex">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
</div>
</div>
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
</el-dialog>
<element-set
path="/alertList"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
</div>
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
:title="$t('overall.detail')"
:visible.sync="graphShow"
width="90%"
:append-to-body="true"
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<div class="float-right panel-calendar dialog-tool" style="display: flex">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
</div>
</div>
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
<element-set
path="/alertList"
:table-title="tableTitle"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
</div>
</div>
</template>
<script>
@@ -301,7 +291,7 @@ import axios from "axios";
import pickTime from "../common/pickTime";
import chart from "../page/dashboard/overview/chart";
export default {
name: 'chartTable',
name: 'chartTable',
components: {
'loading': loading,
'time-picker':timePicker,
@@ -309,160 +299,157 @@ export default {
'chart':chart,
'pick-time':pickTime,
},
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
},
chartInfo:{
}
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
data() {
return {
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
pageObj: {
pageNo: 1,
pageSize: 50,
total: 0
},
screenPageObj:{
pageNo: 1,
pageSize: 50,
total: 0
},
storedTableData:[],
storedScreanTableData:[],
images: '',
//toolbox: false,
loading:Object,
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
//showLoading:true,
//showLoadingScreen:false,
//showTable:true,
chartType: 'alertLIst', // 图表类型
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:38,//title-height:28,magrin-bottom:10
pageHeight:40,
divFirstShow:false,
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t("alert.alertName"),
prop: 'alertRule',
show: true,
width: 180
}, /*{
label: this.$t("alert.list.type"),
prop: 'type',
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
},
chartInfo:{}
},
data() {
return {
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
pageObj: {
pageNo: 1,
pageSize: 50,
total: 0
},
screenPageObj:{
pageNo: 1,
pageSize: 50,
total: 0
},
storedTableData:[],
storedScreanTableData:[],
images: '',
//toolbox: false,
loading:Object,
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
//showLoading:true,
//showLoadingScreen:false,
//showTable:true,
chartType: 'alertLIst', // 图表类型
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:38,//title-height:28,magrin-bottom:10
pageHeight:40,
divFirstShow:false,
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t("alert.alertName"),
prop: 'alertRule',
show: true,
width: 180
}, /*{
label: this.$t("alert.list.type"),
prop: 'type',
show: true,
width: 100
}, {
label: this.$t("alert.list.linked"),
prop: 'linkObject',
show: true,
width: 140
}, */{
label: this.$t("alert.list.labels"),
prop: 'labels',
show: true,
width: 200
}, {
label: this.$t("alert.severity"),
prop: 'severity',
show: true,
width: 100
}, {
label: this.$t("alert.list.linked"),
prop: 'linkObject',
label: this.$t('alert.summary'),
prop: 'summary',
show: true
}, {
label: this.$t('alert.description'),
prop: 'description',
show: true
}, {
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
width: 140
}, */{
label: this.$t("alert.list.labels"),
prop: 'labels',
show: true,
width: 200
}, {
label: this.$t("alert.severity"),
prop: 'severity',
show: true,
width: 100
}, {
label: this.$t('alert.summary'),
prop: 'summary',
show: true
}, {
label: this.$t('alert.description'),
prop: 'description',
show: true
}, {
label: this.$t('alert.list.state'),
prop: 'state',
show: true,
width: 100
}, {
label: this.$t("alert.startAt"),
prop: 'startAt',
show: true,
}, {
label: this.$t('alert.endAt'),
prop: 'endAt',
show: true,
}, {
label: this.$t('alert.list.current'),
prop: 'current',
show: true
}, {
label: this.$t('overall.option'),
prop: 'option',
show: true,
width: 90
}
],
tablelable:[],
dropCol: [],
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false,
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
graphShow: false,
chartDatas: [],
chartUnit:5,
deleteBox: {show: false, ids: "", remark: '', state: 2},
isPreview:false,
};
},
created() {
},
width: 100
}, {
label: this.$t("alert.startAt"),
prop: 'startAt',
show: true,
}, {
label: this.$t('alert.endAt'),
prop: 'endAt',
show: true,
}, {
label: this.$t('alert.list.current'),
prop: 'current',
show: true
}, {
label: this.$t('overall.option'),
prop: 'option',
show: true,
width: 90
}
],
tablelable:[],
dropCol: [],
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false,
severityData: [
{
key: 'medium',
value: this.$t("alert.config.medium")
},
{
key: 'high',
value: this.$t("alert.config.high")
},
{
key: 'low',
value: this.$t("alert.config.low")
}
],
graphShow: false,
chartDatas: [],
chartUnit:5,
deleteBox: {show: false, ids: "", remark: '', state: 2},
isPreview:false,
};
},
computed: {
tagType() {
return (key) => {
@@ -498,6 +485,10 @@ export default {
}
},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) {
return "alert-message-list-labels";
@@ -635,94 +626,95 @@ export default {
})
}
},
getAlertList: function (filterType,isPreview=false) {
this.isPreview = isPreview;
let queryParam={
pageSize:this.pageObj.pageSize,
pageNo:this.pageObj.pageNo,
}
if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
let param=this.chartInfo.param;
if(param.endpointId&&param.endpointId != ''){
queryParam.endpointId=param.endpointId;
getAlertList: function (filterType,isPreview=false) {
this.resize();
this.isPreview = isPreview;
let queryParam={
pageSize:this.pageObj.pageSize,
pageNo:this.pageObj.pageNo,
}
if(this.chartInfo&&this.chartInfo.param){ //按照粒度，project>module>endpoint 查询只传最细粒度
let param=this.chartInfo.param;
if(param.endpointId&&param.endpointId != ''){
queryParam.endpointId=param.endpointId;
}else{
if(param.moduleId&&param.moduleId!=''){
queryParam.moduleId=param.moduleId;
}else{
if(param.moduleId&&param.moduleId!=''){
queryParam.moduleId=param.moduleId;
}else{
if(param.projectId&&param.projectId!=''){
queryParam.projectId=param.projectId;
}
if(param.projectId&&param.projectId!=''){
queryParam.projectId=param.projectId;
}
}
if(param.ruleId&&param.ruleId!=''){
queryParam.ruleId=param.ruleId;
}
if(param.severity&&param.severity!=''){
queryParam.severity=param.severity;
}
if(param.state&&param.state!=''){
queryParam.state=param.state;
}
}
this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {
this.storedTableData = response.data.list;
this.storedScreanTableData=response.data.list;
this.storedTableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
if(paramStr&& paramStr !='""'){
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
let current = [];
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value.map((item, i) => {
if (i == 0) {
return bus.computeTimezone(item);
} else {
return parseFloat(item).toFixed(2);
}
});
}
this.$set(item, "current", current);
});
}
});
this.pageObj.total = response.data.total;
this.isError = false;
this.errorContent = '';
this.divFirstShow = true;
if(param.ruleId&&param.ruleId!=''){
queryParam.ruleId=param.ruleId;
}
if(param.severity&&param.severity!=''){
queryParam.severity=param.severity;
}
if(param.state&&param.state!=''){
queryParam.state=param.state;
}
}
this.firstShow = true; // 展示操作按键
this.endLoading(filterType);
}else{
this.isError = true;
this.errorContent = response.msg;
}
});
},
promQueryParamConvert(obj) {
if(obj){
return "(" + obj.alertRule.expr + ") and (" + function(){
let q = "{";
for (let k in obj.labels) {
if (k != 'alertname' && k != 'severity') {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
}
};
if (q.length > 1) {
q = q.substring(0, q.length-1);
this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {
this.storedTableData = response.data.list;
this.storedScreanTableData=response.data.list;
this.storedTableData.forEach((item) => {
item.labels = JSON.parse(item.labels);
let paramStr = JSON.stringify(this.promQueryParamConvert(item));
if(paramStr&& paramStr !='""'){
this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
let current = [];
if (response2.data && response2.data.result && response2.data.result.length > 0) {
current = response2.data.result[0].value.map((item, i) => {
if (i == 0) {
return bus.computeTimezone(item);
} else {
return parseFloat(item).toFixed(2);
}
});
}
this.$set(item, "current", current);
});
}
q += "}";
return q;
}() + ")";
});
this.pageObj.total = response.data.total;
this.isError = false;
this.errorContent = '';
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.endLoading(filterType);
}else{
this.isError = true;
this.errorContent = response.msg;
}
return '';
},
});
},
promQueryParamConvert(obj) {
if(obj){
return "(" + obj.alertRule.expr + ") and (" + function(){
let q = "{";
for (let k in obj.labels) {
if (k != 'alertname' && k != 'severity') {
q += k;
q += "=";
q += ("'" + obj.labels[k] + "',");
}
};
if (q.length > 1) {
q = q.substring(0, q.length-1);
}
q += "}";
return q;
}() + ")";
}
return '';
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
@@ -944,72 +936,64 @@ export default {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
//tableBox.style.height = `${height-75-32}px`;
tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
resize(chartItem) {
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight}px)`;
this.tableHeight = `calc(100% - 34px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
});
},
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
this.resize(chartItem);
});
this.startLoading();
this.divFirstShow = true;
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
//this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
//this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
//this.showTable = false;
this.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
// label: '',//label
// metric: '',//metric列
element:'',
time: '',//采集时间
value: '',//数值
});
this.startLoading();
this.divFirstShow = true;
//this.tableLoading = true;
},
// 展示图表编辑区
/*
showTool() {
this.toolbox = !this.toolbox;
},
*/
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
//this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
//this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
//this.showTable = false;
this.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
// label: '',//label
// metric: '',//metric列
element:'',
time: '',//采集时间
value: '',//数值
});
}
this.startLoading('screen');
//this.tableLoading = true;
//this.firstShow = false;
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
}
this.startLoading('screen');
//this.tableLoading = true;
//this.firstShow = false;
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
clearChart(){
this.data = {};
},
@@ -1045,7 +1029,7 @@ export default {
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
console.info(chartItem,title)
},
},

8
nezha-fronted/src/components/charts/chart-asset-info.vue
View File

@@ -6,7 +6,7 @@
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-asset" ref="resizeBox">
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
@@ -14,10 +14,10 @@
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<div>{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">

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

@@ -110,6 +110,7 @@
<chart-alert-list :ref="'editChart'+item.id"
:panel-id="filter.panelId"
:chart-index="index"
v-if="item.type === 'alertList'"
:editChartId="'editChartId' + item.id"
:chart-info="item"
@on-refresh-data="refreshChart"

7
nezha-fronted/src/components/charts/chart.scss
View File

@@ -173,7 +173,7 @@
.pagination {
padding-top: 0;
}
.chart-table {
.chart-table, .chart-alert-info {
width: 100%;
.table-container {
padding: 0 6px;
@@ -268,6 +268,9 @@
min-height: 26px;
line-height: 26px;
}
.el-table__body {
background-color: white;
}
.el-table__body tr:last-of-type td {
border: none;
}
@@ -287,7 +290,7 @@
}
}
}
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info {
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info {
height: 100%;
position: relative;
background-color: white;

4
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -6,7 +6,7 @@
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-popover
v-if="isError"
@@ -15,7 +15,7 @@
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>

6
nezha-fronted/src/tools.js
View File

@@ -466,12 +466,6 @@ export const chartResizeTool = {
//step时chart重绘
if (box.classList.contains("resize-box-echarts")) { //echarts类型
vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
} else if (box.classList.contains("resize-box-table")) { //table类型
//刷新滚动条
let scrollbar = box.querySelector(".el-table__body-wrapper")._ps_;
if (scrollbar) {
scrollbar.update();
}
}
//chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`);