NEZ-3213 feat: project topology data 表达式输入框更改

nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js

@@ -127,7 +127,7 @@ export default {
       if (this.isChart && this.timeRange) {
         startTime = this.timeRange[0]
         endTime = this.timeRange[1]
-      } else if (this.filterTime) {
+      } else if (this.filterTime && this.filterTime.length) {
         startTime = this.momentStrToTimestamp(this.filterTime[0])
         endTime = this.momentStrToTimestamp(this.filterTime[1])
       }

nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js

@@ -30,6 +30,7 @@ export default {
       getTopology(this.meta2dId)._setValue(node)
     },
     getQueryValues (elements, startTime, endTime) {
+      console.log(startTime, endTime)
       this.meta2dLoading = true
       return new Promise(resolve => {
         const step = bus.getStep(startTime, endTime)
@@ -39,7 +40,16 @@ export default {
         elements = elements.filter(item => item.state && item.expression)
         const requests = elements.map((element) => {
           // query_range
-          let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${step}`
+          let queryStep = step
+          if (element.step) {
+            queryStep = element.step + 's'
+          }
+          let query = ''
+          if (element.queryType === 2) {
+            query = `${urlPre}/api/v1/query_instant?time=${endTime}`
+          } else {
+            query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${queryStep}`
+          }
           query += `&nullType=${'null'}`
           if (element.filter) {
             query += `&filter=${element.filter}`

nezha-fronted/src/components/common/project/meta2d/meta2dData.vue

@@ -127,17 +127,53 @@
                     ></promql-input>
                   </div>
                   <el-row style="margin-top: 18px;display: flex">
-                    <el-col class="legend-title">
-                      <span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&nbsp;</span>
-                      <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
-                        <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
-                        <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
-                        <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
-                      </el-popover>
-                    </el-col>
-                    <el-col style="flex: 1">
-                      <el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
-                    </el-col>
+                    <div style="width: 310px;flex-shrink: 0">
+                      <div class="legend-title-new">
+                        <span class="legend-title__span">{{$t('dashboard.dashboard.chartForm.legend')}}&nbsp;</span>
+                        <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                          <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
+                          <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
+                          <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                        </el-popover>
+                      </div>
+                      <div>
+                        <el-input maxlength="512" size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
+                      </div>
+                    </div>
+                    <div style="margin-left: 10px;" v-if="'metrics' === promqlType">
+                      <div class="legend-title-new" style="width: 55px">
+                        <span class="legend-title__span">{{$t('overall.type')}}&nbsp;</span>
+                        <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                          <div style="white-space: normal" :style="{'word-break':language!=='zh'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div>
+                          <!-- <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.dashboard.chartForm.legendTip')}}</div> -->
+                          <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                        </el-popover>
+                      </div>
+                      <div style="flex: 1">
+                        <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)">
+                          <el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
+                          <el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
+                        </el-select>
+                      </div>
+                    </div>
+                    <div style="margin-left: 10px;">
+                      <div class="legend-title-new" style="margin-left: 10px;width: 55px">
+                        <span class="legend-title__span">{{$t('overall.step')}}&nbsp;</span>
+                      </div>
+                      <div style="flex: 1">
+                        <el-input-number
+                          :disabled="expressionsShow[index-1].queryType == 2"
+                          @change="expressionChange"
+                          v-model="expressionsShow[index-1].step"
+                          size="small"
+                          :min="minStep"
+                          :precision="0"
+                          :controls="false"
+                          :placeholder="$t('overall.auto')"
+                          >
+                        </el-input-number>
+                      </div>
+                    </div>
                   </el-row>
                   <el-row style="margin-top: 18px;display: flex">
                     <div class="form-row-item">
@@ -287,6 +323,11 @@ export default {
       ]
     }
   },
+  computed : {
+    minStep () {
+      return this.nzDefaultConfig.minStep
+    }
+  },
   mounted () {
     this.init()
   },
@@ -304,7 +345,9 @@ export default {
             statistic: this.expressionsShow[i].statistic || 'last',
             name: this.expressionName[i],
             state: this.expressionsShow[i].state,
-            orderNum: i
+            orderNum: i,
+            step: this.expressionsShow[i].step || undefined,
+            queryType: this.expressionsShow[i].queryType || 1,
           })
         })
       } else {
@@ -312,6 +355,10 @@ export default {
       }
       this.change()
     },
