NEZ-3153 fix：Agent中Loki status未完全展示接口返回的key-value数据rel-23.07.07

2 files changed, 139 insertions, 111 deletions

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
index 43f9d067f..9440977b3 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/lokiStatus.vue
@@ -17,6 +17,7 @@
           :ringTableData='ringTableData'
           :configTableData='configTableData'
           :servicesTableData='servicesTableData'
+          :servicesTableTitle='servicesTableTitle'
           @configval='configval'>
           </loki-status-table>
         </div>
@@ -69,6 +70,7 @@ export default {
       configMode: 'defaults',
       configTableData: [],
       servicesTableData: [],
+      servicesTableTitle: [],
       ringTableData: [],
       readyTableData: '',
       loading: false
@@ -114,12 +116,26 @@ export default {
       })
     },
     async getservicesTableData () {
+      this.servicesTableData = []
       const response = await this.$get('agent/' + this.obj.id + '/loki/services')
       if (response.code === 200) {
         const serObj = {}
+        let arr = []
         response.data.list.forEach(item => {
           serObj[item.service] = item.status
+          arr.push({
+            label: item.service,
+            prop: item.service,
+            minWidth: 180
+          })
+          if (arr.length >= 6) {
+            this.servicesTableTitle.push(this.$lodash.cloneDeep(arr))
+            arr = []
+          }
         })
+        if (arr.length) {
+          this.servicesTableTitle.push(arr)
+        }
         serObj.ready = this.readyTableData
         this.servicesTableData.push(serObj)
       }
diff --git a/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue b/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue
index ade0e1503..9ddf75329 100644
--- a/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/lokiStatusTable.vue
@@ -2,54 +2,32 @@
     <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}-${item.prop}`"
-            :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}-${item.prop}`"
-            :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 v-for="(serviceTitle, index) in serviceTitleAll" :key="index">
+            <el-table
+              :data="servicesTableData"
+              border>
+              <el-table-column
+                v-for="(item, index) in serviceTitle"
+                :key="`col-${index}-${item.prop}`"
+                :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>
       <div class="cortex-ring">
         <div class="cortex-title">{{$t('cortex.ringStatus')}}</div>
@@ -171,70 +149,104 @@ export default {
           prop: 'ownership',
           minWidth: 180
         }],
-      serviceTitle: [
-        {
-          label: 'Ready',
-          prop: 'ready',
-          minWidth: 180
-        },
-        {
-          label: 'Querier',
-          prop: 'querier',
-          minWidth: 180
-        },
-        {
-          label: 'Member list KV',
-          prop: 'memberlist-kv',
-          minWidth: 180
-        },
-        {
-          label: 'Store',
-          prop: 'store',
-          minWidth: 180
-        },
-        {
-          label: 'Distributor',
-          prop: 'distributor',
-          minWidth: 180
-        },
-        {
-          label: 'Ingester',
-          prop: 'ingester',
-          minWidth: 180
-        }
+      serviceTitleAll:[
+        [
+          {
+            label: 'Ready',
+            prop: 'ready',
+            minWidth: 180
+          },
+          {
+            label: 'Querier',
+            prop: 'querier',
+            minWidth: 180
+          },
+          {
+            label: 'Member list KV',
+            prop: 'memberlist-kv',
+            minWidth: 180
+          },
+          {
+            label: 'Store',
+            prop: 'store',
+            minWidth: 180
+          },
+          {
+            label: 'Distributor',
+            prop: 'distributor',
+            minWidth: 180
+          },
+          {
+            label: 'Ingester',
+            prop: 'ingester',
+            minWidth: 180
+          }
+        ],
+        [
+          {
+            label: 'Query frontend tripperware',
+            prop: 'query-frontend-tripperware',
+            minWidth: 180
+          },
+          {
+            label: 'Query frontend',
+            prop: 'query-frontend',
+            minWidth: 180
+          },
+          {
+            label: 'Ingester querier',
+            prop: 'ingester-querier',
+            minWidth: 180
+          },
+          {
+            label: 'Server',
+            prop: 'server',
+            minWidth: 180
+          },
+          {
+            label: 'Ring',
+            prop: 'ring',
+            minWidth: 180
+          },
+          {
+            label: 'Query scheduler',
+            prop: 'query-scheduler',
+            minWidth: 180
+          }
+        ],
+        [
+          {
+            label: 'Cache generation loader',
+            prop: 'cache-generation-loader',
+            minWidth: 180
+          },
+          {
+            label: 'Compactor',
+            prop: 'compactor',
+            minWidth: 180
+          },
+          {
+            label: 'Usage report',
+            prop: 'usage-report',
+            minWidth: 180
+          },
+          {
+            label: '',
+            prop: '',
+            minWidth: 180
+          },
+          {
+            label: '',
+            prop: '',
+            minWidth: 180
+          },
+          {
+            label: '',
+            prop: '',
+            minWidth: 180
+          }
+        ],
       ],
-      serviceTitleSub: [
-        {
-          label: 'Query frontend tripperware',
-          prop: 'query-frontend-tripperware',
-          minWidth: 180
-        },
-        {
-          label: 'Query frontend',
-          prop: 'query-frontend',
-          minWidth: 180
-        },
-        {
-          label: 'Ingester querier',
-          prop: 'ingester-querier',
-          minWidth: 180
-        },
-        {
-          label: 'Server',
-          prop: 'server',
-          minWidth: 180
-        },
-        {
-          label: 'Ring',
-          prop: 'ring',
-          minWidth: 180
-        },
-        {
-          label: 'Query scheduler',
-          prop: 'query-scheduler',
-          minWidth: 180
-        }
-      ]
     }
   },
   mounted () {