fix：解决冲突

2023-02-08 14:02:49 +08:00
parent acc5263092 61106c08d5
commit 25bf6c34f1
18 changed files with 652 additions and 134 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -676,3 +676,8 @@ textarea {
 .el-message__content{
  white-space:pre-line
 }
+.response__popper {
+  max-height: 500px;
+  overflow: hidden;
+  overflow-y: auto;
+}
--- a/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss
+++ b/nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss
@@ -1,11 +1,11 @@
-#cortexDetail {
+#cortexDetail,#lokiStatus {
    .sub-container{
        background: $--background-color-empty;
        .nz-table-list{
            height: auto;
        }
    }
-    #cortexDetailTable {
+    #cortexDetailTable,#lokiStatusTable {
        display: flex;
        flex-direction: column;
        height: 100%;
@@ -45,6 +45,11 @@
                    display: none;
                }
            }
+            .ring-table{
+                .el-table__body-wrapper{
+                    border-left: 1px solid $--border-color-light;
+                }
+            }
        }

        .cortex-service,
@@ -129,14 +134,5 @@
                }
            }
        }
-
-        .table-no-data {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
    }
 }
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -422,3 +422,13 @@ td.el-table__expanded-cell:hover {
  padding: 0 0 0 60px;
  background-color: $--background-color-base !important;
 }
+#pingTable{
+  th.el-table__expand-column{
+    .arrow-expand{
+      i.nz-icon{
+        cursor: pointer;
+        padding-left: 2px;
+      }
+    }
+  }
+}
--- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
@@ -160,6 +160,14 @@
          .el-table__body-wrapper{
            height: calc(100% - 42px) !important;
          }
+          th.el-table__expand-column{
+            .arrow-expand{
+              i.nz-icon{
+                cursor: pointer;
+                padding-left: 2px;
+              }
+            }
+          }
        }
      }
    }
