[OB2-1594] Migrate log overview page to use the overview class

lib/public/views/Home/Overview/HomePage.js

@@ -46,7 +46,7 @@ export const HomePage = ({ home: { logsOverviewModel, runsOverviewModel, lhcFill
             h('.flex-row.g2', [
                 h('.flex-column', [
                     h('h3', 'Log Entries'),
-                    h('.f6#logs-panel', table(logsOverviewModel.logs, logsActiveColumns, null, { profile: 'home' })),
+                    h('.f6#logs-panel', table(logsOverviewModel.items, logsActiveColumns, null, { profile: 'home' })),
                 ]),
                 h('.flex-column', [
                     h('h3', 'LHC Fills'),

lib/public/views/Home/Overview/HomePageModel.js

@@ -42,7 +42,7 @@ export class HomePageModel extends Observable {
      */
     loadOverview() {
         this._runsOverviewModel.load();
-        this._logsOverviewModel.fetchLogs(true);
+        this._logsOverviewModel.load(true);
         this._lhcFillsOverviewModel.load();
     }
 

lib/public/views/Logs/LogsModel.js

@@ -56,7 +56,7 @@ export class LogsModel extends Observable {
     loadOverview() {
         if (!this._overviewModel.pagination.isInfiniteScrollEnabled) {
             this._overviewModel.setFilterFromURL(false);
-            this._overviewModel.fetchLogs();
+            this._overviewModel.load();
         }
     }
 

lib/public/views/Logs/Overview/LogsOverviewModel.js

@@ -11,24 +11,22 @@
  * or submit itself to any jurisdiction.
  */
 
-import { buildUrl, Observable, RemoteData } from '/js/src/index.js';
+import { buildUrl } from '/js/src/index.js';
 import { TagFilterModel } from '../../../components/Filters/common/TagFilterModel.js';
-import { SortModel } from '../../../components/common/table/SortModel.js';
 import { debounce } from '../../../utilities/debounce.js';
 import { AuthorFilterModel } from '../../../components/Filters/LogsFilter/author/AuthorFilterModel.js';
-import { PaginationModel } from '../../../components/Pagination/PaginationModel.js';
-import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js';
 import { tagsProvider } from '../../../services/tag/tagsProvider.js';
 import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 import { RawTextFilterModel } from '../../../components/Filters/common/filters/RawTextFilterModel.js';
 import { TimeRangeInputModel } from '../../../components/Filters/common/filters/TimeRangeInputModel.js';
+import { OverviewPageModel } from '../../../models/OverviewModel.js';
 
 /**
  * Model representing handlers for log entries page
  *
  * @implements {OverviewModel}
  */
-export class LogsOverviewModel extends Observable {
+export class LogsOverviewModel extends OverviewPageModel {
     /**
      * The constructor of the Overview model object
      *
@@ -38,8 +36,6 @@ export class LogsOverviewModel extends Observable {
      */
     constructor(model, excludeAnonymous = false, pageIdentifier) {
         super();
-        this._warnings = new Map();
-
         this._filteringModel = new FilteringModel(
             model.router,
             {
@@ -55,10 +51,8 @@ export class LogsOverviewModel extends Observable {
             this._warnings,
         );
 
-        this._overviewSortModel = new SortModel();
-        this._pagination = new PaginationModel();
         const updateDebounceTime = () => {
-            this._debouncedFetchAllLogs = debounce(this.fetchLogs.bind(this), model.inputDebounceTime);
+            this._debouncedLoad = debounce(this.load.bind(this), model.inputDebounceTime);
         };
 
         updateDebounceTime();
@@ -71,13 +65,7 @@ export class LogsOverviewModel extends Observable {
         this._filteringModel.visualChange$.bubbleTo(this);
 
         // Sub-models
-        this._overviewSortModel.observe(() => this._applyFilters(true));
-        this._overviewSortModel.visualChange$.bubbleTo(this);
-
-        this._pagination.observe(() => this.fetchLogs());
-        this._pagination.itemsPerPageSelector$.observe(() => this.notify());
-
-        this._logs = RemoteData.NotAsked();
+        this._sortModel.observe(() => this._applyFilters(true));
     }
 
     /**
@@ -90,48 +78,10 @@ export class LogsOverviewModel extends Observable {
     }
 
     /**
-     * Retrieve every relevant log from the API
-     * @returns {Promise<void>} Injects the data object with the response data
-     */
-    async fetchLogs() {
-        const keepExisting = this._pagination.currentPage > 1 && this._pagination.isInfiniteScrollEnabled;
-        const sortOn = this._overviewSortModel.appliedOn;
-        const sortDirection = this._overviewSortModel.appliedDirection;
-
-        if (!keepExisting) {
-            this._logs = RemoteData.loading();
-            this.notify();
-        }
-
-        const params = {
-            ...sortOn && sortDirection && {
-                [`sort[${sortOn}]`]: sortDirection,
-            },
-            filter: this._filteringModel.normalized,
-            'page[offset]': this._pagination.firstItemOffset,
-            'page[limit]': this._pagination.itemsPerPage,
-        };
-
-        const endpoint = buildUrl('/api/logs', params);
-
-        try {
-            const { items, totalCount } = await getRemoteDataSlice(endpoint);
-            const concatenateWith = keepExisting ? this._logs.payload ?? [] : [];
-            this._logs = RemoteData.success([...concatenateWith, ...items]);
-            this._pagination.itemsCount = totalCount;
-        } catch (errors) {
-            this._logs = RemoteData.failure(errors);
-        }
-
-        this.notify();
-    }
-
-    /**
-     * Return current logs
-     * @return {RemoteData<*[]>} current data
+     * @inheritdoc
      */
-    get logs() {
-        return this._logs;
+    getRootEndpoint() {
+        return buildUrl('/api/logs', { filter: this.filteringModel.normalized });
     }
 
     /**
@@ -167,33 +117,6 @@ export class LogsOverviewModel extends Observable {
         return this._filteringModel;
     }
 
-    /**
-     * Returns the model handling the overview page table sort
-     *
-     * @return {SortModel} the sort model
-     */
-    get overviewSortModel() {
-        return this._overviewSortModel;
-    }
-
-    /**
-     * Returns the pagination model
-     *
-     * @return {PaginationModel} the pagination model
-     */
-    get pagination() {
-        return this._pagination;
-    }
-
-    /**
-     * Returns the warnings object
-     *
-     * @return {object} the warning model
-     */
-    get warnings() {
-        return this._warnings;
-    }
-
     /**
      * Apply the current filtering and update the remote data list
      *
@@ -203,6 +126,6 @@ export class LogsOverviewModel extends Observable {
      */
     _applyFilters(now = false) {
         this._pagination.silentlySetCurrentPage(1);
-        now ? this.fetchLogs() : this._debouncedFetchAllLogs();
+        now ? this.load() : this._debouncedLoad();
     }
 }

lib/public/views/Logs/Overview/index.js

@@ -31,7 +31,7 @@ const PAGE_USED_HEIGHT = 215;
  * @return {Component} Returns a vnode with the table containing the logs
  */
 const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
-    const { pagination, filteringModel, logs, overviewSortModel } = logsOverviewModel;
+    const { pagination, filteringModel, items, sortModel } = logsOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -45,7 +45,7 @@ const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
         ]),
         warningComponent(logsOverviewModel),
         h('.w-100.flex-column', [
-            table(logs, logsActiveColumns, null, null, { sort: overviewSortModel }),
+            table(items, logsActiveColumns, null, null, { sort: sortModel }),
             paginationComponent(pagination),
         ]),
     ]);