Skip to content

Commit

Permalink
Removes COE Console (Pull Request #225)
Browse files Browse the repository at this point in the history
 - Removes redundant CoE console
 - Adds developer documentation
prasadtalasila authored Jul 31, 2024
2 parents b0f1ccc + 424afcc commit ca59ef9
Showing 10 changed files with 149 additions and 16 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ jobs:

strategy:
matrix:
os: [ubuntu-latest, windows-latest, macos-latest]
os: [ubuntu-latest, windows-latest]

steps:
- name: Checkout branch
26 changes: 26 additions & 0 deletions DEVELOPER.md
Original file line number Diff line number Diff line change
@@ -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).
1 change: 0 additions & 1 deletion docs/first_steps.rst
Original file line number Diff line number Diff line change
@@ -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``

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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"
},
29 changes: 27 additions & 2 deletions src/CoeServerStatusUiController.ts
Original file line number Diff line number Diff line change
@@ -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();
}

}
10 changes: 8 additions & 2 deletions src/angular2-app/coe/coe-simulation.service.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}

9 changes: 5 additions & 4 deletions src/bottom.html
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 8 additions & 4 deletions src/preview.html
Original file line number Diff line number Diff line change
@@ -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
13 changes: 12 additions & 1 deletion src/styles.css
Original file line number Diff line number Diff line change
@@ -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;
}
61 changes: 61 additions & 0 deletions test/CoE.spec.ts
Original file line number Diff line number Diff line change
@@ -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');

});
});

0 comments on commit ca59ef9

Please sign in to comment.