--- a/nezha-fronted/src/assets/css/font/iconfont.js
+++ b/nezha-fronted/src/assets/css/font/iconfont.js
--- a/nezha-fronted/src/assets/css/font/iconfont.json
+++ b/nezha-fronted/src/assets/css/font/iconfont.json
@@ -6,6 +6,7 @@
  "description": "",
  "glyphs": [
    {
+<<<<<<< HEAD
      "icon_id": "33998082",
      "name": "右纵轴",
      "font_class": "youzongzhou",
@@ -20,6 +21,8 @@
      "unicode_decimal": 59343
    },
    {
+=======
+>>>>>>> 61106c08d5bd1c9b7263e6b915880385934c3c7d
      "icon_id": "33991102",
      "name": "全部收起",
      "font_class": "quanbushouqi",
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -557,6 +557,7 @@ export default {
      if (!this.panelLock) {
        return false
      }
+      this.copyDataList = JSON.parse(JSON.stringify(this.tempList))
      for (let i = 0; i < this.copyDataList.length; i++) {
        const item = this.copyDataList[i]
        if ((this.$loadsh.get(this.showHidden[item.id], 'visibility') && this.$loadsh.get(this.showHidden[item.id], 'visibility') === 'hidden') && item.id !== -2) {
@@ -564,11 +565,11 @@ export default {
          i--
        }
      }
-      this.tempList.forEach(item => {
-        if ((!this.$loadsh.get(this.showHidden[item.id], 'visibility') || this.$loadsh.get(this.showHidden[item.id], 'visibility') === 'show') && item.id !== -2 && !this.copyDataList.find(chart => chart.id === item.id)) {
-          this.copyDataList.push(item)
-        }
-      })
+      // this.tempList.forEach(item => {
+      //   if ((!this.$loadsh.get(this.showHidden[item.id], 'visibility') || this.$loadsh.get(this.showHidden[item.id], 'visibility') === 'show') && item.id !== -2 && !this.copyDataList.find(chart => chart.id === item.id)) {
+      //     this.copyDataList.push(item)
+      //   }
+      // })
      this.onScroll(this.scrollTop)
    },

@@ -606,10 +607,12 @@ export default {
        for (let index = 0; index < arr.length; index++) { // 遍历找出所有需要 repeat的group 按照 name进行多次的分组
          const item = arr[index]
          const repeatVariable = this.$loadsh.get(item.param.repeat, 'variable')
-          if (item.type === 'group' && repeatVariable && this.$loadsh.get(this.showHidden[item.id], 'visibility') !== 'hidden') {
+          const repeatEnable = this.$loadsh.get(item.param.enable, 'repeat')
+          if (item.type === 'group' && repeatVariable && this.$loadsh.get(this.showHidden[item.id], 'visibility') !== 'hidden' && repeatEnable) {
            const itemPrev = arr[index - 1]
            const repeatPrevVariable = this.$loadsh.get(itemPrev.param.repeat, 'variable')
-            if (itemPrev && itemPrev.type === 'group' && repeatPrevVariable === repeatVariable) {
+            const repeatPrevEnable = this.$loadsh.get(item.param.enable, 'repeat')
+            if (itemPrev && itemPrev.type === 'group' && repeatPrevVariable === repeatVariable && repeatPrevEnable) {
              const arr = variablesRepeat[repeatVariable]
              arr[arr.length - 1].repeatArr.push(item)
              arr[arr.length - 1].lastGroup = item
@@ -800,8 +803,8 @@ export default {
          })
        }
        this.$nextTick(() => {
-          this.tempList = JSON.parse(JSON.stringify(tempList))
          this.copyDataList = JSON.parse(JSON.stringify(tempList))
+          this.tempList = JSON.parse(JSON.stringify(this.copyDataList))
          // 比较变量 图表是否显示/隐藏
          this.compareVariables()

--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -1,7 +1,11 @@
 <template>
-  <div style="padding:15px" :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
-       @mouseenter="tooltipHover(true)"
-       @mouseleave="tooltipHover(false)">
+  <div style="padding:15px"
+       :class="calcHeight(that.position,that)"
+       :style="calcPosition(that.position,that)"
+       class="alert-label__border response__popper"
+       ref="alertLabels"
+       @mouseenter="tipHover(true)"
+       @mouseleave="tipHover(false)">
    <slot name="default"/>
  </div>
 </template>
@@ -16,7 +20,11 @@ export default {
    that: {},
    detailList: Boolean,
    alertTableDialog: Boolean,
-    isTopoInfo: Boolean
+    isTopoInfo: Boolean,
+    width: {
+      type: Number,
+      default: 150
+    }
  },
  data () {
    return {
@@ -28,31 +36,62 @@ export default {
  computed: {
    calcPosition () {
      return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const leftOffSetView = this.detailList ? -80 : 10
-        const leftOffSet = this.detailList ? -80 : 10
-        const topOffSet = this.detailList ? 60 : 22
-        const topoOffset = this.isTopoInfo ? 155 : 0
-        if (position.top + this.heightList > clientHeight) {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top - this.heightList + topOffSet}px`
+        if (this.$refs.alertLabels) {
+          this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+          this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+        } else {
+          this.heightList = 0
+          this.boxWidth = 0
+        }
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0,
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
          }
-        } else if (this.alertTableDialog) {
-          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
          const dialogHeight = dialog.getBoundingClientRect()
-          if (dialogHeight) {
-            return {
-              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
-              top: `${position.top - dialogHeight.y}px`
-            }
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top - this.heightList - topOffSetView}px` : `${position.top - this.heightList - topOffSetView + position.height / 2}px`
          }
        } else {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top}px`
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top + topOffSet}px` : `${position.top + position.height / 2}px`
          }
        }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        labelPosition.width = this.width + 'px'
+        return labelPosition
      }
    },
    calcHeight () {
@@ -69,13 +108,23 @@ export default {
    }
  },
  methods: {
-    tooltipHover (show) {
-      if (show) {
-        clearTimeout(this.that.timeout)
-        this.that.timeout = null
-      } else {
-        this.that.loading = false
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.position.left = position.left
+        this.$set(this.position, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(this.position, 'top', position.top - 55)
+        } else {
+          this.$set(this.position, 'top', position.top + 30)
+        }
+        // this.$set(item, 'alertNumtooltipShow', flag)
+        this.alertNumtooltipShow = flag
      }
+    },
+    tipHover (tipLoading) {
+      this.$emit('tipHover', tipLoading)
    }
  },
  mounted () {
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -68,6 +68,7 @@
        <!-- agent 下滑-->
        <scrape-endpoint v-if="from === fromRoute.agent && targetTab === 'scrapeEndpoint'" :from="from" :obj="obj" :tabs="tabs.agent.scrapeEndpoint" @changeTab="changeTab" :targetTab.sync="targetTab"></scrape-endpoint>
        <cortex-detail v-if="from === fromRoute.agent && targetTab === 'cortexDetail'" :from="from" :obj="obj" :tabs="tabs.agent.cortexDetail" @changeTab="changeTab" :targetTab.sync="targetTab"></cortex-detail>
+        <loki-status v-if="from === fromRoute.agent && targetTab === 'lokiStatus'" :from="from" :obj="obj" :tabs="tabs.agent.lokiStatus" @changeTab="changeTab" :targetTab.sync="targetTab"></loki-status>
        <!-- ipam -->
        <ip-details v-if="from === fromRoute.ipam && targetTab === 'ipam'" :from="from" :obj="obj" :tabs="tabs.ipam" @changeTab="changeTab" :targetTab.sync="targetTab"></ip-details>
        <!-- recordRule  下滑-->
@@ -109,6 +110,7 @@ import processBottomTab from '@/components/common/bottomBox/tabs/processBottomTa
 import networkBottomTab from '@/components/common/bottomBox/tabs/networkBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import cortexDetail from '@/components/common/bottomBox/tabs/cortexDetail'
+import lokiStatus from '@/components/common/bottomBox/tabs/lokiStatus'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
@@ -119,6 +121,7 @@ export default {
  components: {
    scrapeEndpoint,
    cortexDetail,
+    lokiStatus,
    LogBottomTab,
    processBottomTab,
    networkBottomTab,
@@ -251,11 +254,18 @@ export default {
        agent: {
          scrapeEndpoint: [
            { prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: true },
-            { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false }
+            { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false },
+            { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: false }
          ],
          cortexDetail: [
            { prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: false },
-            { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: true }
+            { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: true },
+            { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: false }
+          ],
+          lokiStatus: [
+            { prop: 'scrapeEndpoint', name: this.$t('config.agent.scrapeEndpoint'), active: false },
+            { prop: 'cortexDetail', name: this.$t('config.agent.cortexDetail'), active: false },
+            { prop: 'lokiStatus', name: this.$t('config.agent.lokiStatus'), active: true }
          ]
        },
        ipam: [
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cortexDetail.vue
@@ -52,6 +52,7 @@ export default {
        await this.getReadyTableData()
        await this.getIngesterTableData()
        await this.getStoreGatewayTableData()
+        await this.getCompactorTableData()
        await this.getConfigTableData()
        this.getservicesTableData()
      }
@@ -86,6 +87,12 @@ export default {
        this.ringTableData.push(response.data.list)
      }
    },
+    async getCompactorTableData () {
+      const response = await this.$get('agent/' + this.obj.id + '/cortex/compactor/ring')
+      if (response.code === 200) {
+        this.ringTableData.push(response.data.list)
+      }
+    },
    async getConfigTableData () {
      const response = await this.$get('agent/' + this.obj.id + '/cortex/config?mode=' + this.configMode)
      if (response.code === 200) {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
@@ -0,0 +1,108 @@
+<template>
+    <nz-bottom-data-list
+      id="lokiStatus"
+      :showTitle='showTitle'
+      :obj='obj'
+      :tableId="tableId"
+      :custom-table-title.sync="tools.customTableTitle"
+      :tabs="tabs"
+      :targetTab="targetTab"
+      :showPagination="false"
+      @changeTab="changeTab"
+    >
+      <template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
+      <template v-slot>
+          <loki-status-table
+          v-my-loading="tools.loading"
+          :loading="tools.loading"
+          :ringTableData='ringTableData'
+          :configTableData='configTableData'
+          :servicesTableData='servicesTableData'
+          @configval='configval'>
+          </loki-status-table>
+      </template>
+    </nz-bottom-data-list>
+  </template>
+
+<script>
+import dataListMixin from '@/components/common/mixin/dataList'
+import subDataListMixin from '@/components/common/mixin/subDataList'
+import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
+import lokiStatusTable from '@/components/common/table/settings/lokiStatusTable'
+
+export default {
+  name: 'lokiStatus',
+  mixins: [dataListMixin, subDataListMixin],
+  components: {
+    nzBottomDataList,
+    lokiStatusTable
+  },
+  props: {
+    obj: Object,
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      async handler (n) {
+        await this.getReadyTableData()
+        await this.getConfigTableData()
+        await this.getCompactorTableData()
+        this.getservicesTableData()
+      }
+    }
+  },
+  data () {
+    return {
+      tableId: 'lokiStatus',
+      configMode: 'defaults',
+      configTableData: [],
+      servicesTableData: [],
+      ringTableData: [],
+      readyTableData: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    configval (val) {
+      this.configMode = val
+      this.getConfigTableData()
+    },
+    async getConfigTableData () {
+      const response = await this.$get('agent/' + this.obj.id + '/loki/config?mode=' + this.configMode)
+      if (response.code === 200) {
+        this.configTableData = response.data.content.split(/\n/)
+      }
+    },
+    async getCompactorTableData () {
+      const response = await this.$get('agent/' + this.obj.id + '/loki/compactor/ring')
+      if (response.code === 200) {
+        this.ringTableData = response.data.list
+      }
+    },
+    async getReadyTableData () {
+      const response = await this.$get('agent/' + this.obj.id + '/loki/ready')
+      if (response.code === 200) {
+        this.readyTableData = response.data.status
+      }
+    },
+    async getservicesTableData () {
+      const response = await this.$get('agent/' + this.obj.id + '/loki/services')
+      if (response.code === 200) {
+        const serObj = {}
+        response.data.list.forEach(item => {
+          serObj[item.service] = item.status
+        })
+        serObj.ready = this.readyTableData
+        this.servicesTableData.push(serObj)
+        this.tools.loading = false
+      }
+    }
+  }
+}
+</script>
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -62,6 +62,8 @@ export default {
        case 'dc':
        case 'user':
        case 'recordRule':
+        case 'response':
+        case 'params':
          return false
        default: return true
      }
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -1,8 +1,9 @@
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
-import { requestsArr } from '@/http'
+import nzTooltip from '@/components/common/alert/nzTooltip'
 export default {
  components: {
-    alertDaysInfo
+    alertDaysInfo,
+    nzTooltip
  },
  props: {
    tableData: {
--- a/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/cortexDetailTable.vue
@@ -1,6 +1,5 @@
 <template>
  <div id="cortexDetailTable">
-  <template v-if="noData" height='100%'>
    <div class="cortex-service">
        <div class="cortex-title" style="margin-top: 0px;">{{$t('cortex.serviceStatus')}}</div>
        <el-table
@@ -77,7 +76,7 @@
                    <div class="col-resize-area"></div>
                  </template>
                  <template slot-scope="scope" :column="item">
-                    <span v-if="item.prop === 'name'">{{indexs? $t('cortex.storeGateway'):$t('cortex.ingester')}}</span>
+                    <span v-if="item.prop === 'name'">{{indexs==0?$t('cortex.storeGateway'):(indexs==1?$t('cortex.ingester'):$t('cortex.compactor'))}}</span>
                    <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
                    <template v-else>-</template>
                  </template>
@@ -111,21 +110,10 @@
          </el-table>
        </div>
    </div>
-  </template>
-  <div v-else class="table-no-data">
-    <div v-if="!loading">
-      <svg class="icon" aria-hidden="true">
-        <use xlink:href="#nz-icon-no-data-list"></use>
-      </svg>
-      <div class="table-no-data__title">No results found</div>
-    </div>
-    <div v-else>&nbsp;</div>
-  </div>
  </div>
 </template>

 <script>
-import lodash from 'lodash'
 import table from '@/components/common/mixin/table'
 export default {
  name: 'cortexDetailTable',
@@ -141,23 +129,10 @@ export default {
  mixins: [table],
  components: {},
  watch: {
-    loading: {
-      immediate: true,
-      deep: true,
-      handler (n) {
-        if (!n) {
-          // 判断是否有值
-          if (!lodash.isEmpty(this.ingesterTableData) || !lodash.isEmpty(this.storeGatewayTableData) || !lodash.isEmpty(this.configTableData) || !lodash.isEmpty(this.servicesTableData)) {
-            this.noData = true
-          }
-        }
-      }
-    }
  },
  data () {
    return {
      configSwitch: 1,
-      noData: false,
      ingesterTitle: [
        {
          label: this.$t('alert.alertName'),
--- a/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue
@@ -0,0 +1,273 @@
+<template>
+    <div id="lokiStatusTable">
+      <div class="cortex-service">
+          <div class="cortex-title" style="margin-top: 0px;">{{$t('cortex.serviceStatus')}}</div>
+          <el-table
+          :data="servicesTableData"
+          border>
+            <el-table-column
+            v-for="(item, index) in serviceTitle"
+            :key="`col-${index}`"
+            :fixed="item.fixed"
+            :label="item.label"
+            :min-width="`${item.minWidth}`"
+            :prop="item.prop"
+            :resizable="true"
+            :width="`${item.width}`"
+            class="data-column"
+            >
+            <template slot="header">
+               <span class="data-column__span">{{item.label}}</span>
+                <div class="col-resize-area"></div>
+            </template>
+             <template slot-scope="scope" :column="item">
+              <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <template v-else>-</template>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-table
+          :data="servicesTableData"
+          border>
+            <el-table-column
+            v-for="(item, index) in serviceTitleSub"
+            :key="`col-${index}`"
+            :fixed="item.fixed"
+            :label="item.label"
+            :min-width="`${item.minWidth}`"
+            :prop="item.prop"
+            :resizable="true"
+            :width="`${item.width}`"
+            class="data-column"
+            >
+            <template slot="header">
+               <span class="data-column__span">{{item.label}}</span>
+                <div class="col-resize-area"></div>
+            </template>
+             <template slot-scope="scope" :column="item">
+              <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+              <template v-else>-</template>
+              </template>
+            </el-table-column>
+          </el-table>
+      </div>
+      <div class="cortex-ring">
+        <div class="cortex-title">{{$t('cortex.ringStatus')}}</div>
+          <div class="cortex-ingester">
+             <el-table
+            :data="ringTableData"
+            :border='true'
+            :class="ringTableData.length == 0?'ring-table':''"
+            :span-method="(param)=>objectSpanMethod(param,ringTableData)"
+             >
+                <el-table-column
+                  v-for="(item, index) in ingesterTitle"
+                  :key="`col-${index}`"
+                  :fixed="item.fixed"
+                  :label="item.label"
+                  :min-width="`${item.minWidth}`"
+                  :prop="item.prop"
+                  :resizable="true"
+                  :width="`${item.width}`"
+                  class="data-column"
+                >
+                  <template slot="header">
+                    <span class="data-column__span">{{item.label}}</span>
+                    <div class="col-resize-area"></div>
+                  </template>
+                  <template slot-scope="scope" :column="item" class="123">
+                    <span v-if="item.prop === 'name'">{{$t('cortex.compactor')}}</span>
+                    <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                    <template v-else>-</template>
+                  </template>
+                </el-table-column>
+            </el-table>
+          </div>
+    </div>
+      <div class="cortex-config" :style="configTableData.length < 26 ? `height:${configTableData.length * 27 + 102}px` : 'flex:1;min-height: 436px;'">
+          <div class="cortex-title">{{$t('overall.configEndpoint')}}</div>
+          <div class="cortex-config-tab">
+            <el-table
+              :data="configTableData"
+              class="config-tab">
+                  <el-table-column
+                    type="index"
+                    width="60">
+                  </el-table-column>
+                  <el-table-column
+                    :resizable="true"
+                    class="data-column"
+                  >
+                    <template #header>
+                      <span style="padding-right: 7px;">{{$t('cortex.IncludeDefault')}}</span>
+                      <el-switch v-model="configSwitch" :active-value="1" :inactive-value="0" @change="configSwitchCheck" size="small" style="padding-right: 11px;"></el-switch>
+                    </template>
+                    <template slot-scope="scope">
+                      <span><pre>{{scope.row}}</pre></span>
+                    </template>
+                  </el-table-column>
+            </el-table>
+          </div>
+      </div>
+    </div>
+  </template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'lokiStatusTable',
+  props: {
+    loading: Boolean,
+    configMode: String,
+    configTableData: Array,
+    servicesTableData: Array,
+    ringTableData: Array
+  },
+  mixins: [table],
+  components: {},
+  watch: {
+  },
+  data () {
+    return {
+      configSwitch: 1,
+      ingesterTitle: [
+        {
+          label: this.$t('alert.alertName'),
+          prop: 'name',
+          minWidth: 145
+        },
+        {
+          label: 'ID',
+          prop: 'instanceId',
+          minWidth: 145
+        },
+        {
+          label: this.$t('cortex.availabilityZone'),
+          prop: 'zone',
+          minWidth: 180
+        },
+        {
+          label: this.$t('overall.state'),
+          prop: 'state',
+          minWidth: 150
+        },
+        {
+          label: this.$t('overall.address'),
+          prop: 'address',
+          minWidth: 180
+        }, {
+          label: this.$t('cortex.registeredAt'),
+          prop: 'registeredAt',
+          minWidth: 210
+        }, {
+          label: this.$t('cortex.lastHeartbeat'),
+          prop: 'heartbeat',
+          minWidth: 210
+        }, {
+          label: this.$t('asset.talon.token'),
+          prop: 'tokens',
+          minWidth: 180
+        }, {
+          label: this.$t('cortex.ownership'),
+          prop: 'ownership',
+          minWidth: 180
+        }],
+      serviceTitle: [
+        {
+          label: this.$t('cortex.ready'),
+          prop: 'ready',
+          minWidth: 180
+        },
+        {
+          label: this.$t('cortex.querier'),
+          prop: 'querier',
+          minWidth: 180
+        },
+        {
+          label: this.$t('cortex.memberlist'),
+          prop: 'memberlist-kv',
+          minWidth: 180
+        },
+        {
+          label: this.$t('loki.store'),
+          prop: 'store',
+          minWidth: 180
+        },
+        {
+          label: this.$t('loki.distributor'),
+          prop: 'distributor',
+          minWidth: 180
+        },
+        {
+          label: this.$t('cortex.ingester'),
+          prop: 'ingester',
+          minWidth: 180
+        }
+      ],
+      serviceTitleSub: [
+        {
+          label: this.$t('cortex.queryFrontendTripperware'),
+          prop: 'query-frontend-tripperware',
+          minWidth: 180
+        },
+        {
+          label: this.$t('cortex.queryFrontend'),
+          prop: 'query-frontend',
+          minWidth: 180
+        },
+        {
+          label: this.$t('loki.ingesterQuerier'),
+          prop: 'ingester-querier',
+          minWidth: 180
+        },
+        {
+          label: this.$t('asset.server'),
+          prop: 'server',
+          minWidth: 180
+        },
+        {
+          label: this.$t('cortex.ring'),
+          prop: 'ring',
+          minWidth: 180
+        },
+        {
+          label: this.$t('loki.queryScheduler'),
+          prop: 'query-scheduler',
+          minWidth: 180
+        }
+      ]
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    // 合并单元格
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }, items) {
+      if (columnIndex === 0) {
+        if (rowIndex % items.length === 0) {
+          return {
+            rowspan: items.length,
+            colspan: 1
+          }
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          }
+        }
+      }
+    },
+    configSwitchCheck () {
+      if (this.configSwitch == 1) {
+        this.$emit('configval', 'defaults')
+      } else {
+        this.$emit('configval', 'diff')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
--- a/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
@@ -1,68 +1,94 @@
 <template>
-  <el-table
-    id="roleTable"
-    ref="dataTable"
-    :data="tableData"
-    :height="height"
-    border
-    :default-sort="orderBy"
-    class="no-operation"
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
-  >
-    <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      v-for="(item, index) in customTableTitle"
-      v-if="item.show"
-      :key="`col-${index}`"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sortable="item.sortable"
-      :sort-orders="['ascending', 'descending']"
-      :width="`${item.width}`"
-      class="data-column"
-      :show-overflow-tooltip="item.ShowOverflowTooltip"
+  <div style="height: 100%">
+    <el-table
+      id="roleTable"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      :default-sort="orderBy"
+      class="no-operation"
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
    >
-      <template slot="header">
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template slot-scope="scope" :column="item">
+      <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in customTableTitle"
+        v-if="item.show"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sortable="item.sortable"
+        :sort-orders="['ascending', 'descending']"
+        :width="`${item.width}`"
+        class="data-column"
+      >
+        <template slot="header">
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template slot-scope="scope" :column="item">
        <span v-if="item.prop === 'time'">
                {{scope.row[item.prop]}} ms
              </span>
-        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
-        <span v-else-if="item.prop === 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-        <span v-else>-</span>
+          <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
+          <span v-else-if="item.prop === 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+          <span v-else-if="item.prop === 'response'"  @mouseenter="labelHover(scope.row, 'response', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'response', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
+          <span v-else-if="item.prop === 'params'"  @mouseenter="labelHover(scope.row, 'params', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'params', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
+          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <template slot="empty">
+        <div v-if="!loading" class="table-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div class="table-no-data__title">No results found</div>
+        </div>
+        <div v-else>&nbsp;</div>
      </template>
-    </el-table-column>
-    <template slot="empty">
-      <div v-if="!loading" class="table-no-data">
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#nz-icon-no-data-list"></use>
-        </svg>
-        <div class="table-no-data__title">No results found</div>
+    </el-table>
+    <nzTooltip
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :width="200"
+      :type="alertLabelType"
+      @tipHover='tipHover'
+    >
+      <div style="word-break: break-all">
+        {{alertLabelObj[alertLabelType]}}
      </div>
-      <div v-else>&nbsp;</div>
-    </template>
-  </el-table>
+    </nzTooltip>
+  </div>
 </template>

 <script>
 import table from '@/components/common/mixin/table'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
  name: 'operationLog',
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
  props: {
    loading: Boolean
  },
@@ -136,7 +162,7 @@ export default {
          prop: 'params',
          show: false,
          ShowOverflowTooltip: true,
-          minWidth: 80
+          minWidth: 100
        },
        {
          label: this.$t('config.operationlog.response'),
--- a/nezha-fronted/src/components/common/table/tool/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/pingTable.vue
@@ -9,6 +9,12 @@
      @header-dragend="dragend"
    >
    <el-table-column type="expand">
+      <template #header>
+        <div class="arrow-expand" @click="toggleRowExpansion">
+            <i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
+            <i v-else class="nz-icon nz-icon-quanbushouqi"></i>
+        </div>
+      </template>
      <template slot-scope="{ row }">
        <div class="details">
          <pre>{{row.raw}}</pre>
@@ -107,10 +113,25 @@ export default {
          minWidth: 200
        }
      ],
-      expandRowKeys: []
+      expandRowKeys: [],
+      expandData: false
    }
  },
  methods: {
+    toggleRowExpansion () {
+      this.$nextTick(() => {
+        this.expandData = !this.expandData
+      })
+      this.toggleRowExpansionAll(this.tableData, !this.expandData)
+    },
+    toggleRowExpansionAll (data, isExpansion) {
+      data.forEach((item) => {
+        this.$refs.dataTable.toggleRowExpansion(item, isExpansion)
+        if (item.children !== undefined && item.children !== null) {
+          this.toggleRowExpansionAll(item.children, isExpansion)
+        }
+      })
+    }
  }
 }
 </script>
--- a/nezha-fronted/src/components/common/table/tool/traceTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/traceTable.vue
@@ -9,6 +9,12 @@
      @header-dragend="dragend"
    >
    <el-table-column type="expand">
+      <template #header>
+        <div class="arrow-expand" @click="toggleRowExpansion">
+            <i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
+            <i v-else class="nz-icon nz-icon-quanbushouqi"></i>
+        </div>
+      </template>
      <template slot-scope="{ row }">
        <div class="details">
          <pre>{{row.raw}}</pre>
@@ -85,10 +91,25 @@ export default {
          prop: 'time',
          sortable: true
        }
-      ]
+      ],
+      expandData: false
    }
  },
  methods: {
+    toggleRowExpansion () {
+      this.$nextTick(() => {
+        this.expandData = !this.expandData
+      })
+      this.toggleRowExpansionAll(this.tableData, !this.expandData)
+    },
+    toggleRowExpansionAll (data, isExpansion) {
+      data.forEach((item) => {
+        this.$refs.dataTable.toggleRowExpansion(item, isExpansion)
+        if (item.children !== undefined && item.children !== null) {
+          this.toggleRowExpansionAll(item.children, isExpansion)
+        }
+      })
+    }
  }
 }
 </script>