chore: add warning component to the toolbar of every overview page

NarrowsProjects · NarrowsProjects · commit ee42c74b032c · 2026-04-28T15:47:20.000+02:00
diff --git a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewPage.js b/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,20 @@ const getRowClasses = ({ versions }) => {
  * @returns {Component} The overview screen
  */
 export const DataPassesPerLhcPeriodOverviewPage = ({ dataPasses: { perLhcPeriodOverviewModel: dataPassesPerLhcPeriodOverviewModel } }) => {
-    dataPassesPerLhcPeriodOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
+    const { filteringModel, warnings, 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.g2', filtersPanelPopover(filteringModel, dataPassesActiveColumns), warningComponent(warnings)),
         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),
         ]),
     ]);
 };
diff --git a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewPage.js b/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, warnings, 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({
@@ -69,15 +67,10 @@ export const DataPassesPerSimulationPassOverviewPage = ({ dataPasses: {
                     NotAsked: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'No data was asked for')],
                 }),
             ),
+            warningComponent(warnings),
         ]),
         h('.w-100.flex-column', [
-            table(
-                items,
-                dataPassesActiveColumns,
-                { classes: getRowClasses },
-                null,
-                { sort: dataPassesPerSimulationPassOverviewModel.sortModel },
-            ),
+            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
@@ -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;
@@ -28,7 +29,7 @@ const PAGE_USED_HEIGHT = 181;
  * @returns {Object} Html page
  */
 export const environmentOverviewComponent = (envsOverviewModel) => {
-    const { pagination, environments } = envsOverviewModel;
+    const { pagination, environments, warnings } = envsOverviewModel;
 
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
         TABLEROW_HEIGHT,
@@ -39,6 +40,7 @@ export const environmentOverviewComponent = (envsOverviewModel) => {
         h(
             '.flex-row.header-container.g2.pv2',
             filtersPanelPopover(envsOverviewModel, environmentsActiveColumns),
+            warningComponent(warnings),
         ),
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
diff --git a/lib/public/views/LhcFills/Overview/index.js b/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,7 +42,9 @@ export const Index = (model) => h('', {
  * @returns {Object} Html page
  */
 const showLhcFillsTable = (lhcFillsOverviewModel) => {
-    lhcFillsOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
+    const { items, pagination, filteringModel, warnings } = lhcFillsOverviewModel;
+
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
         TABLEROW_HEIGHT,
         PAGE_USED_HEIGHT,
         1,
@@ -50,11 +53,12 @@ const showLhcFillsTable = (lhcFillsOverviewModel) => {
     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(warnings),
         ]),
         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),
         ]),
     ];
 };
diff --git a/lib/public/views/Logs/Overview/index.js b/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, warnings } = 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')),
+                warningComponent(warnings),
             ]),
             actionButtons(),
         ]),
         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),
         ]),
     ]);
 };
