NEZ-2836 feat：dashboard内置全局变量

2023-05-24 17:02:26 +08:00
parent 33b88fed54
commit 73326755b5
12 changed files with 234 additions and 35 deletions
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -17,6 +17,7 @@
        :showAllData="showAllData"
        @chartIsNoData="chartIsNoData"
        :from="from"
+        :globalVariables="globalVariables"
      ></chart-time-series>
      <chart-doughnut
        :ref="'chart' + chartInfo.id"
@@ -26,6 +27,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-doughnut>
      <chart-rose
        :ref="'chart' + chartInfo.id"
@@ -35,6 +37,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-rose>
      <chart-bar
        :ref="'chart' + chartInfo.id"
@@ -44,6 +47,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-bar>
      <chartHexagonD3
        :ref="'chart'+chartInfo.id"
@@ -53,6 +57,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chartHexagonD3>
      <chart-url
        :ref="'chart' + chartInfo.id"
@@ -62,6 +67,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-url>
      <chart-text
        :ref="'chart' + chartInfo.id"
@@ -71,6 +77,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-text>
      <chart-treemap
        :ref="'chart' + chartInfo.id"
@@ -80,6 +87,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-treemap>
      <chart-log
        :ref="'chart' + chartInfo.id"
@@ -90,6 +98,7 @@
        :is-fullscreen="isFullscreen"
        @refreshLogs="refreshLogs"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-log>
      <chart-stat
        :ref="'chart' + chartInfo.id"
@@ -99,6 +108,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-stat>
      <chart-gauge
        :ref="'chart' + chartInfo.id"
@@ -108,6 +118,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-gauge>
      <chart-diagram
        :ref="'chart' + chartInfo.id"
@@ -117,6 +128,7 @@
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
        :chart-option="chartOption"
+        :globalVariables="globalVariables"
      ></chart-diagram>
      <chartAutotopology
        :ref="'chart' + chartInfo.id"
@@ -126,6 +138,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chartAutotopology>
      <chartMap
        :ref="'chart' + chartInfo.id"
@@ -135,6 +148,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chartMap>
      <chart-asset-info
        :ref="'chart' + chartInfo.id"
@@ -145,6 +159,7 @@
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
        :from="from"
+        :globalVariables="globalVariables"
      ></chart-asset-info>
      <chart-endpoint-info
        :ref="'chart' + chartInfo.id"
@@ -155,6 +170,7 @@
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
        :from="from"
+        :globalVariables="globalVariables"
      ></chart-endpoint-info>
      <chart-table
        :ref="'chart' + chartInfo.id"
@@ -164,6 +180,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-table>
      <chart-group
        :ref="'chart' + chartInfo.id"
@@ -176,6 +193,7 @@
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
        :chart-option="chartOption"
+        :globalVariables="globalVariables"
      ></chart-group>
      <chart-clock
        :ref="'chart' + chartInfo.id"
@@ -185,6 +203,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-clock>
      <chart-topology
        :ref="'chart' + chartInfo.id"
@@ -194,6 +213,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-topology>
      <chart-bubble
        :ref="'chart' + chartInfo.id"
@@ -203,6 +223,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-bubble>
      <chart-rank
        :ref="'chart' + chartInfo.id"
@@ -212,6 +233,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-rank>
      <chart-sankey
        :ref="'chart' + chartInfo.id"
@@ -221,6 +243,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-sankey>
      <chart-funnel
        :ref="'chart' + chartInfo.id"
@@ -230,6 +253,7 @@
        :chart-option="chartOption"
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
+        :globalVariables="globalVariables"
      ></chart-funnel>
    </template>
  </div>
@@ -256,7 +280,6 @@ import chartText from './chart/chartText'
 import chartTimeSeries from './chart/chartTimeSeries'
 import chartTreemap from './chart/chartTreemap'
 import chartUrl from './chart/chartUrl'
-import chartValue from './chart/chartValue'
 import chartHexagonD3 from './chart/chartHexagonD3'
 import chartMap from './chart/chartMap'
 import chartTopology from './chart/chartTopology'
