fix: Instance Relation and Endpoint Relation dashboards show up (#209)

src/components/Graph.vue

@@ -96,6 +96,10 @@ limitations under the License. -->
       }
       instance.on("click", (params: EventParams) => {
         currentParams.value = params;
+        if (props.option.series.type === "sankey") {
+          emits("select", currentParams.value);
+          return;
+        }
         if (!menus.value || !chartRef.value) {
           return;
         }
@@ -113,6 +117,9 @@ limitations under the License. -->
           menus.value.style.top = params.event.offsetY + 2 + "px";
         }
       });
+      if (props.option.series.type === "sankey") {
+        return;
+      }
       document.addEventListener(
         "click",
         () => {

src/store/modules/topology.ts

@@ -191,9 +191,13 @@ export const topologyStore = defineStore({
       return res.data.data.topology;
     },
     async getInstanceTopology() {
-      const serverServiceId = useSelectorStore().currentService.id;
-      const clientServiceId = useSelectorStore().currentDestService.id;
+      const { currentService, currentDestService } = useSelectorStore();
+      const serverServiceId = (currentService && currentService.id) || "";
+      const clientServiceId = (currentDestService && currentDestService.id) || "";
       const duration = useAppStoreWithOut().durationTime;
+      if (!(serverServiceId && clientServiceId)) {
+        return;
+      }
       const res: AxiosResponse = await graphql.query("getInstanceTopology").params({
         clientServiceId,
         serverServiceId,

src/types/components.d.ts

@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -105,7 +105,7 @@ limitations under the License. -->
     window.addEventListener("resize", resize);
   });
 
-  async function loadTopology(id: string) {
+  async function loadTopology(id?: string) {
     loading.value = true;
     const resp = await getTopology(id);
     loading.value = false;
@@ -212,7 +212,7 @@ limitations under the License. -->
     loadTopology(selectorStore.currentPod.id);
   }
 
-  async function getTopology(id: string) {
+  async function getTopology(id?: string) {
     let resp;
     switch (dashboardStore.entity) {
       case EntityType[2].value:
@@ -242,6 +242,17 @@ limitations under the License. -->
       topologyStore.setLink(null);
     },
   );
+  watch(
+    () => [selectorStore.currentService, selectorStore.currentDestService],
+    () => {
+      if (dashboardStore.entity !== EntityType[4].value) {
+        return;
+      }
+      loadTopology();
+      topologyStore.setNode(null);
+      topologyStore.setLink(null);
+    },
+  );
   watch(
     () => appStore.durationTime,
     () => {