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

feat:alertmessage 新增endpoint悬浮框，table类型图表新增value mapping

Browse Source
This commit is contained in:
wangwenrui
2020-11-17 10:00:39 +08:00
parent c4672ad61e
commit 02fc3e021a
8 changed files with 509 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -5,7 +5,8 @@
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-table" ref="resizeBox">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true"
@mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -24,60 +25,83 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze "
:class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex"
class="el-dropdown-menu nz-chart-dropdown"
style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;">
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span>
</li>
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}
</li>
<li @click="removeChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}
</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}
</li>
<li @click="duplicate" class="el-dropdown-menu__item">
<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>
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table @sort-change="tableDataSort">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
:data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
@sort-change="tableDataSort">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="260"
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{ scope.row.value}}
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
<Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize'
ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal"
width="96%" @close="screenModal = false">
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
@change="dateChange"></time-picker>
</div>
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="420"
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{ scope.row.value}}
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
<Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo'
@pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -349,9 +373,26 @@ export default {
this.isError = false;
this.errorContent = '';
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
seriesItem=seriesItem.map(item=>{
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
let type=chartItem.param.valueMapping.type;
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
let value = item.value;
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
}
item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
}
return item;
})
if (area === 'showFullScreen') {//全屏按时间查询
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
// this.seriesItemScreen = seriesItem;
@@ -370,8 +411,6 @@ export default {
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.storedTableData = seriesItem;
this.storedScreanTableData = seriesItem;
this.storedTableData = Object.assign([], this.storedTableData.reverse());

19
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -143,7 +143,7 @@
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{scope.row.value}}
</template>
</el-table-column>
</el-table>
@@ -1028,8 +1028,25 @@
},
// 设置数据
setTableData(seriesItem) {
console.log('set table data',this.chart)
this.unit = chartDataFormat.getUnit(this.chart.unit);
seriesItem=seriesItem.map(item=>{
if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){
let type=this.chart.param.valueMapping.type;
let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[];
let value = item.value;
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
}
item.value = mapping?mapping.text:this.unit.compute(value,null,2);
console.log('value',value,'mapping',mapping)
}
return item;
})
this.storedScreanTableData=seriesItem;
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.screenPageObj.total=this.storedScreanTableData.length;

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

@@ -37,7 +37,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.title}}-[{{chartData.id}}]</span>
<span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul v-if="filter.from != 'alertRule'" slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >

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

@@ -93,6 +93,37 @@
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='endpoint'" 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="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Module</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Labels</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div>
</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="alert-label-box">
<div class="alert-label-title">Port</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Path</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div>
</div>
</div>
</div>
</template>
@@ -227,6 +258,17 @@
}
})
}
if(this.type==='endpoint'){
this.$get('/endpoint?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertLabelData=res.data.list[0];
console.log(this.alertLabelData)
} else{
this.$message.error(res.msg);
}
})
}
},
}

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

@@ -98,7 +98,7 @@
</nz-alert-tag>
</span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project'||item.label === 'endpoint') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
@@ -794,6 +794,7 @@
switch(labelType){
case 'asset':
case 'module':
case 'endpoint':
case 'project':
return false;
default: return true;

2
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -520,9 +520,11 @@
this.pingData.map(item=>{
if(response.data.ping){
let data=response.data.ping.find(t=>t.name == item.label);
if(data){
item.total = data.total;
item.value = data.status
}
}
return item;
})

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -569,7 +569,7 @@
}
},
afterTableListChange:function(){
this.getTableData();
// this.getTableData();
bus.$emit('asset-list-change')
},
pageNo(val) {

19
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -230,18 +230,18 @@
</span>
</el-row>
<!--value mapping start-->
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
<span class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type" @change="valueMappingChange">
<el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
<el-radio-button label="range" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'value'">
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
<el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
@@ -252,7 +252,7 @@
</el-form-item>
</template>
</template>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
@@ -1179,6 +1179,13 @@
this.editChart.param={nullType:this.editChart.param.nullType,threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
}else if(chartType == 'table'){
this.$set(this.editChart.param,'last',0)
this.editChart.param={
statistics:'',
valueMapping:{
type:'value',
mapping:[{text:'',value:''}]
}
}
}
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
@@ -1253,6 +1260,7 @@
params.param.threshold=this.editChart.param.threshold;
if(this.editChart.type==='table'){
delete params.param.threshold;
params.param.valueMapping=this.editChart.param.valueMapping;
}
params.param.nullType=this.editChart.param.nullType;
params.param.legendValue=this.editChart.param.legendValue;
@@ -1386,6 +1394,7 @@
this.setIsSingleStat();
} else if(n.type === 'table'){
n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
}else {
this.setIsOtherChart();
n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})