fix: overview table column mapping

Author: mvegter

lib/public/app.css

@@ -0,0 +1,9 @@
+.cell-xs { width: 2rem; }
+.cell-s { width: 4rem; }
+.cell-m { width: 8rem; }
+.cell-l { width: 16rem; }
+.cell-xl { width: 32rem; }
+
+/* last column fills space */
+.cell-xs:last-child, .cell-s:last-child, .cell-m:last-child, .cell-l:last-child, .cell-xl:last-child { width: initial; }
+.cell-xs:last-child .resizeWidth, .cell-s:last-child .resizeWidth, .cell-m:last-child .resizeWidth, .cell-l:last-child .resizeWidth, .cell-xl:last-child .resizeWidth { visibility: hidden; }

lib/public/components/Table/content.js

@@ -0,0 +1,39 @@
+/**
+ * @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';
+
+/**
+ * Renders a single row with content
+ * @param {Object} value The key value potentially containing a formatter function
+ * @param {String} text The content text
+ * @return {vnode} A single table cell containing (formatted) text
+ */
+const row = (value, text) => {
+    const formatted = value && value.format ? value.format(text) : text;
+    return h('td#', formatted);
+};
+
+/**
+ * Renders a list of rows with content
+ * @param {Array} data The full collection of API data corresponding to the keys
+ * @param {Object} keys The full collection of API keys and their corresponding header values
+ * @param {Function} params Additional element parameters, wrapped in a function
+ * @return {vnode} A filled array of rows based on the given data and keys
+ */
+const content = (data, keys, params) => {
+    const idKey = Object.keys(keys).find((key) => keys[key] && keys[key].primary);
+    return data.map((entry) =>
+        h(`tr#row${entry[idKey]}`, params(entry), Object.entries(keys).map(([key, value]) => row(value, entry[key]))));
+};
+
+export default content;

lib/public/components/Table/headers.js

@@ -0,0 +1,26 @@
+/**
+ * @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';
+
+/**
+ * Renders the header row
+ * @param {Object} keys The full collection of API keys and their corresponding header values
+ * @return {vnode} An array of rows containing all given header values with specific cell sizes
+ */
+const headers = (keys) =>
+    h('tr#headers', Object.values(keys).map((value) => {
+        const size = value.size || 'cell-m';
+        return h(`th.${size}`, value.name);
+    }));
+
+export default headers;

lib/public/components/Table/index.js

@@ -11,37 +11,35 @@
  * or submit itself to any jurisdiction.
  */
 import { h } from '/js/src/index.js';
+import headers from './headers.js';
+import content from './content.js';
 
 /**
- * Table row header
- * @param {String} header The text of the header elements
- * @return {vnode} Return a single row header element
+ * Selectively removes the API keys based on their visibility value
+ * @param {Object} keys The full collection of API keys and their corresponding header values
+ * @returns {Object} A filtered collection of keys based on visibility
  */
-const rowHeader = (header) => [h('th', { scope: 'col' }, header)];
-
-/**
- * Table data row
- * @param {Object} data The data to be rendered in the child element of the row
- * @return {vnode} Return a row of data in the table
- */
-const rowData = (data) => [h('td', data)];
+const filterKeysByVisibility = (keys) => {
+    Object.entries(keys).forEach(([key, value]) => {
+        if (!value.visible) {
+            delete keys[key];
+        }
+    });
+};
 
 /**
  * Renders the table
- * @param {Array} data The data array containing the objects with the data per row
- * @param {Array} headers The array of of the headers to be rendered in the table
- * @param {Object} model Model passed for use with routing to the correct detail view
+ * @param {Array} data An object array, with every object representing a to be rendered row
+ * @param {Object} keys The full collection of API keys and their corresponding header values
+ * @param {Function} params Additional element parameters, wrapped in a function
  * @returns {vnode} Return the total view of the table to rendered
  */
-const table = (data, headers, model) => h('table.table.shadow-level1.mh3', { style: { 'margin-bottom': 0 } }, [
-    h('thead', [h('tr', [headers.map((header) => rowHeader(header))])]),
-    h('tbody', [
-        data.map((entry, index) => h(`tr#row${index + 1}`, {
-            style: 'cursor: pointer;',
-            onclick: () => model.router.go(`?page=entry&id=${entry[0]}`),
-        }, [Object.keys(entry).map((subItem) => rowData(entry[subItem]))])),
-    ]),
-
-]);
+const table = (data, keys, params = () => null) => {
+    filterKeysByVisibility(keys);
+    return h('table.table.shadow-level1.mh3', [
+        headers(keys),
+        content(data, keys, params),
+    ]);
+};
 
 export { table };

lib/public/views/Logs/ActiveColumns/index.js

@@ -0,0 +1,49 @@
+/**
+ * @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.
+ */
+
+const ACTIVE_COLUMNS = {
+    title: {
+        name: 'Title',
+        visible: true,
+        size: 'cell-l',
+    },
+    entryId: {
+        name: 'Entry ID',
+        visible: true,
+        size: 'cell-l',
+        primary: true,
+    },
+    authorID: {
+        name: 'Author',
+        visible: true,
+        size: 'cell-l',
+    },
+    creationTime: {
+        name: 'Creation Time',
+        visible: true,
+        size: 'cell-l',
+        format: (date) => new Date(date).toLocaleString(),
+    },
+    origin: {
+        name: 'Origin',
+        visible: true,
+        size: 'cell-m',
+    },
+    subtype: {
+        name: 'Subtype',
+        visible: true,
+        size: 'cell-m',
+    },
+};
+
+export default ACTIVE_COLUMNS;

