Merge remote-tracking branch 'origin/dev-3.1' into dev-3.1.1_theme

# Conflicts:
#	nezha-fronted/src/components/common/i18n.js
#	nezha-fronted/src/components/common/pagination.vue
#	nezha-fronted/src/components/common/searchInput.vue
#	nezha-fronted/src/components/common/table/settings/endpointTable.vue
#	nezha-fronted/src/components/page/dashboard/overview/overview2.vue

nezha-fronted/src/components/charts/chart-list.vue

@@ -1447,7 +1447,10 @@ export default {
         const arr = []
         arr.push(this.$get(`/asset/asset/${assetId}`))
         arr.push(this.$get(`/asset/asset/feature/${assetId}`))
-        this.$refs['editChart' + chartInfo.id][0].showLoad()
+        console.log(this.$refs['editChart' + chartInfo.id][0])
+        if (this.$refs['editChart' + chartInfo.id][0]) {
+          this.$refs['editChart' + chartInfo.id][0].showLoad()
+        }
 
         // this.$get('/asset/info?id=' + assetId).then(response => {
         //   if (response.code == 200) {

nezha-fronted/src/components/charts/chartPreview.vue

@@ -465,6 +465,26 @@ export default {
                         if (chartItem.type === 'endpointInfo') {
                           seriesItem.theData.type = 'line'
                         }
+                        if ((chartItem.type === 'line' || chartItem.type === 'stackArea' || chartItem.type === 'bar') && chartItem.param && chartItem.param.threshold) {
+                          seriesItem.theData.markLine = {
+                            silent: true,
+                            symbol: ['circle', 'circle'],
+                            label: {
+                              distance: this.computeDistance(chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(chartItem.param.threshold)),
+                              formatter (params) {
+                                return chartDataFormat.getUnit(chartItem.unit ? chartItem.unit : 2).compute(params.value)
+                              }
+                            },
+                            lineStyle: {
+                              color: '#d64f40',
+                              width: 2,
+                              type: 'dotted'
+                            },
+                            data: [{
+                              yAxis: Number(chartItem.param.threshold)
+                            }]
+                          }
+                        }
                         // 图表中每条线的名字,后半部分
                         let host = ''// up,
                         if (queryItem.metric.__name__) {

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

@@ -1253,19 +1253,19 @@ export default {
             const ePosition = window.ePosition
             const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
             const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
-            this.tooltipPosition.left = ePosition.layerX + 20
+            this.tooltipPosition.left = ePosition.offsetX + 20
-            this.tooltipPosition.top = ePosition.layerY
+            this.tooltipPosition.top = ePosition.offsetY
             this.$nextTick(() => {
               if (this.$refs.topoTooltip) {
-                if ((boxWidth / 2) > ePosition.layerX) {
+                if ((boxWidth / 2) > ePosition.offsetX) {
-                  this.tooltipPosition.left = ePosition.layerX + 20
+                  this.tooltipPosition.left = ePosition.offsetX + 20
                 } else {
-                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                  this.tooltipPosition.left = ePosition.offsetX - 20 - this.$refs.topoTooltip.offsetWidth
                 }
-                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                if (boxHeight > (ePosition.offsetY + this.$refs.topoTooltip.offsetHeight)) {
-                  this.tooltipPosition.top = ePosition.layerY
+                  this.tooltipPosition.top = ePosition.offsetY
                 } else {
-                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                  this.tooltipPosition.top = ePosition.offsetY - this.$refs.topoTooltip.offsetHeight
                 }
               }
               if (this.isScreen) {
@@ -1408,6 +1408,10 @@ export default {
             if (this.$refs.topTool) {
               this.$refs.topTool.scaleNum = parseInt(data * 100)
             }
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
             break
           }
           case 'locked': {
@@ -1924,6 +1928,7 @@ export default {
         }
         const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
         getTopology(this.topologyIndex).canvasPos = domRect
+        getTopology(this.topologyIndex).resize()
       }, 100)
     },
 
@@ -2015,7 +2020,6 @@ export default {
         item.animatePlay = item.data.animatePlay
         item.data.animateType = item.animateType
         if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.image = ''
           item.animateFrames = []
           item.animateReady = null
           delete item.img

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

@@ -0,0 +1,187 @@
+<template>
+  <div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
+       @mouseenter="tooltipHover(true)"
+       @mouseleave="tooltipHover(false)">
+    <slot name="default"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'nzTooltip',
+  props: {
+    id: {},
+    type: {},
+    // labelLoading:{},
+    that: {},
+    detailList: Boolean,
+    alertTableDialog: Boolean
+  },
+  data () {
+    return {
+      alertLabelData: null,
+      loading: true,
+      heightList: 0
+    }
+  },
+  computed: {
+    calcPosition () {
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const leftOffSetView = this.detailList ? -80 : 10
+        const leftOffSet = this.detailList ? -80 : 10
+        const topOffSet = this.detailList ? 60 : 22
+        if (position.top + this.heightList > clientHeight) {
+          return {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: `${position.top - this.heightList + topOffSet}px`
+          }
+        } else if (this.alertTableDialog) {
+          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
+          const dialogHeight = dialog.getBoundingClientRect()
+          if (dialogHeight) {
+            return {
+              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
+              top: `${position.top - dialogHeight.y}px`
+            }
+          }
+        } else {
+          return {
+            left: `${position.left + position.width + leftOffSetView}px`,
+            top: `${position.top}px`
+          }
+        }
+      }
+    },
+    calcHeight () {
+      const self = this
+      return function (position) {
+        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
+        const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
+        if (position.top + elHeight > clientHeight) {
+          return 'alert-labelUp'
+        } else {
+          return 'alert-label'
+        }
+      }
+    }
+  },
+  methods: {
+    tooltipHover (show) {
+      if (show) {
+        clearTimeout(this.that.timeout)
+        this.that.timeout = null
+      } else {
+        this.that.loading = false
+      }
+    }
+  },
+  mounted () {
+    this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+  }
+}
+</script>
+
+<style scoped>
+  .alert-label {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 8px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label__border {
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
+    border-radius: 3px 3px 3px 3px 0 0;
+  }
+  .alert-labelUp {
+    position: fixed;
+    background-color: white;
+    z-index: 3000;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .alert-label::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    top: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-labelUp::after {
+    content: '';
+    display: block;
+    width:0;
+    height:0;
+    overflow: hidden;
+    font-size: 0;
+    line-height: 0;
+    /*border: 5px;*/
+    /*border-style: dashed solid dashed dashed;*/
+    /*border-color: transparent #fff transparent transparent;*/
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    transform: translate(-100%, -50%);
+  }
+  .alert-label-info{
+    /*border: 1px solid #ebeef5;*/
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alert-label-box{
+    display: flex;
+    flex-direction: row;
+    /*border-bottom: 1px solid #ebeef5;*/
+  }
+  .alert-label-title{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 26px;
+    min-width: 110px;
+    padding: 0 3px 0 13px;
+  }
+  .alert-label-value{
+    word-wrap: break-word;
+    white-space: normal;
+    overflow: hidden;
+    max-width: 200px;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 26px;
+  }
+  .danger{
+    background-color: #d64f40;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .success{
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  /deep/.active-icon{
+    margin-top: 0;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>

nezha-fronted/src/components/common/i18n.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
+import { get } from '@/http'
+import messages from './language'
 Vue.use(VueI18n)
 // 从localStorage获取语言选择。
 const i18n = new VueI18n({
-  locale: localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+  locale: localStorage.getItem('nz-language') || 'en', // 初始未选择默认 en 英文
-  // messages
+  messages
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
 

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

@@ -1,6 +1,6 @@
-import en from './en'
+import newen from './newen'
-import cn from './cn'
+import newcn from './newcn'
 export default {
-  en: en,
+  en: newen,
-  cn: cn
+  cn: newcn
 }

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

@@ -0,0 +1,70 @@
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包
+const newcn = {
+  setup: {
+    step0: '欢迎',
+    step1: '数据库',
+    step2: 'Redis',
+    step3: '系统',
+    host: 'Host',
+    port: '端口',
+    language: '语言',
+    welcome: {
+      header: '欢迎使用哪吒安装向导！',
+      guid: '向导将为您做什么?',
+      guid_1: '创建基本的配置',
+      guid_2: '尝试在数据库和Redis设置中查找问题',
+      toContinue: '继续',
+      creatFile: '出于安全原因，您需要通过创建文件来验证安装',
+      createFileTip: '这可以通过执行以下命令来完成',
+      next: '完成后单击“下一步”按钮.'
+    },
+    database: {
+      configTitle: '配置数据库连接',
+      configTip: '请手动创建数据库，并设置连接到此数据库的配置参数，完成后按“下一步”按钮'
+    },
+    redis: {
+      configTitle: '配置Redis连接',
+      configTip: '请设置连接到此redis的配置参数，完成后按“下一步”按钮'
+    },
+    system: {
+      configTitle: '系统配置',
+      configTip: '请输入管理员的用户名和密码，并设置Nezha WEB模块的安装信息，如IP:port',
+      federation: '联邦',
+      federationEnable: '可用',
+      federationDisable: '不可用'
+    },
+    name: '数据库名称',
+    username: '用户名',
+    pin: '密码',
+    alertPath: '网站URL',
+    alertPrefix: '警报前缀',
+    haMode: 'HA 模式',
+    haVip: '虚拟的 IP',
+    next: '下一步',
+    back: '返回',
+    finish: '完成',
+    invalidDb: '数据库配置可能存在一些错误',
+    invalidRedis: 'Redis的配置可能有一些错误',
+    invalidPin: 'Redis的密码可能错误',
+    requirePin: 'Redis可能需要密码',
+    wait: '配置已保存，请耐心等待生效',
+    reloadTimeout: '重新启动服务器花了太多时间，安装可能有一些问题',
+    hadConfig: '已经有人开始配置系统',
+    invalidCode: '身份验证无效，请按照{page}中的描述继续',
+    welcomePage: '欢迎页面',
+    inited: '系统已经被初始化'
+  },
+  login: {
+    username: '登录名',
+    pin: '密码',
+    login: '登录',
+    verify: '验证',
+    verifyDialogTitle: '双因子认证设置',
+    verifyTitle: '双因子认证',
+    verifyContent: '在您的移动设备上输入来自双因子应用程序的代码。 如果您丢失了设备，您可以输入您的恢复代码之一。',
+    verifyPlaceholder: '验证码',
+    bindFail: '绑定失败'
+  },
+  ...zhLocale
+}
+export default newcn

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

@@ -0,0 +1,79 @@
+import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包
+const newen = {
+// 命名原则
+// 创建使用New
+// 表示创建状态用Created，如创建时间Created Time
+// 告警使用Alert，而不是Alarm
+// 账号用Account，username、password等都属于account的一部分
+// A user is the person who uses the account, the account is an inanimate object that is merely registered to an e-mail address.
+  setup: {
+    step0: 'Welcome',
+    step1: 'Database',
+    step2: 'Redis',
+    step3: 'System',
+    host: 'Host',
+    port: 'Port',
+    language: 'Language',
+    welcome: {
+      header: 'Welcome to Nezha setup wizard!',
+      guid: 'What will the wizard do for you?',
+      guid_1: 'Create a basic configuration',
+      guid_2: 'Tries to find problems within your Database and Redis setup',
+      toContinue: 'To continue',
+      creatFile: 'For security reasons you need to authenticate for the installation by creating the file',
+      createFileTip: 'This can be done by executing the following command',
+      next: "Click the 'Next' button when you've finished."
+    },
+    database: {
+      configTitle: 'Configure DB connection',
+      configTip: "Please create database manually,and set the configuration parameters for connection to this database,Press 'Next' button when done"
+    },
+    redis: {
+      configTitle: 'Configure Redis connection',
+      configTip: "Please set the configuration parameters for connection to this redis,Press 'Next' button when done"
+    },
+    system: {
+      configTitle: 'System configuration',
+      configTip: 'Please enter username and password for administrator ,and set the Nezha WEB module install information,like IP:port',
+      federation: 'Federation',
+      federationEnable: 'Enable',
+      federationDisable: 'Disable'
+
+    },
+    name: 'Database name',
+    username: 'Username',
+    pin: 'Password',
+    alertPath: 'Site URL',
+    alertPrefix: 'Alert prefix',
+    haMode: 'HA mode',
+    haVip: 'Virtual IP',
+    next: 'Next',
+    back: 'Back',
+    finish: 'Finish',
+    invalidDb: 'There may be some errors in the configuration of the database',
+    invalidRedis: 'There may be some errors in the configuration of the Redis',
+    invalidPin: "Redis's password may be wrong",
+    requirePin: 'The password may be required by the Redis',
+    wait: 'The configuration has been saved, please wait patiently for it to take effect',
+    reloadTimeout: 'It took too much time to restart the server, there may be some problems when you install',
+    hadConfig: 'Someone has started to configure the system',
+    invalidCode: "The authentication is invalid ,please follow the description in {page} 'To continue'",
+    welcomePage: 'Welcome page',
+    inited: 'The system has been initialized'
+  },
+  login: {
+    username: 'Username',
+    pin: 'Password',
+    login: 'Login',
+    upload: 'Upload license',
+    verify: 'Verify code',
+    verifyDialogTitle: 'Two Factor Authentication Set Up',
+    verifyTitle: 'Two-Factor Authentication',
+    verifyContent: 'Enter the code from the two -factor app on your mobile device. If you\' ve lost your device, you may enter one of your recovery codes.',
+    verifyPlaceholder: 'verify code',
+    bindFail: 'Binding failure'
+  },
+  ...enLocale
+}
+
+export default newen

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

@@ -127,7 +127,7 @@ export default {
       license: {
         warnInfo: '',
         token: '',
-        valid: false
+        valid: true
       },
       uploadFileList: [],
       uploadFile: { file: '', path: '', uuid: '' },
@@ -148,7 +148,7 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading || !this.license.valid) {
+      if (this.loading || !this.license.valid || !this.license.token) {
         return
       }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
@@ -214,6 +214,9 @@ export default {
           localStorage.setItem('nz-username', this.loginData.username)
           localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
           localStorage.setItem('nz-language', this.lang)
+          res.data.user = {
+            lang: this.lang
+          }
           this.loginSuccess(res)
         } else {
           this.authToken = res.data.authToken

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

@@ -1,21 +1,21 @@
 <template>
   <div class="pagination">
-    <el-pagination
+      <el-pagination
-      ref="page"
+        ref="page"
-      :current-page="pageObj.pageNo"
+        @size-change="size"
-      :page-size="Number(pageObj.pageSize)"
+        @prev-click="prev"
-      :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
+        @next-click="next"
-      :total="this.pageObj.total"
+        @current-change="current"
-      layout="total, prev, pager, next, slot"
+        :current-page="pageObj.pageNo"
-      @size-change="size"
+        :page-sizes="pageSizes?pageSizes:[20, 50, 100]"
-      @prev-click="prev"
+        :page-size="Number(pageObj.pageSize)"
-      @next-click="next"
+        layout="total, prev, pager, next, slot"
-      @current-change="current"
+        :total="this.pageObj.total"
-    >
+      >
-      <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" :popper-append-to-body="appendToBody"  :popper-class="popClass" class="pagination-size-select" size="mini" @change="size" @visible-change="popperVisible">
+        <el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"  :popper-append-to-body="appendToBody" class="pagination-size-select" @change="size" :popper-class="popClass" @visible-change="popperVisible">
-        <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
+          <el-option v-for="(item, index) in pageSizes" :key="index" :label="item.label" :value="item.value"></el-option>
-      </el-select>
+        </el-select>
-    </el-pagination>
+      </el-pagination>
   </div>
 </template>
 
@@ -101,6 +101,7 @@ export default {
         wraps.forEach(wrap => {
           if (wrap) {
             wrap.scrollTop = 0
+            wrap.scrollLeft = 0
           }
         })
       })

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

@@ -13,7 +13,7 @@
         v-loading="tools.loading"
       >
         <template v-slot:top-tool-right>
-          <el-select v-model="state" size="small" value-key="value" @change="getTableData">
+          <el-select v-model="state" size="small" value-key="value" popper-class="right-box-select-top right-public-box-dropdown-top" @change="getTableData">
             <el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
           </el-select>
         </template>

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -1448,6 +1448,10 @@ export default {
             if (this.$refs.topTool) {
               this.$refs.topTool.scaleNum = parseInt(data * 100)
             }
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
             break
           }
           case 'locked': {
@@ -2052,7 +2056,6 @@ export default {
         item.animatePlay = item.data.animatePlay
         item.data.animateType = item.animateType
         if (item.type === 0 && JSON.stringify(item.data.imageId)) {
-          item.image = ''
           item.animateFrames = []
           item.animateReady = null
           delete item.img

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

@@ -102,7 +102,7 @@
                   <span class="datetime-header">{{$t('config.assetLabel.interval')}}: </span>
                   <el-switch
                     v-model="editAssetMeta.param.interval"
-                    @change="$forceUpdate"
+                    @change="$forceUpdate()"
                     active-color="#ee9d3f">
                   </el-switch>
                 </el-row>
@@ -110,7 +110,7 @@
               <div v-if="editAssetMeta.type.toUpperCase()==='DOUBLE'">
                 <el-row>
                   <span class="datetime-header">{{$t('config.assetLabel.decimals')}}: </span>
-                  <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate" :min="0" :max="10" :controls="false" size="small"></el-input-number>
+                  <el-input-number v-model="editAssetMeta.param.decimals" @change="$forceUpdate()" :min="0" :max="10" :controls="false" size="small"></el-input-number>
                 </el-row>
               </div>
             </el-form-item>

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

@@ -14,7 +14,8 @@
                             <li v-for="(val,ind) in history_once" @click="select_history(ind,$event)" :key="ind" :id="'search-history-pick-'+ind">
                                 <span v-for="(item,key) in val" :key="key">
                                     <span class="name">{{item.name}}: </span>
-                                    <span class="value">{{item.val+' '}}</span>
+                                    <span class="value" v-if="item.val">{{item.val+' '}}</span>
+                                    <span class="value" v-else>{{' '}}</span>
                                 </span>
                             </li>
                         </ul>

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

@@ -110,8 +110,8 @@
       fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
-        <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)" :disabled="scope.row.alertRule.type !== 1" :class="{'table-operation-item--disable': scope.row.alertRule.type !== 1}"><i class="nz-icon nz-icon-view1"></i></button>
-        <el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="click" @command="tableOperation">
+        <el-dropdown v-has="['alertMessage_expired', 'alertSilence_add']" size="medium" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more">
             <i class="nz-icon nz-icon-more3"></i>
           </div>

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -95,64 +95,61 @@
           </span>
         </template>
         <template v-else-if="item.prop === 'configs'">
-<!--          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
+          <span class="configs-endpoint metrics"
-<!--            <span class="configs-endpoint metrics">{ Metrics }</span>-->
+                @mouseenter="labelHover(scope.row, item.prop, true, $event)"
-<!--            <div class="endpointConfigsTips" slot="content">-->
+                @mouseleave="labelHover(scope.row, item.prop, false, $event, true)">
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[0].config)"></i></span>-->
+            [{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]
-<!--              <pre >{{JSON.stringify(scope.row.configs[0].config,null,2)}}</pre>-->
+          </span>
-<!--            </div>-->
+          <nz-tooltip :that="scope.row[item.prop]" class="data-column__" v-if="scope.row[item.prop] && scope.row[item.prop].loading" :type="item.prop">
-<!--          </el-tooltip>-->
+            <div name="default">
-<!--          <el-tooltip placement="right" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[1].enable">-->
-<!--            <span class="configs-endpoint logs">{ Logs }</span>-->
-<!--            <div class="endpointConfigsTips" slot="content">-->
-<!--              <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(scope.row.configs[1].config)"></i></span>-->
-<!--              <pre >{{JSON.stringify(scope.row.configs[1].config,null,2)}}</pre>-->
-<!--            </div>-->
-<!--          </el-tooltip>-->
-
-          <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable || scope.row.configs[1].enable">
-            <span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ?  'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ?  'logs' : ''}}]</span>
-            <div class="endpointConfigsTips" slot="content">
               <span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
               <pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
             </div>
-          </el-tooltip>
+          </nz-tooltip>
         </template>
+
         <template v-else-if="item.prop === 'state'">
-          <el-popover placement="left" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[0].state<2">
+          <!--          metrics-->
-            <div>
+          <span style="width: auto;display: inline-block;cursor: pointer"
+                @mouseenter="labelHoverConfigs(scope.row, 0, true, $event)"
+                @mouseleave="labelHoverConfigs(scope.row, 0, false, $event)"
+          >
+            <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
+            <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
+              <span class="active-icon red-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state===1">
+              <span class="active-icon green-bg inline-block"></span>
+            </span>
+            <span v-else-if="scope.row.configs[0].state">
+              <span class="active-icon gray-bg inline-block"></span>
+            </span>
+          </span>
+          <nz-tooltip :that="scope.row.configs[0]"  v-if="scope.row.configs[0] && scope.row.configs[0].loading && scope.row.configs[0].state  > 1" :type="'configs[0]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[0].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
+          </nz-tooltip>
-              <span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics active" /> {{$t('project.endpoint.metrics')}} </span>
+          <!--          logs-->
-              <span v-if="scope.row.configs[0].state===0 || !scope.row.configs[0].state">
+         <span style="width: auto;display: inline-block;cursor: pointer"
-                <span class="active-icon red-bg inline-block"></span>
+               @mouseenter="labelHoverConfigs(scope.row, 1, true, $event)"
-              </span>
+               @mouseleave="labelHoverConfigs(scope.row, 1, false, $event)">
-              <span v-else-if="scope.row.configs[0].state===1">
+           <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
-                <span class="active-icon green-bg inline-block"></span>
+           <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
-              </span>
+             <span class="active-icon red-bg inline-block"></span>
-              <span v-else-if="scope.row.configs[0].state">
+           </span>
-                <span class="active-icon gray-bg inline-block"></span>
+           <span v-else-if="scope.row.configs[1].state===1">
-              </span>
+             <span class="active-icon green-bg inline-block"></span>
-            </span>
+           </span>
-          </el-popover>
+           <span v-else-if="scope.row.configs[1].state">
-          <el-popover placement="right" trigger="hover" width="100" :popper-class="''" :disabled="scope.row.configs[1].state<2">
+             <span class="active-icon gray-bg inline-block"></span>
-            <div>
+           </span>
+         </span>
+          <nz-tooltip :that="scope.row.configs[1]"  v-if="scope.row.configs[1] && scope.row.configs[1].loading && scope.row.configs[1].state > 1" :type="'configs[1]'">
+            <div name="default">
               <div v-html="suspendedStr(scope.row.configs[1].state)"></div>
             </div>
-            <span slot="reference" style="width: auto">
+          </nz-tooltip>
-              <span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs active" /> {{$t('project.endpoint.logs')}} </span>
-              <span v-if="scope.row.configs[1].state===0 || !scope.row.configs[1].state">
-                <span class="active-icon red-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state===1">
-                <span class="active-icon green-bg inline-block"></span>
-              </span>
-              <span v-else-if="scope.row.configs[1].state">
-                <span class="active-icon gray-bg inline-block"></span>
-              </span>
-            </span>
-          </el-popover>
         </template>
         <template v-else-if="item.prop === 'enabled'">
           <span v-if="scope.row[item.prop] === 1">{{$t('project.endpoint.enable')}}</span>
@@ -199,10 +196,12 @@
 <script>
 import table from '@/components/common/mixin/table'
 import alertLabel from '../../alert/alertLabel'
+import nzTooltip from '../../alert/nzTooltip'
 export default {
   name: 'endpointTable',
   components: {
-    alertLabel
+    alertLabel,
+    nzTooltip
   },
   mixins: [table],
   props: {
@@ -313,13 +312,38 @@ export default {
       return str
     },
     // label 鼠标划入
-    labelHover (item, type, loading, e) {
+    labelHover (item, type, loading, e, slow) {
       if (e) {
         const dom = e.currentTarget
         const position = dom.getBoundingClientRect()
         this.$set(item[type], 'position', position)
       }
-      this.$set(item[type], 'loading', loading)
+      if (slow) {
+        item[type].timeout = setTimeout(() => {
+          this.$set(item[type], 'loading', loading)
+        }, 200)
+      } else {
+        if (item[type].timeout) {
+          clearTimeout(item[type].timeout)
+          item[type].timeout = null
+        }
+        this.$set(item[type], 'loading', loading)
+      }
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    labelHoverConfigs (item, type, loading, e, slow) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item.configs[type], 'position', position)
+      }
+      if (slow) {
+        item.configs[type].timeout = setTimeout(() => {
+          this.$set(item.configs[type], 'loading', loading)
+        }, 200)
+      } else {
+        this.$set(item.configs[type], 'loading', loading)
+      }
       // this.$set(this.tableData,index,item);// 调用父组件
     },
     clConfigs (item) {
@@ -349,6 +373,9 @@ export default {
     border-radius: 4px;
     padding: 2px 7px;
     color: #3C92F1;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
   }
   .configs-endpoint.metrics{
     color: #3C92F1;
@@ -371,16 +398,10 @@ export default {
   .endpoint-cell-left{
     margin-right: 5px;
   }
-</style>
-<style>
-  .endpointConfigsTips{
-    min-width: 150px;
-    padding:3px 3px 0 8px ;
-  }
   .copy-value-content{
     position: absolute;
-    right: 6px;
+    right: 8px;
-    top: 6px;
+    top: 4px;
   }
   .copy-value-content__pre {
     height: 200px;

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

@@ -450,7 +450,11 @@ export default {
       }
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
-        this.graphShow = true
+        if (row.alertRule.type !== 1) {
+          this.graphShow = false
+        } else {
+          this.graphShow = true
+        }
         this.$nextTick(() => {
           this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
           this.queryDate()
@@ -819,6 +823,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       if (this.detailType === 'view') {
         const obj = {}

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

@@ -485,6 +485,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       if (this.detailType === 'view') {
         const obj = {}

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

@@ -90,13 +90,12 @@ export default {
             pin: this.user.pin,
             newPin: this.user.newPin
           }
-          this.$get('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
+          this.$put('/sys/user/pin?oldPin=' + paramObj.pin + '&newPin=' + paramObj.newPin).then(response => {
             if (response && response.code == 200) {
               this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.user.pin = ''
               this.user.newPin = ''
               this.user.confirmPin = ''
-              this.close()
             } else {
               this.$message.error(response.msg)
             }

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

@@ -17,7 +17,7 @@
               <el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
-              <el-select v-model="basic.timezone" id="system-baisc-timezone" filterable popper-class="right-box-select-top">
+              <el-select v-model="basic.timezone" id="system-baisc-timezone" filterable popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.name" :value="item.name" >
                   <div style="display: flex;justify-content: space-between;padding: 5px;">
                     <div >{{item.name}}</div>
@@ -75,7 +75,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.asset_ping_from')" prop="asset_ping_from">
-              <el-select v-model="monitor.asset_ping_from" popper-class="right-box-select-top">
+              <el-select v-model="monitor.asset_ping_from" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option label="Global" value="1"></el-option>
                 <el-option label="Per-datacenter" value="2"></el-option>
               </el-select>
@@ -88,7 +88,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="metrics_storage_type">
-              <el-select v-model="monitor.metrics_storage_type" popper-class="right-box-select-top">
+              <el-select v-model="monitor.metrics_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
                 <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
               </el-select>
@@ -125,7 +125,7 @@
               </el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.monitor.logs_storage_type')" prop="logs_storage_type">
-              <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top">
+              <el-select v-model="monitor.logs_storage_type" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
                 <el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
               </el-select>
@@ -198,7 +198,7 @@
               <div class="el-form-item__tip">{{$t("config.system.email.testAccountTip")}}</div>
             </el-form-item>
             <el-form-item :label="$t('config.system.email.securityType')" prop="email_security_type">
-              <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'" popper-class="right-box-select-top">
+              <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'" popper-class="right-box-select-top right-public-box-dropdown-top">
                 <el-option label="None" value="NONE"></el-option>
                 <el-option label="SSL" value="SSL"></el-option>
                 <el-option label="TLS" value="TLS"></el-option>
@@ -294,7 +294,7 @@
           <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
             <el-form-item  prop="type" :label="$t('config.system.reset.type')">
-              <el-select v-model="reset.type" :placeholder="$t('el.select.placeholder')" multiple popper-class="right-box-select-top">
+              <el-select v-model="reset.type" :placeholder="$t('el.select.placeholder')" multiple popper-class="right-box-select-top right-public-box-dropdown-top">
                 <template v-for="item in resetOptions" >
                   <el-option :label="item.label" :value="item.value" :key="item.label"></el-option>
                 </template>

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -117,6 +117,7 @@ export default {
     return {
       url: 'visual/panel/chart',
       tableId: 'chartTemp',
+      orderBy: 'id',
       /* 搜素相关 */
       searchMsg: { // 给搜索框子组件传递的信息
         searchLabelList: [

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

@@ -121,7 +121,7 @@
             </el-form-item>-->
             <!--lock-->
             <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="lock">
-              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate">
+              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
                 <el-option v-for="item in lockList" :key="item.value" :label="$t(item.label)" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
                 </el-option>
@@ -149,7 +149,7 @@
             </el-form-item>
 
             <el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
-              <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate">
+              <el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="$forceUpdate()">
                 <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
                   <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
                 </el-option>
@@ -274,11 +274,11 @@
             </el-radio-group>
           </el-form-item>
           <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
-            <template  v-for="(mapping, index) in editChart.param.valueMapping.mapping">
+            <div  v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
                 <el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
               </el-form-item>
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other  form-item--half-width-other-two" prop="span">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other  form-item--half-width-other-two" prop="span">
                 <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
                 <!--颜色选择器 start-->
                 <div class="color-show">
@@ -287,11 +287,11 @@
                 <!--颜色选择器 end-->
                 <span  class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
               </el-form-item>
-            </template>
+            </div>
           </template>
           <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
-            <template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
+            <div v-for="(mapping, index) in editChart.param.valueMapping.mapping" :key="index">
-              <div :key="index" class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
+              <div class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
                 <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
                   <el-input v-model="mapping.from" size="small" type="input"></el-input>
                 </el-form-item>
@@ -299,17 +299,16 @@
                   <el-input v-model="mapping.to" size="small" type="input"></el-input>
                 </el-form-item>
               </div>
-              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
                 <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
                 <!--颜色选择器 start-->
                 <div class="color-show">
                   <nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
                 </div>
-
                 <!--颜色选择器 end-->
                 <span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus"  style="color: #EC7F66"></i></span>
               </el-form-item>
-            </template>
+            </div>
           </template>
 
           <!--value mapping end-->
@@ -1545,6 +1544,7 @@ export default {
       })
     },
     valueMappingChange: function (value) {
+      console.log(this.editChart.param.valueMapping.type)
       if (this.editChart.param.valueMapping.type == 'value') {
         this.editChart.param.valueMapping.mapping = [{ text: '', value: '', color: { bac: '#fff', text: '#000' } }]
         this.showPicker = [{ bac: false, text: false }]

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

@@ -427,7 +427,8 @@ export default {
       }
     },
     toProject (projectInfo) { // 跳转对应project页面
-      this.$store.commit('setOverViewProject', projectInfo)
+      this.$store.commit('currentProjectChange', projectInfo)
+      this.jumpTo('project')
     },
     queryAssetData () {
       return new Promise(resolve => {

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -624,6 +624,7 @@ export default {
       })
     },
     reloadTable (obj) {
+      this.pageObj.pageNo = 1
       const params = JSON.parse(JSON.stringify(obj))
       delete this.searchCheckBox.metricsStates
       delete this.searchCheckBox.logsStates