[OGUI-1856] Filter for pass names to be filled based on Bookkeeping (#3283)

- Added backend changes to QCG to fetch pass names at load time and based on an interval
  - The default interval is 6 hours
- The frontend fetches the pass names and builts a dropdown which is displayed upon clicking the Pass Name filter.
  - Typing updates the dropdown options list to match what is currently being typed.

Author: hehoon

QualityControl/common/library/typedef/DataPass.js

@@ -0,0 +1,18 @@
+/**
+ * @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.
+ */
+
+/**
+ * @typedef {object} DataPass
+ * @property {string} name - Human-readable data pass name.
+ * @property {boolean} isFrozen - Whether the data pass is frozen.
+ */

QualityControl/lib/QCModel.js

@@ -172,4 +172,11 @@ function initializeIntervals(intervalsService, qcObjectService, filterService, r
       runModeService.refreshInterval,
     );
   }
+
+  if (filterService.dataPassesRefreshInterval > 0) {
+    intervalsService.register(
+      filterService.getDataPasses.bind(runModeService),
+      filterService.dataPassesRefreshInterval,
+    );
+  }
 }

QualityControl/lib/controllers/FilterController.js

@@ -65,9 +65,11 @@ export class FilterController {
     try {
       const runTypes = this._filterService?.runTypes ?? [];
       const detectors = this._filterService?.detectors ?? [];
+      const dataPasses = this._filterService?.dataPasses ?? [];
       res.status(200).json({
         runTypes,
         detectors,
+        dataPasses,
       });
     } catch (error) {
       res.status(503).json({ error: error.message || error });

QualityControl/lib/services/BookkeepingService.js

@@ -21,6 +21,7 @@ const GET_BKP_DATABASE_STATUS_PATH = '/api/status/database';
 const GET_RUN_TYPES_PATH = '/api/runTypes';
 const GET_RUN_PATH = '/api/runs';
 export const GET_DETECTORS_PATH = '/api/detectors';
+const GET_DATA_PASSES_PATH = '/api/dataPasses';
 
 const LOG_FACILITY = `${process.env.npm_config_log_label ?? 'qcg'}/bkp-service`;
 
@@ -128,6 +129,23 @@ export class BookkeepingService {
     return data;
   }
 
+  /**
+   * Retrieve the list of data passes from the bookkeeping service.
+   * @returns {Promise<object[]>} Resolves with an array of data passes.
+   */
+  async retrieveDataPasses() {
+    const { data } = await httpGetJson(
+      this._hostname,
+      this._port,
+      this._createPath(GET_DATA_PASSES_PATH),
+      {
+        protocol: this._protocol,
+        rejectUnauthorized: false,
+      },
+    );
+    return Array.isArray(data) ? data : [];
+  }
+
   /**
    * Retrieves the information of a specific run from the Bookkeeping service
    * @param {number} runNumber - The run number to check the status for

QualityControl/lib/services/FilterService.js

@@ -32,9 +32,12 @@ export class FilterService {
     this._bookkeepingService = bookkeepingService;
     this._runTypes = [];
     this._detectors = Object.freeze([]);
+    this._dataPasses = Object.freeze([]);
 
     this._runTypesRefreshInterval = config?.bookkeeping?.runTypesRefreshInterval ??
-      (config?.bookkeeping ? 24 * 60 * 60 * 1000 : -1);
+      (config?.bookkeeping ? 24 * 60 * 60 * 1000 : -1);// default interval is 1 day
+    this._dataPassesRefreshInterval = config?.bookkeeping?.dataPassesRefreshInterval ??
+      (config?.bookkeeping ? 6 * 60 * 60 * 1000 : -1);// default interval is 6 hour
 
     this.initFilters().catch((error) => {
       this._logger.errorMessage(`FilterService initialization failed: ${error.message || error}`);
@@ -49,6 +52,7 @@ export class FilterService {
     await this._bookkeepingService.connect();
     await this.getRunTypes();
     await this._initializeDetectors();
+    await this.getDataPasses();
   }
 
   /**
@@ -72,6 +76,33 @@ export class FilterService {
     }
   }
 
+  /**
+   * This method is used to retrieve the list of data passes from the bookkeeping service.
+   * @returns {Promise<void>} Resolves when the list of data passes is available.
+   */
+  async getDataPasses() {
+    try {
+      if (!this._bookkeepingService.active) {
+        return;
+      }
+
+      const rawDataPasses = await this._bookkeepingService.retrieveDataPasses();
+      this._dataPasses = Object.freeze(rawDataPasses
+        .filter(({ name, isFrozen }) => name && typeof isFrozen === 'boolean')
+        .map(({ name, isFrozen }) => Object.freeze({ name, isFrozen })));
+    } catch (error) {
+      this._logger.errorMessage(`Error while retrieving data passes: ${error.message || error}`);
+    }
+  }
+
+  /**
+   * Returns a list of data passes.
+   * @returns {Readonly<DataPass[]>} An immutable array of data passes.
+   */
+  get dataPasses() {
+    return this._dataPasses;
+  }
+
   /**
    * This method is used to retrieve the list of detectors from the bookkeeping service
    * @returns {Promise<undefined>} Resolves when the list of detectors is available
@@ -106,6 +137,14 @@ export class FilterService {
     return this._runTypesRefreshInterval;
   }
 
+  /**
+   * Returns the interval in milliseconds for how often the list of data passes should be refreshed.
+   * @returns {number} Interval in milliseconds for refreshing the list of data passes.
+   */
+  get dataPassesRefreshInterval() {
+    return this._dataPassesRefreshInterval;
+  }
+
   /**
    * This method is used to initialize the filter service
    * @returns {string[]} - resolves when the filter service is initialized

QualityControl/public/common/filters/filter.js

@@ -13,7 +13,7 @@
  */
 
 import { FilterType } from './filterTypes.js';
-import { h, RemoteData } from '/js/src/index.js';
+import { h, RemoteData, DropdownComponent } from '/js/src/index.js';
 
 /**
  * Builds a filter element. If options to show, selector filter element; otherwise, input element.
@@ -136,6 +136,73 @@ export const groupedDropdownComponent = ({
   ]);
 };
 
+/**
+ * Builds a filter element. If options to show, selector filter element; otherwise, input element.
+ * @param {object} config - Configuration object for building the filter element.
+ * @param {string} config.queryLabel - The key used to query the storage with this parameter.
+ * @param {string} config.placeholder - The placeholder text to be displayed in the input field.
+ * @param {string} config.id - The unique identifier for the input field.
+ * @param {object} config.filterMap - Map of the current filter values.
+ * @param {string} [config.type='text'] - The type of the filter element (e.g., 'text', 'number').
+ * @param {Record<string, object>} [config.options={}] - List of options for an input with dropdown selector (optional).
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onChangeCallback
+ * - Callback to be triggered on the change event of the filter.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onInputCallback
+ * - Callback to be triggered on the input event.
+ * @param {(filterId: string, value: string, setUrl: boolean) => void} config.onEnterCallback
+ * - Callback to be triggered when the Enter key is pressed.
+ * @param {string} [config.width='.w-20'] - The CSS class that defines the width of the filter.
+ * @returns {vnode} A virtual node element representing the filter element.
+ */
+export const inputWithDropdownComponent = ({
+  queryLabel,
+  placeholder,
+  id,
+  filterMap,
+  options = {},
+  onChangeCallback,
+  onInputCallback,
+  onEnterCallback,
+  type = 'text',
+  width = '.w-20',
+}) => {
+  const dropdownOptions = Object.keys(options);
+  if (!dropdownOptions.length) {
+    return filterInput({ queryLabel, placeholder, id, filterMap, onInputCallback, onEnterCallback, type, width });
+  }
+  const dropdownComponent = DropdownComponent(
+    filterInput({
+      queryLabel,
+      placeholder,
+      id,
+      filterMap,
+      type,
+      onInputCallback,
+      onEnterCallback,
+      width: '.w-100',
+    }),
+    h('', {
+      id: `${queryLabel?.toLowerCase()}-dropdown`,
+      style: 'max-height: 300px; overflow-y: auto;',
+    }, Object.entries(options)
+      .filter(([option]) => option.toLowerCase().includes(filterMap[queryLabel]?.toLowerCase() ?? ''))
+      .sort(([a], [b]) => b.localeCompare(a))
+      .map(([option, htmlOptions]) => h(
+        'button.btn.d-block.w-100',
+        {
+          onclick: () => {
+            onChangeCallback(queryLabel, option, true);
+            dropdownComponent.state.hidePopover();
+          },
+          ...htmlOptions ?? {},
+        },
+        [option, Object.keys(htmlOptions).length > 0 ? ' (frozen)' : ''],
+      ))),
+  );
+
+  return h(`${width}`, dropdownComponent);
+};
+
 /**
  * Builds a filter input element that allows the user to specify a parameter to be used when querying objects.
  * This function renders a text input element with event handling for input and Enter key press.

QualityControl/public/common/filters/filterTypes.js

@@ -14,6 +14,7 @@
 
 const FilterType = {
   INPUT: 'input',
+  INPUT_WITH_DROPDOWN: 'inputWithDropdown',
   DROPDOWN: 'dropdownSelector',
   GROUPED_DROPDOWN: 'groupedDropdownSelector',
   RUN_MODE: 'runModeSelector',

QualityControl/public/common/filters/filterViews.js

@@ -17,6 +17,7 @@ import {
   dynamicSelector,
   ongoingRunsSelector,
   groupedDropdownComponent,
+  inputWithDropdownComponent,
 } from './filter.js';
 import { FilterType } from './filterTypes.js';
 import { filtersConfig, runModeFilterConfig } from './filtersConfig.js';
@@ -57,6 +58,8 @@ const createFilterElement =
         return dynamicSelector({ ...commonConfig, options, onChangeCallback, inputType });
       case FilterType.GROUPED_DROPDOWN:
         return groupedDropdownComponent({ ...commonConfig, options, onChangeCallback, inputType });
+      case FilterType.INPUT_WITH_DROPDOWN:
+        return inputWithDropdownComponent({ ...commonConfig, options, onChangeCallback, inputType });
       case FilterType.RUN_MODE:
         return ongoingRunsSelector(
           { ...commonConfig },

QualityControl/public/common/filters/filtersConfig.js

@@ -17,11 +17,12 @@ import { FilterType } from './filterTypes.js';
 /**
  * Returns an array of filter configuration objects used to render dynamic filter inputs.
  * @param {FilterService} filterService - service to get the data to populate the filters
- * @param {string[]} filterService.runTypes - run types to show in the filter
- * @param {DetectorSummary[]} filterService.detectors - detectors to show in the filter
+ * @param {RemoteData<string[]>} filterService.runTypes - run types to show in the filter
+ * @param {RemoteData<DetectorSummary[]>} filterService.detectors - detectors to show in the filter
+ * @param {RemoteData<DataPass[]>} filterService.dataPasses - data passes to show in the filter
  * @returns {object[]} Filter configuration array
  */
-export const filtersConfig = ({ runTypes, detectors }) => [
+export const filtersConfig = ({ runTypes, detectors, dataPasses }) => [
   {
     type: FilterType.INPUT,
     queryLabel: 'RunNumber',
@@ -59,10 +60,17 @@ export const filtersConfig = ({ runTypes, detectors }) => [
     id: 'periodNameFilter',
   },
   {
-    type: FilterType.INPUT,
+    type: FilterType.INPUT_WITH_DROPDOWN,
     queryLabel: 'PassName',
     placeholder: 'PassName (e.g. apass2)',
     id: 'passNameFilter',
+    options: dataPasses.match({
+      Success: (payload) => payload.reduce((acc, dataPass) => {
+        acc[dataPass.name] = dataPass.isFrozen ? { style: 'color: var(--color-gray-dark);' } : {};
+        return acc;
+      }, {}),
+      Other: () => {},
+    }),
   },
   {
     type: FilterType.INPUT,

QualityControl/public/services/Filter.service.js

@@ -29,6 +29,7 @@ export default class FilterService {
 
     this._runTypes = RemoteData.notAsked();
     this._detectors = RemoteData.notAsked();
+    this._dataPasses = RemoteData.notAsked();
 
     this.ongoingRuns = RemoteData.notAsked();
   }
@@ -40,14 +41,17 @@ export default class FilterService {
   async getFilterConfigurations() {
     this._runTypes = RemoteData.loading();
     this._detectors = RemoteData.loading();
+    this._dataPasses = RemoteData.notAsked();
     this.filterModel.notify();
     const { result, ok } = await this.loader.get('/api/filter/configuration');
     if (ok) {
       this._runTypes = RemoteData.success(result?.runTypes || []);
       this._detectors = RemoteData.success(result?.detectors || []);
+      this._dataPasses = RemoteData.success(result?.dataPasses || []);
     } else {
       this._runTypes = RemoteData.failure('Error retrieving runTypes');
       this._detectors = RemoteData.failure('Error retrieving detectors');
+      this._dataPasses = RemoteData.failure('Error retrieving dataPasses');
     }
     this.filterModel.notify();
   }
@@ -126,4 +130,12 @@ export default class FilterService {
   get detectors() {
     return this._detectors;
   }
+
+  /**
+   * Returns a {@link RemoteData} object containing an array of data type {@link DataPass}.
+   * @returns {RemoteData<DataPass[]>} A {@link RemoteData} object containing an array of data type {@link DataPass}.
+   */
+  get dataPasses() {
+    return this._dataPasses;
+  }
 }