feat： 根据位置确定 tooltip 向下 还是向上显示

nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss

@@ -1,13 +1,13 @@
 .query-prompt-box {
-  width: calc(100% - 10px);
+  //width: calc(100% - 10px);
   height: 400px;
   background: $--background-color-empty;
   box-shadow: 0px 0px 21px 4px $--dropdown-menu-box-shadow-color;
   border-radius: 2px;
-  position: absolute;
+  position: fixed;
-  bottom: -6px;
+  //bottom: -6px;
-  left: 5px;
+  //left: 5px;
-  transform: translateY(100%);
+  transform: unset;
   z-index: 11;
   max-height: 400px;
   .explore-history-box-header {
@@ -16,7 +16,7 @@
   div.explore-history-item {
     padding: 0;
   }
-  .query-prompt-metric{
+  .query-prompt-metric, .query-prompt-log{
     display: flex;
     flex-direction: column;
     height: calc(100% - 45px);

nezha-fronted/src/components/chart/panelChart.vue

@@ -310,7 +310,15 @@ export default {
               if (this.from === fromRoute.chartTemp || this.from === fromRoute.dashboardTemp) {
                 return chartTempData
               }
-              let query = `${urlPre}/api/v1/query_range?start=${startTime}&end=${endTime}&step=${myStep}`
+              console.log(element.queryType)
+              let queryStr = 'query_range'
+              let query = ''
+              if (element.queryType == 1) {
+                queryStr = 'query_instant'
+                query = `${urlPre}/api/v1/${queryStr}?time=${endTime}`
+              } else {
+                query = `${urlPre}/api/v1/${queryStr}?start=${startTime}&end=${endTime}&step=${myStep}`
+              }
               if (isTimeSeries(this.chartInfo.type)) {
                 let nullType = this.chartInfo.param.nullType || 'null'
                 nullType = (nullType === 'connected' ? 'null' : nullType)

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

@@ -123,9 +123,9 @@
                     </el-popover>
                   </div>
                   <div style="flex: 1">
-                    <el-select size="small" v-model="expressionsShow[index-1].queryType">
+                    <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="expressionChange">
-                      <el-option :label="'Range'" :value="'range'">Range</el-option>
+                      <el-option :label="'Range'" :value="1">Range</el-option>
-                      <el-option :label="'Instant'" :value="'instant'">Instant</el-option>
+                      <el-option :label="'Instant'" :value="2">Instant</el-option>
                     </el-select>
                   </div>
                 </div>
@@ -135,7 +135,7 @@
                   </div>
                   <div style="flex: 1">
                     <el-input-number
-                      :disabled="expressionsShow[index-1].queryType === 'instant'"
+                      :disabled="expressionsShow[index-1].queryType == 2"
                       @change="expressionChange"
                       v-model="expressionsShow[index-1].step"
                       size="small"
@@ -1664,6 +1664,11 @@ export default {
     onEnd () {
       this.change()
       document.body.classList.remove('isDrag')
+    },
+    hideQueryPromptShow () {
+      this.expressions.forEach((item, index) => {
+        this.$refs['promql-' + (index)][0]?.hideQueryPromptShow()
+      })
     }
   },
   created () {

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

@@ -13,7 +13,7 @@
     </div>
 
     <!-- begin--表单-->
-    <div class="right-box-form-box right-box__container chart-right-box">
+    <div class="right-box-form-box right-box__container chart-right-box" @scroll="rightBoxScroll">
       <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px" @submit.native.prevent>
         <el-form-item :label='$t("overall.name")' prop="name">
           <div style="display:flex;align-items:center">
@@ -384,7 +384,7 @@ export default {
           height: 2,
           unit: 2,
           type: 'line',
-          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 1 }],
           param: {
             stack: 0,
             nullType: 'null',
@@ -427,7 +427,7 @@ export default {
             height: 2,
             unit: 2,
             type: 'line',
-            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
+            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 1 }],
             param: {
               stack: 0,
               nullType: 'null',
@@ -468,7 +468,7 @@ export default {
             height: 2,
             unit: 2,
             type: 'log',
-            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 'range' }],
+            elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, step: undefined, queryType: 1 }],
             param: {
               enable: {
                 thresholds: false,
@@ -586,6 +586,12 @@ export default {
         }, 200)
       }
       this.previewShow = show
+    },
+    rightBoxScroll: bus.debounce(function () {
+      this.hideQueryPrompt()
+    }, 300),
+    hideQueryPrompt () {
+      this.$refs['childrenFrom' + this.editChart.datasource]?.hideQueryPromptShow()
     }
   },
   created () {
@@ -613,7 +619,7 @@ export default {
         if (obj && obj.elements) {
           obj.elements.forEach((item) => {
             if (!item.queryType) {
-              item.queryType = 'range'
+              item.queryType = 1
             }
           })
         }

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -414,7 +414,7 @@ export default {
           elementId: '',
           state: 1,
           step: undefined,
-          queryType: 'range'
+          queryType: 1
         })
         this.expressionChange()
       } else {

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

@@ -273,7 +273,7 @@ export default {
             sort: 'none'
           },
         },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 'range' }],
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0, step: undefined, queryType: 1 }],
         panel: '',
         sync: 0,
         remark: '',

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

