From: Sebastien Douheret Date: Fri, 10 Nov 2017 15:29:10 +0000 (+0100) Subject: Moved Dashboad webapp on Angular 5 ! X-Git-Tag: v1.0.0-rc1~19 X-Git-Url: https://gerrit.automotivelinux.org/gerrit/gitweb?p=src%2Fxds%2Fxds-agent.git;a=commitdiff_plain;h=fb2f6b918beb0a994ad304bfd678ef0c5c562210 Moved Dashboad webapp on Angular 5 ! Webapp loading time decreased from 2.7s to 1.5sec ! Signed-off-by: Sebastien Douheret --- diff --git a/.vscode/settings.json b/.vscode/settings.json index eafbcfa..033ceae 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,60 +1,72 @@ // Place your settings in this file to overwrite default and user settings. { - // Configure glob patterns for excluding files and folders. - "files.exclude": { - ".tmp": true, - ".git": true, - "glide.lock": true, - "vendor": true, - "debug": true, - "bin": true, - "tools": true, - "webapp/dist": true, - "webapp/node_modules": true - }, - // Specify paths/files to ignore. (Supports Globs) - "cSpell.ignorePaths": [ - "**/node_modules/**", - "**/vscode-extension/**", - "**/.git/**", - "**/vendor/**", - ".vscode", - "typings" - ], - // Words to add to dictionary for a workspace. - "cSpell.words": [ - "apiv", - "gonic", - "devel", - "csrffound", - "Syncthing", - "STID", - "ISTCONFIG", - "socketio", - "ldflags", - "SThg", - "stconfig", - "Intf", - "dismissible", - "rpath", - "WSID", - "sess", - "IXDS", - "golib", - "xdsapi", - "xdsconfig", - "xdsserver", - "xdsagent", - "nbsp", - "Inot", - "inotify", - "cmdi", - "sdkid", - "Flds", - "prjs", - "iosk", - "CIFS", - "IPROJECT", - "unregister" - ] + // Configure glob patterns for excluding files and folders. + "files.exclude": { + ".tmp": true, + ".git": true, + "glide.lock": true, + "vendor": true, + "debug": true, + "bin": true, + "tools": true, + "webapp/dist": true, + "webapp/node_modules": true + }, + // Specify paths/files to ignore. (Supports Globs) + "cSpell.ignorePaths": [ + "**/node_modules/**", + "**/vscode-extension/**", + "**/.git/**", + "**/vendor/**", + ".vscode", + "typings" + ], + // Words to add to dictionary for a workspace. + "cSpell.words": [ + "apiv", + "gonic", + "devel", + "csrffound", + "Syncthing", + "STID", + "ISTCONFIG", + "socketio", + "ldflags", + "SThg", + "stconfig", + "Intf", + "dismissible", + "rpath", + "WSID", + "sess", + "IXDS", + "golib", + "xdsapi", + "xdsconfig", + "xdsserver", + "xdsagent", + "nbsp", + "Inot", + "inotify", + "cmdi", + "sdkid", + "Flds", + "prjs", + "iosk", + "CIFS", + "IPROJECT", + "unregister", + "conv", + "PATHMAP", + "nospace", + "graphx", + "Truthy", + "darkviolet", + "dwnl" + ], + + // codelyzer + "tslint.rulesDirectory": "./webapp/node_modules/codelyzer", + "typescript.tsdk": "webapp/node_modules/typescript/lib", + "tslint.configFile": "webapp/tslint.json" } diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json new file mode 100644 index 0000000..202ea80 --- /dev/null +++ b/webapp/.angular-cli.json @@ -0,0 +1,62 @@ +{ + "$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/**" + }, + { + "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": {} + } +} diff --git a/webapp/.jshintrc b/webapp/.jshintrc new file mode 100644 index 0000000..7a0ae5c --- /dev/null +++ b/webapp/.jshintrc @@ -0,0 +1,7 @@ +{ + "esversion": 6, + "undef": true, + "unused": false, + "globalstrict": true, + "predef": [ "console", "require", "module", "setInterval", "clearInterval", "__dirname"] +} \ No newline at end of file diff --git a/webapp/gulp.conf.js b/webapp/gulp.conf.js deleted file mode 100644 index 2e8fa17..0000000 --- a/webapp/gulp.conf.js +++ /dev/null @@ -1,34 +0,0 @@ -"use strict"; - -module.exports = { - prodMode: process.env.PRODUCTION || false, - outDir: "dist", - paths: { - tsSources: ["src/**/*.ts"], - srcDir: "src", - assets: ["assets/**"], - node_modules_libs: [ - 'core-js/client/shim.min.js', - 'reflect-metadata/Reflect.js', - 'rxjs-system-bundle/*.min.js', - 'socket.io-client/dist/socket.io*.js', - 'systemjs/dist/system-polyfills.js', - 'systemjs/dist/system.src.js', - 'zone.js/dist/**', - '@angular/**/bundles/**', - 'ngx-cookie/bundles/**', - 'ngx-bootstrap/bundles/**', - 'bootstrap/dist/**', - 'moment/*.min.js', - 'font-awesome-animation/dist/font-awesome-animation.min.css', - 'font-awesome/css/font-awesome.min.css', - 'font-awesome/fonts/**' - ] - }, - deploy: { - target_ip: 'ip', - username: "user", - //port: 6666, - dir: '/tmp/xds-agent' - } -} diff --git a/webapp/gulpfile.js b/webapp/gulpfile.js deleted file mode 100644 index 0226380..0000000 --- a/webapp/gulpfile.js +++ /dev/null @@ -1,123 +0,0 @@ -"use strict"; -//FIXME in VSC/eslint or add to typings declare function require(v: string): any; - -// FIXME: Rework based on -// https://github.com/iotbzh/app-framework-templates/blob/master/templates/hybrid-html5/gulpfile.js -// AND -// https://github.com/antonybudianto/angular-starter -// and/or -// https://github.com/smmorneau/tour-of-heroes/blob/master/gulpfile.js - -const gulp = require("gulp"), - gulpif = require('gulp-if'), - del = require("del"), - sourcemaps = require('gulp-sourcemaps'), - tsc = require("gulp-typescript"), - tsProject = tsc.createProject("tsconfig.json"), - tslint = require('gulp-tslint'), - gulpSequence = require('gulp-sequence'), - rsync = require('gulp-rsync'), - conf = require('./gulp.conf'); - - -var tslintJsonFile = "./tslint.json" -if (conf.prodMode) { - tslintJsonFile = "./tslint.prod.json" -} - - -/** - * Remove output directory. - */ -gulp.task('clean', (cb) => { - return del([conf.outDir], cb); -}); - -/** - * Lint all custom TypeScript files. - */ -gulp.task('tslint', function() { - return gulp.src(conf.paths.tsSources) - .pipe(tslint({ - formatter: 'verbose', - configuration: tslintJsonFile - })) - .pipe(tslint.report()); -}); - -/** - * Compile TypeScript sources and create sourcemaps in build directory. - */ -gulp.task("compile", ["tslint"], function() { - var tsResult = gulp.src(conf.paths.tsSources) - .pipe(sourcemaps.init()) - .pipe(tsProject()); - return tsResult.js - .pipe(sourcemaps.write(".", { sourceRoot: '/src' })) - .pipe(gulp.dest(conf.outDir)); -}); - -/** - * Copy all resources that are not TypeScript files into build directory. - */ -gulp.task("resources", function() { - return gulp.src(["src/**/*", "!**/*.ts"]) - .pipe(gulp.dest(conf.outDir)); -}); - -/** - * Copy all assets into build directory. - */ -gulp.task("assets", function() { - return gulp.src(conf.paths.assets) - .pipe(gulp.dest(conf.outDir + "/assets")); -}); - -/** - * Copy all required libraries into build directory. - */ -gulp.task("libs", function() { - return gulp.src(conf.paths.node_modules_libs, - { cwd: "node_modules/**" }) /* Glob required here. */ - .pipe(gulp.dest(conf.outDir + "/lib")); -}); - -/** - * Watch for changes in TypeScript, HTML and CSS files. - */ -gulp.task('watch', function () { - gulp.watch([conf.paths.tsSources], ['compile']).on('change', function (e) { - console.log('TypeScript file ' + e.path + ' has been changed. Compiling.'); - }); - gulp.watch(["src/**/*.html", "src/**/*.css"], ['resources']).on('change', function (e) { - console.log('Resource file ' + e.path + ' has been changed. Updating.'); - }); -}); - -/** - * Build the project. - */ -gulp.task("build", ['compile', 'resources', 'libs', 'assets'], function() { - console.log("Building the project ..."); -}); - -/** - * Deploy the project on another machine/container - */ -gulp.task('rsync', function () { - return gulp.src(conf.outDir) - .pipe(rsync({ - root: conf.outDir, - username: conf.deploy.username, - hostname: conf.deploy.target_ip, - port: conf.deploy.port || null, - archive: true, - recursive: true, - compress: true, - progress: false, - incremental: true, - destination: conf.deploy.dir - })); -}); - -gulp.task('deploy', gulpSequence('build', 'rsync')); \ No newline at end of file diff --git a/webapp/package.json b/webapp/package.json index 9c22f6b..f4f843f 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -2,12 +2,13 @@ "name": "xds-dashboard", "version": "1.0.0", "description": "X (cross) Development System dashboard", - "scripts": { - "clean": "gulp clean", - "compile": "gulp compile", - "build": "gulp build", - "start": "concurrently --kill-others \"gulp watch\" \"lite-server\"" - }, + "keywords": [ + "XDS", + "AGL", + "IoT.bzh", + "angular", + "HTML5" + ], "repository": { "type": "git", "url": "https://github.com/iotbzh/xds-agent" @@ -17,16 +18,27 @@ "bugs": { "url": "https://github.com/iotbzh/xds-agent/issues" }, + "scripts": { + "build": "ng build --prod --verbose", + "start": "ng serve --prod --port=8000", + "watch": "ng build --preserve-symlinks --watch", + "server": "node server/server.js", + "ng": "ng", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" + }, "dependencies": { - "@angular/common": "2.4.4", - "@angular/compiler": "2.4.4", - "@angular/core": "2.4.4", - "@angular/forms": "2.4.4", - "@angular/http": "2.4.4", - "@angular/platform-browser": "2.4.4", - "@angular/platform-browser-dynamic": "2.4.4", - "@angular/router": "3.4.4", - "@angular/upgrade": "2.4.4", + "@angular/animations": "5.0.1", + "@angular/common": "5.0.1", + "@angular/compiler": "5.0.1", + "@angular/core": "5.0.1", + "@angular/forms": "5.0.1", + "@angular/platform-browser": "5.0.1", + "@angular/platform-browser-dynamic": "5.0.1", + "@angular/router": "5.0.1", + "@ngx-translate/core": "^8.0.0", + "@ngx-translate/http-loader": "^2.0.0", "@types/core-js": "0.9.35", "@types/node": "7.0.5", "@types/socket.io-client": "^1.4.29", @@ -34,30 +46,39 @@ "core-js": "^2.4.1", "font-awesome": "^4.7.0", "font-awesome-animation": "0.0.10", - "ngx-bootstrap": "1.6.6", + "ng2-file-upload": "^1.2.0", + "ngx-bootstrap": "^2.0.0-beta.7", "ngx-cookie": "^1.0.0", "reflect-metadata": "^0.1.8", - "rxjs": "5.0.3", - "rxjs-system-bundle": "5.0.3", + "rxjs": "5.5.2", "socket.io-client": "^1.7.3", "socketio": "^1.0.0", "systemjs": "0.20.0", - "zone.js": "^0.7.6" + "zone.js": "^0.8.16" }, "devDependencies": { - "concurrently": "^3.1.0", - "del": "^2.2.0", - "gulp": "^3.9.1", - "gulp-if": "2.0.2", - "gulp-rsync": "0.0.7", - "gulp-sequence": "^0.4.6", - "gulp-sourcemaps": "^1.9.1", - "gulp-tslint": "^7.0.1", - "gulp-typescript": "^3.1.3", - "lite-server": "^2.2.2", - "ts-node": "^1.7.2", - "tslint": "^4.0.2", - "typescript": "^2.2.1", + "@angular/cli": "1.5.0", + "@angular/compiler-cli": "5.0.1", + "@angular/language-service": "5.0.1", + "@types/jasmine": "~2.5.53", + "@types/jasminewd2": "~2.0.2", + "@types/node": "~6.0.60", + "codelyzer": "~4.0.1", + "jasmine-core": "~2.6.2", + "jasmine-spec-reporter": "~4.1.0", + "karma": "~1.7.0", + "karma-chrome-launcher": "~2.1.1", + "karma-cli": "~1.0.1", + "karma-coverage-istanbul-reporter": "^1.2.1", + "karma-jasmine": "~1.1.0", + "karma-jasmine-html-reporter": "^0.2.2", + "nodemon": "1.11.0", + "protractor": "~5.1.2", + "pump": "^1.0.2", + "ts-loader": "1.3.0", + "ts-node": "~3.2.0", + "tslint": "~5.4.3", + "typescript": "~2.4.0", "typings": "^2.0.0" } } diff --git a/webapp/src/app/alert/alert.component.spec.ts b/webapp/src/app/alert/alert.component.spec.ts new file mode 100644 index 0000000..3921dd6 --- /dev/null +++ b/webapp/src/app/alert/alert.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertComponent } from './alert.component'; + +describe('AlertComponent', () => { + let component: AlertComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlertComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/alert/alert.component.ts b/webapp/src/app/alert/alert.component.ts index 672d7bf..06c9bf5 100644 --- a/webapp/src/app/alert/alert.component.ts +++ b/webapp/src/app/alert/alert.component.ts @@ -1,18 +1,19 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import { Component, ViewEncapsulation } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; -import {AlertService, IAlert} from '../services/alert.service'; +import { AlertService, IAlert } from '../services/alert.service'; @Component({ selector: 'app-alert', template: ` -
- -
- -
- ` +
+ +
+ +
+`, }) export class AlertComponent { diff --git a/webapp/src/app/app-routing.module.ts b/webapp/src/app/app-routing.module.ts new file mode 100644 index 0000000..36629de --- /dev/null +++ b/webapp/src/app/app-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { HomeComponent } from './home/home.component'; +import { ConfigComponent } from './config/config.component'; +import { DevelComponent } from './devel/devel.component'; + +const routes: Routes = [ + { path: 'config', component: ConfigComponent, data: { title: 'Config' } }, + { path: 'home', component: HomeComponent, data: { title: 'Home' } }, + { path: 'devel', component: DevelComponent, data: { title: 'Build & Deploy' } }, + { path: '**', component: HomeComponent } +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts index 40cfb24..0d1ce12 100644 --- a/webapp/src/app/app.component.ts +++ b/webapp/src/app/app.component.ts @@ -1,37 +1,45 @@ -import { Component, OnInit, OnDestroy } from "@angular/core"; -import { Router } from '@angular/router'; -//TODO import {TranslateService} from "ng2-translate"; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { ConfigService, IConfig } from './services/config.service'; @Component({ - selector: 'app', - templateUrl: './app/app.component.html', - styleUrls: ['./app/app.component.css'] + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'] }) export class AppComponent implements OnInit, OnDestroy { + private defaultLanguage = 'en'; + public isCollapsed = true; - isCollapsed: boolean = true; - - private defaultLanguage: string = 'en'; - - // I initialize the app component. - //TODO constructor(private translate: TranslateService) { - constructor(public router: Router) { + constructor(private translate: TranslateService, private configSvr: ConfigService) { } ngOnInit() { - - /* TODO - this.translate.addLangs(["en", "fr"]); + this.translate.addLangs(['en', 'fr']); this.translate.setDefaultLang(this.defaultLanguage); - let browserLang = this.translate.getBrowserLang(); + const browserLang = this.translate.getBrowserLang(); this.translate.use(browserLang.match(/en|fr/) ? browserLang : this.defaultLanguage); - */ + + this.configSvr.Conf$.subscribe((cfg: IConfig) => { + let lang: string; + switch (cfg.language) { + case 'ENG': + lang = 'en'; + break; + case 'FRA': + lang = 'fr'; + break; + default: + lang = this.defaultLanguage; + } + this.translate.use(lang); + }); } ngOnDestroy(): void { + // this.aglIdentityService.loginResponse.unsubscribe(); + // this.aglIdentityService.logoutResponse.unsubscribe(); } - - } diff --git a/webapp/src/app/app.module.ts b/webapp/src/app/app.module.ts index c3fd586..31a7c2c 100644 --- a/webapp/src/app/app.module.ts +++ b/webapp/src/app/app.module.ts @@ -1,7 +1,11 @@ import { NgModule } from '@angular/core'; +import { HttpClientModule, HttpClient } from '@angular/common/http'; import { BrowserModule } from '@angular/platform-browser'; -import { HttpModule } from "@angular/http"; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import { TranslateHttpLoader } from '@ngx-translate/http-loader'; +import { FileUploadModule } from 'ng2-file-upload'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { CookieModule } from 'ngx-cookie'; // Import bootstrap @@ -14,39 +18,51 @@ import { CollapseModule } from 'ngx-bootstrap/collapse'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; // Import the application components and services. -import { Routing, AppRoutingProviders } from './app.routing'; -import { AppComponent } from "./app.component"; +import { AppRoutingModule } from './app-routing.module'; +import { AppComponent } from './app.component'; import { AlertComponent } from './alert/alert.component'; -import { ConfigComponent } from "./config/config.component"; -import { DlXdsAgentComponent, CapitalizePipe } from "./config/downloadXdsAgent.component"; -import { ProjectCardComponent } from "./projects/projectCard.component"; -import { ProjectReadableTypePipe } from "./projects/projectCard.component"; -import { ProjectsListAccordionComponent } from "./projects/projectsListAccordion.component"; -import { ProjectAddModalComponent} from "./projects/projectAddModal.component"; -import { SdkCardComponent } from "./sdks/sdkCard.component"; -import { SdksListAccordionComponent } from "./sdks/sdksListAccordion.component"; -import { SdkSelectDropdownComponent } from "./sdks/sdkSelectDropdown.component"; -import { SdkAddModalComponent} from "./sdks/sdkAddModal.component"; +import { HomeComponent } from './home/home.component'; +import { ConfigComponent } from './config/config.component'; +import { DwnlAgentComponent } from './config/downloadXdsAgent.component'; +import { DevelComponent } from './devel/devel.component'; +import { BuildComponent } from './devel/build/build.component'; +import { ProjectCardComponent } from './projects/projectCard.component'; +import { ProjectReadableTypePipe } from './projects/projectCard.component'; +import { ProjectsListAccordionComponent } from './projects/projectsListAccordion.component'; +import { ProjectAddModalComponent } from './projects/projectAddModal.component'; +import { SdkCardComponent } from './sdks/sdkCard.component'; +import { SdksListAccordionComponent } from './sdks/sdksListAccordion.component'; +import { SdkSelectDropdownComponent } from './sdks/sdkSelectDropdown.component'; +import { SdkAddModalComponent } from './sdks/sdkAddModal.component'; -import { HomeComponent } from "./home/home.component"; -import { DevelComponent } from "./devel/devel.component"; -import { BuildComponent } from "./devel/build/build.component"; -import { XDSAgentService } from "./services/xdsagent.service"; -import { ConfigService } from "./services/config.service"; -import { ProjectService } from "./services/project.service"; import { AlertService } from './services/alert.service'; +import { ConfigService } from './services/config.service'; +import { ProjectService } from './services/project.service'; +import { SdkService } from './services/sdk.service'; import { UtilsService } from './services/utils.service'; -import { SdkService } from "./services/sdk.service"; +import { XDSAgentService } from './services/xdsagent.service'; +import { SafePipe } from './common/safe.pipe'; +export function createTranslateLoader(http: HttpClient) { + return new TranslateHttpLoader(http, './assets/i18n/', '.json'); +} @NgModule({ imports: [ BrowserModule, - HttpModule, FormsModule, ReactiveFormsModule, - Routing, + HttpClientModule, + AppRoutingModule, + FileUploadModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: (createTranslateLoader), + deps: [HttpClient] + } + }), CookieModule.forRoot(), AlertModule.forRoot(), ModalModule.forRoot(), @@ -58,13 +74,12 @@ import { SdkService } from "./services/sdk.service"; ], declarations: [ AppComponent, - AlertComponent, HomeComponent, - BuildComponent, - DevelComponent, + AlertComponent, ConfigComponent, - DlXdsAgentComponent, - CapitalizePipe, + DwnlAgentComponent, + DevelComponent, + BuildComponent, ProjectCardComponent, ProjectReadableTypePipe, ProjectsListAccordionComponent, @@ -73,21 +88,21 @@ import { SdkService } from "./services/sdk.service"; SdksListAccordionComponent, SdkSelectDropdownComponent, SdkAddModalComponent, + SafePipe ], providers: [ - AppRoutingProviders, { - provide: Window, - useValue: window + provide: LocationStrategy, useClass: HashLocationStrategy, }, - XDSAgentService, + AlertService, ConfigService, ProjectService, - AlertService, - UtilsService, SdkService, + UtilsService, + XDSAgentService ], bootstrap: [AppComponent] }) export class AppModule { + constructor() { } } diff --git a/webapp/src/app/app.routing.ts b/webapp/src/app/app.routing.ts deleted file mode 100644 index f0d808f..0000000 --- a/webapp/src/app/app.routing.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Routes, RouterModule} from "@angular/router"; -import {ModuleWithProviders} from "@angular/core"; -import {ConfigComponent} from "./config/config.component"; -import {HomeComponent} from "./home/home.component"; -import {DevelComponent} from "./devel/devel.component"; - - -const appRoutes: Routes = [ - {path: '', redirectTo: 'home', pathMatch: 'full'}, - - {path: 'config', component: ConfigComponent, data: {title: 'Config'}}, - {path: 'home', component: HomeComponent, data: {title: 'Home'}}, - {path: 'devel', component: DevelComponent, data: {title: 'Build & Deploy'}} -]; - -export const AppRoutingProviders: any[] = []; -export const Routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { - useHash: true -}); diff --git a/webapp/src/app/common/safe.pipe.ts b/webapp/src/app/common/safe.pipe.ts new file mode 100644 index 0000000..84fd6b5 --- /dev/null +++ b/webapp/src/app/common/safe.pipe.ts @@ -0,0 +1,10 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; + +@Pipe({ name: 'safe' }) +export class SafePipe implements PipeTransform { + constructor(private sanitizer: DomSanitizer) { } + transform(url) { + return this.sanitizer.bypassSecurityTrustResourceUrl(url); + } +} diff --git a/webapp/src/app/config/config.component.html b/webapp/src/app/config/config.component.html index 4dbd238..ba3bd72 100644 --- a/webapp/src/app/config/config.component.html +++ b/webapp/src/app/config/config.component.html @@ -22,7 +22,7 @@
- +
@@ -62,7 +62,7 @@
- +
@@ -82,16 +82,16 @@
- +
- - - - + + + +
diff --git a/webapp/src/app/config/config.component.spec.ts b/webapp/src/app/config/config.component.spec.ts new file mode 100644 index 0000000..ec5d3be --- /dev/null +++ b/webapp/src/app/config/config.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfigComponent } from './config.component'; + +describe('ConfigComponent', () => { + let component: ConfigComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfigComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfigComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/config/config.component.ts b/webapp/src/app/config/config.component.ts index 6377844..3db7f60 100644 --- a/webapp/src/app/config/config.component.ts +++ b/webapp/src/app/config/config.component.ts @@ -1,19 +1,20 @@ -import { Component, ViewChild, OnInit } from "@angular/core"; +import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { Observable } from 'rxjs/Observable'; -import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; import { CollapseModule } from 'ngx-bootstrap/collapse'; -import { ConfigService, IConfig } from "../services/config.service"; -import { ProjectService, IProject } from "../services/project.service"; -import { XDSAgentService, IAgentStatus, IXDSConfig } from "../services/xdsagent.service"; -import { AlertService } from "../services/alert.service"; -import { ProjectAddModalComponent } from "../projects/projectAddModal.component"; -import { SdkService, ISdk } from "../services/sdk.service"; -import { SdkAddModalComponent } from "../sdks/sdkAddModal.component"; +import { ConfigService, IConfig } from '../services/config.service'; +import { ProjectService, IProject } from '../services/project.service'; +import { XDSAgentService, IAgentStatus, IXDSConfig } from '../services/xdsagent.service'; +import { AlertService } from '../services/alert.service'; +import { ProjectAddModalComponent } from '../projects/projectAddModal.component'; +import { SdkService, ISdk } from '../services/sdk.service'; +import { SdkAddModalComponent } from '../sdks/sdkAddModal.component'; @Component({ - templateUrl: './app/config/config.component.html', - styleUrls: ['./app/config/config.component.css'] + selector: 'app-config', + templateUrl: './config.component.html', + styleUrls: ['./config.component.css'], + encapsulation: ViewEncapsulation.None }) // Inspired from https://embed.plnkr.co/jgDTXknPzAaqcg9XA9zq/ @@ -31,20 +32,20 @@ export class ConfigComponent implements OnInit { curProj: number; curServer: number; curServerID: string; - userEditedLabel: boolean = false; + userEditedLabel = false; - gConfigIsCollapsed: boolean = true; - sdksIsCollapsed: boolean = true; - projectsIsCollapsed: boolean = false; + gConfigIsCollapsed = true; + sdksIsCollapsed = true; + projectsIsCollapsed = false; // TODO replace by reactive FormControl + add validation - xdsServerConnected: boolean = false; + xdsServerConnected = false; xdsServerUrl: string; xdsServerRetry: string; projectsRootDir: string; // FIXME: should be remove when projectAddModal will always return full path showApplyBtn = { // Used to show/hide Apply buttons - "retry": false, - "rootDir": false, + 'retry': false, + 'rootDir': false, }; constructor( @@ -70,7 +71,7 @@ export class ConfigComponent implements OnInit { if (!cfg || cfg.servers.length < 1) { return; } - let svr = cfg.servers[this.curServer]; + const svr = cfg.servers[this.curServer]; this.curServerID = svr.id; this.xdsServerConnected = svr.connected; this.xdsServerUrl = svr.url; @@ -81,16 +82,16 @@ export class ConfigComponent implements OnInit { submitGlobConf(field: string) { switch (field) { - case "retry": - let re = new RegExp('^[0-9]+$'); - let rr = parseInt(this.xdsServerRetry, 10); + case 'retry': + const re = new RegExp('^[0-9]+$'); + const rr = parseInt(this.xdsServerRetry, 10); if (re.test(this.xdsServerRetry) && rr >= 0) { this.xdsAgentSvr.setServerRetry(this.curServerID, rr); } else { - this.alert.warning("Not a valid number", true); + this.alert.warning('Not a valid number', true); } break; - case "rootDir": + case 'rootDir': this.configSvr.projectsRootDir = this.projectsRootDir; break; default: @@ -100,7 +101,7 @@ export class ConfigComponent implements OnInit { } xdsAgentRestartConn() { - let url = this.xdsServerUrl; + const url = this.xdsServerUrl; this.xdsAgentSvr.setServerUrl(this.curServerID, url); } diff --git a/webapp/src/app/config/downloadXdsAgent.component.ts b/webapp/src/app/config/downloadXdsAgent.component.ts index 0b63e50..3901331 100644 --- a/webapp/src/app/config/downloadXdsAgent.component.ts +++ b/webapp/src/app/config/downloadXdsAgent.component.ts @@ -1,7 +1,7 @@ -import { Component, Input, Pipe, PipeTransform } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ - selector: 'dl-xds-agent', + selector: 'xds-dwnl-agent', template: `