[O2B-1559] Warn the user of mutated filters when loading the url

lib/public/app.css

@@ -266,6 +266,12 @@ th.text-center, td.text-center {
     border-color: #f5c6cb;
 }
 
+.alert-warning {
+    color: var(--color-warning);
+    background-color: #ffe8c8;
+    border-color: #fdd69f;
+}
+
 .alert-danger hr {
     border-top-color: #f1b0b7;
 }

lib/public/components/Filters/common/FilteringModel.js

@@ -25,11 +25,13 @@ export class FilteringModel extends Observable {
      *
      * @param {QueryRouter} router router that controls the application's page navigation
      * @param {Object<string, FilterModel>} filters the filters with their label and model
+     * @param {object} warnings object reference used to define warnings.
      */
-    constructor(router, filters) {
+    constructor(router, filters, warnings) {
         super();
         this._visualChange$ = new Observable();
         this._pageIdentifier = null;
+        this._warnings = warnings;
 
         this._router = router;
         this._filters = {};
@@ -142,22 +144,30 @@ export class FilteringModel extends Observable {
      * @returns {undefined}
      */
     setFilterFromURL(notify = false) {
-        const { params: { page = '', filter } } = this._router;
+        const { params: { page = '', filter = {} } } = this._router;
 
         if (this._pageIdentifier === page) {
-            if (filter) {
-                for (const [key, value] of Object.entries(filter)) {
-                    if (key in this._filters) {
-                        this._filters[key].normalized = value;
-                    }
+            const unknownFilters = [];
+
+            for (const [key, value] of Object.entries(filter)) {
+                if (key in this._filters) {
+                    this._filters[key].normalized = value;
+                } else {
+                    unknownFilters.push(`'${key}'`);
                 }
-            } else {
-                this.reset();
             }
-        }
 
-        if (notify) {
-            this.notify();
+            if (unknownFilters.length) {
+                this._warnings.set(
+                    'Unknown Filters',
+                    `The filters: [${unknownFilters.join(', ')}]; are not reccognised. Check if they are spelled correctly.`,
+                );
+            } else {
+                this._warnings.delete('Unknown Filters');
+            }
+            if (notify) {
+                this.notify();
+            }
         }
     }
 

lib/public/components/common/messages/warningComponent.js

@@ -0,0 +1,35 @@
+import { h } from '/js/src/index.js';
+import { iconX } from '/js/src/icons.js';
+
+/**
+ * Component to display whenever a page has warnings.
+ *
+ * @param {OverviewPageModel} overviewModel model that controlls an overview page
+ * @returns {Component} the warning componen
+ */
+export const warningComponent = (overviewModel) => {
+    const { warnings } = overviewModel;
+
+    if (!warnings.size) {
+        return null;
+    }
+
+    return h('details.alert.alert-warning', { open: true }, [
+        h('summary', 'Warnings'),
+        h('ul', warnings.entries().toArray().map(([key, message]) =>
+            h('li.flex-row.items-center', [
+                h(
+                    '.btn.btn-pill.alert-warning.mh1',
+                    {
+                        onclick: () => {
+                            warnings.delete(key);
+                            overviewModel.notify();
+                        },
+                    },
+                    iconX(),
+                ),
+                h('strong.mh1', `${key}:`),
+                h('span', message),
+            ]))),
+    ]);
+};

lib/public/models/OverviewModel.js

@@ -38,7 +38,7 @@ export class OverviewPageModel extends Observable {
      */
     constructor() {
         super();
-
+        this._warnings = new Map();
         this._sortModel = new SortModel();
         this._sortModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
@@ -97,6 +97,7 @@ export class OverviewPageModel extends Observable {
     reset() {
         this._item$.setCurrent(RemoteData.notAsked());
         this._pagination.reset();
+        this._warnings.clear();
     }
 
     /**
@@ -249,4 +250,13 @@ export class OverviewPageModel extends Observable {
     hasAnyData() {
         return this._item$.getCurrent().match({ Success: ({ length = 0 } = {}) => length > 0, Other: () => false });
     }
+
+    /**
+     * Returns the warnings object
+     *
+     * @return {object} the warning model
+     */
+    get warnings() {
+        return this._warnings;
+    }
 }

lib/public/views/DataPasses/DataPassesOverviewModel.js

@@ -35,6 +35,7 @@ export class DataPassesOverviewModel extends OverviewPageModel {
                     availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })),
                 }),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;

lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewPage.js

@@ -19,6 +19,7 @@ import { filtersPanelPopover } from '../../../components/Filters/common/filtersP
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { dataPassesActiveColumns } from '../ActiveColumns/dataPassesActiveColumns.js';
 import { DataPassVersionStatus } from '../../../domain/enums/DataPassVersionStatus.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 42;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -42,24 +43,18 @@ const getRowClasses = ({ versions }) => {
  * @returns {Component} The overview screen
  */
 export const DataPassesPerLhcPeriodOverviewPage = ({ dataPasses: { perLhcPeriodOverviewModel: dataPassesPerLhcPeriodOverviewModel } }) => {
-    dataPassesPerLhcPeriodOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { filteringModel, sortModel, pagination, items } = dataPassesPerLhcPeriodOverviewModel;
+
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', {
         onremove: () => dataPassesPerLhcPeriodOverviewModel.reset(),
     }, [
-        h('.flex-row.header-container.pv2', filtersPanelPopover(dataPassesPerLhcPeriodOverviewModel.filteringModel, dataPassesActiveColumns)),
+        h('.flex-row.header-container.pv2', filtersPanelPopover(filteringModel, dataPassesActiveColumns)),
+        warningComponent(dataPassesPerLhcPeriodOverviewModel),
         h('.w-100.flex-column', [
-            table(
-                dataPassesPerLhcPeriodOverviewModel.items,
-                dataPassesActiveColumns,
-                { classes: getRowClasses },
-                null,
-                { sort: dataPassesPerLhcPeriodOverviewModel.sortModel },
-            ),
-            paginationComponent(dataPassesPerLhcPeriodOverviewModel.pagination),
+            table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
+            paginationComponent(pagination),
         ]),
     ]);
 };

lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewPage.js

@@ -22,6 +22,7 @@ import { breadcrumbs } from '../../../components/common/navigation/breadcrumbs.j
 import spinner from '../../../components/common/spinner.js';
 import { tooltip } from '../../../components/common/popover/tooltip.js';
 import { DataPassVersionStatus } from '../../../domain/enums/DataPassVersionStatus.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 42;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -46,20 +47,17 @@ const getRowClasses = ({ versions }) => {
  */
 export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
     perSimulationPassOverviewModel: dataPassesPerSimulationPassOverviewModel } }) => {
-    dataPassesPerSimulationPassOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { items, simulationPass, pagination, filteringModel, sortModel } = dataPassesPerSimulationPassOverviewModel;
 
-    const { items, simulationPass, pagination } = dataPassesPerSimulationPassOverviewModel;
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     const commonTitle = h('h2#breadcrumb-header', 'Data Passes per MC');
 
     return h('', {
         onremove: () => dataPassesPerSimulationPassOverviewModel.reset(),
     }, [
         h('.flex-row.items-center.g2', [
-            filtersPanelPopover(dataPassesPerSimulationPassOverviewModel.filteringModel, dataPassesActiveColumns),
+            filtersPanelPopover(filteringModel, dataPassesActiveColumns),
             h(
                 '.flex-row.g1.items-center',
                 simulationPass.match({
@@ -70,14 +68,9 @@ export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
                 }),
             ),
         ]),
+        warningComponent(dataPassesPerSimulationPassOverviewModel),
         h('.w-100.flex-column', [
-            table(
-                items,
-                dataPassesActiveColumns,
-                { classes: getRowClasses },
-                null,
-                { sort: dataPassesPerSimulationPassOverviewModel.sortModel },
-            ),
+            table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
             paginationComponent(pagination),
         ]),
     ]);

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -48,6 +48,7 @@ export class EnvironmentOverviewModel extends OverviewPageModel {
                 }),
                 ids: new RawTextFilterModel(),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;