@@ -84,7 +84,7 @@
               :index="index-1"
               :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy','enable', 'history']"
               :styleType="1"
-              type="metric"
+              type="metrics"
               @enableExpression="enableExpression"
               @addExpression="addExpression"
               @copyExpression="copyExpression"

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

@@ -1,6 +1,6 @@
 <template>
   <div class="promqlInput" :class=" errorMsg || appendMsg ? 'mb10' : ''">
-    <div class="query-row" style="position: relative">
+    <div class="query-row" ref="queryRow" style="position: relative">
       <!--explore页面的样式-->
       <template v-if="styleType == 1">
         <div
@@ -16,24 +16,6 @@
             style="padding-right: 24px;box-sizing: border-box"
           >
           </div>
-          <!-- <div id='editor'
-          class="not-fixed-height no-resize no-close"
-          >
-          </div> -->
-<!--          <el-input-->
-<!--            v-if="type == 'log'"-->
-<!--            :id="inputId"-->
-<!--            v-model="expressionList[index]"-->
-<!--            size="small" :rows="1"-->
-<!--            autosize-->
-<!--            class="not-fixed-height no-resize"-->
-<!--            type="textarea"-->
-<!--            show-word-limit maxlength="256"-->
-<!--            @input="metricKeyDown"-->
-<!--            @keyup.enter.native="expressionChange"-->
-<!--            ref="elInput"-->
-<!--          >-->
-<!--          </el-input>-->
           <div class="zy" style="position: relative;overflow-x: hidden;display: block;border: 1px solid #dedede;width: 100%"  v-if="type == 'log'">
             <MonacoEditor
               v-if="type == 'log'"
@@ -60,7 +42,7 @@
             <span>{{ appendMsg }}</span>
           </div>
           <i class="nz-icon nz-icon-alert-list" style="position: absolute;top: 4px; right: 6px" @click="queryPromptShowChange"/>
-          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" class="no-style-class" @selectMetric="selectMetric"/>
+          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric"/>
         </div>
 
         <div class="top-tool-btn-group">
@@ -136,23 +118,6 @@
               style="padding-right: 24px;box-sizing: border-box"
             >
             </div>
-            <!-- <div id="editor"
-            class="not-fixed-height no-resize no-close"
-                ref="elInput"
-
-            ></div> -->
-<!--               <el-input-->
-<!--                v-model="expressionList[index]"-->
-<!--                v-if="type === 'log'"-->
-<!--                @input="metricKeyDown"-->
-<!--                autosize-->
-<!--                type="textarea"-->
-<!--                :maxlength="styleType === 3 ? 512 : 4096"-->
-<!--                show-word-limit-->
-<!--                size="small" :rows="1"-->
-<!--                class="not-fixed-height no-resize"-->
-<!--                ref="elInput"-->
-<!--              ></el-input>-->
               <div class="zy" style="position: relative;overflow-x: hidden;display: block;border: 1px solid #dedede;width: 100%"  v-if="type == 'log'">
                 <MonacoEditor
                   v-if="type == 'log'"
@@ -180,7 +145,7 @@
             </div>
           </el-col>
           <i class="nz-icon nz-icon-alert-list" style="position: absolute;top: -5px; right: 15px" @click="queryPromptShowChange"/>
