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

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -12,7 +12,8 @@
         v-if="chartConfig.elements"
         class="metrics-input-box"
       >
-        <draggable v-model="chartConfig.elements"
+        <draggable
+          v-model="chartConfig.elements"
           :move="move"
           @end="end"
           @start="start"
@@ -26,7 +27,7 @@
             scroll:true,
             filter: '.drag-disabled',
             animation: 150,
-                 handle: '.chart-title-content'
+            handle: '.drag-sort'
           }">
         <el-row
           :key="index"
@@ -68,6 +69,9 @@
               <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>
               </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>
           <transition name="el-zoom-in-top">
@@ -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()

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 {
         )
       }
     },
-
+    copyExpression (index) {
-    getExpressionName () {
+      this.expressions.push(this.expressions[index])
-      let name = ''
+      const expressionName = this.getExpressionName()
-      for (let i = 0; i <= this.expressionName.length; i++) {
+      this.expressionName.push(expressionName)
-        name = this.transformNumToLetter(i)
+      this.expressionsShow.push(
-        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+        {
-          break
+          ...this.expressionsShow[index],
+          show: true,
+          hideInput: true,
+          oldName: expressionName,
+          error: '',
+          elementId: ''
         }
+      )
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+            this.$refs[`promql-${index}`][0].promqlInputChange(ex)
           }
-      return name
+        })
+      })
+      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])

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: {

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

@@ -713,13 +713,17 @@ export default {
     newDoc (val) {
       // console.log('doc', val)
     },
-    promqlInputCahnge (val) {
+    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 = {}