From 49d9782e150bf8e2005e780bcdaf069252e1587f Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 25 Sep 2020 15:33:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:endpoint=E5=A2=9E=E5=8A=A0Alerts=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/bottomBox/bottomBox.vue |  2 +-
 .../common/bottomBox/tabs/alertMessageTab.vue | 11 +++-
 .../bottomBox/tabs/endpointQueryTab.vue       |  5 +-
 .../common/bottomBox/tabs/panelTab.vue        |  1 +
 .../src/components/common/language/cn.js      |  5 +-
 .../src/components/common/language/en.js      |  4 +-
 .../src/components/page/project/project.vue   | 50 ++++++++++++++++---
 7 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 3c906fae5..8bfc3e8da 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -20,7 +20,7 @@
         <!--机柜-->
       <cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
         <!--告警信息-->
-      <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
+      <alert-message-tab v-show="subResizeShow" v-if="((from == 'alertRule' || from == 'asset' || from == 'endpoint') && targetTab == 'alertMessage')" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
         <!--asset页的endpoint列表-->
       <endpoint-tab v-show="subResizeShow" v-if="from == 'asset' && targetTab == 'endpoint'" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
         <!--endpoint-query-->
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 9bf3783d0..91168f5f9 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -5,10 +5,12 @@
         <div class="sub-list-tab-title">
           <template v-if="from == 'asset'">{{obj.host}}</template>
           <template v-if="from == 'alertRule'">{{obj.alertName}}</template>
+          <template v-if="from == 'endpoint'"><div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{obj ? obj.id : ''}}</div></template>
         </div><div
-        class="sub-list-tab" @click="changeTab(from == 'asset' || from == 'alertRule' ? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
+        class="sub-list-tab" @click="changeTab(from == 'asset' || from == 'alertRule' || from == 'endpoint'? 'panel' : 'detail')">{{$t("overall.detail")}}</div><div
         class="sub-list-tab sub-list-tab-active">{{$t("asset.tableTitle.alerts")}}</div><div v-if="from == 'asset'"
         class="sub-list-tab" @click="changeTab('endpoint')">{{$t("asset.tableTitle.modules")}}</div>
+        <div v-if="from == 'endpoint'" class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search">
@@ -550,6 +552,8 @@
           this.searchLabel.ruleId = this.obj.id;
         } else if (this.from == "asset") {
           this.searchLabel.assetId = this.obj.id;
+        }else if(this.from == 'endpoint'){
+          this.searchLabel.endpointId=this.obj.id;
         }
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
@@ -590,6 +594,11 @@
               return item.label != "alertType" && item.label != "asset"
             });
             this.searchLabel.assetId = n.id;
