Skip to content

Commit

Permalink
feat: rename appliance by id
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meng-20
Meng-20 committed Oct 10, 2024
1 parent b13bf42 commit 944694b
Show file tree
Hide file tree
Showing 2 changed files with 271 additions and 12 deletions.
251 changes: 239 additions & 12 deletions webui/src/components/Appliance/Appliances.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,33 @@
<v-row justify="space-between" align="center">
<v-col> {{ appliance.id }} </v-col>
<v-col>
<v-btn icon variant="text">
<v-icon
size="x-small"
color="warning"
@click="deleteApplianceWindowButton"
id="deleteApplianceWindow"
>mdi-close</v-icon
>
<v-tooltip activator="parent" location="end"
>Click here to delete this memory appliance</v-tooltip
>
</v-btn>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-dots-vertical"
variant="text"
v-bind="props"
@click.stop="selectAppliance(appliance.id)"
></v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, i) in applianceDropItems"
:key="i"
:value="item"
:id="item.id"
@click="item.function"
>
<template v-slot:prepend>
<v-icon
:icon="item.icon"
:color="item.iconColor"
></v-icon>
</template>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</v-tab>
Expand Down Expand Up @@ -592,6 +607,150 @@
</v-row>
</v-dialog>

<!-- The dialog for renaming an appliance -->
<v-dialog v-model="dialogRenameAppliance" max-width="600px">
<v-card>
<v-card-title>
<span class="text-h5">Rename Appliance</span>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-container>
<v-row class="justify-center">
<v-col>
<div style="position: relative; width: 100%">
<v-text-field
v-model="selectedApplianceId"
label="Current Appliance Name"
:style="{ width: '100%' }"
id="currentApplianceId"
readonly
></v-text-field>
<v-text-field
v-model="renameApplianceCredentials.customId"
label="New Appliance Name"
:style="{ width: '100%' }"
id="renameApplianceId"
:rules="[rules.required]"
></v-text-field>
</div>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="#6ebe4a"
variant="text"
id="cancelAddRenameAppliance"
@click="dialogRenameAppliance = false"
>
Cancel
</v-btn>
<v-btn
color="#6ebe4a"
variant="text"
id="confirmRenameNewAppliance"
@click="
renameApplianceConfirm(
selectedApplianceId,
renameApplianceCredentials.customId
)
"
>
Rename
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialogRenameApplianceSuccess" max-width="600px">
<v-sheet
elevation="12"
max-width="600"
rounded="lg"
width="100%"
class="pa-4 text-center mx-auto"
>
<v-icon
class="mb-5"
color="success"
icon="mdi-check-circle"
size="112"
></v-icon>
<h2 class="text-h5 mb-6">Rename an appliance succeeded!</h2>
<p class="mb-4 text-medium-emphasis text-body-2">
New Appliance Id:
<br />{{ renamedApplianceId }}
</p>
<v-divider class="mb-4"></v-divider>
<div class="text-end">
<v-btn
class="text-none"
color="success"
rounded
variant="flat"
width="90"
id="renameApplianceSuccess"
@click="dialogRenameApplianceSuccess = false"
>
Done
</v-btn>
</div>
</v-sheet>
</v-dialog>

<v-dialog v-model="dialogRenameApplianceFailure" max-width="600px">
<v-sheet
elevation="12"
max-width="600"
rounded="lg"
width="100%"
class="pa-4 text-center mx-auto"
>
<v-icon
class="mb-5"
color="error"
icon="mdi-alert-circle"
size="112"
></v-icon>
<h2 class="text-h5 mb-6">Rename an appliance failed!</h2>
<p class="mb-4 text-medium-emphasis text-body-2">
{{ renameApplianceError }}
</p>
<v-divider class="mb-4"></v-divider>
<div class="text-end">
<v-btn
class="text-none"
color="error"
rounded
variant="flat"
width="90"
id="renameApplianceFailure"
@click="dialogRenameApplianceFailure = false"
>
Done
</v-btn>
</div>
</v-sheet>
</v-dialog>

<v-dialog v-model="dialogRenameApplianceWait">
<v-row align-content="center" class="fill-height" justify="center">
<v-col cols="6">
<v-progress-linear color="#6ebe4a" height="50" indeterminate rounded>
<template v-slot:default>
<div class="text-center">
{{ renameApplianceProgressText }}
</div>
</template>
</v-progress-linear>
</v-col>
</v-row>
</v-dialog>

