[OGUI-1852] Open Bookkeeping from RunNumber ObjectInfoPanel

QualityControl/common/library/enums/Status/integratedServices.enum.js

@@ -22,4 +22,5 @@ export const IntegratedServices = Object.freeze({
   QC: 'qc',
   CCDB: 'ccdb',
   KAFKA: 'kafka',
+  BOOKKEEPING: 'bookkeeping',
 });

QualityControl/lib/QCModel.js

@@ -86,7 +86,13 @@ export const setupQcModel = async (ws, eventEmitter) => {
   const userController = new UserController(userRepository);
   const layoutController = new LayoutController(layoutRepository);
 
-  const statusService = new StatusService({ version: packageJSON?.version ?? '-' }, { qc: config.qc ?? {} });
+  const statusService = new StatusService(
+    { version: packageJSON?.version ?? '-' },
+    {
+      qc: config.qc ?? {},
+      bookkeeping: config.bookkeeping ?? {},
+    },
+  );
   const statusController = new StatusController(statusService);
 
   if (config?.kafka?.enabled) {
@@ -118,6 +124,7 @@ export const setupQcModel = async (ws, eventEmitter) => {
   const intervalsService = new IntervalsService();
 
   const bookkeepingService = new BookkeepingService(config.bookkeeping);
+  statusService.bookkeepingService = bookkeepingService;
   try {
     await bookkeepingService.connect();
   } catch (error) {

QualityControl/lib/services/BookkeepingService.js

@@ -17,7 +17,7 @@ import { httpGetJson } from '../utils/httpRequests.js';
 import { LogManager } from '@aliceo2/web-ui';
 import { wrapRunStatus } from '../dtos/BookkeepingDto.js';
 
-const GET_BKP_DATABASE_STATUS_PATH = '/api/status/database';
+export const GET_BKP_GUI_STATUS_PATH = '/api/status/gui';
 const GET_RUN_TYPES_PATH = '/api/runTypes';
 const GET_RUN_PATH = '/api/runs';
 export const GET_DETECTORS_PATH = '/api/detectors';
@@ -36,6 +36,7 @@ export class BookkeepingService {
     this.active = false;
     this.error = null;
 
+    this._url = '';
     this._hostname = '';
     this._port = null;
     this._token = '';
@@ -56,6 +57,7 @@ export class BookkeepingService {
     const { url, token } = this.config || {};
     try {
       const normalizedURL = new URL(url);
+      this._url = normalizedURL.href;
       this._hostname = normalizedURL.hostname;
       this._protocol = normalizedURL.protocol;
       this._port = normalizedURL.port || (normalizedURL.protocol === 'https:' ? 443 : 80);
@@ -95,13 +97,14 @@ export class BookkeepingService {
       const { data } = await httpGetJson(
         this._hostname,
         this._port,
-        `${GET_BKP_DATABASE_STATUS_PATH}?token=${this._token}`,
+        `${GET_BKP_GUI_STATUS_PATH}?token=${this._token}`,
         {
           protocol: this._protocol,
           rejectUnauthorized: false,
         },
       );
       if (data && data?.status?.ok && data?.status?.configured) {
+        this._version = data.version || 'unknown';
         this._logger.infoMessage('Successfully connected to Bookkeeping');
         return true;
       } else {
@@ -278,4 +281,22 @@ export class BookkeepingService {
   _createRunPath(runNumber) {
     return this._createPath(`${GET_RUN_PATH}/${runNumber}`);
   }
+
+  /**
+   * Get the URL of the bookkeeping service
+   * @readonly
+   * @returns {string} the URL of the bookkeeping service
+   */
+  get url() {
+    return this._url;
+  }
+
+  /**
+   * Get the version of the bookkeeping service
+   * @readonly
+   * @returns {string} the version of the bookkeeping service
+   */
+  get version() {
+    return this._version;
+  }
 }

QualityControl/lib/services/Status.service.js

@@ -39,6 +39,11 @@ export class StatusService {
      */
     this._dataService = undefined;
 
+    /**
+     * @type {BookkeepingService}
+     */
+    this._bookkeepingService = undefined;
+
     /**
      * @type {WebSocket}
      */
@@ -73,6 +78,9 @@ export class StatusService {
       case IntegratedServices.KAFKA:
         result = this.retrieveKafkaServiceStatus();
         break;
+      case IntegratedServices.BOOKKEEPING:
+        result = this.retrieveBookkeepingServiceStatus();
+        break;
     }
     return result;
   }
@@ -153,6 +161,37 @@ export class StatusService {
     };
   }
 
+  /**
+   * Retrieve the bookkeeping service status response and its public configuration
+   * @returns {object} - status of the bookkeeping service
+   */
+  retrieveBookkeepingServiceStatus() {
+    if (this._bookkeepingService?.active) {
+      return {
+        name: IntegratedServices.BOOKKEEPING,
+        version: this._bookkeepingService.version,
+        status: { ok: true, category: ServiceStatus.SUCCESS },
+        extras: {
+          BASE_URL: this._bookkeepingService.url,
+          PARTIAL_RUN_DETAILS: '?page=run-detail&runNumber=',
+        },
+      };
+    } else if (this._bookkeepingService.config) {
+      return {
+        name: IntegratedServices.BOOKKEEPING,
+        status: {
+          ok: false,
+          category: ServiceStatus.ERROR,
+          message: this._bookkeepingService.error || 'Unable to connect to Bookkeeping service',
+        },
+      };
+    }
+    return {
+      name: IntegratedServices.BOOKKEEPING,
+      status: { ok: false, category: ServiceStatus.NOT_CONFIGURED },
+    };
+  }
+
   /*
    * Getters & Setters
    */
@@ -166,6 +205,15 @@ export class StatusService {
     this._dataService = dataService;
   }
 
+  /**
+   * Set service to be used for querying status of the Bookkeeping service.
+   * @param {BookkeepingService} bookkeepingService - service used for retrieving Bookkeeping status
+   * @returns {void}
+   */
+  set bookkeepingService(bookkeepingService) {
+    this._bookkeepingService = bookkeepingService;
+  }
+
   /**
    * Set instance of websocket server
    * @param {WebSocket} ws - instance of the WS server

QualityControl/public/Model.js

@@ -182,6 +182,7 @@
     await this.filterModel.filterService.initFilterService();
     await this.filterModel.setFilterFromURL();
     this.filterModel.setFilterToURL();
+    await this.aboutViewModel.retrieveIndividualServiceStatus(IntegratedServices.BOOKKEEPING);
 
     this.services.layout.getLayoutsByUserId(this.session.personid, RequestFields.LAYOUT_CARD);
 
@@ -287,7 +288,7 @@
 
   /**
    * Clear URL parameters and redirect to a certain page
    * @param {*} pageName - name of the page to be redirected to
    * @returns {undefined}
    */
   clearURL(pageName) {

QualityControl/public/app.css

@@ -147,7 +147,7 @@
     font-weight: 500;
   }
 
-  &>div:hover {
+  & > div > div:hover {
     font-weight: 700;
   }
 }

QualityControl/public/common/filters/filterViews.js

@@ -34,7 +34,7 @@
  * Creates an input element for a specific metadata field;
  * @param {object} config - The configuration for this particular field
  * @param {object} filterMap - An object that contains the keys and values of the filters
  * @param {Function} onInputCallback - A callback function that triggers upon Input
  * @param {Function} onEnterCallback - A callback function that triggers upon Enter
  * @param {Function} onChangeCallback - A callback function that triggers upon Change
  * @param onFocusCallback
@@ -118,7 +118,7 @@
         isRunModeActivated && runStatusPanel(runStatus),
       ]),
       lastUpdatePanel(runStatus, lastRefresh, refreshRate),
-      cleanRunInformationPanel(cleanRunInformation),
+      cleanRunInformationPanel(cleanRunInformation, filterModel.filterMap['RunNumber']),
       detectorsQualitiesPanel(detectorsQualities),
     ],
   );

QualityControl/public/common/filters/runMode/runStatusPanel.js

@@ -12,8 +12,8 @@
  */
 
 import { RunStatus } from '../../../../../library/runStatus.enum.js';
-import { h } from '/js/src/index.js';
-import { camelToTitleCase } from '../../utils.js';
+import { h, iconExternalLink } from '/js/src/index.js';
+import { camelToTitleCase, getBkpRunDetailsUrl } from '../../utils.js';
 import { statusBadge } from '../../badge.js';
 
 /**
@@ -59,23 +59,36 @@ export const lastUpdatePanel = (runStatus, lastRefresh, refreshRate = 15000) =>
 /**
  * Renders the run information panel
  * @param {object} cleanRunInformation - The `RunInformation` without `detectorsQualities`
+ * @param {string} runNumber - The current selected filter run number
  * @returns {vnode} - virtual node element
  */
-export const cleanRunInformationPanel = (cleanRunInformation) =>
+export const cleanRunInformationPanel = (cleanRunInformation, runNumber) =>
   cleanRunInformation && Object.keys(cleanRunInformation).length > 0 && h(
     '.flex-row.g4.items-center.f7.gray-darker.text-center.ph4',
     {
       id: 'header-run-information',
       style: 'overflow-x: auto; margin: 0 auto;',
     },
-    Object.entries(cleanRunInformation).map(([key, value]) =>
+    [
       h('.flex-row.g1', {
+        style: 'flex: 0 0 auto;',
+      }, [
+        h('span', 'Open run in Bookkeeping'),
+        h('a', {
+          id: 'openRunInBookkeeping',
+          title: 'Open run in Bookkeeping',
+          href: getBkpRunDetailsUrl(runNumber),
+          target: '_blank',
+        }, iconExternalLink()),
+      ]),
+      Object.entries(cleanRunInformation).map(([key, value]) => h('.flex-row.g1', {
         key: `${key}-${value}`,
         style: 'flex: 0 0 auto;',
       }, [
         h('strong', `${camelToTitleCase(key)}:`),
         h('span', `${value}`),
       ])),
+    ],
   );
 
 /**

QualityControl/public/common/object/objectInfoCard.js

@@ -13,7 +13,9 @@
  */
 
 import { h, isContextSecure } from '/js/src/index.js';
+import { iconExternalLink } from '/js/src/icons.js';
 import { camelToTitleCase, copyToClipboard, prettyFormatDate } from './../utils.js';
+import { getBkpRunDetailsUrl } from '../../common/utils.js';
 
 const SPECIFIC_KEY_LABELS = {
   id: 'ID (etag)',
@@ -62,10 +64,25 @@ const infoRow = (key, value, infoRowAttributes) => {
   const formattedKey = getUILabel(key);
 
   const hasValue = value != null && value !== '' && (!Array.isArray(value) || value.length !== 0);
+  const bkpRunDetailsUrl = key === 'runNumber' ? getBkpRunDetailsUrl(value) : null;
 
   return h(`.flex-row.g2.info-row${highlightedClasses}`, [
     h('b.w-25.w-wrapped', formattedKey),
-    h('.w-75.cursor-pointer', hasValue && infoRowAttributes(formattedKey, formattedValue), formattedValue),
+    h('.flex-row.w-75', [
+      h(
+        '.cursor-pointer.flex-row',
+        hasValue && infoRowAttributes(formattedKey, formattedValue),
+        formattedValue,
+      ),
+      bkpRunDetailsUrl && hasValue
+        ? h('a.ph2.text-right.actionable-icon', {
+          id: 'openRunInBookkeeping',
+          title: 'Open run in Bookkeeping',
+          href: bkpRunDetailsUrl,
+          target: '_blank',
+        }, iconExternalLink())
+        : '',
+    ]),
   ]);
 };
 

QualityControl/public/common/utils.js

@@ -15,7 +15,7 @@
 import { isUserRoleSufficient } from '../../../../library/userRole.enum.js';
 import { generateDrawingOptionString } from '../../library/qcObject/utils.js';
 
-/* global JSROOT */
+/* global JSROOT BOOKKEEPING */
 
 /**
  * Map of allowed `ROOT.makeImage` file extensions to MIME types
@@ -254,3 +254,15 @@ export const isOnLeftSideOfViewport = (element) => {
   const isLeft = rect.left - rect.width < window.innerWidth / 2;
   return isLeft;
 };
+
+/**
+ * Retrieves the URL to the run details page in Bookkeeping for the given run number
+ * @param {number|string} runNumber - The run number to generate the URL for
+ * @returns {string|null} The URL to the run details page, or null if Bookkeeping is not configured
+ */
+export const getBkpRunDetailsUrl = (runNumber) => {
+  if (typeof BOOKKEEPING !== 'undefined' && BOOKKEEPING && BOOKKEEPING.RUN_DETAILS) {
+    return BOOKKEEPING.RUN_DETAILS + runNumber;
+  }
+  return null;
+};

QualityControl/public/pages/aboutView/AboutViewModel.js

@@ -67,6 +67,11 @@ export default class AboutViewModel extends BaseViewModel {
       } else {
         const { status: { category } } = result;
         this.services[category][service] = RemoteData.success(result);
+        if (result.status.ok && service === IntegratedServices.BOOKKEEPING) {
+          window.BOOKKEEPING = {
+            RUN_DETAILS: result.extras.BASE_URL + result.extras.PARTIAL_RUN_DETAILS,
+          };
+        }
       }
       this.notify();
     } catch (error) {

QualityControl/test/public/features/filterTest.test.js

@@ -237,6 +237,7 @@ export const filterTests = async (url, page, timeout = 5000, testParent) => {
     await page.locator('tr:last-of-type td').click();
     await page.waitForSelector(versionsPath);
 
+    await delay(100);
     let versionCount = await page.evaluate((path) => document.querySelectorAll(path).length, versionsPath);
     strictEqual(versionCount, 1, 'Number of versions is not 1');
 

QualityControl/test/public/pages/object-tree.test.js

@@ -15,6 +15,7 @@ import { strictEqual, ok, deepStrictEqual, notDeepStrictEqual } from 'node:asser
 import { delay } from '../../testUtils/delay.js';
 import { getLocalStorage, getLocalStorageAsJson } from '../../testUtils/localStorage.js';
 import { StorageKeysEnum } from '../../../public/common/enums/storageKeys.enum.js';
+import { config } from '../../config.js';
 
 const OBJECT_TREE_PAGE_PARAM = '?page=objectTree';
 
@@ -188,7 +189,7 @@ export const objectTreePageTests = async (url, page, timeout = 5000, testParent)
       const context = page.browserContext();
       await context.overridePermissions(url, ['clipboard-read', 'clipboard-write', 'clipboard-sanitized-write']);
 
-      await page.click('#qcObjectInfoPanel > div > div');
+      await page.click('#qcObjectInfoPanel > div > div > div');
 
       const clipboard = await page.evaluate(async () => {
         await new Promise((resolve) => setTimeout(resolve, 500));
@@ -207,7 +208,7 @@ export const objectTreePageTests = async (url, page, timeout = 5000, testParent)
       const context = page.browserContext();
       await context.overridePermissions(url, ['clipboard-read', 'clipboard-write', 'clipboard-sanitized-write']);
 
-      await page.click('#qcObjectInfoPanel > div > div'); // copy path
+      await page.click('#qcObjectInfoPanel > div > div > div'); // copy path
       await page.click('#qcObjectInfoPanel > div:nth-child(7) > div'); // try to copy empty value
 
       const clipboard = await page.evaluate(async () => {
@@ -220,6 +221,25 @@ export const objectTreePageTests = async (url, page, timeout = 5000, testParent)
     },
   );
 
+  await testParent.test(
+    'should have an external link to bookkeeping inline with the run number row',
+    { timeout },
+    async () => {
+      const bookkeepingLink = await page.$('#openRunInBookkeeping');
+      await delay(2000);
+      ok(bookkeepingLink, 'The link to bookkeeping should be present in the DOM');
+
+      const href = await page.evaluate((element) => element.href, bookkeepingLink);
+      const runNumber =
+        await page.evaluate((element) => element.parentElement.children[0].textContent, bookkeepingLink);
+      const url = new URL(href);
+      const baseUrl = `${url.origin}${url.pathname}`;
+
+      strictEqual(baseUrl, `${config.bookkeeping.url}/`);
+      strictEqual(runNumber, url.searchParams.get('runNumber'));
+    },
+  );
+
   await testParent.test(
     'should close the object plot upon clicking the close button',
     { timeout },