diff --git a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewPage.js b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewPage.js
@@ -19,6 +19,7 @@ import { qcFlagTypesActiveColumns } from '../ActiveColumns/qcFlagTypesActiveColu
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { BkpRoles } from '../../../domain/enums/BkpRoles.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 30;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -30,18 +31,16 @@ const PAGE_USED_HEIGHT = 215;
  * @return {Component} The overview page
  */
 export const QcFlagTypesOverviewPage = ({ qcFlagTypes: { overviewModel } }) => {
-    overviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { items: qcFlagTypes, pagination, warnings, sortModel } = overviewModel;
 
-    const { items: qcFlagTypes } = overviewModel;
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', [
         h('.flex-row.justify-between.items-center.g2', [
             h('.flex-row.items-center.g2', [
                 filtersPanelPopover(overviewModel, qcFlagTypesActiveColumns),
                 h('h2', 'QC Flag Types'),
+                warningComponent(warnings),
             ]),
             sessionService.hasAccess([BkpRoles.ADMIN]) && [
                 frontLink(h('.flex-row.items-center.g1', [h('small', iconPlus()), 'QC Flag Type']), 'qc-flag-type-creation', {}, {
@@ -51,14 +50,8 @@ export const QcFlagTypesOverviewPage = ({ qcFlagTypes: { overviewModel } }) => {
             ],
         ]),
         h('.flex-column.w-100', [
-            table(
-                qcFlagTypes,
-                qcFlagTypesActiveColumns,
-                { classes: '.table-sm' },
-                null,
-                { sort: overviewModel.sortModel },
-            ),
-            paginationComponent(overviewModel.pagination),
+            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
@@ -20,6 +20,7 @@ import { table } from '../../../components/common/table/table.js';
 import { switchInput } from '../../../components/common/form/switchInput.js';
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -46,21 +47,20 @@ export const togglePhysicsOnlyFilter = (runDefinitionFilterModel) => {
  * @return {Component} Returns a vnode with the table containing the runs
  */
 export const RunsOverviewPage = ({ runs: { overviewModel: runsOverviewModel }, modalModel }) => {
-    runsOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
+    const { pagination, items, exportModel, filteringModel, warnings } = runsOverviewModel;
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
 
     return h('', [
         h('.flex-row.header-container.g2.pv2', [
             filtersPanelPopover(runsOverviewModel, runsActiveColumns),
             h('.pl2#runOverviewFilter', textInputFilter(runsOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
-            togglePhysicsOnlyFilter(runsOverviewModel.filteringModel.get('definitions')),
-            exportTriggerAndModal(runsOverviewModel.exportModel, modalModel),
+            togglePhysicsOnlyFilter(filteringModel.get('definitions')),
+            warningComponent(warnings),
+            exportTriggerAndModal(exportModel, modalModel),
         ]),
         h('.flex-column.w-100', [
-            table(runsOverviewModel.items, runsActiveColumns),
-            paginationComponent(runsOverviewModel.pagination),
+            table(items, runsActiveColumns),
+            paginationComponent(pagination),
         ]),
     ]);
 };
diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewPage.js
@@ -39,6 +39,7 @@ import { getInelasticInteractionRateColumns } from '../ActiveColumns/getInelasti
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -242,6 +243,7 @@ export const RunsPerDataPassOverviewPage = ({
                 ]),
             ),
             toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
+            warningComponent(perDataPassOverviewModel.warnings),
             h('.mlauto', qcSummaryLegendTooltip()),
             h('#actions-dropdown-button', DropdownComponent(
                 h('button.btn.btn-primary', h('.flex-row.g2', ['Actions', iconCaretBottom()])),
diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewPage.js
@@ -29,6 +29,7 @@ import { filtersPanelPopover } from '../../../components/Filters/common/filtersP
 import { exportTriggerAndModal } from '../../../components/common/dataExport/exportTriggerAndModal.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 62;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -66,6 +67,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
         mcReproducibleAsNotBad,
         qcSummary: remoteQcSummary,
         pdpBeamTypes,
+        warnings,
     } = perLhcPeriodOverviewModel;
 
     /**
@@ -110,6 +112,7 @@ export const RunsPerLhcPeriodOverviewPage = ({ runs: { perLhcPeriodOverviewModel
             filtersPanelPopover(perLhcPeriodOverviewModel, activeColumns, { profile: 'runsPerLhcPeriod' }),
             h('.pl2#runOverviewFilter', textInputFilter(perLhcPeriodOverviewModel.filteringModel, 'runNumbers', 'e.g. 534454, 534455...')),
             h('h2.flex-row', ['Good, physics runs of ', lhcPeriodName]),
+            warningComponent(warnings),
             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
@@ -29,6 +29,7 @@ import { exportTriggerAndModal } from '../../../components/common/dataExport/exp
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { toggleFilter } from '../../../components/Filters/common/filters/toggleFilter.js';
 import { textInputFilter } from '../../../components/Filters/common/filters/textInputFilter.js';
+import { warningComponent } from '../../../components/common/messages/warningComponent.js';
 
 const TABLEROW_HEIGHT = 59;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
@@ -67,6 +68,7 @@ export const RunsPerSimulationPassOverviewPage = ({
         sortModel,
         pdpBeamTypes,
         mcReproducibleAsNotBad,
+        warnings,
     } = perSimulationPassOverviewModel;
 
     const commonTitle = h('h2', 'Runs per MC');
@@ -103,6 +105,7 @@ export const RunsPerSimulationPassOverviewPage = ({
                 ]),
             ),
             toggleFilter(mcReproducibleAsNotBad, h('em', 'MC.R as not-bad'), 'mcReproducibleAsNotBadToggle'),
+            warningComponent(warnings),
             h('.mlauto', qcSummaryLegendTooltip()),
             exportTriggerAndModal(perSimulationPassOverviewModel.exportModel, modalModel, { autoMarginLeft: false }),
             frontLink(
diff --git a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewPage.js b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewPage.js
@@ -21,6 +21,7 @@ import { simulationPassesActiveColumns } from '../ActiveColumns/simulationPasses
 import { breadcrumbs } from '../../../components/common/navigation/breadcrumbs.js';
 import spinner from '../../../components/common/spinner.js';
 import { tooltip } from '../../../components/common/popover/tooltip.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;
@@ -34,13 +35,9 @@ const PAGE_USED_HEIGHT = 215;
 export const AnchoredSimulationPassesOverviewPage = ({
     simulationPasses: { anchoredOverviewModel: anchoredSimulationPassesOverviewModel },
 }) => {
-    anchoredSimulationPassesOverviewModel.pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
-        TABLEROW_HEIGHT,
-        PAGE_USED_HEIGHT,
-    ));
-
-    const { items, dataPass, pagination } = anchoredSimulationPassesOverviewModel;
+    const { items, dataPass, pagination, warnings } = anchoredSimulationPassesOverviewModel;
 
+    pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT));
     const commonTitle = h('h2#breadcrumb-header', { style: 'white-space: nowrap;' }, 'Anchored MC');
 
     return h(
@@ -60,6 +57,7 @@ export const AnchoredSimulationPassesOverviewPage = ({
                         NotAsked: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'No data was asked for')],
                     }),
                 ),
+                warningComponent(warnings),
             ]),
             h('.w-100.flex-column', [
                 table(
diff --git a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewPage.js b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewPage.js
diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js
