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

2023-10-11 17:40:10 +08:00
parent b63d43cb34
commit 931d066d07
9 changed files with 97 additions and 70 deletions
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/queryPrompt.scss
+++ b/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;
-  bottom: -6px;
-  left: 5px;
-  transform: translateY(100%);
+  position: fixed;
+  //bottom: -6px;
+  //left: 5px;
+  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);
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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)
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/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-option :label="'Range'" :value="'range'">Range</el-option>
-                      <el-option :label="'Instant'" :value="'instant'">Instant</el-option>
+                    <el-select size="small" v-model="expressionsShow[index-1].queryType" @change="expressionChange">
+                      <el-option :label="'Range'" :value="1">Range</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 () {
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/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
            }
          })
        }
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/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 {
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/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: '',
--- a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
+++ b/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"
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/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 = {
-        top: 0,
-        left: 0
+      this.queryPromptWidth = this.$refs.queryRow.offsetWidth
+      const position = this.$refs.queryRow.getBoundingClientRect() // 定位元素位置
+      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) {
--- a/nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
+++ b/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') {