Merge branch 'dev-3.6' of git.mesalab.cn:nezha/nezha-fronted into dev-3.7

nezha-fronted/src/assets/css/components/common/detailView/detailViewTopSearch.scss

@@ -47,6 +47,7 @@
     min-width: 200px;
   }
 }
+
 .detail-top-search-dropdown{
   max-height: 300px;
   overflow-y: auto;
@@ -80,6 +81,7 @@
     }
     .children-title-name{
       min-width: 180px;
+
       flex-shrink: 0;
       height: 36px;
       padding-right: 20px;
@@ -96,6 +98,26 @@
     background: $--background-color-base !important;
   }
 }
+.detail-top-search-dropdown-special.detail-top-search-dropdown {
+  width: 680px;
+  max-width: unset !important;
+  .nz-dropdown-menu__item{
+    width: 100% !important;
+    .children-title-name {
+      width: 33%;
+      box-sizing: border-box;
+    }
+    .nz-dropdown-menu__item-box {
+      width: 66%;
+      display: flex;
+      flex-wrap: wrap;
+      .nz-dropdown-menu__item-hover {
+        width: calc(50% - 2px);
+        box-sizing: border-box;
+      }
+    }
+  }
+}
 .clear-all-select{
   padding: 0 20px;
   padding-left: 42px;

nezha-fronted/src/assets/css/components/common/project/L5/popData/common.scss

@@ -143,6 +143,7 @@
     width: 120px;
     display: inline-block;
     padding: 3px 0;
+    vertical-align: middle;
   }
   .content-text {
     width: 175px;
@@ -150,6 +151,10 @@
     font-size: 12px;
     display: inline-block;
     padding: 3px 5px;
+    vertical-align: middle;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space:nowrap
   }
   .module-type {
     border: 1px solid #DCDCDC;

nezha-fronted/src/assets/css/components/page/tool/ping.scss

@@ -161,8 +161,10 @@
         font-size: 14px;
         color: $--color-text-regular;
         letter-spacing: 0;
-        font-weight: 400;
+        line-height: 20px;
-        margin: 30px 0 11px 0;
+        font-weight: 600;
+        font-style: oblique;
+        padding: 30px 0 10px 0;
       }
       .data-top{
         width: 100%;

nezha-fronted/src/assets/css/components/page/tool/trace.scss

@@ -169,8 +169,10 @@
         font-size: 14px;
         color: $--color-text-regular;
         letter-spacing: 0;
-        font-weight: 400;
+        line-height: 20px;
-        margin: 30px 0 11px 0;
+        font-weight: 600;
+        font-style: oblique;
+        padding: 30px 0 10px 0;
       }
       .data-top{
         width: 100%;

nezha-fronted/src/components/common/alert/alertRuleInfo.vue

@@ -100,6 +100,15 @@ export default {
     that: {},
     severityData: Array
   },
+  watch: {
+    id: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.init()
+      }
+    },
+  },
   data () {
     return {
       loading: true,
@@ -181,52 +190,58 @@ export default {
     },
     tipHoverRule (tipLoading) {
       this.$emit('tipHoverRule', tipLoading)
+    },
+    init () {
+      if (!this.id) {
+        return
+      }
+      this.$get('/alert/rule/' + this.id).then((res) => {
+        if (res.msg === 'success') {
+          this.loading = false
+          this.alertRuleData = res.data
+          this.severityDataColor()
+          this.alertColor = this.returnColor(res.data.alert)
+          const weekDays = this.getWeeksTime()
+          if (this.trendTimer) {
+            clearTimeout(this.trendTimer)
+            this.trendTimer = null
+          }
+          this.trendTimer = setTimeout(() => {
+            this.trendLoading = true
+            const params = {
+              type: 'total',
+              dimension: 'priority',
+              step: 'd'
+            }
+            params['rule' + 'Id'] = this.id
+            this.$get('/stat/alertMessage/trend', params).then((res) => {
+              if (!res.data) {
+                return
+              }
+              const alertDaysData = res.data.result ? res.data.result[0].values : []
+              const newWeekDays = JSON.parse(JSON.stringify(weekDays))
+              alertDaysData.forEach(item => {
+                item.values.forEach(time => {
+                  const findItem = newWeekDays.find(days => days.time == time[0])
+                  if (findItem) {
+                    findItem[item.metric.priority] = time[1]
+                  }
+                })
+              })
+              setTimeout(() => {
+                this.alertDaysData = newWeekDays
+                this.trendLoading = false
+              })
+            })
+          })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
     }
   },
   mounted () {
-    this.$get('/alert/rule/' + this.id).then((res) => {
+
-      if (res.msg === 'success') {
-        this.loading = false
-        this.alertRuleData = res.data
-        this.severityDataColor()
-        this.alertColor = this.returnColor(res.data.alert)
-        const weekDays = this.getWeeksTime()
-        if (this.trendTimer) {
-          clearTimeout(this.trendTimer)
-          this.trendTimer = null
-        }
-        this.trendTimer = setTimeout(() => {
-          this.trendLoading = true
-          const params = {
-            type: 'total',
-            dimension: 'priority',
-            step: 'd'
-          }
-          params['rule' + 'Id'] = this.id
-          this.$get('/stat/alertMessage/trend', params).then((res) => {
-            if (!res.data) {
-              return
-            }
-            const alertDaysData = res.data.result ? res.data.result[0].values : []
-            const newWeekDays = JSON.parse(JSON.stringify(weekDays))
-            alertDaysData.forEach(item => {
-              item.values.forEach(time => {
-                const findItem = newWeekDays.find(days => days.time == time[0])
-                if (findItem) {
-                  findItem[item.metric.priority] = time[1]
-                }
-              })
-            })
-            setTimeout(() => {
-              this.alertDaysData = newWeekDays
-              this.trendLoading = false
-            })
-          })
-        })
-      } else {
-        this.$message.error(res.msg)
-      }
-    })
   }
 }
 

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue

@@ -19,7 +19,7 @@
         <el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
           <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
         </el-select>
-        <pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false" :sign="sign"></pick-time>
+        <pick-time ref="pickTime" v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="false" :sign="sign"></pick-time>
       </template>
       <template v-slot>
         <alertMessageTable
@@ -164,7 +164,10 @@ export default {
             this.state = '2'
           }
           this.searchLabel = {}
-          this.getTableData()
+          // this.getTableData()
+          setTimeout(() => {
+            this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.refresh()
+          }, 100)
         }
       }
     },
