Add task-based history export tracking

client/src/components/Common/ExportForm.test.js

@@ -35,4 +35,35 @@ describe("ExportForm.vue", () => {
     it("should localize button text", async () => {
         expect(wrapper.find(".export-button").text()).toBeLocalizationOf("Export");
     });
+
+    it("should emit 'export' event with correct inputs on export button click", async () => {
+        await wrapper.setData({
+            name: "export.tar.gz",
+            directory: "gxfiles://",
+        });
+        expect(wrapper.emitted()).not.toHaveProperty("export");
+
+        await wrapper.find(".export-button").trigger("click");
+
+        expect(wrapper.emitted()).toHaveProperty("export");
+        expect(wrapper.emitted()["export"][0][0]).toBe("gxfiles://");
+        expect(wrapper.emitted()["export"][0][1]).toBe("export.tar.gz");
+    });
+
+    it("should clear the inputs after export when clearInputAfterExport is enabled", async () => {
+        await wrapper.setProps({
+            clearInputAfterExport: true,
+        });
+        await wrapper.setData({
+            name: "export.tar.gz",
+            directory: "gxfiles://",
+        });
+        expect(wrapper.vm.directory).toEqual("gxfiles://");
+        expect(wrapper.vm.name).toEqual("export.tar.gz");
+
+        await wrapper.find(".export-button").trigger("click");
+
+        expect(wrapper.vm.directory).toBe(null);
+        expect(wrapper.vm.name).toBe(null);
+    });
 });

client/src/components/Common/ExportForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="export-to-remote-file">
         <b-form-group
             id="fieldset-directory"
             label-for="directory"
@@ -32,6 +32,10 @@ export default {
             type: String,
             default: "archive",
         },
+        clearInputAfterExport: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -59,6 +63,10 @@ export default {
     methods: {
         doExport() {
             this.$emit("export", this.directory, this.name);
+            if (this.clearInputAfterExport) {
+                this.directory = null;
+                this.name = null;
+            }
         },
     },
 };

client/src/components/Common/ExportRecordDetails.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { computed } from "vue";
+import { BAlert, BCard, BCardTitle } from "bootstrap-vue";
+import LoadingSpan from "components/LoadingSpan";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faExclamationCircle, faExclamationTriangle, faCheckCircle, faClock } from "@fortawesome/free-solid-svg-icons";
+import { ExportRecordModel } from "./models/exportRecordModel";
+
+library.add(faExclamationCircle, faExclamationTriangle, faCheckCircle, faClock);
+
+const props = defineProps({
+    record: {
+        type: ExportRecordModel,
+        required: true,
+    },
+    objectType: {
+        type: String,
+        required: true,
+    },
+    actionMessage: {
+        type: String,
+        default: null,
+    },
+    actionMessageVariant: {
+        type: String,
+        default: "info",
+    },
+});
+
+const emit = defineEmits(["onReimport", "onDownload", "onActionMessageDismissed"]);
+
+const title = computed(() => (props.record.isReady ? `Exported` : `Export started`));
+const preparingMessage = computed(
+    () => `Preparing export. This may take some time depending on the size of your ${props.objectType}`
+);
+
+async function reimportObject() {
+    emit("onReimport", props.record);
+}
+
+function downloadObject() {
+    emit("onDownload", props.record);
+}
+
+function onMessageDismissed() {
+    emit("onActionMessageDismissed");
+}
+</script>
+
+<template>
+    <b-card class="export-record-details">
+        <b-card-title>
+            <b>{{ title }}</b> {{ props.record.elapsedTime }}
+        </b-card-title>
+        <p v-if="!props.record.isPreparing">
+            Format: <b class="record-archive-format">{{ props.record.modelStoreFormat }}</b>
+        </p>
+        <span v-if="props.record.isPreparing">
+            <loading-span :message="preparingMessage" />
+        </span>
+        <div v-else>
+            <div v-if="props.record.hasFailed">
+                <font-awesome-icon
+                    icon="exclamation-circle"
+                    class="text-danger record-failed-icon"
+                    title="Export failed" />
+                <span>
+                    Something failed during this export. Please try again and if the problem persist contact your
+                    administrator.
+                </span>
+                <b-alert show variant="danger">{{ props.record.errorMessage }}</b-alert>
+            </div>
+            <div v-else-if="props.record.isUpToDate" title="Up to date">
+                <font-awesome-icon icon="check-circle" class="text-success record-up-to-date-icon" />
+                <span> This export record contains the latest changes of the {{ props.objectType }}. </span>
+            </div>
+            <div v-else>
+                <font-awesome-icon icon="exclamation-triangle" class="text-warning record-outdated-icon" />
+                <span>
+                    This export is outdated and contains the changes of this {{ props.objectType }} from
+                    {{ props.record.elapsedTime }}.
+                </span>
+            </div>
+
+            <p v-if="props.record.canExpire" class="mt-3">
+                <span v-if="props.record.hasExpired">
+                    <font-awesome-icon icon="clock" class="text-danger record-expired-icon" /> This download link has
+                    expired.
+                </span>
+                <span v-else>
+                    <font-awesome-icon icon="clock" class="text-warning record-expiration-warning-icon" /> This download
+                    link expires {{ props.record.expirationElapsedTime }}.
+                </span>
+            </p>
+
+            <div v-if="props.record.isReady">
+                <p class="mt-3">You can do the following actions with this {{ props.objectType }} export:</p>
+                <b-alert
+                    v-if="props.actionMessage !== null"
+                    :variant="props.actionMessageVariant"
+                    show
+                    fade
+                    dismissible
+                    @dismissed="onMessageDismissed">
+                    {{ props.actionMessage }}
+                </b-alert>
+                <div v-else class="actions">
+                    <b-button
+                        v-if="props.record.canDownload"
+                        class="record-download-btn"
+                        variant="primary"
+                        @click="downloadObject">
+                        Download
+                    </b-button>
+                    <b-button
+                        v-if="props.record.canReimport"
+                        class="record-reimport-btn"
+                        variant="primary"
+                        @click="reimportObject">
+                        Reimport
+                    </b-button>
+                </div>
+            </div>
+        </div>
+    </b-card>
+</template>