<!-- The dialog for adding a new blade -->
<v-dialog
v-model="dialogNewBlade"
Expand Down Expand Up @@ -1065,6 +1224,7 @@ export default {
addBladeProgressText: "Adding blade, please wait...",
deleteBladeProgressText: "Deleting blade, please wait...",
resyncBladeProgressText: "Resynchronizing the blade, please wait...",
renameApplianceProgressText: "Renaming appliance, please wait...",

// The rules for the input fields when adding a new appliance/blade
rules: {
Expand Down Expand Up @@ -1102,6 +1262,33 @@ export default {
dialogDeleteApplianceFailure: false,
dialogDeleteApplianceWait: false,

renameApplianceCredentials: {
customId: "",
},
renamedApplianceId: "", // Be used on success popup
dialogRenameAppliance: false,
renameApplianceError: null as unknown,
dialogRenameApplianceSuccess: false,
dialogRenameApplianceFailure: false,
dialogRenameApplianceWait: false,

applianceDropItems: [
{
text: "Delete",
icon: "mdi-delete",
function: this.deleteApplianceWindowButton,
id: "deleteApplianceWindow",
iconColor: "warning",
},
{
text: "Rename",
icon: "mdi-rename-box",
function: this.renameAppliance,
id: "renameApplianceWindow",
iconColor: "#6ebe4a",
},
],

newBladeCredentials: {
username: "root",
password: "0penBmc",
Expand Down Expand Up @@ -1221,6 +1408,46 @@ export default {
}
},

renameAppliance() {
this.dialogRenameAppliance = true;
},

/* Triggle the API appliancesUpdateById in appliance store to rename an appliance */
async renameApplianceConfirm(applianceId: string, newApplianceId: string) {
// Make the rename appliance popup disappear and waiting popup appear
this.dialogRenameAppliance = false;
this.dialogRenameApplianceWait = true;

const applianceStore = useApplianceStore();
const newAppliance = await applianceStore.renameAppliance(
applianceId,
newApplianceId
);

this.renameApplianceError = applianceStore.renameApplianceError as string;

if (!this.renameApplianceError) {
this.renamedApplianceId = newAppliance.id;

// Set the renamed appliance as the selected appliance
const appliances = computed(() => applianceStore.appliances);
if (appliances.value.length > 0) {
applianceStore.selectAppliance(newApplianceId);
}

this.dialogRenameApplianceWait = false;
this.dialogRenameApplianceSuccess = true;
} else {
this.dialogRenameApplianceWait = false;
this.dialogRenameApplianceFailure = true;
}

// Reset the credentials
this.renameApplianceCredentials = {
customId: "",
};
},

/* Open the add blade popup */
addNewBladeWindowButton() {
this.dialogNewBlade = true;
Expand Down
32 changes: 32 additions & 0 deletions webui/src/components/Stores/ApplianceStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,41 @@ export const useApplianceStore = defineStore('appliance', {
selectedApplianceId: null as unknown as string,
addApplianceError: null as unknown,
deleteApplianceError: null as unknown,
renameApplianceError: null as unknown,
applianceIds: [] as { id: string, bladeIds: string[] }[],
}),

actions: {
async renameAppliance(applianceId: string, newApplianceId: string) {
this.renameApplianceError = "";
try {
const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
const response = await defaultApi.appliancesUpdateById(applianceId, newApplianceId);

// Update the appliances array
if (response) {
this.appliances = this.appliances.filter(
(appliance) => appliance.id !== applianceId
);
this.appliances.push(response.data);
}

return response.data
} catch (error) {
if (axios.isAxiosError(error)) {
this.renameApplianceError = error.message;

if (error.response) {
this.renameApplianceError = error.response?.data.status.message + " (" + error.response?.request.status + ")";
}
}
else {
this.renameApplianceError = error;
}
console.error("Error:", error);
}
},

async fetchAppliances() {
this.appliances = [];
this.applianceIds = [];
Expand Down Expand Up @@ -66,6 +97,7 @@ export const useApplianceStore = defineStore('appliance', {
const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
const response = await defaultApi.appliancesPost(newAppliance);
const addedAppliance = response.data;
console.log("added appliance", addedAppliance)
// Add the new appliance to the appliances array
this.appliances.push(addedAppliance);
return addedAppliance;
Expand Down

0 comments on commit 944694b

Please sign in to comment.