-          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" class="no-style-class" @selectMetric="selectMetric"/>
+          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric"/>
         </el-row>
       </template>
     </div>
@@ -350,9 +315,9 @@ import {
 } from '@codemirror/autocomplete'
 import exploreHistory from '@/components/page/dashboard/explore/histoyrComponent/exploreHistory'
 import MonacoEditor from '@/components/page/dashboard/explore/MonacoVue/vue-monaco'
-import queryPrompt from "@/components/page/dashboard/explore/queryPrompt/queryPrompt";
+import queryPrompt from '@/components/page/dashboard/explore/queryPrompt/queryPrompt'
 import logqlMixin from '@/components/page/dashboard/explore/logql/logqlMixin'
-import bus from "@/libs/bus";
+import bus from '@/libs/bus'
 export default {
   name: 'promqlInput',
   mixins: [logqlMixin],
@@ -431,9 +396,10 @@ export default {
       firstInit: true,
       historyshow: false,
       queryPromptShow: false,
+      queryPromptWidth: 0,
       queryPromptPosition: {
         top: 0,
-        left:0,
+        left: 0
       }
     }
   },
@@ -477,6 +443,9 @@ export default {
         return { emitPath: false }
       }
     }
+    // width () {
+    //   return
+    // }
   },
   mounted () {
     if (!this.fromFatherData && this.type !== 'log') {
@@ -1111,10 +1080,24 @@ export default {
       this.queryPromptShow = false
     },
     setPosition () {
-      this.queryPromptPosition = {
+      this.queryPromptWidth = this.$refs.queryRow.offsetWidth
-        top: 0,
+      const position = this.$refs.queryRow.getBoundingClientRect() // 定位元素位置
-        left: 0
+      const windowWidth = window.innerWidth// 窗口宽度
+      const windowHeight = window.innerHeight// 窗口高度
+      const boxHeight = 400
+      const parentHeight = 40
+      let top = 0
+      const left = position.left
+      if (position.top + parentHeight + boxHeight > windowHeight - 100) {
+        top = position.top - boxHeight - 10
+      } else {
+        top = position.top + parentHeight
       }
+      this.queryPromptPosition = {
+        top: top,
+        left: left
+      }
+      console.log(position, this.queryPromptWidth)
     },
     selectMetric (item) {
       if (!item.id) {

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

@@ -1,9 +1,18 @@
 <template>
-  <div class="explore-history-box query-prompt-box"   v-clickoutside="hideMe" v-my-loading="firstLoading">
+  <div
+    class="explore-history-box query-prompt-box"
+    v-clickoutside="hideMe"
+    v-my-loading="firstLoading"
+    :style="{
+      width: width + 'px',
+      top: position.top + 'px',
+      left: position.left + 'px'
+    }"
+  >
     <div class="explore-history-box-header">
-      <span class="header-text">{{ type === 'metric' ? $t('overall.metric') : $t('dashboard.dashboard.chartForm.typeVal.log.label')}}</span>
+      <span class="header-text">{{ type !== 'log' ? $t('overall.metric') : 'Label browser'}}</span>
       <el-input
-        v-if="type === 'metric'"
+        v-if="type !== 'log'"
         class="header-search"
         size="mini"
         v-model="searchStr"
@@ -12,7 +21,7 @@
         suffix-icon="nz-icon nz-icon-search"
       />
     </div>
-    <div v-if="type === 'metric'" class="query-prompt-metric">
+    <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>
@@ -52,6 +61,9 @@
         <div class="table-no-data__title">{{$t('overall.noDataAvailable')}}</div>
       </div>
     </div>
+    <div v-if="type === 'log'"  class="query-prompt-log">
+
+    </div>
   </div>
 </template>
 
@@ -65,6 +77,19 @@ export default {
     type: {
       type: String,
       default: 'metric'
+    },
+    width: {
+      type: Number,
+      default: 626
+    },
+    position: {
+      type: Object,
+      default () {
+        return {
+          top: 0,
+          left: 0
+        }
+      }
     }
   },
   data () {
@@ -89,7 +114,7 @@ export default {
   },
   methods: {
     init () {
-      if (this.type === 'metric') {
+      if (this.type === 'metric' || this.type === 'metrics') {
         this.metricInit()
       }
       if (this.type === 'log') {