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

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

@@ -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 class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']"  :sortable="'custom'"></el-table-column>
+                    :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
-              <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'">
+                    @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 style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
-            <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']"  :sortable="'custom'"></el-table-column>
+                    tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
-            <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-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());

nezha-fronted/src/components/charts/chartPreview.vue

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

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

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

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -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);
+          }
+        })
+      }
     },
   }
 

nezha-fronted/src/components/common/alert/alertMessageTable.vue

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

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

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

nezha-fronted/src/components/page/asset/asset.vue

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

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

@@ -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>
+        <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'">
+        <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'})