Merge branch 'dev-3.9' of git.mesalab.cn:nezha/nezha-fronted into dev-3.9

2023-10-13 10:46:33 +08:00
parent e5c12fff9c 74f5eaecbb
commit 30a465a9ab
10 changed files with 265 additions and 92 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
@@ -10,6 +10,7 @@
  transform: unset;
  z-index: 11;
  max-height: 400px;
+  font-size: 14px;
  .explore-history-box-header {
    padding-left: 20px;
  }
@@ -24,12 +25,18 @@
    padding: 10px 0 10px 10px
  }
  .query-prompt-log {
-    padding: 20px 0 20px 20px;
+    padding: 0 20px 10px 20px;
+    color: $--color-text-primary;
+    .query-prompt-log-title {
+      margin: 5px 0 10px 0;
+    }
    .query-prompt-log-content {
-      height: 210px;
+      height: 220px;
      border: 1px solid $--border-color-light;
      border-radius: 2px;
      display: flex;
+      color: $--color-text-regular;
+      margin-bottom: 5px;
      .query-prompt-log-content-left {
        border-right: 1px solid $--border-color-light;
        width: 34%;
@@ -37,17 +44,103 @@
        box-sizing: border-box;
        height: 100%;
        overflow-y: auto;
-        .log-content-left-label {
-          height: 32px;
-          line-height: 32px;
-          text-transform: capitalize;
+      }
+      .log-content-left-label, .log-content-right-value{
+        height: 32px;
+        line-height: 32px;
+        text-transform: capitalize;
+        box-sizing: border-box;
+        padding: 0 8px 0 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .log-content-left-label-text {
+          max-width: calc(100% - 36px);
+          min-width: calc(100% - 50px);
        }
+        .log-content-left-label-text.is-select {
+          color: $--color-primary;
+        }
+        .label-badge {
+          min-width: 16px;
+          height: 16px;
+          display: inline-block;
+          background: $--color-primary;
+          color: #ffffff;
+          font-size: 12px;
+          padding: 2px;
+          border-radius: 10px;
+          text-align: center;
+          line-height: 16px;
+          margin-right: 5px;
+        }
+      }
+      .log-content-left-label:hover, .log-content-right-value:hover{
+        background: $--table-row-hover-background-color;
      }
      .query-prompt-log-content-right {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
+        .log-content-right-value {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          .log-content-right-value-text {
+            width: 100%;
+          }
+          .nz-icon{
+            width: 24px;
+            display: none;
+            color: $--color-primary;
+          }
+        }
+        .log-content-right-value.is-select{
+          background: $--table-row-hover-background-color;
+          .log-content-right-value-text {
+            width: calc(100% - 24);
+          }
+          .nz-icon{
+            display: inline-block;
+          }
+        }
      }
    }
+    .query-prompt-log-final {
+      height: 30px;
+      flex-shrink: 0;
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      line-height: 30px;
+      font-size: 14px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      .query-prompt-log-final-box {
+        display: inline-block;
+        width: calc(100% - 24px);
+        height: 100%;
+        .nz-icon{
+          display: none;
+          vertical-align: middle;
+        }
+      }
+      .query-prompt-log-final-text {
+        display: inline-block;
+        max-width: 100%;
+        vertical-align: middle;
+      }
+
+    }
+    .query-prompt-log-final:hover {
+      .query-prompt-log-final-text {
+        display: inline-block;
+        max-width: calc(100% - 24px);
+      }
+      .nz-icon{
+        display: inline-block;
+      }
+    }
+
  }
 }
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -123,6 +123,7 @@ export default {
  data () {
    return {
      // 详情相关
+      orderBy: '-id',
      fromRoute: fromRoute,
      graphShow: false,
      chartDatas: [],
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
@@ -188,6 +188,7 @@ export default {
  },
  data () {
    return {
+      orderBy: '-id',
      stateOptions: alertMessageConstant.states,
      url: 'alert/message',
      urlNew: 'alert/message/query',
--- a/nezha-fronted/src/components/common/mixin/mainMixinFun.js
+++ b/nezha-fronted/src/components/common/mixin/mainMixinFun.js
@@ -270,6 +270,7 @@ export default {
              end = this.momentSetDay(noTime, 7, 'YYYY-MM-DD')
            }
            start += ' 00:00:00'
+            end += ' 23:59:59'
            start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
            end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
          }
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -585,6 +585,7 @@ export default {
            end = this.momentSetDay(noTime, 7, 'YYYY-MM-DD')
          }
          start += ' 00:00:00'
+          end = end + ' 23:59:59'
          start = this.momentTz(this.momentStrToTimestamp(start, 'YYYY-MM-DD HH:mm:ss'))
          end = this.momentTz(this.momentStrToTimestamp(end, 'YYYY-MM-DD HH:mm:ss'))
        }
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -212,6 +212,7 @@ export default {
  mixins: [dataListMixin, routerPathParams],
  data () {
    return {
+      orderBy: '-id',
      chartLoading: false,
      chartInfo: {},
      alertMessageNzTableHeightOffset: 242,
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -8,94 +8,92 @@
      </div>
      <div class="main-container">
        <div class="top-tools panel-top-tools" :class="showTopLine? 'panel-top-tools-bottom' : ''">
-          <div v-if="panelData.length === 0" class="top-tool-left" style="margin-left: 10px;">
-            <button id="dashboard-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'main_add'" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("overall.addDashboard")}}</button>
+          <div class="top-tool-left" v-show="panelData.length === 0">
+            <button style="margin-left: 10px;" v-if="panelData.length === 0" id="dashboard-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" v-has="'main_add'" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("overall.addDashboard")}}</button>
          </div>
-          <template v-if="panelData.length">
-            <div class="top-tool-left" style="cursor: pointer;">
-              <select-dashboard
-                ref="selectDashboard"
-                :panel-data="panelData"
-                :panel-lock="panelLock"
-                :placement="'bottom-start'"
-                :show-panel="showPanel"
-                class="selectDashboard"
-                @deletePanel="del"
-                @editPanel="edit"
-                @selectDashboard="panelChange"
-                @startPlay="startPlay"
-                >
-                <template v-slot:trigger>
-                  <div class="selectDashboard-select">
-                    <i style="color: #BEBEBE" class="el-icon-menu"></i>
-                    <span :title="showPanel.name  + ' (' + (showPanel.chartNum || 0) +' charts)' " class="show-panel-name">{{showPanel.name||$t('overall.notFound')}}</span>
-                    <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred===1" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i>
-                    <i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i>
-                    <i class="el-icon-arrow-down"></i>
-                  </div>
-                </template>
-                <!-- 按钮插槽 -->
-                <template slot="button">
+          <div  v-if="panelData.length" class="top-tool-left" style="cursor: pointer;">
+            <select-dashboard
+              ref="selectDashboard"
+              :panel-data="panelData"
+              :panel-lock="panelLock"
+              :placement="'bottom-start'"
+              :show-panel="showPanel"
+              class="selectDashboard"
+              @deletePanel="del"
+              @editPanel="edit"
+              @selectDashboard="panelChange"
+              @startPlay="startPlay"
+            >
+              <template v-slot:trigger>
+                <div class="selectDashboard-select">
+                  <i style="color: #BEBEBE" class="el-icon-menu"></i>
+                  <span :title="showPanel.name  + ' (' + (showPanel.chartNum || 0) +' charts)' " class="show-panel-name">{{showPanel.name||$t('overall.notFound')}}</span>
+                  <i @click.stop="delStarred(showPanel)" v-if="showPanel.starred===1" class="nz-icon nz-icon-a-xingzhuang2" :title ="$t('overall.starred')"></i>
+                  <i @click.stop="addStarred(showPanel)" v-else class="nz-icon nz-icon-xingzhuang" :title ="$t('overall.unstarred')"></i>
+                  <i class="el-icon-arrow-down"></i>
+                </div>
+              </template>
+              <!-- 按钮插槽 -->
+              <template slot="button">
                  <span class="dashboard-select-add" v-has="'main_add'" :title='$t("overall.addDashboard")' @click="toAdd">
                    <i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t('overall.addDashboard')}}
                  </span>