lib/public/views/Environments/Overview/environmentOverviewComponent.js

@@ -17,6 +17,7 @@ import { environmentsActiveColumns } from '../ActiveColumns/environmentsActiveCo
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 58;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -30,16 +31,14 @@ const PAGE_USED_HEIGHT = 181;
 export const environmentOverviewComponent = (envsOverviewModel) => {
     const { pagination, environments } = envsOverviewModel;
 
-    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', [
         h(
             '.flex-row.header-container.g2.pv2',
             filtersPanelPopover(envsOverviewModel, environmentsActiveColumns),
         ),
+        warningComponent(envsOverviewModel),
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
             table(environments, environmentsActiveColumns, { classes: 'table-sm' }),

lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js

@@ -49,6 +49,7 @@ export class LhcFillsOverviewModel extends OverviewPageModel {
                 beamTypes: new BeamTypeFilterModel(),
                 schemeName: new RawTextFilterModel(),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;

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

@@ -19,6 +19,7 @@ import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplay
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 53.3;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -41,20 +42,18 @@ export const Index = (model) => h('', {
  * @returns {Object} Html page
  */
 const showLhcFillsTable = (lhcFillsOverviewModel) => {
-    lhcFillsOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-        1,
-    ));
+    const { items, pagination, filteringModel } = lhcFillsOverviewModel;
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT, 1));
 
     return [
         h('.flex-row.header-container.g2.pv2', [
             filtersPanelPopover(lhcFillsOverviewModel, lhcFillsActiveColumns),
-            toggleFilter(lhcFillsOverviewModel.filteringModel.get('hasStableBeams'), 'STABLE BEAM ONLY'),
+            toggleFilter(filteringModel.get('hasStableBeams'), 'STABLE BEAM ONLY'),
         ]),
+        warningComponent(lhcFillsOverviewModel),
         h('.w-100.flex-column', [
-            table(lhcFillsOverviewModel.items, lhcFillsActiveColumns, null, { tableClasses: '.table-sm' }),
-            paginationComponent(lhcFillsOverviewModel.pagination),
+            table(items, lhcFillsActiveColumns, null, { tableClasses: '.table-sm' }),
+            paginationComponent(pagination),
         ]),
     ];
 };

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

