Merge branch 'dev-3.6' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.7

2023-02-03 14:17:27 +08:00
parent 642d3a78e3 660feb6a8e
commit 74a68a291d
7 changed files with 419 additions and 47 deletions
--- 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/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/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/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 < 31 ? `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>