Skip to content

Commit

Permalink
fix: make failed blade or host not affect the display of other devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meng-20
Meng-20 committed Dec 17, 2024
1 parent a49451a commit d476019
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 115 deletions.
183 changes: 99 additions & 84 deletions webui/src/components/Dashboard/Dashboard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,83 +47,99 @@
{{ "mdi-close" }}
</v-icon>
</div>
<v-card class="parent-card"
style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<VueFlow
:nodes="nodes"
:edges="edges"
class="basic-flow"
:default-viewport="{ zoom: 1 }"
:min-zoom="0.2"
:max-zoom="4"
@node-click="handleNodeClick"
>
<Controls position="top-left">
<ControlButton title="Search" @click="toggleSearch">
<v-icon>mdi-magnify</v-icon>
</ControlButton>
</Controls>
</VueFlow>
<v-card class="child-card"
style="
width: 20%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<v-card-text>
Devices
<v-list-item>
<v-list-item-title>
<v-icon color="#f2ae72" class="mr-2">mdi-rectangle</v-icon>
CMA
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#f2e394" class="mr-2">mdi-rectangle</v-icon>
Blade
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#d9ecd0" class="mr-2">mdi-rectangle</v-icon>
Host
</v-list-item-title>
</v-list-item>
<br>Status
<v-list-item>
<v-list-item-title>
<v-icon color="#6ebe4a" class="mr-2">mdi-rectangle-outline</v-icon>
online
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#b00020" class="mr-2">mdi-rectangle-outline</v-icon>
offline
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#ff9f40" class="mr-2">mdi-rectangle-outline</v-icon>
unavailable
</v-list-item-title>
</v-list-item>
</v-card-text>
</v-card>
</v-card>
<v-card
class="parent-card"
style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<VueFlow
:nodes="nodes"
:edges="edges"
class="basic-flow"
:default-viewport="{ zoom: 1 }"
:min-zoom="0.2"
:max-zoom="4"
@node-click="handleNodeClick"
>
<Controls position="top-left">
<ControlButton title="Search" @click="toggleSearch">
<v-icon>mdi-magnify</v-icon>
</ControlButton>
</Controls>
</VueFlow>
<v-card
class="child-card"
style="
width: 20%;
height: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
>
<v-card-text>
Devices
<v-list-item>
<v-list-item-title>
<v-icon color="#f2ae72" class="mr-2">mdi-rectangle</v-icon>
CMA
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#f2e394" class="mr-2">mdi-rectangle</v-icon>
Blade
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#d9ecd0" class="mr-2">mdi-rectangle</v-icon>
Host
</v-list-item-title>
</v-list-item>
<br />Status
<v-list-item>
<v-list-item-title>
<v-icon color="#6ebe4a" class="mr-2"
>mdi-rectangle-outline</v-icon
>
online
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#b00020" class="mr-2"
>mdi-rectangle-outline</v-icon
>
offline
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#ff9f40" class="mr-2"
>mdi-rectangle-outline</v-icon
>
unavailable
</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
<v-icon color="#B0B0B0" class="mr-2"
>mdi-rectangle-outline</v-icon
>
unknown
</v-list-item-title>
</v-list-item>
</v-card-text>
</v-card>
</v-card>

