From b0d130807fb9bf36f5ac1abe21cbd558eb86d5cc Mon Sep 17 00:00:00 2001 From: Sebastien Douheret Date: Tue, 14 Nov 2017 10:57:48 +0100 Subject: [PATCH] Fixed webapp build and error message. --- .vscode/settings.json | 6 +- Makefile | 4 +- webapp/.angular-cli.json | 106 ++++++++++----------- webapp/README.md | 12 +-- webapp/package.json | 1 + .../app-alert.component.spec.ts} | 12 +-- .../app-alert.component.ts} | 2 +- .../app-topnav.component.css} | 0 .../src/app/app-topnav/app-topnav.component.html | 24 +++++ webapp/src/app/app-topnav/app-topnav.component.ts | 13 +++ webapp/src/app/app.component.html | 25 +---- webapp/src/app/app.component.ts | 3 +- webapp/src/app/app.module.ts | 8 +- webapp/src/app/services/alert.service.spec.ts | 14 +-- webapp/src/app/services/project.service.spec.ts | 17 ++++ webapp/src/app/services/xdsagent.service.ts | 5 +- webapp/src/styles.css | 3 + 17 files changed, 140 insertions(+), 115 deletions(-) rename webapp/src/app/{alert/alert.component.spec.ts => app-alert/app-alert.component.spec.ts} (55%) rename webapp/src/app/{alert/alert.component.ts => app-alert/app-alert.component.ts} (96%) rename webapp/src/app/{app.component.css => app-topnav/app-topnav.component.css} (100%) create mode 100644 webapp/src/app/app-topnav/app-topnav.component.html create mode 100644 webapp/src/app/app-topnav/app-topnav.component.ts create mode 100644 webapp/src/app/services/project.service.spec.ts 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 similarity index 55% rename from webapp/src/app/alert/alert.component.spec.ts rename to 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; +describe('AppAlertComponent', () => { + let component: AppAlertComponent; + let fixture: ComponentFixture; 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 similarity index 96% rename from webapp/src/app/alert/alert.component.ts rename to 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; diff --git a/webapp/src/app/app.component.css b/webapp/src/app/app-topnav/app-topnav.component.css similarity index 100% rename from webapp/src/app/app.component.css rename to 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 @@ + 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 @@ - + 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'; -- 2.16.6