-                  <!-- 通过dashboard模板创建 -->
-                  <span v-has="'main_add'" @click="addByTemplate" :title='$t("dashboard.dashboard.addByTemplate")' class="dashboard-addBy-template">
+                <!-- 通过dashboard模板创建 -->
+                <span v-has="'main_add'" @click="addByTemplate" :title='$t("dashboard.dashboard.addByTemplate")' class="dashboard-addBy-template">
                    <i class="nz-icon nz-icon-template1"></i>
                  </span>
-                </template>
-              </select-dashboard>
-            </div>
+              </template>
+            </select-dashboard>
+          </div>

-            <div class="top-tool-right">
-              <!-- 仪表盘轮播 -->
-              <playlist v-if="playListControls" :playlistObj="playlistObj" :panelData="panelData" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>
+          <div v-if="panelData.length" class="top-tool-right">
+            <!-- 仪表盘轮播 -->
+            <playlist v-if="playListControls" :playlistObj="playlistObj" :panelData="panelData" @stopPlaylist="stopPlaylist" @changePlay="panelChange"></playlist>

-              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :show-locked="true"  class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>
+            <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :show-locked="true"  class="margin-r-10" :sign="showPanel.id" :from="fromRoute.dashboard"></pick-time>

-              <template v-if="!playListControls">
-                <!-- 切换查看模式 -->
-                <button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
-                  <i class="nz-icon nz-icon-moshiqiehuan"></i>
-                </button>
+            <template v-if="!playListControls">
+              <!-- 切换查看模式 -->
+              <button class="top-tool-btn view-mode" :title="$t('overall.viewMode')" @click="cycle">
+                <i class="nz-icon nz-icon-moshiqiehuan"></i>
+              </button>

