pref:endpoint panel 搜索框调整 & alert setting 页面优化

1.endpoint pannel 搜索框调整
2.alerts settings 列表option 中操作位置调整+只显示图标

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

@@ -301,7 +301,7 @@ li{
   margin-bottom:10px;
   font-size: 14px;
 }
- .nz-tab-style-light {  
+ .nz-tab-style-light {
   border-bottom: 3px solid $global-text-color-active;
   color: #333;
   cursor: default;
@@ -312,7 +312,7 @@ li{
  .nz-tab-style-light-right{
   margin-left:30px;
  }
-  
+
 /* begin--nz-tab组件*/
 .nz-tab {
   font-size: 14px;
@@ -336,7 +336,7 @@ li{
   cursor: default;
   font-weight: bold;
 }
- 
+
 /* end--nz-tab组件*/
 
 /* end--通用*/
@@ -1084,3 +1084,16 @@ li{
   color: $box-title-color;
   font-weight: bold;
 }
+/*列表中状态字段 的小圆点*/
+.active-icon{
+  margin-top:20px;
+  width:10px;
+  height:10px;
+  border-radius:50%;
+}
+.red {
+  background-color:#ff6347;
+}
+.green {
+  background-color:lightGreen;
+}

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

@@ -165,7 +165,7 @@ const en = {
       title:'New asset',//'新增资产'
       sn:'SN',//SN
       host:'Host',//'Host'
-      state:'Status',//'状态'
+      state:'State',//'状态'
       selectTip:'Please select',//'请选择'
       inStock: 'In stock',//'在库'
       notInStock: 'Not in stock',//'出库'

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

@@ -67,14 +67,11 @@
           </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
-              <span @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
+              &nbsp;
-              &nbsp;&nbsp;&nbsp;
+              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              <span @click="toEdit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i
+              &nbsp;
-                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i  class="el-icon-delete"></i></span>
-              &nbsp;&nbsp;&nbsp;
-              <span @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i
-                class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
             </div>
             <span v-else-if="item.prop == 'severity'">
               <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>

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

@@ -728,17 +728,5 @@
   }
 </style>
 <style lang="scss">
-  .active-icon{
-    margin-top:20px;
-    width:10px;
-    height:10px;
-    border-radius:50%;
-  }
-   .red {
-    background-color:#ff6347;
-  }
-   .green {
-    background-color:lightGreen;
-  }
 
 </style>

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

@@ -62,15 +62,11 @@
           </template>
           <template slot-scope="scope" :column="item">
             <div v-if="item.prop == 'option'" class="content-right-options">
-              <span @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
+              &nbsp;
-              &nbsp;&nbsp;&nbsp;
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              <span @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i
+              &nbsp;
-                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              &nbsp;&nbsp;&nbsp;
-              <span @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i
-                class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
-
             </div>
             <span v-else-if="item.prop == 'lang'">
                             {{scope.row[item.prop] == 'en' ? 'English' : ''}}

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

@@ -64,18 +64,20 @@
                 {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
             </span>
             <span v-else-if="item.prop == 'status'">
-                {{scope.row[item.prop] == '1' ? $t('overall.available') : ''}}
+              <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')+']'">
-                {{scope.row[item.prop] == '0' ? $t('overall.unavailable') : ''}}
+                <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>
+              </el-popover>
+<!--                {{scope.row[item.prop] == '1' ? $t('overall.available') : ''}}-->
+<!--                {{scope.row[item.prop] == '0' ? $t('overall.unavailable') : ''}}-->
             </span>
             <div v-else-if="item.prop == 'option'" class="content-right-options">
-                          <span @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                            class="el-icon-delete"></i>&nbsp;&nbsp;<span>{{$t('overall.delete')}}</span></span>
+              &nbsp;
-              &nbsp;&nbsp;&nbsp;
+              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-              <span @click="toEdit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i
+              &nbsp;
-                class="nz-icon nz-icon-edit"></i>&nbsp;&nbsp;<span>{{$t('overall.edit')}}</span></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              &nbsp;&nbsp;&nbsp;
-              <span @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i
-                class="nz-icon nz-icon-view"></i>&nbsp;&nbsp;<span>{{$t('overall.view')}}</span></span>
             </div>
             <span v-else>{{scope.row[item.prop]}}</span>
           </template>
@@ -260,7 +262,7 @@
           }, {
             label: this.$t('config.promServer.checkTime'),
             prop: 'checkTime',
-            show: true
+            show: false
           }, {
             label: this.$t('config.account.option'),
             prop: 'option',

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

@@ -23,6 +23,12 @@
           </el-dropdown>
         </div>
         <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>
+            </el-input>
+          </div>
+
           <div class="panel-calendar margin-r-20">
             <div class="block">
               <el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
@@ -52,10 +58,10 @@
             </button>
           </el-popover>
           </div>
-
+              <!-- 2020-02-14 使用普通搜索框-->
-          <div class="top-tool-search">
+<!--          <div class="top-tool-search">-->
-            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
+<!--            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>-->
-          </div>
+<!--          </div>-->
 
           <button @click="toAddChart"
                   class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-82">
@@ -246,6 +252,7 @@
         //removeModal: false, // 删除弹出
         //deleteObj: {}, // 删除对象
         //---图表相关参数--end
+        queryFocus:false, //搜索框是否获得焦点
       }
     },
     components: {
@@ -492,22 +499,26 @@
         this.pageObj.pageSize = val;
         this.getTableData();
       },
-      search: function (searchObj) {
+      // search: function (searchObj) {
-        this.searchLabel = {};
+      //   this.searchLabel = {};
-        let containTitle = false;
+      //   let containTitle = false;
-        for (let item in searchObj) {
+      //   for (let item in searchObj) {
-          if (searchObj[item]) {
+      //     if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
+      //       this.$set(this.searchLabel, item, searchObj[item]);
-            if (item === 'name') {
+      //       if (item === 'name') {
-              this.filter.searchName = searchObj[item]; //此处就一个条件
+      //         this.filter.searchName = searchObj[item]; //此处就一个条件
-              containTitle = true;
+      //         containTitle = true;
-            }
+      //       }
-          }
+      //     }
-        }
+      //   }
-        if (!containTitle) {
+      //   if (!containTitle) {
-          this.filter.searchName = '';
+      //     this.filter.searchName = '';
-        }
+      //   }
-        this.filter.panelId = this.showPanel.id;
+      //   this.filter.panelId = this.showPanel.id;
+      //   this.getData(this.filter);
+      // },
+      search:function(){
+        this.filter.panelId=this.showPanel.id;
         this.getData(this.filter);
       },
       // 滚动事件触发下拉加载
@@ -520,6 +531,26 @@
           this.$refs.chartList.pageDataList(true, this.showPanel.id);
         }
       },
+      focusInput:function(){
+        let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+        classVal=classVal.replace('query-input-inactive','');
+        document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+        this.$refs.queryPanel.focus();
+        this.queryFocus=true;
+      },
+      blurInput:function(){
+        if(!this.filter.searchName || this.filter.searchName == ''){
+          setTimeout(function(){
+            let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
+            classVal='query-input-inactive '+classVal;
+            document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
+            this.queryFocus=true;
+          },100)
+        }
+      },
+      clearInput:function(){
+        this.$refs.queryPanel.focus();
+      }
     },
     created() {
       this.getTableData();
@@ -744,5 +775,18 @@
     padding-right: 0;
     vertical-align: top;
   }
