pref:panel搜索框交互调整、endpoint-query 列表页metric metadata信息显示 图标调整

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="info-normal" unicode="&#58923;" d="M509.164308 882.648615c271.123692 0 499.396923-221.144615 499.396923-499.396923 0-278.252308-228.273231-499.396923-499.396923-499.396923-271.123692 0-499.396923 221.144615-499.396923 499.396923C9.767385 654.336 230.912 882.609231 509.164308 882.609231z m0-59.904C267.460923 822.744615 69.710769 624.9550770000001 69.710769 383.212308c0-241.703385 197.789538-439.453538 439.532308-439.453539 241.664 0 439.453538 197.750154 439.453538 439.492923 0 241.703385-197.789538 439.492923-439.492923 439.492923z m0-332.484923c21.425231 0 35.682462-14.257231 35.682461-35.682461v-321.024c0-21.425231-14.257231-35.682462-35.682461-35.682462-21.385846 0-35.682462 14.257231-35.682462 35.682462v321.024c0 21.425231 14.296615 35.682462 35.682462 35.682461z m0 178.372923c28.553846 0 57.107692-21.425231 57.107692-57.107692 0-35.643077-21.425231-57.068308-57.107692-57.068308-35.682462 0-57.107692 28.553846-57.107693 57.107693 0 35.643077 28.553846 57.068308 57.107693 57.068307z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="override" unicode="&#58920;" d="M710.7 507.9c3.2 1.4 6.1 3.8 8.9 7.5 2.8 3.8 4.2 8.9 3.2 15.4-1.4 11.2-4.7 22.5-8.9 33.7s-9.8 19.7-15.4 24.8c-3.2 3.2-7 4.7-11.7 5.1s-8.4-0.4-11.7-2.3c-11.7-5.7-24.8-7.5-38.3-6.6-13.6 0.9-25.2 6.1-34.6 15.4s-15 20.6-16.8 32.8c-1.9 12.1-0.4 24.3 4.7 36 0.4 1.4 1.4 4.2 2.3 8 0.9 3.8 0 7-1.9 10.3-3.2 5.1-7.5 9.8-12.7 14-5.1 4.2-11.2 8-17.3 10.8s-12.7 4.7-19.2 6.6c-6.6 1.4-12.7 2.3-17.8 2.3-3.8 0-7-1.9-10.3-5.1-3.2-3.2-5.7-6.6-7.5-9.8-4.2-11.7-11.7-21.6-22.5-29-10.8-7.5-22.9-11.7-36.5-11.7s-24.8 4.2-34.6 12.1c-9.8 8-16.8 17.3-21 28-0.9 3.8-3.2 7-6.1 10.3-2.8 3.2-7 5.1-12.1 5.1-3.8 0-9.3-0.4-15.9-1.9-6.6-1.4-13.6-3.2-20.6-6.1-7-2.8-13.6-6.1-19.7-10.3-6.1-4.2-10.3-8.9-12.7-14.5-1.4-2.3-1.4-5.1-0.9-8.4 0.4-3.2 1.4-6.1 1.9-8.4 0.4-2.3 0.9-6.1 1.4-11.7 0.4-5.7 0.4-11.7 0-18.2-0.4-6.6-1.9-13.6-4.2-20.1-2.3-6.6-5.7-12.7-10.3-17.3-9.8-9.3-21-15-33.7-16.8-12.7-1.9-24.8-0.4-36.9 4.2-3.8 0.9-7 1.9-9.8 2.3-2.8 0.4-6.1-0.4-8.9-2.3-3.8-2.3-7.5-6.1-10.8-10.8s-6.1-10.3-8.9-16.3c-2.8-6.1-4.7-11.7-6.1-18.2-1.4-6.1-2.3-12.1-2.3-16.8 0-4.7 1.4-9.3 3.8-13.6 2.3-4.2 5.1-7.5 8.9-8.4 11.7-4.7 22.5-12.1 31.8-22.5 9.3-10.3 14-22 14-36 0-13.6-4.7-25.2-14-36s-20.1-18.7-31.8-23.3c-6.6-2.3-10.8-8-11.7-16.3-0.9-4.7-0.4-10.8 1.4-17.8 1.4-7 3.8-14.5 6.6-21 2.8-6.6 6.1-13.1 9.8-18.7 3.8-5.7 7.5-9.3 12.1-10.8 5.7-2.3 10.8-2.8 16.3-1.4 8.4 2.8 17.3 4.2 25.2 4.7 7 0.4 14.5-0.4 22.5-1.9 8-1.9 14.5-5.7 20.1-11.7 8.9-9.8 14-20.6 15-31.8 0.9-11.2-0.4-22-5.1-30.9-3.2-6.6-4.7-11.7-4.2-15.4 0.4-3.8 1.4-7 3.2-9.8 2.8-3.8 7-8 12.1-11.7 5.7-3.8 11.7-7.5 18.7-10.3 7-2.8 13.6-5.7 20.6-7.5 7-1.9 13.1-2.8 18.7-2.8 4.7 0 8.9 0.9 13.1 3.2 4.2 2.3 7 5.7 8.9 10.3 4.2 11.7 11.7 22 22.5 30.9s22.9 13.1 36 13.1c13.6 0 25.7-4.2 36-13.1 10.3-8.9 17.8-19.2 22-31.3h0.4c1.4-3.2 3.2-6.1 6.6-8.9 3.2-2.8 6.6-4.2 9.8-4.2 5.1 0 11.2 0.4 17.8 2.3 6.6 1.9 13.1 3.8 19.2 6.6s11.7 5.7 16.8 8.9c5.1 3.2 8.9 6.6 11.2 9.8 5.1 8 5.7 15.9 1.9 23.3-5.1 11.2-7 23.3-5.1 36 1.4 12.7 7 23.9 16.3 33.7 4.2 4.7 9.3 8 15.4 9.8s12.1 3.2 18.2 3.8c6.1 0.4 12.1 0.4 17.8-0.4 6.1-0.9 10.8-1.9 14.5-3.2 4.2-1.4 8.4-2.3 11.7-2.3s7.5 1.4 12.1 3.8c4.7 2.3 8.9 6.1 13.1 11.7 3.8 5.7 7.5 11.7 9.8 18.7 2.8 7 4.7 13.6 6.1 20.1 1.4 6.6 1.4 12.1 0.4 16.8-1.4 5.1-4.2 9.3-8.9 13.1-1.9 1.4-4.2 3.2-7 4.7-11.7 4.2-21.6 11.7-28.6 21.6-7.5 9.8-10.8 21.6-10.8 35.1 0 13.6 4.2 25.7 13.1 36.9 8.9 10.3 19.6 17.8 31.9 22zM566.1 398.5c-6.6-15.4-15.9-29-27.1-41.1-11.7-11.7-25.2-21-41.1-27.6-15.9-6.6-32.2-9.8-50-9.8-17.8 0-34.1 3.2-49.6 9.8-15.4 6.6-29 15.9-40.7 27.6-11.7 11.7-20.6 25.2-27.1 41.1-6.6 15.9-9.8 31.8-9.8 49.6s3.2 34.1 9.8 49.6c6.6 15.4 15.9 29 27.1 40.7 11.2 11.7 25.2 20.6 40.7 27.1 15.4 6.6 31.8 9.8 49.6 9.8s34.1-3.2 50-9.8c15.9-6.6 29.5-15.9 41.1-27.1 11.7-11.2 20.6-25.2 27.1-40.7 6.6-15.4 9.8-31.8 9.8-49.6 0.1-17.8-2.8-34.2-9.8-49.6zM746.7 832H149.8c-47.2 0-85.6-38.3-85.6-85.6v-596.7c0-47.2 38.3-85.6 85.6-85.6h596.7c47.2 0 85.6 38.3 85.6 85.6V746.4c0.2 47.2-38.2 85.6-85.4 85.6z m38.8-682.3c0-21.6-17.3-38.8-38.8-38.8H149.8c-21.6 0-38.8 17.3-38.8 38.8V746.4c0 21.6 17.3 38.8 38.8 38.8h596.7c21.6 0 38.8-17.3 38.8-38.8v-596.7h0.2zM254.6-17.600000000000023h138.3v-46.6H254.6z m597.1-46.6h-48.5v46.7h48.5c21.7 0 42 11.7 53.4 30.4l40.1-24c-19.8-32.8-55.6-53.1-93.5-53.1z m-94.1 0H620.9v46.6h136.7z m-182.3 0H438.5v46.6h136.7v-46.6z m338.4 108.4V181h46.7v-136.5z m0 319.2h46.7v-136.8h-46.7z m0 182.3h46.7V409h-46.7z"  horiz-adv-x="1024" />
 
     

