From 0fb427fc0011cab92edb437b141b72c08d2a8ee7 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 10 Aug 2021 09:30:12 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20endpoint=20table=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/project/L5/services/canvas.js      |   4 +-
 .../common/project/popData/endpointTable.vue  |  13 +-
 .../common/rightBox/batchAddEndpoint.vue      |  38 ++--
 .../common/table/settings/endpointTable.vue   | 166 ++++++++++++++----
 4 files changed, 171 insertions(+), 50 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 7e41150df..c7559fd29 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -596,8 +596,8 @@ export function changeImage (dataImg, callback) {
         // rgb大于250的透明度y均设置成0
         if (
           imageData.data[i] > 0 &&
-                                imageData.data[i + 1] > 0 &&
-                                imageData.data[i + 2] > 0
+          imageData.data[i + 1] > 0 &&
+          imageData.data[i + 2] > 0
         ) {
           imageData.data[i + 3] = 200
         }
diff --git a/nezha-fronted/src/components/common/project/popData/endpointTable.vue b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
index a97d435ca..167b60aa1 100644
--- a/nezha-fronted/src/components/common/project/popData/endpointTable.vue
+++ b/nezha-fronted/src/components/common/project/popData/endpointTable.vue
@@ -13,6 +13,7 @@
       >
         <template  v-slot:default="slotProps">
           <endpoint-table
+            style="height: calc(100% - 200px)"
             ref="dataTable"
             v-loading="tools.loading"
             :api="url"
@@ -85,28 +86,26 @@ export default {
         pageSize: this.$CONSTANTS.defaultPageSize,
         total: 0
       },
-      mainTableHeight: '100%',
+      mainTableHeight: 'calc(100% - 70px)',
       tableTitle: [
         {
           label: this.$t('project.endpoint.endpointId'),
           prop: 'id',
           show: true,
-          width: 150
+          width: 100
         }, {
           label: this.$t('project.endpoint.asset'),
           prop: 'asset',
-          show: true
+          show: true,
+          width: 150
         }, {
           label: this.$t('project.endpoint.port'),
           prop: 'port',
           show: true
-        }, {
-          label: this.$t('project.endpoint.path'),
-          prop: 'path',
-          show: true
         }, {
           label: this.$t('alert.list.state'),
           prop: 'state',
+          width: 200,
           show: true
         }
       ],
diff --git a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
index 9a21b27af..2833bdb19 100644
--- a/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
+++ b/nezha-fronted/src/components/common/rightBox/batchAddEndpoint.vue
@@ -91,16 +91,22 @@
                 {{scope.row.module?scope.row.module.name : '' }}
               </template>
               <template v-else-if="item.prop == 'configs'">
-                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">
-                  <span class="configs-endpoint metrics">{ Metrics }</span>
+<!--                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'">-->
+<!--                  <span class="configs-endpoint metrics">{ Metrics }</span>-->
+<!--                  <div class="endpointConfigsTips" slot="content">-->
+<!--                    <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
+<!--                  </div>-->
+<!--                </el-tooltip>-->
+<!--                <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">-->
+<!--                  <span class="configs-endpoint logs">{ Logs }</span>-->
+<!--                  <div class="endpointConfigsTips" slot="content">-->
+<!--                    <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
+<!--                  </div>-->
+<!--                </el-tooltip>-->
+                <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
+                  <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
                   <div class="endpointConfigsTips" slot="content">
-                    <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>
-                  </div>
-                </el-tooltip>
-                <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'">
-                  <span class="configs-endpoint logs">{ Logs }</span>
-                  <div class="endpointConfigsTips" slot="content">
-                    <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>
+                    <pre >{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
                   </div>
                 </el-tooltip>
               </template>
@@ -274,7 +280,8 @@ export default {
         {
           label: this.$t('project.endpoint.configs'),
           prop: 'configs',
-          show: true
+          show: true,
+          width: 150
         }
       ]
     }
@@ -441,7 +448,16 @@ export default {
       //   this.object.chartIds = ''
       // }
       this.rightBox.show = true
-      this.rightBox.show = true
+    },
+    clConfigs (item) {
+      const str = []
+      if (item.configs[0].enable) {
+        str.push(item.configs[0])
+      }
+      if (item.configs[1].enable) {
+        str.push(item.configs[1])
+      }
+      return str
     }
   },
   created () {
diff --git a/nezha-fronted/src/components/common/table/settings/endpointTable.vue b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
index a3588cfbd..ec77a4b00 100644
--- a/nezha-fronted/src/components/common/table/settings/endpointTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/endpointTable.vue
@@ -42,11 +42,35 @@
           {{scope.row.module.type}}
         </template>
         <template v-else-if="item.prop === 'project'">
-          {{scope.row[item.prop].name}}
+          <span
+            class="pointer"
+            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false)"
+          >
+            {{scope.row[item.prop].name}}
+          </span>
+          <alertLabel
+            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
+            :id="scope.row[item.prop].id"
+            :that="scope.row[item.prop]"
+            :type="'project'"
+          ></alertLabel>
         </template>
         <template v-else-if="item.prop === 'module'">
-          <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
+          <span
+            class="pointer"
+            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false)"
+          >
+            <i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
           {{scope.row[item.prop].name}}
+          </span>
+          <alertLabel
+            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
+            :id="scope.row[item.prop].id"
+            :that="scope.row[item.prop]"
+            :type="'module'"
+          ></alertLabel>
         </template>
         <template v-else-if="item.prop === 'alerts'">
           <span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
