From 3c282d021bf705c7a5e0a9957fe3cd409638dfca Mon Sep 17 00:00:00 2001 From: Fine Date: Tue, 30 Jan 2024 14:51:13 +0800 Subject: [PATCH] feat: add node layers --- src/graphql/fragments/topology.ts | 1 + src/store/modules/topology.ts | 3 +- src/types/topology.d.ts | 1 + .../related/topology/service/ServiceMap.vue | 68 +++++++++++++++---- 4 files changed, 58 insertions(+), 15 deletions(-) diff --git a/src/graphql/fragments/topology.ts b/src/graphql/fragments/topology.ts index 327c1408..bdbf9158 100644 --- a/src/graphql/fragments/topology.ts +++ b/src/graphql/fragments/topology.ts @@ -23,6 +23,7 @@ export const ServicesTopology = { name type isReal + layers } calls { id diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index b14e09fd..400aa959 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -16,7 +16,6 @@ */ import { defineStore } from "pinia"; import { store } from "@/store"; -import type { Service } from "@/types/selector"; import type { Node, Call, HierarchyNode, ServiceHierarchy, InstanceHierarchy } from "@/types/topology"; import graphql from "@/graphql"; import { useSelectorStore } from "@/store/modules/selectors"; @@ -92,7 +91,7 @@ export const topologyStore = defineStore({ const nodes = (data.nodes || []).reduce((prev: Node[], next: Node) => { if (!obj[next.id]) { obj[next.id] = true; - const s = services.filter((d: Service) => d.id === next.id)[0] || {}; + const s = services.filter((d: any) => d.id === next.id)[0] || {}; next.layer = s.layers ? s.layers[0] : null; prev.push(next); } diff --git a/src/types/topology.d.ts b/src/types/topology.d.ts index d2e4c4e3..868f912a 100644 --- a/src/types/topology.d.ts +++ b/src/types/topology.d.ts @@ -44,6 +44,7 @@ export interface Node { type: string; isReal: boolean; layer?: string; + layers: string[]; serviceName?: string; height?: number; width?: number; diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue index b4eb5f83..ed3c6a57 100644 --- a/src/views/dashboard/related/topology/service/ServiceMap.vue +++ b/src/views/dashboard/related/topology/service/ServiceMap.vue @@ -124,7 +124,7 @@ limitations under the License. --> left: operationsPos.x + 5 + 'px', }" > - + {{ item.title }} @@ -160,6 +160,7 @@ limitations under the License. --> import { layout, computeLevels, changeNode } from "../components/utils/layout"; import zoom from "@/views/dashboard/related/components/utils/zoom"; import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor"; + import { ConfigFieldTypes } from "@/views/dashboard/data"; /*global Nullable, defineProps */ const props = defineProps({ config: { @@ -414,11 +415,7 @@ limitations under the License. --> setNodeTools(settings.value.nodeDashboard); return; } - items.value = [ - { id: "hierarchyServices", title: "Hierarchy Services", func: handleHierarchyRelatedServices }, - { id: "inspect", title: "Inspect", func: handleInspect }, - { id: "alerting", title: "Alerting", func: handleGoAlerting }, - ]; + initNodeMenus(); } function handleLinkClick(event: MouseEvent, d: Call) { event.stopPropagation(); @@ -462,25 +459,34 @@ limitations under the License. --> topologyStore.setNode(null); topologyStore.setLink(null); } - function handleGoEndpoint(name: string) { + function handleGoEndpoint(params: { dashboard: string }) { + if (!params.dashboard) { + return; + } const origin = dashboardStore.entity; - const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`; + const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${params.dashboard}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); dashboardStore.setEntity(origin); } - function handleGoInstance(name: string) { + function handleGoInstance(params: { dashboard: string }) { + if (!params.dashboard) { + return; + } const origin = dashboardStore.entity; - const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${name}`; + const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${params.dashboard}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); dashboardStore.setEntity(origin); } - function handleGoDashboard(name: string) { + function handleGoDashboard(params: { dashboard: string }) { + if (!params.dashboard) { + return; + } const origin = dashboardStore.entity; - const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`; + const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${params.dashboard}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); @@ -492,6 +498,28 @@ limitations under the License. --> window.open(routeUrl.href, "_blank"); } + function handleGoLayerDashboard(param: { id: string }) { + if (!(param.id && currentNode.value)) { + return; + } + const origin = dashboardStore.entity; + const { dashboard } = getDashboard( + { + layer: param.id, + entity: EntityType[0].value, + }, + ConfigFieldTypes.ISDEFAULT, + ); + if (!dashboard) { + return ElMessage.info("No Dashboard"); + } + + const path = `/dashboard/${param.id}/${EntityType[0].value}/${currentNode.value.id}/${dashboard.name}`; + const routeUrl = router.resolve({ path }); + + window.open(routeUrl.href, "_blank"); + dashboardStore.setEntity(origin); + } async function backToTopology() { loading.value = true; await freshNodes(); @@ -520,12 +548,26 @@ limitations under the License. --> settings.value = config; setNodeTools(config.nodeDashboard); } - function setNodeTools(nodeDashboard: any) { + function initNodeMenus() { items.value = [ { id: "hierarchyServices", title: "Hierarchy Services", func: handleHierarchyRelatedServices }, { id: "inspect", title: "Inspect", func: handleInspect }, { id: "alerting", title: "Alerting", func: handleGoAlerting }, ]; + if (!currentNode.value) { + return; + } + const diffLayers = currentNode.value.layers.filter((l: string) => l !== dashboardStore.layerId); + for (const l of diffLayers) { + items.value.push({ + id: l, + title: `${l} Dashboard`, + func: handleGoLayerDashboard, + }); + } + } + function setNodeTools(nodeDashboard: any) { + initNodeMenus(); if (!(nodeDashboard && nodeDashboard.length)) { return; }