NEZ-2105 feat：chart编辑metric/log表达式支持调整顺序

2022-08-05 10:26:43 +08:00
parent 50759f5e9e
commit 302dad4eaf
4 changed files with 122 additions and 76 deletions
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -12,22 +12,23 @@
        v-if="chartConfig.elements"
        class="metrics-input-box"
      >
-        <draggable v-model="chartConfig.elements"
-                   :move="move"
-                   @end="end"
-                   @start="start"
-                   :scroll-sensitivity="150"
-                   :options="{
-                 dragClass:'drag-chart-class',
-                 fallbackClass:'fallback-class',
-                 forceFallback:true,
-                 ghostClass:'chart-ghost',
-                 chosenClass:'choose-class',
-                 scroll:true,
-                 filter: '.drag-disabled',
-                 animation: 150,
-                 handle: '.chart-title-content'
-               }"  >
+        <draggable
+          v-model="chartConfig.elements"
+          :move="move"
+          @end="end"
+          @start="start"
+          :scroll-sensitivity="150"
+          :options="{
+            dragClass:'drag-chart-class',
+            fallbackClass:'fallback-class',
+            forceFallback:true,
+            ghostClass:'chart-ghost',
+            chosenClass:'choose-class',
+            scroll:true,
+            filter: '.drag-disabled',
+            animation: 150,
+            handle: '.drag-sort'
+          }">
        <el-row
          :key="index"
          class="element-item form-row-item thresholds-from-item"
@@ -54,19 +55,22 @@
            <span>
              <!-- 显示隐藏 -->
              <span v-if="expressionsShow[index-1].state === 1" @click="()=>{switchExpression(index - 1,1)}" :title="$t('overall.visible')" style="margin-right: 5px;padding-left: 10px">
-                  <i class="nz-icon nz-icon-mimakejian"></i>
+                <i class="nz-icon nz-icon-mimakejian"></i>
              </span>
              <span v-else @click="()=>{switchExpression(index - 1,0)}" :title="$t('overall.invisible')" style="margin-right: 5px;padding-left: 10px">
-                  <i class="nz-icon nz-icon-mimabukejian"></i>
+                <i class="nz-icon nz-icon-mimabukejian"></i>
              </span>
              <span @click="()=>{addExpression()}" style="margin-right: 5px" :title="$t('tip.add')">
-                  <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
              </span>
              <span @click="copyExpression(index - 1)" style="margin-right: 5px" :title="$t('overall.duplicate')">
-                  <i  class="nz-icon nz-icon-override"></i>
+                <i class="nz-icon nz-icon-override"></i>
              </span>
              <span @click="removeExpression(index - 1)" class="nz-icon-minus-medium" style="margin-right: 5px" :title="$t('overall.delete')">
-                  <i  class="nz-icon nz-icon-minus"></i>
+                <i class="nz-icon nz-icon-minus"></i>
+              </span>
+              <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
+                <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
              </span>
            </span>
          </div>
@@ -150,15 +154,15 @@
          prop="unit"
        >
          <el-cascader id="chart-box-unit"
-                       v-model="chartConfig.unit"
-                       :options="unitOptions"
-                       :props="{ expandTrigger: 'hover',emitPath:false }"
-                       :show-all-levels="false" filterable
-                       placeholder=""
-                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
-                       size="small"
-                       style="width: 100%"
-                       @change="unitSelected"
+            v-model="chartConfig.unit"
+            :options="unitOptions"
+            :props="{ expandTrigger: 'hover',emitPath:false }"
+            :show-all-levels="false" filterable
+            placeholder=""
+            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+            size="small"
+            style="width: 100%"
+            @change="unitSelected"
          >
          </el-cascader>
        </el-form-item>
