NEZ-324 feat: endpoint-detail(部分)

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

@@ -0,0 +1,270 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-endpoint" ref="resizeBox">
+      <div class="chart-asset-info" :id="'chartEndpointInfoDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+        <loading :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle drag-disabled" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-popover
+            v-if="isError"
+            :close-delay=10
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div>{{errorContent}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+            <span class="chart-title-text">{{data.title}}</span>
+          </span>
+        </div>
+        <div class="mt-10 chart-info-container" v-cloak>
+          <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 v-if="noData" class="chart-no-data">No Data</div>
+                <div v-if="!noData" class="basic-container">
+                  <div class="basic-title asset-info-content-title" @click.stop="hideElement('basic')">
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('basic') == -1,'el-icon-caret-bottom': unfold.indexOf('basic') > -1}"></i></span>
+                    <span>&nbsp;{{$t('project.endpoint.endpoint')}}</span>
+                  </div>
+                  <div class="basic-content basic-content-asset unfold" ref="basic">
+                    <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>
+                      </div><div class="content-item-value item-tip" :id="'basicValue' + index">
+                        <span>{{item.value}}</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 v-if="!noData" class="feature-container">
+                  <div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
+                    <span><i :class="{'el-icon-caret-right': unfold.indexOf('feature') == -1,'el-icon-caret-bottom': unfold.indexOf('feature') > -1}"></i></span>
+                    <span>{{$t('alert.alert')}}</span>
+                  </div>
+                  <div class="feature-content feature-content-asset" ref="feature">
+                    <div v-for="(item, index) in alerts" class="content-item hover-bg">
+                      <div class="content-item-key item-tip" :id="'alert' + index">
+                        <span>{{item.label}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('alert', item.label, index, ready)">{{item.label}}</div>
+                      </div><div class="content-item-value">
+                      <span>{{item.value}}</span>
+                    </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import bus from '../../libs/bus';
+  import {Loading} from 'element-ui';
+  import chartDataFormat from './chartDataFormat'
+  import loading from "../common/loading";
+  import timePicker from '../common/timePicker'
+
+  export default {
+    name: 'chartEndpointInfo',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker
+    },
+    props: {
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      editChartId: {
+        type: String,
+        default: 'editChartId',
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      }
+    },
+    data() {
+      return {
+        ready: false,
+        data: {}, // 该图表信息,chartItem
+        unit:{},
+        detail: [],
+        alerts: [],
+        unfold: ["basic"],
+        isError:false,
+        errorContent:'',
+        assetInfos:{},
+
+        //toolbox: false,
+        loading:Object,
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        firstLoad: false, // 是否第一次加载
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+        },
+        hideBasic:false,
+        hideFeature:false,
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dragTitleShow:false,
+        dropdownMenuShow:false,
+        divFirstShow:false,
+        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+        oldSearchTime: [],
+      };
+    },
+    computed: {
+      itemTip() {
+        return function(type, content, index, ready) {
+          let className = "";
+          if (ready) {
+            let cellDom = document.querySelector(`#${type}${index}`);
+            let spanDom = document.createElement("span");
+            spanDom.style.display = "inline-block";
+            spanDom.innerText = content;
+            cellDom.appendChild(spanDom);
+            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
+              className = "item-tip-show";
+            }
+            cellDom.removeChild(spanDom);
+          }
+          return className;
+        }
+      },
+      noData() {
+        return !this.detail || this.detail.length == 0;
+      }
+    },
+    methods: {
+      setLabels:function(source){
+        let labels=[];
+        source.forEach(item=>{
+          labels=labels.concat(Object.keys(item))
+        })
+        labels=Array.from(new Set(labels));
+
+        labels=labels.map(item=>{
+          return{
+            label:this.replaceSplit(item),
+            prop:item,
+            show:true,
+          }
+        });
+
+        return labels;
+      },
+      hideElement:function(type){
+        let dom = this.$refs[type];
+        if (this.unfold.indexOf(type) > -1) {
+          this.unfold.splice(this.unfold.indexOf(type), 1);
+        } 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 && this.$refs.scrollbar.update();
+        },400);
+      },
+      replaceSplit(key){
+        if(key){
+          return key.replace(/\$_\$/g,' ')
+        }
+      },
+      startLoading(area){
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+      },
+      endLoading(area){
+        this.$refs['localLoading'+this.chartIndex].endLoading();
+      },
+      resize() {
+        let container = document.querySelector('#chartEndpointInfoDiv' + this.chartIndex + " .chart-info-container");
+        container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          this.resize();
+        });
+        this.startLoading();
+        this.divFirstShow = true;
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        this.startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
+      clearChart(){
+        this.data = {};
+      },
+
+      // 设置数据, filter区分
+      setData(chartItem, data, alerts) {
+        this.resize(chartItem);
+        this.divFirstShow = true;
+
+        this.firstShow = true; // 展示操作按键
+
+        this.data = chartItem;
+        this.detail = data;
+        this.alerts = alerts;
+        this.$nextTick(()=>{
+          this.$refs.scrollbar.update();
+        })
+        this.endLoading();
+      },
+    },
+    mounted() {
+      this.firstLoad = false;
+      this.$nextTick(()=>{
+        this.$refs.scrollbar.update();
+      })
+      setTimeout(() => {
+        this.ready = true;
+      }, 300);
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+  };
+</script>

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

