pref:project asset 列表页优化，endpoint-query列表页面新增功能(待完善)

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

@@ -766,7 +766,7 @@ li{
   position: absolute;
   right: 0;
 }
-.config-dropdown, .chart-box-dropdown, .metric-dropdown {
+.config-dropdown, .chart-box-dropdown, .chart-box-dropdown-mini, .metric-dropdown {
   z-index: 2950 !important;
 }
 .dc-dropdown {
@@ -775,6 +775,9 @@ li{
 .chart-box-dropdown {
   width: 519px;
 }
+.chart-box-dropdown-mini{
+  width: 110px;
+}
 .config-dropdown-btn i {
   font-size: 12px;
 }
@@ -1089,7 +1092,7 @@ li{
 }
 /*列表中状态字段 的小圆点*/
 .active-icon{
-  margin-top:20px;
+  margin-top:15px;
   width:10px;
   height:10px;
   border-radius:50%;
@@ -1101,6 +1104,13 @@ li{
   background-color:lightGreen;
 }
 
+.clickable:hover{
+  cursor:pointer;
+}
+.unclickable:hover{
+  cursor: not-allowed;
+}
+
 /* panel-tool-tip列表搜索框 样式重写*/
 .relative-position{
   position: relative;

nezha-fronted/src/components/common/language/en.js

@@ -427,7 +427,7 @@ const en = {
       path: 'Path',//"路径"
       asset: 'Device',//"设备"
       lastUpdate: 'Last update time',//"最后更新时间"
-      moduleParameter: 'Module parameter',//"组件参数"
+      moduleParameter: 'Module',//"组件参数"
       addGraph: 'View Graph', //添加图标
       element: 'Element',
       value: 'Value',

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -129,7 +129,7 @@
                           </span>
                         </el-popover>
                         <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
                             <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
                           </el-form-item>
                         </span>

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

@@ -58,6 +58,7 @@
           :width="item.width"
           :key="`col_${index}`"
           :label="item.label"
+          :fixed="item.fixed"
           :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
           min-width="110px"
           :class-name="item.prop == 'option' ? 'content-right-options' : ''"
@@ -92,7 +93,7 @@
                 placement="right"
                 width="50"
                 trigger="hover"
-                :content="scope.row.pingRtt ? scope.row.pingRtt+'ms':'unreachable'">
+                :content="scope.row.pingRtt ? (scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'--')+'['+ scope.row.pingRtt+'ms'+']':(scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'--')+'[unreachable]'">
                 <div slot="reference" style="width: 20px">
                   <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div>
                 </div>
@@ -102,28 +103,34 @@
               <template v-if="scope.row.moduleNum > 0" >
                 <module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
                   <template v-slot:optionZone>
-                    <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>
+<!--                    <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>-->
+                      <span class="clickable">{{scope.row.moduleNum}}</span>
                   </template>
                 </module-list-pop>
               </template>
-              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>
+<!--              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>-->
+              <span v-else class="unclickable">{{scope.row.moduleNum}}</span>
             </template>
             <template v-if="item.prop=='Alert'">
-              <button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>
-              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.alertNum}}</button>
+<!--              <button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>-->
+<!--              <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.alertNum}}</button>-->
+              <span v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="clickable">{{scope.row.alertNum}}</span>
+              <span v-else class="unclickable">{{scope.row.alertNum}}</span>
             </template>
             <div v-if="item.prop=='dataCenter'">
               <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">
                 <template v-slot:optionZone>
-                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>
+<!--                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
+                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>
                 </template>
               </idc-config-box>
             </div>
             <template v-if="item.prop=='cabinet'">
               <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">
-                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>
+<!--                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>-->
+                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>
               </cabinet-config-box>
-              <span v-else>{{returnData(scope.row.cabinet)}}</span>
+              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>
 
             </template>
             <div v-if="item.prop=='model'">
@@ -133,7 +140,7 @@
               <span>{{scope.row.model.vendor.value}}</span>
             </div>
             <div v-if="item.prop=='purchaseDate'">
-              <span>{{scope.row.purchaseDate}}</span>
+              <span>{{returnData(scope.row.purchaseDate)}}</span>
             </div>
             <div v-if="item.prop=='principal'">
               <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
@@ -142,17 +149,20 @@
               <span>{{scope.row.idc.tel}}</span>
             </div>
             <template v-if="item.prop == 'option'">
-              <span @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
-                class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span>
+              <span :title="$t('overall.view')" @click.stop="tagShow('showView',scope.row.id)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
+                class="el-icon-view"></i>
+              </span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click.stop="tagShow('showEdit',scope.row.id)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
+                class="nz-icon nz-icon-edit"></i>
+              </span>&nbsp;
+              &nbsp;
+              <span :title="$t('overall.delete')" @click.stop="deleteData('asset',scope.row.id)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i
+                class="el-icon-delete"></i>
               </span>&nbsp;&nbsp;&nbsp;
-              <span @click.stop="tagShow('showEdit',scope.row.id)" class="content-right-option" :id="'asset-edit-'+scope.row.id"><i
-                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span>
-              </span>&nbsp;&nbsp;&nbsp;
-              <span @click.stop="tagShow('showView',scope.row.id)" class="content-right-option" :id="'asset-detail-'+scope.row.id"><i
-                class="el-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span>
-              </span>&nbsp;&nbsp;&nbsp;
-              <span @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
-                class="nz-icon nz-icon-cli"></i>&nbsp;&nbsp;<span>CLI</span>
+              &nbsp;
+              <span title="CLI" @click="ssss(scope.row.id ,scope.row.host)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
+                class="nz-icon nz-icon-cli"></i>
               </span>
             </template>
           </template>
@@ -221,6 +231,13 @@
         tablelable: [],
         dropCol: [],
         tableTitle: [
+          {
+            label: this.$t("asset.tableTitle.host"),
+            prop: 'HOST',
+            show: true,
+            width: 130,
+            fixed:'left'
+          },
           {
             label: this.$t("asset.tableTitle.id"),
             prop: 'ID',
@@ -235,11 +252,6 @@
             prop: 'SN',
             show: true,
             width: 130
-          }, {
-            label: this.$t("asset.tableTitle.host"),
-            prop: 'HOST',
-            show: true,
-            width: 130
           },  {
             label: this.$t("asset.tableTitle.assetState"),
             prop: 'state',
@@ -291,7 +303,8 @@
             label: this.$t('config.account.option'),
             prop: 'option',
             show: true,
-            width: 280
+            width: 280,
+            fixed:'right'
           }],
         tableData: [],
         checkListData: [],
@@ -657,11 +670,11 @@
       },
       returnData(data) {
         if (data && data !== '--') {
-          return data.name;
+          return data;
         } else if (data === '--') {
-          return '-';
+          return '--';
         } else {
-          return "-";
+          return "--";
         }
       },
       flushData() {

nezha-fronted/src/components/page/config/promServer.vue

@@ -64,7 +64,7 @@
                 {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
             </span>
             <span v-else-if="item.prop == 'status'">
-              <el-popover placement="right" width="50" trigger="hover" :content="(scope.row[item.prop] == '1'?$t('overall.available'):$t('overall.unavailable'))+'['+(scope.row.checkTime&&scope.row.checkTime!=''?(new Date(scope.row.checkTime).getHours()+':'+new Date(scope.row.checkTime).getMinutes()):'null')+']'">
+              <el-popover placement="right" width="50" trigger="hover" :content="(scope.row[item.prop] == '1'?$t('overall.available'):$t('overall.unavailable'))+'['+(scope.row.checkTime&&scope.row.checkTime!=''?(new Date(scope.row.checkTime).getHours()+':'+new Date(scope.row.checkTime).getMinutes()):'--')+']'">
                 <div slot="reference" style="width: 20px">
                   <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0'}"></div>
                 </div>

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

@@ -119,7 +119,7 @@
             <el-col :span="5">
               <div class="grid-content ">
                 <el-form-item prop="span">
-                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown" v-model="chart.span" placeholder="" size="mini">
+                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
                     <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
                       <span class="panel-dropdown-label-txt" > span-{{item}}</span>
                     </el-option>
@@ -132,7 +132,18 @@
             </el-col><el-col :span="5">
               <div class="grid-content ">
                 <el-form-item prop="heigh">
-                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>
+<!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
+                  <el-autocomplete
+                    v-model="chart.height"
+                    :fetch-suggestions="querySearch"
+                    placeholder=""
+                    size="mini"
+                    popper-class="popper-z-index"
+                    @select="handleSelect">
+                    <template slot-scope="{ item }">
+                      <div class="name">{{ item }}</div>
+                    </template>
+                  </el-autocomplete>
                   <span class="nz-input-append">px</span>
                 </el-form-item>
               </div>
@@ -198,7 +209,7 @@
           title: '',
           type:'line',
           span:12,
-          height:400,
+          height:'400',
           elements:{
             id: '',
             expression: '',
@@ -247,6 +258,7 @@
           id: '',
           name: ''
         },
+        heightSuggestions:['300','400','500','600']
       }
     },
     components:{
@@ -623,7 +635,7 @@
         this.chart.title = '';
         this.chart.type = 'line';
         this.chart.span = 12;
-        this.chart.height = 400;
+        this.chart.height = 400+'';
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];
@@ -640,7 +652,22 @@
       },
 
       /*metric部分相关方法--end*/
