feat: add ipaddress to the existed devices in dashboard

Seagate · Dec 2, 2024 · d67c8ae · d67c8ae
1 parent 073dc24
commit d67c8ae
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git a/webui/src/components/Dashboard/initial-control-elements.ts b/webui/src/components/Dashboard/initial-control-elements.ts
@@ -38,9 +38,9 @@ export const useControlData = () => {
           style: { backgroundColor: "#f2ae72", color: "#000" },
           type: applianceNodeType,
         },
-        ...appliance.bladeIds.map((bladeId, bladeIndex) => ({
-          id: `blade-${bladeId}`,
-          data: { label: bladeId, url: `/appliances/${appliance.id}/blades/${bladeId}`, associatedAppliance: appliance.id },
+        ...appliance.blades.map((blade, bladeIndex) => ({
+          id: `blade-${blade.id}`,
+          data: { label: blade.id, url: `/appliances/${appliance.id}/blades/${blade.id}`, associatedAppliance: appliance.id },
           position: position,
           style: { backgroundColor: "#f2e394", color: "#000" },
           type: bladeNodeType,
@@ -49,8 +49,8 @@ export const useControlData = () => {
     );
 
     const hostNodes = hostStore.hostIds.map((host, index) => ({
-      id: `host-${host}`,
-      data: { label: host, url: `/hosts/${host}` },
+      id: `host-${host.id}`,
+      data: { label: host.id, url: `/hosts/${host.id}` },
       position: position,
       style: { backgroundColor: "#d9ecd0", color: "#000" },
       type: hostNodeType,
@@ -67,18 +67,18 @@ export const useControlData = () => {
             source: "cfm-service",
             target: `appliance-${appliance.id}`,
           },
-          ...appliance.bladeIds.map((bladeId) => ({
-            id: `appliance-blade-${appliance.id}-${bladeId}`,
+          ...appliance.blades.map((blade) => ({
+            id: `appliance-blade-${appliance.id}-${blade.id}`,
             source: `appliance-${appliance.id}`,
-            target: `blade-${bladeId}`,
+            target: `blade-${blade.id}`,
           })),
         ])
         : [];
 
       const hostEdges = hostStore.hostIds.map((host) => ({
-        id: `cfm-${host}`,
+        id: `cfm-${host.id}`,
         source: "cfm-service",
-        target: `host-${host}`,
+        target: `host-${host.id}`,
       }));
 
       return [...coreEdges, ...hostEdges];
@@ -97,19 +97,19 @@ export const useControlData = () => {
           target: `appliance-${appliance.id}`,
           animated: true,
         },
-        ...appliance.bladeIds.map((bladeId) => ({
-          id: `appliance-blade-${appliance.id}-${bladeId}`,
+        ...appliance.blades.map((blade) => ({
+          id: `appliance-blade-${appliance.id}-${blade.id}`,
           source: `appliance-${appliance.id}`,
-          target: `blade-${bladeId}`,
+          target: `blade-${blade.id}`,
           animated: true,
         })),
       ])
       : [];
 
     const hostEdges = hostStore.hostIds.map((host) => ({
-      id: `cfm-${host}`,
+      id: `cfm-${host.id}`,
       source: "cfm-service",
-      target: `host-${host}`,
+      target: `host-${host.id}`,
       animated: true,
     }));
 

diff --git a/webui/src/components/Dashboard/initial-data-elements.ts b/webui/src/components/Dashboard/initial-data-elements.ts
@@ -18,7 +18,7 @@ export const useData = () => {
         let currentYPosition = 0;
         const applianceNodes = applianceStore.applianceIds.flatMap(
             (appliance, index) => {
-                const bladeCount = appliance.bladeIds.length;
+                const bladeCount = appliance.blades.length;
                 const applianceHeight = 50 + bladeCount * 50; // Adjust height based on number of blades
                 const applianceWidth = 270; // Width of the appliance node
                 const bladeWidth = 250; // Width of the blade node
@@ -34,9 +34,9 @@ export const useData = () => {
                     targetPosition: 'left',
                 };
 
-                const bladeNodes = appliance.bladeIds.map((bladeId, bladeIndex) => ({
-                    id: `blade-${bladeId}`,
-                    data: { label: bladeId, url: `/appliances/${appliance.id}/blades/${bladeId}`, associatedAppliance: appliance.id },
+                const bladeNodes = appliance.blades.map((blade, bladeIndex) => ({
+                    id: `blade-${blade.id}`,
+                    data: { label: blade.id, url: `/appliances/${appliance.id}/blades/${blade.id}`, associatedAppliance: appliance.id },
                     position: { x: bladeXPosition, y: 50 + bladeIndex * 50 }, // Center blades within the appliance node
                     style: { backgroundColor: "#f2e394", color: "#000", width: `${bladeWidth}px` },
                     type: bladeNodeType,
@@ -54,11 +54,11 @@ export const useData = () => {
         );
 
         const hostNodes = hostStore.hostIds.map((host, index) => {
-            const { width, height } = useLayout().measureText(host);
+            const { width, height } = useLayout().measureText(host.id);
 
             return {
-                id: `host-${host}`,
-                data: { label: host, url: `/hosts/${host}` },
+                id: `host-${host.id}`,
+                data: { label: host.id, url: `/hosts/${host.id}` },
                 position: { x: 500, y: index * 200 },
                 style: {
                     backgroundColor: "#d9ecd0",