@@ -108,12 +108,21 @@
                     :editChartId="'editChartId' + item.id"
         ></chart-asset-info>
 
+        <chart-endpoint-info v-if="item.type === 'endpointInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
+                    @on-drag-chart="editChartForDrag"
+                    :panel-id="filter.panelId"
+                    :chart-index="index"
+                    :chart-data="item"
+                    :detail="detail"
+                    :editChartId="'editChartId' + item.id"
+        ></chart-endpoint-info>
+
         <chart-alert-rule-info v-if="item.type === 'alertRuleInfo'" :ref="'editChart'+item.id" :key="'inner' + item.id"
                     @on-drag-chart="editChartForDrag"
                     :panel-id="filter.panelId"
                     :chart-index="index"
                     :chart-data="item"
-                    :detail="alertRuleDetail"
+                    :detail="detail"
                     :editChartId="'editChartId' + item.id"
         ></chart-alert-rule-info>
 
@@ -152,6 +161,7 @@
   import chartUrl from './chart-url';
   import chartSingleStat from './chart-single-stat';
   import chartAssetInfo from './chart-asset-info'
+  import chartEndpointInfo from './chart-endpoint-info'
   import chartAlertRuleInfo from './chart-alert-rule-info'
   import chartProjectInfo from './chart-project-info'
   import draggable from 'vuedraggable'
@@ -163,7 +173,7 @@
       isModel: {type: Boolean, default: false},
       additionalInfo:{},
       draggable: {type: Boolean, default: true},
-      alertRuleDetail: Array
+      detail: Array
     },
     components: {
       chartAlertList,
@@ -175,6 +185,7 @@
       chartSingleStat,
       chartAlertRuleInfo,
       draggable,
+      chartEndpointInfo
     },
     data() {
       return {
@@ -570,7 +581,7 @@
             buildIn: 1,
             elements: [{
               id: '',
-              expression: `nz_alert_nums{id="${this.alertRuleDetail[0].value}"}`,
+              expression: `nz_alert_nums{id="${this.detail[0].value}"}`,
               type: ''
             }]
           });
@@ -583,6 +594,51 @@
           });
           return;
         }
+        //endpoint单独处理
+        if (param.from == "endpoint") {
+          this.dataList = [];
+          this.dataList.push({
+            id: -10,
+            panelId: 0,
+            title: this.$t("project.chart.endpointInfo"),
+            span: 4,
+            height: 350,
+            type: "endpointInfo",
+            prev: 0,
+            next: -9,
+            buildIn: 1
+          });
+          this.dataList.push({
+            id: -9,
+            panelId: 0,
+            title: this.$t("asset.createAssetTab.assetInfo"),
+            span: 4,
+            height: 350,
+            type: "assetInfo",
+            prev: -10,
+            next: -8,
+            buildIn: 1
+          });
+          this.dataList.push({
+            id: -8,
+            panelId: 0,
+            title: this.$t("alert.alertList"),
+            span: 4,
+            height: 350,
+            type: "alertList",
+            prev: -9,
+            next: -1,
+            buildIn: 1
+          });
+          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 => {
@@ -712,6 +768,10 @@
           this.getAssetInfoChartData(chartItem);
           return;
         }
+        if(chartItem.type === 'endpointInfo'){
+          this.getEndpointInfoChartData(chartItem);
+          return;
+        }
         if(chartItem.type == 'projectInfo'){
           this.getProjectInfoChartData(chartItem);
           return;
@@ -1167,43 +1227,43 @@
           }
         }
       },
