NEZ-1390 feat: endpoint metric info 图标 hover 显示 metadata

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;
+}

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

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>

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>

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">
+          <el-popover trigger="hover" placement="right">
-            <div>
+            <meta-data :metaDataList="metaDataList" :metricTip="scope.row.metricTip.metric" />
-              <ul>
+            <span slot="reference"><i @mouseover="metricMetaData(scope.row)" class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-                <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>
           <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: {