New dashboard improvements.

- add build buttons
- add build settings support and backup into project clientData
- improved async alert
- fixed project dropdown

Signed-off-by: Sebastien Douheret <sebastien.douheret@iot.bzh>

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">&times;</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 { }