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

feat:新增alertList chart 类型

Browse Source
This commit is contained in:
wangwenrui
2020-05-28 17:32:23 +08:00
parent 5c86185ead
commit 47c23b89c9
10 changed files with 1507 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1115
nezha-fronted/src/components/charts/chart-alert-list.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -135,6 +135,19 @@
:chart-index="index"
:editChartId="'editChartId' + item.id"
></chart-asset-info>
<chart-alert-list :ref="'editChart'+item.id"
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"
:chart-info="item"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@on-remove-chart-block="removeChart"
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
></chart-alert-list>
</div>
</draggable>
<el-row v-if="dataList.length === 0" class="noData"></el-row>
@@ -150,7 +163,7 @@ import chartSingleStat from './chart-single-stat';
import chartAssetInfo from './chart-asset-info'
import draggable from 'vuedraggable'
import chartDataFormat from "./chartDataFormat";
import chartAlertList from './chart-alert-list'
export default {
name: 'chartList',
props: {
@@ -158,6 +171,7 @@ export default {
additionalInfo:{}
},
components: {
chartAlertList,
chartAssetInfo,
lineChartBlock,
chartTable,
@@ -832,6 +846,10 @@ export default {
this.getAssetInfoChartData(chartItem);
return;
}
if(chartItem.type === 'alertList'){
this.getAlertListChartData(chartItem,filterType);
return;
}
if (this.isModel) {
this.modelStaticData(chartInfo, filterType);
} else {
@@ -1173,7 +1191,6 @@ export default {
host += "}";
}
//处理legend别名
console.log(this.$refs['editChart' + chartInfo.id])
let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend);
if (!alias || alias === '') {
alias = host;
@@ -1267,31 +1284,6 @@ export default {
getAssetInfoChartData(chartInfo){
if(!this.isModel){
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
// setTimeout(()=>{
// if(this.additionalInfo){
// let data={
// Basic:{
// sn:'assetInfo Test',
// host:'192.168.40.42',
// 'cpu Num':'8',
// memery:'12GB',
// 'memery free':'3GB'
// },
// Feature:{
// CPU:"Intel E500",
// Memory:"256GB",
// NetworkInterface:["eth0","eth1"],
// Disk:[{
// mount:"/",
// total:"256GB",
// free:"128GB",
// usageRate:"50%"
// }]
// }
// }
// this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
// }
// },1000)
this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
if(response.code == 200){
let data=response.data;
@@ -1323,6 +1315,9 @@ export default {
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
}
},
getAlertListChartData:function(chartInfo,filterType){
this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
},
// 设置图表的宽度
setSize(size, index) {
this.$nextTick(() => {

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

@@ -187,7 +187,7 @@ export default {
color: #606266;
background: #fff;
border-radius: 4px;
z-index: 999;
z-index: 999999;
}
.elementset-labels {

10
nezha-fronted/src/components/common/header.vue
View File

@@ -240,11 +240,11 @@
url: 'alertConfig',
type: 5
},
{
label: this.$t('config.dc.dc'),
url: 'dc',
type: 6
}
// {
// label: this.$t('config.dc.dc'),
// url: 'dc',
// type: 6
// }
],
addIdcData: {
id: '',

4
nezha-fronted/src/components/common/language/en.js
View File

@@ -147,8 +147,8 @@ const en = {
singleStat:{
label:"SingleStat"
},
alertInfo:{
label:"Alert information"
alertList:{
label:"Alert list"
}
},
statisticsVal:{

4
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -247,6 +247,10 @@
label: this.$t('alert.severity'),
prop: 'severity',
show: true,
},{
label: this.$t('alert.summary'),
prop: 'summary',
show: true,
}, {
label: this.$t('alert.description'),
prop: 'description',

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

@@ -592,6 +592,7 @@
this.$set(item, "current", current);
});
});
this.deleteBox.ids='';
this.pageObj.total = response.data.total;
}
});

263
nezha-fronted/src/components/page/dashboard/alertChartParam.vue Normal file
View File

@@ -0,0 +1,263 @@
<template>
<el-form :model="parameters" ref="alertChartParam" size="small" label-position="left" label-width="80px" class="alert-chart-param-form">
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.select')" >
<el-cascader
v-model="parameters.select"
:options="options"
:props="props"
class="form-item"
popper-class="alert-form-pop no-style-class"
clearable></el-cascader>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
<el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.alertRule" clearable>
<el-option v-for="(rule,index) in alertRules" :key="rule.id" :label="rule.alertName" :value="rule.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')">
<el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.level" clearable>
<el-option v-for="(item,index) in levels" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.state')">
<el-select class="form-item" size="small" popper-class="alert-form-pop no-style-class" v-model="parameters.state" clearable>
<el-option v-for="(item,index) in states" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
import i18n from "../../common/i18n";
export default {
name: "alertChartParam",
props:{
},
data(){
let $temp=this;
return{
parameters:{
select:[],
alertRule:'',
level:'',
state:'',
},
options:[],
props:{
checkStrictly: true,
// lazy:true,
// lazyLoad:$temp.lazyLoadFunc,
},
alertRules:[],
levels:[
{
value: 'medium',
label: $temp.$t("alert.config.medium")
},
{
value: 'high',
label: $temp.$t("alert.config.high")
},
{
value: 'low',
label: $temp.$t("alert.config.low")
}
],
states:[
{
value: '1',
label:$temp.$t('alert.list.pending')
},
{
value: '2',
label:$temp.$t('alert.list.expired')
}
],
}
},
created() {
this.queryAlertRules();
this.queryOptionsData();
},
methods:{
saveParam:function(opType='save'){
let param={
projectId:'',
moduleId:'',
endpointId:'',
severity:this.parameters.level,
state:this.parameters.state,
ruleId:this.parameters.alertRule,
}
switch (this.parameters.select.length) {
case 1:
param.projectId=this.parameters.select[0];
param.moduleId='';
param.endpointId='';
break;
case 2:
param.projectId=this.parameters.select[0];
param.moduleId=this.parameters.select[1];
param.endpointId='';
break;
case 3:
param.projectId=this.parameters.select[0];
param.moduleId=this.parameters.select[1];
param.endpointId=this.parameters.select[2];
break;
default:
param.projectId='';
param.moduleId='';
param.endpointId='';
break;
}
this.$emit('on-enter-complate',param,opType);
},
setData:function(responseData){
console.log(responseData)
if(responseData&&responseData.param){
let param=responseData.param;
let projectId=param.projectId;
let moduleId=param.moduleId;
let endpointId=param.endpointId;
let temp=[];
if(projectId&&projectId!=''){
temp[0]=projectId;
if(moduleId&&moduleId !=''){
temp[1]=moduleId;
if(endpointId&&endpointId!=''){
temp[2]=endpointId
}
}
}
this.parameters={
select: temp,
alertRule:param.ruleId,
level:param.severity,
state:param.state
}
console.log(this.parameters)
}
},
queryOptionsData:function(){
let param={
pageSize:-1
}
this.$get('endpoint',param).then(response=>{
/*
* {
* project-1:{
* data:{},
* module-1:{
* data:{},
* endpoints:[]
* }
* }
* }
* */
if(response.code==200){
const data=response.data.list;
let result=new Map();
data.forEach(item=>{
let project=result.get('project-'+item.project.id);
if(!project){
project=new Map();
project.set('data',item.project)
let module=new Map();
module.set('data',item.module)
module.set('endpoints',[item])
project.set('module-'+item.module.id,module)
result.set('project-'+item.project.id,project);
}else{
let module=project.get('module-'+item.module.id);
if(!module){
module=new Map();
module.set('data',item.module)
module.set('endpoints',[item])
project.set('module-'+item.module.id,module)
result.set('project-'+item.project.id,project);
}else{
let endpoints=module.get('endpoints');
endpoints.push(item);
module.set('endpoints',endpoints);
project.set('module-'+item.module.id,module);
result.set('project-'+item.project.id,project);
}
}
})
result.forEach((project,projectKey)=>{
let option={};
project.forEach((value,moduleKey)=>{
if(moduleKey == 'data'){
option.label=value.name;
option.value=value.id;
}else{
let module=value;
let moduleData=module.get('data');
let endpoints=module.get('endpoints');
endpoints=endpoints.map(item=>{
return{label:item.asset.host,value:item.id}
})
if(!option.children){
option.children=[];
}
option.children.push({
label:moduleData.name,
value:moduleData.id,
children:endpoints
})
}
})
this.options.push(option)
})
}else{
console.error(response.msg)
this.$message.error(response.msg)
}
})
},
queryAlertRules:function(){
let param={
pageSize:-1
}
this.$get('alert/rule',param).then(response=>{
if(response.code == 200){
this.alertRules=response.data.list;
}else{
console.error(response.msg)
this.$message.error(response.msg)
}
})
}
},
mounted() {
},
watch:{
parameters:{
immediate:true,
deep:true,
handler(n,o){
console.log(n)
}
}
}
}
</script>
<style scoped>
.alert-chart-param-form .form-item{
width: 100%;
}
</style>
<style>
.alert-form-pop{
z-index:3000 !important;
}
</style>

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

@@ -73,7 +73,7 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
<el-form class="right-box-form" :model="chart" :rules="rules" ref="chartForm">
<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
<el-autocomplete
:fetch-suggestions="panelSuggestion"
@@ -120,7 +120,7 @@
<el-col :span="10" >
<div class="grid-content ">
<el-form-item prop="type">
<el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
<el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="chart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -128,10 +128,10 @@
</el-form-item>
</div>
</el-col>
<el-col v-show="!isUrl" :span="2" >
<el-col v-show="!isUrl&&!isAlert" :span="2" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
</el-col>
<el-col v-show="!isUrl" :span="10">
<el-col v-show="!isUrl&&!isAlert" :span="10">
<el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"
:options="unitOptions"
:props="{ expandTrigger: 'hover',emitPath:false }"
@@ -195,10 +195,15 @@
<el-input size="small" type="input" v-model="chart.param.threshold"></el-input>
</el-form-item>
<div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div v-if="!isUrl&&!isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div v-if="isAlert" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
<div v-if="!isUrl" class="line-100"></div>
<el-row v-if="!isUrl && !isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<el-row v-if="isAlert" class="element-item">
<alert-chart-param ref="alertParamBox" @on-enter-complate="getAlertParam"></alert-chart-param>
</el-row>
<el-row v-if="!isUrl && !isSingleStat&&!isAlert" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
@@ -241,7 +246,7 @@
</el-row>
</el-form-item>
-->
<button v-if="!isUrl && !isSingleStat" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<button v-if="!isUrl && !isSingleStat&& !isAlert" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button>
</el-form>
@@ -271,6 +276,7 @@
import ChartMetric from "./chartMetric";
import chartDataFormat from '../../charts/chartDataFormat';
import chartPreview from '../../charts/chartPreview';
import alertChartParam from "./alertChartParam";
export default {
name: "chartBox",
props: {
@@ -306,6 +312,7 @@
},
isUrl:false,
isSingleStat:false,
isAlert:false,
rules: {
title: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -338,10 +345,15 @@
{
id:'singleStat',
name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
},
{
id:'alertList',
name:this.$t("dashboard.panel.chartForm.typeVal.alertList.label")
}
],
elements: [1], // 指标部分 tarNum
elementTarget: [], // 本地保存数据
alertParams:{},
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
// 是否为编辑已有信息
isedit: false,
@@ -366,6 +378,7 @@
components:{
'chart-metric':ChartMetric,
'chart-preview':chartPreview,
'alert-chart-param':alertChartParam
},
mounted() {
@@ -718,13 +731,45 @@
});
}
},
getAlertParam:function(param,opType){
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
param:param,
sync: this.chart.sync
};
if (valid) {
if(opType==='preview') {
if (this.isedit) {
params.id = this.chart.id;
}
this.$refs.chartsPreview.show(params);
}else{
if (this.isedit) {
params.id = this.chart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
}
}
}
})
},
confirmAdd() {
this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){
if(this.chart.type == 'alertList'){
this.$refs.alertParamBox.saveParam();
}else{
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
item.saveTarget(index);
});
}
}else {
this.$refs.chartForm.validate((valid) => {
const params = {
@@ -735,7 +780,8 @@
unit:this.chart.unit,
param:{
url:this.chart.param.url,
}
},
sync: this.chart.sync
};
if (valid) {
@@ -843,14 +889,22 @@
setIsUrl(){
this.isUrl = true;
this.isSingleStat = false;
this.isAlert=false;
},
setIsSingleStat(){
this.isUrl = false;
this.isSingleStat = true;
this.isAlert=false;
},
setIsAlertList(){
this.isAlert=true;
this.isUrl = false;
this.isSingleStat = false;
},
setIsOtherChart(){
this.isSingleStat = false;
this.isUrl = false;
this.isAlert=false;
},
// 编辑chart时使用, set_tdata
editData(data, panelId) {
@@ -888,6 +942,10 @@
item.setMdata(data.elements[index],data.param.statistics);
});
});
}else if(this.chart.type==='alertLine'){
this.chart.param=data.param;
this.setIsAlertList();
this.elements=[1];
}else{
if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
this.chart.param.threshold=data.param.threshold;
@@ -901,11 +959,18 @@
this.elements.push(index);
});
this.$nextTick(() => {
if(this.chart.type==='alertList'){
this.setIsAlertList();
this.$nextTick(()=>{
this.$refs.alertParamBox.setData(data);
})
}else{
const cSet = this.$refs.chartTag;
// 派发charttag数据
cSet.forEach((item, index) => {
item.setMdata(data.elements[index]);
});
}
});
}
},
@@ -967,6 +1032,8 @@
item.setSingleStat();
});
}*/
}else if(chartType === 'alertList'){
this.setIsAlertList();
}else {
this.setIsOtherChart();
if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
@@ -999,11 +1066,16 @@
preview(){
//验证图表数据是否合法？？，合法了再显示预览窗口
this.elementTarget = []; // 初始化清空参数
this.alertParams={};
if(this.chart.type!=='url'){
if(this.chart.type == 'alertList'){
this.$refs.alertParamBox.saveParam('preview');
}else{
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
item.saveTarget(index,'preview');
});
}
}else {
this.$refs.chartForm.validate((valid) => {
const params = {

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

@@ -481,7 +481,7 @@
});
},
getTableData: function (clearShowPanel) {
this.$get('panel').then(response => {
this.$get('panel?pageSize=-1').then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
let isInitData = false;