add routers

src/assets/icons/donut_small.svg

@@ -0,0 +1,17 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z"></path>
+</svg>

src/locales/lang/en.ts

@@ -23,7 +23,6 @@ const msg = {
   serviceMesh: "Service Mesh",
   infrastructure: "Infrastructure",
   virtualMachine: "Virtual Machine",
-  kubernetes: "Kubernetes",
   dashboardNew: "New Dashboard",
   dashboardList: "Dashboard List",
   logs: "Logs",
@@ -123,6 +122,9 @@ const msg = {
   viewWarning: "You are entering view mode",
   virtualDatabase: "Virtual Database",
   reloadDashboards: "Reload dashboards",
+  kubernetesService: "Kubernetes Service",
+  kubernetesCluster: "Kubernetes Cluster",
+  kubernetes: "Kubernetes",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",

src/locales/lang/zh.ts

@@ -22,7 +22,6 @@ const msg = {
   serviceMesh: "服务网格",
   infrastructure: "基础结构",
   virtualMachine: "虚拟机",
-  kubernetes: "Kubernetes",
   dashboardNew: "新建仪表板",
   dashboardHome: "仪表盘首页",
   dashboardList: "仪表盘列表",
@@ -123,6 +122,9 @@ const msg = {
   viewWarning: "你正在进入预览模式",
   virtualDatabase: "虚拟数据库",
   reloadDashboards: "重新加载仪表盘",
+  kubernetesService: "Kubernetes服务",
+  kubernetesCluster: "Kubernetes集群",
+  kubernetes: "Kubernetes",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

src/router/index.ts

@@ -26,11 +26,13 @@ import { routesAlarm } from "./alarm";
 import { routesSelf } from "./selfObservability";
 import { routesFunctions } from "./functions";
 import { routesBrowser } from "./browser";
+import { routesK8s } from "./k8s";
 
 const routes: Array<RouteRecordRaw> = [
   ...routesGen,
   ...routesMesh,
   ...routesFunctions,
+  ...routesK8s,
   ...routesInfra,
   ...routesBrowser,
   ...routesDatabase,

src/router/infrastructure.ts

@@ -38,14 +38,6 @@ export const routesInfra: Array<RouteRecordRaw> = [
         },
         component: () => import("@/views/Layer.vue"),
       },
-      {
-        path: "/kubernetes",
-        name: "Kubernetes",
-        meta: {
-          title: "kubernetes",
-        },
-        component: () => import("@/views/Layer.vue"),
-      },
       // {
       //   path: "/infrastructure/vm",
       //   name: "VirtualMachine",

src/router/k8s.ts

@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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.
+ */
+import { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesK8s: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Kubernetes",
+    meta: {
+      title: "kubernetes",
+      icon: "donut_small",
+      hasGroup: true,
+    },
+    redirect: "/kubernetes/cluster",
+    component: Layout,
+    children: [
+      {
+        path: "/kubernetes/cluster",
+        name: "KubernetesCluster",
+        meta: {
+          title: "kubernetesCluster",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+      {
+        path: "/kubernetes/service",
+        name: "KubernetesService",
+        meta: {
+          title: "kubernetesService",
+        },
+        component: () => import("@/views/Layer.vue"),
+      },
+    ],
+  },
+];

src/views/Layer.vue

@@ -43,7 +43,8 @@ const routesMap: { [key: string]: string } = {
   Satellite: "SO11Y_SATELLITE",
   Functions: "FAAS",
   Browser: "BROWSER",
-  Kubernetes: "K8S",
+  KubernetesCluster: "K8S",
+  KubernetesService: "K8S_SERVICE",
 };
 const layer = ref<string>("GENERAL");
 

src/views/dashboard/graphs/EndpointList.vue

@@ -116,7 +116,6 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const endpoints = ref<Endpoint[]>([]);
-const searchEndpoints = ref<Endpoint[]>([]);
 const pageSize = 5;
 const total = 10;
 const searchText = ref<string>("");
@@ -136,7 +135,6 @@ async function queryEndpoints(limit?: number) {
     ElMessage.error(resp.errors);
     return;
   }
-  searchEndpoints.value = selectorStore.pods;
   endpoints.value = selectorStore.pods.splice(0, pageSize);
   if (props.config.isEdit || !endpoints.value.length) {
     return;
@@ -178,7 +176,7 @@ function clickEndpoint(scope: any) {
   );
 }
 function changePage(pageIndex: number) {
-  endpoints.value = searchEndpoints.value.splice(
+  endpoints.value = selectorStore.pods.splice(
     (pageIndex - 1 || 0) * pageSize,
     pageSize * (pageIndex || 1)
   );

src/views/dashboard/graphs/ServiceList.vue

@@ -128,9 +128,9 @@ const dashboardStore = useDashboardStore();
 const chartLoading = ref<boolean>(false);
 const pageSize = 5;
 const services = ref<Service[]>([]);
-const searchServices = ref<Service[]>([]);
 const searchText = ref<string>("");
 const groups = ref<any>({});
+const sortServices = ref<(Service & { merge: boolean })[]>([]);
 
 queryServices();
 
@@ -142,7 +142,16 @@ async function queryServices() {
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
-  const map: { [key: string]: any[] } = selectorStore.services.reduce(
+  setServices(selectorStore.services);
+  if (props.config.isEdit) {
+    return;
+  }
+  queryServiceMetrics(services.value);
+}
+
+function setServices(arr: (Service & { merge: boolean })[]) {
+  groups.value = {};
+  const map: { [key: string]: any[] } = arr.reduce(
     (result: { [key: string]: any[] }, item: any) => {
       item.group = item.group || "";
       if (result[item.group]) {
@@ -156,21 +165,24 @@ async function queryServices() {
     },
     {}
   );
-  services.value = Object.values(map).flat(1).splice(0, pageSize);
+  sortServices.value = Object.values(map).flat(1);
   const obj = {} as any;
-  for (const s of services.value) {
+  for (const s of sortServices.value) {
     s.group = s.group || "";
     if (!obj[s.group]) {
       obj[s.group] = 1;
     } else {
+      if (obj[s.group] % 5 === 0) {
+        s.merge = false;
+      }
       obj[s.group]++;
     }
     groups.value[s.group] = obj[s.group];
   }
-  if (props.config.isEdit) {
-    return;
-  }
-  queryServiceMetrics(services.value);
+  services.value = sortServices.value.filter(
+    (d: Service, index: number) => index < pageSize
+  );
+  console.log(services.value);
 }
 
 function clickService(scope: any) {
@@ -219,21 +231,25 @@ function objectSpanMethod(param: any): any {
       rowspan: 0,
       colspan: 0,
     };
-  } else {
-    return { rowspan: groups.value[param.row.group], colspan: 1 };
   }
+  console.log(groups.value);
+  return { rowspan: 5, colspan: 1 };
 }
 function changePage(pageIndex: number) {
-  services.value = services.value.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
-  );
+  services.value = sortServices.value.filter((d: Service, index: number) => {
+    if (
+      index >= (pageIndex - 1 || 0) * pageSize &&
+      index < pageSize * (pageIndex || 1)
+    ) {
+      return d;
+    }
+  });
 }
 function searchList() {
-  searchServices.value = selectorStore.services.filter((d: { label: string }) =>
+  const searchServices = sortServices.value.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
   );
-  services.value = searchServices.value.splice(0, pageSize);
+  services.value = searchServices.splice(0, pageSize);
 }
 watch(
   () => [props.config.metricTypes, props.config.metrics],