+      getEndpointInfoChartData(chartInfo) {
+        let req = new Promise((resolve, reject) => {
+          this.$get('/alert/message?endpointId='+this.detail.id).then(response=>{
+            if(response.code == 200){
+              console.info(response)
+              resolve(response.data);
+            } else {
+              reject(false);
+            }
+          });
+        });
+        req.then(data => {
+          let alerts = [];
+          if (data && data.list) {
+            data.list.forEach(item => {
+              let index = -1;
+              let hasLabel = alerts.some((alert, i) => {
+                if (alert.label == item.alertRule.alertName) {
+                  index = i;
+                }
+                return alert.label == item.alertRule.alertName;
+              });
+              if (hasLabel) {
+                alerts[index].value++;
+              } else {
+                alerts.push({label: item.alertRule.alertName, value: 1});
+              }
+            });
+          }
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
+        });
+      },
       getAssetInfoChartData(chartInfo){
         if(!this.isModel){
           this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
           this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
             if(response.code == 200){
-              let data={
-                Basic:{
-                  sn:'assetInfo Test',
-                  host:'192.168.40.42',
-                  host1:'192.168.40.42',
-                  host2:'192.168.40.42',
-                  host3:'192.168.40.42',
-                  host4:'192.168.40.42',
-                  host5:'192.168.40.42',
-                  host6:'192.168.40.42',
-                  host7:'192.168.40.42',
-                  host8:'192.168.40.42',
-                  host9:'192.168.40.42',
-                  host10:'192.168.40.42',
-                  pingStatus:1,
-                  pingRtt:80,
-                  cpuNum:'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, response.data, this.filter.panelId, this.filter);
             }else{
               this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);

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

@@ -39,8 +39,8 @@
       </template>
 
       <!-- model-panel/asset-detail/project-overview的panel-->
-      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
+      <panel-tab v-if="(from == 'model' || from == 'asset' || from == 'project' || from == 'alertRule' || from == 'endpoint') && targetTab == 'panel'" v-show="subResizeShow" :from="from" :obj="obj" ref="panelTab"
-                 @changeTab="changeTab" :targetTab.sync="targetTab" :alertRuleDetail="detail"></panel-tab>
+                 @changeTab="changeTab" :targetTab.sync="targetTab" :detail="detail"></panel-tab>
 
     </div>
   </span>

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

@@ -15,9 +15,8 @@
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
-        class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab('panel')">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div><div
+        class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
-        class="sub-list-tab" v-if="from == 'endpoint'" @click="changeTab('assetDetail')">{{$t("project.endpoint.asset")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search margin-r-20">

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

@@ -7,6 +7,7 @@
           <template v-if="from == 'model'">{{obj.name}}</template>
           <template v-else-if="from == 'asset'">{{obj.host}}</template>
           <template v-else-if="from == 'alertRule'">{{obj.alertName}}</template>
+          <template v-else-if="from == 'endpoint'">{{$t("project.endpoint.endpointId")}}: {{obj.id}}</template>
         </div><div class="sub-list-tab sub-list-tab-active" v-if="from == 'model'">{{$t("dashboard.panel.title")}}</div><template v-if="from == 'asset'"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
@@ -14,16 +15,19 @@
         </template><template v-if="from == 'alertRule'"><div
           class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
           class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
+        </template><template v-if="from == 'endpoint'"><div
+          class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div><div
+          class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
         </template>
       </div>
       <div class="top-tool-right">
-        <div class="top-tool-search margin-r-20" v-if="from != 'alertRule'">
+        <div class="top-tool-search margin-r-20" v-if="from != 'alertRule' && from != 'endpoint'">
           <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
             <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
           </el-input>
         </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'"
+        <button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -56,7 +60,7 @@
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable" :alertRuleDetail="alertRuleDetail"
+          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable" :detail="detail"
                       ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
         </div>
       </el-scrollbar>
@@ -79,7 +83,7 @@
       from: String,
       obj: Object,
       draggable: {type: Boolean, default: true},
-      alertRuleDetail: Array
+      detail: Array
     },
     data() {
       return {
@@ -280,7 +284,7 @@
       /*时间条件查询--end*/
       //公用操作
       getTableData(linkId) {
-        if (this.from == "alertRule") {
+        if (this.from == "alertRule" || this.from == "endpoint") {
           this.getData(this.filter);
         } else {
           this.$get('panel', {type: this.from, link: linkId}).then(response => {

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

@@ -808,7 +808,8 @@ const en = {
       basicTitle: "Basic info",
       alertStat: "Alert state",
       endpointStat: "Endpoint state",
-      projectInfo: "Project information"
+      projectInfo: "Project information",
+      endpointInfo: "Endpoint information"
     },
     project: {
       project: 'Project',//"系统"

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

@@ -25,23 +25,6 @@
       <div slot="content-left" class="slot-content">
       <el-scrollbar ref="leftScrollbar" style="height: 100%">
         <div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
-        <!--<div class="sidebar-info">
-          <div
-            v-for="item in moduleList"
-            class="sidebar-info-item"
-            :class="{'sidebar-info-item-active': item.id == currentModule.id}"
-            @click="changeModule(item)"
-            :id="'project-module-'+item.id"
-          >
-            <div class="sidebar-info-item-txt">
-              <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
-                <span slot="reference">{{item.name}}</span>
-              </el-popover>
-              <span v-else>{{item.name}}</span>
-            </div>
-            <div v-show="item.buildIn != 1" class="hid-div side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
-          </div>
-        </div>-->
         <div class="sidebar-info">
           <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
             <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
@@ -131,10 +114,10 @@
               </span>
               <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
-                &nbsp;
                 <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
                 &nbsp;
+                <span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+                &nbsp;
                 <span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
               </div>
 <!--              <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
@@ -535,7 +518,7 @@
       //查看endpoint详情
       detail(endpoint) {
         this.curEndpoint = Object.assign({}, endpoint);
-        this.targetTab = "detail";
+        this.targetTab = "panel";
         this.showSubList = true;
       },
       initSnmpParam(module) {