Fixed webapp build and error message.

17 files changed, 140 insertions, 115 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 033ceae..8e6a908 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -18,6 +18,7 @@
         "**/vscode-extension/**",
         "**/.git/**",
         "**/vendor/**",
+        "**/webapp/dist/**",
         ".vscode",
         "typings"
     ],
@@ -62,9 +63,10 @@
         "graphx",
         "Truthy",
         "darkviolet",
-        "dwnl"
+        "dwnl",
+        "topnav",
+        "leftbar"
     ],
-
     // codelyzer
     "tslint.rulesDirectory": "./webapp/node_modules/codelyzer",
     "typescript.tsdk": "webapp/node_modules/typescript/lib",
diff --git a/Makefile b/Makefile
index 18638c6..3f4457c 100644
--- a/Makefile
+++ b/Makefile
@@ -100,10 +100,10 @@ distclean: clean
 	cd $(ROOT_SRCDIR) && rm -rf $(LOCAL_BINDIR) ./tools ./glide.lock ./vendor ./*.zip ./webapp/node_modules ./webapp/dist
 
 webapp: webapp/install
-	(cd webapp && gulp build)
+	(cd webapp && npm run build)
 
 webapp/debug:
-	(cd webapp && gulp watch &)
+	(cd webapp && npm run watch)
 
 webapp/install:
 	(cd webapp && npm install)
diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index 202ea80..42a5dfd 100644
--- a/webapp/.angular-cli.json
+++ b/webapp/.angular-cli.json
@@ -1,62 +1,54 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "xds-dashboard"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "xds",
-      "styles": [
-        "styles.css",
-        "../node_modules/font-awesome/css/font-awesome.min.css",
-        "../node_modules/font-awesome-animation/dist/font-awesome-animation.min.css",
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "project": {
+        "name": "xds-dashboard"
     },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
+    "apps": [{
+        "root": "src",
+        "outDir": "dist",
+        "assets": [
+            "assets"
+        ],
+        "index": "index.html",
+        "main": "main.ts",
+        "polyfills": "polyfills.ts",
+        "test": "test.ts",
+        "tsconfig": "tsconfig.app.json",
+        "testTsconfig": "tsconfig.spec.json",
+        "prefix": "xds",
+        "styles": ["styles.css"],
+        "scripts": [],
+        "environmentSource": "environments/environment.ts",
+        "environments": {
+            "dev": "environments/environment.ts",
+            "prod": "environments/environment.prod.ts"
+        }
+    }],
+    "e2e": {
+        "protractor": {
+            "config": "./protractor.conf.js"
+        }
     },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
+    "lint": [{
+            "project": "src/tsconfig.app.json",
+            "exclude": "**/node_modules/**"
+        },
+        {
+            "project": "src/tsconfig.spec.json",
+            "exclude": "**/node_modules/**"
+        },
+        {
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": "**/node_modules/**"
+        }
+    ],
+    "test": {
+        "karma": {
+            "config": "./karma.conf.js"
+        }
+    },
+    "defaults": {
+        "styleExt": "css",
+        "component": {}
     }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
 }
diff --git a/webapp/README.md b/webapp/README.md
index acee846..d885042 100644
--- a/webapp/README.md
+++ b/webapp/README.md
@@ -7,7 +7,7 @@ This is the web application dashboard for Cross Development System.
 
 *nodejs* must be installed on your system and the below global node packages must be installed:
 
-> sudo npm install -g gulp-cli
+> sudo npm install --global @angular/cli
 
 ## 2. Installing dependencies
 
@@ -15,7 +15,7 @@ Install dependencies by running the following command:
 
 > npm install
 
-`node_modules` and `typings` directories will be created during the install.
+`node_modules` directory will be created during the install.
 
 ## 3. Building the project
 
@@ -33,13 +33,7 @@ Start the application by running the following command:
 
 The application will be displayed in the browser.
 
-
 ## TODO
 
-- Upgrade to angular 2.4.9 or 2.4.10 AND rxjs 5.2.0
-- Complete README + package.json
-- Add prod mode and use update gulpfile tslint: "./tslint/prod.json"
-- Generate a bundle minified file, using systemjs-builder or find a better way
-   http://stackoverflow.com/questions/35280582/angular2-too-many-file-requests-on-load
 - Add SASS support
-   http://foundation.zurb.com/sites/docs/sass.html
\ No newline at end of file
+   http://foundation.zurb.com/sites/docs/sass.html
diff --git a/webapp/package.json b/webapp/package.json
index f4f843f..4097e0d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -19,6 +19,7 @@
     "url": "https://github.com/iotbzh/xds-agent/issues"
   },
   "scripts": {
+    "clean": "rm -rf dist/",
     "build": "ng build --prod --verbose",
     "start": "ng serve --prod --port=8000",
     "watch": "ng build --preserve-symlinks --watch",
diff --git a/webapp/src/app/alert/alert.component.spec.ts b/webapp/src/app/app-alert/app-alert.component.spec.ts
index 3921dd6..7f343dc 100644
--- a/webapp/src/app/alert/alert.component.spec.ts
+++ b/webapp/src/app/app-alert/app-alert.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AlertComponent } from './alert.component';
+import { AppAlertComponent } from './app-alert.component';
 
-describe('AlertComponent', () => {
-  let component: AlertComponent;
-  let fixture: ComponentFixture<AlertComponent>;
+describe('AppAlertComponent', () => {
+  let component: AppAlertComponent;
+  let fixture: ComponentFixture<AppAlertComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ AlertComponent ]
+      declarations: [ AppAlertComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AlertComponent);
+    fixture = TestBed.createComponent(AppAlertComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/webapp/src/app/alert/alert.component.ts b/webapp/src/app/app-alert/app-alert.component.ts
index 06c9bf5..e6fbd47 100644
--- a/webapp/src/app/alert/alert.component.ts
+++ b/webapp/src/app/app-alert/app-alert.component.ts
@@ -16,7 +16,7 @@ import { AlertService, IAlert } from '../services/alert.service';
 `,
 })
 
-export class AlertComponent {
+export class AppAlertComponent {
 
     alerts$: Observable<IAlert[]>;
 
diff --git a/webapp/src/app/app.component.css b/webapp/src/app/app-topnav/app-topnav.component.css
index a47ad13..a47ad13 100644
--- a/webapp/src/app/app.component.css
+++ b/webapp/src/app/app-topnav/app-topnav.component.css
diff --git a/webapp/src/app/app-topnav/app-topnav.component.html b/webapp/src/app/app-topnav/app-topnav.component.html
new file mode 100644
index 0000000..be2dfa2
--- /dev/null
+++ b/webapp/src/app/app-topnav/app-topnav.component.html
@@ -0,0 +1,24 @@
+<nav class="navbar navbar-fixed-top">
+    <!-- navbar-inverse"> -->
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
+          [attr.aria-expanded]="!isCollapsed" (click)="isCollapsed = !isCollapsed;" [ngClass]="{'collapsed': isCollapsed}">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+
+            <img class="navbar-brand" id="logo-iot" src="assets/images/iot-bzh-logo-small.png">
+            <a class="navbar-brand" href="#">X(cross) Development System Dashboard</a>
+        </div>
+
+        <div class="collapse navbar-collapse" [ngClass]="{'in': !isCollapsed}" id="myNavbar">
+            <ul class="nav navbar-nav navbar-right">
+                <li><a routerLink="/config"><i class="fa fa-2x fa-cog" title="Open configuration page" (click)="isCollapsed=true;"></i></a></li>
+                <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page" (click)="isCollapsed=true;"></i></a></li>
+                <li><a routerLink="/home"><i class="fa fa-2x fa-home" title="Back to home page" (click)="isCollapsed=true;"></i></a></li>
+            </ul>
+        </div>
+    </div>
+</nav>
diff --git a/webapp/src/app/app-topnav/app-topnav.component.ts b/webapp/src/app/app-topnav/app-topnav.component.ts
new file mode 100644
index 0000000..9ba4021
--- /dev/null
+++ b/webapp/src/app/app-topnav/app-topnav.component.ts
@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'app-topnav',
+    templateUrl: './app-topnav.component.html',
+    styleUrls: ['./app-topnav.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AppTopnavComponent {
+    public isCollapsed = false;
+
+    constructor() { }
+}
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index a889b12..6fcb46f 100644
--- a/webapp/src/app/app.component.html
+++ b/webapp/src/app/app.component.html
@@ -1,27 +1,4 @@
-<nav class="navbar navbar-fixed-top">
-    <!-- navbar-inverse"> -->
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
-          [attr.aria-expanded]="!isCollapsed" (click)="isCollapsed = !isCollapsed;" [ngClass]="{'collapsed': isCollapsed}">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-
-            <img class="navbar-brand" id="logo-iot" src="assets/images/iot-bzh-logo-small.png">
-            <a class="navbar-brand" href="#">X(cross) Development System Dashboard</a>
-        </div>
-
-        <div class="collapse navbar-collapse" [ngClass]="{'in': !isCollapsed}" id="myNavbar">
-            <ul class="nav navbar-nav navbar-right">
-                <li><a routerLink="/config"><i class="fa fa-2x fa-cog" title="Open configuration page" (click)="isCollapsed=true;"></i></a></li>
-                <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page" (click)="isCollapsed=true;"></i></a></li>
-                <li><a routerLink="/home"><i class="fa fa-2x fa-home" title="Back to home page" (click)="isCollapsed=true;"></i></a></li>
-            </ul>
-        </div>
-    </div>
-</nav>
+<app-topnav></app-topnav>
 
 <app-alert id="alert"></app-alert>
 
diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
index 0d1ce12..b644ecd 100644
--- a/webapp/src/app/app.component.ts
+++ b/webapp/src/app/app.component.ts
@@ -4,8 +4,7 @@ import { ConfigService, IConfig } from './services/config.service';
 
 @Component({
     selector: 'app-root',
-    templateUrl: 'app.component.html',
-    styleUrls: ['app.component.css']
+    templateUrl: 'app.component.html'
 })
 
 export class AppComponent implements OnInit, OnDestroy {
diff --git a/webapp/src/app/app.module.ts b/webapp/src/app/app.module.ts
index 31a7c2c..bf63b5e 100644
--- a/webapp/src/app/app.module.ts
+++ b/webapp/src/app/app.module.ts
@@ -20,7 +20,8 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 // Import the application components and services.
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { AlertComponent } from './alert/alert.component';
+import { AppTopnavComponent } from './app-topnav/app-topnav.component';
+import { AppAlertComponent } from './app-alert/app-alert.component';
 import { HomeComponent } from './home/home.component';
 import { ConfigComponent } from './config/config.component';
 import { DwnlAgentComponent } from './config/downloadXdsAgent.component';
@@ -74,8 +75,9 @@ export function createTranslateLoader(http: HttpClient) {
     ],
     declarations: [
         AppComponent,
+        AppTopnavComponent,
+        AppAlertComponent,
         HomeComponent,
-        AlertComponent,
         ConfigComponent,
         DwnlAgentComponent,
         DevelComponent,
@@ -88,7 +90,7 @@ export function createTranslateLoader(http: HttpClient) {
         SdksListAccordionComponent,
         SdkSelectDropdownComponent,
         SdkAddModalComponent,
-        SafePipe
+        SafePipe,
     ],
     providers: [
         {
diff --git a/webapp/src/app/services/alert.service.spec.ts b/webapp/src/app/services/alert.service.spec.ts
index 66a8477..b3d364c 100644
--- a/webapp/src/app/services/alert.service.spec.ts
+++ b/webapp/src/app/services/alert.service.spec.ts
@@ -3,13 +3,13 @@ import { TestBed, inject } from '@angular/core/testing';
 import { AlertService } from './alert.service';
 
 describe('AlertService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [AlertService]
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AlertService]
+        });
     });
-  });
 
-  it('should be created', inject([AlertService], (service: AlertService) => {
-    expect(service).toBeTruthy();
-  }));
+    it('should be created', inject([AlertService], (service: AlertService) => {
+        expect(service).toBeTruthy();
+    }));
 });
diff --git a/webapp/src/app/services/project.service.spec.ts b/webapp/src/app/services/project.service.spec.ts
new file mode 100644
index 0000000..b8edfc7
--- /dev/null
+++ b/webapp/src/app/services/project.service.spec.ts
@@ -0,0 +1,17 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ProjectService } from './project.service';
+
+describe('ProjectService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ProjectService]
+    });
+  });
+
+  it('should be created', inject([ProjectService], (service: ProjectService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  // FIXME SEB - add more tests, see https://angular.io/guide/http#mocking-philosophy
+});
diff --git a/webapp/src/app/services/xdsagent.service.ts b/webapp/src/app/services/xdsagent.service.ts
index 23880ff..55653c7 100644
--- a/webapp/src/app/services/xdsagent.service.ts
+++ b/webapp/src/app/services/xdsagent.service.ts
@@ -323,7 +323,7 @@ export class XDSAgentService {
             .subscribe(
             res => { },
             error => {
-                this.alert.error('ERROR while registering to all events: ', error);
+                this.alert.error('ERROR while registering to all events: ' + error);
             }
             );
     }
@@ -366,7 +366,7 @@ export class XDSAgentService {
     private _decodeError(err: any) {
         let e: string;
         if (err instanceof HttpErrorResponse) {
-            e = err.error || err.message || 'Unknown error';
+            e = (err.error && err.error.error) ? err.error.error : err.message || 'Unknown error';
         } else if (typeof err === 'object') {
             if (err.statusText) {
                 e = err.statusText;
@@ -378,6 +378,7 @@ export class XDSAgentService {
         } else {
             e = err.message ? err.message : err.toString();
         }
+        console.log('xdsagent.service - ERROR: ', e);
         return Observable.throw(e);
     }
 }
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index e69de29..fa725d0 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -0,0 +1,3 @@
+@import '~font-awesome/css/font-awesome.min.css';
+@import '~font-awesome-animation/dist/font-awesome-animation.min.css';
+@import '~bootstrap/dist/css/bootstrap.min.css';