diff options
Diffstat (limited to 'webapp')
35 files changed, 721 insertions, 265 deletions
diff --git a/webapp/.stylelintrc.json b/webapp/.stylelintrc.json index 9732970..8132883 100644 --- a/webapp/.stylelintrc.json +++ b/webapp/.stylelintrc.json @@ -63,7 +63,7 @@ "selector-pseudo-element-colon-notation": "double", "selector-pseudo-element-no-unknown": true, "selector-type-case": "lower", - "selector-max-id": 0, + "selector-max-id": 1, "no-missing-end-of-source-newline": true, diff --git a/webapp/src/app/@core-xds/services/alert.service.spec.ts b/webapp/src/app/@core-xds/services/alert.service.spec.ts index b3d364c..2de2ac3 100644 --- a/webapp/src/app/@core-xds/services/alert.service.spec.ts +++ b/webapp/src/app/@core-xds/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/@core-xds/services/alert.service.ts b/webapp/src/app/@core-xds/services/alert.service.ts index c15e176..23a5e5d 100644 --- a/webapp/src/app/@core-xds/services/alert.service.ts +++ b/webapp/src/app/@core-xds/services/alert.service.ts @@ -31,7 +31,7 @@ export class AlertService { public error(msg: string, dismissTime?: number) { this.add({ - type: 'error', msg: msg, dismissible: true, dismissTimeout: dismissTime + type: 'error', msg: msg, dismissible: true, dismissTimeout: dismissTime, }); } diff --git a/webapp/src/app/@core-xds/services/build-settings.service.ts b/webapp/src/app/@core-xds/services/build-settings.service.ts new file mode 100644 index 0000000..cb52ce3 --- /dev/null +++ b/webapp/src/app/@core-xds/services/build-settings.service.ts @@ -0,0 +1,78 @@ +import { Injectable } from '@angular/core'; +import { CookieService } from 'ngx-cookie'; +import { Observable } from 'rxjs/Observable'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; + +export interface IBuildSettings { + subpath: string; + cmdClean: string; + cmdPrebuild: string; + cmdBuild: string; + cmdPopulate: string; + cmdArgs: string[]; + envVars: string[]; +} + +@Injectable() +export class BuildSettingsService { + public settings$: Observable<IBuildSettings>; + + private settingsSubject: BehaviorSubject<IBuildSettings>; + private settingsStore: IBuildSettings; + + constructor( + private cookie: CookieService, + ) { + this._load(); + } + + // Load build settings from cookie + private _load() { + // Try to retrieve previous config from cookie + const cookConf = this.cookie.getObject('xds-build-settings'); + if (cookConf != null) { + this.settingsStore = <IBuildSettings>cookConf; + } else { + // Set default config + this.settingsStore = { + subpath: '', + cmdClean: 'rm -rf build && echo Done', + cmdPrebuild: 'mkdir -p build && cd build && cmake ..', + cmdBuild: 'cd build && make', + cmdPopulate: 'cd build && make remote-target-populate', + cmdArgs: [], + envVars: [], + }; + } + } + + // Save config into cookie + private _save() { + // Notify subscribers + this.settingsSubject.next(Object.assign({}, this.settingsStore)); + + const cfg = Object.assign({}, this.settingsStore); + this.cookie.putObject('xds-build-settings', cfg); + } + + // Get whole config values + get(): IBuildSettings { + return this.settingsStore; + } + + // Get whole config values + set(bs: IBuildSettings) { + this.settingsStore = bs; + this._save(); + } + + get subpath(): string { + return this.settingsStore.subpath; + } + + set subpath(p: string) { + this.settingsStore.subpath = p; + this._save(); + } + +} diff --git a/webapp/src/app/@core-xds/services/config.service.spec.ts b/webapp/src/app/@core-xds/services/config.service.spec.ts index a20d4ba..f39b9d9 100644 --- a/webapp/src/app/@core-xds/services/config.service.spec.ts +++ b/webapp/src/app/@core-xds/services/config.service.spec.ts @@ -5,7 +5,7 @@ import { ConfigService } from './config.service'; describe('ConfigService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [ConfigService] + providers: [ConfigService], }); }); diff --git a/webapp/src/app/@core-xds/services/project.service.spec.ts b/webapp/src/app/@core-xds/services/project.service.spec.ts index b8edfc7..0924a73 100644 --- a/webapp/src/app/@core-xds/services/project.service.spec.ts +++ b/webapp/src/app/@core-xds/services/project.service.spec.ts @@ -5,7 +5,7 @@ import { ProjectService } from './project.service'; describe('ProjectService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [ProjectService] + providers: [ProjectService], }); }); diff --git a/webapp/src/app/@core-xds/services/project.service.ts b/webapp/src/app/@core-xds/services/project.service.ts index 8aeed80..94469fe 100644 --- a/webapp/src/app/@core-xds/services/project.service.ts +++ b/webapp/src/app/@core-xds/services/project.service.ts @@ -1,4 +1,4 @@ -import { Injectable, SecurityContext } from '@angular/core'; +import { Injectable, SecurityContext, isDevMode } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @@ -15,12 +15,12 @@ export type ProjectTypeEnum = '' | 'PathMap' | 'CloudSync'; export const ProjectType = { UNSET: '', NATIVE_PATHMAP: 'PathMap', - SYNCTHING: 'CloudSync' + SYNCTHING: 'CloudSync', }; export const ProjectTypes = [ { value: ProjectType.NATIVE_PATHMAP, display: 'Path mapping' }, - { value: ProjectType.SYNCTHING, display: 'Cloud Sync' } + { value: ProjectType.SYNCTHING, display: 'Cloud Sync' }, ]; export const ProjectStatus = { @@ -28,9 +28,18 @@ export const ProjectStatus = { Disable: 'Disable', Enable: 'Enable', Pause: 'Pause', - Syncing: 'Syncing' + Syncing: 'Syncing', }; +export interface IUISettings { + subpath: string; + cmdClean: string; + cmdPrebuild: string; + cmdBuild: string; + cmdPopulate: string; + cmdArgs: string[]; + envVars: string[]; +} export interface IProject { id?: string; serverId: string; @@ -45,95 +54,84 @@ export interface IProject { isExpanded?: boolean; visible?: boolean; defaultSdkID?: string; + uiSettings?: IUISettings; } +const defaultUISettings: IUISettings = { + subpath: '', + cmdClean: 'rm -rf build && echo Done', + cmdPrebuild: 'mkdir -p build && cd build && cmake ..', + cmdBuild: 'cd build && make', + cmdPopulate: 'cd build && make remote-target-populate', + cmdArgs: [], + envVars: [], +}; + @Injectable() export class ProjectService { - public Projects$: Observable<IProject[]>; + projects$: Observable<IProject[]>; + curProject$: Observable<IProject>; private _prjsList: IProject[] = []; - private current: IProject; private prjsSubject = <BehaviorSubject<IProject[]>>new BehaviorSubject(this._prjsList); + private _current: IProject; + private curPrjSubject = <BehaviorSubject<IProject>>new BehaviorSubject(this._current); constructor(private xdsSvr: XDSAgentService) { - this.current = null; - this.Projects$ = this.prjsSubject.asObservable(); + this._current = null; + this.projects$ = this.prjsSubject.asObservable(); + this.curProject$ = this.curPrjSubject.asObservable(); + // Load initial projects list this.xdsSvr.getProjects().subscribe((projects) => { this._prjsList = []; projects.forEach(p => { this._addProject(p, true); }); - this.prjsSubject.next(Object.assign([], this._prjsList)); - }); - // Update Project data - this.xdsSvr.ProjectState$.subscribe(prj => { - const i = this._getProjectIdx(prj.id); - if (i >= 0) { - // XXX for now, only isInSync and status may change - this._prjsList[i].isInSync = prj.isInSync; - this._prjsList[i].status = prj.status; - this._prjsList[i].isUsable = this._isUsableProject(prj); - this.prjsSubject.next(Object.assign([], this._prjsList)); + // TODO: get previous val from xds-config service / cookie + if (this._prjsList.length > 0) { + this._current = this._prjsList[0]; + this.curPrjSubject.next(this._current); } - }); - // Add listener on create and delete project events - this.xdsSvr.addEventListener('event:project-add', (ev) => { - if (ev && ev.data && ev.data.id) { - this._addProject(ev.data); - } else { - console.log('Warning: received events with unknown data: ev=', ev); - } - }); - this.xdsSvr.addEventListener('event:project-delete', (ev) => { - if (ev && ev.data && ev.data.id) { - const idx = this._prjsList.findIndex(item => item.id === ev.data.id); - if (idx === -1) { - console.log('Warning: received events on unknown project id: ev=', ev); - return; - } - this._prjsList.splice(idx, 1); - this.prjsSubject.next(Object.assign([], this._prjsList)); - } else { - console.log('Warning: received events with unknown data: ev=', ev); - } + this.prjsSubject.next(this._prjsList); }); + // Add listener on projects creation, deletion and change events + this.xdsSvr.onProjectAdd().subscribe(prj => this._addProject(prj)); + this.xdsSvr.onProjectDelete().subscribe(prj => this._delProject(prj)); + this.xdsSvr.onProjectChange().subscribe(prj => this._updateProject(prj)); } - public setCurrent(s: IProject) { - this.current = s; + setCurrent(p: IProject): IProject | undefined { + if (!p) { + this._current = null; + return undefined; + } + return this.setCurrentById(p.id); } - public getCurrent(): IProject { - return this.current; + setCurrentById(id: string): IProject | undefined { + const p = this._prjsList.find(item => item.id === id); + if (p) { + this._current = p; + this.curPrjSubject.next(this._current); + } + return this._current; } - public getCurrentId(): string { - if (this.current && this.current.id) { - return this.current.id; - } - return ''; + getCurrent(): IProject { + return this._current; } - Add(prj: IProject): Observable<IProject> { - const xdsPrj: IXDSProjectConfig = { - id: '', - serverId: prj.serverId, - label: prj.label || '', - clientPath: prj.pathClient.trim(), - serverPath: prj.pathServer, - type: prj.type, - defaultSdkID: prj.defaultSdkID, - }; + add(prj: IProject): Observable<IProject> { // Send config to XDS server - return this.xdsSvr.addProject(xdsPrj) + return this.xdsSvr.addProject(this._convToIXdsProject(prj)) .map(xp => this._convToIProject(xp)); } - Delete(prj: IProject): Observable<IProject> { + delete(prj: IProject): Observable<IProject> { const idx = this._getProjectIdx(prj.id); const delPrj = prj; if (idx === -1) { @@ -143,7 +141,7 @@ export class ProjectService { .map(res => delPrj); } - Sync(prj: IProject): Observable<string> { + sync(prj: IProject): Observable<string> { const idx = this._getProjectIdx(prj.id); if (idx === -1) { throw new Error('Invalid project id (id=' + prj.id + ')'); @@ -151,6 +149,17 @@ export class ProjectService { return this.xdsSvr.syncProject(prj.id); } + setSettings(prj: IProject): Observable<IProject> { + return this.xdsSvr.updateProject(this._convToIXdsProject(prj)) + .map(xp => this._convToIProject(xp)); + } + + getDefaultSettings(): IUISettings { + return defaultUISettings; + } + + /*** Private functions ***/ + private _isUsableProject(p) { return p && p.isInSync && (p.status === ProjectStatus.Enable) && @@ -161,7 +170,27 @@ export class ProjectService { return this._prjsList.findIndex((item) => item.id === id); } + + private _convToIXdsProject(prj: IProject): IXDSProjectConfig { + const xPrj: IXDSProjectConfig = { + id: prj.id || '', + serverId: prj.serverId, + label: prj.label || '', + clientPath: prj.pathClient.trim(), + serverPath: prj.pathServer, + type: prj.type, + defaultSdkID: prj.defaultSdkID, + clientData: JSON.stringify(prj.uiSettings || defaultUISettings), + }; + return xPrj; + } + private _convToIProject(rPrj: IXDSProjectConfig): IProject { + let settings = defaultUISettings; + if (rPrj.clientData && rPrj.clientData !== '') { + settings = JSON.parse(rPrj.clientData); + } + // Convert XDSFolderConfig to IProject const pp: IProject = { id: rPrj.id, @@ -175,14 +204,15 @@ export class ProjectService { isUsable: this._isUsableProject(rPrj), defaultSdkID: rPrj.defaultSdkID, serverPrjDef: Object.assign({}, rPrj), // do a copy + uiSettings: settings, }; return pp; } - private _addProject(rPrj: IXDSProjectConfig, noNext?: boolean): IProject { + private _addProject(prj: IXDSProjectConfig, noNext?: boolean): IProject { // Convert XDSFolderConfig to IProject - const pp = this._convToIProject(rPrj); + const pp = this._convToIProject(prj); // add new project this._prjsList.push(pp); @@ -199,9 +229,38 @@ export class ProjectService { }); if (!noNext) { - this.prjsSubject.next(Object.assign([], this._prjsList)); + this.prjsSubject.next(this._prjsList); } return pp; } + + private _delProject(prj: IXDSProjectConfig) { + const idx = this._prjsList.findIndex(item => item.id === prj.id); + if (idx === -1) { + if (isDevMode) { + /* tslint:disable:no-console */ + console.log('Warning: Try to delete project unknown id: prj=', prj); + } + return; + } + const delId = this._prjsList[idx].id; + this._prjsList.splice(idx, 1); + if (this._prjsList[idx].id === this._current.id) { + this.setCurrent(this._prjsList[0]); + } + this.prjsSubject.next(this._prjsList); + } + + private _updateProject(prj: IXDSProjectConfig) { + const i = this._getProjectIdx(prj.id); + if (i >= 0) { + // XXX for now, only isInSync and status may change + this._prjsList[i].isInSync = prj.isInSync; + this._prjsList[i].status = prj.status; + this._prjsList[i].isUsable = this._isUsableProject(prj); + this.prjsSubject.next(this._prjsList); + } + } + } diff --git a/webapp/src/app/@core-xds/services/xds-config.service.ts b/webapp/src/app/@core-xds/services/xds-config.service.ts index 7559673..2f751a7 100644 --- a/webapp/src/app/@core-xds/services/xds-config.service.ts +++ b/webapp/src/app/@core-xds/services/xds-config.service.ts @@ -47,7 +47,7 @@ export class XDSConfigService { } getCurServer(): IXDServerCfg { - return Object.assign({}, this._curServer); + return this._curServer; } setCurServer(svr: IXDServerCfg): Observable<IXDServerCfg> { @@ -58,7 +58,7 @@ export class XDSConfigService { .map(cfg => this._updateCurServer()) .catch(err => { this._curServer.connected = false; - this.curServer$.next(Object.assign({}, this._curServer)); + this.curServer$.next(this._curServer); return Observable.throw(err); }); } else { @@ -66,7 +66,7 @@ export class XDSConfigService { return this.xdsAgentSvr.setServerRetry(curSvr.id, svr.connRetry) .map(cfg => this._updateCurServer()) .catch(err => { - this.curServer$.next(Object.assign({}, this._curServer)); + this.curServer$.next(this._curServer); return Observable.throw(err); }); } @@ -76,7 +76,7 @@ export class XDSConfigService { private _updateCurServer() { this._curServer = this._getCurServer(); - this.curServer$.next(Object.assign({}, this._curServer)); + this.curServer$.next(this._curServer); } private _getCurServer(url?: string): IXDServerCfg { diff --git a/webapp/src/app/@core-xds/services/xdsagent.service.ts b/webapp/src/app/@core-xds/services/xdsagent.service.ts index 56e493f..06ca557 100644 --- a/webapp/src/app/@core-xds/services/xdsagent.service.ts +++ b/webapp/src/app/@core-xds/services/xdsagent.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Inject } from '@angular/core'; +import { Injectable, Inject, isDevMode } from '@angular/core'; import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'; import { DOCUMENT } from '@angular/common'; import { Observable } from 'rxjs/Observable'; @@ -44,6 +44,7 @@ export interface IXDSProjectConfig { status?: string; isInSync?: boolean; defaultSdkID: string; + clientData?: string; } export interface IXDSVer { @@ -107,12 +108,16 @@ export class XDSAgentService { public XdsConfig$: Observable<IXDSConfig>; public Status$: Observable<IAgentStatus>; - public ProjectState$ = <Subject<IXDSProjectConfig>>new Subject(); public CmdOutput$ = <Subject<ICmdOutput>>new Subject(); public CmdExit$ = <Subject<ICmdExit>>new Subject(); + protected projectAdd$ = new Subject<IXDSProjectConfig>(); + protected projectDel$ = new Subject<IXDSProjectConfig>(); + protected projectChange$ = new Subject<IXDSProjectConfig>(); + private baseUrl: string; private wsUrl: string; + private httpSessionID: string; private _config = <IXDSConfig>{ servers: [] }; private _status = { connected: false, servers: [] }; @@ -130,14 +135,25 @@ export class XDSAgentService { const originUrl = this.document.location.origin; this.baseUrl = originUrl + '/api/v1'; - const re = originUrl.match(/http[s]?:\/\/([^\/]*)[\/]?/); - if (re === null || re.length < 2) { - console.error('ERROR: cannot determine Websocket url'); - } else { - this.wsUrl = 'ws://' + re[1]; - this._handleIoSocket(); - this._RegisterEvents(); - } + // Retrieve Session ID / token + this.http.get(this.baseUrl + '/version', { observe: 'response' }) + .subscribe( + resp => { + this.httpSessionID = resp.headers.get('xds-agent-sid'); + + const re = originUrl.match(/http[s]?:\/\/([^\/]*)[\/]?/); + if (re === null || re.length < 2) { + console.error('ERROR: cannot determine Websocket url'); + } else { + this.wsUrl = 'ws://' + re[1]; + this._handleIoSocket(); + this._RegisterEvents(); + } + }, + err => { + /* tslint:disable:no-console */ + console.error('ERROR while retrieving session id:', err); + }); } private _NotifyXdsAgentState(sts: boolean) { @@ -182,6 +198,8 @@ export class XDSAgentService { console.error('WS error:', err); }); + // XDS Events decoding + this.socket.on('make:output', data => { this.CmdOutput$.next(Object.assign({}, <ICmdOutput>data)); }); @@ -198,8 +216,6 @@ export class XDSAgentService { this.CmdExit$.next(Object.assign({}, <ICmdExit>data)); }); - // Events - // (project-add and project-delete events are managed by project.service) this.socket.on('event:server-config', ev => { if (ev && ev.data) { const cfg: IXDServerCfg = ev.data; @@ -212,19 +228,52 @@ export class XDSAgentService { } }); + this.socket.on('event:project-add', (ev) => { + if (ev && ev.data && ev.data.id) { + this.projectAdd$.next(Object.assign({}, ev.data)); + if (ev.sessionID !== this.httpSessionID && ev.data.label) { + this.alert.info('Project "' + ev.data.label + '" has been added by another tool.'); + } + } else if (isDevMode) { + /* tslint:disable:no-console */ + console.log('Warning: received event:project-add with unknown data: ev=', ev); + } + }); + + this.socket.on('event:project-delete', (ev) => { + if (ev && ev.data && ev.data.id) { + this.projectDel$.next(Object.assign({}, ev.data)); + if (ev.sessionID !== this.httpSessionID && ev.data.label) { + this.alert.info('Project "' + ev.data.label + '" has been deleted by another tool.'); + } + } else if (isDevMode) { + console.log('Warning: received event:project-delete with unknown data: ev=', ev); + } + }); + this.socket.on('event:project-state-change', ev => { if (ev && ev.data) { - this.ProjectState$.next(Object.assign({}, ev.data)); + this.projectChange$.next(Object.assign({}, ev.data)); + } else if (isDevMode) { + console.log('Warning: received event:project-state-change with unknown data: ev=', ev); } }); } /** - ** Events + ** Events registration ***/ - addEventListener(ev: string, fn: Function): SocketIOClient.Emitter { - return this.socket.addEventListener(ev, fn); + onProjectAdd(): Observable<IXDSProjectConfig> { + return this.projectAdd$.asObservable(); + } + + onProjectDelete(): Observable<IXDSProjectConfig> { + return this.projectDel$.asObservable(); + } + + onProjectChange(): Observable<IXDSProjectConfig> { + return this.projectChange$.asObservable(); } /** @@ -307,6 +356,10 @@ export class XDSAgentService { return this._delete('/projects/' + id); } + updateProject(cfg: IXDSProjectConfig): Observable<IXDSProjectConfig> { + return this._put('/projects/' + cfg.id, cfg); + } + syncProject(id: string): Observable<string> { return this._post('/projects/sync/' + id, {}); } @@ -337,8 +390,8 @@ export class XDSAgentService { res => { }, error => { this.alert.error('ERROR while registering to all events: ' + error); - } - ); + }, + ); } private _getServer(ID: string): IXDServerCfg { @@ -371,6 +424,12 @@ export class XDSAgentService { return this._decodeError(error); }); } + private _put(url: string, body: any): Observable<any> { + return this.http.put(this.baseUrl + url, JSON.stringify(body), this._attachAuthHeaders()) + .catch((error) => { + return this._decodeError(error); + }); + } private _delete(url: string): Observable<any> { return this.http.delete(this.baseUrl + url, this._attachAuthHeaders()) .catch(this._decodeError); @@ -391,7 +450,10 @@ export class XDSAgentService { } else { e = err.message ? err.message : err.toString(); } - console.log('xdsagent.service - ERROR: ', e); + /* tslint:disable:no-console */ + if (isDevMode) { + console.log('xdsagent.service - ERROR: ', e); + } return Observable.throw(e); } } diff --git a/webapp/src/app/@theme/components/header/header.component.html b/webapp/src/app/@theme/components/header/header.component.html index 5d5eff6..4fa66b8 100644 --- a/webapp/src/app/@theme/components/header/header.component.html +++ b/webapp/src/app/@theme/components/header/header.component.html @@ -1,32 +1,37 @@ -<div class="header-container" - [class.left]="position === 'normal'" - [class.right]="position === 'inverse'"> +<div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'"> <div class="logo-containter"> - <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a> -<!-- MODS_XDS + <a (click)="toggleSidebar()" href="#" class="navigation"> + <i class="nb-menu"></i> + </a> + <!-- MODS_XDS <div class="logo" (click)="goToHome()">ngx-<span>admin</span></div> --> - <div class="logo" (click)="goToHome()">XDS <span>dashboard</span></div> + <div class="logo" (click)="goToHome()">XDS + <span>dashboard</span> + </div> </div> -<!-- MODS_XDS + <!-- MODS_XDS <ngx-theme-switcher></ngx-theme-switcher> --> </div> -<nb-actions - size="medium" - class="header-container" - [class.right]="position === 'normal'" - [class.left]="position === 'inverse'"> +<nb-actions size="medium" class="header-container" [class.right]="position === 'normal'" [class.left]="position === 'inverse'"> + <!-- MODS_XDS <nb-action icon="nb-grid-b" class="toggle-layout" (click)="toggleSettings()"></nb-action> +--> <nb-action> <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user> </nb-action> - <nb-action class="control-item" disabled icon="nb-notifications"></nb-action> -<!-- MODS_XDS + <nb-action class="control-item" disabled icon="nb-notifications"> + </nb-action> + <nb-action icon="fa fa-question-circle-o"> + </nb-action> + + <!-- MODS_XDS <nb-action class="control-item" icon="nb-email"></nb-action> ---> <nb-action class="control-item"> <nb-search type="rotate-layout" (click)="startSearch()"></nb-search> </nb-action> +--> + </nb-actions> diff --git a/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.html b/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.html new file mode 100644 index 0000000..7dd2ec7 --- /dev/null +++ b/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.html @@ -0,0 +1,60 @@ +<div class="modal-header"> + <span>Build Settings</span> + <button class="close" aria-label="Close" (click)="closeModal()"> + <span aria-hidden="true">×</span> + </button> +</div> + +<div class="modal-body row"> + <div class="col-12"> + <form [formGroup]="settingsProjectForm" (ngSubmit)="onSubmit()"> + + <div class="form-group row"> + <label for="clean-cmd" class="col-sm-3 col-form-label">Clean command</label> + <div class="col-sm-9"> + <input type="text" id="inputCleanCmd" class="form-control" formControlName="cmdClean"> + </div> + </div> + + <div class="form-group row"> + <label for="prebuild-cmd" class="col-sm-3 col-form-label">Pre-Build command</label> + <div class="col-sm-9"> + <input type="text" id="inputPrebuildCmd" class="form-control" formControlName="cmdPrebuild"> + </div> + </div> + + <div class="form-group row"> + <label for="build-cmd" class="col-sm-3 col-form-label">Build command</label> + <div class="col-sm-9"> + <input type="text" id="inputBuildCmd" class="form-control" formControlName="cmdBuild"> + </div> + </div> + + <div class="form-group row"> + <label for="populate-cmd" class="col-sm-3 col-form-label">Populate command</label> + <div class="col-sm-9"> + <input type="text" id="inputPopulateCmd" class="form-control" formControlName="cmdPopulate"> + </div> + </div> + + <div class="form-group row"> + <label for="envvars-cmd" class="col-sm-3 col-form-label">Env variables</label> + <div class="col-sm-9"> + <input type="text" id="inputEnvVars" class="form-control" formControlName="envVars"> + </div> + </div> + + <div class="offset-sm-9 col-sm-9"> + <button class="btn btn-sm btn-hero-secondary" (click)="closeAction=false; resetDefault()">Reset settings</button> + </div> + </form> + </div> +</div> +<div class="modal-footer form-group"> + <div class="col-12"> + <div class="offset-sm-4 col-sm-6"> + <button class="btn btn-md btn-secondary" (click)="closeAction=false; closeModal()"> Cancel </button> + <button class="btn btn-md btn-primary" [disabled]="!settingsProjectForm.valid" (click)="closeAction=true; onSubmit()">Update</button> + </div> + </div> +</div> diff --git a/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.ts b/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.ts new file mode 100644 index 0000000..01c6d1e --- /dev/null +++ b/webapp/src/app/pages/build/build-settings-modal/build-settings-modal.component.ts @@ -0,0 +1,77 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; +import { FormControl, FormGroup, Validators, ValidationErrors, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms'; + +import { AlertService } from '../../../@core-xds/services/alert.service'; +import { ProjectService, IProject } from '../../../@core-xds/services/project.service'; + + +@Component({ + selector: 'xds-build-settings-modal', + templateUrl: 'build-settings-modal.component.html', +}) + +export class BuildSettingsModalComponent implements OnInit { + // @Input('server-id') serverID: string; + private serverID: string; + + closeAction = false; + userEditedLabel = false; + + settingsProjectForm: FormGroup; + subpathCtrl = new FormControl('', Validators.nullValidator); + + private curPrj: IProject; + + constructor( + private alert: AlertService, + private projectSvr: ProjectService, + private fb: FormBuilder, + private activeModal: NgbActiveModal, + ) { + this.settingsProjectForm = fb.group({ + subpath: this.subpathCtrl, + cmdClean: ['', Validators.required], + cmdPrebuild: ['', Validators.nullValidator], + cmdBuild: ['', Validators.required], + cmdPopulate: ['', Validators.nullValidator], + cmdArgs: ['', Validators.nullValidator], + envVars: ['', Validators.nullValidator], + }); + } + + ngOnInit() { + this.curPrj = this.projectSvr.getCurrent(); + this.settingsProjectForm.patchValue(this.curPrj.uiSettings); + } + + closeModal() { + this.activeModal.close(); + } + + resetDefault() { + this.settingsProjectForm.patchValue(this.projectSvr.getDefaultSettings()); + } + + onSubmit() { + if (!this.closeAction) { + return; + } + + this.curPrj.uiSettings = this.settingsProjectForm.value; + this.projectSvr.setSettings(this.curPrj) + .subscribe(prj => { + this.alert.info('Settings of project "' + prj.label + '" successfully updated.'); + this.closeModal(); + + // Reset Value for the next creation + this.settingsProjectForm.reset(); + }, + err => { + this.alert.error(err, 60); + this.closeModal(); + }); + } + +} diff --git a/webapp/src/app/pages/build/build.component.html b/webapp/src/app/pages/build/build.component.html index a1ef62d..1ce9484 100644 --- a/webapp/src/app/pages/build/build.component.html +++ b/webapp/src/app/pages/build/build.component.html @@ -11,43 +11,48 @@ </nb-actions> </nb-card-body> </div> - <div class="col-md-12 col-lg-12 col-xxxl-6"> + <div class="col-md-12 col-lg-12"> <nb-card size="xlarge"> <nb-tabset fullWidth> - <nb-tab tabTitle="Build"> + <nb-tab tabTitle="Build" style="overflow: hidden;"> - <div class="row" style="margin-top:1em;"> - <!-- FIXME SEB - <button class="btn pull-right " (click)="reset() "> - <span class="fa fa-eraser fa-size-x2"></span> - </button> - --> - <div class="col-md-12 text-center "> - <textarea rows="20" class="textarea-scroll" #scrollOutput>{{ cmdOutput }}</textarea> - </div> + <div class="offset-md-10 col-md-2 right"> + <i class="control-icon fa fa-eraser" (click)="resetOutput()"> + </i> + </div> + <div class="col-md-12 text-center "> + <textarea rows="20" class="textarea-scroll" #scrollOutput>{{ cmdOutput }}</textarea> </div> <nb-card-body> - <nb-actions size="medium" fullWidth> - <nb-action (click)="clean()"> - <i class="fa fa-eraser"></i> - <span>Clean</span> - </nb-action> - <nb-action (click)="preBuild()"> - <i class="nb-list"></i> - <span>Pre-Build</span> - </nb-action> - <nb-action (click)="build()"> - <i class="fa fa-wrench"></i> - <span>Build</span> - </nb-action> - <nb-action (click)="populate()"> - <i class="fa fa-send"></i> - <span>Populate</span> - </nb-action> - </nb-actions> - </nb-card-body> + <nb-actions size="medium" fullWidth> + <nb-action (click)="settingsShow()"> + <i class="fa fa-cog"></i> + <span>Settings</span> + </nb-action> + + <nb-action> + </nb-action> + + <nb-action (click)="clean()"> + <i class="fa fa-eraser"></i> + <span>Clean</span> + </nb-action> + <nb-action (click)="preBuild()"> + <i class="nb-list"></i> + <span>Pre-Build</span> + </nb-action> + <nb-action (click)="build()"> + <i class="fa fa-wrench"></i> + <span>Build</span> + </nb-action> + <nb-action (click)="populate()"> + <i class="fa fa-send"></i> + <span>Populate</span> + </nb-action> + </nb-actions> + </nb-card-body> </nb-tab> diff --git a/webapp/src/app/pages/build/build.component.scss b/webapp/src/app/pages/build/build.component.scss index b256f66..5308f3f 100644 --- a/webapp/src/app/pages/build/build.component.scss +++ b/webapp/src/app/pages/build/build.component.scss @@ -23,6 +23,12 @@ } } +.right { + display: flex; + flex-direction: row-reverse; + padding-right: 30px; +} + nb-action { i { font-size: 2rem; diff --git a/webapp/src/app/pages/build/build.component.spec.ts b/webapp/src/app/pages/build/build.component.spec.ts index 016192c..a676a66 100644 --- a/webapp/src/app/pages/build/build.component.spec.ts +++ b/webapp/src/app/pages/build/build.component.spec.ts @@ -8,7 +8,7 @@ describe('BuildComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ BuildComponent ] + declarations: [ BuildComponent ], }) .compileComponents(); })); diff --git a/webapp/src/app/pages/build/build.component.ts b/webapp/src/app/pages/build/build.component.ts index 5adb9bc..99b7e54 100644 --- a/webapp/src/app/pages/build/build.component.ts +++ b/webapp/src/app/pages/build/build.component.ts @@ -1,11 +1,13 @@ import { Component, ViewEncapsulation, AfterViewChecked, ElementRef, ViewChild, OnInit, Input } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; -import { CookieService } from 'ngx-cookie'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import 'rxjs/add/operator/scan'; import 'rxjs/add/operator/startWith'; +import { BuildSettingsModalComponent } from './build-settings-modal/build-settings-modal.component'; + import { XDSAgentService, ICmdOutput } from '../../@core-xds/services/xdsagent.service'; import { ProjectService, IProject } from '../../@core-xds/services/project.service'; import { AlertService, IAlert } from '../../@core-xds/services/alert.service'; @@ -26,9 +28,6 @@ export class BuildComponent implements OnInit, AfterViewChecked { // @Input() curProject: IProject; @Input() curProject = <IProject>null; - public buildForm: FormGroup; - public subpathCtrl = new FormControl('', Validators.required); - public debugEnable = false; public buildIsCollapsed = false; public cmdOutput: string; public cmdInfo: string; @@ -38,37 +37,16 @@ export class BuildComponent implements OnInit, AfterViewChecked { constructor( private prjSvr: ProjectService, private xdsSvr: XDSAgentService, - private fb: FormBuilder, private alertSvr: AlertService, private sdkSvr: SdkService, - private cookie: CookieService, + private modalService: NgbModal, ) { this.cmdOutput = ''; this.cmdInfo = ''; // TODO: to be remove (only for debug) - this.buildForm = fb.group({ - subpath: this.subpathCtrl, - cmdClean: ['', Validators.nullValidator], - cmdPrebuild: ['', Validators.nullValidator], - cmdBuild: ['', Validators.nullValidator], - cmdPopulate: ['', Validators.nullValidator], - cmdArgs: ['', Validators.nullValidator], - envVars: ['', Validators.nullValidator], - }); + } ngOnInit() { - // Set default settings - // TODO save & restore values from cookies - this.buildForm.patchValue({ - subpath: '', - cmdClean: 'rm -rf build', - cmdPrebuild: 'mkdir -p build && cd build && cmake ..', - cmdBuild: 'cd build && make', - cmdPopulate: 'cd build && make remote-target-populate', - cmdArgs: '', - envVars: '', - }); - // Command output data tunneling this.xdsSvr.CmdOutput$.subscribe(data => { this.cmdOutput += data.stdout; @@ -88,70 +66,77 @@ export class BuildComponent implements OnInit, AfterViewChecked { }); this._scrollToBottom(); - - // only use for debug - this.debugEnable = (this.cookie.get('debug_build') === '1'); } ngAfterViewChecked() { this._scrollToBottom(); } - reset() { + resetOutput() { this.cmdOutput = ''; } + settingsShow() { + const activeModal = this.modalService.open(BuildSettingsModalComponent, { size: 'lg', container: 'nb-layout' }); + activeModal.componentInstance.modalHeader = 'Large Modal'; + } + clean() { + const curPrj = this.prjSvr.getCurrent(); this._exec( - this.buildForm.value.cmdClean, - this.buildForm.value.subpath, + curPrj.uiSettings.cmdClean, + curPrj.uiSettings.subpath, [], - this.buildForm.value.envVars); + curPrj.uiSettings.envVars.join(' ')); } preBuild() { + const curPrj = this.prjSvr.getCurrent(); this._exec( - this.buildForm.value.cmdPrebuild, - this.buildForm.value.subpath, + curPrj.uiSettings.cmdPrebuild, + curPrj.uiSettings.subpath, [], - this.buildForm.value.envVars); + curPrj.uiSettings.envVars.join(' ')); } build() { + const curPrj = this.prjSvr.getCurrent(); this._exec( - this.buildForm.value.cmdBuild, - this.buildForm.value.subpath, + curPrj.uiSettings.cmdBuild, + curPrj.uiSettings.subpath, [], - this.buildForm.value.envVars + curPrj.uiSettings.envVars.join(' '), ); } populate() { + const curPrj = this.prjSvr.getCurrent(); this._exec( - this.buildForm.value.cmdPopulate, - this.buildForm.value.subpath, + curPrj.uiSettings.cmdPopulate, + curPrj.uiSettings.subpath, [], // args - this.buildForm.value.envVars + curPrj.uiSettings.envVars.join(' '), ); } execCmd() { + const curPrj = this.prjSvr.getCurrent(); this._exec( - this.buildForm.value.cmdArgs, - this.buildForm.value.subpath, + curPrj.uiSettings.cmdArgs.join(' '), + curPrj.uiSettings.subpath, [], - this.buildForm.value.envVars + curPrj.uiSettings.envVars.join(' '), ); } private _exec(cmd: string, dir: string, args: string[], env: string) { + this.curProject = this.prjSvr.getCurrent(); + const prjID = this.curProject.id; + if (!this.curProject) { - this.alertSvr.warning('No active project', true); + return this.alertSvr.warning('No active project', true); } - // const prjID = this.curProject.id; - const prjID = this.prjSvr.getCurrent().id; - this.cmdOutput += this._outputHeader(); const sdkid = this.sdkSvr.getCurrentId(); diff --git a/webapp/src/app/pages/build/build.module.ts b/webapp/src/app/pages/build/build.module.ts index ac1dfab..34f05f2 100644 --- a/webapp/src/app/pages/build/build.module.ts +++ b/webapp/src/app/pages/build/build.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { ThemeModule } from '../../@theme/theme.module'; import { BuildComponent } from './build.component'; +import { BuildSettingsModalComponent } from './build-settings-modal/build-settings-modal.component'; import { ProjectSelectDropdownComponent } from './settings/project-select-dropdown.component'; import { SdkSelectDropdownComponent } from './settings/sdk-select-dropdown.component'; @@ -11,10 +12,12 @@ import { SdkSelectDropdownComponent } from './settings/sdk-select-dropdown.compo ], declarations: [ BuildComponent, + BuildSettingsModalComponent, ProjectSelectDropdownComponent, SdkSelectDropdownComponent, ], entryComponents: [ + BuildSettingsModalComponent, ], }) export class BuildModule { } diff --git a/webapp/src/app/pages/build/settings-modal/build-settings-modal.component.ts b/webapp/src/app/pages/build/settings-modal/build-settings-modal.component.ts new file mode 100644 index 0000000..fd1b904 --- /dev/null +++ b/webapp/src/app/pages/build/settings-modal/build-settings-modal.component.ts @@ -0,0 +1,143 @@ +import { Component, Input, ViewChild, OnInit } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; +import { FormControl, FormGroup, Validators, ValidationErrors, FormBuilder, ValidatorFn, AbstractControl } from '@angular/forms'; + +// Import RxJs required methods +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/filter'; +import 'rxjs/add/operator/debounceTime'; + +import { AlertService, IAlert } from '../../../@core-xds/services/alert.service'; +import { ProjectService, IProject, ProjectType, ProjectTypes } from '../../../@core-xds/services/project.service'; +import { XDSConfigService } from '../../../@core-xds/services/xds-config.service'; + + +@Component({ + selector: 'xds-build-settings-modal', + templateUrl: 'build-settings-modal.component.html', + styleUrls: ['build-settings-modal.component.scss'], +}) +export class BuildSettingsModalComponent implements OnInit { + // @Input('server-id') serverID: string; + private serverID: string; + + cancelAction = false; + userEditedLabel = false; + projectTypes = ProjectTypes; + + addProjectForm: FormGroup; + typeCtrl: FormControl; + pathCliCtrl: FormControl; + pathSvrCtrl: FormControl; + + constructor( + private alert: AlertService, + private projectSvr: ProjectService, + private XdsConfigSvr: XDSConfigService, + private fb: FormBuilder, + private activeModal: NgbActiveModal, + ) { + // Define types (first one is special/placeholder) + this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' }); + + this.typeCtrl = new FormControl(this.projectTypes[0].value, this.validatorProjType); + this.pathCliCtrl = new FormControl('', this.validatorProjPath); + this.pathSvrCtrl = new FormControl({ value: '', disabled: true }, this.validatorProjPath); + + this.addProjectForm = fb.group({ + type: this.typeCtrl, + pathCli: this.pathCliCtrl, + pathSvr: this.pathSvrCtrl, + label: ['', Validators.nullValidator], + }); + } + + + ngOnInit() { + // Update server ID + this.serverID = this.XdsConfigSvr.getCurServer().id; + this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id); + + // Auto create label name + this.pathCliCtrl.valueChanges + .debounceTime(100) + .filter(n => n) + .map(n => { + const last = n.split('/'); + let nm = n; + if (last.length > 0) { + nm = last.pop(); + if (nm === '' && last.length > 0) { + nm = last.pop(); + } + } + return 'Project_' + nm; + }) + .subscribe(value => { + if (value && !this.userEditedLabel) { + this.addProjectForm.patchValue({ label: value }); + } + }); + + // Handle disabling of Server path + this.typeCtrl.valueChanges + .debounceTime(500) + .subscribe(valType => { + const dis = (valType === String(ProjectType.SYNCTHING)); + this.pathSvrCtrl.reset({ value: '', disabled: dis }); + }); + } + + closeModal() { + this.activeModal.close(); + } + + onKeyLabel(event: any) { + this.userEditedLabel = (this.addProjectForm.value.label !== ''); + } + + onChangeLocalProject(e) { + } + + onSubmit() { + if (this.cancelAction) { + return; + } + + const formVal = this.addProjectForm.value; + + const type = formVal['type'].value; + this.projectSvr.add({ + serverId: this.serverID, + label: formVal['label'], + pathClient: formVal['pathCli'], + pathServer: formVal['pathSvr'], + type: formVal['type'], + // FIXME: allow to set defaultSdkID from New Project config panel + }) + .subscribe(prj => { + this.alert.info('Project ' + prj.label + ' successfully created.'); + this.closeModal(); + + // Reset Value for the next creation + this.addProjectForm.reset(); + const selectedType = this.projectTypes[0].value; + this.addProjectForm.patchValue({ type: selectedType }); + + }, + err => { + this.alert.error(err, 60); + this.closeModal(); + }); + } + + private validatorProjType(g: FormGroup): ValidationErrors | null { + return (g.value !== ProjectType.UNSET) ? null : { validatorProjType: { valid: false } }; + } + + private validatorProjPath(g: FormGroup): ValidationErrors | null { + return (g.disabled || g.value !== '') ? null : { validatorProjPath: { valid: false } }; + } + +} diff --git a/webapp/src/app/pages/build/settings/project-select-dropdown.component.ts b/webapp/src/app/pages/build/settings/project-select-dropdown.component.ts index da3580a..a83ec0a 100644 --- a/webapp/src/app/pages/build/settings/project-select-dropdown.component.ts +++ b/webapp/src/app/pages/build/settings/project-select-dropdown.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, Input } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; import { IProject, ProjectService } from '../../../@core-xds/services/project.service'; @@ -7,33 +8,27 @@ import { IProject, ProjectService } from '../../../@core-xds/services/project.se template: ` <div class="form-group"> <label>Project</label> - <select class="form-control"> - <option *ngFor="let prj of projects" (click)="select(prj)">{{prj.label}}</option> + <select class="form-control" [(ngModel)]="curPrj" (click)="select()"> + <option *ngFor="let prj of projects$ | async" [ngValue]="prj">{{ prj.label }}</option> </select> </div> `, }) export class ProjectSelectDropdownComponent implements OnInit { - projects: IProject[]; + projects$: Observable<IProject[]>; curPrj: IProject; - constructor(private prjSvr: ProjectService) { } + constructor(private projectSvr: ProjectService) { } ngOnInit() { - this.curPrj = this.prjSvr.getCurrent(); - this.prjSvr.Projects$.subscribe((s) => { - if (s) { - this.projects = s; - if (this.curPrj === null || s.indexOf(this.curPrj) === -1) { - this.prjSvr.setCurrent(this.curPrj = s.length ? s[0] : null); - } - } - }); + this.curPrj = this.projectSvr.getCurrent(); + this.projects$ = this.projectSvr.projects$; + this.projectSvr.curProject$.subscribe(p => this.curPrj = p); } - select(s) { - this.prjSvr.setCurrent(this.curPrj = s); + select() { + this.projectSvr.setCurrentById(this.curPrj.id); } } diff --git a/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts b/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts index 3901331..556316c 100644 --- a/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts +++ b/webapp/src/app/pages/config/config-xds/downloadXdsAgent.component.ts @@ -2,6 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'xds-dwnl-agent', + template: ``, + /* FIXME SEB: to be reworked template: ` <template #popTemplate> <h3>Install xds-agent:</h3> @@ -25,7 +27,8 @@ import { Component } from '@angular/core'; .fa-size-x2 { font-size: 20px; } - `] + `], + */ }) export class DwnlAgentComponent { diff --git a/webapp/src/app/pages/config/config.module.ts b/webapp/src/app/pages/config/config.module.ts index 2fdaf94..d11bcf3 100644 --- a/webapp/src/app/pages/config/config.module.ts +++ b/webapp/src/app/pages/config/config.module.ts @@ -10,6 +10,6 @@ import { ConfigRoutingModule, routedConfig } from './config-routing.module'; ], declarations: [ ...routedConfig, - ] + ], }) export class ConfigModule { } diff --git a/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.html b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.html index e2c6748..9d26c71 100644 --- a/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.html +++ b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.html @@ -39,13 +39,14 @@ <input type="text" id="inputLabel" class="form-control" formControlName="label" (keyup)="onKeyLabel($event)"> </div> </div> - - <div class="offset-sm-3 col-sm-9"> - <button class="btn btn-md btn-secondary" (click)="cancelAction=true; closeModal()"> Cancel </button> - <button class="btn btn-md btn-primary" type="submit" [disabled]="!addProjectForm.valid">Add Folder</button> - </div> </form> </div> </div> <div class="modal-footer form-group"> + <div class="col-12"> + <div class="offset-sm-4 col-sm-6"> + <button class="btn btn-md btn-secondary" (click)="cancelAction=true; closeModal()"> Cancel </button> + <button class="btn btn-md btn-primary" (click)="onSubmit()" [disabled]="!addProjectForm.valid">Add Folder</button> + </div> + </div> </div> diff --git a/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts index 640ac5c..15b1b24 100644 --- a/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts +++ b/webapp/src/app/pages/projects/project-add-modal/project-add-modal.component.ts @@ -16,7 +16,7 @@ import { XDSConfigService } from '../../../@core-xds/services/xds-config.service @Component({ selector: 'xds-project-add-modal', templateUrl: 'project-add-modal.component.html', - styleUrls: ['project-add-modal.component.scss'] + styleUrls: ['project-add-modal.component.scss'], }) export class ProjectAddModalComponent implements OnInit { // @Input('server-id') serverID: string; @@ -24,7 +24,7 @@ export class ProjectAddModalComponent implements OnInit { cancelAction = false; userEditedLabel = false; - projectTypes = ProjectTypes; + projectTypes = Object.assign([], ProjectTypes); addProjectForm: FormGroup; typeCtrl: FormControl; @@ -36,7 +36,7 @@ export class ProjectAddModalComponent implements OnInit { private projectSvr: ProjectService, private XdsConfigSvr: XDSConfigService, private fb: FormBuilder, - private activeModal: NgbActiveModal + private activeModal: NgbActiveModal, ) { // Define types (first one is special/placeholder) this.projectTypes.unshift({ value: ProjectType.UNSET, display: '--Select a type--' }); @@ -108,7 +108,7 @@ export class ProjectAddModalComponent implements OnInit { const formVal = this.addProjectForm.value; const type = formVal['type'].value; - this.projectSvr.Add({ + this.projectSvr.add({ serverId: this.serverID, label: formVal['label'], pathClient: formVal['pathCli'], diff --git a/webapp/src/app/pages/projects/project-card/project-card.component.scss b/webapp/src/app/pages/projects/project-card/project-card.component.scss index a433f58..6ac8d11 100644 --- a/webapp/src/app/pages/projects/project-card/project-card.component.scss +++ b/webapp/src/app/pages/projects/project-card/project-card.component.scss @@ -13,11 +13,6 @@ nb-card-footer { text-align: right; } -.fa-big { - font-size: 20px; - font-weight: bold; -} - .fa-size-x2 { font-size: 20px; } @@ -31,14 +26,6 @@ th label { margin-bottom: 0; } -tr.info>th { - vertical-align: middle; -} - -tr.info>td { - vertical-align: middle; -} - .btn-outline-danger.btn-xds { color: #ff4c6a; &:focus { diff --git a/webapp/src/app/pages/projects/project-card/project-card.component.ts b/webapp/src/app/pages/projects/project-card/project-card.component.ts index 160c4c8..840d656 100644 --- a/webapp/src/app/pages/projects/project-card/project-card.component.ts +++ b/webapp/src/app/pages/projects/project-card/project-card.component.ts @@ -17,28 +17,28 @@ export class ProjectCardComponent { constructor( private alert: AlertService, - private projectSvr: ProjectService + private projectSvr: ProjectService, ) { } delete(prj: IProject) { - this.projectSvr.Delete(prj).subscribe( + this.projectSvr.delete(prj).subscribe( res => { }, - err => this.alert.error('ERROR delete: ' + err) + err => this.alert.error('ERROR delete: ' + err), ); } sync(prj: IProject) { - this.projectSvr.Sync(prj).subscribe( + this.projectSvr.sync(prj).subscribe( res => { }, - err => this.alert.error('ERROR: ' + err) + err => this.alert.error('ERROR: ' + err), ); } } // Make Project type human readable @Pipe({ - name: 'readableType' + name: 'readableType', }) export class ProjectReadableTypePipe implements PipeTransform { diff --git a/webapp/src/app/pages/projects/projects.component.html b/webapp/src/app/pages/projects/projects.component.html index 662dfcc..ecce824 100644 --- a/webapp/src/app/pages/projects/projects.component.html +++ b/webapp/src/app/pages/projects/projects.component.html @@ -20,7 +20,7 @@ </div> </nb-card-body> </div> - <div class="col-md-12 col-lg-12 col-xxxl-6" *ngFor="let prj of (projects$ | async)"> + <div class="col-md-6 col-lg-6" *ngFor="let prj of (projects$ | async)"> <xds-project-card [project]="prj"></xds-project-card> </div> </div> diff --git a/webapp/src/app/pages/projects/projects.component.scss b/webapp/src/app/pages/projects/projects.component.scss index 3631fbb..92a8807 100644 --- a/webapp/src/app/pages/projects/projects.component.scss +++ b/webapp/src/app/pages/projects/projects.component.scss @@ -25,7 +25,7 @@ order: 1; flex-direction: row-reverse; } - nb-actions>nb-action { + nb-actions > nb-action { padding: 0; } nb-action { diff --git a/webapp/src/app/pages/projects/projects.component.ts b/webapp/src/app/pages/projects/projects.component.ts index 179bbd0..761ff50 100644 --- a/webapp/src/app/pages/projects/projects.component.ts +++ b/webapp/src/app/pages/projects/projects.component.ts @@ -23,7 +23,7 @@ export class ProjectsComponent implements OnInit { } ngOnInit() { - this.projects$ = this.projectSvr.Projects$; + this.projects$ = this.projectSvr.projects$; } add() { diff --git a/webapp/src/app/pages/projects/projects.module.ts b/webapp/src/app/pages/projects/projects.module.ts index 48f37ce..960a2da 100644 --- a/webapp/src/app/pages/projects/projects.module.ts +++ b/webapp/src/app/pages/projects/projects.module.ts @@ -17,7 +17,7 @@ import { ProjectAddModalComponent } from './project-add-modal/project-add-modal. ProjectReadableTypePipe, ], entryComponents: [ - ProjectAddModalComponent + ProjectAddModalComponent, ], }) export class ProjectsModule { } diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss index e404610..a83cca4 100644 --- a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss +++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss @@ -13,11 +13,6 @@ nb-card-footer { text-align: right; } -.fa-big { - font-size: 20px; - font-weight: bold; -} - .fa-size-x2 { font-size: 20px; } @@ -31,14 +26,6 @@ th label { margin-bottom: 0; } -tr.info>th { - vertical-align: middle; -} - -tr.info>td { - vertical-align: middle; -} - .btn-outline-danger.btn-xds { color: #ff4c6a; &:focus { diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts index 8228570..7135d36 100644 --- a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts +++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts @@ -17,7 +17,7 @@ export class SdkCardComponent { constructor( private alert: AlertService, - private sdkSvr: SdkService + private sdkSvr: SdkService, ) { } @@ -28,7 +28,7 @@ export class SdkCardComponent { delete(sdk: ISdk) { this.sdkSvr.delete(sdk).subscribe( res => { }, - err => this.alert.error('ERROR delete: ' + err) + err => this.alert.error('ERROR delete: ' + err), ); } } diff --git a/webapp/src/app/pages/sdks/sdks.component.html b/webapp/src/app/pages/sdks/sdks.component.html index adfd924..94c2501 100644 --- a/webapp/src/app/pages/sdks/sdks.component.html +++ b/webapp/src/app/pages/sdks/sdks.component.html @@ -20,7 +20,7 @@ </div> </nb-card-body> </div> - <div class="col-md-12 col-lg-12 col-xxxl-6" *ngFor="let sdk of (sdks$ | async)"> + <div class="col-md-6 col-lg-6" *ngFor="let sdk of (sdks$ | async)"> <xds-sdk-card [sdk]="sdk"></xds-sdk-card> </div> </div> diff --git a/webapp/src/app/pages/sdks/sdks.component.scss b/webapp/src/app/pages/sdks/sdks.component.scss index 3631fbb..92a8807 100644 --- a/webapp/src/app/pages/sdks/sdks.component.scss +++ b/webapp/src/app/pages/sdks/sdks.component.scss @@ -25,7 +25,7 @@ order: 1; flex-direction: row-reverse; } - nb-actions>nb-action { + nb-actions > nb-action { padding: 0; } nb-action { diff --git a/webapp/src/app/pages/sdks/sdks.component.ts b/webapp/src/app/pages/sdks/sdks.component.ts index 3208121..ef933af 100644 --- a/webapp/src/app/pages/sdks/sdks.component.ts +++ b/webapp/src/app/pages/sdks/sdks.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -//import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component'; +// import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component'; import { SdkService, ISdk } from '../../@core-xds/services/sdk.service'; diff --git a/webapp/src/app/pages/sdks/sdks.module.ts b/webapp/src/app/pages/sdks/sdks.module.ts index 48629f6..c811eb4 100644 --- a/webapp/src/app/pages/sdks/sdks.module.ts +++ b/webapp/src/app/pages/sdks/sdks.module.ts @@ -3,7 +3,7 @@ import { ThemeModule } from '../../@theme/theme.module'; import { SdksComponent } from './sdks.component'; import { SdkCardComponent } from './sdk-card/sdk-card.component'; -//import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component'; +// import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component'; @NgModule({ @@ -13,10 +13,10 @@ import { SdkCardComponent } from './sdk-card/sdk-card.component'; declarations: [ SdksComponent, SdkCardComponent, - //SdkAddModalComponent, + // SdkAddModalComponent, ], entryComponents: [ - //SdkAddModalComponent + // SdkAddModalComponent, ], }) export class SdksModule { } |