+          } else if(this.from == 'endpoint'){
+            this.searchMsg.searchLabelList = this.searchMsg.searchLabelList.filter((item, index) => {
+              return item.label != "alertType" && item.label != "endpoint"
+            });
+            this.searchLabel.endpointId = n.id;
           }
           if (n.alertNum) {
             this.defaultSearchValue = 1;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index c4af6047d..0fcc9ee09 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -15,8 +15,9 @@
     <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('panel')">{{$t("overall.detail")}}</div><div
-        class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
+        class="sub-list-tab" @click="changeTab('panel')">{{$t("overall.detail")}}</div>
+        <div class="sub-list-tab" @click="changeTab('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div>
+        <div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
       </div>
       <div class="top-tool-right">
         <div class="top-tool-search margin-r-20">
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
index f9edc9b0d..f2d43e4d7 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
@@ -17,6 +17,7 @@
           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('alertMessage')">{{$t("asset.tableTitle.alerts")}}</div><div
           class="sub-list-tab" @click="changeTab('endpointQuery')">{{$t("overall.query")}}</div>
         </template>
       </div>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 3ba228241..ea968aaf7 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -841,8 +841,9 @@ const cn = {
       dialogTitle: "历史值",
       hideSameLabels: "隐藏重复标签",
       stateInfo_230009: "无法获取prometheus服务",
-      stateInfo_230010: "prometheus服务可用",
-      stateInfo_230011: "prometheus服务不可用 "
+      stateInfo_230010: "Prometheus服务可用",
+      stateInfo_230011: "Endpoint 连接错误",
+      alerts:"告警",
     },
     metrics: {
       metrics: "指标",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 5536e04d0..50d8a641c 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -849,8 +849,8 @@ const en = {
       hideSameLabels:'Hide same labels',
       stateInfo_230009:'Promserver unavailable',
       stateInfo_230010:'Promserver can be used',
-      stateInfo_230011:'Promserver can not be used',
-
+      stateInfo_230011:'Endpoint connection refused',
+      alerts:'Alerts'
     },
     metrics: {
       metrics: 'Metrics',//"指标"
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index a23ce6427..bb4d1b3b4 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -61,6 +61,7 @@
           v-scrollBar:el-table="'large'"
           v-show="bottomBox.mainResizeShow"
           ref="endpointTable"
+          :cell-class-name="messageStyle"
           v-loading="tools.loading"
           style="width: 100%;"
           @sort-change="tableDataSort"
@@ -86,6 +87,15 @@
               </template>
               <template v-else>-</template>
             </span>
+              <template v-else-if="item.prop=='alerts'">
+                <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
+                  <span :id="'endpoint-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
+                    {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
+                      <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
+                    {{' ' + $t('overall.active')}}
+                  </span>
+                </el-tooltip>
+              </template>
               <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.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -131,9 +141,19 @@
     </template>
 
     <transition name="el-zoom-in-bottom">
-      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
-                  :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
-                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+      <bottom-box v-if="bottomBox.showSubList"
+                  :sub-resize-show="bottomBox.subResizeShow"
+                  :is-full-screen="bottomBox.isFullScreen"
+                  :from="'endpoint'"
+                  :target-tab.sync="bottomBox.targetTab"
+                  :detail="bottomBox.endpointDetail"
+                  :obj="endpoint"
+                  :detail-list="bottomBox.alertList"
+                  :asset-detail="bottomBox.assetDetail"
+                  @closeSubList="bottomBox.showSubList = false"
+                  @fullScreen="fullScreen"
+                  @exitFullScreen="exitFullScreen"
+                  @listResize="listResize" ></bottom-box>
     </transition>
     <transition name="right-box">
       <add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
@@ -168,7 +188,7 @@
         /*二级页面相关*/
         bottomBox: {
           endpoint: {}, //asset详情
-          endpointDetail: [],
+          endpointDetail: null,
           mainResizeShow: true, //dom高度改变时部分内容是否展示
           subResizeShow: true,
           isFullScreen: false, //是否是全屏，用来控制拖动条是否展示,
@@ -212,6 +232,10 @@
             label: this.$t("project.endpoint.port"),
             prop: 'port',
             show: true,
+          },{
+            label: this.$t("project.endpoint.alerts"),
+            prop: 'alerts',
+            show: true,
           },{
             label: this.$t("overall.type"),
             prop: 'type',
@@ -387,7 +411,6 @@
         this.bottomBox.showSubList = false;
         this.currentProject = project;
       },
-
       //弹出endpoint编辑页
       editEndpoint(endpoint) {
         this.endpoint = JSON.parse(JSON.stringify(endpoint));
@@ -412,6 +435,11 @@
         this.bottomBox.targetTab = "panel";
         this.bottomBox.showSubList = true;
       },
+      jumpToAlertMsg(endpoint) {
+        this.endpoint = Object.assign({}, endpoint);
+        this.bottomBox.targetTab = 'alertMessage';
+        this.bottomBox.showSubList = true;
+      },
       addModule() {
         this.module = this.newModule();
         this.rightBox.module.show = true;
@@ -585,7 +613,17 @@
         bus.$on("endpoint-list-change", menu => {
           this.getEndpointTableData();
         });
-      }
+      },
+      messageStyle(e) {
+        if (e.column.label == 'Alerts' || e.column.label == this.$t("asset.tableTitle.alerts")) {
+          if (e.row.alertNum > 0) {
+            return 'danger';
+          } else {
+            return 'success';
+          }
+        }
+        return '';
+      },
     },
     created() {
       this.currentProject = this.$store.state.currentProject;