diff options
Diffstat (limited to 'webapp/src/app/pages/config')
10 files changed, 297 insertions, 0 deletions
diff --git a/webapp/src/app/pages/config/config-global/config-global.component.html b/webapp/src/app/pages/config/config-global/config-global.component.html new file mode 100644 index 0000000..0038510 --- /dev/null +++ b/webapp/src/app/pages/config/config-global/config-global.component.html @@ -0,0 +1,37 @@ +<div class="row"> + <div class="col-md-12"> + <nb-card> + <nb-card-header>Global Configuration</nb-card-header> + <nb-card-body> + + <form (ngSubmit)="onSubmit()" #ConfigGlobalForm="ngForm"> + <div class="form-group row"> + <label class="col-sm-3 col-form-label">Language</label> + <div class="col-sm-9"> + <select class="form-control" (ngModelChange)="configFormChanged=true"> + <option>English</option> + <!-- FIXME: implement i18n and add | translate + <option>French</option> --> + </select> + </div> + </div> + + <div class="form-group row"> + <label class="col-sm-3 col-form-label">Theme</label> + <div class="col-sm-9"> + <ngx-theme-switcher id="theme-switcher"></ngx-theme-switcher> + </div> + </div> + + <!-- + <div class="form-group row"> + <div class="offset-sm-3 col-sm-9"> + <button type="submit" class="btn btn-primary" [disabled]="!configFormChanged">Apply</button> + </div> + </div> + --> + </form> + </nb-card-body> + </nb-card> + </div> +</div> diff --git a/webapp/src/app/pages/config/config-global/config-global.component.scss b/webapp/src/app/pages/config/config-global/config-global.component.scss new file mode 100644 index 0000000..955c54e --- /dev/null +++ b/webapp/src/app/pages/config/config-global/config-global.component.scss @@ -0,0 +1,20 @@ +.full-width { + flex: 1; + min-width: 220px; +} + +nb-checkbox { + margin-bottom: 1rem; +} + +.form-inline > * { + margin: 0 1.5rem 1.5rem 0; +} + +nb-card.inline-form-card nb-card-body { + padding-bottom: 0; +} + +#theme-switcher { + align-items: left; +} diff --git a/webapp/src/app/pages/config/config-global/config-global.component.ts b/webapp/src/app/pages/config/config-global/config-global.component.ts new file mode 100644 index 0000000..fcd8b62 --- /dev/null +++ b/webapp/src/app/pages/config/config-global/config-global.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; + +import { ConfigService, IConfig } from '../../../@core-xds/services/config.service'; + +@Component({ + selector: 'xds-config-global', + styleUrls: ['./config-global.component.scss'], + templateUrl: './config-global.component.html', +}) +export class ConfigGlobalComponent implements OnInit { + + public configFormChanged = false; + + constructor( + private configSvr: ConfigService, + ) { + } + + ngOnInit() { + } + + onSubmit() { + } +} + diff --git a/webapp/src/app/pages/config/config-routing.module.ts b/webapp/src/app/pages/config/config-routing.module.ts new file mode 100644 index 0000000..4e7cf27 --- /dev/null +++ b/webapp/src/app/pages/config/config-routing.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ConfigComponent } from './config.component'; +import { ConfigGlobalComponent } from './config-global/config-global.component'; +import { ConfigXdsComponent } from './config-xds/config-xds.component'; + +const routes: Routes = [{ + path: '', + component: ConfigComponent, + children: [ + { + path: 'global', + component: ConfigGlobalComponent, + }, { + path: 'xds', + component: ConfigXdsComponent, + }, + ], +}]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class ConfigRoutingModule { } + +export const routedConfig = [ + ConfigComponent, + ConfigGlobalComponent, + ConfigXdsComponent, +]; diff --git a/webapp/src/app/pages/config/config-xds/config-xds.component.html b/webapp/src/app/pages/config/config-xds/config-xds.component.html new file mode 100644 index 0000000..31559e2 --- /dev/null +++ b/webapp/src/app/pages/config/config-xds/config-xds.component.html @@ -0,0 +1,34 @@ +<div class="row"> + <div class="col-md-12"> + <nb-card> + <nb-card-header>XDS Server Configuration</nb-card-header> + <nb-card-body> + <form (ngSubmit)="onSubmit()" #ConfigXdsForm="ngForm"> + <div class="form-group row"> + <label class="col-sm-3 col-form-label">XDS Server URL</label> + <div class="col-sm-8"> + <input type="url" class="form-control" [ngClass]="{ 'form-control-danger': !server.connected }" id="inputServerUrl" [(ngModel)]="xdsServerUrl" name="serverUrl" (ngModelChange)="configFormChanged=true" [disabled]="connecting"> + </div> + <div class="col-sm-1"> + <span *ngIf="!connecting" class="fa fa-fw fa-exchange fa-size-x2 vcenter" [style.color]="server.connected?'green':'red'"></span> + <span *ngIf="connecting" class="fa fa-gear faa-spin animated fa-size-x2 vcenter"></span> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-3 col-form-label">XDS Server connection retry</label> + <div class="col-sm-8"> + <input type="number" class="form-control" id="inputServerConnRetry" [(ngModel)]="server.connRetry" name="serverRetry" (ngModelChange)="configFormChanged=true"> + </div> + </div> + + <div class="form-group row"> + <div class="offset-sm-3 col-sm-9"> + <button type="submit" class="btn btn-primary" [disabled]=" + connecting || (server.connected && !configFormChanged)">Apply</button> + </div> + </div> + </form> + </nb-card-body> + </nb-card> + </div> +</div> diff --git a/webapp/src/app/pages/config/config-xds/config-xds.component.scss b/webapp/src/app/pages/config/config-xds/config-xds.component.scss new file mode 100644 index 0000000..d7571b9 --- /dev/null +++ b/webapp/src/app/pages/config/config-xds/config-xds.component.scss @@ -0,0 +1,26 @@ +.full-width { + flex: 1; + min-width: 220px; +} + +nb-checkbox { + margin-bottom: 1rem; +} + +.form-inline > * { + margin: 0 1.5rem 1.5rem 0; +} + +nb-card.inline-form-card nb-card-body { + padding-bottom: 0; +} + +.fa-size-x2 { + font-size: 20px; +} + +.vcenter { + //display: inline-block; + //vertical-align: middle; + margin-top: 33%; +} diff --git a/webapp/src/app/pages/config/config-xds/config-xds.component.ts b/webapp/src/app/pages/config/config-xds/config-xds.component.ts new file mode 100644 index 0000000..ffd236d --- /dev/null +++ b/webapp/src/app/pages/config/config-xds/config-xds.component.ts @@ -0,0 +1,63 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; + +import { XDSConfigService } from '../../../@core-xds/services/xds-config.service'; +import { IXDServerCfg } from '../../../@core-xds/services/xdsagent.service'; +import { AlertService, IAlert } from '../../../@core-xds/services/alert.service'; +import { NotificationsComponent } from '../../notifications/notifications.component'; + +// Import RxJs required methods +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/catch'; + +@Component({ + selector: 'xds-config-xds', + styleUrls: ['./config-xds.component.scss'], + templateUrl: './config-xds.component.html', +}) +export class ConfigXdsComponent implements OnInit { + + // TODO: cleanup agentStatus$: Observable<IAgentStatus>; + connecting = false; + xdsServerUrl = ''; + server: IXDServerCfg; + + configFormChanged = false; + + constructor( + private XdsConfigSvr: XDSConfigService, + private alert: AlertService, + ) { + } + + ngOnInit() { + // FIXME support multiple servers + + this.server = this.XdsConfigSvr.getCurServer(); + this.xdsServerUrl = this.server.url; + + this.XdsConfigSvr.onCurServer().subscribe(svr => { + this.xdsServerUrl = svr.url; + this.server = svr; + }); + } + + onSubmit() { + if (!this.configFormChanged && this.server.connected) { + return; + } + this.configFormChanged = false; + this.connecting = true; + this.server.url = this.xdsServerUrl; + this.XdsConfigSvr.setCurServer(this.server) + .subscribe(cfg => { + this.connecting = false; + }, + err => { + this.connecting = false; + this.alert.error(err); + }); + } + +} + diff --git a/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts b/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts new file mode 100644 index 0000000..3901331 --- /dev/null +++ b/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts @@ -0,0 +1,35 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'xds-dwnl-agent', + template: ` + <template #popTemplate> + <h3>Install xds-agent:</h3> + <ul> + <li>On Linux machine <a href="{{url_OS_Linux}}" target="_blank"> + <span class="fa fa-external-link"></span></a></li> + + <li>On Windows machine <a href="{{url_OS_Other}}" target="_blank"><span class="fa fa-external-link"></span></a></li> + + <li>On MacOS machine <a href="{{url_OS_Other}}" target="_blank"><span class="fa fa-external-link"></span></a></li> + </ul> + <button type="button" class="btn btn-sm" (click)="pop.hide()"> Cancel </button> + </template> + <button type="button" class="btn btn-link fa fa-download fa-size-x2" + [popover]="popTemplate" + #pop="bs-popover" + placement="left"> + </button> + `, + styles: [` + .fa-size-x2 { + font-size: 20px; + } + `] +}) + +export class DwnlAgentComponent { + + public url_OS_Linux = 'https://en.opensuse.org/LinuxAutomotive#Installation_AGL_XDS'; + public url_OS_Other = 'https://github.com/iotbzh/xds-agent#how-to-install-on-other-platform'; +} diff --git a/webapp/src/app/pages/config/config.component.ts b/webapp/src/app/pages/config/config.component.ts new file mode 100644 index 0000000..f52cab0 --- /dev/null +++ b/webapp/src/app/pages/config/config.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'xds-config', + template: ` + <router-outlet></router-outlet> + `, +}) +export class ConfigComponent { +} diff --git a/webapp/src/app/pages/config/config.module.ts b/webapp/src/app/pages/config/config.module.ts new file mode 100644 index 0000000..2fdaf94 --- /dev/null +++ b/webapp/src/app/pages/config/config.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; + +import { ThemeModule } from '../../@theme/theme.module'; +import { ConfigRoutingModule, routedConfig } from './config-routing.module'; + +@NgModule({ + imports: [ + ThemeModule, + ConfigRoutingModule, + ], + declarations: [ + ...routedConfig, + ] +}) +export class ConfigModule { } |