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

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)
       }

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

@@ -2,6 +2,7 @@
     <div id="lokiStatusTable">
       <div class="cortex-service">
           <div class="cortex-title" style="margin-top: 0px;">{{$t('cortex.serviceStatus')}}</div>
+          <div v-for="(serviceTitle, index) in serviceTitleAll" :key="index">
             <el-table
               :data="servicesTableData"
               border>
@@ -26,30 +27,7 @@
                 </template>
               </el-table-column>
             </el-table>
-          <el-table
+          </div>
-          :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>
       <div class="cortex-ring">
         <div class="cortex-title">{{$t('cortex.ringStatus')}}</div>
@@ -171,7 +149,8 @@ export default {
           prop: 'ownership',
           minWidth: 180
         }],
-      serviceTitle: [
+      serviceTitleAll:[
+        [
           {
             label: 'Ready',
             prop: 'ready',
@@ -203,7 +182,7 @@ export default {
             minWidth: 180
           }
         ],
-      serviceTitleSub: [
+        [
           {
             label: 'Query frontend tripperware',
             prop: 'query-frontend-tripperware',
@@ -234,7 +213,40 @@ export default {
             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
+          }
+        ],
+      ],
     }
   },
   mounted () {

nezha-fronted/src/entrance/exportHtml/App.vue

@@ -38,7 +38,7 @@
               :loading="chartListLoading"
             />
           </div>
-          <div v-if="dataJson.type == 1" id="explore" class="explores" style='overflow:hidden;background: #fffffe; height: calc(100% - 72px);display: flex;flex-direction: column'>
+          <div v-if="dataJson.type == 1 || dataJson.type == 2" id="explore" class="explores" style='overflow:hidden;background: #fffffe; height: calc(100% - 72px);display: flex;flex-direction: column'>
             <exploreItem
               ref="exploreItem"
               :key="dataJson.type"