diff --git a/src/hooks/useProcessor.ts b/src/hooks/useProcessor.ts index 76471160..85030381 100644 --- a/src/hooks/useProcessor.ts +++ b/src/hooks/useProcessor.ts @@ -41,6 +41,9 @@ export function useQueryProcessor(config: any) { "ServiceInstanceRelation", "EndpointRelation", ].includes(dashboardStore.entity); + if (isRelation && !selectorStore.currentDestService) { + return; + } const fragment = config.metrics.map((name: string, index: number) => { const metricType = config.metricTypes[index] || ""; const labels = ["0", "1", "2", "3", "4"]; diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index f86cc771..2ea85b92 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -129,7 +129,6 @@ export const topologyStore = defineStore({ }, setLinkServerMetrics(m: { id: string; value: unknown }[]) { this.linkServerMetrics = m; - console.log(m); }, setLinkClientMetrics(m: { id: string; value: unknown }[]) { this.linkClientMetrics = m; diff --git a/src/styles/lib.scss b/src/styles/lib.scss index 324a63d0..7a74e835 100644 --- a/src/styles/lib.scss +++ b/src/styles/lib.scss @@ -143,4 +143,9 @@ .dark-dialog { background-color: #333840; color: #ddd; + + .el-loading-mask { + background-color: #333840; + color: #ddd; + } } diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue index 9f1977c9..603bf0e4 100644 --- a/src/views/dashboard/controls/Widget.vue +++ b/src/views/dashboard/controls/Widget.vue @@ -147,20 +147,12 @@ export default defineComponent({ } ); watch( - () => [selectorStore.currentPod], - () => { - if (dashboardStore.entity === EntityType[0].value) { - return; - } - queryMetrics(); - } - ); - watch( - () => [selectorStore.currentDestPod], + () => [selectorStore.currentPod, selectorStore.currentDestPod], () => { if (dashboardStore.entity === EntityType[0].value) { return; } + console.log("enter"); queryMetrics(); } ); diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue index 7f80129b..3ae75c2d 100644 --- a/src/views/dashboard/panel/Tool.vue +++ b/src/views/dashboard/panel/Tool.vue @@ -149,46 +149,13 @@ async function setSelector() { EntityType[6].value, ].includes(String(params.entity)) ) { - await selectorStore.getService(String(params.serviceId)); - states.currentService = selectorStore.currentService.value; - const e = String(params.entity).split("Relation")[0]; - await fetchPods(e, selectorStore.currentService.id, false); - if (!(selectorStore.pods.length && selectorStore.pods[0])) { - selectorStore.setCurrentPod(null); - states.currentPod = ""; - return; - } - const pod = params.podId || selectorStore.pods[0].id; - const currentPod = selectorStore.pods.filter( - (d: { id: string }) => d.id === pod - )[0]; - if (currentPod) { - selectorStore.setCurrentPod(currentPod); - states.currentPod = currentPod.label; - } + setSourceSelector(); if ( [EntityType[2].value, EntityType[3].value].includes(String(params.entity)) ) { return; } - await fetchPods( - String(params.entity), - selectorStore.currentDestService.id, - false - ); - if (!(selectorStore.destPods.length && selectorStore.destPods[0])) { - selectorStore.setCurrentDestPod(null); - states.currentDestPod = ""; - return; - } - const destPod = params.destPodId || selectorStore.destPods[0].id; - const currentDestPod = selectorStore.destPods.filter( - (d: { id: string }) => d.id === destPod - )[0]; - if (currentDestPod) { - selectorStore.setCurrentDestPod(currentDestPod); - states.currentDestPod = currentDestPod.label; - } + setDestSelector(); return; } // entity=Service/ServiceRelation @@ -212,6 +179,49 @@ async function setSelector() { states.currentDestService = selectorStore.currentDestService.value; } +async function setSourceSelector() { + await selectorStore.getService(String(params.serviceId)); + states.currentService = selectorStore.currentService.value; + const e = String(params.entity).split("Relation")[0]; + await fetchPods(e, selectorStore.currentService.id, false); + if (!(selectorStore.pods.length && selectorStore.pods[0])) { + selectorStore.setCurrentPod(null); + states.currentPod = ""; + return; + } + const pod = params.podId || selectorStore.pods[0].id; + const currentPod = selectorStore.pods.filter( + (d: { id: string }) => d.id === pod + )[0]; + if (currentPod) { + selectorStore.setCurrentPod(currentPod); + states.currentPod = currentPod.label; + } +} + +async function setDestSelector() { + await selectorStore.getService(String(params.destServiceId), true); + states.currentDestService = selectorStore.currentDestService.value; + await fetchPods( + String(params.entity), + selectorStore.currentDestService.id, + false + ); + if (!(selectorStore.destPods.length && selectorStore.destPods[0])) { + selectorStore.setCurrentDestPod(null); + states.currentDestPod = ""; + return; + } + const destPod = params.destPodId || selectorStore.destPods[0].id; + const currentDestPod = selectorStore.destPods.filter( + (d: { id: string }) => d.id === destPod + )[0]; + if (currentDestPod) { + selectorStore.setCurrentDestPod(currentDestPod); + states.currentDestPod = currentDestPod.label; + } +} + async function getServices() { if (!dashboardStore.layerId) { return; @@ -233,8 +243,16 @@ async function getServices() { states.currentService = selectorStore.currentService.value; states.currentDestService = selectorStore.currentDestService.value; const e = dashboardStore.entity.split("Relation")[0]; - fetchPods(e, selectorStore.currentService.id, true); - fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true); + if ( + [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity) + ) { + fetchPods(e, selectorStore.currentService.id, true); + } + if ( + [EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity) + ) { + fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true); + } } async function changeService(service: Service[]) { diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 7637d51b..56842489 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -100,7 +100,7 @@ const items = [ ]; onMounted(async () => { - loadTopology(selectorStore.currentPod.id); + loadTopology(selectorStore.currentPod && selectorStore.currentPod.id); }); async function loadTopology(id: string) { @@ -127,7 +127,11 @@ function goAlarm() { topologyStore.setNode(null); } function goDashboard() { - const path = `/dashboard/${dashboardStore.layerId}/${dashboardStore.entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${settings.value.nodeDashboard}`; + const entity = + dashboardStore.entity === EntityType[2].value + ? EntityType[2].value + : EntityType[3].value; + const path = `/dashboard/${dashboardStore.layerId}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${settings.value.nodeDashboard}`; const routeUrl = router.resolve({ path }); window.open(routeUrl.href, "_blank"); topologyStore.setNode(null); @@ -149,6 +153,7 @@ function backToTopology() { function selectNodeLink(d: any) { if (d.dataType === "edge") { + console.log(d.data); topologyStore.setNode(null); topologyStore.setLink(d.data); if (!settings.value.linkDashboard) { @@ -194,6 +199,8 @@ async function getTopology(id: string) {