nezha-fronted/src/assets/stylus/main.scss

@@ -609,7 +609,7 @@ li{
   position: fixed;
   top: 50px;
   right: 0;
-  z-index: 1;
+  z-index: 100;
   box-shadow: 0 0 15px #ccc;
   background-color: white;
   padding: 0 0 0 30px;

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -25,7 +25,7 @@
         <div class="top-tool-right">
           <div class="top-tool-search relative-position" >
             <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="(queryFocus ?search():focusInput())"></i>
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput"></i>
             </el-input>
           </div>
 
@@ -252,7 +252,6 @@
         //removeModal: false, // 删除弹出
         //deleteObj: {}, // 删除对象
         //---图表相关参数--end
-        queryFocus:false, //搜索框是否获得焦点
       }
     },
     components: {
@@ -536,7 +535,6 @@
         classVal=classVal.replace('query-input-inactive','query-input-active');
         document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
         this.$refs.queryPanel.focus();
-        this.queryFocus=true;
       },
       blurInput:function(){
         if(!this.filter.searchName || this.filter.searchName == ''){
@@ -544,7 +542,6 @@
             let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
             classVal=classVal.replace('query-input-active','query-input-inactive');
             document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
-            this.queryFocus=true;
           },100)
         }
       },
@@ -568,6 +565,12 @@
           this.getTableData();
           this.$store.commit('panelListChange', false);
         }
