Skip to content

Commit

Permalink
Feat: display blade/host status in webui (#38)
Browse files Browse the repository at this point in the history 
* feat: display blade status in cfm-webui

* feat: display host status in cfm-webui

* fix: data type mismatch

* feat: change the device status color
  • Loading branch information
@Meng-20
Meng-20 authored Oct 7, 2024
1 parent acb0171 commit 954397e
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 30 deletions.
61 changes: 55 additions & 6 deletions webui/src/components/Appliance/Appliances.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@
blade.ipAddress,
blade.port,
Number(blade.totalMemoryAvailableMiB),
Number(blade.totalMemoryAllocatedMiB)
Number(blade.totalMemoryAllocatedMiB),
blade.status
)
"
>
Expand Down Expand Up @@ -168,25 +169,54 @@
service running on OpenBMC.
</v-card-text>
<v-list lines="one">
<v-list-item>
<v-list-item-title>Status</v-list-item-title>
<v-list-item-subtitle
:style="{ fontWeight: 'bold', color: statusColor }"
>{{ selectedBladeStatus }}</v-list-item-subtitle
>
<template v-slot:prepend>
<v-avatar>
<v-icon :color="statusColor">{{
statusIcon
}}</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title prepend-icon="mdi-account-circle"
>Appliance Id</v-list-item-title
>
<v-list-item-subtitle>
{{ selectedApplianceId }}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-account-circle</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title>Blade Id</v-list-item-title>
<v-list-item-subtitle>
{{ selectedBladeId }}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-shield-account</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title>Ip Address</v-list-item-title>
<v-list-item-subtitle>
{{ selectedBladeIp + ":" + selectedBladePort }}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-ip</v-icon>
</v-avatar>
</template>
</v-list-item>
</v-list>
</v-card>
Expand Down Expand Up @@ -1224,7 +1254,8 @@ export default {
defaultBlade!.ipAddress,
defaultBlade!.port,
Number(defaultBlade!.totalMemoryAvailableMiB),
Number(defaultBlade!.totalMemoryAllocatedMiB)
Number(defaultBlade!.totalMemoryAllocatedMiB),
defaultBlade!.status
);
}
this.dialogAddBladeWait = false;
Expand Down Expand Up @@ -1281,7 +1312,8 @@ export default {
defaultBlade.ipAddress,
defaultBlade.port,
Number(defaultBlade.totalMemoryAvailableMiB),
Number(defaultBlade.totalMemoryAllocatedMiB)
Number(defaultBlade.totalMemoryAllocatedMiB),
defaultBlade.status
);
}
this.dialogDeleteBladeWait = false;
Expand Down Expand Up @@ -1444,7 +1476,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);
Expand Down Expand Up @@ -1496,6 +1529,17 @@ 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" : "#ff9f40";
});

const statusIcon = computed(() => {
return selectedBladeStatus.value === "online"
? "mdi-check-circle"
: "mdi-close-circle";
});