-                <!-- 新增图表 -->
-                <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
-                  <i class="nz-icon-create-square nz-icon"></i>
-                </button>
+              <!-- 新增图表 -->
+              <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" type="button" @click="addChartBefore">
+                <i class="nz-icon-create-square nz-icon"></i>
+              </button>

              <top-tool-more-options
-                  :delete-objs="batchDeleteObjs"
-                  ref="topTool"
-                  id="panel"
-                  :params="filter"
-                  :permissions="{
+                :delete-objs="batchDeleteObjs"
+                ref="topTool"
+                id="panel"
+                :params="filter"
+                :permissions="{
                    import: 'main_add',
                    export: 'main_edit'
                  }"
-                  :paramsType="'dashboard'"
-                  class="top-tool-export"
-                  export-file-name="chart"
-                  export-url="/visual/dashboard/export"
-                  import-url="/visual/dashboard/import"
-                  :only-json="true"
-                  @export="exportType"
-                  @afterImport="afterImport"
-                >
-                  <template v-slot:before>
-                    <el-dropdown-item v-has="'main_edit'">
-                      <div id="panel-lock" @click="$store.dispatch('dispatchPanelLock',{flag:!panelLock})"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t('overall.locked') : $t('overall.unlocked')}}</div>
-                    </el-dropdown-item>
-                  </template>
-                  <template v-slot:after>
-                    <el-dropdown-item v-has="'dashboard_view'">
-                      <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
-                    </el-dropdown-item>
-                  </template>
-                </top-tool-more-options>
-              </template>
-            </div>
-          </template>
+                :paramsType="'dashboard'"
+                class="top-tool-export"
+                export-file-name="chart"
+                export-url="/visual/dashboard/export"
+                import-url="/visual/dashboard/import"
+                :only-json="true"
+                @export="exportType"
+                @afterImport="afterImport"
+              >
+                <template v-slot:before>
+                  <el-dropdown-item v-has="'main_edit'">
+                    <div id="panel-lock" @click="$store.dispatch('dispatchPanelLock',{flag:!panelLock})"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t('overall.locked') : $t('overall.unlocked')}}</div>
+                  </el-dropdown-item>
+                </template>
+                <template v-slot:after>
+                  <el-dropdown-item v-has="'dashboard_view'">
+                    <div id="chart-export-html" @click="exportType"><i class="nz-icon nz-icon-kuaizhao"></i>{{ $t('overall.snapshoot') }}</div>
+                  </el-dropdown-item>
+                </template>
+              </top-tool-more-options>
+            </template>
+          </div>
        </div>
        <div id="tableList" class="table-list" style='overflow-y: unset'>
          <div class="table-list-box">
--- a/nezha-fronted/src/components/page/dashboard/explore/logql/logqlMixin.js
+++ b/nezha-fronted/src/components/page/dashboard/explore/logql/logqlMixin.js
@@ -8,7 +8,7 @@ export default {
      LANGUAGE_SETUP_STARTED: false,
      parser,
      MONACO_EDITOR_OPTIONS: {
-        automaticLayout: true,
+        automaticLayout: false,
        formatOnType: true,
        formatOnPaste: true,
        codeLens: false,
@@ -79,7 +79,6 @@ export default {
           * Enabling this might have a severe performance impact.
           * Defaults to true.
           */
-          automaticLayout: true
        },
        suggestFontSize: 12,
        wordWrap: 'on',
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -42,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" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric"/>
+          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric" @selectLog="selectLog"/>
        </div>

        <div class="top-tool-btn-group">
@@ -145,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" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric"/>
+          <queryPrompt v-if="queryPromptShow" @close="queryPromptShowChange" :type="type" :width="queryPromptWidth" :position="queryPromptPosition" class="no-style-class" @selectMetric="selectMetric" @selectLog="selectLog"/>
        </el-row>
      </template>
    </div>
@@ -1128,6 +1128,15 @@ export default {
          }
        })
      }
