[OGUI-1519] Split "Select all" button functionality into 2 buttons (#…

…2425)

* splits the "Select All" button in 2 new buttons:
  * "LockAll" - lock all available detectors. Depending on page source, it will not lock TST one
  * "Select All" - select all available detectors for which the user has the lock and detector is not already active
* adds await before starting FLP integration tests and also log state of detectors whens tarting

Control/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliceo2/control",
-  "version": "1.70.1",
+  "version": "1.70.2",
   "description": "ALICE O2 Control GUI",
   "author": "George Raduta",
   "contributors": [

Control/public/workflow/panels/flps/FlpSelection.js

@@ -137,19 +137,20 @@ export default class FlpSelection extends Observable {
   /**
    * Method which checks if a detector is available and current user has the lock for it. 
    * If so, it will select the detector and all its associated FLPs
+   * @param {Array<String>} detectorsToSelect - list of detectors to select
    * @returns {Promise<void>}
    */
-  selectAllAvailableDetectors() {
+  selectAllAvailableDetectors(detectorsToSelect) {
+    this.selectedDetectors = [];
     const activeDetectors = this.activeDetectors.isSuccess() ? this.activeDetectors.payload.detectors : [];
-    const detectors = this.detectors.isSuccess() ? this.detectors.payload : [];
-    const availableDetectors = detectors.filter((detector) =>
+    detectorsToSelect.filter((detector) =>
       !activeDetectors.includes(detector) && this.workflow.model.lock.isLockedByCurrentUser(detector)
-    );
+    )
+      .forEach((detector) => {
+        this.selectedDetectors.push(detector);
+        this.setHostsForDetector(detector, true);
 
-    this.selectedDetectors.push(...availableDetectors);
-    for (const detector of availableDetectors) {
-      this.setHostsForDetector(detector, true);
-    }
+      });
     this.notify();
   }
 

Control/public/workflow/panels/flps/detectorsPanel.js

@@ -27,39 +27,56 @@ import {DetectorLockAction} from '../../../common/enums/DetectorLockAction.enum.
 export default (model, onlyGlobal = false) => {
   const {activeDetectors} = model.workflow.flpSelection;
   const detectors = model.lock.padlockState;
+  let allowedDetectors = [];
+
   const areDetectorsReady = activeDetectors.isSuccess() && detectors.isSuccess();
+  if (areDetectorsReady) {
+    allowedDetectors = JSON.parse(JSON.stringify(detectors.payload));
+    if (onlyGlobal) {
+      delete allowedDetectors.TST;
+    }
+    allowedDetectors = Object.keys(allowedDetectors);
+  }
+
   return h('.w-100', [
-    h('.w-100.flex-row.panel-title.p2', [
-      h('h5.w-100.bg-gray-light.flex-grow.items-center.flex-row.justify-center', 'Detectors Selection'),
-      h('button.btn.btn-primary.f6.ml1', {
+    h('.w-100.flex-row.panel-title.p2.f6', [
+      areDetectorsReady && h('button.btn.btn-sm', {
         onclick: async () => {
           await model.lock.actionOnLock('ALL', DetectorLockAction.TAKE, false);
-          model.workflow.flpSelection.selectAllAvailableDetectors();
+          if (onlyGlobal) {
+            await model.lock.actionOnLock('TST', DetectorLockAction.RELEASE, false);
+          }
         }
-      }, 'Select All')
+      }, 'Lock Available'),
+      h('h5.w-100.bg-gray-light.flex-grow.items-center.flex-row.justify-center', 'Detectors Selection'),
+      areDetectorsReady && h('button.btn.btn-primary.btn-sm', {
+        onclick: async () => {
+          model.workflow.flpSelection.selectAllAvailableDetectors(allowedDetectors);
+        }
+      }, 'Select Available')
     ]),
     h('.w-100.p2.panel',
       (activeDetectors.isLoading() || detectors.isLoading()) && pageLoading(2),
-      (areDetectorsReady) && detectorsSelectionArea(model, Object.keys(detectors.payload), onlyGlobal),
+      (!areDetectorsReady) && h('.f7.flex-column',
+        `Loading detectors...active: ${activeDetectors.kind} and all: ${detectors.kind}`),
+      (areDetectorsReady) && detectorsSelectionArea(model, allowedDetectors),
       (activeDetectors.isFailure() || detectors.isFailure()) && h('.f7.flex-column', 'Unavailable to load detectors'),
     )
   ]);
 };
 
 /**
  * Display an area with selectable elements representing detectors
- * @param {Object} model
- * @param {Array<string>} list
- * @param {boolean} onlyGlobal - if only global detectors should be displayed
+ * @param {Model} model - root model of the application
+ * @param {Array<string>} detectors - list of detectors to allow selection of
  * @return {vnode}
  */
-const detectorsSelectionArea = (model, list, onlyGlobal) => {
+const detectorsSelectionArea = (model, detectors) => {
   return h('.w-100.m1.text-left.shadow-level1.grid.g2', {
     style: 'max-height: 40em;'
   }, [
-    list
+    detectors
       .filter((name) => (name === model.detectors.selected || !model.detectors.isSingleView()))
-      .filter((name) => !onlyGlobal || (onlyGlobal && name !== 'TST'))
       .map((name) => detectorSelectionPanel(model, name))
   ]);
 };

Control/test/integration/core-tests.js

@@ -28,7 +28,7 @@ describe('Control', function() {
 
   before(async () => {
     // Start browser to test UI
-    browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: true});
+    browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: 'new'});
     page = await browser.newPage();
     await page.setViewport({ width: 1200, height: 770});
     exports.page = page;
@@ -70,6 +70,7 @@ describe('Control', function() {
   it('should have redirected to default page "/?page=environments"', async () => {
     const location = await page.evaluate(() => window.location);
     assert.strictEqual(location.search, '?page=environments', 'Could not load home page of AliECS GUI');
+    await page.waitForTimeout(4000);
   });
 
   require('./create-new-environment');

Control/test/integration/create-new-environment.js

@@ -32,7 +32,7 @@ describe('`pageNewEnvironment` test-suite', async () => {
   it('should successfully load newEnvironment page', async () => {
     await page.goto(url + '?page=newEnvironmentAdvanced', {waitUntil: 'networkidle0'});
     const location = await page.evaluate(() => window.location);
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
     assert.strictEqual(location.search, '?page=newEnvironmentAdvanced');
   });
 
@@ -84,7 +84,12 @@ describe('`pageNewEnvironment` test-suite', async () => {
     await page.screenshot({
       path: 'lock-selection.png',
     });
-    await page.waitForSelector('#detectorLockButtonForTST', {timeout: 2000});
+    const detectors = await page.evaluate(() => JSON.stringify(window.model.lock.padlockState));
+    const activeDetectors = await page.evaluate(() => JSON.stringify(window.model.workflow.flpSelection.activeDetectors));
+    console.log('Detectors are:' , detectors);
+    console.log('Active Detectors are:' , activeDetectors);
+
+    await page.waitForSelector('#detectorLockButtonForTST', {timeout: 6000});
     await page.evaluate(() => document.querySelector('#detectorLockButtonForTST').click());
     await page.waitForTimeout(1000);
     await page.waitForSelector('#detectorSelectionButtonForTST', {timeout: 2000});