feat: make the warnings removable

NarrowsProjects · NarrowsProjects · commit 58b9eefc49a3 · 2026-06-12T16:29:54.000+02:00
diff --git a/lib/public/components/Filters/common/FilteringModel.js b/lib/public/components/Filters/common/FilteringModel.js
@@ -161,9 +161,9 @@ export class FilteringModel extends Observable {
             }
 
             if (unknownFilters.length) {
-                this._warnings['Unknown Filters'] = unknownFilters.join(', ');
+                this._warnings.set('Unknown Filters', unknownFilters.join(', '));
             } else {
-                delete this._warnings['Unknown Filters'];
+                this._warnings.delete('Unknown Filters');
             }
             if (notify) {
                 this.notify();
diff --git a/lib/public/components/common/messages/warningComponent.js b/lib/public/components/common/messages/warningComponent.js
@@ -1,18 +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 {Array<(string, string)>} warnings an array of warnings and messages
+ * @param {OverviewPageModel} overviewModel model that controlls an overview page
  * @returns {Component} the warning componen
  */
-export const warningComponent = (warnings) => {
-    if (!warnings.length) {
+export const warningComponent = (overviewModel) => {
+    const { warnings } = overviewModel;
+
+    if (!warnings.size) {
         return null;
     }
 
-    return h('details.alert alert-warning', [
+    return h('details.alert.alert-warning', [
         h('summary', 'Warnings'),
-        h('ul', warnings.map(([key, message]) => h('li', `${key}: ${message}`))),
+        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),
+            ]))),
     ]);
 };
diff --git a/lib/public/models/OverviewModel.js b/lib/public/models/OverviewModel.js
@@ -257,6 +257,6 @@ export class OverviewPageModel extends Observable {
      * @return {object} the warning model
      */
     get warnings() {
-        return this._warnings.entries().toArray();
+        return this._warnings;
     }
 }
diff --git a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewPage.js b/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewPage.js
@@ -43,15 +43,15 @@ const getRowClasses = ({ versions }) => {
  * @returns {Component} The overview screen
  */
 export const DataPassesPerLhcPeriodOverviewPage = ({ dataPasses: { perLhcPeriodOverviewModel: dataPassesPerLhcPeriodOverviewModel } }) => {
-    const { filteringModel, warnings, sortModel, pagination, items } = dataPassesPerLhcPeriodOverviewModel;
+    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(filteringModel, dataPassesActiveColumns)),
-        warningComponent(warnings),
+        warningComponent(dataPassesPerLhcPeriodOverviewModel),
         h('.w-100.flex-column', [
             table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
             paginationComponent(pagination),
diff --git a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewPage.js b/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewPage.js
@@ -47,7 +47,7 @@ const getRowClasses = ({ versions }) => {
  */
 export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
     perSimulationPassOverviewModel: dataPassesPerSimulationPassOverviewModel } }) => {
-    const { items, simulationPass, pagination, warnings, filteringModel, sortModel } = dataPassesPerSimulationPassOverviewModel;
+    const { items, simulationPass, pagination, filteringModel, sortModel } = dataPassesPerSimulationPassOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -68,7 +68,7 @@ export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
                 }),
             ),
         ]),
