#222 Removed COE Console

.github/workflows/release.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        os: [ubuntu-latest, windows-latest]
 
     steps:
       - name: Checkout branch

DEVELOPER.md

@@ -0,0 +1,26 @@
+# Development environment documentation
+## Required technologies and tools
+- [Node Package Manager (NPM)](https://www.npmjs.com/package/npm): a package management system used to maintain packages used by the application. NPM 3 or higher is required.
+- [Gulp](https://gulpjs.com/docs/en/getting-started/quick-start): a build system used to build the application.
+- [Electron](http://electron.atom.io/): The app is built with Electron v10.4.7. 
+- [Node.js](https://nodejs.org/) (v14.x is required). 
+- [Visual Studio Code](https://code.visualstudio.com/) is a good choice as an editor: it's cross-platform and is actually built on top of Electron. That said, everything can be used.
+
+To manage multiple versions of **`Node.js`** &/or **`npm`**, consider using a [node version manager](https://github.com/search?q=node+version+manager+archived%3Afalse&type=repositories&ref=advsearch).
+## How to build and run the application
+The following are the commands to run the application. After checking out the repo:
+1.  To install node dependencies:  `npm install`
+2.  To install gulp: `npm install -g gulp` (it's easiest to have it installed globally)
+3.  To build the UI:  `gulp` or `gulp build`
+4.  To run it:  `npm start`
+5.  To run tests: `npm test`
+6.  To build and create a developer .exe file: `gulp package` 
+
+## Useful commands and properties
+- `gulp watch`: it will automatically detect when you save a file and run the corresponding build task so you only have to refresh the app when developing.
+- `--no-sandbox`: the property `--no-sandbox` has been inserted to `npm start` to disable sandbox mode to prevent GPU mismanagement errors, caused by Electron conflicts, during virtualization on a Linux operating system. It is necessary, however, that this property be entered while starting the built program from the terminal. For example, starting the AppImage from the terminal we would type `./NomeAppImage --no-sandbox`. This way, the application will be started without any problems. 
+
+## Latest builds
+The master branch is built automatically on git pushes and the output, for successful builds. Please find the artifacts by clicking in the run [of the Package workflow](https://github.com/INTO-CPS-Association/into-cps-application/actions?query=workflow%3APackage).
+
+These builds represent ongoing work. They have not been fully tested and are not guaranteed to work. Normally, you are advised to use one of the [releases](https://github.com/INTO-CPS-Association/into-cps-application/releases).

docs/first_steps.rst

@@ -30,7 +30,6 @@ Development Build
 1. clone the repository: ``git clone https://github.com/INTO-CPS-Association/into-cps-application/tree/development``
 2. change working directory to repository: ``cd into-cps-application``
 3. install node dependencies: ``npm install``
-4. install other resources: ``gulp init``
 5. build ui: ``gulp`` 
 6. run the test: ``npm test``
 

package.json

@@ -16,7 +16,7 @@
   },
   "electronVersion": "10.1.3",
   "scripts": {
-    "start": "electron dist/main.js",
+    "start": "electron --no-sandbox dist/main.js",
     "test": "npx playwright test",
     "dist": "electron-builder --x64 -p never"
   },

src/CoeServerStatusUiController.ts

@@ -124,8 +124,29 @@ export class CoeServerStatusUiController {
         btnLaunch.disabled = coe.isRunning();
         var btnStop = <HTMLButtonElement>document.getElementById("coe-btn-stop");
         btnStop.disabled = !coe.isRunning();
+        var btnBottomLaunch = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
+        var btnBottomStop = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
     }
 
+    public updateButtonState() {
+        var coe = IntoCpsApp.getInstance().getCoeProcess();
+        console.log("is running: ", coe.isRunning());
+        let button = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
+        let icon = <HTMLButtonElement>document.getElementById("coeIconColor");
+
+        if (coe.isRunning()) {
+            button.innerHTML = 'Stop COE <span id="coeIconColor" style="color:green" class="glyphicon glyphicon-one-fine-dot"></span>';
+            console.log("button: ", button);
+            button.setAttribute('onclick', 'coeViewController.stopCoe()');
+            icon.style.color = 'green';
+        } else {
+            button.innerHTML = 'Start COE <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>';
+            button.setAttribute('onclick', 'coeViewController.launchCoe()');
+            icon.style.color = 'red';
+        }
+    }
+
+
     consoleAutoScroll() {
         let div = this.outputDiv;
         if (!$(div).is(":visible"))
@@ -162,9 +183,10 @@ export class CoeServerStatusUiController {
         let index = coe.subscribePrepareSimulationCallback(this.type, this.prepareSimulationCallback());
         this.isSubscribed = true;
         this.setStatusIcons();
-
+        this.updateButtonState();
+
         if (!this.coeStatusRunning) {
-            window.setInterval(() => { this.setStatusIcons(); this.truncateVisibleLog() }, 3000);
+            window.setInterval(() => { this.setStatusIcons(); this.truncateVisibleLog(), this.updateButtonState()}, 3000);
             window.setInterval(() => { this.consoleAutoScroll() }, 800);
             this.coeStatusRunning = true;
         }
@@ -196,13 +218,16 @@ export class CoeServerStatusUiController {
         if (!coe.isRunning()) {
             coe.start();
         }
+
+        this.updateButtonState();
     }
 
     public stopCoe() {
         var coe = IntoCpsApp.getInstance().getCoeProcess();
         if (coe.isRunning()) {
             coe.stop();
         }
+        this.updateButtonState();
     }
 
 }

src/angular2-app/coe/coe-simulation.service.ts

@@ -175,7 +175,7 @@ export class CoeSimulationService implements OnDestroy  {
         }).catch(err => this.errorHandler(err));
     }
 
-    errorHandler(err: Response, stopped?: boolean) {
+    errorHandler(err: { error?: string, statusText?: string, status?: number }, stopped?: boolean) {
         console.warn(err);
         if (stopped) {
             this.progress = 0;
@@ -185,7 +185,13 @@ export class CoeSimulationService implements OnDestroy  {
             this.errorReport(false, "Error: " + err.statusText, true)
         } else {
             this.progress = 0;
-            this.errorReport(true, "Error: " + err.statusText);
+            console.log("err: ", err);
+            if('error' in err){
+                let errorMessage = typeof err.error === 'string' ? err.error : '';
+                this.errorReport(true, "Error: " + err.statusText + (errorMessage ? " - " + errorMessage : "") + ". Check CoE Server and/or CoE Log for more details.");
+            } else{
+                this.errorReport(true, "Error: " + err.statusText);
+            }
         }
     }
 

src/bottom.html

@@ -2,13 +2,14 @@
     <nav class="navbar navbar-default navbar-fixed-bottom intonav">
         <ul id="navigation" class="nav nav-pills justify-content-end">
                 <li>
-                        <a id="coe-status-btn-status" class="nav-link" href="#" title="Shows the output of the COE process. Provides options to Launch and Stop the COE.">COE Console
-                        <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>
-                        </a>
+                        <button type="button" id="coe-btn-launch-bottom" class="btn link-button" onclick="coeViewController.launchCoe()" title="Shows the output of the COE process. Provides options to Launch and Stop the COE.">
+                            Start COE
+                            <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>
+                        </button>
                         </li>
                         <li>
                         <a id="coe-log-btn-status" class="nav-link" href="#" title="Tails the COE log file (coe.log) if it is located in into-cps-projects\install_downloads\coe-working-dir">COE Log</a>
-                        </li>
+                        </li> 
 
 
         </ul>

src/preview.html

@@ -50,7 +50,7 @@
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                     </button>
-                <a class="navbar-brand" href="#">COE Status</a>
+                <a class="navbar-brand" href="#">Console</a>
             </div>
 
             <!-- Collect the nav links, forms, and other content for toggling -->
@@ -60,15 +60,19 @@
                     <li title="Shows if COE console output is enabled.&#13;Relaunch the COE to enable output if &quot;X&quot; is shown."> Stream redirect: <span id="stream-status" class="glyphicon glyphicon-remove"></span></li>
                     <li>
                         <button type="button" id="coe-btn-launch" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.launchCoe()">
-                                <span class="glyphicon glyphicon-link"></span>Launch
+                                <span class="glyphicon glyphicon-link"></span>Start COE
                            </button>
                     </li>
                     <li>
                         <button type="button" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.clearOutput()">
-                                <span class="glyphicon glyphicon-link"></span>Clear
+                                <span class="glyphicon glyphicon-link"></span>Clear COE
                            </button>
                     </li>
-
+                    <li>
+                        <button type="button" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeLogViewController.clearOutput()">
+                            <span class="glyphicon glyphicon-link"></span>Clear Log
+                       </button>
+                    </li>
                     <li>
                         <button type="button" id="coe-btn-stop" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.stopCoe()">
                                 <span class="glyphicon glyphicon-remove"></span> Stop

src/styles.css

@@ -87,4 +87,15 @@ coe-configuration .alert-big {
     font-size: 1.0em;
     vertical-align: 0.1em;
     }
-
+
+.link-button{
+    display: block;
+    padding: 10px 15px;
+    color: #337ab7;
+    background-color: transparent;
+}
+
+.link-button:focus, .link-button:hover{
+    text-decoration: none;
+    background-color: #eee;
+}

test/CoE.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from "@playwright/test";
+import { TestHelper } from "./TestHelpers/Testhelper";
+
+const helper = new TestHelper();
+
+test.describe("COE Button Tests", async () => {
+    test.beforeAll(async () => {
+        await helper.launch();
+    });
+
+    test.afterAll(async () => {
+        await helper.shutdown();
+    });
+
+    test('Initial state: Button should show "Start COE" with red circle', async () => {
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Start COE');
+
+        expect(await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('red');
+    });
+
+    test('Clicking button: Should change to "Stop COE" with green circle', async () => {
+        await helper.window.locator('#coe-btn-launch-bottom').click();
+
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Stop COE');
+
+        expect(await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('green');
+    });
+
+    test('Clicking "Stop COE": Should change back to "Start COE" with red circle', async () => {
+        // First click to start COE
+        await helper.window.locator('#coe-btn-launch-bottom').click(); 
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Stop COE');
+
+        expect (await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('green');
+
+        // Second click to stop COE
+        await helper.window.locator('#coe-btn-launch-bottom').click();
+        await helper.window.waitForTimeout(2000);
+
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Start COE');
+
+        expect (await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('red');
+
+    });
+});