From d67c8ae90cd7b6d3d5cc166bdff8e7b46ef3b33e Mon Sep 17 00:00:00 2001
From: Mengling Ding <mengling.ding@seagate.com>
Date: Mon, 2 Dec 2024 17:36:14 -0600
Subject: [PATCH] feat: add ipaddress to the existed devices in dashboard

---
 .../Dashboard/initial-control-elements.ts     | 30 +++++++++----------
 .../Dashboard/initial-data-elements.ts        | 14 ++++-----
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/webui/src/components/Dashboard/initial-control-elements.ts b/webui/src/components/Dashboard/initial-control-elements.ts
index 5ba362a..a217576 100644
--- 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
index 924b8bb..dfb70b4 100644
--- 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",