NEZ-315 feat: alert-rule statistics

nezha-fronted/src/components/charts/chart-alert-rule-info.vue

@@ -28,12 +28,72 @@
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="asset-info-content" >
             <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
               <div style="padding: 0 15px">
-                <div class="basic-container">
+                <div v-if="detail.project && detail.project.length > 0" class="basic-container">
-                  <div class="basic-title asset-info-content-title">
+                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('project')">
-                    <span>&nbsp;{{$t('asset.createAssetTab.basicTitle')}}</span>
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('project') == -1,'el-icon-caret-bottom': unfold.indexOf('project') > -1}"></i></span>
+                    <span>&nbsp;{{$t('project.project.project')}}</span>
                   </div>
-                  <div class="basic-content basic-content-asset" :class="{'fold':hideBasic, 'unfold':!hideBasic}">
+                  <div class="basic-content basic-content-asset unfold" ref="project">
-                    <div v-for="(item, index) in detail" class="content-item hover-bg">
+                    <div v-for="(item, index) in detail.project" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'project' + index">
+                        <span>{{item.name}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('project', item.name, index, ready)">{{item.name}}</div>
+                      </div><div class="content-item-value">
+                        <span>{{item.nums}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="detail.module && detail.module.length > 0" class="basic-container">
+                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('module')">
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('module') == -1,'el-icon-caret-bottom': unfold.indexOf('module') > -1}"></i></span>
+                    <span>&nbsp;{{$t('project.module.module')}}</span>
+                  </div>
+                  <div class="basic-content basic-content-asset" ref="module">
+                    <div v-for="(item, index) in detail.module" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'module' + index">
+                        <span>{{item.name}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('module', item.name, index, ready)">{{item.name}}</div>
+                      </div><div class="content-item-value">
+                        <span>{{item.nums}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="detail.asset && detail.asset.length > 0" class="basic-container">
+                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('asset')">
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('asset') == -1,'el-icon-caret-bottom': unfold.indexOf('asset') > -1}"></i></span>
+                    <span>&nbsp;{{$t('asset.asset')}}</span>
+                  </div>
+                  <div class="basic-content basic-content-asset" ref="asset">
+                    <div v-for="(item, index) in detail.asset" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'asset' + index">
+                        <span>{{item.name}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('asset', item.name, index, ready)">{{item.name}}</div>
+                      </div><div class="content-item-value">
+                        <span>{{item.nums}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="detail.endpoint && detail.endpoint.length > 0" class="basic-container">
+                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('endpoint')">
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('endpoint') == -1,'el-icon-caret-bottom': unfold.indexOf('endpoint') > -1}"></i></span>
+                    <span>&nbsp;{{$t('project.endpoint.endpoint')}}</span>
+                  </div>
+                  <div class="basic-content basic-content-asset" ref="endpoint">
+                    <div v-for="(item, index) in detail.endpoint" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'endpoint' + index">
+                        <span>{{item.name}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('endpoint', item.name, index, ready)">{{item.name}}</div>
+                      </div><div class="content-item-value">
+                        <span>{{item.nums}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                    <!--<div v-for="(item, index) in detail" class="content-item hover-bg">
                       <div class="content-item-key item-tip" :id="'basicKey' + index">
                         <span>{{item.label}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
@@ -41,9 +101,7 @@
                         <span>{{item.value ? item.value : "&nbsp;"}}</span>
                         <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
                       </div>
-                    </div>
+                    </div>-->
-                  </div>
-                </div>
               </div>
             </el-scrollbar>
           </div>
@@ -81,13 +139,13 @@
         type: Number,
         default: 0,
       },
-      detail: Array
     },
     data() {
       return {
         ready: false,
         data: {}, // 该图表信息,chartItem
         unit:{},
+        detail: {},
         isError:false,
         errorContent:'',
         loading:Object,
@@ -100,8 +158,7 @@
           end_time: '',
           from: ''
         },
-        hideBasic:false,
+        unfold: ["project"], //展开的列表 project、module、asset、endpoint
-        hideFeature:false,
         firstShow: false, // 默认不显示操作按钮,
         caretShow:false,
         dragTitleShow:false,
@@ -153,10 +210,20 @@
         return labels;
       },
       hideElement:function(type){
-        if(type ==  'basic'){
+        let dom = this.$refs[type];
-          this.hideBasic=!this.hideBasic;
+        if (this.unfold.indexOf(type) > -1) {
-        }else{
+          this.unfold.splice(this.unfold.indexOf(type), 1);
-          this.hideFeature=!this.hideFeature
+        } else {
+          this.unfold.push(type);
+        }
+        if (dom.classList.contains("unfold")) {
+          dom.classList.remove("unfold");
+          dom.classList.add("fold");
+        } else if (dom.classList.contains("fold")) {
+          dom.classList.remove("fold");
+          dom.classList.add("unfold");
+        } else if (!dom.classList.contains("unfold") && !dom.classList.contains("fold")) {
+          dom.classList.add("unfold");
         }
         setTimeout(()=>{
           this.$refs.scrollbar.update();
@@ -209,17 +276,18 @@
       },
 
       // 设置数据, filter区分
-      setData(chartItem) {
+      setData(chartItem, data) {
         this.resize(chartItem);
         this.divFirstShow = true;
 
         this.firstShow = true; // 展示操作按键
 
         this.data = chartItem;
+        this.detail = data;
 
         this.$nextTick(()=>{
           this.$refs.scrollbar.update();
-        })
+        });
         this.endLoading();
       },
     },

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

@@ -542,7 +542,47 @@
         const param = {
           panelId: params.panelId,
           query: params.query,
+          from: params.from
         };
+        //alert-rule单独处理
+        if (param.from == "alertRule") {
+          this.dataList = [];
+          this.dataList.push({
+            id: -10,
+            panelId: 0,
+            title: this.$t("dashboard.panel.chartForm.statistics"),
+            span: 4,
+            height: 350,
+            type: "alertRuleInfo",
+            prev: 0,
+            next: -9,
+            buildIn: 1
+          });
+          this.dataList.push({
+            id: -9,
+            panelId: 0,
+            title: this.$t("alert.config.chart.alertNumTrend"),
+            span: 4,
+            height: 350,
+            type: "line",
+            prev: -10,
+            next: -1,
+            buildIn: 1,
+            elements: [{
+              id: '',
+              expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`,
+              type: ''
+            }]
+          });
+          this.$nextTick(() => {
+            this.dataList.forEach((item,index) => {
+              this.setChartSize(item, index);//设置该图表宽度
+              let chartBox = document.getElementById('chart-' + item.id);
+              this.handleElementInViewport(chartBox, 0, item, index);
+            });
+          });
+          return;
+        }
         if (!param.query) delete param.query;
         //根据panelId获得panel下的所有图表
         this.$get('panel/'+ params.panelId+'/charts').then(response => {
@@ -680,6 +720,11 @@
           this.getAlertListChartData(chartItem,filterType);
           return;
         }
+        if(chartItem.type === 'alertRuleInfo'){
+          this.getAlertRuleChartData(chartItem);
+          return;
+        }
+
         if (this.isModel) {
           this.modelStaticData(chartInfo, filterType);
         } else {
@@ -1251,6 +1296,14 @@
       getAlertListChartData:function(chartInfo,filterType){
         this.$refs['editChart'+chartInfo.id][0].getAlertList(filterType);
       },
+      getAlertRuleChartData(chartInfo) {
+        this.$get("alert/rule/stat?id=" + this.additionalInfo.id).then(response => {
+          if (response.code === 200) {
+            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data);
+          }
+        });
+      },
+
       // 设置图表的尺寸
       setChartSize(item, index) {
         this.$nextTick(() => {

nezha-fronted/src/components/charts/chart-project-info.vue

@@ -248,6 +248,11 @@
           this.hideBasic = !this.hideBasic;
         }else{
           let dom = this.$refs['module' + type][0];
+          if (this.showModuleIds.indexOf(type) > -1) {
+            this.showModuleIds.splice(this.showModuleIds.indexOf(type), 1);
+          } else {
+            this.showModuleIds.push(type);
+          }
           if (dom.classList.contains("unfold")) {
             dom.classList.remove("unfold");
             dom.classList.add("fold");

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -22,27 +22,6 @@
             <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
           </el-input>
         </div>
-        <!--<div class="panel-calendar margin-r-20" v-if="from == 'asset'">
-          <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange" style="height: 26px; margin-top: -1px;"></time-picker>
-        </div>
-        <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20" style="height: 24px;" v-if="from == 'asset'">
-          <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
-            <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-          </button><el-popover
-            v-model="visible" placement="bottom-start" width="200" trigger="click">
-            <ul class="popover_ul">
-              <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                  @click="selectInterval(i.value)">
-                {{i.name}}
-              </li>
-            </ul>
-            <button type="button" style="border-radius: 0 4px 4px 0"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-              <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
-            </button>
-          </el-popover>
-        </div>-->
         <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'"></pick-time>
         <button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
@@ -65,30 +44,6 @@
           </el-input>
         </div>
 
-        <!--<div class="panel-calendar margin-r-20">
-          <div class="block">
-            <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-          </div>
-        </div>
-
-        <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
-          <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
-            <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-          </button><el-popover
-          v-model="visible" placement="bottom-start" width="200" trigger="click">
-          <ul class="popover_ul">
-            <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                @click="selectInterval(i.value)">
-              {{i.name}}
-            </li>
-          </ul>
-          <button type="button" style="border-radius: 0 4px 4px 0"
-                  class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-            <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
-          </button>
-        </el-popover>
-        </div>-->
         <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
         <button @click="toAddChart" :title="$t('overall.createChart')"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">