[O2B-659] Make active columns independent of the model + refactoring (#…

…661)

Fix some docblock types

lib/public/Model.js

@@ -21,6 +21,7 @@ import Flps from './views/Flps/Flps.js';
 import Envs from './views/Envs/Envs.js';
 import LhcFills from './views/LhcFills/LhcFills.js';
 import { ModalModel } from './components/modal/ModalModel.js';
+import { registerFrontLinkListener } from './utilities/frontLink.js';
 
 /**
  * Root of model tree
@@ -77,13 +78,17 @@ export default class Model extends Observable {
         this.tags = new Tags(this);
         this.tags.bubbleTo(this);
 
+        /**
+         * @type {Flps}
+         */
         this.flps = new Flps(this);
         this.flps.bubbleTo(this);
 
         // Setup router
         this.router = new QueryRouter();
         this.router.observe(this.handleLocationChange.bind(this));
         this.router.bubbleTo(this);
+        registerFrontLinkListener((e) => this.router.handleLinkEvent(e));
 
         // Init pages
         this.handleLocationChange();

lib/public/components/Filters/FlpsFilter/index.js

@@ -15,8 +15,10 @@ import { h } from '/js/src/index.js';
 import { iconChevronBottom, iconChevronRight } from '/js/src/icons.js';
 
 /**
+ * FIXME this seems bugged, model.flps.toggleFilterExpanded do not exist
+ *
  * Render a complete filter collection
- * @param {Object} model The global model object
+ * @param {Model} model The global model object
  * @param {Object} columns The columns representing the table
  * @return {vnode} The full collection of filters accessible through dropdowns
  */
@@ -33,7 +35,7 @@ const filters = (model, columns) =>
                         h('', model.flps.isFilterExpanded(key) ? iconChevronBottom() : iconChevronRight()),
                         h('.f4.ml1', column.name),
                     ]),
-                    model.flps.isFilterExpanded(key) && column.filter,
+                    model.flps.isFilterExpanded(key) && typeof column.filter === 'function' ? column.filter(model) : column.filter,
                 ]);
             }
             return accumulator;

lib/public/components/Filters/LogsFilter/index.js

