Description
For all FLP GUIs we try to have an About page that can give relevant information in case something is not working as expected.
For AliECS GUI (ALICE Exeperiment Control GUI) ee as an example: https://ali-ecs.cern.ch/?page=about where we list the status of the integrated services.
Bookkeeping is lacking from this point of view and that is why we need to add improvements to it. Currently the page serves just the version number of bookkeeping that updated manually for each release. Thus, the purpose of this ticket is to:
- automatically pick up the version number of Bookkeeping from
package.jsonfile which is automatically bumped on release ✅ 2023-07-26 - Display host and port of Bookkeeping ✅ 2023-07-26
- Display host and port of MariaDB instance + status of connection to it ✅ 2023-08-01
Work Log
Importing json
First I tried, on the frontend, to simply use import * from '../../../../../package.json'. But this 404’d
Then I tried making my own json file in the public folder, where the frontend is and did it did a MIME type error
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.
Adding a model and controller for the about page
First, define a new sub-model in Model.js
// Model.js
/**
* @type {AboutModel}
*/
this.AboutModel = new AboutModel()
this.AboutModel.bubbleTo(this)
If necessary, call sub-model actions on model.handleLocationPage
// Model.js
/**
* Delegates sub-model actions depending on new location of the page
* @returns {vnode} The page to be loaded
*/
async handleLocationChange() {
...
switch (this.router.params.page) {
case 'about-overview':
this.AboutModel.fetchAppInfo();
break;
...
The model is passed in the content function in view.js. Access the sub-model in your page view:
// About/index.js
const aboutOverview = (model) => {
const appInfo = model.AboutModel.getAppInfo()
...
}
fin.
Adding a controller
Designs
