From 98e9d60fe00f8f6f8ffb62385f3ca36946b980f9 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 2 Aug 2021 19:51:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?NEZ-858=20feat:=20=E6=96=B0=E7=89=88explore?=
 =?UTF-8?q?-log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/package.json                    |    2 +-
 .../src/assets/css/common/tableCommon.scss    |  100 +-
 .../src/components/charts/chart.scss          |    1 -
 .../src/components/common/chartUnit.vue       |    1 -
 .../src/components/common/language/cn.js      |    7 +
 .../src/components/common/language/en.js      |    8 +
 .../src/components/common/pickTime.vue        |    6 +-
 .../page/dashboard/explore/explore.vue        |  931 +----------
 .../page/dashboard/explore/exploreItem.vue    | 1400 +++++++++++++++++
 .../page/dashboard/explore/logTab.vue         |  377 +++++
 .../page/dashboard/explore/promqlInput.vue    |   70 +-
 .../page/dashboard/overview/chart.vue         |    1 +
 .../page/dashboard/overview/chartConfig.vue   |   78 +-
 .../src/components/page/dashboard/panel.vue   |    2 +-
 nezha-fronted/src/router/index.js             |    2 +-
 15 files changed, 2010 insertions(+), 976 deletions(-)
 create mode 100644 nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
 create mode 100644 nezha-fronted/src/components/page/dashboard/explore/logTab.vue

diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 81214c7c9..9e32ff771 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -24,7 +24,7 @@
     "@topology/sequence-diagram": "^0.3.0",
     "axios": "^0.19.0",
     "cytoscape": "^3.15.2",
-    "echarts": "^5.0.1",
+    "echarts": "^5.1.2",
     "element-ui": "^2.15.3",
     "file-saver": "^2.0.2",
     "leaflet": "^1.7.1",
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 30a9333fd..041859def 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -54,63 +54,63 @@
     .top-tool-left {
       display: flex;
     }
-    .top-tool-btn-group {
-      display: flex;
-      .top-tool-btn:not(:last-of-type):not(:first-of-type) {
-        border-left: none;
-        border-radius: 0;
-      }
-      .top-tool-btn:first-of-type:not(:last-of-type) {
-        border-radius: $--button-border-radius 0 0 $--button-border-radius;
-      }
-      .top-tool-btn:last-of-type:not(:first-of-type) {
-        border-radius: 0 $--button-border-radius $--button-border-radius 0;
-        border-left: none;
-      }
+  }
+  .top-tool-btn-group {
+    display: flex;
+    .top-tool-btn:not(:last-of-type):not(:first-of-type) {
+      border-left: none;
+      border-radius: 0;
     }
-    .top-tool-btn {
-      height: 32px;
-      width: 36px;
-      border: 1px solid $--primary-border-color;
-      outline: none;
-      border-radius: $--button-border-radius;
-      background-color: $--button-gray-background-color;
-      transition: background-color linear .1s;
+    .top-tool-btn:first-of-type:not(:last-of-type) {
+      border-radius: $--button-border-radius 0 0 $--button-border-radius;
+    }
+    .top-tool-btn:last-of-type:not(:first-of-type) {
+      border-radius: 0 $--button-border-radius $--button-border-radius 0;
+      border-left: none;
+    }
+  }
+  .top-tool-btn {
+    height: 32px;
+    width: 36px;
+    border: 1px solid $--primary-border-color;
+    outline: none;
+    border-radius: $--button-border-radius;
+    background-color: $--button-gray-background-color;
+    transition: background-color linear .1s;
 
-      i {
-        font-size: 14px;
-        color: $--button-gray-color;
-      }
+    i {
+      font-size: 14px;
+      color: $--button-gray-color;
     }
-    .top-tool-btn.top-tool-btn--text {
-      padding: 0 8px;
-      width: unset;
-      color: #666;
+  }
+  .top-tool-btn.top-tool-btn--text {
+    padding: 0 8px;
+    width: unset;
+    color: #666;
+  }
+  .top-tool-btn:hover:not(.nz-btn-disabled) {
+    background-color: $--button-gray-hover-background-color;
+  }
+  .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
+    background-color: $--button-gray-hover-background-color;
+    border: 1px solid #FBCEA4 !important;
+    i {
+      color: $--button-gray-active-color;
     }
-    .top-tool-btn:hover:not(.nz-btn-disabled) {
-      background-color: $--button-gray-hover-background-color;
-    }
-    .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
-      background-color: $--button-gray-hover-background-color;
-      border: 1px solid #FBCEA4 !important;
-      i {
-        color: $--button-gray-active-color;
-      }
-    }
-    .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
-      background-color: $--button-gray-hover-background-color;
-      border-color: #FFC4B9;
+  }
+  .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
+    background-color: $--button-gray-hover-background-color;
+    border-color: #FFC4B9;
 
-      i {
-        color: #F0745A;
-      }
-    }
-    .top-tool-btn--dropdown {
-      position: relative;
-      width: auto;
-      min-width: 36px;
+    i {
+      color: #F0745A;
     }
   }
