diff --git a/src/graphql/query/topology.ts b/src/graphql/query/topology.ts index d488480d..98e078ea 100644 --- a/src/graphql/query/topology.ts +++ b/src/graphql/query/topology.ts @@ -19,9 +19,11 @@ import { EndpointTopology, ServiceTopology, GlobalTopology, + ServicesTopology, } from "../fragments/topology"; export const getGlobalTopology = `query queryData(${GlobalTopology.variable}) {${GlobalTopology.query}}`; export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`; export const getServiceTopology = `query queryData(${ServiceTopology.variable}) {${ServiceTopology.query}}`; export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`; +export const getServicesTopology = `query queryData(${ServicesTopology.variable}) {${ServicesTopology.query}}`; diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index f60b4ec5..7ae735bf 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -16,6 +16,7 @@ */ import { defineStore } from "pinia"; import { store } from "@/store"; +import { Service } from "@/types/selector"; import { Node, Call } from "@/types/topology"; import graphql from "@/graphql"; import { useSelectorStore } from "@/store/modules/selectors"; @@ -23,14 +24,17 @@ import { useAppStoreWithOut } from "@/store/modules/app"; import { AxiosResponse } from "axios"; import query from "@/graphql/fetch"; +interface MetricVal { + [key: string]: { values: { id: string; value: unknown }[] }; +} interface TopologyState { node: Node | null; call: Call | null; calls: Call[]; nodes: Node[]; - nodeMetrics: { id: string; value: unknown }[]; - linkServerMetrics: { id: string; value: unknown }[]; - linkClientMetrics: { id: string; value: unknown }[]; + nodeMetrics: MetricVal; + linkServerMetrics: MetricVal; + linkClientMetrics: MetricVal; } export const topologyStore = defineStore({ @@ -40,9 +44,9 @@ export const topologyStore = defineStore({ nodes: [], node: null, call: null, - nodeMetrics: [], - linkServerMetrics: [], - linkClientMetrics: [], + nodeMetrics: {}, + linkServerMetrics: {}, + linkClientMetrics: {}, }), actions: { setNode(node: Node) { @@ -55,6 +59,15 @@ export const topologyStore = defineStore({ this.nodes = data.nodes; this.calls = data.calls; }, + setNodeMetrics(m: { id: string; value: unknown }[]) { + this.nodeMetrics = m; + }, + setLinkServerMetrics(m: { id: string; value: unknown }[]) { + this.linkServerMetrics = m; + }, + setLinkClientMetrics(m: { id: string; value: unknown }[]) { + this.linkClientMetrics = m; + }, async getServiceTopology() { const serviceId = useSelectorStore().currentService.id; const duration = useAppStoreWithOut().durationTime; @@ -69,6 +82,20 @@ export const topologyStore = defineStore({ } return res.data; }, + async getServicesTopology() { + const serviceIds = useSelectorStore().services.map((d: Service) => d.id); + const duration = useAppStoreWithOut().durationTime; + const res: AxiosResponse = await graphql + .query("getServicesTopology") + .params({ + serviceIds, + duration, + }); + if (!res.data.errors) { + this.setTopology(res.data.data.topology); + } + return res.data; + }, async getGlobalTopology() { const duration = useAppStoreWithOut().durationTime; const res: AxiosResponse = await graphql @@ -120,7 +147,7 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } - this.nodeMetrics = res.data.data; + this.setNodeMetrics(res.data.data); return res.data; }, async getCallServerMetrics(param: { @@ -132,7 +159,7 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } - this.linkServerMetrics = res.data.data; + this.setLinkServerMetrics(res.data.data); return res.data; }, async getCallClientMetrics(param: { @@ -144,7 +171,7 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } - this.linkClientMetrics = res.data.data; + this.setLinkClientMetrics(res.data.data); return res.data; }, }, diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index bb6d6295..6d3bfb42 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -93,6 +93,10 @@ export default defineComponent({ const dashboardStore = useDashboardStore(); const selectorStore = useSelectorStore(); + if (dashboardStore.entity === EntityType[1].value) { + queryMetrics(); + } + async function queryMetrics() { const params = await useQueryProcessor(props.data); diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index bccd52af..3f24cfa9 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -179,14 +179,14 @@ async function getServices() { if (!dashboardStore.layerId) { return; } - if (dashboardStore.entity === EntityType[1].value) { - return; - } const json = await selectorStore.fetchServices(dashboardStore.layerId); if (json.errors) { ElMessage.error(json.errors); return; } + if (dashboardStore.entity === EntityType[1].value) { + return; + } selectorStore.setCurrentService( selectorStore.services.length ? selectorStore.services[0] : null ); diff --git a/src/views/dashboard/related/topology/Graph.vue b/src/views/dashboard/related/topology/Graph.vue index 6245310a..a39476e8 100644 --- a/src/views/dashboard/related/topology/Graph.vue +++ b/src/views/dashboard/related/topology/Graph.vue @@ -80,12 +80,7 @@ const legend = ref(null); const showSetting = ref(false); const settings = ref({}); const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN }); -const items = [ - { title: "Endpoint", func: handleGoEndpoint }, - { title: "Instance", func: handleGoInstance }, - { title: "Dashboard", func: handleGoDashboard }, - { title: "Alarm", func: handleGoAlarm }, -]; +const items = ref([{ id: "alarm", title: "Alarm", func: handleGoAlarm }]); onMounted(async () => { loading.value = true; @@ -177,7 +172,11 @@ function handleLinkClick(event: any, d: Call) { event.stopPropagation(); topologyStore.setNode(null); topologyStore.setLink(d); - const path = `/dashboard/${dashboardStore.layerId}/${dashboardStore.entity}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`; + const e = + dashboardStore.entity === EntityType[1].value + ? EntityType[0].value + : dashboardStore.entity; + const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${d.source.id}/${d.target.id}/${settings.value.linkDashboard}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); } @@ -228,8 +227,10 @@ function update() { { handleLinkClick: handleLinkClick, tipHtml: (data: Call) => { - const linkClientMetrics: string[] = settings.value.linkClientMetrics; - const linkServerMetrics: string[] = settings.value.linkServerMetrics; + const linkClientMetrics: string[] = + settings.value.linkClientMetrics || []; + const linkServerMetrics: string[] = + settings.value.linkServerMetrics || []; const htmlServer = linkServerMetrics.map((m) => { const metric = topologyStore.linkServerMetrics[m].values.filter( (val: { id: string; value: unknown }) => val.id === data.id @@ -315,7 +316,7 @@ async function getTopology() { resp = await topologyStore.getServiceTopology(); break; case EntityType[1].value: - resp = await topologyStore.getGlobalTopology(); + resp = await topologyStore.getServicesTopology(); break; case EntityType[2].value: resp = await topologyStore.getEndpointTopology(); @@ -335,7 +336,29 @@ function resize() { svg.value.attr("height", height.value).attr("width", width.value); } function updateSettings(config: any) { + items.value = [{ id: "alarm", title: "Alarm", func: handleGoAlarm }]; settings.value = config; + if (config.nodeDashboard) { + items.value.push({ + id: "dashboard", + title: "Dashboard", + func: handleGoDashboard, + }); + } + if (config.instanceDashboard) { + items.value.push({ + id: "instance", + title: "Instance", + func: handleGoInstance, + }); + } + if (config.endpointDashboard) { + items.value.push({ + id: "endpoint", + title: "Endpoint", + func: handleGoEndpoint, + }); + } } onBeforeUnmount(() => { window.removeEventListener("resize", resize); diff --git a/src/views/dashboard/related/topology/Settings.vue b/src/views/dashboard/related/topology/Settings.vue index bdadec3f..c90eb084 100644 --- a/src/views/dashboard/related/topology/Settings.vue +++ b/src/views/dashboard/related/topology/Settings.vue @@ -36,6 +36,7 @@ limitations under the License. -->
{{ t("linkClientMetrics") }}
dashboardStore.entity === (MetricCatalog as any)[d.catalog] ); + const e = + dashboardStore.entity === EntityType[1].value + ? EntityType[0].value + : dashboardStore.entity; states.linkMetricList = (json.data.metrics || []).filter( (d: { catalog: string }) => - dashboardStore.entity + "Relation" === (MetricCatalog as any)[d.catalog] + e + "Relation" === (MetricCatalog as any)[d.catalog] ); } function updateSettings() { @@ -150,6 +156,10 @@ function updateSettings() { async function changeLinkServerMetrics(options: Option[]) { states.linkServerMetrics = options.map((d: Option) => d.value); updateSettings(); + if (!states.linkServerMetrics.length) { + topologyStore.setLinkServerMetrics({}); + return; + } const idsS = topologyStore.calls .filter((i: Call) => i.detectPoints.includes("SERVER")) .map((b: Call) => b.id); @@ -163,6 +173,10 @@ async function changeLinkServerMetrics(options: Option[]) { async function changeLinkClientMetrics(options: Option[]) { states.linkClientMetrics = options.map((d: Option) => d.value); updateSettings(); + if (!states.linkClientMetrics.length) { + topologyStore.setLinkClientMetrics({}); + return; + } const idsC = topologyStore.calls .filter((i: Call) => i.detectPoints.includes("CLIENT")) .map((b: Call) => b.id); @@ -176,7 +190,10 @@ async function changeLinkClientMetrics(options: Option[]) { async function changeNodeMetrics(options: Option[]) { states.nodeMetrics = options.map((d: Option) => d.value); updateSettings(); - + if (!states.nodeMetrics.length) { + topologyStore.setNodeMetrics({}); + return; + } const ids = topologyStore.nodes.map((d: Node) => d.id); const param = await useQueryTopologyMetrics(states.nodeMetrics, ids); const res = await topologyStore.getNodeMetrics(param);