[O2B-1145] Add QC flags overview page

lib/public/services/detectors/detectorsProvider.js

@@ -35,13 +35,6 @@ export class DetectorsProvider extends Observable {
                 Success: (detectors) => detectors.filter(({ name }) => name !== TST_DETECTOR_NAME),
             }))
             .build();
-        this._dpl$ = new ObservableData(RemoteData.notAsked());
-        this._physicalDpl$ = ObservableData.builder()
-            .source(this._dpl$)
-            .apply((remoteDetectors) => remoteDetectors.apply({
-                Success: (detectors) => detectors.filter(({ name }) => name && name !== TST_DETECTOR_NAME),
-            }))
-            .build();
     }
 
     /**
@@ -82,30 +75,6 @@ export class DetectorsProvider extends Observable {
         return this._physical$;
     }
 
-    /**
-     * Return all DPL detectors
-     *
-     * @return {ObservableData<RemoteData<DplDetector[], ApiError>>} the observable DPL detectors list
-     */
-    get dpl$() {
-        if (this._isStale()) {
-            this._load();
-        }
-        return this._dpl$;
-    }
-
-    /**
-     * Return physical (meaning actual detectors, for example excluding TST) DPL detectors list observable data
-     *
-     * @return {ObservableData<RemoteData<Detector[], ApiError>>} the observable physical DPL detectors list
-     */
-    get physicalDpl$() {
-        if (this._isStale()) {
-            this._load();
-        }
-        return this._physicalDpl$;
-    }
-
     /**
      * States if the cached detectors list need to be created or updated
      *
@@ -116,9 +85,6 @@ export class DetectorsProvider extends Observable {
         return this._all$.getCurrent().match({
             NotAsked: () => true,
             Other: () => false,
-        }) || this._dpl$.getCurrent().match({
-            NotAsked: () => true,
-            Other: () => false,
         });
     }
 
@@ -134,12 +100,6 @@ export class DetectorsProvider extends Observable {
             ({ data: detectors }) => this._all$.setCurrent(RemoteData.success(detectors)),
             (error) => this._all$.setCurrent(RemoteData.failure(error)),
         );
-
-        this._dpl$.setCurrent(RemoteData.loading());
-        getRemoteData('/api/dpl-detectors').then(
-            ({ data: detectors }) => this._dpl$.setCurrent(RemoteData.success(detectors)),
-            (error) => this._dpl$.setCurrent(RemoteData.failure(error)),
-        );
     }
 }
 

lib/public/services/detectors/dplDetectorsProvider.js

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { Observable, RemoteData } from '/js/src/index.js';
+import { getRemoteData } from '../../utilities/fetch/getRemoteData.js';
+import { ObservableData } from '../../utilities/ObservableData.js';
+
+const TST_DETECTOR_NAME = 'TST';
+
+/**
+ * Service class to fetch DPL detectors from the backend
+ */
+export class DplDetectorsProvider extends Observable {
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+        this._all$ = new ObservableData(RemoteData.notAsked());
+        this._physical$ = ObservableData.builder()
+            .source(this._all$)
+            .apply((remoteDetectors) => remoteDetectors.apply({
+                Success: (detectors) => detectors.filter(({ name }) => name && name !== TST_DETECTOR_NAME),
+            }))
+            .build();
+    }
+
+    /**
+     * Return all DPL detectors observable data
+     *
+     * @return {ObservableData<RemoteData<DplDetector[], ApiError>>} the observable DPL detectors list
+     */
+    get all$() {
+        if (this._isStale()) {
+            this._load();
+        }
+        return this._all$;
+    }
+
+    /**
+     * Return physical (meaning actual detectors, for example excluding TST) DPL detectors list observable data
+     *
+     * @return {ObservableData<RemoteData<Detector[], ApiError>>} the observable physical DPL detectors list
+     */
+    get physical$() {
+        if (this._isStale()) {
+            this._load();
+        }
+        return this._physical$;
+    }
+
+    /**
+     * States if the cached detectors list need to be created or updated
+     *
+     * @return {boolean} true if the detectors list must be refreshed
+     * @private
+     */
+    _isStale() {
+        return this._all$.getCurrent().match({
+            NotAsked: () => true,
+            Other: () => false,
+        });
+    }
+
+    /**
+     * Load all the detectors and feed the observable data
+     *
+     * @return {void}
+     * @private
+     */
+    _load() {
+        this._all$.setCurrent(RemoteData.loading());
+        getRemoteData('/api/dpl-detectors').then(
+            ({ data: detectors }) => this._all$.setCurrent(RemoteData.success(detectors)),
+            (error) => this._all$.setCurrent(RemoteData.failure(error)),
+        );
+    }
+}
+
+export const dplDetectorsProvider = new DplDetectorsProvider();