+      },
+      'filter.searchName':function(n,o){
+        let temp=this;
+        setTimeout(function(){
+          temp.search();
+        },1000)
       }
     }
   }

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

@@ -52,51 +52,51 @@
     </div>
 
     <!--metrics-->
-    <div class="content-right" v-show="tableShow == 2">
+<!--    <div class="content-right" v-show="tableShow == 2">-->
-      <div class="top-tools">
+<!--      <div class="top-tools">-->
-        <div class="nz-tab">
+<!--        <div class="nz-tab">-->
-          <div @click="tableShow = 1" class="nz-tab-item-box">
+<!--          <div @click="tableShow = 1" class="nz-tab-item-box">-->
-            <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>
+<!--            <div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>-->
-          </div>
+<!--          </div>-->
-          <div class="nz-tab-item-box">
+<!--          <div class="nz-tab-item-box">-->
-            <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>
+<!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>-->
-          </div>
+<!--          </div>-->
-        </div>
+<!--        </div>-->
-        <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
+<!--        <div class="top-tool-search"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>-->
-      </div>
+<!--      </div>-->
-      <el-table
+<!--      <el-table-->
-        :data="metricsTableData"
+<!--        :data="metricsTableData"-->
-        class="nz-table"
+<!--        class="nz-table"-->
-        border
+<!--        border-->
-        height="calc(100% - 160px)"
+<!--        height="calc(100% - 160px)"-->
-        style="width: 100%;">
+<!--        style="width: 100%;">-->
-        <el-table-column
+<!--        <el-table-column-->
-          :resizable="false"
+<!--          :resizable="false"-->
-          v-for="(item, index) in metricsTableTitle"
+<!--          v-for="(item, index) in metricsTableTitle"-->
-          v-if="item.show"
+<!--          v-if="item.show"-->
-          :width="item.width"
+<!--          :width="item.width"-->
-          :key="`col-${index}`"
+<!--          :key="`col-${index}`"-->
-          :label="item.label"
+<!--          :label="item.label"-->
-          min-width="110px"
+<!--          min-width="110px"-->
-        >
+<!--        >-->
-          <template slot-scope="scope" :column="item">
+<!--          <template slot-scope="scope" :column="item">-->
-            <span>{{scope.row[item.prop]}}</span>
+<!--            <span>{{scope.row[item.prop]}}</span>-->
-          </template>
+<!--          </template>-->
-        </el-table-column>
+<!--        </el-table-column>-->
-      </el-table>
+<!--      </el-table>-->
-      <Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>
+<!--      <Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>-->
-    </div>
+<!--    </div>-->
 
     <!--endpoint-->
     <div class="content-right" v-show="tableShow == 1">
       <div class="top-tools">
         <div class="nz-tab">