+  .top-tool-btn--dropdown {
+    position: relative;
+    width: auto;
+    min-width: 36px;
+  }
   .top-tools--sub {
     .top-tool-left {
       height: 100%;
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 25b5da6a8..c297e1979 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -706,7 +706,6 @@
   }
 }
 .top-tool-btn-group {
-  margin-left: 10px;
   display: flex;
   .top-tool-btn:not(:last-of-type):not(:first-of-type) {
     border-left: none;
diff --git a/nezha-fronted/src/components/common/chartUnit.vue b/nezha-fronted/src/components/common/chartUnit.vue
index 5956aefaa..c93e53910 100644
--- a/nezha-fronted/src/components/common/chartUnit.vue
+++ b/nezha-fronted/src/components/common/chartUnit.vue
@@ -59,7 +59,6 @@ export default {
 
   .chart-unit{
     width: 100px;
-    margin: 0 20px 0 0;
   }
   .chart-unit.el-cascader .el-input.is-focus .el-input__inner {
     border-color: #FBCEA4;
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 2d5ab4e0f..7c96e3d5a 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -13,6 +13,7 @@ const cn = {
     oneDay: '1 天',
     twoDay: '2 天',
     week: '1 周',
+    time: '时间',
     folder: '文件夹',
     key: '键名',
     state: '状态',
@@ -64,6 +65,7 @@ const cn = {
     other: '其他',
     about: '关于',
     query: '查询',
+    logLabels: '日志标签',
     account: '账号',
     back: '返回',
     unavailable: '不可用',
@@ -114,6 +116,7 @@ const cn = {
     },
     reset: '重置',
     submit: '保存',
+    limit: '限制',
     noData: '没有数据',
     tag: '标签',
     syncChart: '同步图表',
@@ -519,6 +522,10 @@ const cn = {
         down: 'down',
         prometheus: 'prometheus'
       }
+    },
+    explore: {
+      descending: '降序',
+      wrapLines: '换行'
     }
   },
   validate: {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index aedf07023..84b496b86 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -19,8 +19,10 @@ const en = {
     oneDay: '1 day',
     twoDay: '2 days',
     week: '1 week',
+    time: 'Time',
     folder: 'Folder',
     key: 'Key',
+    logs: 'Logs',
     state: 'State',
     projectName: 'Project name',
     startTime: 'Start time',
@@ -69,6 +71,7 @@ const en = {
     about: 'About', // 关于
     detail: 'Detail', // 详情
     query: 'Query', // 查询
+    logLabels: 'Log labels',
     account: 'Account',
     back: 'Back', // 返回
     unavailable: 'Unavailable',
@@ -118,6 +121,7 @@ const en = {
     },
     reset: 'Reset',
     submit: 'Save',
+    limit: 'Limit',
     noData: 'No data',
     tag: 'Tag',
     placeHolder: 'Please enter',
@@ -528,6 +532,10 @@ const en = {
         down: 'down',
         prometheus: 'prometheus'
       }
+    },
+    explore: {
+      descending: 'Descending',
+      wrapLines: 'Wrap lines'
     }
   },
   validate: { // 校验规则
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 7c39fdaec..7d113738e 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="interval-refresh">
     <time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange"></time-picker>
-    <multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
-    <chart-unit v-model="unit" v-if="useChartUnit" style="margin-left: 10px"></chart-unit>
-    <div v-show="useRefresh" class="top-tool-btn-group margin-r-10">
+    <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
+    <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
+    <div v-show="useRefresh" class="top-tool-btn-group">
       <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="refreshDataFunc">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
         <span><slot name="added-text"></slot></span>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/explore.vue b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
index 960f03256..1f0d993a0 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/explore.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/explore.vue
@@ -1,677 +1,41 @@
 <template>
-  <div class="explore list-page">
-    <div class="main-list">
-      <div class="main-container" style="overflow: auto;">
-        <!-- 顶部工具栏 -->
-        <div class="top-tools" style="z-index: 1">
-          <div class="top-tool-left"></div>
-          <div class="top-tool-right">
-            <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange" ref="pickTime" id="explore">
-              <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
-            </pick-time>
-            <button id="explore-save-chart" v-has="'panel_chart_add'" :disabled="saveDisabled" class="top-tool-btn top-tool-btn--text" type="button"
-                    @click="saveChart"
-                    :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
-              {{$t('dashboard.metric.saveChart')}}
-            </button>
-          </div>
-        </div>
-        <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
-          <!--坑，这个index居然是从1开始-->
-          <promql-input
-            v-for="index of promqlKeys.length"
-            :id="promqlKeys[index-1]"
-            :key="promqlKeys[index-1]"
-            :ref="'promql-'+(index-1)"
-            :expression-list="expressions"
-            :index="index-1"
-            :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
-            :styleType="1"
-            @addExpression="addExpression"
-            @copyExpression="copyExpression"
-            @removeExpression="removeExpression"
-          ></promql-input>
-        </div>
-        <div ref="scrollWrap" style="height: auto; padding: 0 20px 4px;">
-          <div v-show="!showIntroduce" class="chart-view"
-               :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
-            <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000;top:10px;"><i class="nz-icon nz-icon-caret-top" ></i>&nbsp;graph</div>
-            <div class="chart-room">
-              <chart ref="exploreChart" :unit="chartUnit"></chart>
-            </div>
-          </div>
-          <div v-show="!showIntroduce" class="table-view"
-               :class="{'shrink-view':!tableVisible || !defaultTableVisible}" style="position: relative">
-            <div class="view-title" style="position:absolute;z-index: 1000;top:4px;" @click="changeTableVisible"><i class="nz-icon nz-icon-caret-top"></i>&nbsp;table</div>
-            <div class="table-room">
-              <!-- 自定义table列 -->
-              <transition name="el-zoom-in-top">
-                <element-set
-                  class="pop-custom-explore"
-                  v-if="tools.showCustomTableTitle"
-                  @close="tools.showCustomTableTitle = false"
-                  :custom-table-title.sync="tools.customTableTitle"
-                  :original-table-title="tableTitle"
-                  ref="customTableTitle"
-                ></element-set>
-              </transition>
-              <el-table class="nz-table explore-table"
-                        :data="tableData"
-                        border
-                        ref="exploreTable"
-                        tooltip-effect="light"
-                        v-loading="tools.loading">
-                <el-table-column
-                  :resizable="false"
-                  v-for="(item, index) in tools.customTableTitle"
-                  v-if="item.show"
-                  :key="`col-${index}`"
-                  :label="item.label"
-                  :prop="item.prop"
-                  show-overflow-tooltip
-                  min-width="110px"
-                ></el-table-column>
-                <el-table-column width="28" v-if="tools.customTableTitle.length>0">
-                  <template slot="header" :resizable="false">
-                  <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
-                    <i class="nz-icon nz-icon-gear"></i>
-                  </span>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
-                          :append-to-body="false"></pagination>
-            </div>
-          </div>
-          <div v-show="showIntroduce" class="introduce-view">
-            <div class="info-room">
-              <div class="col-md-9 doc-content">
-                <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank" rel="noopener noreferrer"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
-                <div class="content-divider"></div>
-                <h2 >
-                  Simple time series selection
-                </h2>
-
-                <p>Return all time series with the metric <code>http_requests_total</code>:</p>
-
-                <pre><code>http_requests_total</code></pre>
-
-                <p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
-
-                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
-
-                <p>Return a whole range of time (in this case 5 minutes) for the same vector,
-                  making it a range vector:</p>
-
-                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
-
-                <p>Note that an expression resulting in a range vector cannot be graphed directly,
-                  but viewed in the tabular ("Console") view of the expression browser.</p>
-
-                <p>Using regular expressions, you could select time series only for jobs whose
-                  name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
-
-                <pre><code>http_requests_total{job=~".*server"}</code></pre>
-
-                <p>All regular expressions in Prometheus use RE2 syntax.</p>
-
-                <p>To select all HTTP status codes except 4xx ones, you could run:</p>
-
-                <pre><code>http_requests_total{status!~"4.."}</code></pre>
-
-                <h2 >
-                  Subquery
-                </h2>
-
-                <p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
-
-                <pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
-
-                <p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
-
-                <pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
-
-                <h2 >
-                  Using functions, operators, etc.
-                </h2>
-
-                <p>Return the per-second rate for all time series with the <code>http_requests_total</code>
-                  metric name, as measured over the last 5 minutes:</p>
-
-                <pre><code>rate(http_requests_total[5m])</code></pre>
-
-                <p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
-                  (fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
-                  want to sum over the rate of all instances, so we get fewer output time series,
-                  but still preserve the <code>job</code> dimension:</p>
-
-                <pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
-
-                <p>If we have two different metrics with the same dimensional labels, we can apply
-                  binary operators to them and elements on both sides with the same label set
-                  will get matched and propagated to the output. For example, this expression
-                  returns the unused memory in MiB for every instance (on a fictional cluster
-                  scheduler exposing these metrics about the instances it runs):</p>
-
-                <pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
-
-                <p>The same expression, but summed by application, could be written like this:</p>
-
-                <pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
-
-                <p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
-
-                <pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
-instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
-instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
-instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
-...
-</code></pre>
-
-                <p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
-
-                <pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
-
-                <p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
-
-                <pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
-
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <transition name="right-box">
-      <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess" ref="addChartModal" v-if="rightBox.show"></chart-box>
-    </transition>
+  <div class="explores">
+    <explore-item
+      v-for="item in exploreItems"
+      :key="item"
+      :closable="closable"
+      :tab-index="item"
+      @split="split"
+    >
+    </explore-item>
   </div>
 </template>
 
 <script>
-import bus from '../../../../libs/bus'
-import promqlInput from './promqlInput'
-// import promqlInputPlus from "./promqlInputPlus";
-import chart from '../overview/chart'
-import axios from 'axios'
-import chartBox from '../../../page/dashboard/chartBox'
-import { getUUID } from '../../../common/js/common'
-import chartDataFormat from '../../../charts/chartDataFormat'
-
+import exploreItem from '@/components/page/dashboard/explore/exploreItem'
 export default {
   name: 'explore',
   components: {
-    'promql-input': promqlInput,
-    chart: chart,
-    'chart-box': chartBox
+    exploreItem
   },
   data () {
     return {
-      rightBox: { // 面板弹出框相关
-        show: false
-      },
-      promqlCount: 1,
-      promqlKeys: [],
-      expressions: [''],
-      filterTime: [
-        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
-        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
-      ],
-
-      /* 工具参数 */
-      tools: {
-        loading: false, // 是否显示table加载动画
-        showCustomTableTitle: false, // 自定义列弹框是否显示
-        customTableTitle: [] // 自定义列工具的数据
-      },
-      tableTitle: [],
-      showIntroduce: true,
-      defaultChartVisible: true,
-      defaultTableVisible: true,
-      chartVisible: true,
-      tableVisible: true,
-      pageObj: {
-        pageNo: 1,
-        pageSize: this.$CONSTANTS.defaultPageSize,
-        total: 0
-      },
-      tableData: [],
-      saveDisabled: true,
-      panelData: [],
-      chartUnit: 0,
-      historyParam: { useHistory: true, key: 'expore-history' },
-      chart: {},
-      metricOptions: []
+      exploreItems: [0]
     }
   },
-  created () {
-    this.getPanelData()
-    this.queryMetrics()
-    this.promqlKeys.push(getUUID())
+  computed: {
+    closable () {
+      return this.exploreItems.length === 2
+    }
   },
   methods: {
-    pageNo (val) {
-      this.pageObj.pageNo = val
-      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
-    },
-    pageSize (val) {
-      this.pageObj.pageSize = val
-      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
-    },
-    filterShowData (source, pageObj) {
-      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
-    },
-    chartUnitChange: function (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.expressionChange()
-      })
-    },
-    queryChartData: function () {
-      this.$refs.exploreChart.startLoading()
-      setTimeout(() => {
-        if (this.expressions.length > 0) {
-          const requestArr = []
-          const promqlInputIndexs = []
-          const queryExpression = []
-          this.expressions.forEach((item, index) => {
-            if (item != '') {
-              const step = bus.getStep(this.filterTime[0], this.filterTime[1])
-              promqlInputIndexs.push(index)
-              queryExpression.push(item)
-              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
-            }
-          })
-          if (requestArr.length > 0) {
-            this.showIntroduce = false
-            this.saveDisabled = false
-          }
-          axios.all(requestArr).then(res => {
-            const series = []
-            const legend = []
-            if (res.length > 0) {
-              res.forEach((response, index) => {
-                const promqlIndex = promqlInputIndexs[index]
-                if (response.data && response.status == 'success') {
-                  const data = response.data.result
-                  if ((!data || data.length < 1) && response.message) {
-                    this.$refs['promql-' + promqlIndex][0].setError(response.message)
-                    return
-                  }
-                  data.forEach((result, i) => {
-                    const seriesItem = {
-                      name: '',
-                      symbol: 'emptyCircle', // 去掉点
-                      symbolSize: [2, 2],
-                      showSymbol: false,
-                      smooth: 0.2, // 曲线变平滑
-                      data: [],
-                      lineStyle: {
-                        width: 1,
-                        opacity: 0.9
-                      },
-                      type: 'line'
-                    }
-                    let legendName = ''
-                    seriesItem.data = result.values.map((item) => {
-                      return [item[0] * 1000, item[1]]
-                    })
-                    if (result.metric && Object.keys(result.metric).length > 0) {
-                      const metric = Object.assign({}, result.metric)
-                      seriesItem.name += metric.__name__ ? metric.__name__ : ''
-                      seriesItem.name += '{'
-                      delete metric.__name__
-                      for (const key in metric) {
-                        seriesItem.name += key + '=' + '"' + metric[key] + '",'
-                      }
-                      legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
-                      legendName += '}'
-                    } else {
-                      legendName = queryExpression[index]
-                    }
-                    seriesItem.name = legendName + '-' + index
-                    series.push(seriesItem)
-                    legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
-                  })
-
-                  this.$refs['promql-' + promqlIndex][0].setError('')
-                } else {
-                  // console.log(response)
-                  this.$refs['promql-' + promqlIndex][0].setError(response.error)
-                }
-              })
-
-              this.$refs.exploreChart.setLegend(legend)
-              this.$refs.exploreChart.setRandomColors(series.length)
-              this.$refs.exploreChart.setSeries(series)
-              this.defaultChartVisible = true
-            }
-            this.$refs.exploreChart.endLoading()
-          })
-        }
-      }, 200)
-    },
-    queryTableData () {
-      this.tools.loading = true
-      setTimeout(() => {
-        if (this.expressions.length > 0) {
-          const requestArr = []
-          this.expressions.forEach((item, index) => {
-            if (item !== '') {
-              requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
-            }
-          })
-          if (requestArr.length > 0) {
-            this.showIntroduce = false
-          }
-          axios.all(requestArr).then(res => {
-            const tData = []
-            const tLabels = []
-            if (res.length > 0) {
-              this.tableData = []
-              this.tableTitle = []
-              res.forEach((response, index) => {
-                if (response.data && response.status === 'success') {
-                  const data = response.data.result
-                  if (data) {
-                    data.forEach((result, i) => {
-                      const metrics = Object.assign({}, result.metric)
-                      if (!Array.isArray(result.value)) {
-                        const val = result
-                        result = {
-                          value: ['', val]
-                        }
-                      }
-                      this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1], null, 2))
-                      for (const key in metrics) {
-                        const label = {
-                          label: key === '__name__' ? 'metric' : key,
-                          prop: key,
-                          show: true
-                        }
-                        const temp = tLabels.find((item, index) => {
-                          return item.prop == label.prop
-                        })
-                        if (!temp) {
-                          tLabels.push(label)
-                        }
-                      }
-                      tData.push(metrics)
-                    })
-                  }
-                }
-                tLabels.sort((a, b) => {
-                  return a.prop.charCodeAt(0) - b.prop.charCodeAt(0)
-                })
-              })
-              if (tData.length > 0) {
-                this.storedTableData = Object.assign([], tData)
-                this.pageObj.total = this.storedTableData.length
-                this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
-                this.tableTitle = Object.assign([], tLabels)
-                this.tools.customTableTitle = Object.assign([], tLabels)
-                this.defaultTableVisible = true
-              } else {
-                // this.defaultTableVisible = false;
-              }
-            }
-            this.tools.loading = false
-          })
-        }
-      }, 200)
-    },
-    expressionChange: function () {
-      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
-      // console.log(this.filterTime,nowTimeType);
-      this.setSearchTime(nowTimeType.type, nowTimeType.value)
-      if (this.expressions && this.expressions.length >= 1) {
-        this.queryTableData()
-        this.queryChartData()
-        this.storeHistory()
-      }
-    },
-    setSearchTime (type, val) { // 设置searchTime
-      if (type === 'minute') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'm')
-      } else if (type === 'hour') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'h')
-      } else if (type === 'date') {
-        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
-        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
-        this.$set(this.filterTime, 0, startTime)
-        this.$set(this.filterTime, 1, endTime)
-        this.$set(this.filterTime, 2, val + 'd')
-      }
-      this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
-    },
-    storeHistory: function () {
-      const expire = 24
-      const historyJson = localStorage.getItem(this.historyParam.key)
-      const expressions = this.expressions.filter(item => {
-        return item && item != ''
-      })
-      const username = sessionStorage.getItem('nz-username')
-      if (historyJson && historyJson != 'undefined' && historyJson != '') {
-        const historyObj = JSON.parse(historyJson)
-        let history = historyObj[username]
-        if (history) {
-          // 过滤过期表达式
-          history = history.filter(item => {
-            return item.time + item.expire >= new Date().getTime()
-          })
-          let repeat = history.filter(item => {
-            return expressions.includes(item.insertText)
-          })
-          const old = history.filter(item => {
-            return !expressions.includes(item.insertText)
-          })
-
-          const freshExpression = expressions.filter(item => {
-            const find = history.find(t => { return t.insertText == item })
-            return !find
-          })
-
-          repeat = repeat.map(item => {
-            item.time = new Date().getTime()
-            item.num += 1
-            item.documentation = this.$t('dashboard.metricPreview.historyTip', { time: item.num, hour: 24 })
-            return item
-          })
-
-          const fresh = freshExpression.map(item => {
-            return {
-              label: item,
-              insertText: item,
-              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
-              num: 1,
-              time: new Date().getTime(),
-              expire: expire * 60 * 60 * 1000
-            }
-          })
-
-          historyObj[username] = fresh.concat(repeat).concat(old)
+    split (index) {
+      const tabIndex = this.exploreItems.indexOf(index)
+      if (tabIndex > -1) {
+        if (this.exploreItems.length === 2) {
+          this.exploreItems.splice(tabIndex, 1)
         } else {
-          const history = expressions.map(item => {
-            return {
-              label: item,
-              insertText: item,
-              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
-              num: 1,
-              time: new Date().getTime(),
-              expire: expire * 60 * 60 * 1000
-            }
-          })
-          historyObj[username] = history
-        }
-        localStorage.setItem(this.historyParam.key, JSON.stringify(historyObj))
-      } else {
-        const history = expressions.map(item => {
-          return {
-            label: item,
-            insertText: item,
-            documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
-            num: 1,
-            time: new Date().getTime(),
-            expire: expire * 60 * 60 * 1000
-          }
-        })
-        if (history && history.length > 0) {
-          const stored = {}
-          stored[username] = history
-          localStorage.setItem(this.historyParam.key, JSON.stringify(stored))
-        }
-      }
-    },
-    addExpression (index) {
-      this.expressions.splice(index + 1, 0, '')
-      this.promqlKeys.splice(index + 1, 0, getUUID())
-      this.promqlCount++
-    },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      this.promqlKeys.push(getUUID())
-      this.promqlCount++
-    },
-    removeExpression (index) {
-      if (this.promqlCount > 1) {
-        this.expressions.splice(index, 1)
-        this.promqlKeys.splice(index, 1)
-        this.promqlCount--
-      }
-    },
-    changeChartVisible: function () {
-      this.chartVisible = !this.chartVisible
-    },
-    changeTableVisible: function () {
-      this.tableVisible = !this.tableVisible
-    },
-    handleBox (show) {
-      this.rightBox.show = show
-    },
-    saveChart () {
-      const chart = {
-        name: '',
-        type: 'line',
-        span: 12,
-        height: '400',
-        unit: this.chartUnit,
-        param: {
-          url: '',
-          threshold: ''
-        },
-        elements: [],
-        panel: '',
-        sync: 0,
-        groupId: '',
-        remark: ''
-      }
-      this.expressions.forEach((exp) => {
-        chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })
-      })
-      this.chart = chart
-      this.rightBox.show = true
-    },
-    createSuccess (type, response, param, panel) { // 添加chart成功
-      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'success'
-      }).then(() => {
-        bus.$emit('menu-change', 'panel')
-        this.$store.commit('panelShowPanelChange', panel)
-        this.$router.push({
-          path: '/panel',
-          query: {
-            t: +new Date()
-          }
-        })
-      })
-    },
-    getPanelData () { // 获取panel数据
-      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
-        if (response.code === 200) {
-          this.panelData = response.data.list
-        }
-      })
-    },
-    jumpTo (data, id) {
-      bus.$emit('menu-change', data)
-      this.$router.push({
-        path: '/' + data,
-        query: {
-          t: +new Date()
-        }
-      })
-    },
-    queryMetrics () {
-      this.metricOptions = []
-      this.$get('prom/api/v1/label/__name__/values').then(response => {
-        if (response.status == 'success') {
-          const metrics = response.data.sort()
-          const metricMap = new Map()
-          metrics.forEach((item) => {
-            let key = ''
-            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
-              key = item.split('_')[0]
-            } else if (/^_\w*/.test(item)) {
-              key = '      '
-            } else {
-              key = item
-            }
-            if (metricMap.get(key)) {
-              const values = metricMap.get(key)
-              values.push({ label: item, value: item })
-            } else {
-              const values = [{ label: item, value: item }]
-              metricMap.set(key, values)
-            }
-            // this.metricStore.push({label:item,value:item,insertText:item})
-          })
-          for (const key of metricMap.keys()) {
-            const option = {
-              label: key,
-              value: key
-            }
-            if (metricMap.get(key) && metricMap.get(key).length > 1) {
-              option.children = metricMap.get(key)
-            }
-            this.metricOptions.push(option)
-          }
-        }
-      })
-    },
-    getMetricOptions () {
-      return this.metricOptions
-    }
-  },
-  watch: {
-    promqlCount: function (n, o) {
-      this.expressionChange()
-    },
-    expressions: {
-      immediate: true,
-      handler: function (n, o) {
-        if (n.length == 1 && (!n[0] || n[0] == '')) {
-          this.showIntroduce = true
-        } else if (n.length > 1) {
-          const temp = n.find((item, index) => {
-            return item != ''
-          })
-          if (!temp) {
-            this.showIntroduce = true
-          } else {
-            this.showIntroduce = false
-          }
-        } else {
-          this.showIntroduce = false
+          this.exploreItems.push(index === 0 ? 1 : 0)
         }
       }
     }
@@ -679,248 +43,11 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-  .explore {
-    height: 100%;
-  }
-
-  .explore .chart-room {
-    width: 100%;
-    height: 400px
-  }
-
-  .explore .chart-view, .table-view {
-    padding: 22px 10px 10px 10px;
-    border: 1px solid lightgrey;
-    box-sizing: inherit;
-    margin-bottom: 5px;
-    transition: height 1s;
-  }
-  .explore .chart-view:hover,.explore .table-view:hover {
-    cursor: default;
-  }
-  .shrink-view {
-    height: 30px;
-
-    .view-title i {
-      transform: rotate(180deg);
-    }
-
-    .chart-room, .table-room {
-      height: 0px;
-      visibility: hidden;
-    }
-
-  }
-  .table-room {
-    position: relative;
-    margin-top: 10px;
-  }
-  .explore .view-title {
-    font-weight: 500;
-    margin-right: 8px;
-    font-size: 14px;
-    box-shadow: none;
-  }
-
-  .introduce-view .info-room {
-    padding: 24px;
-    background-color: #e9edf2;
-    border-top: 3px solid #3274d9;
-    -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-    box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-  }
-
-  .info-room .cheat-sheet-item__title {
-    font-size: 21px;
-  }
-
-  .info-room .cheat-sheet-item__label {
-    font-size: 13px;
-  }
-
-  .info-room code {
-    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
-    font-size: 11px;
-    background-color: #e9edf2;
-    color: #52545c;
-    border: 1px solid #c7d0d9;
-    border-radius: 4px;
-  }
-  /*外部引用 样式start*/
-  .doc-content {
-    font-size: 16px;
-  }
-
-  .doc-content p, .doc-content.ul, .doc-content .alert {
-    margin: 15px 0 15px 0;
-    line-height: 1.5;
-  }
-
-  .doc-content .content-divider{
-    height: 1px;
-    width:100%;
-    border-bottom: 2px solid #C0C4CC;
-    margin: 5px 0px;
-  }
-
-  .doc-content > h1 {
-    color: #e6522c;
-    font-size: 30px;
-    text-transform: uppercase;
-  }
-
-  .doc-content > h1 a {
-    color: #000 !important;
-  }
-
-  .doc-content.blog > h1 {
-    text-transform: none;
-  }
-
-  .doc-content.blog .sponsor-logos > a > img {
-    width: 250px;
-    display: inline-block !important;
-    margin: 15px 55px;
-  }
-  .doc-content > h1 {
-    color: #e6522c;
-    font-size: 22px;
-  }
-
-  .doc-content > h2 {
-    color: #e6522c;
-    font-size: 18px;
-  }
-
-  .doc-content > h2 code {
-    color: #e6522c;
-    background: none;
-  }
-
-  .doc-content > h3 {
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  .doc-content > h4 {
-    font-weight: bold;
-    font-size: 18px;
-    margin-top: 20px;
-  }
-
-  .doc-content a.header-anchor {
-    padding-left: 15px;
-    color: gray;
-    text-decoration: none;
-  }
-
-  .doc-content a.header-anchor:link,
-  .doc-content a.header-anchor:visited {
-    /*visibility: hidden;*/
-  }
-
-  .doc-content h1:hover a.header-anchor:hover,
-  .doc-content h2:hover a.header-anchor:hover,
-  .doc-content h3:hover a.header-anchor:hover,
-  .doc-content h4:hover a.header-anchor:hover,
-  .doc-content h5:hover a.header-anchor:hover,
-  .doc-content h6:hover a.header-anchor:hover {
-    /*color: #000;*/
-  }
-
-  .doc-content h1:hover a.header-anchor,
-  .doc-content h2:hover a.header-anchor,
-  .doc-content h3:hover a.header-anchor,
-  .doc-content h4:hover a.header-anchor,
-  .doc-content h5:hover a.header-anchor,
-  .doc-content h6:hover a.header-anchor {
-    /*color: #999;*/
-    /*visibility: visible;*/
-  }
-
-  .doc-content img {
-    width: 90%;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
-  }
-
-  .doc-content img.orig-size {
-    width: auto;
-    margin-left: 0;
-  }
-
-  .doc-content .open-source-notice {
-    color: #666;
-    background-color: #f5f5f5;
-    text-align: center;
-    padding: 0.8em;
-    margin-top: 1.5em;
-  }
-
-  .toc {
-    padding: 1em;
-    background-color: #f5f5f5;
-  }
-
-  .toc-right {
-    float: right;
-    width: 40%;
-    margin: 0 0 0.5em 0.5em;
-  }
-
-  .toc ul {
-    padding: 0 0 0 1.5em;
-    margin: 0;
-  }
-
-  .toc a code {
-    color: #337ab7;
-    background-color: transparent;
-  }
-
-  pre {
-    border: 1px solid #ddd;
-    border-left: 4px solid #e6522c;
-    border-radius: 0;
-    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-    background-color: #f5f5f5;
-    color: #333;
-    padding: 15px;
-  }
-
-  pre code {
-    white-space: pre;
-  }
-
-  code {
-    color: #333;
-  }
-
-  aside {
-    color: #888;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #aaa;
-  }
-
-  article {
-    margin: 10px 0 60px 0;
-  }
-
-  /*外部引用 样式end*/
-</style>
-<style lang="scss">
-  .explore-table tr td .cell {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .explore .promqlInput:not(:first-of-type) {
-    margin-top: 10px;
-  }
+<style scoped>
+.explores {
+  display: flex;
+  padding: 10px 0 10px 10px;
+  background-color: #f6f6f6;
+  box-sizing: border-box;
+}
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
new file mode 100644
index 000000000..d15d0d8f8
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
@@ -0,0 +1,1400 @@
+<template>
+  <div class="explore list-page">
+    <div class="main-list">
+      <div class="main-container">
+        <!-- 关闭按钮 -->
+        <div v-if="closable" class="explore-close">
+          <span @click="split"><i class="nz-icon nz-icon-close"></i></span>
+        </div>
+        <!-- 顶部工具栏 -->
+        <div class="top-tools" style="z-index: 1">
+          <div class="top-tool-left">
+            <el-select v-model="fromData.status" size="small" style="width: 120px;" @change="changeType">
+              <el-option
+                v-for="item in searchMetrics"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div class="top-tool-right">
+            <button v-if="!closable" class="top-tool-btn top-tool-btn--text margin-r-10" style="cursor: pointer;" type="button" @click="split">Split</button>
+            <pick-time id="explore" ref="pickTime" v-model="filterTime" :class="{'margin-r-10': showMetrics}" :refresh-data-func="expressionChange" @unitChange="chartUnitChange">
+<!--              <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>-->
+              <template slot="added-text">{{$t('overall.query')}}</template>
+            </pick-time>
+            <button v-if="showMetrics"
+                    id="explore-save-chart"
+                    v-has="'panel_chart_add'"
+                    :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
+                    :disabled="saveDisabled"
+                    class="top-tool-btn top-tool-btn--text"
+                    type="button"
+                    @click="saveChart">
+              {{$t('dashboard.metric.saveChart')}}
+            </button>
+          </div>
+        </div>
+        <div id="explore-promql-box" class="top-tools" style="padding-top: 0; flex-wrap: wrap">
+          <template v-if="showMetrics">
+            <promql-input
+              v-for="index of promqlKeys.length"
+              :id="promqlKeys[index-1]"
+              :key="promqlKeys[index-1]"
+              :ref="'promql-'+(index-1)"
+              :expression-list="expressions"
+              :index="index-1"
+              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
+              :styleType="1"
+              type="metric"
+              @addExpression="addExpression"
+              @copyExpression="copyExpression"
+              @removeExpression="removeExpression"
+              @resetExpression="resetExpression"
+            ></promql-input>
+          </template>
+          <template v-else>
+            <promql-input
+              v-for="index of promqlKeys.length"
+              :id="promqlKeys[index-1]"
+              :key="promqlKeys[index-1]"
+              :ref="'promql-'+(index-1)"
+              :expression-list="expressions"
+              :index="index-1"
+              :plugins="['metric-selector', 'metric-input', 'add', 'remove', 'copy']"
+              :styleType="1"
+              type="log"
+              @addExpression="addExpression"
+              @copyExpression="copyExpression"
+              @removeExpression="removeExpression"
+              @resetExpression="resetExpression"
+            ></promql-input>
+          </template>
+        </div>
+        <div ref="scrollWrap" style="height: auto; padding: 0 20px 4px;">
+          <el-collapse v-show="!showIntroduce" v-model="collapseValue" class="explore-collapse">
+            <!--metric-->
+            <template v-if="showMetrics">
+              <el-collapse-item name="1" title="Graph">
+                <div class="chart-room">
+                  <chart ref="exploreChart" :unit="chartUnit"></chart>
+                </div>
+              </el-collapse-item>
+              <el-collapse-item name="2" title="Table">
+                <div class="table-room">
+                  <!-- 自定义table列 -->
+                  <transition name="el-zoom-in-top">
+                    <element-set
+                      v-if="tools.showCustomTableTitle"
+                      ref="customTableTitle"
+                      :custom-table-title.sync="tools.customTableTitle"
+                      :original-table-title="tableTitle"
+                      class="pop-custom-explore"
+                      @close="tools.showCustomTableTitle = false"
+                    ></element-set>
+                  </transition>
+                  <el-table ref="exploreTable"
+                            v-loading="tools.loading"
+                            :data="tableData"
+                            border
+                            class="nz-table explore-table"
+                            tooltip-effect="light">
+                    <el-table-column
+                      v-for="(item, index) in tools.customTableTitle"
+                      v-if="item.show"
+                      :key="`col-${index}`"
+                      :label="item.label"
+                      :prop="item.prop"
+                      :resizable="false"
+                      min-width="110px"
+                      show-overflow-tooltip
+                    ></el-table-column>
+                    <el-table-column v-if="tools.customTableTitle.length>0" width="28">
+                      <template slot="header" :resizable="false">
+                <span class="nz-table-gear" @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)">
+                  <i class="nz-icon nz-icon-gear"></i>
+                </span>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <pagination ref="Pagination" :append-to-body="false" :page-obj="pageObj" @pageNo='pageNo'
+                              @pageSize='pageSize'></pagination>
+                </div>
+              </el-collapse-item>
+            </template>
+            <!--log-->
+            <template v-else>
+              <el-collapse-item v-if="collapseValue.indexOf('1') > -1" name="1" title="Graph">
+                <div class="chart-room">
+                  <chart ref="logChart" :unit="chartUnit"></chart>
+                </div>
+              </el-collapse-item>
+              <el-collapse-item v-if="collapseValue.indexOf('2') > -1" name="2" title="Logs">
+                <log-tab ref="logDetail" :log-data="logData" :unit="chartUnit" @exportLog="exportLog"></log-tab>
+              </el-collapse-item>
+            </template>
+          </el-collapse>
+          <div v-if="showMetrics" v-show="showIntroduce" class="introduce-view">
+            <div class="info-room">
+              <div class="col-md-9 doc-content">
+                <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" rel="noopener noreferrer" target="_blank"><i class="nz-icon nz-icon-link1" style="font-size: 16px;"></i></a></h1>
+                <div class="content-divider"></div>
+                <h2 >
+                  Simple time series selection
+                </h2>
+
+                <p>Return all time series with the metric <code>http_requests_total</code>:</p>
+
+                <pre><code>http_requests_total</code></pre>
+
+                <p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
+
+                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
+
+                <p>Return a whole range of time (in this case 5 minutes) for the same vector,
+                  making it a range vector:</p>
+
+                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
+
+                <p>Note that an expression resulting in a range vector cannot be graphed directly,
+                  but viewed in the tabular ("Console") view of the expression browser.</p>
+
+                <p>Using regular expressions, you could select time series only for jobs whose
+                  name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
+
+                <pre><code>http_requests_total{job=~".*server"}</code></pre>
+
+                <p>All regular expressions in Prometheus use RE2 syntax.</p>
+
+                <p>To select all HTTP status codes except 4xx ones, you could run:</p>
+
+                <pre><code>http_requests_total{status!~"4.."}</code></pre>
+
+                <h2 >
+                  Subquery
+                </h2>
+
+                <p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
+
+                <pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
+
+                <p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
+
+                <pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
+
+                <h2 >
+                  Using functions, operators, etc.
+                </h2>
+
+                <p>Return the per-second rate for all time series with the <code>http_requests_total</code>
+                  metric name, as measured over the last 5 minutes:</p>
+
+                <pre><code>rate(http_requests_total[5m])</code></pre>
+
+                <p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
+                  (fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
+                  want to sum over the rate of all instances, so we get fewer output time series,
+                  but still preserve the <code>job</code> dimension:</p>
+
+                <pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
+
+                <p>If we have two different metrics with the same dimensional labels, we can apply
+                  binary operators to them and elements on both sides with the same label set
+                  will get matched and propagated to the output. For example, this expression
+                  returns the unused memory in MiB for every instance (on a fictional cluster
+                  scheduler exposing these metrics about the instances it runs):</p>
+
+                <pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+
+                <p>The same expression, but summed by application, could be written like this:</p>
+
+                <pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+
+                <p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
+
+                <pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
+instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
+...
+</code></pre>
+
+                <p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
+
+                <pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
+
+                <p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
+
+                <pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
+
+              </div>
+            </div>
+          </div>
+          <div v-else v-show="showIntroduce" class="introduce-view">
+            <div class="info-room title-heard">
+              <div class="col-md-9 logs-content">
+                <h1>Loki Cheat Sheet</h1>
+                <div class="title-heard__divider"></div>
+                <div class="introduce-view__content">
+                  <h2>See your logs</h2>
+                  <div class="introduce-view__content-label">
+                    <p>Start by selecting a log stream from the Log labels selector</p>
+                    <p>Alternatively, you can write a stream selector into query field:</p>
+                    <span>{job="default/prometheus"}</span>
+                    <p>Here are some example streams from your logs:</p>
+                    <span>{job="systemd-journal"}</span>
+                  </div>
+                </div>
+                <div class="introduce-view__content">
+                  <h2>Combine Stream selectors</h2>
+                  <div class="introduce-view__content-label">
+                    <span>{app="cassandra",namespace="prod"}</span>
+                    <p>Returns all log lines from streams that both labels.</p>
+                  </div>
+                </div>
+                <div class="introduce-view__content">
+                  <h2>Filtering for search terms</h2>
+                  <div class="introduce-view__content-label">
+                    <span>{app="cassandra"} |~ "(duration|latency)s*[d.]+"</span><br/>
+                    <span>{app="cassandra"!= "exact match"}</span><br/>
+                    <span>{app="cassandra"!= "do not match"}</span>
+                    <p><b style="color: #3C92F1">LogQL </b>supports exact and regular expression filters</p>
+                  </div>
+                </div>
+                <div class="introduce-view__content">
+                  <h2>Count over time</h2>
+                  <div class="introduce-view__content-label">
+                    <span style="color: #333333">count_over_time{job="mysql"}[5m]</span>
+                    <p>This query counts all the log lines within the last five minutes for the MySQL job.</p>
+                  </div>
+                </div>
+                <div class="introduce-view__content">
+                  <h2>Rate</h2>
+                  <div class="introduce-view__content-label">
+                    <span>rate(({job="mysql"} |= "error" != "timeout")[10s]) </span>
+                    <p>This query gets the per-second rate of all non-timeout errors within the last ten seconds for the MySQL job.</p>
+                  </div>
+                </div>
+                <div class="introduce-view__content">
+                <h2>Aggregate,count,and group </h2>
+                <div class="introduce-view__content-label">
+                  <span style="color: #333333">sum(count_over_time({job="mysql"}[5m])) by (level)</span>
+                  <p>Get the count of logs during the last five minutes, grouping by level.</p>
+                </div>
+              </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <transition name="right-box">
+      <chart-box v-if="rightBox.show" ref="addChartModal" :chart="chart" :from="$CONSTANTS.fromRoute.explore" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'explore'}" @close="handleBox(false)" @on-create-success="createSuccess"></chart-box>
+    </transition>
+  </div>
+</template>
+
+<script>
+import bus from '../../../../libs/bus'
+import promqlInput from './promqlInput'
+// import promqlInputPlus from "./promqlInputPlus";
+import chart from '../overview/chart'
+import axios from 'axios'
+import chartBox from '../../../page/dashboard/chartBox'
+import { getUUID } from '../../../common/js/common'
+import chartDataFormat from '../../../charts/chartDataFormat'
+import logTab from './logTab'
+
+export default {
+  name: 'exploreItem',
+  components: {
+    'promql-input': promqlInput,
+    'chart-box': chartBox,
+    chart,
+    logTab
+  },
+  props: {
+    tabIndex: Number,
+    closable: Boolean
+  },
+  data () {
+    return {
+      rightBox: { // 面板弹出框相关
+        show: false
+      },
+      value: true,
+      tabPosition: 'none',
+      searchMetrics: [
+        {
+          value: 'Metrics',
+          label: this.$t('project.metrics.metrics')
+        },
+        {
+          value: 'Logs',
+          label: this.$t('overall.logs')
+        }
+      ],
+      fromData: {
+        status: ''
+      },
+      showMetrics: true,
+      promqlCount: 1,
+      promqlKeys: [],
+      expressions: [''],
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
+      ],
+
+      /* 工具参数 */
+      tools: {
+        loading: false, // 是否显示table加载动画
+        showCustomTableTitle: false, // 自定义列弹框是否显示
+        customTableTitle: [] // 自定义列工具的数据
+      },
+      tableTitle: [],
+      showIntroduce: true,
+      defaultChartVisible: true,
+      defaultTableVisible: true,
+      chartVisible: true,
+      tableVisible: true,
+      pageObj: {
+        pageNo: 1,
+        pageSize: this.$CONSTANTS.defaultPageSize,
+        total: 0
+      },
+      tableData: [],
+      saveDisabled: true,
+      panelData: [],
+      chartUnit: 0,
+      historyParam: { useHistory: true, key: 'expore-history' },
+      chart: {},
+      metricOptions: [],
+      collapseValue: ['1', '2'],
+      logData: []
+      /*logData: [JSON.parse(`{
+          "result": [{
+            "labels": {
+              "asset": "44.53",
+              "endpoint": "192.168.44.53",
+              "filename": "/opt/cn/cn-web/logs/cn-web.log",
+              "job": "cn-log",
+              "project": "cn"
+            },
+            "level": "debug",
+            "message": "2021-07-23 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
+            "timestamp": 1627545412000000000,
+            "uuid": "1jqsjdjdf"
+          }, {
+            "labels": {
+              "asset": "44.53",
+              "endpoint": "192.168.44.53",
+              "filename": "/opt/cn/cn-web/logs/cn-web.log",
+              "job": "cn-log",
+              "project": "cn"
+            },
+            "level": "debug",
+            "message": "2021-07-23 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
+            "timestamp": 1627545412000000000,
+            "uuid": "1jqsjdjdf"
+          }, {
+            "labels": {
+              "asset": "44.53",
+              "endpoint": "192.168.44.53",
+              "filename": "/opt/cn/cn-web/logs/cn-web.log",
+              "job": "cn-log",
+              "project": "cn"
+            },
+            "level": "debug",
+            "message": "2021-07-22 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggersDEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
+            "timestamp": 1627543512000000000,
+            "uuid": "1jqsjdjdg"
+          }, {
+            "labels": {
+              "asset": "44.53",
+              "endpoint": "192.168.44.53",
+              "filename": "/opt/cn/cn-web/logs/cn-web.log",
+              "job": "cn-log",
+              "project": "cn"
+            },
+            "level": "debug",
+            "message": "2021-07-21 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
+            "timestamp": 1627542512000000000,
+            "uuid": "1jqsjdjdh"
+          }, {
+            "labels": {
+              "asset": "44.53",
+              "endpoint": "192.168.44.53",
+              "filename": "/opt/cn/cn-web/logs/cn-web.log",
+              "job": "cn-log",
+              "project": "cn"
+            },
+            "level": "debug",
+            "message": "2021-07-20 03:39:01.842 [quartzScheduler_QuartzSchedulerThread] DEBUG org.quartz.core.QuartzSchedulerThread - batch acquisition of 0 triggers",
+            "timestamp": 1627502512000000000,
+            "uuid": "1jqsjdjdi"
+          }
+          ],
+          "resultType": "streamsFormat",
+          "series": [
+            {
+              "name": "debug",
+              "data": [[1588889221, 123], [1588889222, 10]]
+            }, {
+              "name": "info",
+              "data": [[1588889221, 123], [1588889222, 10]]
+            }, {
+              "name": "warn",
+              "data": [[1588889221, 123], [1588889222, 10]]
+            }, {
+              "name": "error",
+              "data": [[1588889221, 123], [1588889222, 10]]
+            }, {
+              "name": "unknown",
+              "data": [[1588889221, 123], [1588889222, 10]]
+            }
+          ]
+        }`)]*/ // 日志数据
+    }
+  },
+  created () {
+    this.getPanelData()
+    this.queryMetrics()
+    this.promqlKeys.push(getUUID())
+    this.fromData.status = this.searchMetrics[0].label
+  },
+  methods: {
+    changeType (value) {
+      this.showMetrics = value === 'Metrics'
+      this.showIntroduce = true
+      this.resetExpression()
+    },
+    split () {
+      this.$emit('split', this.tabIndex)
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
+    },
+    filterShowData (source, pageObj) {
+      return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
+    },
+    chartUnitChange (unit) {
+      this.chartUnit = unit
+      this.$nextTick(() => {
+        this.expressionChange()
+      })
+    },
+    exportLog ({ limit, descending }) {
+      const params = {
+        logql: this.expressions.join(','),
+        start: this.$stringTimeParseToUnix(this.filterTime[0]),
+        end: this.$stringTimeParseToUnix(this.filterTime[1]),
+        direction: descending ? 'backward' : 'forward',
+        limit
+      }
+      axios.get('/logs/loki/export', { responseType: 'blob', params: params }).then(res => {
+        if (window.navigator.msSaveOrOpenBlob) {
+          // 兼容ie11
+          const blobObject = new Blob([res.data])
+          window.navigator.msSaveOrOpenBlob(blobObject, 'log')
+        } else {
+          const url = URL.createObjectURL(new Blob([res.data]))
+          const a = document.createElement('a')
+          document.body.appendChild(a) // 此处增加了将创建的添加到body当中
+          a.href = url
+          a.download = 'log'
+          a.target = '_blank'
+          a.click()
+          a.remove() // 将a标签移除
+        }
+      }, error => {
+        const $self = this
+        const reader = new FileReader()
+        reader.onload = function (event) {
+          const responseText = reader.result
+          const exception = JSON.parse(responseText)
+          if (exception.message) {
+            $self.$message.error(exception.message)
+          } else {
+            console.error(error)
+          }
+        }
+        reader.readAsText(error.response.data)
+      })
+    },
+    queryLogData () { // log的chart和table是一个请求
+      if (this.expressions.length > 0) {
+        const requestArr = []
+        this.expressions.forEach((item, index) => {
+          if (item != '') {
+            const step = bus.getStep(this.filterTime[0], this.filterTime[1])
+            requestArr.push(this.$get('/logs/loki/api/v1/query_range?format=1&query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
+          }
+        })
+        if (requestArr.length > 0) {
+          this.showIntroduce = false
+          this.saveDisabled = false
+        }
+        axios.all(requestArr).then(res => {
+          this.logData = res.map(r => r.data)
+          const hasLog = this.logData.some(d => d.resultType === 'streamsFormat')
+          const hasGraph = this.logData.some(d => d.resultType === 'matrix')
+          this.collapseValue = []
+          hasGraph && this.collapseValue.push('1')
+          hasLog && this.collapseValue.push('2')
+          this.$nextTick(() => {
+            hasGraph && this.loadLogGraph()
+          })
+        })
+      }
+    },
+    loadLogGraph () {
+      const graphData = this.logData.filter(l => l.resultType === 'matrix')
+      if (graphData && graphData.length > 0) {
+        this.$refs.logChart.startLoading()
+        const promqlInputIndexs = []
+        const queryExpression = []
+        const series = []
+        const legend = []
+        this.expressions.forEach((item, index) => {
+          if (item !== '') {
+            promqlInputIndexs.push(index)
+            queryExpression.push(item)
+          }
+          this.logData.forEach((response, index) => {
+            if (response.resultType === 'matrix') {
+              const promqlIndex = promqlInputIndexs[index]
+              const data = response.result
+              if (!data || data.length < 1) {
+                return
+              }
+              data.forEach((result, i) => {
+                const seriesItem = {
+                  name: '',
+                  symbol: 'emptyCircle', // 去掉点
+                  symbolSize: [2, 2],
+                  showSymbol: false,
+                  smooth: 0.2, // 曲线变平滑
+                  data: [],
+                  lineStyle: {
+                    width: 1,
+                    opacity: 0.9
+                  },
+                  type: 'line'
+                }
+                let legendName = ''
+                seriesItem.data = result.values.map((item) => {
+                  return [item[0] * 1000, item[1]]
+                })
+                if (result.metric && Object.keys(result.metric).length > 0) {
+                  const metric = Object.assign({}, result.metric)
+                  seriesItem.name += metric.__name__ ? metric.__name__ : ''
+                  seriesItem.name += '{'
+                  delete metric.__name__
+                  for (const key in metric) {
+                    seriesItem.name += key + '=' + '"' + metric[key] + '",'
+                  }
+                  legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
+                  legendName += '}'
+                } else {
+                  legendName = queryExpression[index]
+                }
+                seriesItem.name = legendName + '-' + index
+                series.push(seriesItem)
+                legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
+              })
+
+              this.$refs['promql-' + promqlIndex][0].setError('')
+            }
+          })
+        })
+        this.$refs.logChart.setLegend(legend)
+        this.$refs.logChart.setRandomColors(series.length)
+        this.$refs.logChart.setSeries(series)
+        this.defaultChartVisible = true
+        this.$nextTick(() => {
+          this.$refs.logChart.endLoading()
+        })
+      }
+    },
+    queryChartData () {
+      this.$refs.exploreChart.startLoading()
+      setTimeout(() => {
+        if (this.expressions.length > 0) {
+          const requestArr = []
+          const promqlInputIndexs = []
+          const queryExpression = []
+          this.expressions.forEach((item, index) => {
+            if (item != '') {
+              const step = bus.getStep(this.filterTime[0], this.filterTime[1])
+              promqlInputIndexs.push(index)
+              queryExpression.push(item)
+              requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step=' + step))
+            }
+          })
+          if (requestArr.length > 0) {
+            this.showIntroduce = false
+            this.saveDisabled = false
+          }
+          axios.all(requestArr).then(res => {
+            const series = []
+            const legend = []
+            if (res.length > 0) {
+              res.forEach((response, index) => {
+                const promqlIndex = promqlInputIndexs[index]
+                if (response.data && response.status == 'success') {
+                  const data = response.data.result
+                  if ((!data || data.length < 1) && response.message) {
+                    this.$refs['promql-' + promqlIndex][0].setError(response.message)
+                    return
+                  }
+                  data.forEach((result, i) => {
+                    const seriesItem = {
+                      name: '',
+                      symbol: 'emptyCircle', // 去掉点
+                      symbolSize: [2, 2],
+                      showSymbol: false,
+                      smooth: 0.2, // 曲线变平滑
+                      data: [],
+                      lineStyle: {
+                        width: 1,
+                        opacity: 0.9
+                      },
+                      type: 'line'
+                    }
+                    let legendName = ''
+                    seriesItem.data = result.values.map((item) => {
+                      return [item[0] * 1000, item[1]]
+                    })
+                    if (result.metric && Object.keys(result.metric).length > 0) {
+                      const metric = Object.assign({}, result.metric)
+                      seriesItem.name += metric.__name__ ? metric.__name__ : ''
+                      seriesItem.name += '{'
+                      delete metric.__name__
+                      for (const key in metric) {
+                        seriesItem.name += key + '=' + '"' + metric[key] + '",'
+                      }
+                      legendName = seriesItem.name.substr(0, seriesItem.name.length - 1)
+                      legendName += '}'
+                    } else {
+                      legendName = queryExpression[index]
+                    }
+                    seriesItem.name = legendName + '-' + index
+                    series.push(seriesItem)
+                    legend.push({ name: seriesItem.name, alias: legendName, isGray: false })
+                  })
+
+                  this.$refs['promql-' + promqlIndex][0].setError('')
+                } else {
+                  // console.log(response)
+                  this.$refs['promql-' + promqlIndex][0].setError(response.error)
+                }
+              })
+
+              this.$refs.exploreChart.setLegend(legend)
+              this.$refs.exploreChart.setRandomColors(series.length)
+              this.$refs.exploreChart.setSeries(series)
+              this.defaultChartVisible = true
+            }
+            this.collapseValue = ['1', '2']
+            this.$refs.exploreChart.endLoading()
+          })
+        }
+      }, 200)
+    },
+    queryTableData () {
+      this.tools.loading = true
+      setTimeout(() => {
+        if (this.expressions.length > 0) {
+          const requestArr = []
+          this.expressions.forEach((item, index) => {
+            if (item !== '') {
+              requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
+            }
+          })
+          if (requestArr.length > 0) {
+            this.showIntroduce = false
+          }
+          axios.all(requestArr).then(res => {
+            const tData = []
+            const tLabels = []
+            if (res.length > 0) {
+              this.tableData = []
+              this.tableTitle = []
+              res.forEach((response, index) => {
+                if (response.data && response.status === 'success') {
+                  const data = response.data.result
+                  if (data) {
+                    data.forEach((result, i) => {
+                      const metrics = Object.assign({}, result.metric)
+                      if (!Array.isArray(result.value)) {
+                        const val = result
+                        result = {
+                          value: ['', val]
+                        }
+                      }
+                      this.$set(metrics, 'value#' + index, chartDataFormat.getUnit(this.chartUnit).compute(result.value[1], null, 2))
+                      for (const key in metrics) {
+                        const label = {
+                          label: key === '__name__' ? 'metric' : key,
+                          prop: key,
+                          show: true
+                        }
+                        const temp = tLabels.find((item, index) => {
+                          return item.prop == label.prop
+                        })
+                        if (!temp) {
+                          tLabels.push(label)
+                        }
+                      }
+                      tData.push(metrics)
+                    })
+                  }
+                }
+                tLabels.sort((a, b) => {
+                  return a.prop.charCodeAt(0) - b.prop.charCodeAt(0)
+                })
+              })
+              if (tData.length > 0) {
+                this.storedTableData = Object.assign([], tData)
+                this.pageObj.total = this.storedTableData.length
+                this.tableData = this.filterShowData(this.storedTableData, this.pageObj)
+                this.tableTitle = Object.assign([], tLabels)
+                this.tools.customTableTitle = Object.assign([], tLabels)
+                this.defaultTableVisible = true
+              } else {
+                // this.defaultTableVisible = false;
+              }
+            }
+            this.tools.loading = false
+          })
+        }
+      }, 200)
+    },
+    expressionChange () {
+      const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      // console.log(this.filterTime,nowTimeType);
+      this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      if (this.showMetrics) {
+        if (this.expressions && this.expressions.length >= 1) {
+          this.queryTableData()
+          this.queryChartData()
+          this.storeHistory()
+        }
+      } else {
+        if (this.expressions && this.expressions.length >= 1) {
+          this.queryLogData()
+        }
+      }
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'yyyy-MM-dd hh:mm:ss')
+        this.$set(this.filterTime, 0, startTime)
+        this.$set(this.filterTime, 1, endTime)
+        this.$set(this.filterTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.filterTime
+    },
+    storeHistory () {
+      const expire = 24
+      const historyJson = localStorage.getItem(this.historyParam.key)
+      const expressions = this.expressions.filter(item => {
+        return item && item != ''
+      })
+      const username = sessionStorage.getItem('nz-username')
+      if (historyJson && historyJson != 'undefined' && historyJson != '') {
+        const historyObj = JSON.parse(historyJson)
+        let history = historyObj[username]
+        if (history) {
+          // 过滤过期表达式
+          history = history.filter(item => {
+            return item.time + item.expire >= new Date().getTime()
+          })
+          let repeat = history.filter(item => {
+            return expressions.includes(item.insertText)
+          })
+          const old = history.filter(item => {
+            return !expressions.includes(item.insertText)
+          })
+
+          const freshExpression = expressions.filter(item => {
+            const find = history.find(t => { return t.insertText == item })
+            return !find
+          })
+
+          repeat = repeat.map(item => {
+            item.time = new Date().getTime()
+            item.num += 1
+            item.documentation = this.$t('dashboard.metricPreview.historyTip', { time: item.num, hour: 24 })
+            return item
+          })
+
+          const fresh = freshExpression.map(item => {
+            return {
+              label: item,
+              insertText: item,
+              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+              num: 1,
+              time: new Date().getTime(),
+              expire: expire * 60 * 60 * 1000
+            }
+          })
+
+          historyObj[username] = fresh.concat(repeat).concat(old)
+        } else {
+          const history = expressions.map(item => {
+            return {
+              label: item,
+              insertText: item,
+              documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+              num: 1,
+              time: new Date().getTime(),
+              expire: expire * 60 * 60 * 1000
+            }
+          })
+          historyObj[username] = history
+        }
+        localStorage.setItem(this.historyParam.key, JSON.stringify(historyObj))
+      } else {
+        const history = expressions.map(item => {
+          return {
+            label: item,
+            insertText: item,
+            documentation: this.$t('dashboard.metricPreview.historyTip', { time: 1, hour: 24 }),
+            num: 1,
+            time: new Date().getTime(),
+            expire: expire * 60 * 60 * 1000
+          }
+        })
+        if (history && history.length > 0) {
+          const stored = {}
+          stored[username] = history
+          localStorage.setItem(this.historyParam.key, JSON.stringify(stored))
+        }
+      }
+    },
+    addExpression (index) {
+      this.expressions.splice(index + 1, 0, '')
+      this.promqlKeys.splice(index + 1, 0, getUUID())
+      this.promqlCount++
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      this.promqlKeys.push(getUUID())
+      this.promqlCount++
+    },
+    removeExpression (index) {
+      if (this.promqlCount > 1) {
+        this.expressions.splice(index, 1)
+        this.promqlKeys.splice(index, 1)
+        this.promqlCount--
+      }
+    },
+    resetExpression () {
+      this.expressions = ['']
+      this.promqlKeys = [getUUID()]
+      this.promqlCount = 1
+    },
+    changeChartVisible () {
+      this.chartVisible = !this.chartVisible
+    },
+    changeTableVisible () {
+      this.tableVisible = !this.tableVisible
+    },
+    handleBox (show) {
+      this.rightBox.show = show
+    },
+    saveChart () {
+      const chart = {
+        name: '',
+        type: 'line',
+        span: 12,
+        height: '400',
+        unit: this.chartUnit,
+        param: {
+          url: '',
+          threshold: ''
+        },
+        elements: [],
+        panel: '',
+        sync: 0,
+        groupId: '',
+        remark: ''
+      }
+      this.expressions.forEach((exp) => {
+        chart.elements.push({ expression: exp, legend: '', type: 'expert', id: '' })
+      })
+      this.chart = chart
+      this.rightBox.show = true
+    },
+    createSuccess (type, response, param, panel) { // 添加chart成功
+      this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'success'
+      }).then(() => {
+        bus.$emit('menu-change', 'panel')
+        this.$store.commit('panelShowPanelChange', panel)
+        this.$router.push({
+          path: '/panel',
+          query: {
+            t: +new Date()
+          }
+        })
+      })
+    },
+    getPanelData () { // 获取panel数据
+      this.$get('visual/panel?pageNo=1&pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+        }
+      })
+    },
+    jumpTo (data, id) {
+      bus.$emit('menu-change', data)
+      this.$router.push({
+        path: '/' + data,
+        query: {
+          t: +new Date()
+        }
+      })
+    },
+    queryMetrics () {
+      this.metricOptions = []
+      this.$get('prom/api/v1/label/__name__/values').then(response => {
+        if (response.status == 'success') {
+          const metrics = response.data.sort()
+          const metricMap = new Map()
+          metrics.forEach((item) => {
+            let key = ''
+            if (/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)) {
+              key = item.split('_')[0]
+            } else if (/^_\w*/.test(item)) {
+              key = '      '
+            } else {
+              key = item
+            }
+            if (metricMap.get(key)) {
+              const values = metricMap.get(key)
+              values.push({ label: item, value: item })
+            } else {
+              const values = [{ label: item, value: item }]
+              metricMap.set(key, values)
+            }
+            // this.metricStore.push({label:item,value:item,insertText:item})
+          })
+          for (const key of metricMap.keys()) {
+            const option = {
+              label: key,
+              value: key
+            }
+            if (metricMap.get(key) && metricMap.get(key).length > 1) {
+              option.children = metricMap.get(key)
+            }
+            this.metricOptions.push(option)
+          }
+        }
+      })
+    },
+    getMetricOptions () {
+      return this.metricOptions
+    }
+  },
+  watch: {
+    promqlCount (n, o) {
+      this.expressionChange()
+    },
+    showMetrics (n, o) { // 更换type后，将折叠面板都置为展开状态
+      if (n !== o) {
+        this.collapseValue = ['1', '2']
+      }
+    },
+    expressions: {
+      immediate: true,
+      handler (n, o) {
+        if (n.length == 1 && (!n[0] || n[0] == '')) {
+          this.showIntroduce = true
+        } else if (n.length > 1) {
+          const temp = n.find((item, index) => {
+            return item != ''
+          })
+          if (!temp) {
+            this.showIntroduce = true
+          } else {
+            this.showIntroduce = false
+          }
+        } else {
+          this.showIntroduce = false
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.explore-collapse.el-collapse {
+  border: none;
+  .el-collapse-item {
+    margin-bottom: 10px;
+    border: 1px solid $--right-box-border-color;
+    border-bottom: none;
+  }
+  .el-collapse-item__header {
+    height: 38px;
+    line-height: 38px;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+
+    i {
+      margin: 0 8px;
+    }
+  }
+  .el-collapse-item__content {
+    padding: 0 30px 20px;
+  }
+}
+
+</style>
+<style lang="scss" scoped>
+  .explore {
+    height: 100%;
+    .explore-close {
+      display: flex;
+      justify-content: flex-end;
+      padding: 18px 20px 4px 0px;
+
+      span {
+        cursor: pointer;
+      }
+      i {
+        font-size: 14px;
+        color: #333;
+      }
+    }
+  }
+
+  .explore .chart-room {
+    width: 100%;
+    height: 300px
+  }
+
+  .explore .chart-view, .table-view {
+    padding: 22px 10px 10px 10px;
+    border: 1px solid lightgrey;
+    box-sizing: inherit;
+    margin-bottom: 5px;
+    transition: height 1s;
+  }
+  .explore .chart-view:hover,.explore .table-view:hover {
+    cursor: default;
+  }
+  .shrink-view {
+    height: 30px;
+
+    .view-title i {
+      transform: rotate(180deg);
+    }
+
+    .chart-room, .table-room {
+      height: 0px;
+      visibility: hidden;
+    }
+
+  }
+  .table-room {
+    position: relative;
+    margin-top: 10px;
+  }
+  .explore .view-title {
+    font-weight: 500;
+    margin-right: 8px;
+    font-size: 14px;
+    box-shadow: none;
+  }
+
+  .introduce-view .info-room {
+    padding: 24px;
+    background-color: #e9edf2;
+    border-top: 3px solid #3274d9;
+    -webkit-box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
+    box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+  }
+  .introduce-view {
+    .title-heard.info-room {
+      color: #333333;
+      h1 {
+        font-family: Roboto-Medium;
+        font-size: 22px;
+        color: #333333;
+        font-weight: 500;
+      }
+      .title-heard__divider {
+        width: 100%;
+        height: 1px;
+        border-bottom: 2px solid #DEDEDE;
+        margin: 5px 0 28px 0;
+      }
+      .introduce-view__content {
+        line-height: 28px;
+        margin-top: 18px;
+        h2 {
+          font-family: Roboto-Black;
+          font-size: 22px;
+          margin-bottom: 5px;
+          color: #333333;
+          font-weight: 400;
+        }
+        .introduce-view__content-label {
+          p {
+            font-family: Roboto-Black;
+            font-size: 16px;
+            color: #333333;
+            font-weight: 400;
+          }
+          span {
+            font-family: Roboto-Black;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+          }
+        }
+      }
+    }
+  }
+
+  .info-room .cheat-sheet-item__title {
+    font-size: 21px;
+  }
+
+  .info-room .cheat-sheet-item__label {
+    font-size: 13px;
+  }
+
+  .info-room code {
+    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+    font-size: 11px;
+    background-color: #e9edf2;
+    color: #52545c;
+    border: 1px solid #c7d0d9;
+    border-radius: 4px;
+  }
+  /*外部引用 样式start*/
+  .doc-content {
+    font-size: 16px;
+  }
+
+  .doc-content p, .doc-content.ul, .doc-content .alert {
+    margin: 15px 0 15px 0;
+    line-height: 1.5;
+  }
+
+  .doc-content .content-divider{
+    height: 1px;
+    width:100%;
+    border-bottom: 2px solid #C0C4CC;
+    margin: 5px 0px;
+  }
+
+  .doc-content > h1 {
+    color: #e6522c;
+    font-size: 30px;
+    text-transform: uppercase;
+  }
+
+  .doc-content > h1 a {
+    color: #000 !important;
+  }
+
+  .doc-content.blog > h1 {
+    text-transform: none;
+  }
+
+  .doc-content.blog .sponsor-logos > a > img {
+    width: 250px;
+    display: inline-block !important;
+    margin: 15px 55px;
+  }
+  .doc-content > h1 {
+    color: #e6522c;
+    font-size: 22px;
+  }
+
+  .doc-content > h2 {
+    color: #e6522c;
+    font-size: 18px;
+  }
+
+  .doc-content > h2 code {
+    color: #e6522c;
+    background: none;
+  }
+
+  .doc-content > h3 {
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .doc-content > h4 {
+    font-weight: bold;
+    font-size: 18px;
+    margin-top: 20px;
+  }
+
+  .doc-content a.header-anchor {
+    padding-left: 15px;
+    color: gray;
+    text-decoration: none;
+  }
+
+  .doc-content a.header-anchor:link,
+  .doc-content a.header-anchor:visited {
+    /*visibility: hidden;*/
+  }
+
+  .doc-content h1:hover a.header-anchor:hover,
+  .doc-content h2:hover a.header-anchor:hover,
+  .doc-content h3:hover a.header-anchor:hover,
+  .doc-content h4:hover a.header-anchor:hover,
+  .doc-content h5:hover a.header-anchor:hover,
+  .doc-content h6:hover a.header-anchor:hover {
+    /*color: #000;*/
+  }
+
+  .doc-content h1:hover a.header-anchor,
+  .doc-content h2:hover a.header-anchor,
+  .doc-content h3:hover a.header-anchor,
+  .doc-content h4:hover a.header-anchor,
+  .doc-content h5:hover a.header-anchor,
+  .doc-content h6:hover a.header-anchor {
+    /*color: #999;*/
+    /*visibility: visible;*/
+  }
+
+  .doc-content img {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+
+  .doc-content img.orig-size {
+    width: auto;
+    margin-left: 0;
+  }
+
+  .doc-content .open-source-notice {
+    color: #666;
+    background-color: #f5f5f5;
+    text-align: center;
+    padding: 0.8em;
+    margin-top: 1.5em;
+  }
+
+  .toc {
+    padding: 1em;
+    background-color: #f5f5f5;
+  }
+
+  .toc-right {
+    float: right;
+    width: 40%;
+    margin: 0 0 0.5em 0.5em;
+  }
+
+  .toc ul {
+    padding: 0 0 0 1.5em;
+    margin: 0;
+  }
+
+  .toc a code {
+    color: #337ab7;
+    background-color: transparent;
+  }
+
+  pre {
+    border: 1px solid #ddd;
+    border-left: 4px solid #e6522c;
+    border-radius: 0;
+    font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
+    background-color: #f5f5f5;
+    color: #333;
+    padding: 15px;
+  }
+
+  pre code {
+    white-space: pre;
+  }
+
+  code {
+    color: #333;
+  }
+
+  aside {
+    color: #888;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #aaa;
+  }
+
+  article {
+    margin: 10px 0 60px 0;
+  }
+  .explore {
+    .chart-view__switch {
+      margin-top: 20px;
+      border: 1px solid #E4E8EB;
+      border-radius: 2px;
+      height: 50px;
+      line-height: 50px;
+      .el-switch.is-checked {
+        margin-left: 35px;
+      }
+    }
+  }
+  /*外部引用 样式end*/
+</style>
+<style lang="scss">
+  .explore-table tr td .cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .explore .promqlInput {
+    .query-row > div:first-of-type {
+      margin-right: 10px;
+    }
+  }
+  .explore .promqlInput:not(:first-of-type) {
+    margin-top: 10px;
+  }
+  .explore {
+    border-right: 1px solid #f6f6f6;
+    .main-container {
+      padding: 0 !important;
+      overflow: auto;
+    }
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
new file mode 100644
index 000000000..b9a080cc9
--- /dev/null
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="log-detail">
+    <div id="logChart" class="log-chart">
+<!--      <chart ref="logChart" :unit="unit" chart-type="logBar" :show-toolbox="false"></chart>-->
+    </div>
+    <div class="log-operations">
+      <div class="log-operation">
+        <span class="operation-label">{{$t('overall.time')}}</span>
+        <el-switch
+          v-model="time"
+          :active-color="theme.themeColor"
+        >
+        </el-switch>
+      </div>
+      <div class="log-operation">
+        <span class="operation-label">{{$t('dashboard.explore.descending')}}</span>
+        <el-switch
+          v-model="operations.descending"
+          :active-color="theme.themeColor"
+        >
+        </el-switch>
+      </div>
+      <div class="log-operation">
+        <span class="operation-label">{{$t('dashboard.explore.wrapLines')}}</span>
+        <el-switch
+          v-model="wrapLines"
+          :active-color="theme.themeColor"
+        >
+        </el-switch>
+      </div>
+      <div class="log-operation">
+        <span class="operation-label">{{$t('overall.limit')}}:</span>
+        <el-select v-model="operations.limit" size="small" style="width: 100px;">
+          <el-option v-for="option in limitOptions" :key="option" :value="option"></el-option>
+        </el-select>
+      </div>
+      <div class="log-operation">
+        <span class="operation-label">Result:</span>
+        <span>{{tableData.length}}</span>
+      </div>
+      <div class="log-operation log-operation--right">
+        <button class="top-tool-btn" type="button" @click="exportLog"><i class="nz-icon nz-icon-download"></i></button>
+      </div>
+    </div>
+    <div class="log-table">
+      <el-table
+        :cell-class-name="wrapLines ? '': 'log-row-wrap--no-wrap'"
+        :data="tableData"
+        :show-header="false"
+        class="nz-table2"
+        size="mini"
+      >
+        <el-table-column
+          type="expand"
+        >
+          <template slot-scope="{ row }">
+            <pre>{{row.labels}}</pre>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="time"
+          prop="timestamp"
+          width="140"
+        >
+          <template slot-scope="{ row }">{{row.timestamp}}</template>
+        </el-table-column>
+        <el-table-column
+          prop="message"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import axios from 'axios'
+export default {
+  name: 'logTab',
+  props: {
+    unit: Number,
+    logData: Array
+  },
+  computed: {
+    tableTimeFormat () {
+      return this.timeFormat
+    }
+  },
+  data () {
+    return {
+      operations: {
+        levels: [0, 1, 2, 3, 4, 5, 6],
+        limit: 1000,
+        descending: true
+      },
+      time: true, // 换行和时间不需要处理数据
+      wrapLines: true,
+
+      limitOptions: [300, 1000, 3000, 10000],
+      levelOptions: [
+        {
+          type: 'trace',
+          keywords: ['trace'],
+          color: '#6ed0e0'
+        },
+        {
+          type: 'debug',
+          keywords: ['debug', 'dbug'],
+          color: '#1f78c1'
+        },
+        {
+          type: 'info',
+          keywords: ['info', 'information', 'informational', 'notice'],
+          color: '#7eb26d'
+        },
+        {
+          type: 'warn',
+          keywords: ['warn', 'warning'],
+          color: '#ff851b'
+        },
+        {
+          type: 'error',
+          keywords: ['error', 'err'],
+          color: '#e24d42'
+        },
+        {
+          type: 'fatal',
+          keywords: ['emerg', 'critical', 'fatal', 'crit'],
+          color: '#705da0'
+        },
+        {
+          type: 'unknown',
+          keywords: [],
+          color: '#dde4ed'
+        }
+      ],
+      tableData: [],
+      timeFormatData: [],
+      tableChartData: [],
+      myChart: null
+    }
+  },
+  methods: {
+    exportLog () {
+      this.$emit('exportLog', this.operations)
+    },
+    timeFormat (timestamp) {
+      const timeLength = `${timestamp}`.length
+      // 判断时间是秒/毫秒/微秒/纳秒
+      let step = null
+      switch (timeLength) {
+        case 10:
+          step = 1000
+          break
+        case 13:
+          step = 1
+          break
+        case 16:
+          step = 0.001
+          break
+        case 19:
+          step = 0.000001
+          break
+        default: break
+      }
+      return this.utcTimeToTimezoneStr(timestamp * step)
+    },
+    loadChart () {
+      this.myChart = echarts.init(document.getElementById('logChart'))
+      if (this.tableChartData.length > 0) {
+        let series = this.tableChartData.map(d => ({
+          type: 'bar',
+          name: d.name,
+          stack: 'total',
+          barWidth: 6,
+          data: d.data.map(item => [item[0], item[1]]),
+          itemStyle: { color: this.levelOptions.find(l => l.type === d.name).color }
+        }))
+        series = series.sort((a, b) => {
+          return this.levelOptions.findIndex(l => a.name === l.type) - this.levelOptions.findIndex(l => b.name === l.type)
+        })
+        const option = {
+          title: {
+            show: false
+          },
+          grid: {
+            top: 20,
+            left: 10,
+            right: 10,
+            bottom: 60,
+            containLabel: true
+          },
+          legend: {
+            bottom: 20
+          },
+          series,
+          xAxis: {
+            type: 'time',
+            axisTick: { show: false },
+            axisLabel: {
+              rotate: 0,
+              fontSize: 13 * window.devicePixelRatio,
+              formatter: '{HH}:{mm}:{ss}'
+            }
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              fontSize: 13 * window.devicePixelRatio,
+              formatter (value, i) {
+                let y
+                if (value < 1000) {
+                  y = value
+                } else if (value < 1000000) {
+                  y = value / 1000 + ' K'
+                } else if (value >= 1000000) {
+                  y = value / 1000000 + ' M'
+                } else {
+                  y = value / 1000000000 + ' G'
+                }
+                return y
+              }
+            }
+          },
+          useUTC: false // 使用本地时间
+        }
+        this.myChart.setOption(option)
+      }
+    },
+    applyFilter (allTableData, filter) {
+      let data = [...allTableData]
+      // 过滤level
+      data = data.filter(d => {
+        const hit = filter.levels.some(l => {
+          return this.levelOptions[l].type === d.level.toLowerCase()
+        })
+        return hit
+      })
+      // limit
+      data = data.slice(0, filter.limit)
+      // 升降序
+      data = data.sort((a, b) => {
+        return filter.descending ? b.timestamp - a.timestamp : a.timestamp - b.timestamp
+      })
+      // logs内部上方的图表数据
+      const tableChartData = {}
+      data.forEach(d => {
+        tableChartData[d.level] || (tableChartData[d.level] = {})
+        tableChartData[d.level][`${d.timestamp}`] ? tableChartData[d.level][`${d.timestamp}`]++ : tableChartData[d.level][`${d.timestamp}`] = 1
+      })
+      const temp = []
+      for (const d in tableChartData) {
+        const level = { name: d, data: [] }
+        for (const time in tableChartData[d]) {
+          level.data.push([time, tableChartData[d][time]])
+        }
+        temp.push(level)
+      }
+      return { tableData: data, tableChartData: temp }
+    },
+    filterLogType (data) {
+      const logData = data.filter(l => l.resultType === 'streamsFormat')
+      let allTableData = []
+      // 合并
+      logData.forEach(d => {
+        allTableData = [...allTableData, ...d.result]
+      })
+      // 去重
+      const temp = []
+      allTableData = allTableData.reduce((cur, next) => {
+        if (temp.indexOf(next.uuid) === -1) {
+          temp.push(next.uuid)
+          cur.push(next)
+        }
+        return cur
+      }, [])
+      // 把时间调整为毫秒，并合并同毫秒的数据
+      allTableData = allTableData.map(d => ({
+        ...d,
+        timestamp: this.timeFormat(d.timestamp)
+      }))
+      return { logData: allTableData }
+    }
+  },
+  watch: {
+    logData: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        const { logData } = this.filterLogType(n) // 过滤出不同resultType，合并去重
+        const { tableData, tableChartData } = this.applyFilter(logData, this.operations) // 应用operation区域的过滤项
+        this.tableData = tableData
+        this.tableChartData = tableChartData
+        this.loadChart()
+      }
+    },
+    operations: {
+      deep: true,
+      handler (n, o) {
+        const { logData } = this.filterLogType(this.logData)
+        const { tableData, tableChartData } = this.applyFilter(logData, this.operations) // 应用operation区域的过滤项
+        this.tableData = tableData
+        this.tableChartData = tableChartData
+        this.loadChart()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.log-detail {
+  * {
+    box-sizing: border-box;
+  }
+  .log-table .nz-table2 {
+    padding: 10px 0 0 0;
+
+    .el-table__body {
+      border-collapse: separate;
+      border-spacing: 0 6px;
+
+      td {
+        vertical-align: top;
+        padding: 1px 0;
+        border: none;
+      }
+      td.el-table__expanded-cell {
+        padding: 0 0 0 60px;
+        background-color: #fafafa;
+      }
+      // 左侧边框
+      td:first-child {
+        border-left: 3px solid $--right-box-border-color;
+      }
+      td.el-table__expanded-cell:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  .log-chart {
+    height: 300px;
+    width: 100%;
+  }
+  .log-operations {
+    display: flex;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    padding: 0 10px 0 20px;
+    border: 1px solid #E4E8EB;
+    border-radius: 2px;
+
+    .log-operation {
+      display: flex;
+      align-items: center;
+
+      &.log-operation--right {
+        margin-left: auto;
+      }
+      &:not(:last-of-type) {
+        margin-right: 30px;
+      }
+
+      .operation-label {
+        padding-right: 10px;
+        color: #666666;
+      }
+    }
+  }
+}
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index 34442b120..b97d94fe6 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -6,11 +6,11 @@
         <div v-if="plugins.indexOf('metric-selector') > -1">
           <el-dropdown class="metric-selector">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">{{ $t("overall.metric") }}
+            <button class="top-tool-btn top-tool-btn--text" type="button" @click="toggleDropdown">{{type === 'log' ? $t("overall.logLabels") : $t("overall.metric") }}
               &nbsp;<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px"></i></button>
             <el-cascader-panel v-show="dropDownVisible" ref="metricSelector" slot="dropdown" v-model="cascaderValue"
                                v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading" :loading="loading" :options="metricOptions"
-                               :props="{emitPath:false,}" @change="metricChangeNew">
+                               v-if="type !== 'log'" :props="cascaderProps" @change="metricChangeNew">
 
               <template slot-scope="{ node, data }">
                 <div :class="['nz-cascade',data.temp&&!data.child?'nz-cascade-temp':'']" @click="()=>{lazyLoad(node,data)}" :title="data.label">
@@ -18,7 +18,15 @@
                   {{data.label}}
                 </div>
               </template>
-
+            </el-cascader-panel>
+            <el-cascader-panel v-else v-show="dropDownVisible" ref="metricSelector" slot="dropdown"
+                               v-model="cascaderValue" v-clickoutside="closeDropdown" v-loading="tempBoxShowLoading"
+                               :loading="loading" :props="cascaderProps" @change="logLabelChange">
+              <template slot-scope="{ node, data }">
+                <div :title="data.label" class="nz-cascade">
+                  {{data.label}}
+                </div>
+              </template>
             </el-cascader-panel>
           </el-dropdown>
         </div>
@@ -146,6 +154,7 @@
 <script>
 import selectAlertSilence from '../../../common/alert/selectAlertSilence'
 import editor from './editor'
+import { get } from '@/http'
 export default {
   name: 'promqlInput',
   components: {
@@ -176,6 +185,9 @@ export default {
     fromFatherData: {
       type: Boolean,
       default: false
+    },
+    type: {
+      type: String // metric和log两种，为空时视为metric
     }
     // metricOptions: {type: Array},
     // metricStore: {type: Array}
@@ -206,6 +218,47 @@ export default {
       loading: false
     }
   },
+  computed: {
+    cascaderProps () {
+      if (this.type === 'log') {
+        return {
+          lazy: true,
+          lazyLoad (node, resolve) {
+            const { level } = node
+            if (level === 0) {
+              get('/logs/loki/api/v1/labels').then(res => {
+                if (res.data) {
+                  const nodes = res.data.sort().map(d => ({
+                    value: d,
+                    label: d,
+                    leaf: false
+                  }))
+                  resolve(nodes)
+                } else {
+                  resolve([])
+                }
+              })
+            } else if (level === 1) {
+              get(`/logs/loki/api/v1/label/${node.value}/values`).then(res => {
+                if (res.data) {
+                  const nodes = res.data.sort().map(d => ({
+                    value: d,
+                    label: d,
+                    leaf: true
+                  }))
+                  resolve(nodes)
+                } else {
+                  resolve([])
+                }
+              })
+            }
+          }
+        }
+      } else {
+        return { emitPath: false }
+      }
+    }
+  },
   mounted () {
     if (!this.fromFatherData) {
       this.queryMetrics()
@@ -304,6 +357,14 @@ export default {
       this.$forceUpdate()
       this.cascaderValue = ''
     },
+    logLabelChange (value) {
+      if (!value || value.length === 0) return
+      this.expressionList[this.index] = `{${value[0]}="${value[1]}"}`
+      this.dropDownVisible = false
+      this.$emit('change', value)
+      this.$forceUpdate()
+      this.cascaderValue = ''
+    },
     metricKeyDown (val) {
       if (this.required) {
         this.metricChange(val)
@@ -313,7 +374,6 @@ export default {
       this.$emit('change')
     },
     setError: function (errMsg) {
-      // console.log(errMsg)
       this.errorMsg = errMsg
     },
     getExprTemp () {
@@ -528,7 +588,7 @@ export default {
       } */
   },
   watch: {
-    dropDownVisible: function (n, o) {
+    dropDownVisible (n, o) {
       if (this.$refs.metricSelector) {
         this.$refs.metricSelector.dropDownVisible = n
         if (!this.expressionList[this.index] || this.expressionList[this.index] == '') {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 4fdb07cf5..065ec86b4 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -413,6 +413,7 @@ export default {
     defaultTooltipFormatter: function (params) {
       let minusFlag = true
       let str = '<div>'
+      params instanceof Array || (params = [params])
       params.forEach((item, i) => {
         const alias = this.queryAlias(i)
         if (i === 0 && alias.indexOf('Previous ') === -1) {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index 54827c037..9a0806a3d 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -54,7 +54,7 @@ const commonOption = {
     tooltip: { // 和 option.tooltip 的配置项相同
       show: true,
       position: 'top',
-      formatter: function (param) {
+      formatter (param) {
         return param.title // 自定义的 DOM 结构
       },
       backgroundColor: 'rgba(255,255,255,0)',
@@ -103,7 +103,7 @@ const commonOption = {
     axisLabel: {
       interval: 0,
       rotate: 0,
-      formatter: function (value, index) {
+      formatter (value, index) {
         const tData = new Date(value)
         return [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + '\n' +
               [tData.getHours(), tData.getMinutes()].join(':')
@@ -251,7 +251,7 @@ const alertMessageBarByRule = {
     axisLabel: {
       show: true,
       fontSize: 12,
-      formatter: function (value) {
+      formatter (value) {
         if (value.length > 15) {
           return '...' + value.substring(value.length - 12, value.length)
         }
@@ -305,7 +305,7 @@ const alertMessageBarByAsset = {
     axisLabel: {
       show: true,
       fontSize: 12,
-      formatter: function (value) {
+      formatter (value) {
         let r = value
         if (r.length > 4) {
           r = value.substring(0, 3) + '...'
@@ -316,7 +316,62 @@ const alertMessageBarByAsset = {
     triggerEvent: true
   }
 }
-
+const logBar = {
+  title: {
+    show: false
+  },
+  xAxis: {
+    type: 'time',
+    axisLabel: {
+      rotate: 0,
+      fontSize: 13 * window.devicePixelRatio
+    },
+    axisPointer: { // y轴上显示指针对应的值
+      show: true
+    },
+    splitLine: {
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  tooltip: {
+    show: true
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      show: true
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      fontSize: 13 * window.devicePixelRatio,
+      formatter (value, i) {
+        let y
+        if (value < 1000) {
+        } else if (value < 1000000) {
+          y = value / 1000 + ' K'
+        } else if (value >= 1000000) {
+          y = value / 1000000 + ' M'
+        } else {
+          y = value / 1000000000 + ' G'
+        }
+        return y
+      }
+    }
+  },
+  useUTC: false, // 使用本地时间
+  series: []
+}
 const overviewLine = {
   title: {
     show: false
@@ -332,7 +387,7 @@ const overviewLine = {
     trigger: 'axis',
     confine: false,
     extraCssText: 'z-index:1000;',
-    formatter: function (v, i) {
+    formatter (v, i) {
       return v
     }
   },
@@ -375,7 +430,7 @@ const overviewLine = {
     },
     axisLabel: {
       fontSize: 13 * window.devicePixelRatio,
-      formatter: function (value, i) {
+      formatter (value, i) {
         let y
         if (value < 1000) {
           y = value + ' Bs'
@@ -524,22 +579,23 @@ const chartTypes = {
   bar: { name: 'alertMessage', option: alertMessageBarByAsset },
   ruleBar: { name: 'ruleMessage', option: alertMessageBarByRule },
   assetBar: { name: 'assetMessage', option: alertMessageBarByAsset },
+  logBar: { name: 'logBar', option: logBar },
   noData: { name: 'noData', option: noDataOption },
   tooltipPie: { option: tooltipPieOption },
   topoPie: { option: topoPieOption }
 }
 export default {
-  getOption: function (type) {
+  getOption (type) {
     return JSON.parse(JSON.stringify(chartTypes[type].option))
   },
-  getOptionNoData: function (type) {
+  getOptionNoData (type) {
     chartTypes[type].option.xAxis.data = createTempTimes()
     return JSON.parse(JSON.stringify(chartTypes[type].option))
   },
-  setMap: function (map) {
+  setMap (map) {
     mapOptions.geo.map = map
   },
-  getBgColorList: function () {
+  getBgColorList () {
     return Object.assign([], bgColorList)
   }
 }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 7a6ce2ec5..dc88cfa77 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -30,7 +30,7 @@
                 </el-input>
               </div>
 
-              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
+              <pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10"></pick-time>
 
               <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
                       type="button" @click="addChart">
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 9c3b0e07c..958639110 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -27,7 +27,7 @@ export default new Router({
         },
         {
           path: '/explore',
-          component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve)
+          component: resolve => require(['@/components/page/dashboard/explore/explore'], resolve)
         },
         {
           path: '/overview',

From 137ac1dd01f7a25dc376020ad5c3dd2d06f610b8 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 2 Aug 2021 20:10:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?NEZ-858=20feat:=20=E7=BB=9F=E4=B8=80legend?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page/dashboard/explore/logTab.vue         | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index b9a080cc9..ddd18b832 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -192,7 +192,8 @@ export default {
             containLabel: true
           },
           legend: {
-            bottom: 20
+            bottom: 20,
+            left: 10
           },
           series,
           xAxis: {
@@ -229,6 +230,32 @@ export default {
           useUTC: false // 使用本地时间
         }
         this.myChart.setOption(option)
+        /* 点击legend
+          * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+          * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+          * 3.否则只改变被点击的legend状态
+          * */
+        this.myChart.on('legendselectchanged', ({ name, selected }) => {
+          const selectedLevel = []
+          const unselectedLevel = []
+          for (const n in selected) {
+            selected[n] ? selectedLevel.push(n) : unselectedLevel.push(n)
+          }
+          // 1.
+          if (selectedLevel.length + unselectedLevel.length > 1) {
+            if (unselectedLevel.length === 1 && unselectedLevel[0] === name) {
+              selectedLevel.forEach(l => {
+                this.myChart.dispatchAction({
+                  type: 'legendInverseSelect'
+                })
+              })
+            } else if (selectedLevel.length === 0) { // 2.
+              this.myChart.dispatchAction({
+                type: 'legendAllSelect'
+              })
+            }
+          }
+        })
       }
     },
     applyFilter (allTableData, filter) {