NEZ-2521 feat: Loki status 运行状态详情页面开发

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%;
@@ -129,14 +129,5 @@
                 }
             }
         }
-
-        .table-no-data {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
     }
 }

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: [

nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue

@@ -0,0 +1,99 @@
+<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"
+          :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()
+        this.getservicesTableData()
+      }
+    }
+  },
+  data () {
+    return {
+      tableId: 'lokiStatus',
+      configMode: 'defaults',
+      configTableData: [],
+      servicesTableData: [],
+      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 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>

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
@@ -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'),

nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue

@@ -0,0 +1,223 @@
+<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-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
+  },
+  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: {
+    configSwitchCheck () {
+      if (this.configSwitch == 1) {
+        this.$emit('configval', 'defaults')
+      } else {
+        this.$emit('configval', 'diff')
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>