@@ -342,6 +345,9 @@ export default {
         })
       })
     },
+    dateChange () {
+      this.getTableData()
+    },
     getTableData (state) {
       if (state) {
         this.state = state
@@ -630,7 +636,8 @@ export default {
       if (this.$refs.dataTable) {
         this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0
       }
-      this.getTableData()
+      // this.getTableData()
+      this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.refresh()
     },
     fillProject (module) {
       this.$get('project', { id: module.projectId }).then(response => {

nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue

@@ -13,7 +13,7 @@
   >
     <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
     <template v-slot:top-tool-right>
-      <el-input v-model="matchContent" class="margin-r-10" placeholder="" size="small" @keyup.enter.native="queryLogData()">
+      <el-input v-model="matchContent" class="margin-r-10" placeholder="" size="small" @keyup.enter.native="dateChange()">
         <el-select slot="prepend" v-model="matchSymbol" class="symbol-select" size="small" style="width: 60px;">
           <el-option value="|=">
             <span style="font-family: Inter-Regular">|=</span>
@@ -28,7 +28,7 @@
             <span style="font-family: Inter-Regular">!~</span>
           </el-option>
         </el-select>
-        <button  slot="suffix" class="search-icon-btn"><i class="el-icon-search" @click="queryLogData()"></i></button>
+        <button  slot="suffix" class="search-icon-btn"><i class="el-icon-search" @click="dateChange()"></i></button>
       </el-input>
       <pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :sign="sign" :use-chart-unit="false" :use-refresh="false">
         <template slot="added-text">{{$t('overall.query')}}</template>
@@ -114,6 +114,9 @@ export default {
         reader.readAsText(error.response.data)
       })
     },
+    dateChange () {
+      this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.refresh()
+    },
     queryLogData (limit = 100) { // log的chart和table是一个请求
       this.loading = true
       if (this.expressions.length > 0) {

nezha-fronted/src/components/common/detailView/detailViewTopSearch.vue

@@ -89,15 +89,17 @@
                 </div>
                 <i class="nz-icon nz-icon-arrow-down search-value"/>
               </div>
-              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown right-box-max-width">
+              <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown right-box-max-width detail-top-search-dropdown-special">
                 <div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}"  suffix-icon="el-icon-search"/></div>
                  <el-checkbox-group v-model="selectValue[item.key]">
                     <el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" class="nz-dropdown-menu__item">
                       <span :title="item3.name" class="children-title-name"> {{item3.name}}</span>
-                     <div :key="index4"  v-for="(item4,index4) in item3.children" class="el-dropdown-menu__item nz-dropdown-menu__item-hover">
+                      <div class="nz-dropdown-menu__item-box">
-                        <el-checkbox :label="item3.id+'-'+item4.id" :title="item4.name" :a="item3.id+'-'+item4.id">{{item4.name}}</el-checkbox>
+                        <div :key="index4"  v-for="(item4,index4) in item3.children" class="el-dropdown-menu__item nz-dropdown-menu__item-hover">
-                       <span class="right-box-select-num">{{item4.num || 0}}</span>
+                          <el-checkbox :label="item3.id+'-'+item4.id" :title="item4.name" :a="item3.id+'-'+item4.id">{{item4.name}}</el-checkbox>
-                     </div>
+                          <span class="right-box-select-num">{{item4.num || 0}}</span>
+                        </div>
+                      </div>
                     </el-dropdown-item>
                  </el-checkbox-group>
               </el-dropdown-menu>

nezha-fronted/src/components/common/project/popData/Info.vue

@@ -38,7 +38,7 @@
         </div>
         <div class="content-box">
           <span class="content-title">{{ $t('overall.remark') }}</span>
-          <span class="content-text">{{moduleInfo.remark?moduleInfo.remark:'--'}}</span>
+          <span class="content-text" :title="moduleInfo.remark?moduleInfo.remark:'--'">{{moduleInfo.remark?moduleInfo.remark:'--'}}</span>
         </div>
       </div>
     </div>

nezha-fronted/src/components/common/table/alert/alertMessageTable.vue

@@ -249,7 +249,8 @@ export default {
       tableDataInitNum: 0,
       alertRuleShow: false,
       alertRuleId: '',
-      alertRuleObj: ''
+      alertRuleObj: '',
+      timeRule: ''
     }
   },
   computed: {
@@ -518,7 +519,7 @@ export default {
     },
     // alertName鼠标划入
     alertMessageHover (item, loading, e) {
-      clearTimeout(this.timer)
+      clearTimeout(this.timeRule)
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
@@ -527,13 +528,13 @@ export default {
         this.alertRuleObj = item
       }
       this.$set(item.alertRule, 'loading', loading)
-      this.timer = setTimeout(() => {
+      this.timeRule = setTimeout(() => {
         this.alertRuleShow = loading
       }, 500)
       this.flag = loading
     },
     tipHoverRule (tipLoading) {
-      clearTimeout(this.timer)
+      clearTimeout(this.timeRule)
       if (this.flag === false) {
         this.alertRuleShow = tipLoading
       }

nezha-fronted/src/components/common/table/tool/pingTable.vue

@@ -2,7 +2,7 @@
   <el-table
       id="pingTable"
       ref="dataTable"
-      :height="'calc(100% - 10px)'"
+      :height="'calc(100% - 80px)'"
       :row-key="rowKey"
       :data="tableData"
       border

nezha-fronted/src/components/common/table/tool/traceTable.vue

@@ -2,7 +2,7 @@
   <el-table
       id="traceTable"
       ref="dataTable"
-      :height="'calc(100% - 10px)'"
+      :height="'calc(100% - 80px)'"
       :data="tableData"
       :row-key="rowKey"
       border

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

@@ -546,6 +546,10 @@ export default {
       } else {
         this.isPopoverDisabled = false
       }
+    },
+    refresh () {
+      this.setSearchTime(this.nowTimeType.type, this.nowTimeType.value, this.searchTime)
+      this.$emit('change', this.searchTime)
     }
   },
   watch: {
@@ -557,6 +561,7 @@ export default {
           if (showTime) {
             this.showTime = Object.assign({}, showTime)
             this.searchTime = this.$parent.searchTime
+            this.nowTimeType = this.showTime
           }
           if (this.showEmpty && this.defaultPick === 12) {
             this.searchTime = []

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

@@ -18,8 +18,8 @@
         <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch" :title="$t('dashboard.dashboard.chartForm.filter')">
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
-        <pick-time v-model="searchTime" sign="message" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time ref="pickTime" v-model="searchTime" sign="message" :default-pick="10" :refresh-data-func="dateChange" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
-        <button id="roles-add" v-has="'alertMessage_edit'" :title="$t('overall.exportExcel')" class="top-tool-btn margin-r-10" type="button" @click="showExportDialog">
+        <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcel')" class="top-tool-btn margin-r-10" type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
         </button>
          <top-tool-more-options
@@ -869,6 +869,9 @@ export default {
         })
       }
     },
+    dateChange () {
+      this.getTableData()
+    },
     getTableData (state) {
       if (state) {
         this.state = state
@@ -1196,7 +1199,8 @@ export default {
       if (this.$refs.dataTable) {
         this.$refs.dataTable.$refs.dataTable.bodyWrapper.scrollTop = 0
       }
-      this.getTableData()
+      // this.getTableData()
+      this.$refs.pickTime && this.$refs.pickTime.$refs.timePicker.refresh()
     },
     computeDistance (str) {
       let width = 0

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

@@ -82,7 +82,7 @@
         </el-table-column>
       </el-table>
       <template v-if="exploreItem">
-        <div v-if="exploreLogTable" class="table-no-data">
+        <div v-if="exploreLogTable && !tableData.length" class="table-no-data">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#nz-icon-no-data-list"></use>
           </svg>
@@ -91,7 +91,7 @@
         <div v-else>&nbsp;</div>
       </template>
       <template v-else>
-        <div v-if="loadingBottom" class="table-no-data">
+        <div v-if="loadingBottom && !tableData.length" class="table-no-data">
           <svg class="icon" aria-hidden="true">
             <use xlink:href="#nz-icon-no-data-list"></use>
           </svg>

nezha-fronted/src/permission.js

@@ -33,7 +33,7 @@ router.beforeEach((to, from, next) => {
             localStorage.setItem('nz-sys-timezone', res.data.timezone || '')
             localStorage.setItem('nz-sys-bgImg', res.data.system_bgImg || '')
             localStorage.setItem('nz-default-theme', res.data.theme || '')
-            localStorage.setItem('nz-default-dateFormat', res.data.dateFormat || '')
+            localStorage.setItem('nz-default-dateFormat', res.data.dateFormat || 'YYYY-MM-DD HH:mm:ss')
             changeFavicon(res.data.system_favicon)
           }
           resolve()