Skip to content

Commit

Permalink
feat: display host status in cfm-webui
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meng-20
Meng-20 committed Oct 4, 2024
1 parent 26b14bd commit 9ed9924
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 23 deletions.
90 changes: 71 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,38 @@
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>{{
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 +144,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 +172,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 +188,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 +715,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 +759,8 @@ export default {
selectedHost.id,
selectedHost.ipAddress,
selectedHost.port,
selectedHost.localMemoryMiB
selectedHost.localMemoryMiB,
selectedHost.selectedBladeStatus
);
}

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

Expand Down Expand Up @@ -881,22 +912,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" : "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 {
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/HostStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
},
}
})

0 comments on commit 9ed9924

Please sign in to comment.