Merge pull request #364 from AliceO2Group/Improvement/O2B-398

Improved the display of Main tab

lib/public/components/FlpRun/index.js

@@ -84,8 +84,6 @@ const activeFields = (model) => ({
  *
  * @param {Object} model Pass the model to access the defined functions.
  * @param {Object} post all data related to the post
- * @param {Number} index the identification index of the post
- * @param {Boolean} highlight indicator if this post should be highlighted
  * @return {vnode} Returns a post
  */
 const entry = (model, post) => {

lib/public/components/RunDetail/index.js

@@ -0,0 +1,126 @@
+/**
+ * @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';
+
+/**
+ * Method to retrieve the information for a specific run
+ * @return {Object} A collection of data with parameters for the Run detail page.
+ */
+const activeFields = () => ({
+    id: {
+        name: 'ID',
+        visible: false,
+        primary: true,
+    },
+    runNumber: {
+        name: 'Run',
+        visible: true,
+        size: 'cell-s',
+    },
+    tags: {
+        name: 'Tags',
+        visible: true,
+        size: 'cell-l',
+        format: (tags) => tags.map(({ text }) => text).join(', '),
+    },
+    timeO2Start: {
+        name: 'O2 Start',
+        visible: true,
+        size: 'cell-l',
+        format: (date) =>
+            date ? new Date(date).toLocaleString('en-GB', { timeStyle: 'medium', dateStyle: 'short' }) : '-',
+    },
+    timeO2End: {
+        name: 'O2 Stop',
+        visible: true,
+        size: 'cell-l',
+        format: (date) =>
+            date ? new Date(date).toLocaleString('en-GB', { timeStyle: 'medium', dateStyle: 'short' }) : '-',
+    },
+    timeTrgStart: {
+        name: 'TRG Start',
+        visible: true,
+        size: 'cell-l',
+        format: (date) =>
+            date ? new Date(date).toLocaleString('en-GB', { timeStyle: 'medium', dateStyle: 'short' }) : '-',
+    },
+    timeTrgEnd: {
+        name: 'TRG Stop',
+        visible: true,
+        size: 'cell-l',
+        format: (date) =>
+            date ? new Date(date).toLocaleString('en-GB', { timeStyle: 'medium', dateStyle: 'short' }) : '-',
+    },
+    activityId: {
+        name: 'Activity Id',
+        visible: true,
+        size: 'cell-m',
+    },
+    runType: {
+        name: 'Run Type',
+        visible: true,
+        size: 'cell-l',
+    },
+    runQuality: {
+        name: 'Run Quality',
+        visible: true,
+        size: 'cell-m',
+    },
+    nDetectors: {
+        name: '# of Detector',
+        visible: true,
+        size: 'cell-s',
+    },
+    nFlps: {
+        name: '# of Flps',
+        visible: true,
+        size: 'cell-s',
+    },
+    nEpns: {
+        name: '# of Epns',
+        visible: true,
+        size: 'cell-s',
+    },
+    nSubtimeframes: {
+        name: '# of STFs',
+        visible: true,
+        size: 'cell-m',
+    },
+    bytesReadOut: {
+        name: 'Readout Data',
+        visible: true,
+        size: 'cell-m',
+    },
+});
+
+/**
+ * A singular detail page which provides information about a run
+ *
+ * @param {Object} model Pass the model to access the defined functions.
+ * @param {Object} post all data related to the post
+ * @return {vnode} Returns a post
+ */
+const entry = (model, post) => {
+    const postFields = activeFields(model);
+
+    return h('#Run', Object.entries(postFields).map(([
+        key, {
+            name,
+            format,
+        },
+    ]) =>
+        h(`.w-30rem.flex-row.justify-between#Flp-${key}`, h('b', `${name}:`), format ? format(post[key]) : post[key])));
+};
+
+export default entry;

lib/public/views/Runs/Details/index.js

@@ -18,12 +18,13 @@ import table from '../../../components/Table/index.js';
 import targetURL from '../../../utilities/targetURL.js';
 import activeColumns from '../../Runs/ActiveColumnsLogs/index.js';
 import activeColumnsFLP from '../../Flps/ActiveColumns/index.js';
+import runDetail from '../../../components/RunDetail/index.js';
 
 /**
- * The VNode of the Run Detail screen.
+ * A collection of fields to show per Run detail, optionally with special formatting
  *
- * @param {*} model Pass the model to access the defined functions.
- * @return {vnode} The VNode of the Run Detail screen.
+ * @param {Object} model Pass the model to access the defined functions.
+ * @return {Object} A key-value collection of all relevant fields
  */
 const runDetails = (model) => {
     if (!model.router.params.id) {
@@ -50,9 +51,7 @@ const runDetails = (model) => {
         const panels = {
             main: {
                 name: 'Main',
-                content: Object.keys(data.payload).map((key) =>
-                    h('.w-30rem.flex-row.justify-between', {}, h('b', `${key}: `), Array.isArray(data.payload[key]) ?
-                        data.payload[key].map(({ text }) => text).join(', ') : data.payload[key])),
+                content: runDetail(model, data.payload),
             },
             logs: {
                 name: 'Log Entries',