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

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"
+        <draggable
-                   :move="move"
+          v-model="chartConfig.elements"
-                   @end="end"
+          :move="move"
-                   @start="start"
+          @end="end"
-                   :scroll-sensitivity="150"
+          @start="start"
-                   :options="{
+          :scroll-sensitivity="150"
-                 dragClass:'drag-chart-class',
+          :options="{
-                 fallbackClass:'fallback-class',
+            dragClass:'drag-chart-class',
-                 forceFallback:true,
+            fallbackClass:'fallback-class',
-                 ghostClass:'chart-ghost',
+            forceFallback:true,
-                 chosenClass:'choose-class',
+            ghostClass:'chart-ghost',
-                 scroll:true,
+            chosenClass:'choose-class',
-                 filter: '.drag-disabled',
+            scroll:true,
-                 animation: 150,
+            filter: '.drag-disabled',
-                 handle: '.chart-title-content'
+            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"
+            v-model="chartConfig.unit"
-                       :options="unitOptions"
+            :options="unitOptions"
-                       :props="{ expandTrigger: 'hover',emitPath:false }"
+            :props="{ expandTrigger: 'hover',emitPath:false }"
-                       :show-all-levels="false" filterable
+            :show-all-levels="false" filterable
-                       placeholder=""
+            placeholder=""
-                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+            popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
-                       size="small"
+            size="small"
-                       style="width: 100%"
+            style="width: 100%"
-                       @change="unitSelected"
+            @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()

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: ''
         }
-      }
+      )
-      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])

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) {
-      const text = this.newView.state.doc.toString()
+      if (this.type === 'metrics') {
-      this.newView.dispatch(
+        try {
-        this.newView.state.update({
+          const text = this.newView.state.doc.toString()
-          changes: { from: 0, to: text.length, insert: this.codeMirrorValue[this.index] }
+          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 = {}