@@ -55,43 +79,74 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'asset'">
-          <span >
+          <span
+            class="pointer"
+            @mouseenter="labelHover(scope.row, item.prop, true, $event)"
+            @mouseleave="labelHover(scope.row, item.prop, false)"
+          >
+            <i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
             {{scope.row.asset.name}}
           </span>
+          <alertLabel
+            v-if="scope.row[item.prop] && scope.row[item.prop].loading"
+            :id="scope.row[item.prop].id"
+            :that="scope.row[item.prop]"
+            :type="'asset'"
+          ></alertLabel>
         </template>
         <template v-else-if="item.prop === 'configs'">
-          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">
-            <span class="configs-endpoint metrics">{ Metrics }</span>
+<!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
+<!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
+<!--            <div class="endpointConfigsTips" slot="content">-->
+<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>-->
+<!--              <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
+<!--            </div>-->
+<!--          </el-tooltip>-->
+<!--          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[1].enable">-->
+<!--            <span class="configs-endpoint logs">{ Logs }</span>-->
+<!--            <div class="endpointConfigsTips" slot="content">-->
+<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>-->
+<!--              <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
+<!--            </div>-->
+<!--          </el-tooltip>-->
+
+          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
+            <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
             <div class="endpointConfigsTips" slot="content">
-              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>
-              <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>
-            </div>
-          </el-tooltip>
-          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[1].enable">
-            <span class="configs-endpoint logs">{ Logs }</span>
-            <div class="endpointConfigsTips" slot="content">
-              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>
-              <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>
+              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
+              <pre >{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
             </div>
           </el-tooltip>
         </template>
         <template v-else-if="item.prop === 'state'">
-          <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">
-            <div>
-              <div v-html="suspendedStr(scope.row[item.prop])"></div>
+<!--          <el-popover placement="right" trigger="hover" width="200" :popper-class="''" :disabled="scope.row[item.prop]<2">-->
+<!--            <div>-->
+<!--              <div v-html="suspendedStr(scope.row[item.prop])"></div>-->
+<!--            </div>-->
+<!--            <div slot="reference" style="width: 100px">-->
+<!--              <div v-if="scope.row[item.prop]===0">-->
+<!--                <div class="active-icon red-bg inline-block"></div> down-->
+<!--              </div>-->
+<!--              <div v-else-if="scope.row[item.prop]===1">-->
+<!--                <div class="active-icon green-bg inline-block"></div> up-->
+<!--              </div>-->
+<!--              <div v-else-if="scope.row[item.prop]">-->
+<!--                <div class="active-icon gray-bg inline-block"></div> suspended-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </el-popover>-->
+          <div>
+            <div class="state-box">
+              <div class="state-box-content" ><span class="state-content-text">Metrics  </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Logs     </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Dc       </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Endpoint </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Asset    </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Asset    </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Asset    </span><div class="active-icon red-bg inline-block" style="margin-right: 5px"></div></div>
+              <div class="state-box-content" ><span class="state-content-text">Asset    </span><div class="active-icon red-bg inline-block" style="margin-right: 0px"></div></div>
             </div>
-            <div slot="reference" style="width: 100px">
-              <div v-if="scope.row[item.prop]===0">
-                <div class="active-icon red-bg inline-block"></div> down
-              </div>
-              <div v-else-if="scope.row[item.prop]===1">
-                <div class="active-icon green-bg inline-block"></div> up
-              </div>
-              <div v-else-if="scope.row[item.prop]">
-                <div class="active-icon gray-bg inline-block"></div> suspended
-              </div>
-            </div>
-          </el-popover>
+          </div>
         </template>
         <template v-else-if="item.prop === 'enabled'">
           <span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
@@ -127,8 +182,12 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import alertLabel from '../../alert/alertLabel'
 export default {
   name: 'endpointTable',
+  components: {
+    alertLabel
+  },
   mixins: [table],
   props: {
     showOption: {
@@ -198,7 +257,14 @@ export default {
     }
   },
   methods: {
-    copyValue (str) {
+    copyValue (item) {
+      const str = []
+      if (item.configs[0].enabled) {
+        str.push(item.configs[0])
+      }
+      if (item.configs[1].enabled) {
+        str.push(item.configs[1])
+      }
       const domUrl = document.createElement('input')
       domUrl.value = JSON.stringify(str)
       domUrl.id = 'creatDom'
@@ -232,6 +298,26 @@ export default {
         // }
       })
       return str
+    },
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item[type], 'position', position)
+      }
+      this.$set(item[type], 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    clConfigs (item) {
+      const str = []
+      if (item.configs[0].enable) {
+        str.push(item.configs[0])
+      }
+      if (item.configs[1].enable) {
+        str.push(item.configs[1])
+      }
+      return str
     }
   },
   computed: {}
@@ -274,6 +360,26 @@ export default {
   .inline-block{
     display: inline-block;
   }
+  .pointer{
+    cursor: pointer;
+  }
+  .state-box{
+    display: flex;
+    flex-wrap: wrap;
+    border: 1px solid #E7EAED;
+    border-bottom: none;
+  }
+  .state-box-content{
+    padding: 0 5px;
+    width: 50%;
+    border-bottom: 1px solid #E7EAED;
+  }
+  .state-box-content:nth-of-type(odd){
+    border-right: 1px solid #E7EAED;
+  }
+  .state-content-text{
+    width:64px;text-align:left;margin-right: 5px;display: inline-block
+  }
 </style>
 <style>
   .endpointConfigsTips{