[O2B-1080] home overviews serparation (#1291)

* init model

* expose home model

* cleanup

* docs

* rename

* rename

* docs

* rename

* rename

Author: xsalonx

lib/public/Model.js

@@ -29,6 +29,7 @@ import { EosReportModel } from './views/EosReport/EosReportModel.js';
 import { AboutModel } from './views/About/About.js';
 import { StatisticsPageModel } from './views/Statistics/StatisticsPageModel.js';
 import { LhcPeriodsModel } from './views/lhcPeriods/LhcPeriodsModel.js';
+import { HomePageModel } from './views/Home/Overview/HomePageModel.js';
 
 /**
  * Root of model tree
@@ -66,6 +67,9 @@ export default class Model extends Observable {
 
         // Models
 
+        this.home = new HomePageModel(this);
+        this.home.bubbleTo(this);
+
         this.lhcPeriods = new LhcPeriodsModel(this);
         this.lhcPeriods.bubbleTo(this);
 
@@ -148,8 +152,7 @@ export default class Model extends Observable {
         switch (this.router.params.page) {
             case 'home':
                 // Setting the rows per page also collects all the runs and logs
-                this.logs.loadOverview();
-                this.runs.loadOverview();
+                this.home.loadOverview();
                 break;
             case 'lhc-period-overview':
                 this.lhcPeriods.loadOverview();

lib/public/components/Filters/RunsFilter/EorReasonsFilterModel.js

@@ -29,6 +29,7 @@ export class EorReasonFilterModel extends Observable {
      */
     constructor() {
         super();
+        this._visualChange$ = new Observable();
         this._eorReasonTypes = RemoteData.notAsked();
         this._fetchReasonTypes();
         this._filterEorReason = { ...emptyEorReason };
@@ -41,7 +42,7 @@ export class EorReasonFilterModel extends Observable {
      */
     async _fetchReasonTypes() {
         this._eorReasonTypes = RemoteData.loading();
-        this.notify();
+        this._visualChange$.notify();
 
         try {
             const { data: reasonTypes } = await getRemoteData('/api/runs/reasonTypes');
@@ -50,7 +51,15 @@ export class EorReasonFilterModel extends Observable {
             this._eorReasonTypes = RemoteData.failure(error);
         }
 
-        this.notify();
+        this._visualChange$.notify();
+    }
+
+    /**
+     * Returns an observable notified any time a visual change occurs that has no impact on the actual selection
+     * @return {Observable} the visual change observable
+     */
+    get visualChange$() {
+        return this._visualChange$;
     }
 
     /**

lib/public/view.js

@@ -24,7 +24,6 @@ import TagCreate from './views/Tags/Create/index.js';
 import FlpOverview from './views/Flps/Overview/index.js';
 import AboutOverview from './views/About/Overview/index.js';
 import FlpDetail from './views/Flps/Details/index.js';
-import HomeOverview from './views/Home/Overview/index.js';
 import { EnvironmentOverviewPage } from './views/Environments/Overview/EnvironmentOverviewPage.js';
 import { Index } from './views/LhcFills/Overview/index.js';
 import { modalContainer } from './components/modal/modalContainer.js';
@@ -35,6 +34,7 @@ import { TagDetailsPage } from './views/Tags/Details/TagDetailsPage.js';
 import { EosReportCreationPage } from './views/EosReport/create/EosReportCreationPage.js';
 import { StatisticsPage } from './views/Statistics/StatisticsPage.js';
 import { LhcPeriodsOverviewPage } from './views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js';
+import { HomePage } from './views/Home/Overview/HomePage.js';
 
 /**
  * Main view layout
@@ -43,7 +43,7 @@ import { LhcPeriodsOverviewPage } from './views/lhcPeriods/Overview/LhcPeriodsOv
  */
 export default (model) => {
     const pages = {
-        home: HomeOverview,
+        home: HomePage,
 
         'lhc-period-overview': LhcPeriodsOverviewPage,
 

lib/public/views/Home/Overview/index.js …b/public/views/Home/Overview/HomePage.jslib/public/views/Home/Overview/index.js renamed to lib/public/views/Home/Overview/HomePage.js lib/public/views/Home/Overview/index.js renamed to lib/public/views/Home/Overview/HomePage.js

@@ -22,11 +22,11 @@ const TABLEROW_HEIGHT = 46;
 const PAGE_USED_HEIGHT = 155;
 
 /**
- * Home Page main components
- * @param {Object} model Pass the model to access the defined functions
- * @return {vnode} Return the view of the page with the filtering options
+ * Home Page component
+ * @param {Object} model global model
+ * @return {Component} Return the component of the home page
  */
-const HomeOverviewScreen = ({ logs: { overviewModel: logsOverviewModel }, runs: { overviewModel: runsOverviewModel } }) => {
+export const HomePage = ({ home: { logsOverviewModel, runsOverviewModel } }) => {
     const rowCount = estimateDisplayableRowsCount(TABLEROW_HEIGHT, PAGE_USED_HEIGHT);
     logsOverviewModel.pagination.provideDefaultItemsPerPage(rowCount);
     runsOverviewModel.pagination.provideDefaultItemsPerPage(rowCount);
@@ -44,5 +44,3 @@ const HomeOverviewScreen = ({ logs: { overviewModel: logsOverviewModel }, runs:
         ]),
     ]);
 };
-
-export default (model) => [HomeOverviewScreen(model)];

lib/public/views/Home/Overview/HomePageModel.js

@@ -0,0 +1,59 @@
+/**
+ * @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';
+import { RunsOverviewModel } from '../../Runs/Overview/RunsOverviewModel.js';
+import { LogsOverviewModel } from '../../Logs/Overview/LogsOverviewModel.js';
+
+/**
+ * Model storing state for the home page
+ */
+export class HomePageModel extends Observable {
+    /**
+     * The constructor of the home model object
+     * @param {Model} model global model
+     */
+    constructor(model) {
+        super();
+        this._runsOverviewModel = new RunsOverviewModel(model);
+        this._runsOverviewModel.bubbleTo(this);
+
+        this._logsOverviewModel = new LogsOverviewModel(model);
+        this._logsOverviewModel.bubbleTo(this);
+    }
+
+    /**
+     * Load runs and logs overview data
+     * @return {void}
+     */
+    loadOverview() {
+        this._runsOverviewModel.fetchRuns();
+        this._logsOverviewModel.fetchLogs();
+    }
+
+    /**
+     * Returns the model for the runs overview
+     * @return {RunsOverviewModel} the overview model
+     */
+    get runsOverviewModel() {
+        return this._runsOverviewModel;
+    }
+
+    /**
+     * Returns the model for the logs overview
+     * @return {LogsOverviewModel} the overview model
+     */
+    get logsOverviewModel() {
+        return this._logsOverviewModel;
+    }
+}

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

@@ -28,7 +28,7 @@ export class LogsOverviewModel extends Observable {
     /**
      * The constructor of the Overview model object
      *
-     * @param {Model} model Pass the model to access the defined functions
+     * @param {Model} model global model
      */
     constructor(model) {
         super();

lib/public/views/Runs/Overview/RunsOverviewModel.js

@@ -50,6 +50,7 @@ export class RunsOverviewModel extends Observable {
 
         this._eorReasonsFilterModel = new EorReasonFilterModel();
         this._eorReasonsFilterModel.observe(() => this._applyFilters());
+        this._eorReasonsFilterModel.visualChange$.observe(() => this.notify());
 
         this._pagination = new PaginationModel();
         this._pagination.observe(() => this.fetchRuns());
@@ -62,7 +63,7 @@ export class RunsOverviewModel extends Observable {
         this.reset(false);
 
         // eslint-disable-next-line no-return-assign,require-jsdoc
-        const updateDebounceTime = () => this._debouncedFetchAllRuns = debounce(this.fetchRuns.bind(this), model.inputDebounceTime);
+        const updateDebounceTime = () => this._debouncedFetchAllRuns = debounce(() => this.fetchRuns(), model.inputDebounceTime);
         model.appConfiguration$.observe(() => updateDebounceTime());
         updateDebounceTime();
     }