NEZ-2830 feat：explore 地址栏增加查询参数

nezha-fronted/src/assets/css/components/page/integration/integration.scss

@@ -69,6 +69,7 @@
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 4;
         overflow: hidden;
+        word-break: break-all;
       }
       .integration-internal{
         padding: 0 8px;

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

@@ -2,7 +2,7 @@
   <div class="interval-refresh margin-r-10">
     <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
-    <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
+    <chart-unit v-if="useChartUnit" v-model="unit" ref="chartUnit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
       <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake" :title="id === 'explore' ? '': $t('dashboard.refresh')">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;

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

@@ -30,19 +30,29 @@ export default {
       return this.exploreItems.length === 2
     }
   },
+  created () {
+    const param = this.$route.query
+    if (param.left && param.right) {
+      this.exploreItems.push(1)
+    }
+  },
   methods: {
     split (index) {
       const tabIndex = this.exploreItems.indexOf(index)
       if (tabIndex > -1) {
-        if (this.exploreItems.length === 2) {
+        if (this.exploreItems.length === 2) { // 删除
           this.exploreItems.splice(tabIndex, 1)
-        } else {
-          this.exploreItems.push(index === 0 ? 1 : 0)
-          if (!this.$refs.exploreItem[0].showMetrics) {
           this.$nextTick(() => {
-              this.$refs.exploreItem[1].selectMetricsLogs(this.$t('overall.logs'), 'nz-icon nz-icon-logs', 'Logs')
+            this.$refs.exploreItem[0].updatePath()
           })
+        } else { // 添加
+          this.exploreItems.push(index === 0 ? 1 : 0)
+          this.$nextTick(() => {
+            if (!this.$refs.exploreItem[0].showMetrics) {
+              this.$refs.exploreItem[1].selectMetricsLogs(this.$t('overall.logs'), 'nz-icon nz-icon-logs', 'Logs')
             }
+            this.$refs.exploreItem[1].updatePath()
+          })
         }
         this.$nextTick(() => {
           this.$refs.exploreItem.forEach(e => {

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

@@ -76,7 +76,7 @@
               :metricOptionsParent="metricOptions"
               v-for="index of promqlKeys.length"
               :id="promqlKeys[index-1].id"
-              :pqid="tabIndex.toString()"
+              :pqid="promqlKeys[index-1].id"
               :key="promqlKeys[index-1].id"
               :ref="'promql-'+(index-1)"
               :expression-list="expressions"
@@ -96,7 +96,7 @@
             <promql-input
               v-for="index of promqlKeys.length"
               :id="promqlKeys[index-1].id"
-              :pqid="tabIndex.toString()"
+              :pqid="promqlKeys[index-1].id"
               :key="promqlKeys[index-1].id"
               :ref="'promql-'+(index-1)"
               :expression-list="expressions"
@@ -3510,9 +3510,9 @@ export default {
       selectIcon: 'nz-icon nz-icon-Metrics',
       // language: localStorage.getItem('nz-language') || 'en',
       showMetrics: true,
-      promqlCount: 1,
+      promqlCount: 0,
       promqlKeys: [],
-      expressions: [''],
+      expressions: [],
       filterTime: [
         bus.timeFormate(bus.getOffsetTimezoneData(-1)),
         bus.timeFormate(bus.getOffsetTimezoneData())
@@ -3538,7 +3538,7 @@ export default {
       tableData: [],
       saveDisabled: true,
       panelData: [],
-      chartUnit: 0,
+      chartUnit: 2,
       historyParam: { useHistory: true, key: 'expore-history' },
       chartData: {},
       collapseValue: ['1', '2'],
@@ -3557,15 +3557,12 @@ export default {
   },
   created () {
     this.getPanelData()
-    this.promqlKeys.push({
+    this.resetExpression()
-      id: getUUID(),
-      state: 1
-    })
-    this.selectMetricsLogs()
   },
   mounted () {
     this.scrollbarWrap = this.$refs.exploreScrollbar
     this.scrollbarWrap.addEventListener('scroll', this.onScroll)
+    this.initQueryFromPath()
   },
   beforeDestroy () {
     this.scrollbarWrap.removeEventListener('scroll', this.onScroll)
@@ -3981,17 +3978,83 @@ export default {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.pageObj.pageNo = 1
       this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      if (this.showMetrics) {
       if (this.expressions && this.expressions.length >= 1) {
+        if (this.showMetrics) {
           this.queryTableData()
           this.queryChartData()
           this.storeHistory()
-        }
         } else {
-        if (this.expressions && this.expressions.length >= 1) {
           this.queryLogData()
         }
       }
+      this.updatePath()
+    },
+    initQueryFromPath () {
+      const param = this.$route.query[this.position]
+      if (param) {
+        const data = JSON.parse(param)
+        // 根据地址栏参数设置时间
+        const nowTimeType = data.nowTimeType
+        this.filterTime = data.searchTime
+        if (nowTimeType && nowTimeType.type) {
+          this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
+        }
+        if (nowTimeType) {
+          nowTimeType.start_time = this.filterTime[0]
+          nowTimeType.end_time = this.filterTime[1]
+          this.$refs.pickTime.$refs.timePicker.setCustomTime(nowTimeType)
+        }
+        // 设置单位
+        this.chartUnit = data.unit || 2
+        this.$refs.pickTime.unit = this.chartUnit
+        this.$refs.pickTime.$refs.chartUnit.unit = this.chartUnit
+        // 设置selectValue
+        const find = this.searchMetrics.find(item => item.value == data.type)
+        this.selectMetricsLogs(find.label, find.icon, find.value)
+        // 设置表达式
+        this.promqlCount = data.queries.length
+        data.queries.forEach((item, index) => {
+          this.$set(this.expressions, index, item.expr)
+          if (this.promqlKeys[index]) {
+            this.promqlKeys[index].state = item.state
+          } else {
+            this.promqlKeys[index] = {
+              id: getUUID(),
+              state: item.state
+            }
+          }
+        })
+        setTimeout(() => {
+          this.expressionChange()
+        }, 200)
+      }
+    },
+    updatePath () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      const queries = this.expressions.map((item, index) => {
+        return {
+          expr: item,
+          state: this.promqlKeys[index].state
+        }
+      })
+      const q = {
+        type: this.showMetrics ? 'Metrics' : 'Logs',
+        unit: this.chartUnit,
+        queries: queries,
+        nowTimeType: nowTimeType,
+        searchTime: this.filterTime
+      }
+      const exploreItems = this.$parent.exploreItems
+      let param = JSON.parse(JSON.stringify(this.$route.query))
+      delete param.t
+      if (exploreItems.length === 1) { // 一列
+        param = {
+          left: JSON.stringify(q)
+        }
+      } else { // 两列
+        param[this.position] = JSON.stringify(q)
+      }
+      this.$router.replace({ query: param })
     },
     setSearchTime (type, val) { // 设置searchTime
       if (type === 'minute') {
@@ -4103,7 +4166,7 @@ export default {
       if (!temp) {
         this.showIntroduce = true
       }
-      // this.expressionChange()
+      this.updatePath()
     },
     addExpression (index) {
       this.expressions.splice(index + 1, 0, '')
@@ -4327,6 +4390,11 @@ export default {
   computed: {
     language () {
       return this.$store.getters.getLanguage
+    },
+    position () {
+      const exploreItems = this.$parent.exploreItems
+      const tabIndex = exploreItems.indexOf(this.tabIndex)
+      return tabIndex ? 'right' : 'left'
     }
   },
   watch: {

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

@@ -678,9 +678,9 @@ export default {
           ],
           doc: self.codeMirrorValue[self.index],
           editorState: {
-            changeByRange: self.newChange(),
+            changeByRange: self.newChange,
-            changes: self.newDoc(),
+            changes: self.newDoc,
-            facet: self.newChange()
+            facet: self.newChange
           }
         })
         const view = new EditorView({