-          <div class="nz-tab-item-box">
+<!--          <div class="nz-tab-item-box">-->
-            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>
+<!--            <div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>-->
-          </div>
+<!--          </div>-->
-          <div class="nz-tab-item-box" @click="tableShow = 2">
+<!--          <div class="nz-tab-item-box" @click="tableShow = 2">-->
-            <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>
+<!--            <div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>-->
-          </div>
+<!--          </div>-->
         </div>
         <div>
           <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
@@ -219,17 +219,16 @@
           prop="element"
           :label="$t('project.endpoint.element')">
           <template slot-scope="scope">
-            <el-popover trigger="hover" placement="right">
+            <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
-<!--              <div>-->
+              <div>
-<!--                <div>-->
+                <ul>
-<!--                  <span>metric:{{scope.row.metricTip.metric}}</span>-->
+                  <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric}}</span></li>
-<!--                </div>-->
+                  <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type}}</span></li>
-<!--                <div>-->
+                  <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help}}</span></li>
-<!--                  <span>type:{{scope.row.metricTip.type}}</span>-->
+                  <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit}}</span></li>
-<!--                </div>-->
+                </ul>
-<!--              </div>-->
+              </div>
-              <div>TODO</div>
+              <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
-              <span slot="reference"><i class="el-icon-info"></i></span>
             </el-popover>
             <span>{{scope.row.element}}</span>
           </template>
@@ -293,6 +292,7 @@
   import chartBox from "../dashboard/chartBox";
   import bus from "../../../libs/bus";
   import metricSearch from "./metricSearch";
+  import axios from 'axios';
   export default {
     name: "project2",
     components: {
@@ -930,11 +930,13 @@
         this.$refs.assetEditUnit.tabView=true;
       },
       showEndpoint:function(endpoint){
+
         this.queryEdpLoading=true;
         if(endpoint){
           this.curEndpoint=endpoint;
           this.formatTime='';
         }
+        this.queryElementTips();
         this.endpointQueryTabData=[];
         this.showTableData=[];
         this.showTableDataCopy='';
@@ -945,10 +947,13 @@
               for (let result of results){
                 // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
                 let temp=result.metric.__name__;
-                let metricTip={};
+                let metricTip=null;
-                metricTip=(this.elementMetricDatas.filter((item)=>{
+                let queryInfos=(this.elementMetricDatas.filter((item)=>{
                   return item.metric===temp;
-                }))[0];
+                }));
+                if(queryInfos&&queryInfos.length>0){
+                  metricTip=queryInfos[0];
+                }
                 delete result.metric.__name__;
                 temp+="{";
                 for (let key in result.metric){
@@ -1110,8 +1115,6 @@
         this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
         this.chartOptions.legend.data=this.lenged;
         this.chartOptions.series=this.chartDatas;
-        console.log("chartOptions")
-        console.log(this.chartOptions)
         this.graphChart.setOption(this.chartOptions);//创建图表
       },
       cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’
@@ -1237,13 +1240,23 @@
       clearInput:function(){
         this.$refs.elementQuery.foucs();
       },
-      queryElementTips:function(){
+      queryElementTips:async function(){
         this.elementMetricDatas=[];
-        this.$get("/metric/metadata?endpointId="+this.curEndpoint.id).then(response=> {
+        // this.$get("/metric/metadata?endpointId="+this.curEndpoint.id).then(response=> {
-          if (response.status === "success") {
+        //   if (response.status === "success") {
-            this.elementMetricDatas=response.data.list;
+        //     this.elementMetricDatas=response.data.list;
+        //     console.log('metric tips')
+        //     console.log(this.elementMetricDatas)
+        //   }
+        // })
+        let response= await axios.get("/metric/metadata?endpointId="+this.curEndpoint.id);
+        if(response&&response.status === 200){
+          if(response.data.msg==='success'){
+            this.elementMetricDatas=response.data.data.list;
           }
-        })
+
+        }
+
       }
     },
     created() {
@@ -1262,7 +1275,6 @@
       this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
-      this.queryInputInitStyle();
     },
     computed: {
       currentProjectChange() {
@@ -1567,4 +1579,15 @@
   .sidebar-info-item:hover .hid-div{
     visibility: visible;
   }
+  .metric-tip-icon{
+    vertical-align: middle;
+    /*color: #3971BA;*/
+    -webkit-transform:scale(0.6);
+    /*-webkit-transform-origin: left top;*/
+    display:inline-block;
+  }
+  .metirc-tip-list{
+    line-height: 26px;
+    font-weight: bold;
+  }
 </style>