From dd1dadbc12b9c8664a45277ff7e05598829ea027 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 3 Dec 2021 11:48:17 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1390=20=20feat:=20endpoint=20metric=20info?=
 =?UTF-8?q?=20=E5=9B=BE=E6=A0=87=20hover=20=E6=98=BE=E7=A4=BA=20metadata?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/common.scss      |   9 ++
 .../src/assets/css/common/tableCommon.scss    |   5 +
 .../src/components/common/alert/nzTooltip.vue | 103 ------------------
 .../src/components/common/metaData.vue        |  25 +++++
 .../common/table/special/endpointQueryTab.vue |  26 +++--
 5 files changed, 53 insertions(+), 115 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/metaData.vue

diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 0d44c5092..802476418 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -342,3 +342,12 @@ td .nz-icon-gear:before{
     border-top: none;
   }
 }
+
+.el-tooltip__popper.is-dark {
+  background-color: $--background-color-empty !important;
+  color: $--color-text-regular !important;
+  border: 1px solid $--border-color-light;
+}
+.project-calendar.nz-input-group-middle {
+  border: 1px solid $--border-color-light;
+}
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 97bb2963f..9eebdf6f1 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -113,6 +113,11 @@
     width: auto;
     min-width: 36px;
   }
+  .top-tools--sub.top-tools {
+    background-color: $--background-color-empty;
+    padding: 0 70px 0 15px;
+    height: 44px;
+  }
   .top-tools--sub {
     .top-tool-left {
       height: 100%;
diff --git a/nezha-fronted/src/components/common/alert/nzTooltip.vue b/nezha-fronted/src/components/common/alert/nzTooltip.vue
index 54623b3a1..82c27f1b2 100644
--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -82,106 +82,3 @@ export default {
 }
 </script>
 
-<style scoped>
-  .alert-label {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 8px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-label__border {
-    background: #FFFFFF;
-    border: 1px solid #E7EAED;
-    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
-    border-radius: 3px 3px 3px 3px 0 0;
-  }
-  .alert-labelUp {
-    position: fixed;
-    background-color: white;
-    z-index: 3000;
-    padding: 10px;
-    border-radius: 4px;
-    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
-  }
-  .alert-label::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    /*border: 5px;*/
-    /*border-style: dashed solid dashed dashed;*/
-    /*border-color: transparent #fff transparent transparent;*/
-    position: absolute;
-    top: 20px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-labelUp::after {
-    content: '';
-    display: block;
-    width:0;
-    height:0;
-    overflow: hidden;
-    font-size: 0;
-    line-height: 0;
-    /*border: 5px;*/
-    /*border-style: dashed solid dashed dashed;*/
-    /*border-color: transparent #fff transparent transparent;*/
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    transform: translate(-100%, -50%);
-  }
-  .alert-label-info{
-    /*border: 1px solid #ebeef5;*/
-    border-bottom: none;
-    font-size: 13px;
-    line-height: 26px;
-  }
-  .alert-label-box{
-    display: flex;
-    flex-direction: row;
-    /*border-bottom: 1px solid #ebeef5;*/
-  }
-  .alert-label-title{
-    font-size: 14px;
-    color: #666666;
-    letter-spacing: 0;
-    line-height: 26px;
-    min-width: 110px;
-    padding: 0 3px 0 13px;
-  }
-  .alert-label-value{
-    word-wrap: break-word;
-    white-space: normal;
-    overflow: hidden;
-    max-width: 200px;
-    font-size: 14px;
-    color: #333333;
-    letter-spacing: 0;
-    line-height: 26px;
-  }
-  .danger{
-    background-color: #d64f40;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  .success{
-    background-color: #50d050;
-    color: white;
-    padding: 2px 5px;
-    border-radius: 4px;
-  }
-  /deep/.active-icon{
-    margin-top: 0;
-  }
-  .colorFA901C{
-    color: #fa901c;
-  }
-</style>
diff --git a/nezha-fronted/src/components/common/metaData.vue b/nezha-fronted/src/components/common/metaData.vue
new file mode 100644
index 000000000..a26fa1256
--- /dev/null
+++ b/nezha-fronted/src/components/common/metaData.vue
@@ -0,0 +1,25 @@
+<template>
+ <div>
+   <ul>
+     <li><span class="metric-tip-list">metric&nbsp;:&nbsp;</span><span>{{metricTip ? metricTip : '--'}}</span></li>
+   </ul>
+   <ul v-for="(item,index) in metaDataList" :key="index">
+     <li><span class="metric-tip-list">type&nbsp;:&nbsp;</span><span>{{item.type ? item.type : 'unknown'}}</span></li>
+     <li><span class="metric-tip-list">help&nbsp;:&nbsp;</span><span>{{item.help ? item.help : '--'}}</span></li>
+     <li><span class="metric-tip-list">unit&nbsp;:&nbsp;</span><span>{{item.unit ? item.unit : '--'}}</span></li>
+   </ul>
+ </div>
+</template>
+
+<script>
+export default {
+  name: 'metaData',
+  props: {
+    metaDataList: Array,
+    metricTip: String
+  },
+  data () {
+    return {}
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
index cbf47af4f..ad4357ca3 100644
--- a/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/table/special/endpointQueryTab.vue
@@ -24,16 +24,9 @@
         :show-overflow-tooltip="true"
         :label="$t('project.endpoint.element')">
         <template v-slot="scope">
-          <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
-            <div>
-              <ul>
-                <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
-                <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'&#45;&#45;'}}</span></li>
-                <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'&#45;&#45;'}}</span></li>
-              </ul>
-            </div>
-            <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
+          <el-popover trigger="hover" placement="right">
+            <meta-data :metaDataList="metaDataList" :metricTip="scope.row.metricTip.metric" />
+            <span slot="reference"><i @mouseover="metricMetaData(scope.row)" class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
           </el-popover>
           <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
         </template>
@@ -87,12 +80,14 @@ import axios from 'axios'
 import bus from '../../../../libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
 import { sameLabels } from '@/components/common/js/constants'
+import metaData from '@/components/common/metaData'
 
 export default {
   name: 'endpointQueryTab',
   components: {
     chartBox,
-    chart
+    chart,
+    metaData
   },
   props: {
     from: {},
@@ -153,7 +148,9 @@ export default {
         pageSize: 20,
         pageNo: 1,
         total: 0
-      }
+      },
+      metaDataList: [],
+      metaName: ''
     }
   },
   methods: {
@@ -552,6 +549,11 @@ export default {
         (this.pageObj.pageNo - 1) * this.pageObj.pageSize,
         this.pageObj.pageNo * this.pageObj.pageSize
       )
+    },
+    metricMetaData (data) {
+      this.$get('/prom/api/v1/metadata?' + 'metric=' + data.metricTip.metric + '&limit=' + 1).then(res => {
+        this.metaDataList = res.data.jvm_gc_live_data_size_bytes
+      })
     }
   },
   computed: {