[O2B-1514] Move the statistics button on lhc fills to the navbar (#2076)

* Statistics button has been moved to navbar. In between RCT and Overview

Author: NarrowsProjects

lib/public/components/NavBar/index.js

@@ -144,6 +144,7 @@ function navBar(model) {
             pageTab('lhc-fill-overview', 'LHC Fills'),
             pageTab('run-overview', 'Runs'),
             pageTab('lhc-period-overview', 'RCT'),
+            pageTab('statistics', 'Statistics'),
             dropdownSubMenu('Overview', model.isDropdownMenuOpened('overview'), () => model.toggleDropdownMenu('overview'), [
                 pageMenuLink('Tag Overview', 'tag-overview'),
                 pageMenuLink('QC Flag Types', 'qc-flag-types-overview'),

lib/public/views/LhcFills/Detail/lhcFillDetailsComponent.js

@@ -167,7 +167,7 @@ export const lhcFillDetailsComponent = (detailsModel) => detailsModel.lhcFillDet
                                 '-',
                             ) : null,
                             h('h4', 'Runs'),
-                            runsCounter && h('#statistics.details-container', [
+                            runsCounter && h('#runStatistics.details-container', [
                                 h('.detail-section', [
                                     h('.flex-row.g3', [
                                         h('strong', 'Total:'),

lib/public/views/LhcFills/Overview/index.js

@@ -17,7 +17,6 @@ import { table } from '../../../components/common/table/table.js';
 import { lhcFillsActiveColumns } from '../ActiveColumns/lhcFillsActiveColumns.js';
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
-import { frontLink } from '../../../components/common/navigation/frontLink.js';
 import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js';
 import { toggleStableBeamOnlyFilter } from '../../../components/Filters/LhcFillsFilter/stableBeamFilter.js';
 
@@ -50,7 +49,6 @@ const showLhcFillsTable = (lhcFillsOverviewModel) => {
 
     return [
         h('.flex-row.header-container.g2.pv2', [
-            frontLink(h('button.btn.btn-primary', 'Statistics'), 'statistics'),
             filtersPanelPopover(lhcFillsOverviewModel, lhcFillsActiveColumns),
             toggleStableBeamOnlyFilter(lhcFillsOverviewModel.filteringModel.get('hasStableBeams')),
         ]),

test/public/components/index.js

@@ -0,0 +1,18 @@
+/**
+ * @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 NavBarSuite = require('./navBar.test')
+
+module.exports = () => {
+    describe('Navbar component', NavBarSuite);
+};

test/public/components/navBar.test.js

@@ -0,0 +1,48 @@
+/**
+ * @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 {
+    defaultBefore,
+    defaultAfter,
+    goToPage,
+    expectUrlParams,
+} = require('../defaults.js');
+
+module.exports = () => {
+    let page;
+    let browser;
+    const navTabSelector = 'a.btn-tab[id]'; // ALI FLP doesn't have an id, nor a functional href, hence why it is excluded like this
+
+    before(async () => {
+        [page, browser] = await defaultBefore();
+    });
+
+    it('NavBar Tabs should navigate to their respective pages', async () => {
+        await goToPage(page, 'home');
+        
+        await page.waitForSelector(navTabSelector);
+
+        const tabIds = await page.$$eval(navTabSelector, tabs => tabs.map(tab => tab.id));
+        
+        for (const id of tabIds) {
+            await page.click(`#${id}`);
+            
+            expectUrlParams(page, { page: id }); // basePageTabs set their links and their ID to be the same.
+            await goToPage(page, 'home'); // Additional check to see if the correct
+        }
+    });
+
+    after(async () => {
+        await defaultAfter(page, browser);
+    });
+};

test/public/index.js

@@ -23,11 +23,13 @@ const ErrorSuite = require('./error');
 const EosReportSuite = require('./eosReport');
 const LhcPeriodsSuite = require('./lhcPeriods');
 const DataPassesSuite = require('./dataPasses');
+const ComponentsSuite = require('./components');
 const SimulationPassesSuite = require('./simulationPasses');
 const QcFlagTypesSuite = require('./qcFlagTypes');
 const QcFlagsSuite = require('./qcFlags');
 
 module.exports = () => {
+    describe('Components', ComponentsSuite);
     describe('LhcPeriods', LhcPeriodsSuite);
     describe('LhcFills', LhcFillsSuite);
     describe('Logs', LogsSuite);

test/public/lhcFills/detail.test.js

@@ -69,8 +69,8 @@ module.exports = () => {
     it('should successfully display runs statistics', async () => {
         await goToPage(page, 'lhc-fill-details', { queryParameters: { fillNumber: 6 } });
 
-        await page.waitForSelector('#statistics');
-        const statisticsContent = await page.$eval('#statistics', (element) => element.innerText);
+        await page.waitForSelector('#runStatistics');
+        const statisticsContent = await page.$eval('#runStatistics', (element) => element.innerText);
 
         expect(statisticsContent).to.include('Over 2 minutes');
         expect(statisticsContent).to.include('Under 2 minutes');