add group for service list

src/locales/lang/en.ts

@@ -109,6 +109,7 @@ const msg = {
   showXAxis: "Show X Axis",
   showYAxis: "Show Y Axis",
   nameError: "The dashboard name cannot be duplicate",
+  showGroup: "Show Group",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -109,6 +109,7 @@ const msg = {
   showXAxis: "显示X轴",
   showYAxis: "显示Y轴",
   nameError: "仪表板名称不能重复",
+  showGroup: "显示分组",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/types/dashboard.ts

@@ -107,6 +107,7 @@ export interface ServiceListConfig {
   type?: string;
   dashboardName: string;
   fontSize: number;
+  showGroup: boolean;
 }
 
 export interface InstanceListConfig {

src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue

@@ -13,6 +13,15 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
+  <div>
+    <span class="label">{{ t("showGroup") }}</span>
+    <el-switch
+      v-model="selectedGrid.graph.showGroup"
+      active-text="Yes"
+      inactive-text="No"
+      @change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
+    />
+  </div>
   <div>
     <span class="label">{{ t("fontSize") }}</span>
     <el-slider
@@ -38,6 +47,7 @@ const { selectedGrid } = dashboardStore;
 const fontSize = ref(selectedGrid.graph.fontSize);
 
 function updateConfig(param: { [key: string]: unknown }) {
+  const { selectedGrid } = dashboardStore;
   const graph = {
     ...selectedGrid.graph,
     ...param,

src/views/dashboard/data.ts

@@ -96,6 +96,7 @@ export const DefaultGraphConfig: { [key: string]: any } = {
     fontSize: 12,
     showXAxis: false,
     showYAxis: false,
+    showGroup: true,
   },
   HeatMap: {
     type: "HeatMap",

src/views/dashboard/graphs/ServiceList.vue

@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="table">
+  <div class="list">
     <div class="search">
       <el-input
         v-model="searchText"
@@ -29,41 +29,55 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table v-loading="chartLoading" :data="services" style="width: 100%">
-      <el-table-column label="Services">
-        <template #default="scope">
-          <router-link
-            class="link"
-            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${scope.row.id}/${config.dashboardName}`"
-            :key="1"
-            :style="{ fontSize: `${config.fontSize}px` }"
-          >
-            {{ scope.row.label }}
-          </router-link>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-for="(metric, index) in config.metrics"
-        :label="metric"
-        :key="metric + index"
+    <div class="table">
+      <el-table
+        v-loading="chartLoading"
+        :data="services"
+        style="width: 100%"
+        :span-method="objectSpanMethod"
+        :border="true"
+        :style="{ fontSize: '14px' }"
       >
-        <template #default="scope">
-          <div class="chart">
-            <Line
-              v-if="config.metricTypes[index] === 'readMetricsValues'"
-              :data="{ [metric]: scope.row[metric] }"
-              :intervalTime="intervalTime"
-              :config="{ showXAxis: false, showYAxis: false }"
-            />
-            <Card
-              v-else
-              :data="{ [metric]: scope.row[metric] }"
-              :config="{ textAlign: 'left' }"
-            />
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column label="Service Groups" v-if="config.showGroup">
+          <template #default="scope">
+            {{ scope.row.group }}
+          </template>
+        </el-table-column>
+        <el-table-column label="Service Names">
+          <template #default="scope">
+            <router-link
+              class="link"
+              :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${scope.row.id}/${config.dashboardName}`"
+              :key="1"
+              :style="{ fontSize: `${config.fontSize}px` }"
+            >
+              {{ scope.row.label }}
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="(metric, index) in config.metrics"
+          :label="metric"
+          :key="metric + index"
+        >
+          <template #default="scope">
+            <div class="chart">
+              <Line
+                v-if="config.metricTypes[index] === 'readMetricsValues'"
+                :data="{ [metric]: scope.row[metric] }"
+                :intervalTime="intervalTime"
+                :config="{ showXAxis: false, showYAxis: false }"
+              />
+              <Card
+                v-else
+                :data="{ [metric]: scope.row[metric] }"
+                :config="{ textAlign: 'left' }"
+              />
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <el-pagination
       class="pagination"
       background
@@ -114,6 +128,7 @@ const pageSize = 5;
 const services = ref<Service[]>([]);
 const searchServices = ref<Service[]>([]);
 const searchText = ref<string>("");
+const groups = ref<any>({});
 
 queryServices();
 
@@ -125,7 +140,32 @@ async function queryServices() {
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
-  services.value = selectorStore.services.splice(0, pageSize);
+  const map: { [key: string]: any[] } = selectorStore.services.reduce(
+    (result: { [key: string]: any[] }, item: any) => {
+      item.group = item.group || "";
+      if (result[item.group]) {
+        item.merge = true;
+      } else {
+        item.merge = false;
+        result[item.group] = [];
+      }
+      result[item.group].push(item);
+      return result;
+    },
+    {}
+  );
+  services.value = Object.values(map).flat(1).splice(0, pageSize);
+  const obj = {} as any;
+  for (const s of services.value) {
+    s.group = s.group || "";
+    if (!obj[s.group]) {
+      obj[s.group] = 1;
+    } else {
+      obj[s.group]++;
+    }
+    groups.value[s.group] = obj[s.group];
+  }
+
   queryServiceMetrics(services.value);
 }
 async function queryServiceMetrics(currentServices: Service[]) {
@@ -148,6 +188,22 @@ async function queryServiceMetrics(currentServices: Service[]) {
   }
   services.value = currentServices;
 }
+function objectSpanMethod(param: any): any {
+  if (!props.config.showGroup) {
+    return;
+  }
+  if (param.columnIndex !== 0) {
+    return;
+  }
+  if (param.row.merge) {
+    return {
+      rowspan: 0,
+      colspan: 0,
+    };
+  } else {
+    return { rowspan: groups.value[param.row.group], colspan: 1 };
+  }
+}
 function changePage(pageIndex: number) {
   services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
 }
@@ -176,4 +232,8 @@ watch(
 .inputs {
   width: 300px;
 }
+
+.table {
+  margin: 10px 0;
+}
 </style>