From 26b14bd7d0ee195dc74f6b917e4b7cd40f112530 Mon Sep 17 00:00:00 2001 From: Mengling Ding Date: Fri, 4 Oct 2024 12:48:54 -0500 Subject: [PATCH 1/4] feat: display blade status in cfm-webui --- webui/src/components/Appliance/Appliances.vue | 66 +++++++++++++++++-- webui/src/components/Stores/BladeStore.ts | 4 +- 2 files changed, 63 insertions(+), 7 deletions(-) diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue index 6b0ddba..f13bb35 100644 --- a/webui/src/components/Appliance/Appliances.vue +++ b/webui/src/components/Appliance/Appliances.vue @@ -97,7 +97,8 @@ blade.ipAddress, blade.port, Number(blade.totalMemoryAvailableMiB), - Number(blade.totalMemoryAllocatedMiB) + Number(blade.totalMemoryAllocatedMiB), + blade.status ) " > @@ -168,6 +169,19 @@ service running on OpenBMC. + + Status + {{ + selectedBladeStatus + }} + + Appliance Id {{ selectedApplianceId }} + Blade Id {{ selectedBladeId }} + Ip Address {{ selectedBladeIp + ":" + selectedBladePort }} + @@ -1224,7 +1257,8 @@ export default { defaultBlade!.ipAddress, defaultBlade!.port, Number(defaultBlade!.totalMemoryAvailableMiB), - Number(defaultBlade!.totalMemoryAllocatedMiB) + Number(defaultBlade!.totalMemoryAllocatedMiB), + defaultBlade!.status ); } this.dialogAddBladeWait = false; @@ -1281,7 +1315,8 @@ export default { defaultBlade.ipAddress, defaultBlade.port, Number(defaultBlade.totalMemoryAvailableMiB), - Number(defaultBlade.totalMemoryAllocatedMiB) + Number(defaultBlade.totalMemoryAllocatedMiB), + defaultBlade.status ); } this.dialogDeleteBladeWait = false; @@ -1444,7 +1479,8 @@ export default { selectedBlade.ipAddress, selectedBlade.port, Number(selectedBlade.totalMemoryAvailableMiB), - Number(selectedBlade.totalMemoryAllocatedMiB) + Number(selectedBlade.totalMemoryAllocatedMiB), + selectedBlade.status ); // Update the URL with the first blade's ID updateUrlWithBladeId(newVal, selectedBlade.id); @@ -1496,6 +1532,19 @@ export default { const selectedBladeId = computed(() => bladeStore.selectedBladeId); const selectedBladeIp = computed(() => bladeStore.selectedBladeIp); const selectedBladePort = computed(() => bladeStore.selectedBladePortNum); + const selectedBladeStatus = computed(() => bladeStore.selectedBladeStatus); + + const statusColor = computed(() => { + return selectedBladeStatus.value === "online" + ? "#6ebe4a" + : "warning"; + }); + + const statusIcon = computed(() => { + return selectedBladeStatus.value === "online" + ? "mdi-check-circle" + : "mdi-close-circle"; + }); // Methods to update state const selectAppliance = (applianceId: string) => { @@ -1506,14 +1555,16 @@ export default { bladeIp: string, bladePort: number, bladeMemoryAvailable: number, - bladeMemoryAllocated: number + bladeMemoryAllocated: number, + bladeStatus: string ) => { bladeStore.selectBlade( bladeId, bladeIp, bladePort, bladeMemoryAvailable, - bladeMemoryAllocated + bladeMemoryAllocated, + bladeStatus ); }; @@ -1524,6 +1575,9 @@ export default { selectedBladeId, selectedBladePort, selectedBladeIp, + selectedBladeStatus, + statusColor, + statusIcon, selectAppliance, selectBlade, loading, diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts index b93761c..cd01240 100644 --- a/webui/src/components/Stores/BladeStore.ts +++ b/webui/src/components/Stores/BladeStore.ts @@ -14,6 +14,7 @@ export const useBladeStore = defineStore('blade', { selectedBladePortNum: null as unknown as number, selectedBladeTotalMemoryAvailableMiB: null as unknown as number | undefined, selectedBladeTotalMemoryAllocatedMiB: null as unknown as number | undefined, + selectedBladeStatus: null as unknown as string, addBladeError: null as unknown, deleteBladeError: null as unknown, resyncBladeError: null as unknown, @@ -145,12 +146,13 @@ export const useBladeStore = defineStore('blade', { }, - selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number) { + selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number, status: string) { this.selectedBladeId = bladeId; this.selectedBladeIp = selectedBladeIp; this.selectedBladePortNum = selectBladePortNum; this.selectedBladeTotalMemoryAvailableMiB = selectedBladeTotalMemoryAvailableMiB; this.selectedBladeTotalMemoryAllocatedMiB = selectedBladeTotalMemoryAllocatedMiB; + this.selectedBladeStatus = status; }, updateSelectedBladeMemory(availableMemory: number | undefined, allocatedMemory: number | undefined) { From 9ed9924b4696526be897bd293d4e9f35704a429f Mon Sep 17 00:00:00 2001 From: Mengling Ding Date: Fri, 4 Oct 2024 15:59:39 -0500 Subject: [PATCH 2/4] feat: display host status in cfm-webui --- webui/src/components/CXL-Hosts/CXL-Hosts.vue | 90 +++++++++++++++---- webui/src/components/CXL-Hosts/HostMemory.vue | 2 +- .../components/CXL-Hosts/HostMemoryDevice.vue | 2 +- webui/src/components/CXL-Hosts/HostPorts.vue | 2 +- webui/src/components/Stores/HostStore.ts | 4 +- 5 files changed, 77 insertions(+), 23 deletions(-) diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue index 59608a1..1fd1710 100644 --- a/webui/src/components/CXL-Hosts/CXL-Hosts.vue +++ b/webui/src/components/CXL-Hosts/CXL-Hosts.vue @@ -31,7 +31,13 @@ :key="host.id" :id="host.id" @click=" - selectHost(host.id, host.ipAddress, host.port, host.localMemoryMiB) + selectHost( + host.id, + host.ipAddress, + host.port, + host.localMemoryMiB, + host.status + ) " > @@ -69,13 +75,9 @@ - + - + Basic Information + + Status + {{ + selectedHostStatus + }} + + CXL-Host Id {{ host.id }} + IpAddress {{ host.ipAddress + ":" + host.port }} + LocalMemoryGiB @@ -121,13 +144,18 @@ : "N/A" }} + - + - + Ports Information - - + + - + Memory Devices - + - + Memory hostStore.selectedHostId); const selectedHostIp = computed(() => hostStore.selectedHostIp); const selectedHostPort = computed(() => hostStore.selectedHostPortNum); + const selectedHostStatus = computed(() => hostStore.selectedHostStatus); + + const statusColor = computed(() => { + return selectedHostStatus.value === "online" ? "#6ebe4a" : "warning"; + }); + + const statusIcon = computed(() => { + return selectedHostStatus.value === "online" + ? "mdi-check-circle" + : "mdi-close-circle"; + }); // Methods to update state const selectHost = ( hostId: string, hostIp: string, hostPort: number, - hostLocalMemory: number | undefined + hostLocalMemory: number | undefined, + hostStatus: string ) => { - hostStore.selectHost(hostId, hostIp, hostPort, hostLocalMemory); + hostStore.selectHost( + hostId, + hostIp, + hostPort, + hostLocalMemory, + hostStatus + ); }; return { @@ -897,6 +946,9 @@ export default { selectedHostId, selectedHostPort, selectedHostIp, + selectedHostStatus, + statusColor, + statusIcon, selectHost, loading, }; diff --git a/webui/src/components/CXL-Hosts/HostMemory.vue b/webui/src/components/CXL-Hosts/HostMemory.vue index 5611a84..1764378 100644 --- a/webui/src/components/CXL-Hosts/HostMemory.vue +++ b/webui/src/components/CXL-Hosts/HostMemory.vue @@ -4,7 +4,7 @@ diff --git a/webui/src/components/CXL-Hosts/HostMemoryDevice.vue b/webui/src/components/CXL-Hosts/HostMemoryDevice.vue index 55f9a7f..5f25ce6 100644 --- a/webui/src/components/CXL-Hosts/HostMemoryDevice.vue +++ b/webui/src/components/CXL-Hosts/HostMemoryDevice.vue @@ -4,7 +4,7 @@ diff --git a/webui/src/components/CXL-Hosts/HostPorts.vue b/webui/src/components/CXL-Hosts/HostPorts.vue index 28d6afc..2b9602c 100644 --- a/webui/src/components/CXL-Hosts/HostPorts.vue +++ b/webui/src/components/CXL-Hosts/HostPorts.vue @@ -4,7 +4,7 @@ diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts index 3c04cae..ff6c7ef 100644 --- a/webui/src/components/Stores/HostStore.ts +++ b/webui/src/components/Stores/HostStore.ts @@ -14,6 +14,7 @@ export const useHostStore = defineStore('host', { selectedHostIp: null as unknown as string, selectedHostPortNum: null as unknown as number, selectedHostLocalMemory: null as unknown as number | undefined, + selectedHostStatus: null as unknown as string, addHostError: null as unknown, deleteHostError: null as unknown, resyncHostError: null as unknown, @@ -123,11 +124,12 @@ export const useHostStore = defineStore('host', { } }, - selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined) { + selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined, status: string) { this.selectedHostId = selectedHostId; this.selectedHostIp = selectedHostIp; this.selectedHostPortNum = selectedHostPortNum; this.selectedHostLocalMemory = selectedHostLocalMemory; + this.selectedHostStatus = status }, } }) \ No newline at end of file From 6936c45e9656866bda366150982766ed829d7d51 Mon Sep 17 00:00:00 2001 From: Mengling Ding Date: Fri, 4 Oct 2024 16:58:34 -0500 Subject: [PATCH 3/4] fix: data type mismatch --- webui/src/components/Appliance/Appliances.vue | 22 +++++++------------ webui/src/components/CXL-Hosts/CXL-Hosts.vue | 4 ++-- webui/src/components/Stores/BladeStore.ts | 4 ++-- webui/src/components/Stores/HostStore.ts | 4 ++-- 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue index f13bb35..ad7719c 100644 --- a/webui/src/components/Appliance/Appliances.vue +++ b/webui/src/components/Appliance/Appliances.vue @@ -176,9 +176,9 @@ }} @@ -191,9 +191,7 @@ @@ -204,9 +202,7 @@ @@ -1533,11 +1529,9 @@ export default { const selectedBladeIp = computed(() => bladeStore.selectedBladeIp); const selectedBladePort = computed(() => bladeStore.selectedBladePortNum); const selectedBladeStatus = computed(() => bladeStore.selectedBladeStatus); - + const statusColor = computed(() => { - return selectedBladeStatus.value === "online" - ? "#6ebe4a" - : "warning"; + return selectedBladeStatus.value === "online" ? "#6ebe4a" : "warning"; }); const statusIcon = computed(() => { @@ -1556,7 +1550,7 @@ export default { bladePort: number, bladeMemoryAvailable: number, bladeMemoryAllocated: number, - bladeStatus: string + bladeStatus: string | undefined ) => { bladeStore.selectBlade( bladeId, diff --git a/webui/src/components/CXL-Hosts/CXL-Hosts.vue b/webui/src/components/CXL-Hosts/CXL-Hosts.vue index 1fd1710..cb843ac 100644 --- a/webui/src/components/CXL-Hosts/CXL-Hosts.vue +++ b/webui/src/components/CXL-Hosts/CXL-Hosts.vue @@ -760,7 +760,7 @@ export default { selectedHost.ipAddress, selectedHost.port, selectedHost.localMemoryMiB, - selectedHost.selectedBladeStatus + selectedHost.status ); } @@ -930,7 +930,7 @@ export default { hostIp: string, hostPort: number, hostLocalMemory: number | undefined, - hostStatus: string + hostStatus: string | undefined ) => { hostStore.selectHost( hostId, diff --git a/webui/src/components/Stores/BladeStore.ts b/webui/src/components/Stores/BladeStore.ts index cd01240..bddaee2 100644 --- a/webui/src/components/Stores/BladeStore.ts +++ b/webui/src/components/Stores/BladeStore.ts @@ -14,7 +14,7 @@ export const useBladeStore = defineStore('blade', { selectedBladePortNum: null as unknown as number, selectedBladeTotalMemoryAvailableMiB: null as unknown as number | undefined, selectedBladeTotalMemoryAllocatedMiB: null as unknown as number | undefined, - selectedBladeStatus: null as unknown as string, + selectedBladeStatus: null as unknown as string | undefined, addBladeError: null as unknown, deleteBladeError: null as unknown, resyncBladeError: null as unknown, @@ -146,7 +146,7 @@ export const useBladeStore = defineStore('blade', { }, - selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number, status: string) { + selectBlade(bladeId: string, selectedBladeIp: string, selectBladePortNum: number, selectedBladeTotalMemoryAvailableMiB: number, selectedBladeTotalMemoryAllocatedMiB: number, status: string | undefined) { this.selectedBladeId = bladeId; this.selectedBladeIp = selectedBladeIp; this.selectedBladePortNum = selectBladePortNum; diff --git a/webui/src/components/Stores/HostStore.ts b/webui/src/components/Stores/HostStore.ts index ff6c7ef..b90e8f4 100644 --- a/webui/src/components/Stores/HostStore.ts +++ b/webui/src/components/Stores/HostStore.ts @@ -14,7 +14,7 @@ export const useHostStore = defineStore('host', { selectedHostIp: null as unknown as string, selectedHostPortNum: null as unknown as number, selectedHostLocalMemory: null as unknown as number | undefined, - selectedHostStatus: null as unknown as string, + selectedHostStatus: null as unknown as string | undefined, addHostError: null as unknown, deleteHostError: null as unknown, resyncHostError: null as unknown, @@ -124,7 +124,7 @@ export const useHostStore = defineStore('host', { } }, - selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined, status: string) { + selectHost(selectedHostId: string, selectedHostIp: string, selectedHostPortNum: number, selectedHostLocalMemory: number | undefined, status: string | undefined) { this.selectedHostId = selectedHostId; this.selectedHostIp = selectedHostIp; this.selectedHostPortNum = selectedHostPortNum; From 81d18eada381ebe105f2cbb058e0ead34a69cf15 Mon Sep 17 00:00:00 2001 From: Mengling Ding Date: Mon, 7 Oct 2024 12:33:02 -0500 Subject: [PATCH 4/4] feat: change the device status color --- webui/src/components/Appliance/Appliances.vue | 9 +++++---- webui/src/components/CXL-Hosts/CXL-Hosts.vue | 12 ++++++++---- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/webui/src/components/Appliance/Appliances.vue b/webui/src/components/Appliance/Appliances.vue index ad7719c..6ca6792 100644 --- a/webui/src/components/Appliance/Appliances.vue +++ b/webui/src/components/Appliance/Appliances.vue @@ -171,9 +171,10 @@ Status - {{ - selectedBladeStatus - }} + {{ selectedBladeStatus }}