update topology

src/views/dashboard/data.ts

@@ -204,11 +204,18 @@ export const ServiceRelationTools = [
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "save", content: "Apply", id: "apply" },
 ];
-export const PodRelationTools = [
+
+export const EndpointRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "save", content: "Apply", id: "apply" },
 ];
+export const InstanceRelationTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "save", content: "Apply", id: "apply" },
+];
 
 export const ScopeType = [
   { value: "Service", label: "Service", key: 1 },

src/views/dashboard/panel/Tool.vue

@@ -110,7 +110,8 @@ import {
   ServiceTools,
   InstanceTools,
   EndpointTools,
-  PodRelationTools,
+  EndpointRelationTools,
+  InstanceRelationTools,
   ServiceRelationTools,
 } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
@@ -124,8 +125,9 @@ const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
 const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
-const toolIcons =
-  ref<{ name: string; content: string; id: string }[]>(PodRelationTools);
+const toolIcons = ref<{ name: string; content: string; id: string }[]>(
+  EndpointRelationTools
+);
 const states = reactive<{
   destService: string;
   destPod: string;
@@ -446,8 +448,14 @@ function getTools() {
     case EntityType[4].value:
       toolIcons.value = ServiceRelationTools;
       break;
+    case EntityType[5].value:
+      toolIcons.value = InstanceRelationTools;
+      break;
+    case EntityType[6].value:
+      toolIcons.value = EndpointRelationTools;
+      break;
     default:
-      toolIcons.value = PodRelationTools;
+      toolIcons.value = EndpointRelationTools;
   }
 }
 </script>
@@ -501,6 +509,6 @@ function getTools() {
 }
 
 .selectorPod {
-  width: 340px;
+  width: 300px;
 }
 </style>

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

@@ -473,8 +473,12 @@ function setConfig() {
   dashboardStore.selectWidget(props.config);
 }
 function resize() {
-  height.value = document.body.clientHeight;
-  width.value = document.body.clientWidth;
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 40,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
   svg.value.attr("height", height.value).attr("width", width.value);
 }
 function updateSettings(config: any) {

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

@@ -234,6 +234,9 @@ async function getTopology(id: string) {
         Number(depth.value)
       );
       break;
+    case EntityType[5].value:
+      resp = await topologyStore.getInstanceTopology();
+      break;
     case EntityType[4].value:
       resp = await topologyStore.getInstanceTopology();
       break;