NEZ-309 feat:alert rule相关页面增加 operator，threshold，unit字段 & singlestat chart添加no data & asset model 同步添加确认提示框

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

@@ -110,7 +110,7 @@
                 <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>
+                    <span slot="reference">{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
                     <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
                   </el-popover>
                 </div>
@@ -262,10 +262,10 @@
           <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>
+              <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
             </div>
           </div>
-          <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
+          <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
         </el-dialog>
         <element-set
           path="/alertList"
@@ -502,11 +502,20 @@ export default {
             return "";
           }
         },
+      formatThreshold:function(value,unit){
+        let unitMethod=chartDataFormat.getUnit(unit)
+        if(unitMethod&&unit.compute){
+          return unitMethod.compute(value,null,2);
+        }else{
+          return value
+        }
+      },
       detail(obj) {
         this.chartDatas = [];
         this.legend = [];
         this.graphShow = true;
         this.currentMsg = obj;
+        this.chartUnit=obj.alertRule.unit?obj.alertRule.unit:5;
         this.$nextTick(() => {
           this.queryChartDate();
         });

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -43,6 +43,7 @@
         <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="single-stat-content" >
             {{serieSingleStat}}
+            <div class="chart-no-data" v-show="noData">No data</div>
           </div>
         </div>
         <!--全屏-->
@@ -58,6 +59,7 @@
           <div class="single-stat-screen-container"  >
             <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
               {{serieSingleStat}}
+              <div class="chart-no-data" v-show="noData">No data</div>
             </div>
           </div>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -99,6 +101,7 @@ export default {
   data() {
     return {
       data: {}, // 该图表信息,chartItem
+      noData:false,
       unit:{},
       isError:false,
       errorContent:'',
@@ -389,6 +392,11 @@ export default {
           this.isError = false;
           this.errorContent = '';
         }
+        if(seriesItem){
+          this.noData=false;
+        }else{
+          this.noData=true;
+        }
         if(area==='showFullScreen'){//全屏按时间查询
           this.data = chartItem;
           this.unit = chartDataFormat.getUnit(this.data.unit);

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -550,5 +550,7 @@ export default {
     }
     return units[index-1];
   },
-  short
+  formatData:function(value,unit){
+    return this.getUnit(unit).compute(value,null,2)
+  }
 }

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

@@ -419,6 +419,11 @@
       },
       syncChart:function(){
         if(this.from=='asset'||this.from=='model'){
+          this.$confirm(this.$t("tip.syncTip"), {
+            confirmButtonText: this.$t("tip.yes"),
+            cancelButtonText: this.$t("tip.no"),
+            type: 'warning'
+          }).then(() => {
             let param={
               modelId:this.from=='model'?this.obj.id:null,
               assetId:this.from=='asset'?this.obj.id:null,
@@ -434,6 +439,7 @@
                 this.$message.error(response.msg)
               }
             })
+          })
         }
       },
     },

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

@@ -342,6 +342,7 @@ const cn = {
     pressEnterToAdd: "回车添加新行",
     resetSuccess: "重置成功",
     syncSuccess:'同步成功',
+    syncTip:"此操作可能造成原有数据或图表被覆盖，确认同步吗？"
   },
   asset: {
     asset: "资产",
@@ -769,7 +770,10 @@ const cn = {
         module: "组件",
         asset: "设备"
       },
-      alertNum: "告警数量"
+      alertNum: "告警数量",
+      operator:'比较符',
+      threshold:'阈值',
+      unit:'单位'
     }
   },
   project: {

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

@@ -357,9 +357,10 @@ const en = {
     testSuccess:'Test success',
     downloadSuccess : 'Download success',
     uploadSuccess: 'Upload success',
-    pressEnterToAdd: 'Press enter to add new line',
+    pressEnterToAdd: 'Press enter to add new此操作可能造成原有数据或图表被覆盖，确认同步吗？ line',
     resetSuccess:'Reset success',
-    syncSuccess:'Synchronize success'
+    syncSuccess:'Synchronize success',
+    syncTip:'This operation may cause the original data or chart to be overwritten. Are you sure to synchronize?',
   },
   asset:{
     asset: 'Asset',
@@ -792,7 +793,10 @@ const en = {
         project: 'Project',//'系统'
         module: 'Module',//'组件'
         asset: 'Device'//'设备'
-      }
+      },
+      operator:'Operator',
+      threshold:'Threshold',
+      unit:'Unit'
     }
   },
   project: {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="interval-refresh ">
     <time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
-    <chart-unit v-model="unit" ></chart-unit>
+    <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
       <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
         <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="refreshDataFunc">
           <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -32,6 +32,29 @@
             <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model="alertRule.expr" size="small"></el-input>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
           </el-form-item>
+          <!--operator-->
+          <el-form-item :label="$t('alert.config.operator')" prop="operator">
+            <el-select v-if="rightBox.isEdit" popper-class="config-dropdown" v-model="alertRule.operator" placeholder=""  size="small">
+              <el-option :id="'operator-'+item.key" v-for="item in operators" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}</div>
+          </el-form-item>
+          <!--threshold-->
+          <el-form-item :label="$t('alert.config.threshold')" prop="threshold">
+            <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.threshold" size="small">
+            </el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.operator}}s</div>
+          </el-form-item>
+          <!--unit-->
+          <el-form-item :label="$t('alert.config.unit')" prop="unit">
+            <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
+                         :options="unitOptions"
+                         :props="{ expandTrigger: 'click',emitPath:false }"
+                         :show-all-levels="false"
+                         v-model="alertRule.unit"
+            >
+            </el-cascader>
+          </el-form-item>
           <!--last-->
           <el-form-item :label="$t('alert.config.for')" prop="last">
             <el-input v-if="rightBox.isEdit" type="text" placeholder="" v-model.number="alertRule.last" size="small">