<!-- The dialog of the warning before the adding the new discovered devices(blades or cxl-hosts) -->
<v-dialog v-model="dialogNewDiscoveredDevices" max-width="600px">
Expand All @@ -144,7 +160,7 @@
v-model="selectedBlades"
:value="blade"
></v-checkbox>
<br>
<br />
New Discovered Hosts:
<v-checkbox
v-for="(host, index) in discoveredHosts"
Expand Down Expand Up @@ -218,19 +234,18 @@
size="112"
></v-icon>
<h2 class="text-h5 mb-6">Congrats! New devices were added</h2>
<p class="mb-4 text-medium-emphasis text-body-2">
New blades:
<ul>
New blades:
<ul>
<li v-for="(blade, index) in newBlades" :key="index">
{{ blade.id }}
</li>
</ul><br />New hosts: <br />
</ul>
<br />New hosts: <br />
<ul>
<li v-for="(host, index) in newHosts" :key="index">
{{ host.id }}
</li>
</ul>
</p>
<v-divider class="mb-4"></v-divider>
<div class="text-end">
<v-btn
Expand Down Expand Up @@ -269,7 +284,7 @@ export default {
return {
addNewDiscoveredDevicesProgressText:
"Adding the selected devices, please wait...",
discoverDevicesProgressText:"Discovering devices, please wait...",
discoverDevicesProgressText: "Discovering devices, please wait...",

dialogNewDiscoveredDevices: false,
dialogAddNewDiscoveredDevicesWait: false,
Expand Down
6 changes: 3 additions & 3 deletions webui/src/components/Dashboard/initial-control-elements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@ export const useControlData = () => {
: [];

const applianceNodes = applianceStore.applianceIds.flatMap(
(appliance, applianceIndex) => [
(appliance) => [
{
id: `appliance-${appliance.id}`,
data: { label: appliance.id, url: `/appliances/${appliance.id}` },
position: position,
style: { backgroundColor: useLayout().Colors.applianceColor, border: "none" },
type: applianceNodeType,
},
...appliance.blades.map((blade, bladeIndex) => {
...appliance.blades.map((blade) => {
const borderColor = useLayout().borderColorChange(blade.status);
return {
id: `blade-${blade.id}`,
Expand All @@ -51,7 +51,7 @@ export const useControlData = () => {
]
);

const hostNodes = hostStore.hostIds.map((host, index) => {
const hostNodes = hostStore.hostIds.map((host) => {
const borderColor = useLayout().borderColorChange(host.status);

return {
Expand Down
2 changes: 1 addition & 1 deletion webui/src/components/Dashboard/initial-data-elements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const useData = () => {
const dataNodes = computed(() => {
let currentYPosition = 0;
const applianceNodes = applianceStore.applianceIds.flatMap(
(appliance, index) => {
(appliance) => {
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
Expand Down
12 changes: 5 additions & 7 deletions webui/src/components/Dashboard/useLayout.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Copyright (c) 2024 Seagate Technology LLC and/or its Affiliates
import dagre from '@dagrejs/dagre';
import { Position, useVueFlow } from '@vue-flow/core';
import { Position } from '@vue-flow/core';
import { ref } from 'vue';

/**
Expand All @@ -18,7 +18,7 @@ export function measureText(text: string, font = '16px Arial') {
width: width,
height: parseInt(font, 10) // Assuming height is roughly the font size
};
};
}

export const Colors = {
applianceColor: '#f2ae72',
Expand All @@ -30,19 +30,17 @@ export const Colors = {
export function borderColorChange(status: string | undefined) {
switch (status) {
case "online":
return "#6ebe4a"; // green
return "#6ebe4a"; // Green
case "offline":
return "#b00020"; // Red
case "unavailable":
return "#ff9f40"; // Orange
default:
return "#ffffff"; // White
return "#B0B0B0"; // Gray
}
};
}

export function useLayout() {
const { findNode } = useVueFlow();

const graph = ref(new dagre.graphlib.Graph());

const previousDirection = ref('LR');
Expand Down
31 changes: 21 additions & 10 deletions webui/src/components/Stores/ApplianceStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,27 @@ export const useApplianceStore = defineStore("appliance", {
?.slice(0, -2) as string;
// Store blade in blades
if (bladeId) {
const responseOfBlade = await defaultApi.bladesGetById(
applianceId,
bladeId
);
const response = {
id: responseOfBlade.data.id,
ipAddress: responseOfBlade.data.ipAddress,
status: responseOfBlade.data.status,
};
associatedBlades.push(response);
try {
const responseOfBlade = await defaultApi.bladesGetById(applianceId, bladeId);

const response = {
id: responseOfBlade.data.id,
ipAddress: responseOfBlade.data.ipAddress,
status: responseOfBlade.data.status,
};

associatedBlades.push(response);
} catch (bladeError) {
console.error(`Error fetching blade ${bladeId}:`, bladeError);

// Push the failed blade with an empty status
// TODO: Get the status for the failed blade from cfm-service
associatedBlades.push({
id: bladeId,
ipAddress: "",
status: "",
});
}
}
}
this.applianceIds.push({
Expand Down
34 changes: 24 additions & 10 deletions webui/src/components/Stores/HostStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,17 +55,31 @@ export const useHostStore = defineStore("host", {
.pop()
?.slice(0, -2) as string;
// Get host by id
const detailsResponseOfHost = await defaultApi.hostsGetById(hostId);
if (hostId) {
try {
const detailsResponseOfHost = await defaultApi.hostsGetById(hostId);

// Store host in hosts
if (detailsResponseOfHost) {
this.hosts.push(detailsResponseOfHost.data);
const host = {
id: detailsResponseOfHost.data.id,
ipAddress: detailsResponseOfHost.data.ipAddress,
status: detailsResponseOfHost.data.status,
};
this.hostIds.push(host);
// Store host in hosts
if (detailsResponseOfHost) {
this.hosts.push(detailsResponseOfHost.data);
const host = {
id: detailsResponseOfHost.data.id,
ipAddress: detailsResponseOfHost.data.ipAddress,
status: detailsResponseOfHost.data.status,
};
this.hostIds.push(host);
}
}
catch (hostError) {
console.error(`Error fetching host ${hostId}:`, hostError);
// Push the failed host with an empty status
// TODO: Get the status for the failed host from cfm-service
this.hostIds.push({
id: hostId,
ipAddress: "",
status: "",
});
}
}
}
} catch (error) {
Expand Down

0 comments on commit d476019

Please sign in to comment.