NEZ-1514 feat：全局搜索功能(90%)

nezha-fronted/src/assets/css/components/common/globalSearch/globalSearch.scss

@@ -96,6 +96,7 @@
       }
       .list-item{
         height: 64px;
+        position: relative;
         display: flex;
         align-items: center;
         flex-direction: column;
@@ -115,6 +116,18 @@
             vertical-align: middle
           }
         }
+        .is-jump{
+          position: absolute;
+          right: 20px;
+          top: 20px;
+          padding: 0;
+          width: 24px;
+          height: 24px;
+          display: none;
+          .el-loading-mask{
+            transform: scale(0.5);
+          }
+        }
         .list-item-content{
           overflow: hidden;
           white-space: nowrap;
@@ -137,6 +150,9 @@
       }
       .lise-item-active {
         background: $--table-row-hover-background-color;
+        .is-jump{
+          display: inline-block;
+        }
       }
     }
     .global-search-footer {

nezha-fronted/src/assets/css/components/common/globalSearch/searchItemInfo.scss

@@ -43,7 +43,7 @@
     display: flex;
     height: 47px;
     .search-item-key{
-      width: 100px;
+      width: 120px;
       font-size: 14px;
       line-height: 47px;
       color:$--color-text-regular;
@@ -52,12 +52,15 @@
     }
     .search-item-value-box{
       line-height: 47px;
-      width: calc(100% - 100px);
+      width: calc(100% - 120px);
       display: flex;
       .nz-icon{
         line-height: 47px;
         margin-right: 10px;
       }
+      .nz-icon-guzhangshuju{
+        color: $--color-primary;
+      }
       .search-item-value{
         width: calc(100% - 30px);
         font-size: 14px;

nezha-fronted/src/components/chart/chart/grid/GridLayout.vue

@@ -260,11 +260,8 @@ export default {
     layoutUpdate () {
       if (this.layout !== undefined && this.originalLayout !== null) {
         if (this.layout.length !== this.originalLayout.length) {
-          // console.log("### LAYOUT UPDATE!", this.layout.length, this.originalLayout.length);
-
           const diff = this.findDifference(this.layout, this.originalLayout)
           if (diff.length > 0) {
-            // console.log(diff);
             if (this.layout.length > this.originalLayout.length) {
               this.originalLayout = this.originalLayout.concat(diff)
             } else {

nezha-fronted/src/components/chart/chartList.vue

@@ -219,7 +219,6 @@ export default {
     },
     changeGroupHeight (copyList, group, flag) {
       const height = getGroupHeight(copyList)
-      // console.log(this.$refs.layout)
       const groupFind = this.copyDataList.find(item => item.id == group.id)
       if (group && groupFind) {
         groupFind.height = groupFind.h = height + this.headerHPadding
@@ -279,7 +278,6 @@ export default {
           panelId: this.panelId,
           charts: charts
         }
-        // console.log(this.copyDataList)
         this.$put('/visual/panel/chart/weights', params).then(() => {
           const position = getLayoutPosition(this.copyDataList)
           this.$store.commit('setChartLastPosition', position)

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -1748,7 +1748,6 @@ export default {
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2, header) => {
-            // console.log(res2)
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
               item.image = res2[index].data

nezha-fronted/src/components/common/globalSearch/globalSearch.vue

@@ -57,6 +57,9 @@
                     <div class="list-item-sub" v-if="item.sub">
                       {{ item.sub }}
                     </div>
+                    <div class="is-jump" v-loading="jumpLoading">
+                      <i class="nz-icon nz-icon-huiche"></i>
+                    </div>
                   </li>
                   <li class="list-item" v-if="nextLoading" v-loading="nextLoading"></li>
                   <!--              <li  class="list-item" v-if="noMore&&!nextLoading">没有更多了</li>-->
@@ -133,6 +136,7 @@ export default {
       searchStr: '',
       loading: false,
       nextLoading: false,
+      jumpLoading: false,
       selectIndex: '',
       tableData: [],
       isNoData: false,
@@ -192,6 +196,7 @@ export default {
       this.firstShow = true
       this.selectIndex = 0
       this.pageObj.pageNo = 1
+      this.jumpLoading = false
       this.tableData = []
       this.$store.commit('setGlobalShow', false)
       this.scope.forEach((item) => {
@@ -200,7 +205,6 @@ export default {
       this.unbindEvent()
     },
     selectIcon (item) {
-      // console.log(item)
       switch (item.type) {
         case 'asset' : return 'nz-icon-overview-project'
         case 'datacenter' : return 'nz-icon-model'
@@ -228,7 +232,6 @@ export default {
       const offsetTop = liBox.offsetTop - ulBox.offsetTop
       const scrollTop = ulBox.scrollTop
       // liBox.focus()
-      // console.log(height, liHeight, offsetTop, scrollTop)
       if (offsetTop - scrollTop < 0) {
         ulBox.scrollTop = offsetTop
       } else if (offsetTop - scrollTop >= height - liHeight) {
@@ -236,6 +239,9 @@ export default {
       }
     },
     changeSelectIndex (index) {
+      if (this.jumpLoading) {
+        return
+      }
       if (this.isKeyDown) {
         this.getItemInfo()
         return
@@ -244,7 +250,9 @@ export default {
       this.getItemInfo()
     },
     keyDown (e) {
-      // console.log(e, e.target, e.keyCode)
+      if (this.jumpLoading) {
+        return
+      }
       if (e.keyCode === 13) {
         this.jumpTo()
       }
@@ -281,12 +289,61 @@ export default {
       }, 300)
     },
     jumpTo () {
-
+      this.jumpLoading = true
+      const routerPath = this.getRouterPath()
+      const params = {
+        table: this.tableData[this.selectIndex].type,
+        id: this.tableData[this.selectIndex].id,
+        pageSize: routerPath.pageSize
+      }
+      this.$get('/stat/rownum', params).then(res => {
+        if (res.code === 200) {
+          this.close()
+          this.$router.push({
+            path: routerPath.route,
+            query: {
+              pageNo: res.data.pageNo,
+              pageSize: res.data.pageSize,
+              rownum: res.data.rownum
+            }
+          })
+        } else {
+          this.$message.error(res.msg)
+          this.jumpLoading = false
+        }
+      })
+    },
+    getRouterPath () {
+      const type = this.tableData[this.selectIndex].type
+      let tableId = ''
+      let route = '/'
+      if (type === 'datacenter') {
+        tableId = 'dcTable'
+        route += 'dc'
+      } else if (type === 'alertRule') {
+        tableId = 'alertRuleTable'
+        route += 'alertRule'
+      } else if (type === 'asset') {
+        tableId = type + 'Table'
+        route += 'asset'
+      } else {
+        tableId = type + 'Table'
+        route += 'monitor/' + type
+      }
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + tableId)
+      if (!(pageSize && pageSize !== 'undefined')) {
+        pageSize = 20
+      }
+      return {
+        pageSize,
+        route
+      }
     },
     getItemInfo () {
       this.obj = {}
     },
     searchAll () {
+      // this.getSeverityData()
       if (this.searchTimer) {
         clearInterval(this.searchTimer)
         this.searchTimer = null
@@ -371,6 +428,9 @@ export default {
       })
     }
   },
+  mounted () {
+    this.getSeverityData()
+  },
   destroyed () {
     window.removeEventListener('keydown', this.keyDown)
   }

nezha-fronted/src/components/common/globalSearch/searchItemInfo.vue

@@ -59,7 +59,7 @@
             <span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
           </div>
           <div class="search-item-value-box" v-else>
-            <i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)"/>
+            <i v-if="item.icon" class="nz-icon" :class="searchItemClass(item)" :style="searchItemStyle(item)"/>
             <span class="search-item-value">
           {{getPathContent(item.key)}}
         </span>
@@ -72,6 +72,7 @@
 
 <script>
 import lodash from 'lodash'
+import chartDataFormat from '@/components/charts/chartDataFormat'
 export default {
   name: 'searchItemInfo',
   props: {
@@ -259,6 +260,26 @@ export default {
           }, {
             key: 'type',
             label: this.$t('alert.type')
+          }, {
+            key: 'severityId',
+            label: this.$t('alert.severity'),
+            color: this.severityColor,
+            icon: 'nz-icon nz-icon-circle'
+          }, {
+            key: 'expr',
+            label: this.$t('alert.config.expr')
+          }, {
+            key: 'alertNum',
+            icon: 'nz-icon-overview-alert',
+            label: this.$t('overall.alert')
+          }, {
+            key: 'trbShot',
+            icon: 'nz-icon-guzhangshuju',
+            label: this.$t('alert.config.trbShot')
+          }, {
+            key: 'state',
+            label: this.$t('overall.state'),
+            icon: 'nz-icon nz-icon-circle'
           }
         ]
       },
@@ -324,9 +345,7 @@ export default {
         this.$get('/alert/rule/' + this.obj.id).then((res) => {
           if (res.msg === 'success') {
             this.loading = false
-            this.severityData.forEach(item => {
+            this.severityColor = this.severityData.find(item => res.data.severityId == item.id).color
-              this.severityColor = item.color
-            })
             this.alertLabelData = res.data
           } else {
             this.$message.error(res.msg)
@@ -348,14 +367,43 @@ export default {
       if (item.key === 'pingInfo.rtt') {
         str += this.alertLabelData.pingInfo.status ? 'red-bg' : 'green-bg'
       }
+      if (item.key === 'state' && this.obj.type === 'alertrule') {
+        str += !this.alertLabelData.state ? 'red' : 'green'
+      }
       return str
     },
+    searchItemStyle (item) {
+      const style = {}
+      if (item.key === 'severityId' && this.obj.type === 'alertrule') {
+        style.color = this.severityColor
+        style['font-size'] = '12px'
+        style['margin-right'] = '5px'
+      }
+      return style
+    },
+    alertruleStr () {
+      const arr = [this.$t('project.metrics.metrics'), this.$t('overall.logs'), 'SNMP trap']
+      if (this.alertLabelData.type) {
+        return arr[this.alertLabelData.type - 1]
+      } else {
+        return '--'
+      }
+    },
     getPathContent (key) {
       let str = lodash.get(this.alertLabelData, key, '--')
       str += ''
       if (key === 'pingInfo.rtt' && str) {
         str += ' ms'
       }
+      if (key === 'type' && this.obj.type === 'alertrule') {
+        str = this.alertruleStr()
+      }
+      if (key === 'expr' && this.obj.type === 'alertrule' && this.alertRuleData && this.alertRuleData.expr) {
+        str = this.alertRuleData.expr + this.alertRuleData.operator + this.formatThreshold(this.alertRuleData.threshold, this.alertRuleData.unit)
+      }
+      if (key === 'state' && this.obj.type === 'alertrule') {
+        str = this.alertLabelData.state ? this.$t('overall.enabled') : this.$t('overall.disabled')
+      }
       return str || '--'
     },
     selectIcon (item) {
@@ -380,6 +428,14 @@ export default {
         case 'alertrule' : str += '<span>Alert</span> <span>/</span> <span>Alert rule</span>'; break
       }
       return str
+    },
+    formatThreshold (value, unit) {
+      const unitMethod = chartDataFormat.getUnit(unit)
+      if (unitMethod && value) {
+        return unitMethod.compute(value, null, 2)
+      } else {
+        return value
+      }
     }
   }
 }

nezha-fronted/src/components/common/rightBox/administration/roleBox.vue

@@ -122,7 +122,6 @@ export default {
               self.menus = response.data.menus
               self.selectedIds = response.data.selectedIds
               self.menus[0].children[0].disabled = true
-              console.log(self.menus[0].children[0])
             } else {
               self.$message.error('load menu faild')
             }

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

@@ -766,7 +766,6 @@ export default {
           if (response.data.purchaseDate) {
             response.data.purchaseDate += ' 00:00:00'
             response.data.purchaseDate = new Date(response.data.purchaseDate)
-            console.log(response.data.purchaseDate)
           }
           this.object = response.data
           this.rightBox.show = true

nezha-fronted/src/components/page/config/system/apiKeyTable.vue

@@ -193,7 +193,6 @@ export default {
     },
     save: function (obj) {
       const copy = JSON.parse(JSON.stringify(obj))
-      console.log(copy.expireAt)
       copy.expireAt = new Date(copy.expireAt).getTime()
       copy.expireAt = this.timezoneToUtcTimeStr(copy.expireAt, 'YYYY-MM-DD HH:mm:ss')
       if (copy.role) {

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -809,7 +809,6 @@ export default {
     expressionChange () {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.pageObj.pageNo = 1
-      // console.log(this.filterTime,nowTimeType);
       this.setSearchTime(nowTimeType.type, nowTimeType.value)
       if (this.showMetrics) {
         if (this.expressions && this.expressions.length >= 1) {

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -422,7 +422,6 @@ export default {
           str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
           str += '<div style="padding-left: 10px;">'
           let dot = bus.countDecimals(val)
-          // console.log(dot,val)
           if (dot < this.chartDot) {
             dot = this.chartDot
           } else if (dot > 6) {