From 45f6472d1e8ecad428da314a6d762143f033865d Mon Sep 17 00:00:00 2001 From: Sebastien Douheret Date: Thu, 21 Dec 2017 15:07:04 +0100 Subject: Added new SDKs management support Signed-off-by: Sebastien Douheret --- webapp/src/app/@core-xds/services/sdk.service.ts | 187 ++++++++++++++++----- .../src/app/@core-xds/services/xdsagent.service.ts | 72 +++++++- .../build-settings-modal.component.html | 2 +- webapp/src/app/pages/build/build.component.ts | 9 +- .../confirm-modal/confirm-modal.component.ts | 5 + webapp/src/app/pages/pages-menu.ts | 8 + webapp/src/app/pages/pages-routing.module.ts | 4 + .../project-add-modal.component.ts | 9 +- .../src/app/pages/projects/projects.component.ts | 7 +- .../pages/sdks/sdk-card/sdk-card.component.html | 23 ++- .../app/pages/sdks/sdk-card/sdk-card.component.ts | 32 +++- .../sdks/sdk-management/sdk-install.component.ts | 131 +++++++++++++++ .../sdk-management/sdk-management.component.html | 26 +++ .../sdk-management/sdk-management.component.scss | 83 +++++++++ .../sdk-management/sdk-management.component.ts | 168 ++++++++++++++++++ webapp/src/app/pages/sdks/sdks.component.html | 17 +- webapp/src/app/pages/sdks/sdks.component.scss | 2 +- webapp/src/app/pages/sdks/sdks.component.ts | 8 +- webapp/src/app/pages/sdks/sdks.module.ts | 11 +- 19 files changed, 711 insertions(+), 93 deletions(-) create mode 100644 webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts create mode 100644 webapp/src/app/pages/sdks/sdk-management/sdk-management.component.html create mode 100644 webapp/src/app/pages/sdks/sdk-management/sdk-management.component.scss create mode 100644 webapp/src/app/pages/sdks/sdk-management/sdk-management.component.ts (limited to 'webapp') diff --git a/webapp/src/app/@core-xds/services/sdk.service.ts b/webapp/src/app/@core-xds/services/sdk.service.ts index 2d54d4e..8fa6ad2 100644 --- a/webapp/src/app/@core-xds/services/sdk.service.ts +++ b/webapp/src/app/@core-xds/services/sdk.service.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { Injectable, SecurityContext } from '@angular/core'; +import { Injectable, SecurityContext, isDevMode } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @@ -25,60 +25,159 @@ import { XDSAgentService } from '../services/xdsagent.service'; import 'rxjs/add/observable/throw'; export interface ISdk { - id: string; - profile: string; - version: string; - arch: number; - path: string; + id: string; + name: string; + description: string; + profile: string; + version: string; + arch: string; + path: string; + url: string; + status: string; + date: string; + size: string; + md5sum: string; + setupFile: string; + lastError: string; +} + +export interface ISdkManagementMsg { + cmdID: string; + timestamp: string; + sdk: ISdk; + stdout: string; + stderr: string; + progress: number; + exited: boolean; + code: number; + error: string; } @Injectable() export class SdkService { - public Sdks$: Observable; - - private _sdksList = []; - private current: ISdk; - private sdksSubject = >new BehaviorSubject(this._sdksList); - - constructor(private xdsSvr: XDSAgentService) { - this.current = null; - this.Sdks$ = this.sdksSubject.asObservable(); - - this.xdsSvr.XdsConfig$.subscribe(cfg => { - if (!cfg || cfg.servers.length < 1) { - return; - } - // FIXME support multiple server - // cfg.servers.forEach(svr => { - this.xdsSvr.getSdks(cfg.servers[0].id).subscribe((s) => { - this._sdksList = s; - this.sdksSubject.next(s); - }); - }); - } + public Sdks$: Observable; + public curSdk$: Observable; - public setCurrent(s: ISdk) { - this.current = s; - } + private _sdksList = []; + private sdksSubject = >new BehaviorSubject(this._sdksList); + private current: ISdk; + private curSdkSubject = >new BehaviorSubject(this.current); + private curServerID; - public getCurrent(): ISdk { - return this.current; - } + constructor(private xdsSvr: XDSAgentService) { + this.current = null; + this.Sdks$ = this.sdksSubject.asObservable(); + this.curSdk$ = this.curSdkSubject.asObservable(); - public getCurrentId(): string { - if (this.current && this.current.id) { - return this.current.id; + this.xdsSvr.XdsConfig$.subscribe(cfg => { + if (!cfg || cfg.servers.length < 1) { + return; + } + // FIXME support multiple server + // cfg.servers.forEach(svr => { + this.curServerID = cfg.servers[0].id; + this.xdsSvr.getSdks(this.curServerID).subscribe((sdks) => { + this._sdksList = []; + sdks.forEach(s => { + this._addSdk(s, true); + }); + + // TODO: get previous val from xds-config service / cookie + if (this._sdksList.length > 0) { + this.current = this._sdksList[0]; + this.curSdkSubject.next(this.current); } - return ''; + + this.sdksSubject.next(this._sdksList); + }); + }); + + // Add listener on sdk creation, deletion and change events + this.xdsSvr.onSdkInstall().subscribe(evMgt => { + this._addSdk(evMgt.sdk); + }); + this.xdsSvr.onSdkRemove().subscribe(evMgt => { + if (evMgt.sdk.status !== 'Not Installed') { + /* tslint:disable:no-console */ + console.log('Error: received event:sdk-remove with invalid status: evMgt=', evMgt); + return; + } + this._delSdk(evMgt.sdk); + }); + + } + + public setCurrent(s: ISdk) { + this.current = s; + } + + public getCurrent(): ISdk { + return this.current; + } + + public getCurrentId(): string { + if (this.current && this.current.id) { + return this.current.id; } + return ''; + } + + public install(sdk: ISdk): Observable { + return this.xdsSvr.installSdk(this.curServerID, sdk.id); + } + + public onInstall(): Observable { + return this.xdsSvr.onSdkInstall(); + } + + public abortInstall(sdk: ISdk): Observable { + return this.xdsSvr.abortInstall(this.curServerID, sdk.id); + } + + public remove(sdk: ISdk): Observable { + return this.xdsSvr.removeSdk(this.curServerID, sdk.id); + } + + /** Private **/ - public add(sdk: ISdk): Observable { - // TODO SEB - return Observable.throw('Not implement yet'); + private _addSdk(sdk: ISdk, noNext?: boolean): ISdk { + + // add new sdk + this._sdksList.push(sdk); + + // sort sdk array + this._sdksList.sort((a, b) => { + if (a.name < b.name) { + return -1; + } + if (a.name > b.name) { + return 1; + } + return 0; + }); + + if (!noNext) { + this.sdksSubject.next(this._sdksList); } - public delete(sdk: ISdk): Observable { - // TODO SEB - return Observable.throw('Not implement yet'); + return sdk; + } + + private _delSdk(sdk: ISdk) { + const idx = this._sdksList.findIndex(item => item.id === sdk.id); + if (idx === -1) { + if (isDevMode) { + /* tslint:disable:no-console */ + console.log('Warning: Try to delete sdk unknown id: sdk=', sdk); + } + return; + } + const delId = this._sdksList[idx].id; + this._sdksList.splice(idx, 1); + if (delId === this.current.id) { + this.setCurrent(this._sdksList[0]); } + this.sdksSubject.next(this._sdksList); + } + } diff --git a/webapp/src/app/@core-xds/services/xdsagent.service.ts b/webapp/src/app/@core-xds/services/xdsagent.service.ts index 94d3dec..9f8385a 100644 --- a/webapp/src/app/@core-xds/services/xdsagent.service.ts +++ b/webapp/src/app/@core-xds/services/xdsagent.service.ts @@ -25,7 +25,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import * as io from 'socket.io-client'; import { AlertService } from './alert.service'; -import { ISdk } from './sdk.service'; +import { ISdk, ISdkManagementMsg } from './sdk.service'; import { ProjectType, ProjectTypeEnum } from './project.service'; // Import RxJs required methods @@ -34,7 +34,7 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import 'rxjs/add/operator/mergeMap'; import 'rxjs/add/observable/of'; -import 'rxjs/add/operator/retryWhen'; +import { ErrorObservable } from 'rxjs/observable/ErrorObservable'; export interface IXDSConfigProject { @@ -133,6 +133,9 @@ export class XDSAgentService { protected projectDel$ = new Subject(); protected projectChange$ = new Subject(); + protected sdkInstall$ = new Subject(); + protected sdkRemove$ = new Subject(); + private baseUrl: string; private wsUrl: string; private httpSessionID: string; @@ -249,7 +252,7 @@ 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) { + if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) { this.alert.info('Project "' + ev.data.label + '" has been added by another tool.'); } } else if (isDevMode) { @@ -261,7 +264,7 @@ export class XDSAgentService { 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) { + if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) { this.alert.info('Project "' + ev.data.label + '" has been deleted by another tool.'); } } else if (isDevMode) { @@ -273,10 +276,36 @@ export class XDSAgentService { if (ev && 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); + console.log('Warning: received event:project-state-change with unkn220own data: ev=', ev); + } + }); + + this.socket.on('event:sdk-install', (ev) => { + if (ev && ev.data && ev.data.sdk) { + const evt = ev.data; + this.sdkInstall$.next(Object.assign({}, evt)); + + if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && evt.sdk.name) { + this.alert.info('SDK "' + evt.sdk.name + '" has been installed by another tool.'); + } + } else if (isDevMode) { + /* tslint:disable:no-console */ + console.log('Warning: received event:sdk-install with unknown data: ev=', ev); } }); + this.socket.on('event:sdk-remove', (ev) => { + if (ev && ev.data && ev.data.sdk) { + const evt = ev.data; + this.sdkRemove$.next(Object.assign({}, evt)); + + if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && evt.sdk.name) { + this.alert.info('SDK "' + evt.sdk.name + '" has been removed by another tool.'); + } + } else if (isDevMode) { + console.log('Warning: received event:sdk-remove with unknown data: ev=', ev); + } + }); } /** @@ -294,6 +323,14 @@ export class XDSAgentService { return this.projectChange$.asObservable(); } + onSdkInstall(): Observable { + return this.sdkInstall$.asObservable(); + } + + onSdkRemove(): Observable { + return this.sdkRemove$.asObservable(); + } + /** ** Misc / Version ***/ @@ -355,10 +392,22 @@ export class XDSAgentService { if (!svr || !svr.connected) { return Observable.of([]); } - return this._get(svr.partialUrl + '/sdks'); } + installSdk(serverID: string, id: string, filename?: string, force?: boolean): Observable { + return this._post(this._getServerUrl(serverID) + '/sdks', { id: id, filename: filename, force: force }); + } + + abortInstall(serverID: string, id: string): Observable { + return this._post(this._getServerUrl(serverID) + '/sdks/abortinstall', { id: id }); + } + + removeSdk(serverID: string, id: string): Observable { + return this._delete(this._getServerUrl(serverID) + '/sdks/' + id); + } + + /*** ** Projects ***/ @@ -420,6 +469,17 @@ export class XDSAgentService { return svr[0]; } + private _getServerUrl(serverID: string): string | ErrorObservable { + const svr = this._getServer(serverID); + if (!svr || !svr.connected) { + if (isDevMode) { + console.log('ERROR: XDS Server unknown: serverID=' + serverID); + } + return Observable.throw('Cannot identify XDS Server'); + } + return svr.partialUrl; + } + private _attachAuthHeaders(options?: any) { options = options || {}; const headers = options.headers || new HttpHeaders(); 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 index 7dd2ec7..4890b91 100644 --- 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 @@ -44,7 +44,7 @@ -
+
diff --git a/webapp/src/app/pages/build/build.component.ts b/webapp/src/app/pages/build/build.component.ts index f937fc3..9a47c35 100644 --- a/webapp/src/app/pages/build/build.component.ts +++ b/webapp/src/app/pages/build/build.component.ts @@ -105,9 +105,10 @@ export class BuildComponent implements OnInit, AfterViewChecked { if (!this.isSetupValid()) { return this.alertSvr.warning('Please select first a valid project.', true); } - - const activeModal = this.modalService.open(BuildSettingsModalComponent, { size: 'lg', container: 'nb-layout' }); - activeModal.componentInstance.modalHeader = 'Large Modal'; + const modal = this.modalService.open( + BuildSettingsModalComponent, + { size: 'lg', container: 'nb-layout' }, + ); } execCmd(cmdName: string) { @@ -134,7 +135,7 @@ export class BuildComponent implements OnInit, AfterViewChecked { cmd = this.curPrj.uiSettings.cmdPopulate; break; case 'exec': - if (this.curPrj.uiSettings.cmdArgs instanceof Array)  { + if (this.curPrj.uiSettings.cmdArgs instanceof Array) { cmd = this.curPrj.uiSettings.cmdArgs.join(' '); } else { cmd = this.curPrj.uiSettings.cmdArgs; diff --git a/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts index 3282d6b..b5b5db0 100644 --- a/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts +++ b/webapp/src/app/pages/confirm/confirm-modal/confirm-modal.component.ts @@ -24,6 +24,7 @@ export enum EType { YesNo = 1, OKCancel, OK, + Cancel, } @Component({ @@ -77,6 +78,10 @@ export class ConfirmModalComponent implements OnInit { this.textBtn = [ 'OK', '', '' ]; break; + case EType.Cancel: + this.textBtn = [ '', 'Cancel', '' ]; + break; + case EType.OKCancel: this.textBtn = [ 'OK', 'Cancel', '' ]; break; diff --git a/webapp/src/app/pages/pages-menu.ts b/webapp/src/app/pages/pages-menu.ts index eb5462c..c212179 100644 --- a/webapp/src/app/pages/pages-menu.ts +++ b/webapp/src/app/pages/pages-menu.ts @@ -56,6 +56,14 @@ export const MENU_ITEMS: NbMenuItem[] = [ title: 'SDKs', icon: 'fa fa-file-archive-o', link: '/pages/sdks', + /* + children: [ + { + title: 'SDKs Management', + link: '/pages/sdks/management', + }, + ], + */ }, { title: 'Boards', diff --git a/webapp/src/app/pages/pages-routing.module.ts b/webapp/src/app/pages/pages-routing.module.ts index beaae51..df28160 100644 --- a/webapp/src/app/pages/pages-routing.module.ts +++ b/webapp/src/app/pages/pages-routing.module.ts @@ -23,6 +23,7 @@ import { PagesComponent } from './pages.component'; import { DashboardComponent } from './dashboard/dashboard.component'; import { ProjectsComponent } from './projects/projects.component'; import { SdksComponent } from './sdks/sdks.component'; +import { SdkManagementComponent } from './sdks/sdk-management/sdk-management.component'; import { BuildComponent } from './build/build.component'; const routes: Routes = [{ @@ -37,6 +38,9 @@ const routes: Routes = [{ }, { path: 'sdks', component: SdksComponent, + }, { + path: 'sdks/management', + component: SdkManagementComponent, }, { path: 'build', component: BuildComponent, 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 adfc1d8..9c2f95f 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 @@ * limitations under the License. */ -import { Component, Input, ViewChild, OnInit } from '@angular/core'; +import { Component, ViewEncapsulation, 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'; @@ -34,6 +34,13 @@ import { XDSConfigService } from '../../../@core-xds/services/xds-config.service @Component({ selector: 'xds-project-add-modal', templateUrl: 'project-add-modal.component.html', + encapsulation: ViewEncapsulation.None, + styles: [` + .modal-xxl .modal-lg { + width: 90%; + max-width:1200px; + } + `], }) export class ProjectAddModalComponent implements OnInit { // @Input('server-id') serverID: string; diff --git a/webapp/src/app/pages/projects/projects.component.ts b/webapp/src/app/pages/projects/projects.component.ts index 13f7a79..3d271e1 100644 --- a/webapp/src/app/pages/projects/projects.component.ts +++ b/webapp/src/app/pages/projects/projects.component.ts @@ -45,7 +45,10 @@ export class ProjectsComponent implements OnInit { } add() { - const activeModal = this.modalService.open(ProjectAddModalComponent, { size: 'lg', container: 'nb-layout' }); - activeModal.componentInstance.modalHeader = 'Large Modal'; + const activeModal = this.modalService.open(ProjectAddModalComponent, { + size: 'lg', + windowClass: 'modal-xxl', + container: 'nb-layout', + }); } } diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html index 0c2787c..2edc0d3 100644 --- a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html +++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html @@ -3,10 +3,10 @@
- {{ labelGet(sdk) }} + {{ sdk.name }}
-
@@ -23,20 +23,25 @@ {{ sdk.id }} + +  Description + {{ sdk.description }} +  Profile {{ sdk.profile }} - -  Architecture - {{ sdk.arch }} -  Version - {{ sdk.version }} +  Architecture + {{ sdk.arch }} + + +  Version + {{ sdk.version }} -  Sdk path - {{ sdk.path}} +  Sdk path + {{ sdk.path}} 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 d41e2fb..997f01d 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 @@ -20,6 +20,8 @@ import { Component, Input, Pipe, PipeTransform } from '@angular/core'; import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service'; import { AlertService } from '../../../@core-xds/services/alert.service'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { ConfirmModalComponent, EType } from '../../confirm/confirm-modal/confirm-modal.component'; @Component({ selector: 'xds-sdk-card', @@ -36,18 +38,32 @@ export class SdkCardComponent { constructor( private alert: AlertService, private sdkSvr: SdkService, + private modalService: NgbModal, ) { } - labelGet(sdk: ISdk) { - return sdk.profile + '-' + sdk.arch + '-' + sdk.version; - } + remove(sdk: ISdk) { + const modal = this.modalService.open(ConfirmModalComponent, { + size: 'lg', + backdrop: 'static', + container: 'nb-layout', + }); + modal.componentInstance.title = 'Confirm SDK deletion'; + modal.componentInstance.type = EType.YesNo; + modal.componentInstance.question = ` + Do you permanently remove '` + sdk.name + `' SDK ? +

+ (SDK ID: ` + sdk.id + ` )`; - delete(sdk: ISdk) { - this.sdkSvr.delete(sdk).subscribe( - res => { }, - err => this.alert.error('ERROR delete: ' + err), - ); + modal.result + .then(res => { + if (res === 'yes') { + this.sdkSvr.remove(sdk).subscribe( + r => { }, + err => this.alert.error(err), + ); + } + }); } } diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts new file mode 100644 index 0000000..c9c518f --- /dev/null +++ b/webapp/src/app/pages/sdks/sdk-management/sdk-install.component.ts @@ -0,0 +1,131 @@ +/** +* @license +* Copyright (C) 2017 "IoT.bzh" +* Author Sebastien Douheret +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { Component, OnInit, Input, ViewChild, AfterViewChecked, ElementRef } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +import { AlertService } from '../../../@core-xds/services/alert.service'; +import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service'; + +@Component({ + selector: 'xds-sdk-install-modal', + template: ` +
+
+ SDK installation +
+ +
+
+ Installation of {{ sdk?.name }} ' +
+
+
+
+ +
+
+ +
+
+ + +
+ `, + styles: [` + .btn { + margin-top: 2em; + min-width: 10em; + } + .textarea-scroll { + font-family: monospace; + width: 100%; + overflow-y: scroll; + `], +}) + +export class SdkInstallComponent implements OnInit { + @Input() sdk; + @ViewChild('scrollOutput') private scrollContainer: ElementRef; + + constructor( + private modalRef: NgbActiveModal, + private sanitizer: DomSanitizer, + private alert: AlertService, + private sdkSvr: SdkService, + ) { } + + onInstallSub: any; + installOutput = ''; + btnName = 'Cancel'; + instStatus = ''; + + ngOnInit() { + this.instStatus = 'in progress...'; + + this.onInstallSub = this.sdkSvr.onInstall().subscribe(ev => { + if (ev.exited) { + this.btnName = 'OK'; + this.instStatus = ' Done. '; + + if (ev.code === 0) { + this.alert.info('SDK ' + ev.sdk.name + ' successfully installed.'); + + } else { + if (ev.sdk.lastError !== '') { + this.alert.error(ev.sdk.lastError); + } else { + this.alert.error('SDK ' + ev.sdk.name + ' installation failed. ' + ev.error); + } + } + + } else { + if (ev.stdout !== '') { + this.installOutput += ev.stdout; + } + if (ev.stderr !== '') { + this.installOutput += ev.stderr; + } + this._scrollToBottom(); + } + }); + } + + onBtnClick(): void { + this.onInstallSub.unsubscribe(); + if (this.btnName === 'Cancel') { + this.btnName = 'OK'; + this.instStatus = ' ABORTED '; + this.sdkSvr.abortInstall(this.sdk).subscribe(r => { }, err => this.alert.error(err)); + } else { + this.modalRef.close(); + } + } + + private _scrollToBottom(): void { + try { + this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight; + } catch (err) { } + } +} diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.html b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.html new file mode 100644 index 0000000..0587194 --- /dev/null +++ b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.html @@ -0,0 +1,26 @@ +
+
+ +
+ + + + + Switch to basic SDKs view + + + +
+ +
+ + + + SDKs Management + + + + + + +
diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.scss b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.scss new file mode 100644 index 0000000..0ba2741 --- /dev/null +++ b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.scss @@ -0,0 +1,83 @@ +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/components/card/card.component.theme'; +// FIXME SEB: remove this ugly hack and use nb-theme +#hack-i { + color: #a4abb3; // nb-theme(color-fg); + font-size: 1.5rem; + margin-right: 1rem; +} + +#hack-span { + font-family: nb-theme(font-secondary); + font-weight: nb-theme(font-weight-bold); + color: #2a2a2a; // nb-theme(color-fg-heading); + text-transform: uppercase; +} + +@include nb-install-component() { + nb-card-body { + display: flex; + align-items: center; + } + .action-groups-header { + flex-basis: 20%; + color: nb-theme(card-header-fg-heading); + font-family: nb-theme(card-header-font-family); + font-size: nb-theme(card-header-font-size); + font-weight: nb-theme(card-header-font-weight); + } + .nb-actions { + flex-basis: 80%; + } + .right { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + order: 1; + flex-direction: row-reverse; + } + nb-actions > nb-action { + padding: 0; + } + nb-action { + i { + color: nb-theme(color-fg); + font-size: 1.5rem; + margin-right: 1rem; + } + span { + font-family: nb-theme(font-secondary); + font-weight: nb-theme(font-weight-bold); + color: nb-theme(color-fg-heading); + text-transform: uppercase; + } + button { + margin: 0 auto; + padding: 0; + cursor: pointer; + border: none; + background: none; + display: flex; + align-items: center; + &:focus { + box-shadow: none; + outline: none; + } + } + } +} + +td.ng2-smart-actions { + height: auto !important; +} + +nav.ng2-smart-pagination-nav { + margin-left: auto; + margin-right: auto; +} + +.ng2-smart-pagination .page-link.page-link-prev, +.page-link.page-link-next { + font-size: 1em !important; +} diff --git a/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.ts b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.ts new file mode 100644 index 0000000..c885238 --- /dev/null +++ b/webapp/src/app/pages/sdks/sdk-management/sdk-management.component.ts @@ -0,0 +1,168 @@ +/** +* @license +* Copyright (C) 2017 "IoT.bzh" +* Author Sebastien Douheret +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { Component, ViewEncapsulation, OnInit, isDevMode } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { LocalDataSource } from 'ng2-smart-table'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { ConfirmModalComponent, EType } from '../../confirm/confirm-modal/confirm-modal.component'; +import { SdkInstallComponent } from './sdk-install.component'; + +import { AlertService } from '../../../@core-xds/services/alert.service'; +import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service'; +import { ISdkMessage } from '../../../@core-xds/services/xdsagent.service'; + +interface ISdkMgt extends ISdk { + link: string; + selected: boolean; +} + +/* + * FIXME / TODO: + * - support install of multi SDKs (see settings.selectMode: 'multi') + * - add Uninstall button (use delete) + * - add (mouseover) to display description, date, size, ... + */ + +@Component({ + selector: 'xds-sdk-management', + templateUrl: 'sdk-management.component.html', + styleUrls: ['sdk-management.component.scss'], + encapsulation: ViewEncapsulation.None, +}) + +export class SdkManagementComponent implements OnInit { + + sdks$: Observable; + sdks: ISdkMgt[]; + source: LocalDataSource = new LocalDataSource(); + + settings = { + mode: 'external', + actions: { + add: false, + edit: false, + delete: false, // TODO, add delete == uninstall + custom: [ + { name: 'install', title: '' }, + ], + }, + delete: { + deleteButtonContent: '', + confirmDelete: true, + }, + columns: { + name: { title: 'Name', editable: false }, + profile: { title: 'Profile', editable: false, filter: {} }, + arch: { title: 'Architecture', editable: false, filter: {} }, + version: { title: 'Version', editable: false }, + // TODO: add status when delete supported: + // status: { title: 'Status', editable: false }, + link: { title: 'Link', editable: false, type: 'html', filter: false, width: '2%' }, + }, + }; + + constructor( + private alert: AlertService, + private sdkSvr: SdkService, + private modalService: NgbModal, + ) { } + + ngOnInit() { + this.sdkSvr.Sdks$.subscribe(sdks => { + const profMap = {}; + const archMap = {}; + this.sdks = []; + sdks.forEach(s => { + // only display not installed SDK + if (s.status !== 'Not Installed') { + return; + } + profMap[s.profile] = s.profile; + archMap[s.arch] = s.arch; + + const sm = s; + sm.selected = false; + if (s.url !== '') { + sm.link = ''; + } + this.sdks.push(sm); + + }); + + // Add text box filter for Profile and Arch columns + const profList = []; Object.keys(profMap).forEach(a => profList.push({ value: a, title: a })); + this.settings.columns.profile.filter = { + type: 'list', + config: { selectText: 'Select...', list: profList }, + }; + + const archList = []; Object.keys(archMap).forEach(a => archList.push({ value: a, title: a })); + this.settings.columns.arch.filter = { + type: 'list', + config: { selectText: 'Select...', list: archList }, + }; + + // update sources + this.source.load(this.sdks); + + }); + } + + onCustom(event): void { + if (event.action === 'install') { + const sdk = event.data; + const modal = this.modalService.open(ConfirmModalComponent, { + size: 'lg', + backdrop: 'static', + container: 'nb-layout', + }); + modal.componentInstance.title = 'Confirm SDK installation'; + modal.componentInstance.type = EType.YesNo; + modal.componentInstance.question = ` + Please confirm installation of ` + sdk.name + `' SDK ?
+
+ (size: ` + sdk.size + `, date: ` + sdk.date + `)`; + + modal.result.then(res => { + if (res === 'yes') { + // Request installation + this.sdkSvr.install(sdk).subscribe(r => { }, err => this.alert.error(err)); + + const modalInstall = this.modalService.open(SdkInstallComponent, { + size: 'lg', + backdrop: 'static', + container: 'nb-layout', + }); + modalInstall.componentInstance.sdk = sdk; + } + }); + + + } else if (event.action === 'uninstall') { + // TODO + + } else { + /* tslint:disable:no-console */ + if (isDevMode) { + console.error('onCustom: unknown event action: ', event); + } + } + } + +} diff --git a/webapp/src/app/pages/sdks/sdks.component.html b/webapp/src/app/pages/sdks/sdks.component.html index 94c2501..9f9204f 100644 --- a/webapp/src/app/pages/sdks/sdks.component.html +++ b/webapp/src/app/pages/sdks/sdks.component.html @@ -4,10 +4,10 @@
- + + + SDKs Management +
@@ -20,7 +20,10 @@
-
- -
+ + +
+ +
+ diff --git a/webapp/src/app/pages/sdks/sdks.component.scss b/webapp/src/app/pages/sdks/sdks.component.scss index 92a8807..a125e8d 100644 --- a/webapp/src/app/pages/sdks/sdks.component.scss +++ b/webapp/src/app/pages/sdks/sdks.component.scss @@ -31,7 +31,7 @@ nb-action { i { color: nb-theme(color-fg); - font-size: 2.5rem; + font-size: 1.5rem; margin-right: 1rem; } span { diff --git a/webapp/src/app/pages/sdks/sdks.component.ts b/webapp/src/app/pages/sdks/sdks.component.ts index f9e31a4..12d2f71 100644 --- a/webapp/src/app/pages/sdks/sdks.component.ts +++ b/webapp/src/app/pages/sdks/sdks.component.ts @@ -20,7 +20,6 @@ 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 { SdkService, ISdk } from '../../@core-xds/services/sdk.service'; @@ -44,10 +43,7 @@ export class SdksComponent implements OnInit { this.sdks$ = this.sdkSvr.Sdks$; } - add() { - /* SEB TODO - const activeModal = this.modalService.open(SdkAddModalComponent, { size: 'lg', container: 'nb-layout' }); - activeModal.componentInstance.modalHeader = 'Large Modal'; - */ + isVisible(sdk: ISdk) { + return sdk.status === 'Installed' || sdk.status === 'Installing'; } } diff --git a/webapp/src/app/pages/sdks/sdks.module.ts b/webapp/src/app/pages/sdks/sdks.module.ts index d717d86..17ede0e 100644 --- a/webapp/src/app/pages/sdks/sdks.module.ts +++ b/webapp/src/app/pages/sdks/sdks.module.ts @@ -21,20 +21,23 @@ 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 { SdkManagementComponent } from './sdk-management/sdk-management.component'; +import { SdkInstallComponent } from './sdk-management/sdk-install.component'; +import { Ng2SmartTableModule } from 'ng2-smart-table'; @NgModule({ imports: [ ThemeModule, + Ng2SmartTableModule, ], declarations: [ SdksComponent, SdkCardComponent, - // SdkAddModalComponent, + SdkManagementComponent, + SdkInstallComponent, ], entryComponents: [ - // SdkAddModalComponent, + SdkInstallComponent, ], }) export class SdksModule { } -- cgit 1.2.3-korg