Reuse components

app/lib/database/repositories/RunRepository.js

@@ -12,7 +12,6 @@
  */
 
 const Repository = require("./Repository");
-const Sequelize = require('sequelize');
 const deepmerge = require('deepmerge');
 
 /**

app/public/components/messagePanel/messages.js

@@ -0,0 +1,100 @@
+/**
+ * @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 messagePanel from './messagePanel.js';
+import spinner from '../common/spinner.js';
+
+const goBack = 'Go back';
+const nothingFound = 'Nothing found';
+
+const requestButton = (model) => h('button.btn.btn-primary.m3', {
+    onclick: () => model.fetchedData.reqForData(true),
+}, 'Reload');
+
+const removeCurrentDataButton = (model, label) => h('button.btn.btn-primary.m3', {
+    onclick: () => model.removeCurrentData(),
+}, label);
+
+export const failure = (model, status) => messagePanel(
+    'no-network-90',
+    'Failed to load data',
+    `The services are unavailable (status: ${status ? status : 'unknown'})`,
+    requestButton(model),
+);
+
+export const unknown = (model) => messagePanel(
+    'unexpected-90',
+    'Unknown error',
+    'Request could not be handled properly',
+    requestButton(model),
+);
+
+export const sessionError = (model) => messagePanel(
+    'session-timeout-90',
+    'Session error',
+    'Please retry to login',
+    h('button.btn.btn-primary.m3', { onclick: () => model.login() }, 'Login'),
+);
+
+export const serviceUnavailable = (model) => messagePanel(
+    'no-network-90',
+    'Service temporarily unavailable',
+    'Please contact the administrator',
+    h('button.btn.btn-primary.m3', { onclick: async () => await model.login() }, 'Retry'),
+    h('.notification-content.shadow-level3.bg-danger.white.br2.p2.notification-close', {
+        id: model.dataAccess.serviceUnavailable.messageFieldId,
+    }, ''),
+);
+
+export const noMatchingData = (model, page) => messagePanel(
+    'nothing-found-90',
+    nothingFound,
+    'There is no data that matches your request',
+    [
+        h('button.btn.btn-secondary.m3', {
+            onclick: () => {
+                model.navigation.goToDefaultPageUrl(page);
+            },
+        }, 'Clear filters'),
+        removeCurrentDataButton(model, goBack),
+    ],
+);
+
+export const noDataFound = (model) => messagePanel(
+    'nothing-found-90',
+    nothingFound,
+    'There is no data to be displayed here',
+    [
+        removeCurrentDataButton(model, goBack),
+        requestButton(model),
+    ],
+);
+
+export const nothingSelected = (model) => messagePanel(
+    'nothing-found-90',
+    'No subpage selected',
+    'Please select any of the subpages',
+    removeCurrentDataButton(model, goBack),
+);
+
+export const waiting = () => {
+    const retryButton = h('button.btn.btn-primary.m3', { onclick: () => document.location.reload(true) }, 'Retry');
+    const loadingMessage = h('h3', 'Loading...');
+
+    return h('.panel.abs-center',
+        spinner(),
+        loadingMessage,
+        retryButton);
+};

app/public/components/table/pager.js

@@ -12,8 +12,6 @@
  * or submit itself to any jurisdiction.
  */
 
-import viewButton from '../common/viewButton.js';
-import { replaceUrlParams } from '../../utils/url/urlUtils.js';
 import { h, iconChevronBottom } from '/js/src/index.js';
 import itemsCounter from '../../views/userView/data/table/items-counter.js';
 import { RCT } from '../../config.js';
