[O2B-1056] bookkeeping error page (#1820)

* Error page now shows when no page is found * Changed 404 styling * Error page can now be changed according to error * Added tests * Remove redundant tets * Page parameter will now be displayed even after navigating to error page * small code improvements * Reverted import refactor * Small code improvements --------- Co-authored-by: Fenne <[email protected]> Co-authored-by: Martin Boulais <[email protected]>
AliceO2Group · Jan 16, 2025 · e54eaec · e54eaec
1 parent 86f5f39
commit e54eaec
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 2 deletions.
diff --git a/lib/public/Model.js b/lib/public/Model.js
@@ -38,6 +38,7 @@ import { ObservableData } from './utilities/ObservableData.js';
 import { BkpRoles } from './domain/enums/BkpRoles.js';
 import { getRoleForDetector } from './utilities/getRoleForDetector.js';
 import { detectorsProvider } from './services/detectors/detectorsProvider.js';
+import { ErrorModel } from './views/Error/ErrorModel.js';
 
 /**
  * Root of model tree
@@ -168,6 +169,12 @@ export default class Model extends Observable {
         this.aboutModel = new AboutModel();
         this.aboutModel.bubbleTo(this);
 
+        /**
+         * @type {ErrorModel}
+         */
+        this.errorModel = new ErrorModel();
+        this.errorModel.bubbleTo(this);
+
         // Setup router
         this.router = new QueryRouter();
         this.router.observe(this.handleLocationChange.bind(this));
@@ -309,9 +316,22 @@ export default class Model extends Observable {
             case 'eos-report-create':
                 this.eosReportModel.loadCreation(this.router.params.shiftType);
                 break;
-            default:
-                this.router.go('?page=home');
+            case 'error':
                 break;
+            default:
+                if (this.router.params.page) {
+                    this.errorModel.setError({
+                        code: '404',
+                        codeDescription: 'Page not found',
+                        message: 'The page you are looking for might have been removed, had its name changed or is temorarily unavailable.',
+                    });
+                    this.router.params.page = 'error';
+                    this.router.notify();
+                    break;
+                } else {
+                    this.router.go('?page=home');
+                    break;
+                }
         }
     }
 

diff --git a/lib/public/view.js b/lib/public/view.js
@@ -53,6 +53,7 @@ import { QcFlagDetailsForDataPassPage } from './views/QcFlags/details/forDataPas
 import { QcFlagDetailsForSimulationPassPage } from './views/QcFlags/details/forSimulationPass/QcFlagDetailsForSimulationPassPage.js';
 import { GaqFlagsOverviewPage } from './views/QcFlags/GaqFlags/GaqFlagsOverviewPage.js';
 import { SynchronousQcFlagsOverviewPage } from './views/QcFlags/Synchronous/SynchronousQcFlagsOverviewPage.js';
