feat:新增alertList chart 类型

nezha-fronted/src/components/charts/chart-list.vue

@@ -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(() => {

nezha-fronted/src/components/common/elementSet.vue

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

nezha-fronted/src/components/common/header.vue

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

nezha-fronted/src/components/common/language/en.js

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

nezha-fronted/src/components/page/alert/config.vue

@@ -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',

nezha-fronted/src/components/page/alert/list.vue

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

nezha-fronted/src/components/page/dashboard/alertChartParam.vue

@@ -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>

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -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 = {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -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;