+    },
+    selectLog (str) {
+      if (!str || str.length === 0) return
+      this.expressionList[this.index] = str
+      this.codeMirrorValue[this.index] = str
+      this.dropDownVisible = false
+      this.$emit('change', str)
+      this.$forceUpdate()
+      this.cascaderValue = ''
    }
  },
  watch: {
--- a/nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/queryPrompt/queryPrompt.vue
@@ -62,22 +62,43 @@
      </div>
    </div>
    <div v-if="type === 'log'"  class="query-prompt-log" v-my-loading="logLoading">
-      <div>1.Select label names and values</div>
+      <div class="query-prompt-log-title">1.Select label names and values</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">
-            {{item}}
+          <div v-for="item in logLabels" :key="item" class="log-content-left-label" @click="getLogLabelsValues(item)">
+            <div class="log-content-left-label-text text-ellipsis" :class="activeLabel === item ? 'is-select':''" :title="item">
+              {{item}}
+            </div>
+            <span style="display: flex;align-items: center">
+              <div
+                class="label-badge"
+                v-if="selectLogLabels[item] && selectLogLabels[item].length"
+              >{{selectLogLabels[item].length}}</div>
+              <i class="nz-icon nz-icon-arrow-right6" />
+            </span>
          </div>
        </div>
        <div class="query-prompt-log-content-right">
-          <div v-for="item in logValues">
-
+          <div
+            v-for="(item, index) in logValues"
+            :key="index"
+            class="log-content-right-value"
+            :class="selectLogLabels[item.type] && selectLogLabels[item.type].indexOf(item.value) !== -1 ? 'is-select' : ''"
+            @click="selectValue(item)">
+            <div class="log-content-right-value-text text-ellipsis" :title="item.value">
+              {{item.value}}
+            </div>
+           <i class="nz-icon nz-icon-check"/>
          </div>
        </div>
      </div>
-      <div>2.Resulting selector</div>
+      <div class="query-prompt-log-title">2.Resulting selector</div>
      <div class="query-prompt-log-final">
-        {{logFinalStr}}
+        <div class="query-prompt-log-final-box">
+          <div class="query-prompt-log-final-text text-ellipsis" :title="logFinalStr">{{logFinalStr}}</div>
+          <i class=" query-prompt-content-icon nz-icon nz-icon-override" @click.stop="copyItem(logFinalStr)"></i>
+        </div>
+        <i class=" query-prompt-content-icon nz-icon nz-icon-huiche" @click.stop="selectLog"></i>
      </div>
    </div>
  </div>
@@ -124,12 +145,13 @@ export default {
        pageSize: 20,
        total: 0
      },
-      logFinalStr: {},
+      logFinalStr: '{}',
      logLabels: [],
      logLabelsShow: '',
      logValues: [],
      selectLogLabels: {},
-      logLoading: false
+      logLoading: false,
+      activeLabel: ''
    }
  },
  mounted () {
@@ -226,12 +248,14 @@ export default {
    getLogLabelsValues (labels) {
      this.logLoading = true
      this.logValues = []
+      this.activeLabel = labels
      this.$get(`/logs/loki/api/v1/label/${labels}/values`).then(res => {
        this.logLoading = false
        if (res.data) {
          const nodes = res.data.sort().map(d => ({
            value: d,
            label: d,
+            type: labels,
            leaf: true
          }))
          this.logValues = nodes
@@ -241,6 +265,47 @@ export default {
        console.log(this.logValues)
      })
    },
+    selectValue (obj) {
+      const key = obj.type
+      if (this.selectLogLabels[key]) {
+        const index = this.selectLogLabels[key].indexOf(obj.value)
+        if (index !== -1) {
+          this.selectLogLabels[key].splice(index, 1)
+          if (!this.selectLogLabels[key].length) {
+            delete this.selectLogLabels[key]
+          }
+        } else {
+          this.selectLogLabels[key].push(obj.value)
+        }
+      } else {
+        this.selectLogLabels[key] = [obj.value]
+      }
+      this.$forceUpdate()
+      this.renderLogQl()
+    },
+    renderLogQl () {
+      let str = '{'
+      Object.keys(this.selectLogLabels).forEach(key => {
+        str += key
+        if (this.selectLogLabels[key].length === 1) {
+          str += '="'
+          str += this.selectLogLabels[key][0]
+          str += '"'
+        } else {
+          str += '=~"'
+          this.selectLogLabels[key].forEach(item => {
+            str += this.$lodash.escapeRegExp(item)
+            str += '|'
+          })
+          str = str.slice(0, -1)
+          str += '"'
+        }
+        str += ','
+      })
+      str = str.slice(0, -1)
+      str += '}'
+      this.logFinalStr = str
+    },
    hideMe () {
      this.$emit('close')
    },
@@ -271,6 +336,10 @@ export default {
      this.$emit('selectMetric', item)
      this.hideMe()
    },
+    selectLog () {
+      this.$emit('selectLog', this.logFinalStr)
+      this.hideMe()
+    },
    copyItem (value) {
      this.$copyText(value).then(() => {
        this.$message.success({ message: this.$t('overall.copySuccess') })