+    queryTypeChange (index) {
+      this.expressionsShow[index].step = undefined
+      this.expressionChange(index)
+    },
     switchExpression (index, flag) {
       if (flag === 1) {
         this.$set(this.expressionsShow[index], 'state', 0)
@@ -379,7 +426,9 @@ export default {
           unit: 1,
           statistic: 'last',
           elementId: '',
-          state: 1
+          state: 1,
+          step: undefined,
+          queryType: 1,
         })
         this.expressionChange()
       } else {
@@ -394,7 +443,9 @@ export default {
           legend: item.legend,
           unit: item.unit || 1,
           statistic: item.statistic || 'last',
-          state: item.state
+          state: item.state,
+          step: item.step || undefined,
+          queryType: item.queryType || 1,
         })
       }
     },

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

@@ -124,8 +124,8 @@
                   </div>
                   <div style="flex: 1">
                     <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)">
-                      <el-option :label="'Range'" :value="1">Range</el-option>
-                      <el-option :label="'Instant'" :value="2">Instant</el-option>
+                      <el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
+                      <el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
                     </el-select>
                   </div>
                 </div>
@@ -142,9 +142,8 @@
                       :min="minStep"
                       :precision="0"
                       :controls="false"
-                      class="append_unit"
                       :placeholder="$t('overall.auto')"
-                      :data-unit="$t('overall.seconds')">
+                    >
                     </el-input-number>
                   </div>
                 </div>

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

@@ -189,8 +189,8 @@
                         </div>
                         <div style="flex: 1">
                           <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="queryTypeChange(index - 1)" style="width: 100%;">
-                            <el-option :label="'Range'" :value="1">Range</el-option>
-                            <el-option :label="'Instant'" :value="2">Instant</el-option>
+                            <el-option :label="$t('dashboard.dashboard.chartForm.valMapping.range')" :value="1">{{$t('dashboard.dashboard.chartForm.valMapping.range')}}</el-option>
+                            <el-option :label="$t('overall.instant')" :value="2">{{$t('overall.instant')}}</el-option>
                           </el-select>
                         </div>
                       </div>
@@ -4039,18 +4039,19 @@ export default {
         const promqlInputIndexs = []
         const queryExpression = []
         // 过滤掉state为0的元素
+        let step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1]))
         this.expressions.forEach((item, index) => {
           if (item != '' && this.promqlKeys[index].state && !this.promqlKeys[index].matrix) {
-            let step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1]))
+            let queryStep = step
             if (this.promqlKeys[index].step) {
-              step = this.promqlKeys[index].step
+              queryStep = this.promqlKeys[index].step + 's'
             }
             promqlInputIndexs.push(index)
             queryExpression.push(item)
             if (this.promqlKeys[index].queryType === 2) {
               requestArr.push(this.$get('/prom/api/v1/query_instant?query=' + encodeURIComponent(item) + '&time=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))))
             } else {
-              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + step + '&nullType=null'))
+              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + encodeURIComponent(item) + '&start=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0])) + '&end=' + this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1])) + '&step=' + queryStep + '&nullType=null'))
             }
           }
         })

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

@@ -23,9 +23,9 @@
     </div>
     <div v-if="type !== 'log'" class="query-prompt-metric">
       <div class="explore-history-box-content-header">
-        <div class="query-prompt-name text-ellipsis query-prompt-content-text">Name</div>
-        <div class="query-prompt-type text-ellipsis query-prompt-content-text">Type</div>
-        <div class="query-prompt-remark text-ellipsis query-prompt-content-text">Description</div>
+        <div class="query-prompt-name text-ellipsis query-prompt-content-text">{{$t('overall.name')}}</div>
+        <div class="query-prompt-type text-ellipsis query-prompt-content-text">{{$t('overall.type')}}</div>
+        <div class="query-prompt-remark text-ellipsis query-prompt-content-text">{{$t('overall.remark')}}</div>
       </div>
       <div
         class="explore-history-box-content"
@@ -62,7 +62,7 @@
       </div>
     </div>
     <div v-if="type === 'log'"  class="query-prompt-log" v-my-loading="logLoading">
-      <div class="query-prompt-log-title">1.Select label names and values</div>
+      <div class="query-prompt-log-title">{{$t('queryPrompt.logTitle1')}}</div>
       <div class="query-prompt-log-content" style="">
         <div class="query-prompt-log-content-left">
           <div v-for="item in logLabels" :key="item" class="log-content-left-label" @click="getLogLabelsValues(item)">
@@ -92,7 +92,7 @@
           </div>
         </div>
       </div>
-      <div class="query-prompt-log-title">2.Resulting selector</div>
+      <div class="query-prompt-log-title">{{$t('queryPrompt.logTitle2')}}</div>
       <div class="query-prompt-log-final">
         <div class="query-prompt-log-final-box">
           <div class="query-prompt-log-final-text text-ellipsis" :title="logFinalStr">{{logFinalStr}}</div>