Skip to content

Commit

Permalink
feat(ui): restore file or folder (wip)
Browse files Browse the repository at this point in the history
  • Loading branch information
@andre8244
andre8244 committed Dec 2, 2024
1 parent f2f1108 commit d801245
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 33 deletions.
4 changes: 3 additions & 1 deletion ui/public/i18n/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@
"from_node_name": "From node {name}",
"most_recent": "Most recent",
"no_snapshot_to_restore": "No snapshot to restore",
"start_typing_to_search": "Start typing to search file or folder"
"start_typing_to_search": "Start typing to search file or folder",
"restore_file_info": "The selected file or folder will be restored to '{restoredFolder}'. Ensure there is sufficient space on {node} to avoid restore failure.",
"restoring_to_share_name": "Restoring to share '{name}'"
},
"about": {
"title": "About"
Expand Down
130 changes: 107 additions & 23 deletions ui/src/components/shared-folders/RestoreFileModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<div class="mg-bottom-md">
{{ $t("shares.select_backup_destination") }}
</div>
<!-- listBackupRepositories error -->
<NsInlineNotification
v-if="error.listBackupRepositories"
kind="error"
Expand All @@ -49,6 +50,7 @@
<div>
{{ $t("shares.select_backup_snapshot") }}
</div>
<!-- readBackupSnapshots error -->
<NsInlineNotification
v-if="error.readBackupSnapshots"
kind="error"
Expand All @@ -74,7 +76,7 @@
<div>
{{ $t("shares.select_file_or_folder_to_restore") }}
</div>
<!-- //// label, title-->
selectedFile {{ selectedFile }} ////
<RestoreFileSearch
:repositoryId="selectedRepositoryId"
:repositoryPath="selectedRepository.path"
Expand All @@ -86,7 +88,27 @@
:invalid-message="error.group"
light
ref="fileSearch"
class="mg-top-xlg mb-14"
class="mg-top-xlg"
@change="selectedFile = $event"
/>
<NsInlineNotification
kind="info"
:description="
$t('shares.restore_file_info', {
restoredFolder: 'Restored folder',
node: installationNodeLabel
})
"
:showCloseButton="false"
class="mb-9"
/>
<!-- restoreBackupContent error -->
<NsInlineNotification
v-if="error.restoreBackupContent"
kind="error"
:title="$t('action.restore-backup-content')"
:description="error.restoreBackupContent"
:showCloseButton="false"
/>
</template>
</cv-form>
Expand Down Expand Up @@ -126,16 +148,19 @@ export default {
selectedRepositoryId: "",
selectedSnapshotId: "",
selectedFile: "",
fileQuery: "", //// remove?
fileQuery: "",
status: null,
loading: {
listBackupRepositories: true,
restoreBackupContent: false,
readBackupSnapshots: false
readBackupSnapshots: false,
getStatus: false
},
error: {
listBackupRepositories: "",
restoreBackupContent: "",
readBackupSnapshots: ""
readBackupSnapshots: "",
getStatus: ""
}
};
},
Expand All @@ -162,6 +187,17 @@ export default {
return this.backupRepositories.find(
(repo) => repo.repository_id === this.selectedRepositoryId
);
},
installationNodeLabel() {
if (this.status) {
if (this.status.node_ui_name) {
return this.status.node_ui_name;
} else {
return `${this.$t("status.node")} ${this.status.node}`;
}
} else {
return "-";
}
}
},
watch: {
Expand All @@ -171,6 +207,9 @@ export default {
} else if (this.step == "snapshot") {
this.selectedSnapshotId = "";
this.readBackupSnapshots();
} else if (this.step == "file") {
this.selectedFile = "";
this.getStatus();
}
}
},
Expand Down Expand Up @@ -333,41 +372,37 @@ export default {
this.loading.restoreBackupContent = true;
this.error.restoreBackupContent = "";
const taskAction = "restore-backup-content";
const eventId = this.getUuid();

// register to task error
this.$root.$off(taskAction + "-aborted");
this.$root.$once(
taskAction + "-aborted",
`${taskAction}-aborted-${eventId}`,
this.restoreBackupContentAborted
);

// register to task completion
this.$root.$off(taskAction + "-completed");
this.$root.$once(
taskAction + "-completed",
`${taskAction}-completed-${eventId}`,
this.restoreBackupContentCompleted
);

const res = await to(
this.createClusterTask({
this.createModuleTaskForApp(this.instanceName, {
action: taskAction,
data: {
// repository: this.selectedInstance.repository_id, ////
// path: this.selectedInstance.path,
// snapshot: this.selectedSnapshotId.id,
// node: this.selectedNode.id,
// replace: this.replaceExistingApp
snapshot: this.selectedSnapshotId,
destination: this.selectedRepositoryId,
repopath: this.selectedRepository.path,
share: this.shareName,
content: this.selectedFile
},
extra: {
title: this.$t("action." + taskAction),
//// todo
description: this.$t("backup.restoring_app_to_node"),
////
completion: {
i18nString: "backup.instance_restored_to_node",
extraTextParams: ["node"],
outputTextParams: ["module_id"]
}
description: this.$t("shares.restoring_to_share_name", {
name: this.shareName
})
}
})
);
Expand All @@ -376,11 +411,14 @@ export default {
if (err) {
console.error(`error creating task ${taskAction}`, err);
this.error.restoreBackupContent = this.getErrorMessage(err);
this.loading.restoreBackupContent = false;
return;
}

// close modal immediately, no validation needed
this.$emit("hide");
this.loading.restoreBackupContent = false;
this.fileQuery = "";
},
restoreBackupContentAborted(taskResult, taskContext) {
console.error(`${taskContext.action} aborted`, taskResult);
Expand All @@ -389,13 +427,59 @@ export default {
},
restoreBackupContentCompleted() {
this.loading.restoreBackupContent = false;
},
async getStatus() {
this.loading.getStatus = true;
this.error.getStatus = "";
const taskAction = "get-status";
const eventId = this.getUuid();

// register to task error
this.core.$root.$once(
`${taskAction}-aborted-${eventId}`,
this.getStatusAborted
);

// register to task completion
this.core.$root.$once(
`${taskAction}-completed-${eventId}`,
this.getStatusCompleted
);

const res = await to(
this.createModuleTaskForApp(this.instanceName, {
action: taskAction,
extra: {
title: this.$t("action." + taskAction),
isNotificationHidden: true,
eventId
}
})
);
const err = res[0];

if (err) {
console.error(`error creating task ${taskAction}`, err);
this.error.getStatus = this.getErrorMessage(err);
this.loading.getStatus = false;
return;
}
},
getStatusAborted(taskResult, taskContext) {
console.error(`${taskContext.action} aborted`, taskResult);
this.error.getStatus = this.$t("error.generic_error");
this.loading.getStatus = false;
},
getStatusCompleted(taskContext, taskResult) {
this.status = taskResult.output;
this.loading.getStatus = false;
}
}
};
</script>

<style scoped lang="scss">
.mb-14 {
margin-bottom: 14rem;
.mb-9 {
margin-bottom: 9rem;
}
</style>
18 changes: 9 additions & 9 deletions ui/src/components/shared-folders/RestoreFileSearch.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ export default {

setTimeout(() => {
// mark textQuery in dataOptions
const searchResults = document.querySelector(".search-results");
const searchResults = document.querySelector(".search-results"); ////

// const searchResultsElem = document.querySelector(".search-results"); ////

Expand Down Expand Up @@ -662,13 +662,13 @@ export default {
seekSnapshotContentsCompleted(taskContext, taskResult) {
console.log("seekSnapshotContentsCompleted", taskResult.output); ////

//// remove mock
taskResult.output.contents.unshift(
"WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"
);
taskResult.output.contents.unshift(
"Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua."
);
// //// remove mock
// taskResult.output.contents.unshift(
// "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW"
// );
// taskResult.output.contents.unshift(
// "Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua."
// );

this.dataOptions = taskResult.output.contents.map((item) => ({
name: item,
Expand Down Expand Up @@ -725,10 +725,10 @@ export default {

/* allow options with very long text to wrap on a new line */
.restore-file-search .bx--list-box__menu-item__option {
overflow: visible;
height: auto;
text-overflow: clip;
word-wrap: break-word;
white-space: normal;
}

.restore-file-search .bx--tooltip__label .bx--tooltip__trigger {
Expand Down

0 comments on commit d801245

Please sign in to comment.