Skip to content

Commit

Permalink
feat: rename blade 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 20a969a commit 915b79d
Show file tree
Hide file tree
Showing 2 changed files with 305 additions and 14 deletions.
287 changes: 273 additions & 14 deletions webui/src/components/Appliance/Appliances.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
color="#6ebe4a"
icon="mdi-dots-vertical"
variant="text"
v-bind="props"
Expand Down Expand Up @@ -120,18 +121,43 @@
<v-row justify="space-between" align="center">
<v-col> {{ blade.id }} </v-col>
<v-col>
<v-btn icon variant="text">
<v-icon
color="warning"
size="x-small"
@click="deleteBladeWindowButton"
id="deleteBladeWindowButton"
>mdi-close</v-icon
>
<v-tooltip activator="parent" location="end"
>Click here to delete this blade</v-tooltip
>
</v-btn>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn
color="#6ebe4a"
icon="mdi-dots-vertical"
variant="text"
v-bind="props"
@click.stop="
selectBlade(
blade.id,
blade.ipAddress,
blade.port,
Number(blade.totalMemoryAvailableMiB),
Number(blade.totalMemoryAllocatedMiB),
blade.status
)
"
></v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, i) in bladeDropItems"
: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 @@ -644,15 +670,15 @@
<v-btn
color="#6ebe4a"
variant="text"
id="cancelAddRenameAppliance"
id="cancelRenameAppliance"
@click="dialogRenameAppliance = false"
>
Cancel
</v-btn>
<v-btn
color="#6ebe4a"
variant="text"
id="confirmRenameNewAppliance"
id="confirmRenameAppliance"
@click="
renameApplianceConfirm(
selectedApplianceId,
Expand Down Expand Up @@ -751,6 +777,151 @@
</v-row>
</v-dialog>

<!-- The dialog for renaming a blade -->
<v-dialog v-model="dialogRenameBlade" max-width="600px">
<v-card>
<v-card-title>
<span class="text-h5">Rename Blade</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="selectedBladeId"
label="Current Blade Name"
:style="{ width: '100%' }"
id="currentBladeId"
readonly
></v-text-field>
<v-text-field
v-model="renameBladeCredentials.customId"
label="New Blade Name"
:style="{ width: '100%' }"
id="renameBladeId"
: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="cancelRenameBlade"
@click="dialogRenameBlade = false"
>
Cancel
</v-btn>
<v-btn
color="#6ebe4a"
variant="text"
id="confirmRenameBlade"
@click="
renameBladeConfirm(
selectedApplianceId,
selectedBladeId,
renameBladeCredentials.customId
)
"
>
Rename
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

<v-dialog v-model="dialogRenameBladeSuccess" 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 a Blade succeeded!</h2>
<p class="mb-4 text-medium-emphasis text-body-2">
New Blade Id:
<br />{{ renamedBladeId }}
</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="renameBladeSuccess"
@click="dialogRenameBladeSuccess = false"
>
Done
</v-btn>
</div>
</v-sheet>
</v-dialog>

<v-dialog v-model="dialogRenameBladeFailure" 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 a Blade failed!</h2>
<p class="mb-4 text-medium-emphasis text-body-2">
{{ renameBladeError }}
</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="renameBladeFailure"
@click="dialogRenameBladeFailure = false"
>
Done
</v-btn>
</div>
</v-sheet>
</v-dialog>

<v-dialog v-model="dialogRenameBladeWait">
<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">
{{ renameBladeProgressText }}
</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 @@ -1225,6 +1396,7 @@ export default {
deleteBladeProgressText: "Deleting blade, please wait...",
resyncBladeProgressText: "Resynchronizing the blade, please wait...",
renameApplianceProgressText: "Renaming appliance, please wait...",
renameBladeProgressText: "Renaming blade, please wait...",

// The rules for the input fields when adding a new appliance/blade
rules: {
Expand Down Expand Up @@ -1285,6 +1457,40 @@ export default {
icon: "mdi-rename-box",
function: this.renameAppliance,
id: "renameApplianceWindow",
iconColor: "primary",
},
],

renameBladeCredentials: {
customId: "",
},
renamedBladeId: "", // Be used on success popup
dialogRenameBlade: false,
renameBladeError: null as unknown,
dialogRenameBladeSuccess: false,
dialogRenameBladeFailure: false,
dialogRenameBladeWait: false,

bladeDropItems: [
{
text: "Delete",
icon: "mdi-delete",
function: this.deleteBladeWindowButton,
id: "deleteBladeWindow",
iconColor: "warning",
},
{
text: "Rename",
icon: "mdi-rename-box",
function: this.renameBlade,
id: "renameBladeWindow",
iconColor: "primary",
},
{
text: "Resync",
icon: "mdi-sync-circle",
function: this.resyncBladeWindowButton,
id: "resyncBladeWindow",
iconColor: "#6ebe4a",
},
],
Expand Down Expand Up @@ -1448,6 +1654,59 @@ export default {
};
},

renameBlade() {
this.dialogRenameBlade = true;
},

/* Triggle the API bladesUpdateById in appliance store to rename a blade */
async renameBladeConfirm(
applianceId: string,
bladeId: string,
newBladeId: string
) {
// Make the rename blade popup disappear and waiting popup appear
this.dialogRenameBlade = false;
this.dialogRenameBladeWait = true;

const bladeStore = useBladeStore();
const newBlade = await bladeStore.renameBlade(
applianceId,
bladeId,
newBladeId
);

this.renameBladeError = bladeStore.renameBladeError as string;

if (!this.renameBladeError) {
this.renamedBladeId = newBlade.id;

// Set the renamed Blade as the selected Blade
const Blades = computed(() => bladeStore.blades);
if (Blades.value.length > 0) {
const defaultBlade = newBlade;
bladeStore.selectBlade(
defaultBlade!.id,
defaultBlade!.ipAddress,
defaultBlade!.port,
Number(defaultBlade!.totalMemoryAvailableMiB),
Number(defaultBlade!.totalMemoryAllocatedMiB),
defaultBlade!.status
);
}

this.dialogRenameBladeWait = false;
this.dialogRenameBladeSuccess = true;
} else {
this.dialogRenameBladeWait = false;
this.dialogRenameBladeFailure = true;
}

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

/* Open the add blade popup */
addNewBladeWindowButton() {
this.dialogNewBlade = true;
Expand Down
32 changes: 32 additions & 0 deletions webui/src/components/Stores/BladeStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const useBladeStore = defineStore('blade', {
addBladeError: null as unknown,
deleteBladeError: null as unknown,
resyncBladeError: null as unknown,
renameBladeError: null as unknown,
}),
actions: {
async fetchBlades(applianceId: string) {
Expand Down Expand Up @@ -68,6 +69,37 @@ export const useBladeStore = defineStore('blade', {
}
},

async renameBlade(applianceId: string, bladeId: string, newBladeId: string) {
this.renameBladeError = "";

try {
const defaultApi = new DefaultApi(undefined, API_BASE_PATH);
const response = await defaultApi.bladesUpdateById(applianceId, bladeId, newBladeId);

// Update the blades array
if (response) {
this.blades = this.blades.filter(
(blade) => blade.id !== bladeId
);
this.blades.push(response.data);
}

return response.data
} catch (error) {
if (axios.isAxiosError(error)) {
this.renameBladeError = error.message;
if (error.response) {
this.renameBladeError = error.response?.data.status.message + " (" + error.response?.request.status + ")";
}
}
else {
this.renameBladeError = error;
}
console.error("Error:", error);
}
},


async resyncBlade(applianceId: string, bladeId: string) {
this.resyncBladeError = "";
try {
Expand Down

0 comments on commit 915b79d

Please sign in to comment.