@@ -98,6 +121,8 @@
 </template>
 
 <script>
+  import chartDataFormat from "../../charts/chartDataFormat";
+
   export default {
     name: "alertConfigBox",
     props: {
@@ -124,6 +149,17 @@
           summary:[
             {required:true,message:this.$t('validate.required'),trigger:'blur'},
           ],
+          operator:[
+            {required:true,message:this.$t('validate.required'),trigger:'blur'},
+          ],
+          unit:[
+            {required:true,message:this.$t('validate.required'),trigger:'blur'},
+          ],
+          threshold:[
+            {required:true,message:this.$t('validate.required'),trigger:'blur'},
+            {type:'number',message:this.$t('validate.number')}
+          ],
+
           // description:[
           //   {required:true,message:this.$t('validate.required'),trigger:'blur'},
           // ],
@@ -145,6 +181,33 @@
             value: this.$t("alert.config.low")
           }
         ],
+        operators:[
+          {
+            label:'==',
+            value:'=='
+          },
+          {
+            label:'!=',
+            value:'!='
+          },
+          {
+            label:'>',
+            value:'>'
+          },
+          {
+            label:'<',
+            value:'<'
+          },
+          {
+            label:'>=',
+            value:'>='
+          },
+          {
+            label:'<=',
+            value:'<='
+          },
+        ],
+        unitOptions:chartDataFormat.unitOptions(),
         typeData: [
           {
             key: 1, //project
@@ -296,3 +359,8 @@
 <style scoped>
 
 </style>
+<style>
+  .unit-popper-class{
+    z-index: 2052 !important;
+  }
+</style>

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

@@ -66,6 +66,9 @@
               <template v-else-if="item.prop == 'alertNum'">
                 <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
               </template>
+              <template v-else-if="item.prop == 'threshold'">
+                <span  >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
+              </template>
               <template v-else-if="item.prop == 'receivers'">
                 <el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}}</el-tag>
               </template>
@@ -112,6 +115,7 @@
 <script>
   var vm;
   import bus from '../../../libs/bus';
+  import chartDataFormat from "../../charts/chartDataFormat";
   export default {
     name: "alert-config",
     data() {
@@ -173,6 +177,9 @@
           type: '',
           linkObject: {id: '', name: ''},
           linkId: '',
+          operator:'',
+          threshold:'',
+          unit:2,
           expr: '',
           last: '',
           severity: '',
@@ -240,6 +247,14 @@
             show: true,
             width: 140
           }, */{
+            label: this.$t("alert.config.operator"),
+            prop: 'operator',
+            show: true,
+          }, {
+            label: this.$t("alert.config.threshold"),
+            prop: 'threshold',
+            show: true,
+          }, {
             label: this.$t("alert.config.for"),
             prop: 'last',
             show: true,
@@ -338,6 +353,14 @@
           })
         });
       },
+      formatThreshold:function(value,unit){
+        let unitMethod=chartDataFormat.getUnit(unit)
+        if(unitMethod&&unit.compute){
+          return unitMethod.compute(value,null,2);
+        }else{
+          return value
+        }
+      },
       //asset弹框控制
       tabControl(data) {
         if (data === 'close') {

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

@@ -124,7 +124,7 @@
               <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>
+                  <span slot="reference">{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
                   <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
                 </el-popover>
               </div>
@@ -208,7 +208,7 @@
       <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>
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
         </div>
       </div>
       <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
@@ -221,6 +221,7 @@
   import axios from 'axios';
   import nzAlertTag from './nzAlertTag';
   import chart from '../../page/dashboard/overview/chart'
+  import chartDataFormat from "../../charts/chartDataFormat";
 
   var vm;
   export default {
@@ -482,6 +483,14 @@
           this.queryChartDate()
         })
       },
+      formatThreshold:function(value,unit){
+        let unitMethod=chartDataFormat.getUnit(unit)
+        if(unitMethod&&unit.compute){
+          return unitMethod.compute(value,null,2);
+        }else{
+          return value
+        }
+      },
       queryChartDate() {
         let start = this.searchTime[0]?this.searchTime[0]:this.getTime(-1, 'h');
         let end = this.searchTime[1]?this.searchTime[1]:this.getTime(0, 'h')
@@ -564,6 +573,7 @@
         this.legend = [];
         this.graphShow = true;
         this.currentMsg = obj;
+        this.chartUnit=obj.alertRule.unit?obj.alertRule.unit:5;
         this.$nextTick(() => {
           this.queryChartDate();
         });
@@ -592,6 +602,8 @@
                       return parseFloat(item).toFixed(2);
                     }
                   });
+                }else{
+                  current=['','']
                 }
                 this.$set(item, "current", current);
               });