@@ -290,7 +313,6 @@ export default {
    chartTimeSeries,
    chartTreemap,
    chartUrl,
-    chartValue,
    chartHexagonD3,
    chartMap,
    chartTopology,
@@ -322,7 +344,8 @@ export default {
    isExportHtml: {
      type: Boolean,
      default: false
-    }
+    },
+    globalVariables: {}
  },
  data () {
    return {
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/nezha-fronted/src/components/chart/chart/chartLog.vue
@@ -186,6 +186,7 @@ export default {
    aliasLegend (row) {
      let host = ''// up,
      let alias = ''
+      row.elements.legend = this.globalVariablesReplace(row.elements.legend)
      if (row.labels && Object.keys(row.labels).length > 0) {
        const metric = Object.keys(row.labels)
        if (metric.__name__) {
@@ -292,7 +293,9 @@ export default {
      deep: true,
      handler (n) {
        // this.tableData = this.tableData.reverse()
-        this.$emit('refreshLogs', this.operations)
+        this.$nextTick(() => {
+          this.$emit('refreshLogs', this.operations)
+        })
      }
    }
  }
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -12,7 +12,7 @@
      <el-table-column
        v-for="(col, index) in columns"
        :prop="col.title"
-        :key="`col-${index}-${item.prop}`"
+        :key="`col-${index}`"
        :min-width="160"
        :sort-orders="['ascending', 'descending']"
        class="data-column"
@@ -206,6 +206,7 @@ export default {
          oldValue: ''
        }
        if (/\{\{.+\}\}/.test(column.display)) {
+          column.display = this.globalVariablesReplace(column.display)
          const labelValue = column.display.replace(/(\{\{.+?\}\})/g, function (i) {
            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
            let value = null
--- a/nezha-fronted/src/components/chart/chart/chartValue.vue
+++ b/nezha-fronted/src/components/chart/chart/chartValue.vue
@@ -1,9 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: 'chart-value' // 单值图
-}
-</script>
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -120,6 +120,7 @@ export default {
          str = str.replace(reg, item.checked.map(label => label.replace(/\\"/g, '"').replace(/\\'/g, "'")).join('+'))
        })
      }
+      this.chartInfo.varName = str
      return str
    }
  },
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -37,7 +37,8 @@ export default {
    dialogPadding: {
      type: Number,
      default: 0
-    }
+    },
+    globalVariables: {}
  },
  computed: {
    filterTime () {
@@ -239,6 +240,9 @@ export default {
      const myParams = JSON.parse(JSON.stringify(params))
      myParams.$labels = JSON.parse(JSON.stringify(params))
      myParams.$value = myParams.value
+      if (this.from !== 'meta2dTooltip') {
+        aliasExpression = this.globalVariablesReplace(aliasExpression)
+      }
      if (/\{\{.+\}\}/.test(aliasExpression)) {
        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
@@ -275,6 +279,18 @@ export default {
        return aliasExpression
      }
    },
+    globalVariablesReplace (expression) {
+      let str = expression
+      if (str) {
+        this.globalVariables.forEach(item => {
+          const reg = new RegExp('{{\\' + item.name + '}}', 'g')
+          if (item.value != null) {
+            str = str.replace(reg, item.value)
+          }
+        })
+      }
+      return str
+    },
    selectMapping (value, valueMapping, show) {
      let mapping = ''
      if (show && valueMapping) {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -43,6 +43,7 @@
    <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
    <chart
      ref="chart"
+      :globalVariables="globalVariables"
      :chart-data="chartData"
      :chart-info="chartInfo"
      :panelLock="panelLock"
@@ -75,10 +76,11 @@ import assetInfoData from '@/components/chart/assetInfoData'
 import endpointInfoData from '@/components/chart/endpointInfoData'
 import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
-
+import globalVariablesMixin from '@/components/common/mixin/globalVariables'
 export default {
  // 该组件用于获取chart的具体数据
  name: 'panelChart',
+  mixins: [globalVariablesMixin],
  components: {
    chartHeader,
    chart,
@@ -144,6 +146,27 @@ export default {
  },
  methods: {
    isGroup,
+    variablesHandle (searchTime) {
+      this.myVariables = []
+      // eslint-disable-next-line vue/no-mutating-props
+      this.chartInfo.elements = this.$loadsh.cloneDeep(this.chartInfo.oldElements.filter(item => item.state)) // 处理不显示的表达式
+      // eslint-disable-next-line vue/no-mutating-props
+      this.chartInfo.elements = this.chartInfo.elements.map((item, index) => { // 处理表达式的变量
+        // 全局变量替换
+        this.setGlobalVariablesValue(searchTime)
+        item.expression = this.globalVariablesReplace(item.expression, searchTime)
+        // group图表设置repeat的表达式替换
+        if (this.chartInfo.repeatVariable) {
+          item.expression = this.variablesReplaceRepeat(item.expression)
+        }
+        const variables = this.variablesReplace((item.expression))
+        this.myVariables.push(variables)
+        return {
+          ...item,
+          expression: variables
+        }
+      })
+    },
    dateChange (filter, multipleTime) {
      this.loading = true
      // TODO assetInfo、endpointInfo、echarts等进行不同的处理
@@ -152,6 +175,7 @@ export default {
      const step = bus.getStep(startTime, endTime)
      startTime = this.$stringTimeParseToUnix(startTime)
      endTime = this.$stringTimeParseToUnix(endTime)
+      this.variablesHandle([filter.start_time, filter.end_time])
      const elements = this.chartInfo.elements || []
      if (multipleTime.length) {
        const minusTime = (new Date(bus.formateTimeToTime(filter.start_time)).getTime() - new Date(bus.formateTimeToTime(multipleTime[0])).getTime())
@@ -169,7 +193,6 @@ export default {
        return
      }
      this.chartData = window.dataJson ? this.chartData : []
-      this.myVariables = []
      this.loading = true
      // TODO assetInfo、endpointInfo、echarts等进行不同的处理
      let startTime = ''
@@ -203,21 +226,7 @@ export default {
      if (!this.chartInfo.oldElements) { // 创建一个备份 用于判断变量替换 能拿到原本变量的位置
        this.chartInfo.oldElements = this.chartInfo.elements ? JSON.parse(JSON.stringify(this.chartInfo.elements)) : []
      }
-      // eslint-disable-next-line vue/no-mutating-props
-      this.chartInfo.elements = this.$loadsh.cloneDeep(this.chartInfo.oldElements.filter(item => item.state)) // 处理不显示的表达式
-      // eslint-disable-next-line vue/no-mutating-props
-      this.chartInfo.elements = this.chartInfo.elements.map((item, index) => { // 处理表达式的变量
-        // group图表设置repeat的表达式替换
-        if (this.chartInfo.repeatVariable) {
-          item.expression = this.variablesReplaceRepeat(item.expression)
-        }
-        const variables = this.variablesReplace((item.expression))
-        this.myVariables.push(variables)
-        return {
-          ...item,
-          expression: variables
-        }
-      })
+      this.variablesHandle()
      const elements = this.chartInfo.elements || []
      if (this.isExportHtml) {
        this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params)
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
@@ -880,8 +880,10 @@ export default {
    },
    showPanel: {
      handler () {
-        this.setDefaultTimeRange()
-        this.setDefaultRefresh()
+        if (this.from !== this.fromRoute.dashboardTemp) {
+          this.setDefaultTimeRange()
+          this.setDefaultRefresh()
+        }
      }
    },
    // 监听图表联动配置
@@ -936,6 +938,10 @@ export default {
    document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)
    this.scrollbarWrap && this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
    this.$store.dispatch('dispatchPanelLock', { flag: true })
+    this.$store.dispatch('dispatchPanelTime', {
+      time: [],
+      nowTimeType: {}
+    })

    // 页面销毁 清除图表联动
    this.$store.commit('setCurrentMousemove', 0)
--- a/nezha-fronted/src/components/common/mixin/globalVariables.js
+++ b/nezha-fronted/src/components/common/mixin/globalVariables.js
@@ -0,0 +1,140 @@
+import bus from '@/libs/bus'
+import { stringTimeParseToUnixMs } from '@/components/common/js/tools.js'
+export default {
+  data () {
+    return {
+      globalVariables: [
+        { name: '$G.dashboard.name', value: null }, // dashboard名称
+        { name: '$G.from.ms', value: null }, // 选定时间开始时间，单位ms
+        { name: '$G.from.s', value: null }, // 选定时间开始时间，单位s
+        { name: '$G.to.ms', value: null }, // 选定时间结束时间，单位ms
+        { name: '$G.to.s', value: null }, // 选定时间结束时间，单位s
+        { name: '$G.from.date', value: null }, // 选定时间开始时间，根据系统设定时间格式显示
+        { name: '$G.to.date', value: null }, // 选定时间结束时间，根据系统设定时间格式显示
+        { name: '$G.range.ms', value: null }, // to - from ，单位ms
+        { name: '$G.range.s', value: null }, // to - from，单位s
+        { name: '$G.range.text', value: null }, // to - from ,文字显示，如：1h24min
+        { name: '$G.chart.name', value: null }, // chart 名称
+        { name: '$G.interval.ms', value: null }, // 计算的step参数值，单位ms
+        { name: '$G.interval.s', value: null } // 计算的step参数值，单位s
+      ]
+    }
+  },
+  mounted () {
+    this.setGlobalVariablesValue()
+  },
+  methods: {
+    setGlobalVariablesValue (searchTime) {
+      const timeRange = searchTime || this.timeRange
+      if (!timeRange) {
+        return
+      }
+      this.globalVariables.forEach(item => {
+        switch (item.name) {
+          case '$G.dashboard.name': {
+            item.value = this.chartInfo.dashboard ? this.chartInfo.dashboard.name : ''
+            break
+          }
+          case '$G.from.ms': {
+            item.value = stringTimeParseToUnixMs(bus.formateTimeToTime(timeRange[0]))
+            break
+          }
+          case '$G.from.s': {
+            item.value = this.$stringTimeParseToUnix(bus.formateTimeToTime(timeRange[0]))
+            break
+          }
+          case '$G.to.ms': {
+            item.value = stringTimeParseToUnixMs(bus.formateTimeToTime(timeRange[1]))
+            break
+          }
+          case '$G.to.s': {
+            item.value = this.$stringTimeParseToUnix(bus.formateTimeToTime(timeRange[1]))
+            break
+          }
+          case '$G.from.date': {
+            item.value = bus.timeFormate(timeRange[0])
+            break
+          }
+          case '$G.to.date': {
+            item.value = bus.timeFormate(timeRange[1])
+            break
+          }
+          case '$G.range.ms': {
+            item.value = stringTimeParseToUnixMs(bus.formateTimeToTime(timeRange[1])) - stringTimeParseToUnixMs(bus.formateTimeToTime(timeRange[0]))
+            break
+          }
+          case '$G.range.s': {
+            item.value = this.$stringTimeParseToUnix(bus.formateTimeToTime(timeRange[1])) - this.$stringTimeParseToUnix(bus.formateTimeToTime(timeRange[0]))
+            break
+          }
+          case '$G.range.text': {
+            item.value = this.rangeText(bus.formateTimeToTime(timeRange[0]), bus.formateTimeToTime(timeRange[1]))
+            break
+          }
+          case '$G.chart.name': {
+            item.value = this.chartInfo.varName
+            break
+          }
+          case '$G.interval.ms': {
+            const step = bus.getStep(bus.formateTimeToTime(timeRange[0]), bus.formateTimeToTime(timeRange[1]))
+            const unit = step[step.length - 1]
+            let value
+            if (unit === 's') {
+              value = parseInt(step) * 1000
+            } else if (unit === 'm') {
+              value = parseInt(step) * 1000 * 60
+            }
+            item.value = value
+            break
+          }
+          case '$G.interval.s': {
+            const step = bus.getStep(bus.formateTimeToTime(timeRange[0]), bus.formateTimeToTime(timeRange[1]))
+            const unit = step[step.length - 1]
+            let value
+            if (unit === 's') {
+              value = parseInt(step)
+            } else if (unit === 'm') {
+              value = parseInt(step) * 60
+            }
+            item.value = value
+            break
+          }
+        }
+      })
+    },
+    globalVariablesReplace (expression) {
+      let str = expression
+      if (str) {
+        this.globalVariables.forEach(item => {
+          const reg = new RegExp('{{\\' + item.name + '}}', 'g')
+          if (item.value != null) {
+            str = str.replace(reg, item.value)
+          }
+        })
+      }
+      return str
+    },
+    rangeText (startTime, endTime) {
+      const range = this.$stringTimeParseToUnix(endTime) - this.$stringTimeParseToUnix(startTime)
+      let time = parseInt(range) + 's'
+      if (parseInt(range) > 60) {
+        const second = parseInt(range) % 60
+        let min = parseInt(range / 60)
+        time = min + 'min' + second + 's'
+
+        if (min > 60) {
+          min = parseInt(range / 60) % 60
+          let hour = parseInt(parseInt(range / 60) / 60)
+          time = hour + 'h' + min + 'min'
+
+          if (hour > 24) {
+            hour = parseInt(parseInt(range / 60) / 60) % 24
+            const day = parseInt(parseInt(parseInt(range / 60) / 60) / 24)
+            time = day + 'd' + hour + 'h'
+          }
+        }
+      }
+      return time
+    }
+  }
+}
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
@@ -13,6 +13,7 @@
      ref="panelChart"
      :chart-info="chartInfo"
      :show-header="false"
+      from="meta2dTooltip"
    />
  </div>
 </template>
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -503,7 +503,11 @@ export default {
        setTimeout(() => {
          const start = new Date().setHours(new Date().getHours() - 1)
          const end = new Date()
-          this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)]
+          if (this.from === 'dashboard') {
+            this.timeRange = this.$store.getters.getTimeRange
+          } else {
+            this.timeRange = [bus.computeTimezoneTime(start), bus.computeTimezoneTime(end)]
+          }
          this.prevChart = {
            ...lodash.cloneDeep(this.editChart),
            loaded: true
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -1268,6 +1268,10 @@ export default {
    document.removeEventListener('keydown', this.escExit)
    bus.$off('refreshPanel')
    this.$store.dispatch('dispatchPanelLock', { flag: true })
+    this.$store.dispatch('dispatchPanelTime', {
+      time: [],
+      nowTimeType: {}
+    })
    if (document.querySelector('#tableList')) {
      document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
      document.querySelector('#tableList').removeEventListener('mouseleave', this.tableListLeave)