@@ -25,21 +23,11 @@ export default function pager(model, data, pagerOnly = true) {
     const currentSite = Number(Object.fromEntries(data.url.searchParams.entries())[site]);
     const columnOptionsSelectId = 'columns-option-select-id';
 
-    const pageButton = (targetSite) => {
-        const url = replaceUrlParams(data.url, { [RCT.dataReqParams.site]: targetSite });
-        return viewButton(
-            model,
-            targetSite,
-            () => model.fetchedData.changePage(targetSite),
-            '',
-            url.pathname + url.search,
-            `.btn${targetSite === currentSite ? '.btn-primary' : '.btn-secondary'}`,
-            '',
-            true,
-        );
-    };
-
-    const siteChangingController = (targetSite, content) => h('a.btn.btn-secondary.site-changing-controller', {
+    const pageButton = (targetSite) => h(`button.btn${targetSite === currentSite ? '.btn-primary' : '.btn-secondary'}.no-text-decoration`, {
+        onclick: () => model.fetchedData.changePage(targetSite),
+    }, targetSite);
+
+    const siteChangingController = (targetSite, content) => h('button.btn.btn-secondary.site-changing-controller', {
         onclick: () => model.fetchedData.changePage(targetSite),
     }, content);
 

app/public/view.js

@@ -13,17 +13,15 @@
  */
 
 import dataAccessPanel from './views/dataAccessPanel.js';
-import serviceUnavailablePanel from './views/serviceUnavailablePanel.js';
-import sessionErrorPanel from './views/sessionErrorPanel.js';
-import waitingPanel from './views/waitingPanel.js';
 import { switchCase } from '/js/src/index.js';
+import { serviceUnavailable, sessionError, waiting } from './components/messagePanel/messages.js';
 
 export default function view(model) {
     const { state } = model.dataAccess;
 
     return switchCase(state, {
-        serviceUnavailable: () => serviceUnavailablePanel(model),
-        sessionError: () => sessionErrorPanel(model),
+        serviceUnavailable: () => serviceUnavailable(model),
+        sessionError: () => sessionError(model),
         dataAccess: () => dataAccessPanel(model),
-    }, () => waitingPanel())();
+    }, () => waiting())();
 }

app/public/views/flags/overview/flagsContent.js

@@ -21,7 +21,6 @@ import flagBreadCrumbs from '../../../../components/flags/flagBreadcrumbs.js';
 import { noRunNumbers } from '../../../../utils/defaults.js';
 import noSubPageSelected from '../../userView/data/table/noSubPageSelected.js';
 import copyLinkButton from '../../../components/buttons/copyLinkButton.js';
-import { modalIds, showModal } from '../../modal/modal.js';
 
 export default function flagsContent(model, runs, detectors, flags) {
     const urlParams = model.router.getUrl().searchParams;
@@ -59,10 +58,7 @@ export default function flagsContent(model, runs, detectors, flags) {
         ? h('div.main-content', [
             h('div.flex-wrap.justify-between.items-center',
                 h('div.flex-wrap.justify-between.items-center',
-                    flagBreadCrumbs(model, dataPassName, runNumber, detectorName),
-                    h('button.btn.btn-secondary', {
-                        onclick: () => showModal(modalIds.pageSettings.modal),
-                    }, h('.settings-20-primary'))),
+                    flagBreadCrumbs(model, dataPassName, runNumber, detectorName)),
 
                 h('div', functionalities(model))),
             model.searchFieldsVisible ? filter(model) : '',

app/public/views/runs/runsPerDataPass/overview/content.js

@@ -27,10 +27,9 @@ import downloadCSV from '../../../../utils/csvExport.js';
 import filter from '../../../userView/data/table/filtering/filter.js';
 import activeFilters from '../../../userView/data/table/filtering/activeFilters.js';
 import sortingRow from '../../../userView/data/table/sortingRow.js';
-import noDataView from '../../../userView/data/table/noDataView.js';
+import { noMatchingData, noDataFound } from '../../../../components/messagePanel/messages.js';
 import noSubPageSelected from '../../../userView/data/table/noSubPageSelected.js';
 import copyLinkButton from '../../../../components/buttons/copyLinkButton.js';
-import { modalIds, showModal } from '../../../modal/modal.js';
 const { pageNames } = RCT;
 
 export default function content(model, runs, detectors) {
@@ -77,10 +76,7 @@ export default function content(model, runs, detectors) {
             h('div.flex-wrap.justify-between.items-center',
                 h('div.flex-wrap.justify-between.items-center',
                     title(pageNames.runsPerDataPass),
-                    chips,
-                    h('button.btn.btn-secondary', {
-                        onclick: () => showModal(modalIds.pageSettings.modal),
-                    }, h('settings-20-primary'))),
+                    chips),
 
                 h('div', functionalities(model))),
             model.searchFieldsVisible ? filter(model) : '',
@@ -103,7 +99,9 @@ export default function content(model, runs, detectors) {
                             ]),
                             data.rows.length > 15 ? pager(model, data) : ''))
                     : ''
-                : noDataView(model, dataPointer, anyFiltersActive(url)),
+                : anyFiltersActive(url)
+                    ? noMatchingData(model, dataPointer.page)
+                    : noDataFound(model),
         ]);
 }
 

app/public/views/userView/data/dataPanel.js

@@ -12,14 +12,11 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h } from '/js/src/index.js';
 import tablePanel from './table/tablePanel.js';
-import loading from './fetchingStates/loading.js';
-import failureStatusAndReload from './fetchingStates/failure.js';
-import unknownError from './fetchingStates/unknown.js';
-import { RCT } from '../../../config.js';
 import flagsPanel from '../../flags/overview/flagsPanel.js';
 import { default as runsPerDataPassPanel } from '../../runs/runsPerDataPass/overview/panel.js';
+import { failure, unknown, waiting } from '../../../components/messagePanel/messages.js';
+import { RCT } from '../../../config.js';
 const { pageNames } = RCT;
 
 /**
@@ -33,8 +30,8 @@ export default function dataPanel(model, runs, detectors, flags) {
     const data = model.fetchedData[page][index];
 
     return data ? data.match({
-        NotAsked: () => h('', 'not asked'),
-        Loading: () => loading(),
+        NotAsked: () => unknown(model),
+        Loading: () => waiting(),
         Success: () => {
             switch (page) {
                 case pageNames.flags:
@@ -45,6 +42,6 @@ export default function dataPanel(model, runs, detectors, flags) {
                     return tablePanel(model, runs, detectors);
             }
         },
-        Failure: (status) => failureStatusAndReload(model, status),
-    }) : unknownError(model);
+        Failure: (status) => failure(model, status),
+    }) : unknown(model);
 }