@@ -22,14 +22,13 @@ import { h } from '/js/src/index.js';
 const filters = (model, columns) =>
     h('.w-100.shadow-level1.br2', [
         h('.f4.ph2', 'Filters'),
-        Object.entries(columns).reduce((accumulator, [key, column]) => {
+        Object.values(columns).reduce((accumulator, column) => {
             if (column.filter) {
                 accumulator.push([
                     h('.flex-row.items-baseline.ph3.pv1', [
                         h('.w-30.f5', column.name),
-                        h('.w-70', column.filter),
+                        h('.w-70', typeof column.filter === 'function' ? column.filter(model) : column.filter),
                     ]),
-                    model.logs.isFilterExpanded(key) && column.filter,
                 ]);
             }
             return accumulator;

lib/public/components/Filters/RunsFilter/index.js

@@ -15,29 +15,27 @@ import { h } from '/js/src/index.js';
 
 /**
  * Render a complete filter collection
- * @param {Object} model The global model object
+ * @param {Model} model The global model object
  * @param {Object} columns The columns representing the table
  * @return {vnode} The full collection of filters accessible through various input forms
  */
-const filtersRuns = (model, columns) =>
-    h('.w-100.shadow-level1.br2', [
-        h('.f4.ph2', 'Filters'),
-        Object.entries(columns).reduce((accumulator, [key, column]) => {
-            if (column.filter) {
-                accumulator.push([
-                    h('.flex-row.items-baseline.ph3.pv1', [
-                        h('.w-30.f5', column.name),
-                        h('.w-70', column.filter),
-                    ]),
-                    model.runs.isFilterExpanded(key) && column.filter,
-                ]);
-            }
-            return accumulator;
-        }, []),
-        h('.p2', h('button.btn.btn-danger.mt2', {
-            disabled: !model.runs.isAnyFilterActive(),
-            onclick: () => model.runs.resetRunsParams(),
-        }, 'Reset all filters')),
-    ]);
+const filtersRuns = (model, columns) => h('.w-100.shadow-level1.br2', [
+    h('.f4.ph2', 'Filters'),
+    Object.values(columns).reduce((accumulator, column) => {
+        if (column.filter) {
+            accumulator.push([
+                h('.flex-row.items-baseline.ph3.pv1', [
+                    h('.w-30.f5', column.name),
+                    h('.w-70', typeof column.filter === 'function' ? column.filter(model) : column.filter),
+                ]),
+            ]);
+        }
+        return accumulator;
+    }, []),
+    h('.p2', h('button.btn.btn-danger.mt2', {
+        disabled: !model.runs.isAnyFilterActive(),
+        onclick: () => model.runs.resetRunsParams(),
+    }, 'Reset all filters')),
+]);
 
 export default filtersRuns;

lib/public/utilities/frontLink.js

@@ -0,0 +1,58 @@
+/**
+ * @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 { h } from '/js/src/index.js';
+
+const frontLinkListeners = [];
+
+/**
+ * Register a function to be called any time one of the frontLink is triggered (the navigation event will be passed as parameter)
+ *
+ * @param {callback} listener the listener to register
+ *
+ * @return {void}
+ */
+export const registerFrontLinkListener = (listener) => {
+    frontLinkListeners.push(listener);
+};
+
+// eslint-disable-next-line require-jsdoc
+const formatParameter = (key, value) => `${key}=${value}`;
+
+/**
+ * Return a component representing a link
+ *
+ * @param {string} text the text of the link displayed to the user
+ * @param {Object} page the page to which the link points to
+ * @param {Object} [parameters] optionally the list of query parameters, as an object
+ * @param {Object} [attributes] optionally the list of attributes to add to the link vnode
+ *
+ * @return {vnode} the link component
+ */
+export const frontLink = (text, page, parameters, attributes) => {
+    parameters = {
+        ...parameters,
+        page,
+    };
+    const href = `?${Object.entries(parameters).map(([key, value]) => formatParameter(key, value)).join('&')}`;
+
+    return h('a', {
+        ...attributes,
+        href,
+        onclick: (e) => {
+            for (const listener of frontLinkListeners) {
+                listener(e);
+            }
+        },
+    }, text);
+};

lib/public/views/Envs/ActiveColumns/index.js → lib/public/views/Envs/ActiveColumns/envsActiveColumns.js

@@ -14,11 +14,9 @@
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 
 /**
- * Method to receive the list of active columns for a generic Environments component
- * @param {Object} _model The global model object
- * @return {Object} A collection of columns.
+ * List of active columns for a generic Environments component
  */
-const activeColumns = (_model) => ({
+export const envsActiveColumns = {
     id: {
         name: 'Id',
         size: 'w-10',
@@ -69,6 +67,4 @@ const activeColumns = (_model) => ({
         balloon: true,
     },
 
-});
-
-export default activeColumns;
+};

lib/public/views/Envs/Overview/index.js

@@ -14,7 +14,7 @@
 import { h } from '/js/src/index.js';
 import table from '../../../components/Table/index.js';
 import { amountSelector, pageSelector } from '../../../components/Pagination/index.js';
-import activeColumns from '../ActiveColumns/index.js';
+import { envsActiveColumns } from '../ActiveColumns/envsActiveColumns.js';
 
 const AVAILABLE_AMOUNTS = [5, 10, 20];
 const TABLEROW_HEIGHT = 46;
@@ -41,8 +41,6 @@ const envOverviewScreen = (model) => h(
  * @returns {Object} Html page
  */
 const showEnvsTable = (model, envs) => {
-    const envsColumns = activeColumns(model);
-
     if (!model.envs.rowCountFixed) {
         // Calculates the number of rows which should be visible on the page
         model.envs.envsPerPage = model.calculateRowDisplayAmount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT);
@@ -51,7 +49,7 @@ const showEnvsTable = (model, envs) => {
     return [
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
-            table(envs, envsColumns, {}, null, '.table-sm'),
+            table(envs, envsActiveColumns, {}, null, '.table-sm'),
             pagination(model),
         ]),
     ];

lib/public/views/Flps/ActiveColumns/index.js → lib/public/views/Flps/ActiveColumns/flpsActiveColumns.js

@@ -12,10 +12,9 @@
  */
 
 /**
- * Method to retrieve the list of active columns for a generic table component
- * @return {Object} A collection of columns with parameters for the Run table
+ * List of active columns for a generic table component
  */
-const activeColumns = () => ({
+export const flpsActiveColumns = {
     id: {
         name: 'ID',
         visible: false,
@@ -51,6 +50,4 @@ const activeColumns = () => ({
         visible: true,
         size: 'cell-m',
     },
-});
-
-export default activeColumns;
+};

lib/public/views/Flps/Overview/index.js

@@ -15,7 +15,7 @@ import { h } from '/js/src/index.js';
 import filters from '../../../components/Filters/FlpsFilter/index.js';
 import table from '../../../components/Table/index.js';
 import { amountSelector, pageSelector } from '../../../components/Pagination/index.js';
-import activeColumns from '../ActiveColumns/index.js';
+import { flpsActiveColumns } from '../ActiveColumns/flpsActiveColumns.js';
 
 const AVAILABLE_AMOUNTS = [5, 10, 20];
 
@@ -26,17 +26,16 @@ const AVAILABLE_AMOUNTS = [5, 10, 20];
  */
 const flpOverview = (model) => {
     const data = model.flps.getFlps();
-    const flpsColumns = activeColumns();
 
     const amountDropdownVisible = model.flps.isAmountDropdownVisible();
     const flpsPerPage = model.flps.getFlpsPerPage();
 
     return h('', { onremove: () => model.flps.clearFlps() }, [
         h('h2.mv2', 'Flp'),
         h('.flex-row.mv1', [
-            h('.w-10', filters(model, flpsColumns)),
+            h('.w-10', filters(model, flpsActiveColumns)),
             h('.w-90', h('.w-100.flex-column.mh3', [
-                table(data, flpsColumns, {}, (entry) => ({
+                table(data, flpsActiveColumns, {}, (entry) => ({
                     onclick: () => model.router.go(`?page=flp-detail&id=${entry.id}`, ''),
                 })),
                 h('.flex-row.justify-between.mv3', [

lib/public/views/Home/Overview/index.js

@@ -12,8 +12,8 @@
  */
 
 import { h } from '/js/src/index.js';
-import { activeHomeOverviewColumns as activeLogsColumns } from '../../Logs/ActiveColumns/index.js';
-import { activeHomeOverviewColumns as activeRunsColumns } from '../../Runs/ActiveColumns/index.js';
+import { homeOverviewLogsActiveColumns } from '../../Logs/ActiveColumns/logsActiveColumns.js';
+import { homeOverviewRunsActiveColumns } from '../../Runs/ActiveColumns/runsActiveColumns.js';
 import table from '../../../components/Table/index.js';
 
 const TABLEROW_HEIGHT = 46;
@@ -30,22 +30,19 @@ const HomeOverviewScreen = (model) => {
 
     model.logs.setLogsPerPage(rowCount);
     const logs = model.logs.getLogs();
-    const logsColumns = activeLogsColumns(model);
-
     const runs = model.runs.getRuns();
-    const runsColumns = activeRunsColumns(model);
     model.runs.setRunsPerPage(rowCount);
 
     return h('.flex-row.w-100', [
         h('.flex-column.w-50', {
             style: 'padding-right: 1rem;',
         }, [
             h('h2', 'Log Entries'),
-            table(logs, logsColumns),
+            table(logs, homeOverviewLogsActiveColumns),
         ]),
         h('.flex-column.w-50', [
             h('h2', 'Runs'),
-            table(runs, runsColumns),
+            table(runs, homeOverviewRunsActiveColumns),
         ]),
     ]);
 };

lib/public/views/LhcFills/ActiveColumns/index.js → lib/public/views/LhcFills/ActiveColumns/lhcFillsActiveColumns.js

@@ -13,15 +13,13 @@
  */
 
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
-import { h } from '/js/src/index.js';
 import { formatDuration } from '../../../utilities/formatting/formatDuration.js';
+import { frontLink } from '../../../utilities/frontLink.js';
 
 /**
- * Method to receive the list of active columns for a generic Environments component
- * @param {Object} model The global model object
- * @return {Object} A collection of columns.
+ * List of active columns for a lhc fills table
  */
-const activeColumns = (model) => ({
+export const lhcFillsActiveColumns = {
     fillNumber: {
         name: 'Fill Number',
         visible: true,
@@ -65,14 +63,9 @@ const activeColumns = (model) => ({
         size: 'w-15',
         title: true,
         format: (runs) => runs && runs.length > 0 ? [].concat(...runs.map(({ runNumber, id }) => [
-            h('a', {
-                onclick: (e) => model.router.handleLinkEvent(e),
-                href: `?page=run-detail&id=${id}`,
-            }, runNumber),
+            frontLink(runNumber, 'run-detail', { id }),
             ', ',
         ])).slice(0, -1) : '-',
         balloon: true,
     },
-});
-
-export default activeColumns;
+};

lib/public/views/LhcFills/Overview/index.js

@@ -15,7 +15,7 @@
 import { h } from '/js/src/index.js';
 import table from '../../../components/Table/index.js';
 import { amountSelector, pageSelector } from '../../../components/Pagination/index.js';
-import activeColumns from '../ActiveColumns/index.js';
+import { lhcFillsActiveColumns } from '../ActiveColumns/lhcFillsActiveColumns.js';
 
 const AVAILABLE_AMOUNTS = [5, 10, 20];
 const TABLEROW_HEIGHT = 46;
@@ -38,8 +38,6 @@ const lhcFillOverviewScreen = (model) => h('', {
  * @returns {Object} Html page
  */
 const showEnvsTable = (model, lhcFills) => {
-    const lhcFillsColumns = activeColumns(model);
-
     if (!model.lhcFills.rowCountFixed) {
         // Calculates the number of rows which should be visible on the page
         model.lhcFills.lhcFillsPerPage = model.calculateRowDisplayAmount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT);
@@ -48,7 +46,7 @@ const showEnvsTable = (model, lhcFills) => {
     return [
         h('.flex-row.header-container.pv2'),
         h('.w-100.flex-column', [
-            table(lhcFills, lhcFillsColumns, {}, null, '.table-sm'),
+            table(lhcFills, lhcFillsActiveColumns, {}, null, '.table-sm'),
             pagination(model),
         ]),
     ];