From 51bb2ad9c614d1e9d6184fe48aaa60b8a72e4d3b Mon Sep 17 00:00:00 2001 From: Qiuxia Fan Date: Thu, 24 Mar 2022 11:07:57 +0800 Subject: [PATCH] add routers --- src/assets/icons/donut_small.svg | 17 +++++++ src/locales/lang/en.ts | 4 +- src/locales/lang/zh.ts | 4 +- src/router/index.ts | 2 + src/router/infrastructure.ts | 8 ---- src/router/k8s.ts | 50 +++++++++++++++++++++ src/views/Layer.vue | 3 +- src/views/dashboard/graphs/EndpointList.vue | 4 +- src/views/dashboard/graphs/ServiceList.vue | 48 +++++++++++++------- 9 files changed, 110 insertions(+), 30 deletions(-) create mode 100644 src/assets/icons/donut_small.svg create mode 100644 src/router/k8s.ts diff --git a/src/assets/icons/donut_small.svg b/src/assets/icons/donut_small.svg new file mode 100644 index 00000000..1c4cad71 --- /dev/null +++ b/src/assets/icons/donut_small.svg @@ -0,0 +1,17 @@ + + + + diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts index 26dc9d19..18fefeff 100644 --- a/src/locales/lang/en.ts +++ b/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", diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts index f8702996..35b0c601 100644 --- a/src/locales/lang/zh.ts +++ b/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: "选择秒数", diff --git a/src/router/index.ts b/src/router/index.ts index 2102c00e..da15693d 100644 --- a/src/router/index.ts +++ b/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 = [ ...routesGen, ...routesMesh, ...routesFunctions, + ...routesK8s, ...routesInfra, ...routesBrowser, ...routesDatabase, diff --git a/src/router/infrastructure.ts b/src/router/infrastructure.ts index 8a2783c7..c3c11dfe 100644 --- a/src/router/infrastructure.ts +++ b/src/router/infrastructure.ts @@ -38,14 +38,6 @@ export const routesInfra: Array = [ }, component: () => import("@/views/Layer.vue"), }, - { - path: "/kubernetes", - name: "Kubernetes", - meta: { - title: "kubernetes", - }, - component: () => import("@/views/Layer.vue"), - }, // { // path: "/infrastructure/vm", // name: "VirtualMachine", diff --git a/src/router/k8s.ts b/src/router/k8s.ts new file mode 100644 index 00000000..1e7bf0b8 --- /dev/null +++ b/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 = [ + { + 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"), + }, + ], + }, +]; diff --git a/src/views/Layer.vue b/src/views/Layer.vue index 16ef43f3..5e7954c0 100644 --- a/src/views/Layer.vue +++ b/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("GENERAL"); diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue index 21a4173b..aa4b717e 100644 --- a/src/views/dashboard/graphs/EndpointList.vue +++ b/src/views/dashboard/graphs/EndpointList.vue @@ -116,7 +116,6 @@ const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const chartLoading = ref(false); const endpoints = ref([]); -const searchEndpoints = ref([]); const pageSize = 5; const total = 10; const searchText = ref(""); @@ -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) ); diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue index 5f531224..0f40ec22 100644 --- a/src/views/dashboard/graphs/ServiceList.vue +++ b/src/views/dashboard/graphs/ServiceList.vue @@ -128,9 +128,9 @@ const dashboardStore = useDashboardStore(); const chartLoading = ref(false); const pageSize = 5; const services = ref([]); -const searchServices = ref([]); const searchText = ref(""); const groups = ref({}); +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],