fix : cortex,loki 页面增加 compactor 接口

nezha-fronted/src/assets/css/components/common/table/settings/cortexDetailTable.scss

@@ -45,6 +45,11 @@
                     display: none;
                 }
             }
+            .ring-table{
+                .el-table__body-wrapper{
+                    border-left: 1px solid $--border-color-light;
+                }
+            }
         }
 
         .cortex-service,

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

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

@@ -15,6 +15,7 @@
           <loki-status-table
           v-my-loading="tools.loading"
           :loading="tools.loading"
+          :ringTableData='ringTableData'
           :configTableData='configTableData'
           :servicesTableData='servicesTableData'
           @configval='configval'>
@@ -50,6 +51,7 @@ export default {
       async handler (n) {
         await this.getReadyTableData()
         await this.getConfigTableData()
+        await this.getCompactorTableData()
         this.getservicesTableData()
       }
     }
@@ -60,6 +62,7 @@ export default {
       configMode: 'defaults',
       configTableData: [],
       servicesTableData: [],
+      ringTableData: [],
       readyTableData: ''
     }
   },
@@ -76,6 +79,12 @@ export default {
         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) {

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

@@ -76,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>

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

@@ -51,6 +51,39 @@
             </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">
@@ -87,7 +120,8 @@ export default {
     loading: Boolean,
     configMode: String,
     configTableData: Array,
-    servicesTableData: Array
+    servicesTableData: Array,
+    ringTableData: Array
   },
   mixins: [table],
   components: {},
@@ -207,6 +241,22 @@ export default {
   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')