// Methods to update state
const selectAppliance = (applianceId: string) => {
Expand All @@ -1506,14 +1550,16 @@ export default {
bladeIp: string,
bladePort: number,
bladeMemoryAvailable: number,
bladeMemoryAllocated: number
bladeMemoryAllocated: number,
bladeStatus: string | undefined
) => {
bladeStore.selectBlade(
bladeId,
bladeIp,
bladePort,
bladeMemoryAvailable,
bladeMemoryAllocated
bladeMemoryAllocated,
bladeStatus
);
};

Expand All @@ -1524,6 +1570,9 @@ export default {
selectedBladeId,
selectedBladePort,
selectedBladeIp,
selectedBladeStatus,
statusColor,
statusIcon,
selectAppliance,
selectBlade,
loading,
Expand Down
94 changes: 75 additions & 19 deletions webui/src/components/CXL-Hosts/CXL-Hosts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
"
>
<v-row justify="space-between" align="center">
Expand Down Expand Up @@ -69,13 +75,9 @@
<!---First Row -->
<!-- ---------------------------------------------- -->
<v-row class="flex-0" dense>
<v-col cols="12" sm="12" md="12" lg="4">
<v-col cols="12" sm="6" md="6" lg="4">
<!-- Basic Information -->
<v-card
class="card-shadow"
height="350"
color="rgba(110, 190, 74, 0.1)"
>
<v-card class="h-100" color="rgba(110, 190, 74, 0.1)">
<v-toolbar height="45">
<v-toolbar-title style="cursor: pointer"
>Basic Information</v-toolbar-title
Expand All @@ -100,17 +102,42 @@
memory composition.
</v-card-text>
<v-list lines="one">
<v-list-item>
<v-list-item-title>Status</v-list-item-title>
<v-list-item-subtitle
:style="{
fontWeight: 'bold',
color: statusColor + ' !important',
}"
>{{ selectedHostStatus }}</v-list-item-subtitle
>
<template v-slot:prepend>
<v-avatar>
<v-icon :color="statusColor">{{ statusIcon }}</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title>CXL-Host Id</v-list-item-title>
<v-list-item-subtitle>
{{ host.id }}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-account-circle</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title>IpAddress</v-list-item-title>
<v-list-item-subtitle>
{{ host.ipAddress + ":" + host.port }}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-ip</v-icon>
</v-avatar>
</template>
</v-list-item>
<v-list-item>
<v-list-item-title>LocalMemoryGiB</v-list-item-title>
Expand All @@ -121,13 +148,18 @@
: "N/A"
}}
</v-list-item-subtitle>
<template v-slot:prepend>
<v-avatar>
<v-icon color="#6ebe4a">mdi-memory</v-icon>
</v-avatar>
</template>
</v-list-item>
</v-list>
</v-card>
</v-col>
<v-col cols="12" sm="12" md="12" lg="8">
<v-col cols="12" sm="6" md="6" lg="8">
<!-- Ports-->
<v-card class="card-shadow h-full" height="350">
<v-card class="h-100">
<v-toolbar height="45">
<v-toolbar-title style="cursor: pointer"
>Ports Information</v-toolbar-title
Expand All @@ -144,10 +176,10 @@
<!-- ---------------------------------------------- -->
<!---Second Row -->
<!-- ---------------------------------------------- -->
<v-row class="card-shadow flex-grow-0" dense>
<v-col cols="12" sm="12" md="12" lg="6">
<v-row class="flex-0" dense>
<v-col cols="12" sm="6" md="6" lg="6">
<!-- Memory Devices -->
<v-card class="card-shadow h-full" height="350">
<v-card class="h-100">
<v-toolbar height="45">
<v-toolbar-title style="cursor: pointer"
>Memory Devices</v-toolbar-title
Expand All @@ -160,9 +192,9 @@
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" sm="12" md="12" lg="6">
<v-col cols="12" sm="12" md="6" lg="6">
<!-- Memory -->
<v-card class="card-shadow h-full" height="350">
<v-card class="h-100">
<v-toolbar height="45">
<v-toolbar-title style="cursor: pointer"
>Memory</v-toolbar-title
Expand Down Expand Up @@ -687,7 +719,8 @@ export default {
newHost?.id + "",
newHost?.ipAddress + "",
Number(newHost?.port),
newHost?.localMemoryMiB
newHost?.localMemoryMiB,
newHost?.status
);
}
this.dialogAddHostWait = false;
Expand Down Expand Up @@ -730,7 +763,8 @@ export default {
selectedHost.id,
selectedHost.ipAddress,
selectedHost.port,
selectedHost.localMemoryMiB
selectedHost.localMemoryMiB,
selectedHost.status
);
}

Expand Down Expand Up @@ -847,7 +881,8 @@ export default {
selectedHost?.id + "",
selectedHost?.ipAddress + "",
Number(selectedHost?.port),
selectedHost?.localMemoryMiB
selectedHost?.localMemoryMiB,
selectedHost?.status
);
}

Expand Down Expand Up @@ -881,22 +916,43 @@ export default {
const selectedHostId = computed(() => 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" : "#ff9f40";
});

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 | undefined
) => {
hostStore.selectHost(hostId, hostIp, hostPort, hostLocalMemory);
hostStore.selectHost(
hostId,
hostIp,
hostPort,
hostLocalMemory,
hostStatus
);
};

return {
hosts,
selectedHostId,
selectedHostPort,
selectedHostIp,
selectedHostStatus,
statusColor,
statusIcon,
selectHost,
loading,
};
Expand Down
2 changes: 1 addition & 1 deletion webui/src/components/CXL-Hosts/HostMemory.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<v-data-table
:headers="headers"
fixed-header
height="240"
height="300"
:items="hostMemory"
>
</v-data-table>
Expand Down
2 changes: 1 addition & 1 deletion webui/src/components/CXL-Hosts/HostMemoryDevice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<v-data-table
:headers="headers"
fixed-header
height="240"
height="300"
:items="hostMemoryDevices"
>
</v-data-table>
Expand Down
2 changes: 1 addition & 1 deletion webui/src/components/CXL-Hosts/HostPorts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<v-data-table
:headers="headers"
fixed-header
height="240"
height="300"
:items="hostPorts"
>
</v-data-table>
Expand Down
4 changes: 3 additions & 1 deletion webui/src/components/Stores/BladeStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | undefined,
addBladeError: null as unknown,
deleteBladeError: null as unknown,
resyncBladeError: null as unknown,
Expand Down Expand Up @@ -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 | undefined) {
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) {
Expand Down
Loading

0 comments on commit 954397e

Please sign in to comment.