fix: query metrics

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"];

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;

src/styles/lib.scss

@@ -143,4 +143,9 @@
 .dark-dialog {
   background-color: #333840;
   color: #ddd;
+
+  .el-loading-mask {
+    background-color: #333840;
+    color: #ddd;
+  }
 }

src/views/dashboard/controls/Widget.vue

@@ -147,20 +147,12 @@ export default defineComponent({
       }
     );
     watch(
-      () => [selectorStore.currentPod],
+      () => [selectorStore.currentPod, selectorStore.currentDestPod],
-      () => {
-        if (dashboardStore.entity === EntityType[0].value) {
-          return;
-        }
-        queryMetrics();
-      }
-    );
-    watch(
-      () => [selectorStore.currentDestPod],
       () => {
         if (dashboardStore.entity === EntityType[0].value) {
           return;
         }
+        console.log("enter");
         queryMetrics();
       }
     );

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));
+    setSourceSelector();
-    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;
-    }
     if (
       [EntityType[2].value, EntityType[3].value].includes(String(params.entity))
     ) {
       return;
     }
-    await fetchPods(
+    setDestSelector();
-      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;
-    }
     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);
+  if (
-  fetchPods(dashboardStore.entity, selectorStore.currentDestService.id, true);
+    [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[]) {

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) {
 <style lang="scss" scoped>
 .sankey {
   margin-top: 10px;
+  background-color: #333840;
+  color: #ddd;
 }
 
 .settings {
@@ -248,7 +255,7 @@ async function getTopology(id: string) {
   span {
     display: block;
     height: 30px;
-    width: 100px;
+    width: 140px;
     line-height: 30px;
     text-align: center;
   }