-
+      querySearch(queryString, cb) {
+        console.log(queryString)
+        var suggestions = this.heightSuggestions;
+        var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
+        console.log(results)
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (suggestion) => {
+          return (suggestion.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect:function(item){
+        this.chart.height=item;
+      }
     },
     created() {
 
@@ -665,4 +692,9 @@
     }
   }
 </script>
+<style>
+  .popper-z-index{
+    z-index: 99999999 !important;
+  }
+</style>
 

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

@@ -46,7 +46,7 @@
             </el-popover>
             <span v-else>{{item.name}}</span>
           </div>
-          <div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></div>
+          <div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
         </div>
       </div>
     </div>
@@ -136,23 +136,24 @@
           <template slot-scope="scope" :column="item">
             <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
             <span v-else-if="item.prop == 'param'">
-              <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
+              <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
             </span>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
-              <span @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i
-                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span>
-              </span>&nbsp;&nbsp;
-
-              <span @click="endpointDetail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i
-                class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span>
-              </span>
-
-              <span @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id">
-                <i class="el-icon-search"></i>&nbsp;<span>{{$t('overall.query')}}</span>
-              </span>
+              <span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+              &nbsp;
+              <span :title="$t('overall.view')" @click="endpointDetail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
             </div>
-            <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
-            <span v-else-if="item.prop == 'state'" :style="{color: scope.row.state == 0 ? 'red' : (scope.row.state == 0 ? 'green' : '')}">{{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}</span>
+<!--            <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
+            <span v-else-if="item.prop == 'state'" >
+              <el-popover placement="right" width="50" trigger="hover" :content="(scope.row.state == '1'?'up':'down')+'['+(scope.row.lastUpdate&&scope.row.lastUpdate!=''?(new Date(scope.row.lastUpdate).getHours()+':'+new Date(scope.row.lastUpdate).getMinutes()):'--')+']'">
+                <div slot="reference" style="width: 20px">
+                  <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                </div>
+              </el-popover>
+<!--              {{ scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}-->
+            </span>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
         </el-table-column>
@@ -221,6 +222,21 @@
         <el-table-column
           prop="element"
           :label="$t('project.endpoint.element')">
+          <template slot-scope="scope">
+            <el-popover trigger="hover" placement="right">
+<!--              <div>-->
+<!--                <div>-->
+<!--                  <span>metric:{{scope.row.metricTip.metric}}</span>-->
+<!--                </div>-->
+<!--                <div>-->
+<!--                  <span>type:{{scope.row.metricTip.type}}</span>-->
+<!--                </div>-->
+<!--              </div>-->
+              <div>TODO</div>
+              <span slot="reference"><i class="el-icon-info"></i></span>
+            </el-popover>
+            <span>{{scope.row.element}}</span>
+          </template>
         </el-table-column>
         <el-table-column
           prop="value"
@@ -325,7 +341,7 @@
           },{
             label: this.$t("project.endpoint.lastUpdate"),
             prop: 'lastUpdate',
-            show: true,
+            show: false,
           }, {
             label: this.$t('config.account.option'),
             prop: 'option',
@@ -404,6 +420,7 @@
         showTableDataCopy:'',
         queryExpression:'',
         metricList: [], // metric列表
+        elementMetricDatas:[],//element 列提示信息列表
         labelSet:new Set(),
         labelList:[],
         formatTime:'',//查询endpoint的时间，
@@ -932,6 +949,10 @@
               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={};
+                metricTip=(this.elementMetricDatas.filter((item)=>{
+                  return item.metric===temp;
+                }))[0];
                 delete result.metric.__name__;
                 temp+="{";
                 for (let key in result.metric){
@@ -940,7 +961,7 @@
                 }
                 temp=temp.charAt(temp.length-1) == ","?temp.substr(0,temp.length-1):temp;
                 temp+="}";
-                let edpQueryData={element:temp,value:result.value[1],type:(result.metric.type?result.metric.type:'2')};
+                let edpQueryData={element:temp,value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
                 this.showTableData.push(edpQueryData);
                 this.labelList=Array.from(this.labelSet).map((item,index)=>{
                   return {key:item,type:'label'}
@@ -1219,6 +1240,14 @@
       },
       clearInput:function(){
         this.$refs.elementQuery.foucs();
+      },
+      queryElementTips:function(){
+        this.elementMetricDatas=[];
+        this.$get("/metric/metadata?endpointId="+this.curEndpoint.id).then(response=> {
+          if (response.status === "success") {
+            this.elementMetricDatas=response.data.list;
+          }
+        })
       }
     },
     created() {
@@ -1523,4 +1552,23 @@
   }
   /* end--覆盖分页组件样式*/
 
+  /* 列表搜索框 样式重写*/
+  .relative-position{
+    position: relative;
+  }
+  .query-input-inactive{
+    left:213px;
+    width: 18%;
+  }
+  .query-input-inactive .el-input__inner{
+    height: 26px;
+    line-height: 26px;
+  }
+/* 左侧列表dc 编辑按钮影藏样式*/
+  .hid-div{
+    visibility: hidden;
+  }
+  .sidebar-info-item:hover .hid-div{
+    visibility: visible;
+  }
 </style>