[O2B-1194] Refactor export functionality

lib/public/models/OverviewModel.js

@@ -16,6 +16,13 @@
 import { PaginatedRemoteDataSource } from '../utilities/fetch/PaginatedRemoteDataSource.js';
 import { PaginationModel } from '../components/Pagination/PaginationModel.js';
 import { buildUrl } from '../utilities/fetch/buildUrl.js';
+import pick from '../utilities/pick.js';
+import { createCSVExport, createJSONExport } from '../utilities/export.js';
+
+export const EXPORT_FORMATS = {
+    JSON: 'JSON',
+    CSV: 'CSV',
+};
 
 /**
  * Interface of a model representing an overview page state
@@ -51,6 +58,25 @@
 
         this._observableItems = ObservableData.builder().initialValue(RemoteData.loading()).build();
         this._observableItems.bubbleTo(this);
+
+        this._exportDataSource = new PaginatedRemoteDataSource();
+        this._exportObservableItems = ObservableData.builder()
+            .initialValue(RemoteData.notAsked())
+            .apply((remoteData) => remoteData.apply({ Success: ({ items }) => this.processItems(items) }))
+            .build();
+        this._exportObservableItems.bubbleTo(this);
+        this._exportDataSource.pipe(this._exportObservableItems);
+
+        /**
+         * Default name for export data file, can be overriden in inherting classes
+         */
+        this._defaultExportName = 'bkp-export';
+        this._exportName = '';
+
+        /**
+         * Default format
+         */
+        this._defaultExportFormat = EXPORT_FORMATS.JSON;
     }
 
     /**
@@ -119,8 +145,97 @@
      * @return {Promise<void>} void
      */
     async load() {
-        const params = await this.getLoadParameters();
-        await this._dataSource.fetch(buildUrl(this.getRootEndpoint(), params));
+        const paginationParams = await this.getLoadParameters();
+        this._exportObservableItems.setCurrent(RemoteData.notAsked());
+        await this._dataSource.fetch(buildUrl(this.getRootEndpoint(), paginationParams));
+    }
+
+    /**
+     * Fetch all the relevant items from the API
+     * @return {Promise<void>} void
+     */
+    async loadExport() {
+        return this._exportObservableItems.getCurrent().match({
+            Success: () => null,
+            Loading: () => null,
+            Other: () => this._exportDataSource.fetch(this.getRootEndpoint()),
+        });
+    }
+
+    /**
+     * Create the export with the variables set in the model, handling errors appropriately
+     * @param {object[]} items The source content.
+     * @param {Object<string, Function<*, string>>} exportFormats defines how particual fields of data units will be formated
+     * @return {void}
+     */
+    async export(items, exportFormats = {}) {
+        const { exportFields, exportName } = this;
+        const exportData = items.map((item) => {
+            const entries = Object.entries(pick(item, exportFields));
+            const formattedEntries = entries.map(([key, value]) => {
+                const formatExport = exportFormats[key].exportFormat || ((identity) => identity);
+                return [key, formatExport(value, item)];
+            });
+            return Object.fromEntries(formattedEntries);
+        });
+        if (this.exportFormat === EXPORT_FORMATS.JSON) {
+            createJSONExport(exportData, `${exportName}.json`, 'application/json');
+        } else if (this.exportFormat === EXPORT_FORMATS.CSV) {
+            createCSVExport(exportData, `${exportName}.csv`, 'text/csv;charset=utf-8;');
+        } else {
+            throw new Error('Incorrect export format');
+        }
+    }
+
+    /**
+     * Get export name
+     * @return {string} name
+     */
+    get exportName() {
+        return this._exportName || this._defaultExportName;
+    }
+
+    /**
+     * Set export name
+     * @param {string} exportName name
+     */
+    set exportName(exportName) {
+        this._exportName = exportName;
+    }
+
+    /**
+     * Get the field values that will be exported
+     * @return {string[]} the list of fields of a export items to be included in the export
+     */
+    get exportFields() {
+        return this._exportFields || [];
+    }
+
+    /**
+     * Set the selected fields to be exported
+     * @param {SelectionOption[]|HTMLCollection} exportFields the list of fields of export items to be included in the export
+     */
+    set exportFields(exportFields) {
+        this._exportFields = [];
+        [...exportFields].map((selectedOption) => this._exportFields.push(selectedOption.value));
+        this.notify();
+    }
+
+    /**
+     * Get the output format of the export
+     * @return {string} the output format
+     */
+    get exportFormat() {
+        return this._exportFormat || this._defaultExportFormat;
+    }
+
+    /**
+     * Set the export type parameter of the export to be created
+     * @param {string} exportFormat one of acceptable export formats @see EXPORT_FORMATS
+     */
+    set exportFormat(exportFormat) {
+        this._exportFormat = exportFormat;
+        this.notify();
     }
 
     /**
@@ -136,8 +251,30 @@
     }
 
     /**
-     * Return the current items remote data
+     * States if the list of NOT paginated runs contains the full list of runs available under the given criteria
      *
+     * @return {boolean|null} true if the runs list is not truncated (null if all items are not yet available)
+     */
+    get areExportItemsTruncated() {
+        return this.exportItems.match({
+            Success: (payload) => this.items.match({
+                Success: () => payload.length < this._pagination.itemsCount,
+                Other: () => null,
+            }),
+            Other: () => null,
+        });
+    }
+
+    /**
+     * Return the export items remote data
+     * @return {RemoteData<T[]>} the items
+     */
+    get exportItems() {
+        return this._exportObservableItems.getCurrent();
+    }
+
+    /**
+     * Return the current items remote data
      * @return {RemoteData<T[]>} the items
      */
     get items() {

lib/public/views/Runs/Overview/RunsOverviewModel.js

@@ -11,16 +11,12 @@
  * or submit itself to any jurisdiction.
  */
 
-import { RemoteData } from '/js/src/index.js';
-import { createCSVExport, createJSONExport } from '../../../utilities/export.js';
 import { TagFilterModel } from '../../../components/Filters/common/TagFilterModel.js';
 import { debounce } from '../../../utilities/debounce.js';
 import { DetectorsFilterModel } from '../../../components/Filters/RunsFilter/DetectorsFilterModel.js';
 import { RunTypesSelectionDropdownModel } from '../../../components/runTypes/RunTypesSelectionDropdownModel.js';
 import { EorReasonFilterModel } from '../../../components/Filters/RunsFilter/EorReasonsFilterModel.js';
-import pick from '../../../utilities/pick.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
-import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js';
 
 /**
  * Model representing handlers for runs page
@@ -51,8 +47,7 @@
         this._eorReasonsFilterModel.observe(() => this._applyFilters());
         this._eorReasonsFilterModel.visualChange$.observe(() => this.notify());
 
-        // Export items
-        this._allRuns = RemoteData.NotAsked();
+        this._defaultExportName = 'runs';
 
         this.reset(false);
         // eslint-disable-next-line no-return-assign,require-jsdoc
@@ -70,64 +65,6 @@
         return `/api/runs?${paramsString}`;
     }
 
-    // eslint-disable-next-line valid-jsdoc
-    /**
-     * @inheritdoc
-     */
-    async load() {
-        this._allRuns = RemoteData.NotAsked();
-        super.load();
-    }
-
-    /**
-     * Create the export with the variables set in the model, handling errors appropriately
-     * @param {object[]} runs The source content.
-     * @param {string} fileName The name of the file including the output format.
-     * @param {Object<string, Function<*, string>>} exportFormats defines how particual fields of data units will be formated
-     * @return {void}
-     */
-    async createRunsExport(runs, fileName, exportFormats) {
-        if (runs.length > 0) {
-            const selectedRunsFields = this.getSelectedRunsFields() || [];
-            runs = runs.map((selectedRun) => {
-                const entries = Object.entries(pick(selectedRun, selectedRunsFields));
-                const formattedEntries = entries.map(([key, value]) => {
-                    const formatExport = exportFormats[key].exportFormat || ((identity) => identity);
-                    return [key, formatExport(value, selectedRun)];
-                });
-                return Object.fromEntries(formattedEntries);
-            }),
-            this.getSelectedExportType() === 'CSV'
-                ? createCSVExport(runs, `${fileName}.csv`, 'text/csv;charset=utf-8;')
-                : createJSONExport(runs, `${fileName}.json`, 'application/json');
-        } else {
-            this._observableItems.setCurrent(RemoteData.failure([
-                {
-                    title: 'No data found',
-                    detail: 'No valid runs were found for provided run number(s)',
-                },
-            ]));
-            this.notify();
-        }
-    }
-
-    /**
-     * Get the field values that will be exported
-     * @return {Array} the field objects of the current export being created
-     */
-    getSelectedRunsFields() {
-        return this.selectedRunsFields;
-    }
-
-    /**
-     * Get the output format of the export
-     *
-     * @return {string} the output format
-     */
-    getSelectedExportType() {
-        return this.selectedExportType;
-    }
-
     /**
      * Returns all filtering, sorting and pagination settings to their default values
      * @param {boolean} fetch Whether to refetch all logs after filters have been reset
@@ -302,29 +239,6 @@
         return this.activeFilters;
     }
 
-    /**
-     * Set the export type parameter of the current export being created
-     * @param {string} selectedExportType Received string from the view
-     * @return {void}
-     */
-    setSelectedExportType(selectedExportType) {
-        this.selectedExportType = selectedExportType;
-        this.notify();
-    }
-
-    /**
-     * Updates the selected fields ID array according to the HTML attributes of the options
-     *
-     * @param {HTMLCollection} selectedOptions The currently selected fields by the user,
-     * according to HTML specification
-     * @return {undefined}
-     */
-    setSelectedRunsFields(selectedOptions) {
-        this.selectedRunsFields = [];
-        [...selectedOptions].map((selectedOption) => this.selectedRunsFields.push(selectedOption.value));
-        this.notify();
-    }
-
     /**
      * Returns the current runNumber substring filter
      * @return {String} The current runNumber substring filter
@@ -799,32 +713,6 @@
         return this._detectorsFilterModel;
     }
 
-    /**
-     * Return all the runs currently filtered, without paging
-     *
-     * @return {RemoteData} the remote data of the runs
-     */
-    get allRuns() {
-        if (this._allRuns.isNotAsked()) {
-            this._fetchAllRunsWithoutPagination();
-        }
-
-        return this._allRuns;
-    }
-
-    /**
-     * States if the list of NOT paginated runs contains the full list of runs available under the given criteria
-     *
-     * @return {boolean|null} true if the runs list is not truncated (null if all runs are not yet available)
-     */
-    get isAllRunsTruncated() {
-        const { allRuns } = this;
-        if (!allRuns.isSuccess()) {
-            return null;
-        }
-        return allRuns.payload.length < this._pagination.itemsCount;
-    }
-
     /**
      * Return the model handling the filtering on run types
      *
@@ -942,33 +830,6 @@
         };
     }
 
-    /**
-     * Update the cache containing all the runs without paging
-     *
-     * @return {Promise<void>} void
-     * @private
-     */
-    async _fetchAllRunsWithoutPagination() {
-        if (this.items.isSuccess() && this.items.payload.length === this._pagination.itemsCount) {
-            this._allRuns = RemoteData.success([...this.items.payload]);
-            this.notify();
-            return;
-        }
-        this._allRuns = RemoteData.loading();
-        this.notify();
-
-        const endpoint = this.getRootEndpoint();
-
-        try {
-            const { items } = await getRemoteDataSlice(endpoint);
-            this._allRuns = RemoteData.success(items);
-        } catch (errors) {
-            this._allRuns = RemoteData.failure(errors);
-        }
-
-        this.notify();
-    }
-
     /**
      * Apply the current filtering and update the remote data list
      *

lib/public/views/Runs/Overview/RunsOverviewPage.js

@@ -13,7 +13,7 @@
 
 import { h } from '/js/src/index.js';
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
-import { exportRunsTriggerAndModal } from './exportRunsTriggerAndModal.js';
+import { exportTriggerAndModal } from './exportTriggerAndModal.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { runsActiveColumns } from '../ActiveColumns/runsActiveColumns.js';
@@ -56,7 +56,7 @@ export const RunsOverviewPage = ({ runs: { overviewModel: runsOverviewModel }, m
             filtersPanelPopover(runsOverviewModel, runsActiveColumns),
             h('.pl2#runOverviewFilter', runNumberFilter(runsOverviewModel)),
             togglePhysicsOnlyFilter(runsOverviewModel),
-            exportRunsTriggerAndModal(runsOverviewModel, modalModel),
+            exportTriggerAndModal(runsOverviewModel, modalModel, runsActiveColumns),
         ]),
         h('.flex-column.w-100', [
             table(runsOverviewModel.items, runsActiveColumns),