-        warningComponent(warnings),
+        warningComponent(dataPassesPerSimulationPassOverviewModel),
         h('.w-100.flex-column', [
             table(items, dataPassesActiveColumns, { classes: getRowClasses }, null, { sort: sortModel }),
             paginationComponent(pagination),
diff --git a/lib/public/views/Environments/Overview/environmentOverviewComponent.js b/lib/public/views/Environments/Overview/environmentOverviewComponent.js
@@ -29,7 +29,7 @@ const PAGE_USED_HEIGHT = 181;
  * @returns {Object} Html page
  */
 export const environmentOverviewComponent = (envsOverviewModel) => {
-    const { pagination, environments, warnings } = envsOverviewModel;
+    const { pagination, environments } = envsOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -38,7 +38,7 @@ export const environmentOverviewComponent = (envsOverviewModel) => {
             '.flex-row.header-container.g2.pv2',
             filtersPanelPopover(envsOverviewModel, environmentsActiveColumns),
         ),
-        warningComponent(warnings),
+        warningComponent(envsOverviewModel),
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
             table(environments, environmentsActiveColumns, { classes: 'table-sm' }),
diff --git a/lib/public/views/LhcFills/Overview/index.js b/lib/public/views/LhcFills/Overview/index.js
@@ -42,15 +42,15 @@ export const Index = (model) => h('', {
  * @returns {Object} Html page
  */
 const showLhcFillsTable = (lhcFillsOverviewModel) => {
-    const { items, pagination, filteringModel, warnings } = lhcFillsOverviewModel;
+    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(filteringModel.get('hasStableBeams'), 'STABLE BEAM ONLY'),
         ]),
-        warningComponent(warnings),
+        warningComponent(lhcFillsOverviewModel),
         h('.w-100.flex-column', [
             table(items, lhcFillsActiveColumns, null, { tableClasses: '.table-sm' }),
             paginationComponent(pagination),
diff --git a/lib/public/views/Logs/Overview/LogsOverviewModel.js b/lib/public/views/Logs/Overview/LogsOverviewModel.js
@@ -191,7 +191,7 @@ export class LogsOverviewModel extends Observable {
      * @return {object} the warning model
      */
     get warnings() {
-        return Object.entries(this._warnings);
+        return this._warnings;
     }
 
     /**
diff --git a/lib/public/views/Logs/Overview/index.js b/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, warnings } = logsOverviewModel;
+    const { pagination, filteringModel, logs, overviewSortModel } = logsOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -43,7 +43,7 @@ const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
             ]),
             actionButtons(),
         ]),
-        warningComponent(warnings),
+        warningComponent(logsOverviewModel),
         h('.w-100.flex-column', [
             table(logs, logsActiveColumns, null, null, { sort: overviewSortModel }),
             paginationComponent(pagination),
diff --git a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewPage.js b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewPage.js
@@ -31,7 +31,7 @@ const PAGE_USED_HEIGHT = 215;
  * @return {Component} The overview page
  */
 export const QcFlagTypesOverviewPage = ({ qcFlagTypes: { overviewModel } }) => {
-    const { items: qcFlagTypes, pagination, warnings, sortModel } = overviewModel;
+    const { items: qcFlagTypes, pagination, sortModel } = overviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -48,7 +48,7 @@ export const QcFlagTypesOverviewPage = ({ qcFlagTypes: { overviewModel } }) => {
                 }),
             ],
         ]),
-        warningComponent(warnings),
+        warningComponent(overviewModel),
         h('.flex-column.w-100', [
             table(qcFlagTypes, qcFlagTypesActiveColumns, { classes: '.table-sm' }, null, { sort: sortModel }),
             paginationComponent(pagination),
diff --git a/lib/public/views/Runs/Overview/RunsOverviewPage.js b/lib/public/views/Runs/Overview/RunsOverviewPage.js
@@ -47,7 +47,7 @@ export const togglePhysicsOnlyFilter = (runDefinitionFilterModel) => {
  * @return {Component} Returns a vnode with the table containing the runs
  */
 export const RunsOverviewPage = ({ runs: { overviewModel: runsOverviewModel }, modalModel }) => {
-    const { pagination, items, exportModel, filteringModel, warnings } = runsOverviewModel;
+    const { pagination, items, exportModel, filteringModel } = runsOverviewModel;
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', [
@@ -57,7 +57,7 @@ export const RunsOverviewPage = ({ runs: { overviewModel: runsOverviewModel }, m
             togglePhysicsOnlyFilter(filteringModel.get('definitions')),
             exportTriggerAndModal(exportModel, modalModel),
         ]),
-        warningComponent(warnings),
+        warningComponent(runsOverviewModel),
         h('.flex-column.w-100', [
             table(items, runsActiveColumns),
             paginationComponent(pagination),
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -114,7 +114,6 @@ export const RunsPerDataPassOverviewPage = ({
         skimmableRuns: remoteSkimmableRuns,
         freezeOrUnfreezeActionState,
         discardAllQcFlagsActionState,
-        warnings,
     } = perDataPassOverviewModel;
 
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Physics Runs');
@@ -299,7 +298,7 @@ export const RunsPerDataPassOverviewPage = ({
                 { alignment: 'right' },
             )),
         ]),
-        warningComponent(warnings),
+        warningComponent(perDataPassOverviewModel),
         h(
             '.intermediate-flex-column',
             { onremove: () => perDataPassOverviewModel._abortGaqFetches() },
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
@@ -63,7 +63,6 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
         qcSummary: remoteQcSummary,
         pdpBeamTypes,
         pagination,
-        warnings,
     } = perLhcPeriodOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
@@ -110,7 +109,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
             filtersPanelPopover(perLhcPeriodOverviewModel, activeColumns, { profile: 'runsPerLhcPeriod' }),
             h('.pl2#runOverviewFilter', textInputFilter(perLhcPeriodOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
             h('h2', ['Good, physics runs of ', lhcPeriodName]),
-            warningComponent(warnings),
+            warningComponent(perLhcPeriodOverviewModel),
             toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
             exportTriggerAndModal(perLhcPeriodOverviewModel.exportModel, modalModel),
         ]),
diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewPage.js
@@ -64,7 +64,6 @@ export const RunsPerSimulationPassOverviewPage = ({
         pdpBeamTypes,
         mcReproducibleAsNotBad,
         pagination,
-        warnings,
     } = perSimulationPassOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
@@ -120,7 +119,7 @@ export const RunsPerSimulationPassOverviewPage = ({
                 },
             ),
         ]),
-        warningComponent(warnings),
+        warningComponent(perSimulationPassOverviewModel),
         h(
             '.intermediate-flex-column',
             fullPageData.match({
diff --git a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewPage.js b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewPage.js
@@ -35,7 +35,7 @@ const PAGE_USED_HEIGHT = 215;
 export const AnchoredSimulationPassesOverviewPage = ({
     simulationPasses: { anchoredOverviewModel: anchoredSimulationPassesOverviewModel },
 }) => {
-    const { items, dataPass, pagination, warnings } = anchoredSimulationPassesOverviewModel;
+    const { items, dataPass, pagination, sortModel } = anchoredSimulationPassesOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Anchored MC');
@@ -58,14 +58,14 @@ export const AnchoredSimulationPassesOverviewPage = ({
                     }),
                 ),
             ]),
-            warningComponent(warnings),
+            warningComponent(anchoredSimulationPassesOverviewModel),
             h('.w-100.flex-column', [
                 table(
                     items,
                     simulationPassesActiveColumns,
                     { classes: '.table-sm' },
                     null,
-                    { sort: anchoredSimulationPassesOverviewModel.sortModel },
+                    { sort: sortModel },
                 ),
                 paginationComponent(pagination),
             ]),
diff --git a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewPage.js b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewPage.js
@@ -34,7 +34,7 @@ const PAGE_USED_HEIGHT = 215;
  */
 export const SimulationPassesPerLhcPeriodOverviewPage = ({ simulationPasses: {
     perLhcPeriodOverviewModel: simulationPassesPerLhcPeriodOverviewModel } }) => {
-    const { items: simulationPasses, lhcPeriod, pagination, sortModel, warnings } = simulationPassesPerLhcPeriodOverviewModel;
+    const { items: simulationPasses, lhcPeriod, pagination, sortModel } = simulationPassesPerLhcPeriodOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -55,7 +55,7 @@ export const SimulationPassesPerLhcPeriodOverviewPage = ({ simulationPasses: {
                 }),
             ),
         ]),
-        warningComponent(warnings),
+        warningComponent(simulationPassesPerLhcPeriodOverviewModel),
         h('.w-100.flex-column', [
             table(simulationPasses, simulationPassesActiveColumns, { classes: '.table-sm' }, null, { sort: sortModel }),
             paginationComponent(pagination),
diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js
@@ -30,7 +30,7 @@ const PAGE_USED_HEIGHT = 215;
  * @returns {Component} The overview screen
  */
 export const LhcPeriodsOverviewPage = ({ lhcPeriods: { overviewModel: lhcPeriodsOverviewModel } }) => {
-    const { warnings, sortModel, pagination, items } = lhcPeriodsOverviewModel;
+    const { sortModel, pagination, items } = lhcPeriodsOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
@@ -39,7 +39,7 @@ export const LhcPeriodsOverviewPage = ({ lhcPeriods: { overviewModel: lhcPeriods
             '.flex-row.header-container.pv2',
             filtersPanelPopover(lhcPeriodsOverviewModel, lhcPeriodsActiveColumns),
         ),
-        warningComponent(warnings),
+        warningComponent(lhcPeriodsOverviewModel),
         h('.w-100.flex-column', [
             table(items, lhcPeriodsActiveColumns, { classes: '.table-sm' }, null, { sort: sortModel }),
             paginationComponent(pagination),
diff --git a/test/public/components/warnings.test.js b/test/public/components/warnings.test.js
@@ -16,6 +16,7 @@ const {
     defaultBefore,
     defaultAfter,
     getInnerText,
+    pressElement,
 } = require('../defaults.js');
 
 module.exports = () => {
@@ -34,6 +35,13 @@ module.exports = () => {
         expect(warningText).to.equal('Unknown Filters: fake');
     });
 
+    it('Should remove warnings entry after clicking the x icon', async () => {
+        await pressElement(page, '.alert-warning .btn', true);
+        const warning = await page.$('.alert-warning');
+
+        expect(warning).to.be.null;
+    });
+
     after(async () => {
         await defaultAfter(page, browser);
     });

Original file line number	Diff line number	Diff line change
`@@ -161,9 +161,9 @@ export class FilteringModel extends Observable {`
`161`	`161`	`}`
`162`	`162`
`163`	`163`	`if (unknownFilters.length) {`
`164`		`- this._warnings['Unknown Filters'] = unknownFilters.join(', ');`
	`164`	`+ this._warnings.set('Unknown Filters', unknownFilters.join(', '));`
`165`	`165`	`} else {`
`166`		`- delete this._warnings['Unknown Filters'];`
	`166`	`+ this._warnings.delete('Unknown Filters');`
`167`	`167`	`}`
`168`	`168`	`if (notify) {`
`169`	`169`	`this.notify();`
Original file line number	Diff line number	Diff line change
`@@ -257,6 +257,6 @@ export class OverviewPageModel extends Observable {`
`257`	`257`	`* @return {object} the warning model`
`258`	`258`	`*/`
`259`	`259`	`get warnings() {`
`260`		`- return this._warnings.entries().toArray();`
	`260`	`+ return this._warnings;`
`261`	`261`	`}`
`262`	`262`	`}`
Original file line number	Diff line number	Diff line change
`@@ -191,7 +191,7 @@ export class LogsOverviewModel extends Observable {`
`191`	`191`	`* @return {object} the warning model`
`192`	`192`	`*/`
`193`	`193`	`get warnings() {`
`194`		`- return Object.entries(this._warnings);`
	`194`	`+ return this._warnings;`
`195`	`195`	`}`
`196`	`196`
`197`	`197`	`/**`