@@ -1005,6 +1009,8 @@ export default {
      if (!this.chartConfig.elements.length) {
        this.addExpression()
      } else {
+        // 根据orderNum排序
+        this.chartConfig.elements = this.chartConfig.elements.sort((a, b) => a.orderNum - b.orderNum)
        this.chartConfig.elements.forEach(item => {
          this.addExpression(item)
        })
@@ -1198,9 +1204,22 @@ export default {
      if (!this.chartConfig.elements.length) {
        this.addExpression()
      } else {
-        this.chartConfig.elements.forEach(item => {
+        const expressionsShow = this.$loadsh.cloneDeep(this.expressionsShow)
+        this.chartConfig.elements.forEach((item, index) => {
          this.expressions.push(item.expression)
          this.expressionName.push(item.name)
+          // 更新promqlInput视图
+          this.$nextTick(() => {
+            this.$refs[`promql-${index}`][0].promqlInputChange(item)
+          })
+          // 设置orderNum排序
+          item.orderNum = index
+          // expressionsShow调整顺序
+          expressionsShow.forEach((subItem) => {
+            if (item.name == subItem.oldName) {
+              this.$set(this.expressionsShow, index, this.$loadsh.cloneDeep(subItem))
+            }
+          })
        })
      }
      this.change()
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -370,7 +370,15 @@ export default {
      if (this.expressions.length) {
        this.chartConfig.elements = []
        this.expressions.forEach((expr, i) => {
-          this.chartConfig.elements.push({ id: this.expressionsShow[i].elementId, expression: expr, type: 'expert', legend: this.expressionsShow[i].legend, name: this.expressionName[i], state: this.expressionsShow[i].state })
+          this.chartConfig.elements.push({
+            id: this.expressionsShow[i].elementId,
+            expression: expr,
+            type: 'expert',
+            legend: this.expressionsShow[i].legend,
+            name: this.expressionName[i],
+            state: this.expressionsShow[i].state,
+            orderNum: i
+          })
        })
      } else {
        this.chartConfig.elements = []
@@ -421,6 +429,16 @@ export default {
      letter += self.letter[num % 26]
      return letter
    },
+    getExpressionName () {
+      let name = ''
+      for (let i = 0; i <= this.expressionName.length; i++) {
+        name = this.transformNumToLetter(i)
+        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+          break
+        }
+      }
+      return name
+    },
    addExpression (item) {
      if (!item) {
        this.expressions.push('')
@@ -452,16 +470,29 @@ export default {
        )
      }
    },
-
-    getExpressionName () {
-      let name = ''
-      for (let i = 0; i <= this.expressionName.length; i++) {
-        name = this.transformNumToLetter(i)
-        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
-          break
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
+      this.expressionsShow.push(
+        {
+          ...this.expressionsShow[index],
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          elementId: ''
        }
-      }
-      return name
+      )
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+            this.$refs[`promql-${index}`][0].promqlInputChange(ex)
+          }
+        })
+      })
+      this.expressionChange()
    },
    removeExpression (index) {
      if (this.expressionsShow.length > 1) {
@@ -472,37 +503,13 @@ export default {
          this.expressions.forEach((ex, index) => {
            if (ex) {
              this.$refs[`promql-${index}`][0].metricChange(ex)
-              this.$refs[`promql-${index}`][0].promqlInputCahnge(ex)
+              this.$refs[`promql-${index}`][0].promqlInputChange(ex)
            }
          })
        })
        this.expressionChange()
      }
    },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      const expressionName = this.getExpressionName()
-      this.expressionName.push(expressionName)
-      this.expressionsShow.push(
-        {
-          ...this.expressionsShow[index],
-          show: true,
-          hideInput: true,
-          oldName: this.expressionName[index],
-          error: '',
-          elementId: ''
-        }
-      )
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            this.$refs[`promql-${index}`][0].metricChange(ex)
-            this.$refs[`promql-${index}`][0].promqlInputCahnge(ex)
-          }
-        })
-      })
-      this.expressionChange()
-    },
    showExpression (index) {
      this.expressionsShow[index - 1].show = !this.expressionsShow[index - 1].show
      this.$set(this.expressionsShow, index - 1, this.expressionsShow[index - 1])
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -425,7 +425,13 @@ export default {
      chartData: {},
      collapseValue: ['1', '2'],
      showTab: ['1', '2'],
-      logData: []
+      logData: [],
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G',
+        'H', 'I', 'J', 'K', 'L', 'M', 'N',
+        'O', 'P', 'Q', 'R', 'S', 'T',
+        'U', 'V', 'W', 'X', 'Y', 'Z'
+      ]
    }
  },
  created () {
@@ -1016,7 +1022,7 @@ export default {
        groupId: -1
      }
      this.expressions.forEach((exp, index) => {
-        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' })
+        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) })
      })
      this.chartData = chart
      this.rightBox.show = true
@@ -1053,7 +1059,7 @@ export default {
        remark: ''
      }
      this.expressions.forEach((exp, index) => {
-        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: 'A' })
+        chart.elements.push({ state: this.promqlKeys[index].state, expression: exp, legend: '', type: 'expert', id: '', name: this.transformNumToLetter(index) })
      })
      this.chartData = chart
      this.rightBox.show = true
@@ -1106,6 +1112,16 @@ export default {
    updateCustomTableTitle (custom) {
      this.tools.customTableTitle = custom
      this.$refs.exploreTable.doLayout()
+    },
+    transformNumToLetter (num) { // 相当于26进制 获取idaddExpression
+      const self = this
+      let letter = ''
+      const loopNum = parseInt(num / 26)
+      if (loopNum > 0) {
+        letter += this.transformNumToLetter(loopNum - 1)
+      }
+      letter += self.letter[num % 26]
+      return letter
    }
  },
  watch: {
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -713,13 +713,17 @@ export default {
    newDoc (val) {
      // console.log('doc', val)
    },
-    promqlInputCahnge (val) {
-      const text = this.newView.state.doc.toString()
-      this.newView.dispatch(
-        this.newView.state.update({
-          changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
-        })
-      )
+    promqlInputChange (val) {
+      if (this.type === 'metrics') {
+        try {
+          const text = this.newView.state.doc.toString()
+          this.newView.dispatch(
+            this.newView.state.update({
+              changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
+            })
+          )
+        } catch (error) {}
+      }
    },
    fetchFn (a, b) {
      const params = {}