lib/public/views/Logs/Details/page.js

@@ -20,12 +20,16 @@ import PostBox from '../../../components/Post/index.js';
  */
 const logDetailScreen = (model) => {
     const data = model.logs.getData();
+    const error = model.logs.didErrorOccur();
 
     if (data && data.length !== 0) {
         const id = parseInt(model.router.params.id);
         const log = data.find((entry) => entry && entry.entryId === id);
-        return h('.w-100.flex-column', [log.content.map((post, index) => h('.w-100', PostBox(post, index + 1)))]);
-    } else {
+        return h('', [
+            h('.f3', log.title),
+            h('.w-100.flex-column', [log.content.map((post, index) => h('.w-100', PostBox(post, index + 1)))]),
+        ]);
+    } else if (error) {
         return h('', [
             h('.danger', 'This log could not be found.'),
             h('button.btn.btn-primary.mv3', {

lib/public/views/Logs/Logs.js

@@ -26,9 +26,8 @@ export default class Overview extends Observable {
         this.model = model;
         this.filterCriteria = [];
         this.data = [];
-        this.filtered = [];
+        this.filteredData = [];
         this.error = false;
-        this.headers = ['ID', 'Author ID', 'Title', 'Creation Time'];
     }
 
     /**
@@ -41,7 +40,7 @@ export default class Overview extends Observable {
 
         if (result.data) {
             this.data = result.data;
-            this.filtered = [...result.data];
+            this.filteredData = result.data;
             this.error = false;
         } else {
             this.error = true;
@@ -63,6 +62,7 @@ export default class Overview extends Observable {
 
             if (result.data) {
                 this.data = [result.data];
+                this.filteredData = [result.data];
                 this.error = false;
             } else {
                 this.error = true;
@@ -72,42 +72,20 @@ export default class Overview extends Observable {
         }
     }
 
-    /**
-     * Get the headers from the Overview class
-     * @returns {Array} Returns the headers
-     */
-    getHeaders() {
-        return this.headers;
-    }
-
     /**
      * Getter for all the data
      * @returns {Array} Returns all of the data
      */
     getData() {
-        return this.error ? null : this.data;
+        return this.filteredData;
     }
 
     /**
-     * Get the table data
-     * @returns {Array} The data without the tags to be rendered in a table
+     * Indicates if there was an error during log fetching
+     * @returns {Boolean} Returns if an error occured during log fetching
      */
-    getDataWithoutTags() {
-        const subentries = this.filtered.map((entry) => {
-            const columnData = Object.keys(entry).map((subkey) => {
-                // Filter out the field not needed for the table
-                if (subkey !== 'tags' && subkey !== 'content' && subkey !== 'origin' && subkey !== 'subtype') {
-                    if (subkey === 'creationTime') {
-                        return new Date(entry[subkey]).toLocaleString();
-                    }
-
-                    return entry[subkey];
-                }
-            });
-            return columnData.filter((item) => item !== undefined);
-        });
-
-        return subentries;
+    didErrorOccur() {
+        return this.error;
     }
 
     /**
@@ -117,7 +95,7 @@ export default class Overview extends Observable {
      */
     addFilter(tag) {
         this.filterCriteria = [...this.filterCriteria, tag];
-        this.getFilteredData();
+        this.setFilteredData();
     }
 
     /**
@@ -127,17 +105,17 @@ export default class Overview extends Observable {
      */
     removeFilter(condition) {
         this.filterCriteria = this.filterCriteria.filter((tag) => tag !== condition);
-        this.getFilteredData();
+        this.setFilteredData();
     }
 
     /**
      * Filter the data
      * @returns {Array} Sets the data according to the amount of applied filters
      */
-    getFilteredData() {
+    setFilteredData() {
         this.filterCriteria.length !== 0
             ? this.filterByTags()
-            : this.filtered = [...this.data];
+            : this.filteredData = this.data;
 
         this.notify();
     }
@@ -147,7 +125,7 @@ export default class Overview extends Observable {
      * @returns {Array} Sets the filtered data on the criteria applied by the user
      */
     filterByTags() {
-        this.filtered = this.data.filter((entry) => this.checkExistingTag(entry));
+        this.filteredData = this.data.filter((entry) => this.checkExistingTag(entry));
     }
 
     /**

lib/public/views/Logs/Overview/page.js

@@ -13,20 +13,23 @@
 import { h } from '/js/src/index.js';
 import filters from '../../../components/Filters/index.js';
 import { table } from '../../../components/Table/index.js';
+import ACTIVE_COLUMNS from '../ActiveColumns/index.js';
 
 /**
  * Table row header
  * @param {object} model Pass the model to access the defined functions
  * @return {vnode} Return the view of the table with the filtering options
  */
 const logOverviewScreen = (model) => {
-    const headers = model.logs.getHeaders();
-    const data = model.logs.getDataWithoutTags();
+    const data = model.logs.getData();
     const tags = model.logs.getTagCounts();
 
     return h('.w-100.flex-row', [
         filters(model, tags),
-        h('.w-75', [table(data, headers, model)]),
+        h('.w-75', table(data, ACTIVE_COLUMNS, (entry) => ({
+            style: 'cursor: pointer;',
+            onclick: () => model.router.go(`?page=entry&id=${entry.entryId}`),
+        }))),
     ]);
 };
 

test/public/index.js

@@ -11,7 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
-const LogsSuite = require('./logs.test');
+const LogsSuite = require('./logs');
 
 module.exports = () => {
     describe('Logs', LogsSuite);