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 { .nz-table .el-table__virtual-wrapper {
width: 100% !important; width: 100% !important;
} }
.chart-table .nz-table td { .chart-table .nz-table td, .chart-alert-info .nz-table td {
background-color: white; background-color: white;
} }
.nz-table td { .nz-table td {

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

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

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

@@ -173,7 +173,7 @@
.pagination { .pagination {
padding-top: 0; padding-top: 0;
} }
.chart-table { .chart-table, .chart-alert-info {
width: 100%; width: 100%;
.table-container { .table-container {
padding: 0 6px; padding: 0 6px;
@@ -268,6 +268,9 @@
min-height: 26px; min-height: 26px;
line-height: 26px; line-height: 26px;
} }
.el-table__body {
background-color: white;
}
.el-table__body tr:last-of-type td { .el-table__body tr:last-of-type td {
border: none; 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%; height: 100%;
position: relative; position: relative;
background-color: white; 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-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-echarts" ref="resizeBox"> <div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart"> <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" > <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-popover <el-popover
v-if="isError" v-if="isError"
@@ -15,7 +15,7 @@
trigger="hover" trigger="hover"
popper-class="chart-error-popper"> popper-class="chart-error-popper">
<div >{{errorContent}}</div> <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> <i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span> <span class="panel-info-corner-inner"></span>
</span> </span>

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

@@ -466,12 +466,6 @@ export const chartResizeTool = {
//step时chart重绘 //step时chart重绘
if (box.classList.contains("resize-box-echarts")) { //echarts类型 if (box.classList.contains("resize-box-echarts")) { //echarts类型
vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight}); 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外层宽高调整 //chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`); let outerBox = document.getElementById(`chart-${data.id}`);