+  /* 列表搜索框 样式重写*/
+  .relative-position{
+    position: relative;
+  }
+  .query-input-inactive{
+    left:213px;
+    width: 18%;
+    margin-top: 1px;
+  }
+  .query-input-inactive .el-input__inner{
+    height: 25px;
+    line-height: 25px;
+  }
 </style>
 

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

@@ -158,9 +158,11 @@
         </div>
         <!--时间选择器-->
         <div class="top-tool-right">
-          <div class="top-tool-search" >
+          <div class="top-tool-search relative-position" >
 <!--            <metric-search :metrics="metricList" :labels="labelList"  v-if="tableShow == 3" @expression-change="tableFilter"></metric-search>-->
-            <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" suffix-icon="el-icon-search" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" ></el-input>
+            <el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput"  @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable  :placeholder="$t('project.endpoint.promExpr')" >
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput"></i>
+            </el-input>
           </div>
           <div class="margin-r-20 margin-t-m1">
             <button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i class="el-icon-d-arrow-left"></i></button>
@@ -1185,27 +1187,29 @@
 
         }
       },
-      queryInputInitStyle:function(){
-        document.getElementById('elementQuery').parentElement.style.width='40px';
-        document.getElementById('elementQuery').parentElement.style.float='right';
-      },
       focusInput:function(){
-        document.getElementById('elementQuery').parentElement.style='';
+        let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
+        classVal=classVal.replace('query-input-inactive','');
+        document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
+        this.$refs.elementQuery.focus();
       },
       blurInput:function(){
         if(!this.queryExpression || this.queryExpression == ''){
-          setTimeout(this.queryInputInitStyle(),100)
+          setTimeout(function(){
+            let classVal=document.getElementById('elementQuery').parentElement.getAttribute("class");
+            classVal='query-input-inactive '+classVal;
+            document.getElementById('elementQuery').parentElement.setAttribute("class",classVal );
+          },100)
         }
       },
       clearInput:function(){
-        this.blurInput();
+        this.$refs.elementQuery.foucs();
       }
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
       this.getModuleList();
       this.getMetricsTableData();
-      this.getSuggestMetric()
     },
     mounted() {
       this.getPanelData();
@@ -1504,4 +1508,19 @@
     line-height: 37px;
   }
   /* end--覆盖分页组件样式*/
+
+  /* 列表搜索框 样式重写*/
+  .relative-position{
+    position: relative;
+  }
+  .query-input-inactive{
+    left:213px;
+    width: 18%;
+  }
+  .query-input-inactive .el-input__inner{
+    height: 26px;
+    line-height: 26px;
+  }
+
+
 </style>