ORCT-97 Add link to the BK fill page (#134)

.env.test

@@ -41,12 +41,20 @@ _DEF_ML_HOST=alimonitor.cern.ch
 _DEF_ML_PROT=https
 
 ### bkp
-RCT_EP_BK_RUNS_PROT=https
+RCT_EP_BK_PROT=https
+RCT_EP_BK_HOST=$_DEF_BK_HOST
+
+### bkp runs
+RCT_EP_BK_RUNS_PROT=$RCT_EP_BK_PROT
 RCT_EP_BK_RUNS_HOST=$_DEF_BK_HOST
 RCT_EP_BK_RUNS_PATH=${RCT_EP_BK_RUNS_PATH:-/api/runs?filter[definitions]=PHYSICS}
 
+### bkp lhc fills
+RCT_EP_BK_FILLS_PROT=$RCT_EP_BK_PROT
+RCT_EP_BK_FILLS_HOST=$_DEF_BK_HOST
+RCT_EP_BK_FILLS_PATH=${RCT_EP_BK_FILLS_PATH:-/?page=lhc-fill-details}
 
-### data passes
+### ml data passes
 RCT_EP_ML_DP_RAW_PROT=$_DEF_ML_PROT
 RCT_EP_ML_DP_RAW_HOST=$_DEF_ML_HOST
 RCT_EP_ML_DP_RAW_PATH=${RCT_EP_ML_DP_RAW_PATH:-/production/raw.jsp?res_path=json}

app/public/views/userView/data/posting/postingDataConfig.js → app/config/outerServices/bookkeeping.js

@@ -11,16 +11,17 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
+const { ResProvider } = require('../../lib/utils');
 
-/**
- * This object defines metadata required to proceed posting data
- * currently at which columns there will not be input and what is target table in backend side
- */
-const postingDataConfig = {
-    flags: {
-        excludedFields: ['id'],
-        targetTable: 'flags',
+const lhcFills = {
+    url: ResProvider.getServiceEndpoint('BK_FILLS'),
+    params: {
+        fillNumber: 'fillNumber',
     },
 };
 
-export default postingDataConfig;
+const bookkeeping = {
+    lhcFills: lhcFills,
+};
+
+module.exports = { bookkeeping };

app/config/outerServices/index.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * 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.
+ */
+
+const { bookkeeping } = require('./bookkeeping.js');
+
+module.exports = {
+    bookkeeping,
+};

app/config/public.js

@@ -13,8 +13,10 @@
  */
 
 const { roles, detectors, pageNames, filterTypes, filterInputTypes, fieldNames, quality } = require('./rct-data');
+const { bookkeeping } = require('./outerServices');
 
 module.exports = { // Properties that will be provided to frontend in the public folder
+    outerServices: { bookkeeping },
     filterTypes: filterTypes,
     filterInputTypes: filterInputTypes,
 

app/lib/utils/ResProvider.js

@@ -240,7 +240,7 @@ class ResProvider {
     }
 
     static getServiceEndpoint(serviceAbbr) {
-        // BK-RUNS, ML-DP, ML-MC
+        // BK_RUNS, BK_FILLS, ML_DP, ML_MC
         const varsDef = {};
         varsDef[`RCT_EP_${serviceAbbr}_PROT`] = 'prot';
         varsDef[`RCT_EP_${serviceAbbr}_HOST`] = 'host';

app/public/Model.js

@@ -13,7 +13,7 @@
  */
 
 import { Observable, sessionService, QueryRouter, Loader } from '/js/src/index.js';
-import PrimaryModel from './model/PrimaryModel.js';
+import DataAccessModel from './model/DataAccessModel.js';
 import ServiceUnavailableModel from './model/ServiceUnavailableModel.js';
 import { RCT } from './config.js';
 import Flags from './views/flags/Flags.js';
@@ -57,9 +57,9 @@ export default class Model extends Observable {
         const { status, result, ok } = await this.postLoginPasses(username);
         this._tokenExpirationHandler(status);
         if (ok) {
-            this.setPrimary();
+            this.setDataAccessSubmodel();
         } else if (/5\d\d/.test(status)) {
-            this.setServiceUnavailable(result);
+            this.setServiceUnavailableModel(result);
         }
     }
 
@@ -88,7 +88,7 @@ export default class Model extends Observable {
         return [roles.dict.Guest];
     }
 
-    setServiceUnavailable(result) {
+    setServiceUnavailableModel(result) {
         const messageShowTimeout = 200;
         const modeName = 'serviceUnavailable';
         if (!this.submodels[modeName]) {
@@ -108,10 +108,10 @@ export default class Model extends Observable {
         }, messageShowTimeout);
     }
 
-    setPrimary() {
-        const modeName = 'primary';
+    setDataAccessSubmodel() {
+        const modeName = 'dataAccess';
         localStorage.token = sessionService.session.token;
-        this.submodels[modeName] = new PrimaryModel(this);
+        this.submodels[modeName] = new DataAccessModel(this);
         this.submodels[modeName].bubbleTo(this);
         this.mode = modeName;
         this.notify();

app/public/components/buttons/copyLinkButton.js

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * 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 { h } from '/js/src/index.js';
+import snackBar from '../snackBars/snackBar.js';
+
+/**
+ * @param {string} url - url that will be returned to the user
+ * @returns a button that once clicked will add the url to the user's clipboard
+ */
+
+export default function copyLinkButton(url) {
+    const snackBarId = `${url}-copied`;
+    const thisButtonId = `${url}-copy-link-button`;
+    const thisButtonContentId = `${thisButtonId}-content`;
+
+    return h('button.btn.btn-secondary.icon-only-button', {
+        id: thisButtonId,
+        onclick: () => {
+            navigator.clipboard.writeText(url)
+                .then(() => {
+                    const snackbar = document.getElementById(snackBarId);
+                    const thisButton = document.getElementById(thisButtonId);
+                    const thisButtonContent = document.getElementById(thisButtonContentId);
+                    snackbar.style.display = 'flex';
+
+                    document.addEventListener('click', (event) => {
+                        if (thisButton != event.target && thisButtonContent != event.target) {
+                            snackbar.style.display = 'none';
+                        }
+                    });
+                })
+                .catch((e) => {
+                    snackBar(e, snackBarId);
+                });
+        },
+    }, h('.link-20-primary.abs-center', {
+        id: thisButtonContentId,
+    }), snackBar(h('.flex-row.items-center.gap-0-5', h('.done-10-primary'), 'Copied!'), snackBarId));
+}

app/public/components/chips/indexChip.js

@@ -14,29 +14,32 @@
 
 import { h } from '/js/src/index.js';
 import { RCT } from '../../config.js';
-const { dataReqParams, pageNames } = RCT;
+const { pageNames } = RCT;
 
-export default function indexChip(model, index) {
+/**
+ * @param {Observable} model - provides a set of functions
+ * @param {string} pageName - name of the page
+ * @param {string} index - index of the item on page
+ * @returns - button that navigates user to the related (page, index) view
+ */
+
+export default function indexChip(model, pageName, index) {
     const dataPointer = model.getCurrentDataPointer();
-    const { page } = dataPointer;
-    const data = model.fetchedData[dataPointer.page][dataPointer.index].payload;
-    const { fields } = data;
-    const firstField = fields.find((f) => f !== undefined && f.name);
-    const targetUrl = `/?page=${page}&index=${index}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1&sorting=-${firstField.name}`;
+    const currentPage = dataPointer.page;
 
-    return page !== pageNames.periods && model.fetchedData[page][index]
+    return currentPage !== pageNames.periods && model.fetchedData[currentPage][index] && currentPage === pageName
         ? h('.chip.flex-wrap.justify-between.items-center', {
-            id: `chip-${page}-${index}`,
-            class: dataPointer.index === index && dataPointer.page === page ? 'primary' : '',
+            id: `chip-${currentPage}-${index}`,
+            class: dataPointer.index === index ? 'primary' : '',
         },
         h('button.btn.transparent', { onclick: () => {
-            model.router.go(targetUrl);
+            model.navigation.go(currentPage, index);
         } }, index),
         h('button.btn.icon-only-button.transparent', {
             onclick: () => {
-                model.removeSubPage(page, index);
+                model.removeSubPage(currentPage, index);
                 model.notify();
             },
-        }, dataPointer.index === index && dataPointer.page === page ? h('.close-20-off-white') : h('.close-20-primary')))
+        }, dataPointer.index === index ? h('.close-20-off-white') : h('.close-20-primary')))
         : '';
 }

app/public/components/flags/flagBreadcrumbs.js

@@ -14,15 +14,18 @@
 
 import { h } from '/js/src/index.js';
 import flagsIndexChip from './flagsIndexChip.js';
-import title from '../../views/userView/data/table/title.js';
+import title from '../table/title.js';
+import { extractPeriodName } from '../../utils/dataProcessing/dataProcessingUtils.js';
+import { RCT } from '../../config.js';
+const { pageNames } = RCT;
 
 export default function flagBreadCrumbs(model, dataPass, run, detector) {
     return [
-        title(model),
+        title(pageNames.flags),
         h('.forward-20'),
-        h('h3.ph-15.text-primary', dataPass),
+        flagsIndexChip(model.navigation, pageNames.dataPasses, extractPeriodName(dataPass), dataPass),
         h('.forward-20'),
-        flagsIndexChip(model, 'run', run),
+        flagsIndexChip(model.navigation, pageNames.runsPerDataPass, dataPass, run),
         h('.forward-20'),
         h('h3.ph-15.text-primary', detector),
     ];

app/public/components/flags/flagsIndexChip.js

@@ -14,14 +14,11 @@
 
 import { h } from '/js/src/index.js';
 
-export default function flagsIndexChip(model, targetPage, label) {
+export default function flagsIndexChip(navigation, targetPage, targetIndex, label) {
     return h('.chip', {
         id: `chip-${targetPage}-${label}`,
     },
     h('button.btn.transparent', { onclick: () => {
-        // TODO once url scheme is confirmed
-        // eslint-disable-next-line max-len
-        // Model.router.go(`/?page=${targetPage}&index=${index}&${dataReqParams.rowsOnSite}=50&${dataReqParams.site}=1&sorting=-${firstField.name}`);
-        history.back();
+        navigation.go(targetPage, targetIndex);
     } }, label));
 }

app/public/components/snackBars/snackBar.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * 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 { h } from '/js/src/index.js';
+
+export default function snackBar(message, id = null) {
+    const snackBarId = id ? id : `snackbar-${message}`;
+    return h('button.snackbar', {
+        id: snackBarId,
+        onclick: () => {
+            const snackbar = document.getElementById(snackBarId);
+            snackbar.style.display = 'none';
+        },
+    }, message);
+}

app/public/components/table/pager.js

@@ -25,7 +25,7 @@ export default function pager(model, data, pagerOnly = true) {
     const currentSite = Number(Object.fromEntries(data.url.searchParams.entries())[site]);
 
     const pageButton = (targetSite) => {
-        const url = replaceUrlParams(data.url, [[site, targetSite]]);
+        const url = replaceUrlParams(data.url, { [RCT.dataReqParams.site]: targetSite });
         return viewButton(
             model,
             targetSite,

app/public/views/userView/data/table/title.js → app/public/components/table/title.js

@@ -13,12 +13,10 @@
  */
 
 import { h } from '/js/src/index.js';
-import { RCT } from '../../../../config.js';
+import { RCT } from '../../config.js';
 const { pageNames } = RCT;
 
-export default function title(model) {
-    const { page } = model.getCurrentDataPointer();
-
+export default function title(page) {
     const pageTitle = () => {
         switch (page) {
             case pageNames.periods: return 'Periods';

app/public/model/PrimaryModel.js → app/public/model/DataAccessModel.js

@@ -15,9 +15,9 @@
 import { Observable, Loader } from '/js/src/index.js';
 import FetchedDataManager from './data/FetchedDataManager.js';
 import { defaultIndex, defaultIndexString } from '../utils/defaults.js';
-import Navigation from './navigation/NavModel.js';
+import Navigation from './navigation/Navigation.js';
 
-export default class PrimaryModel extends Observable {
+export default class DataAccessModel extends Observable {
     constructor(parent) {
         super();
         this.parent = parent;

app/public/model/data/FetchedDataManager.js

@@ -17,8 +17,7 @@ import { RemoteData, Loader } from '/js/src/index.js';
 import FetchedData from './FetchedData.js';
 import { replaceUrlParams } from '../../utils/url/urlUtils.js';
 import { RCT } from '../../../config.js';
-const { dataReqParams } = RCT;
-const { pageNames } = RCT;
+const { dataReqParams, defaultDataReqParams, pageNames } = RCT;
 
 /**
  * Object of this class provide organization of many FetchedData objects,
@@ -31,7 +30,7 @@ export default class FetchedDataManager {
         this.router = router;
         this.loader = new Loader();
 
-        this.rowsOnSite = 50;
+        this.rowsOnSite = defaultDataReqParams.rowsOnSite;
 
         for (const n in pageNames) {
             if (Object.prototype.hasOwnProperty.call(pageNames, n)) {
@@ -122,20 +121,21 @@ export default class FetchedDataManager {
 
     changePage(pageNumber) {
         const url = this.router.getUrl();
-        const newUrl = replaceUrlParams(url, [[dataReqParams.site, pageNumber]]);
+        const newUrl = replaceUrlParams(url, { [dataReqParams.site]: pageNumber });
         this.router.go(newUrl);
     }
 
     changeSorting(sorting) {
         const url = this.router.getUrl();
         const { field, order } = sorting;
-        const newUrl = replaceUrlParams(url, [['sorting', `${order == -1 ? '-' : ''}${field}`]]);
+        const newUrl = replaceUrlParams(url, { sorting: `${order == -1 ? '-' : ''}${field}` });
         this.router.go(newUrl);
     }
 
     changeRowsOnSite(rowsOnSite) {
         const url = this.router.getUrl();
-        const newUrl = replaceUrlParams(url, [[dataReqParams.rowsOnSite, rowsOnSite]]);
+        this.rowsOnSite = rowsOnSite;
+        const newUrl = replaceUrlParams(url, { [dataReqParams.rowsOnSite]: this.rowsOnSite });
         this.router.go(newUrl);
     }