client/src/components/Common/ExportRecordTable.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, ref } from "vue";
+import { BCard, BButton, BButtonGroup, BButtonToolbar, BCollapse, BTable, BLink } from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faExclamationCircle,
+    faCheckCircle,
+    faDownload,
+    faFileImport,
+    faSpinner,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(faExclamationCircle, faCheckCircle, faDownload, faFileImport, faSpinner);
+
+const props = defineProps({
+    records: {
+        type: Array,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["onReimport", "onDownload"]);
+
+const fields = [
+    { key: "elapsedTime", label: "Exported" },
+    { key: "format", label: "Format" },
+    { key: "expires", label: "Expires" },
+    { key: "isUpToDate", label: "Up to date", class: "text-center" },
+    { key: "isReady", label: "Ready", class: "text-center" },
+    { key: "actions", label: "Actions" },
+];
+
+const isExpanded = ref(false);
+const title = computed(() => (isExpanded.value ? `Hide export records` : `Show export records`));
+
+async function reimportObject(record) {
+    emit("onReimport", record);
+}
+
+function downloadObject(record) {
+    emit("onDownload", record);
+}
+</script>
+
+<template>
+    <div>
+        <b-link
+            :class="isExpanded ? null : 'collapsed'"
+            :aria-expanded="isExpanded ? 'true' : 'false'"
+            aria-controls="collapse-previous"
+            @click="isExpanded = !isExpanded">
+            {{ title }}
+        </b-link>
+        <b-collapse id="collapse-previous" v-model="isExpanded">
+            <b-card>
+                <b-table :items="props.records" :fields="fields">
+                    <template v-slot:cell(elapsedTime)="row">
+                        <span :title="row.item.date">{{ row.value }}</span>
+                    </template>
+                    <template v-slot:cell(format)="row">
+                        <span>{{ row.item.modelStoreFormat }}</span>
+                    </template>
+                    <template v-slot:cell(expires)="row">
+                        <span v-if="row.item.hasExpired">Expired</span>
+                        <span v-else-if="row.item.expirationDate" :title="row.item.expirationDate">{{
+                            row.item.expirationElapsedTime
+                        }}</span>
+                        <span v-else>No</span>
+                    </template>
+                    <template v-slot:cell(isUpToDate)="row">
+                        <font-awesome-icon
+                            v-if="row.item.isUpToDate"
+                            icon="check-circle"
+                            class="text-success"
+                            title="This export record contains the latest changes." />
+                        <font-awesome-icon
+                            v-else
+                            icon="exclamation-circle"
+                            class="text-danger"
+                            title="This export record is outdated. Please consider generating a new export if you need the latest changes." />
+                    </template>
+                    <template v-slot:cell(isReady)="row">
+                        <font-awesome-icon
+                            v-if="row.item.isReady"
+                            icon="check-circle"
+                            class="text-success"
+                            title="Ready to download or import." />
+                        <font-awesome-icon
+                            v-else-if="row.item.isPreparing"
+                            icon="spinner"
+                            spin
+                            class="text-info"
+                            title="Exporting in progress..." />
+                        <font-awesome-icon
+                            v-else-if="row.item.hasExpired"
+                            icon="exclamation-circle"
+                            class="text-danger"
+                            title="The export has expired." />
+                        <font-awesome-icon
+                            v-else
+                            icon="exclamation-circle"
+                            class="text-danger"
+                            title="The export failed." />
+                    </template>
+                    <template v-slot:cell(actions)="row">
+                        <b-button-toolbar aria-label="Actions">
+                            <b-button-group>
+                                <b-button
+                                    v-b-tooltip.hover.bottom
+                                    :disabled="!row.item.canDownload"
+                                    title="Download"
+                                    @click="downloadObject(row.item)">
+                                    <font-awesome-icon icon="download" />
+                                </b-button>
+                                <b-button
+                                    v-b-tooltip.hover.bottom
+                                    :disabled="!row.item.canReimport"
+                                    title="Reimport"
+                                    @click="reimportObject(row.item)">
+                                    <font-awesome-icon icon="file-import" />
+                                </b-button>
+                            </b-button-group>
+                        </b-button-toolbar>
+                    </template>
+                </b-table>
+            </b-card>
+        </b-collapse>
+    </div>
+</template>

client/src/components/Common/models/exportRecordModel.test.ts

@@ -0,0 +1,61 @@
+import { ExportRecordModel } from "./exportRecordModel";
+import {
+    EXPECTED_EXPIRATION_DATE,
+    EXPIRED_STS_DOWNLOAD_RESPONSE,
+    FAILED_DOWNLOAD_RESPONSE,
+    FILE_SOURCE_STORE_RESPONSE,
+    RECENT_STS_DOWNLOAD_RESPONSE,
+} from "./testData/exportData";
+
+describe("ExportRecordModel", () => {
+    describe("STS Download Record", () => {
+        const stsDownloadRecord = new ExportRecordModel(RECENT_STS_DOWNLOAD_RESPONSE);
+
+        it("should be considered temporal (STS) when it has a short term storage ID defined", () => {
+            expect(stsDownloadRecord.isStsDownload).toBe(true);
+            expect(stsDownloadRecord.stsDownloadId).toBeTruthy();
+        });
+
+        it("should allow download when ready and not yet expired", () => {
+            expect(stsDownloadRecord.isReady).toBe(true);
+            expect(stsDownloadRecord.hasExpired).toBe(false);
+            expect(stsDownloadRecord.canDownload).toBe(true);
+        });
+    });
+
+    describe("Expired STS Download Record", () => {
+        const expiredDownloadRecord = new ExportRecordModel(EXPIRED_STS_DOWNLOAD_RESPONSE);
+
+        it("should calculate the correct expiration date", () => {
+            expect(expiredDownloadRecord.canExpire).toBe(true);
+            expect(expiredDownloadRecord.expirationDate).toStrictEqual(EXPECTED_EXPIRATION_DATE());
+        });
+
+        it("should not allow download when expired", () => {
+            expect(expiredDownloadRecord.hasExpired).toBe(true);
+            expect(expiredDownloadRecord.canDownload).toBe(false);
+            expect(expiredDownloadRecord.isReady).toBe(false);
+        });
+    });
+
+    describe("Failed STS Download Record", () => {
+        const failedDownloadRecord = new ExportRecordModel(FAILED_DOWNLOAD_RESPONSE);
+
+        it("should not be downloadable", () => {
+            expect(failedDownloadRecord.isReady).toBe(false);
+            expect(failedDownloadRecord.isPreparing).toBe(false);
+            expect(failedDownloadRecord.hasExpired).toBe(false);
+            expect(failedDownloadRecord.canDownload).toBe(false);
+        });
+    });
+
+    describe("File Source Storage Record", () => {
+        const failedDownloadRecord = new ExportRecordModel(FILE_SOURCE_STORE_RESPONSE);
+
+        it("should be importable", () => {
+            expect(failedDownloadRecord.isReady).toBe(true);
+            expect(failedDownloadRecord.canReimport).toBe(true);
+            expect(failedDownloadRecord.importUri).toBeTruthy();
+        });
+    });
+});