@@ -38,6 +38,7 @@ export class LogsOverviewModel extends Observable {
      */
     constructor(model, excludeAnonymous = false, pageIdentifier) {
         super();
+        this._warnings = new Map();
 
         this._filteringModel = new FilteringModel(
             model.router,
@@ -51,6 +52,7 @@ export class LogsOverviewModel extends Observable {
                 fillNumbers: new RawTextFilterModel(),
                 created: new TimeRangeInputModel(),
             },
+            this._warnings,
         );
 
         this._overviewSortModel = new SortModel();
@@ -183,6 +185,15 @@ export class LogsOverviewModel extends Observable {
         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
      *

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

@@ -19,6 +19,7 @@ import { paginationComponent } from '../../../components/Pagination/paginationCo
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { excludeAnonymousLogAuthorToggle } from '../../../components/Filters/LogsFilter/author/authorFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 69;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -30,22 +31,22 @@ const PAGE_USED_HEIGHT = 215;
  * @return {Component} Returns a vnode with the table containing the logs
  */
 const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
-    logsOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { pagination, filteringModel, logs, overviewSortModel } = logsOverviewModel;
+
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', [
         h('#main-action-bar.flex-row.justify-between.header-container.pv2', [
             h('.flex-row.g3', [
                 filtersPanelPopover(logsOverviewModel, logsActiveColumns),
-                excludeAnonymousLogAuthorToggle(logsOverviewModel.filteringModel.get('author')),
+                excludeAnonymousLogAuthorToggle(filteringModel.get('author')),
             ]),
             actionButtons(),
         ]),
+        warningComponent(logsOverviewModel),
         h('.w-100.flex-column', [
-            table(logsOverviewModel.logs, logsActiveColumns, null, null, { sort: logsOverviewModel.overviewSortModel }),
-            paginationComponent(logsOverviewModel.pagination),
+            table(logs, logsActiveColumns, null, null, { sort: overviewSortModel }),
+            paginationComponent(pagination),
         ]),
     ]);
 };

lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js

@@ -36,6 +36,7 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
                 methods: new TextTokensFilterModel(),
                 bad: new RadioButtonFilterModel([{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }]),
             },
+            this._warnings,
         );
 
         this._filteringModel.pageIdentifier = pageIdentifier;