+import { ErrorPage } from './views/Error/index.js';
 
 /**
  * Main view layout
@@ -114,6 +115,8 @@ export default (model) => {
         'tag-create': TagCreate,
 
         'eos-report-create': EosReportCreationPage,
+
+        error: ErrorPage,
     };
 
     return [

diff --git a/lib/public/views/Error/ErrorModel.js b/lib/public/views/Error/ErrorModel.js
@@ -0,0 +1,61 @@
+/**
+ * @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 { Observable } from '/js/src/index.js';
+
+/**
+ * Model representing handlers for errorPage.js
+ */
+export class ErrorModel extends Observable {
+    /**
+     * The ApplicationError object.
+     * @typedef {(object)} ApplicationError
+     * @property {string} code - The error code
+     * @property {string} codeDescription - The description of the error code
+     * @property {string} message - The error message
+     */
+
+    /**
+     * The constructor for the Error model object
+     * @returns {object} Constructs the Error model
+     */
+    constructor() {
+        super();
+        this.error = {
+            code: 'Unknown Error',
+            codeDescription: 'Something unexpected happened.',
+            message: 'Please try again later.',
+        };
+    }
+
+    /**
+     * Sets the error object for the model
+     * @param {ApplicationError} error The error object
+     * @returns {void}
+     */
+    setError(error) {
+        if (!error.code || !error.codeDescription || !error.message) {
+            return;
+        }
+        this.error = error;
+        this.notify();
+    }
+
+    /**
+     * Returns the error object for the model
+     * @returns {ApplicationError} The error object
+     */
+    getError() {
+        return this.error;
+    }
+}
diff --git a/lib/public/views/Error/index.js b/lib/public/views/Error/index.js
@@ -0,0 +1,42 @@
+/**
+ * @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 { frontLink } from '../../components/common/navigation/frontLink.js';
+import { h, iconHome } from '/js/src/index.js';
+
+/**
+ * Error page component that dynamically displays error details based on the model
+ * @param {Model} model - Represents the current application state
+ * @returns {Component} Error page component
+ */
+export const ErrorPage = (model) => {
+    const { code, codeDescription, message } = model.errorModel.error;
+    return h('div.flex-column.justify-center ', [
+        h('.flex-column.items-center.g3.mv4', [
+            h('img', {
+                src: 'assets/alice.png',
+                alt: 'Alice logo',
+                style: 'width: 200px',
+            }),
+            h('h2', 'Oops! Something went wrong.'),
+            h('h3', `${code} - ${codeDescription}`),
+            h('.f5', message),
+            frontLink(
+                h('div.flex-row.justify-center.items-center.g1', [
+                    iconHome(),
+                    'Go to Home Page',
+                ]),
+                'home',
+            ),
+        ]),
+    ]);
+};
diff --git a/test/public/error/error.test.js b/test/public/error/error.test.js
@@ -0,0 +1,53 @@
+/**
+ * @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 chai = require('chai');
+const { defaultBefore, defaultAfter, goToPage } = require('../defaults.js');
+const { resetDatabaseContent } = require('../../utilities/resetDatabaseContent.js');
+
+const { expect } = chai;
+
+module.exports = () => {
+    let page;
+    let browser;
+
+    before(async () => {
+        [page, browser] = await defaultBefore(page, browser);
+        await resetDatabaseContent();
+    });
+
+    after(async () => {
+        [page, browser] = await defaultAfter(page, browser);
+    });
+
+    it('loads the page successfully', async () => {
+        const response = await goToPage(page, 'error');
+
+        // We expect the page to return the correct status code, making sure the server is running properly
+        expect(response.status()).to.equal(200);
+
+        // We expect the page to return the correct title, making sure there isn't another server running on this port
+        const title = await page.title();
+        expect(title).to.equal('AliceO2 Bookkeeping');
+    });
+
+    it('shows the error message', async () => {
+        const errorTitle = await page.$eval('h2', (el) => el.innerText);
+        expect(errorTitle).to.equal('Oops! Something went wrong.');
+    });
+
+    it ('shows the default text', async () => {
+        const errorCode = await page.$eval('h3', (el) => el.innerText);
+        expect(errorCode).to.equal('Unknown Error - Something unexpected happened.');
+    });
+};
diff --git a/test/public/error/index.js b/test/public/error/index.js
@@ -0,0 +1,17 @@
+/**
+ *  @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 ErrorSuite = require('./error.test');
+
+module.exports = () => {
+    describe('Error Page', ErrorSuite);
+};
diff --git a/test/public/index.js b/test/public/index.js
@@ -19,6 +19,7 @@ const FlpsSuite = require('./flps');
 const HomeSuite = require('./home');
 const AboutSuite = require('./about');
 const EnvsSuite = require('./envs');
+const ErrorSuite = require('./error');
 const EosReportSuite = require('./eosReport');
 const LhcPeriodsSuite = require('./lhcPeriods');
 const DataPassesSuite = require('./dataPasses');
@@ -41,4 +42,5 @@ module.exports = () => {
     describe('SimulationPasses', SimulationPassesSuite);
     describe('QcFlagTypes', QcFlagTypesSuite);
     describe('QcFlags', QcFlagsSuite);
+    describe('Error', ErrorSuite);
 };