lib/public/views/QcFlags/ActiveColumns/qcFlagsActiveColumns.js

@@ -13,12 +13,12 @@
 
 import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
-import { qcFlagColoredBadge } from '../common/qcFlagColoredBadge.js';
+import { qcFlagTypeColoredBadge } from '../common/qcFlagTypeColoredBadge.js';
 
 /**
- * List of active columns for a generic periods table
+ * Active columns configuration for QC flags pages
  */
 export const qcFlagsActiveColumns = {
     id: {
         name: 'Id',
         visible: false,
@@ -27,22 +27,23 @@
     flagType: {
         name: 'Type',
         visible: true,
-        format: (flagType) => h('.flex-row.g1', [flagType.name, qcFlagColoredBadge(flagType)]),
+        format: (flagType) => h('.flex-row.g1', [flagType.name, qcFlagTypeColoredBadge(flagType)]),
     },
+
     from: {
         name: 'From',
         visible: true,
-        format: (timestamp) => timestamp ?
-            formatTimestamp(timestamp, false)
+        format: (timestamp) => timestamp
+            ? formatTimestamp(timestamp, false)
             : 'Whole run coverage',
     },
 
     to: {
         name: 'To',
         visible: true,
-        format: (timestamp) => timestamp ?
-            formatTimestamp(timestamp, false)
+        format: (timestamp) => timestamp
+            ? formatTimestamp(timestamp, false)
             : 'Whole run coverage',
     },
 
     comment: {
@@ -53,18 +54,18 @@
     createdBy: {
         name: 'Created by',
         visible: true,
-        format: (_, { createdBy }) => createdBy?.name || '-',
+        format: (createdBy) => createdBy?.name || '-',
     },
 
     createdAt: {
         name: 'Created at',
         visible: true,
         format: (timestamp) => formatTimestamp(timestamp, false),
     },
 
     updatedAt: {
         name: 'Updated at',
         visible: true,
         format: (timestamp) => formatTimestamp(timestamp, false),
     },
 };

lib/public/views/QcFlags/ForDataPass/QcFlagsForDataPassOverviewModel.js

@@ -15,6 +15,7 @@
 import { RemoteData } from '/js/src/index.js';
 import { getRemoteData } from '../../../utilities/fetch/getRemoteData.js';
 import { QcFlagsOverviewModel } from '../Overview/QcFlagsOverviewModel.js';
+import { ObservableData } from '../../../utilities/ObservableData.js';
 
 /**
  * Quality Control Flags for data pass overview model
@@ -25,34 +26,61 @@
     /**
      * The constructor of the Overview model object
      */
     constructor() {
         super();
+        this._dataPass$ = new ObservableData(RemoteData.notAsked());
+        this._dataPass$.bubbleTo(this);
     }
 
     // eslint-disable-next-line valid-jsdoc
     /**
      * @inheritdoc
      */
     getRootEndpoint() {
         const params = {
             filter: {
-                dataPassIds: [this._dataProductionId],
+                dataPassIds: [this._dataPassId],
             },
         };
         return buildUrl(super.getRootEndpoint(), params);
     }
 
     // eslint-disable-next-line valid-jsdoc
     /**
      * @inheritdoc
      */
-    async _fetchDataProduction() {
-        this._dataProduction$.setCurrent(RemoteData.loading());
+    load() {
+        this._fetchDataPass();
+        super.load();
+    }
+
+    /**
+     * Fetch data pass data which QC glags are fetched
+     * @return {Promise<void>} promise
+     */
+    async _fetchDataPass() {
+        this._dataPass$.setCurrent(RemoteData.loading());
         try {
-            const { data: [dataPass] } = await getRemoteData(`/api/dataPasses/?filter[ids][]=${this._dataProductionId}`);
-            this._dataProduction$.setCurrent(RemoteData.success(dataPass));
+            const { data: [dataPass] } = await getRemoteData(`/api/dataPasses/?filter[ids][]=${this._dataPassId}`);
+            this._dataPass$.setCurrent(RemoteData.success(dataPass));
         } catch (error) {
-            this._dataProduction$.setCurrent(RemoteData.failure(error));
+            this._dataPass$.setCurrent(RemoteData.failure(error));
         }
     }
+
+    /**
+     * Set id of data pass which for QC flags should be fetched
+     * @param {number} dataPassId data pass id
+     */
+    set dataPassId(dataPassId) {
+        this._dataPassId = dataPassId;
+    }
+
+    /**
+     * Get current data pass which QC flags are fetched
+     * @return {RemoteData<SimulationPass>} data pass remote data
+     */
+    get dataPass() {
+        return this._dataPass$.getCurrent();
+    }
 }

lib/public/views/QcFlags/ForDataPass/QcFlagsForDataPassOverviewPage.js

@@ -12,22 +12,54 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
+import { h, iconWarning } from '/js/src/index.js';
 import { QcFlagsOverviewComponenet } from '../Overview/qcFlagOverviewComponent.js';
 import { frontLink } from '../../../components/common/navigation/frontLink.js';
+import { tooltip } from '../../../components/common/popover/tooltip.js';
+import { breadcrumbs } from '../../../components/common/navigation/breadcrumbs.js';
+import spinner from '../../../components/common/spinner.js';
 
 /**
  * Render Quality Control Flags For Data Pass Overview page
  * @param {Model} model The overall model object.
  * @returns {Component} The overview page
  */
 export const QcFlagsForDataPassOverviewPage = ({ qcFlags: { forDataPassOverviewModel: qcFlagsForDataPassOverviewModel } }) => {
-    /**
-     * Create links to runs per Data pass
-     * @param {DataPass} dataPass the Data pass
-     * @return {Componenet} in-breadcrumbs link to runs per Data page
-     */
-    const productionLinkFactory = (dataPass) =>
-        h('h2', frontLink(dataPass.name, 'runs-per-data-pass', { dataPassId: dataPass.id }));
-    return QcFlagsOverviewComponenet(qcFlagsForDataPassOverviewModel, { productionLinkFactory });
+    const {
+        run: remoteRun,
+        dplDetector: remoteDplDetector,
+        dataPass: remoteDataPass,
+    } = qcFlagsForDataPassOverviewModel;
+
+    const commonTitle = h('h2', 'QC');
+    return h('', {
+        onremove: () => qcFlagsForDataPassOverviewModel.reset(),
+    }, [
+        h('.flex-row.justify-between.items-center', [
+            h('.flex-row.g1.items-center', [
+                remoteDataPass.match({
+                    Success: (dataPass) => remoteRun.match({
+                        Success: (run) => remoteDplDetector.match({
+                            Success: (dplDetector) => breadcrumbs([
+                                commonTitle,
+                                h('h2', frontLink(dataPass.name, 'runs-per-data-pass', { dataPassId: dataPass.id })),
+                                h('h2', frontLink(run.runNumber, 'run-detail', { runNumber: run.runNumber })),
+                                h('h2', dplDetector.name),
+                            ]),
+                            Failure: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'Not able to load detector info')],
+                            Loading: () => [commonTitle, h('', spinner({ size: 2, absolute: false }))],
+                            NotAsked: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'No data was asked for')],
+                        }),
+                        Failure: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'Not able to load run info')],
+                        Loading: () => [commonTitle, h('', spinner({ size: 2, absolute: false }))],
+                        NotAsked: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'No data was asked for')],
+                    }),
+                    Failure: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'Not able to load data pass info')],
+                    Loading: () => [commonTitle, h('', spinner({ size: 2, absolute: false }))],
+                    NotAsked: () => [commonTitle, tooltip(h('.f3', iconWarning()), 'No data was asked for')],
+                }),
+            ]),
+        ]),
+        QcFlagsOverviewComponenet(qcFlagsForDataPassOverviewModel),
+    ]);
 };