Added target and terminal support in Dashboard

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

23 files changed, 1586 insertions, 49 deletions

diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json
index ade79a2..9aa0157 100644
--- a/webapp/.angular-cli.json
+++ b/webapp/.angular-cli.json
@@ -27,6 +27,7 @@
         "../node_modules/font-awesome-animation/dist/font-awesome-animation.min.css",
         "../node_modules/nebular-icons/scss/nebular-icons.scss",
         "../node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
+        "../node_modules/xterm/dist/xterm.css",
         "./app/@theme/styles/styles.scss"
       ],
       "scripts": [
diff --git a/webapp/package.json b/webapp/package.json
index a96586c..8176cf2 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -72,6 +72,7 @@
     "tether": "1.4.0",
     "typeface-exo": "0.0.22",
     "web-animations-js": "2.2.5",
+    "xterm": "^3.0.0",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
diff --git a/webapp/src/app/@core-xds/services/@core-xds-services.module.ts b/webapp/src/app/@core-xds/services/@core-xds-services.module.ts
index 7c380eb..a3a67c5 100644
--- a/webapp/src/app/@core-xds/services/@core-xds-services.module.ts
+++ b/webapp/src/app/@core-xds/services/@core-xds-services.module.ts
@@ -23,6 +23,7 @@ import { AlertService } from './alert.service';
 import { ConfigService } from './config.service';
 import { ProjectService } from './project.service';
 import { SdkService } from './sdk.service';
+import { TargetService } from './target.service';
 import { UserService } from './users.service';
 import { XDSConfigService } from './xds-config.service';
 import { XDSAgentService } from './xdsagent.service';
@@ -32,6 +33,7 @@ const SERVICES = [
   ConfigService,
   ProjectService,
   SdkService,
+  TargetService,
   UserService,
   XDSConfigService,
   XDSAgentService,
diff --git a/webapp/src/app/@core-xds/services/target.service.ts b/webapp/src/app/@core-xds/services/target.service.ts
new file mode 100644
index 0000000..9c995ea
--- /dev/null
+++ b/webapp/src/app/@core-xds/services/target.service.ts
@@ -0,0 +1,285 @@
+/**
+* @license
+* Copyright (C) 2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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 { Injectable, SecurityContext, isDevMode } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+import { XDSAgentService, IXDSTargetConfig, IXDSTargetTerminal } from '../services/xdsagent.service';
+
+/* FIXME: syntax only compatible with TS>2.4.0
+export enum TargetTypeEnum {
+    UNSET = '',
+    STANDARD: 'standard',
+}
+*/
+export type TargetTypeEnum = '' | 'standard';
+export const TargetType = {
+  UNSET: <TargetTypeEnum>'',
+  STANDARD: <TargetTypeEnum>'standard',
+};
+
+export const TargetTypes = [
+  { value: TargetType.STANDARD, display: 'Standard' },
+];
+
+export const TargetStatus = {
+  ErrorConfig: 'ErrorConfig',
+  Disable: 'Disable',
+  Enable: 'Enable',
+};
+
+export type TerminalTypeEnum = '' | 'ssh';
+export const TerminalType = {
+  UNSET: <TerminalTypeEnum>'',
+  SSH: <TerminalTypeEnum>'ssh',
+};
+
+export interface ITarget extends IXDSTargetConfig {
+  isUsable?: boolean;
+}
+
+export interface ITerminal extends IXDSTargetTerminal {
+  targetID?: string;
+}
+
+export interface ITerminalOutput {
+  termID: string;
+  timestamp: string;
+  stdout: string;
+  stderr: string;
+}
+
+export interface ITerminalExit {
+  termID: string;
+  timestamp: string;
+  code: number;
+  error: string;
+}
+
+@Injectable()
+export class TargetService {
+  public targets$: Observable<ITarget[]>;
+  public curTarget$: Observable<ITarget>;
+  public terminalOutput$ = <Subject<ITerminalOutput>>new Subject();
+  public terminalExit$ = <Subject<ITerminalExit>>new Subject();
+
+  private _tgtsList: ITarget[] = [];
+  private tgtsSubject = <BehaviorSubject<ITarget[]>>new BehaviorSubject(this._tgtsList);
+  private _current: ITarget;
+  private curTgtSubject = <BehaviorSubject<ITarget>>new BehaviorSubject(this._current);
+  private curServerID;
+  private termSocket: SocketIOClient.Socket;
+
+  constructor(private xdsSvr: XDSAgentService) {
+    this._current = null;
+    this.targets$ = this.tgtsSubject.asObservable();
+    this.curTarget$ = this.curTgtSubject.asObservable();
+
+    this.xdsSvr.XdsConfig$.subscribe(cfg => {
+      if (!cfg || cfg.servers.length < 1) {
+        return;
+      }
+
+      // FIXME support multiple server
+      this.curServerID = cfg.servers[0].id;
+
+      // Load initial targets list
+      this.xdsSvr.getTargets(this.curServerID).subscribe((targets) => {
+        this._tgtsList = [];
+        targets.forEach(p => {
+          this._addTarget(p, true);
+        });
+
+        // TODO: get previous val from xds-config service / cookie
+        if (this._tgtsList.length > 0) {
+          this._current = this._tgtsList[0];
+          this.curTgtSubject.next(this._current);
+        }
+
+        this.tgtsSubject.next(this._tgtsList);
+      });
+    });
+
+    // Add listener on targets creation, deletion and change events
+    this.xdsSvr.onTargetAdd().subscribe(tgt => this._addTarget(tgt));
+    this.xdsSvr.onTargetDelete().subscribe(tgt => this._delTarget(tgt));
+    this.xdsSvr.onTargetChange().subscribe(tgt => this._updateTarget(tgt));
+
+    // Register events to forward terminal Output and Exit
+    this.xdsSvr.onSocketConnect().subscribe(socket => {
+      this.termSocket = socket;
+
+      // Handle terminal output
+      socket.on('term:output', data => {
+        const termOut = <ITerminalOutput>{
+          termID: data.termID,
+          timestamp: data.timestamp,
+          stdout: atob(data.stdout),
+          stderr: atob(data.stderr),
+        };
+        this.terminalOutput$.next(termOut);
+      });
+
+      // Handle terminal exit event
+      socket.on('term:exit', data => {
+        this.terminalExit$.next(Object.assign({}, <ITerminalExit>data));
+      });
+
+    });
+  }
+
+  setCurrent(p: ITarget): ITarget | undefined {
+    if (!p) {
+      this._current = null;
+      return undefined;
+    }
+    return this.setCurrentById(p.id);
+  }
+
+  setCurrentById(id: string): ITarget | undefined {
+    const p = this._tgtsList.find(item => item.id === id);
+    if (p) {
+      this._current = p;
+      this.curTgtSubject.next(this._current);
+    }
+    return this._current;
+  }
+
+  getCurrent(): ITarget {
+    return this._current;
+  }
+
+  getTargetById(id: string): ITarget | undefined {
+    const t = this._tgtsList.find(item => item.id === id);
+    return t;
+  }
+
+  add(tgt: ITarget): Observable<ITarget> {
+    return this.xdsSvr.addTarget(this.curServerID, tgt);
+  }
+
+  delete(tgt: ITarget): Observable<ITarget> {
+    const idx = this._getTargetIdx(tgt.id);
+    const delTgt = tgt;
+    if (idx === -1) {
+      throw new Error('Invalid target id (id=' + tgt.id + ')');
+    }
+    return this.xdsSvr.deleteTarget(this.curServerID, tgt.id)
+      .map(res => delTgt);
+  }
+
+  setSettings(tgt: ITarget): Observable<ITarget> {
+    return this.xdsSvr.updateTarget(this.curServerID, tgt);
+  }
+
+  terminalOpen(tgtID: string, termID: string, cfg?: IXDSTargetTerminal): Observable<IXDSTargetTerminal> {
+    if (termID === '' || termID === undefined) {
+      // create a new terminal when no termID is set
+      if (cfg === undefined) {
+        cfg = <IXDSTargetTerminal>{
+          name: 'ssh to ' + this.getTargetById(tgtID).name,
+          type: TerminalType.SSH,
+        };
+      }
+      return this.xdsSvr.createTerminalTarget(this.curServerID, tgtID, cfg)
+        .flatMap(res => {
+          return this.xdsSvr.openTerminalTarget(this.curServerID, tgtID, res.id);
+        });
+    } else {
+      return this.xdsSvr.openTerminalTarget(this.curServerID, tgtID, termID);
+    }
+  }
+
+  terminalClose(tgtID, termID: string): Observable<IXDSTargetTerminal> {
+    return this.xdsSvr.closeTerminalTarget(this.curServerID, tgtID, termID);
+  }
+
+  terminalWrite(data: string) {
+    if (this.termSocket) {
+      this.termSocket.emit('term:input', btoa(data));
+    }
+  }
+
+  terminalResize(tgtID, termID: string, cols, rows: number): Observable<IXDSTargetTerminal> {
+    return this.xdsSvr.resizeTerminalTarget(this.curServerID, tgtID, termID, cols, rows);
+  }
+
+  /***  Private functions  ***/
+
+  private _isUsableTarget(p) {
+    return p && (p.status === TargetStatus.Enable);
+  }
+
+  private _getTargetIdx(id: string): number {
+    return this._tgtsList.findIndex((item) => item.id === id);
+  }
+
+  private _addTarget(tgt: ITarget, noNext?: boolean): ITarget {
+
+    tgt.isUsable = this._isUsableTarget(tgt);
+
+    // add new target
+    this._tgtsList.push(tgt);
+
+    // sort target array
+    this._tgtsList.sort((a, b) => {
+      if (a.name < b.name) {
+        return -1;
+      }
+      if (a.name > b.name) {
+        return 1;
+      }
+      return 0;
+    });
+
+    if (!noNext) {
+      this.tgtsSubject.next(this._tgtsList);
+    }
+
+    return tgt;
+  }
+
+  private _delTarget(tgt: ITarget) {
+    const idx = this._tgtsList.findIndex(item => item.id === tgt.id);
+    if (idx === -1) {
+      if (isDevMode) {
+        /* tslint:disable:no-console */
+        console.log('Warning: Try to delete target unknown id: tgt=', tgt);
+      }
+      return;
+    }
+    const delId = this._tgtsList[idx].id;
+    this._tgtsList.splice(idx, 1);
+    if (delId === this._current.id) {
+      this.setCurrent(this._tgtsList[0]);
+    }
+    this.tgtsSubject.next(this._tgtsList);
+  }
+
+  private _updateTarget(tgt: ITarget) {
+    const i = this._getTargetIdx(tgt.id);
+    if (i >= 0) {
+      this._tgtsList[i].status = tgt.status;
+      this._tgtsList[i].isUsable = this._isUsableTarget(tgt);
+      this.tgtsSubject.next(this._tgtsList);
+    }
+  }
+
+}
diff --git a/webapp/src/app/@core-xds/services/xdsagent.service.ts b/webapp/src/app/@core-xds/services/xdsagent.service.ts
index 033185b..adbee98 100644
--- a/webapp/src/app/@core-xds/services/xdsagent.service.ts
+++ b/webapp/src/app/@core-xds/services/xdsagent.service.ts
@@ -27,6 +27,7 @@ import * as io from 'socket.io-client';
 import { AlertService } from './alert.service';
 import { ISdk, ISdkManagementMsg } from './sdk.service';
 import { ProjectType, ProjectTypeEnum } from './project.service';
+import { TargetType, TargetTypeEnum } from './target.service';
 
 // Import RxJs required methods
 import 'rxjs/add/operator/map';
@@ -65,6 +66,25 @@ export interface IXDSProjectConfig {
   clientData?: string;
 }
 
+/** Targets **/
+export interface IXDSTargetConfig {
+  id?: string;
+  name: string;
+  type: TargetTypeEnum;
+  ip: string;
+  status?: string;
+  terms?: IXDSTargetTerminal[];
+}
+
+export interface IXDSTargetTerminal {
+  id?: string;
+  type: string;
+  name: string;
+  status?: string;
+  cols?: number;
+  rows?: number;
+}
+
 export interface IXDSVer {
   id: string;
   version: string;
@@ -124,11 +144,15 @@ export interface IAgentStatus {
 @Injectable()
 export class XDSAgentService {
 
+  public Socket: SocketIOClient.Socket;
   public XdsConfig$: Observable<IXDSConfig>;
   public Status$: Observable<IAgentStatus>;
   public CmdOutput$ = <Subject<ICmdOutput>>new Subject();
   public CmdExit$ = <Subject<ICmdExit>>new Subject();
 
+  protected sockConnect$ = new Subject<SocketIOClient.Socket>();
+  protected sockDisconnect$ = new Subject<SocketIOClient.Socket>();
+
   protected projectAdd$ = new Subject<IXDSProjectConfig>();
   protected projectDel$ = new Subject<IXDSProjectConfig>();
   protected projectChange$ = new Subject<IXDSProjectConfig>();
@@ -138,6 +162,15 @@ export class XDSAgentService {
   protected sdkChange$ = new Subject<ISdk>();
   protected sdkManagement$ = new Subject<ISdkManagementMsg>();
 
+  protected targetAdd$ = new Subject<IXDSTargetConfig>();
+  protected targetDel$ = new Subject<IXDSTargetConfig>();
+  protected targetChange$ = new Subject<IXDSTargetConfig>();
+
+  protected targetTerminalAdd$ = new Subject<IXDSTargetTerminal>();
+  protected targetTerminalDel$ = new Subject<IXDSTargetTerminal>();
+  protected targetTerminalChange$ = new Subject<IXDSTargetTerminal>();
+
+  private _socket: SocketIOClient.Socket;
   private baseUrl: string;
   private wsUrl: string;
   private httpSessionID: string;
@@ -147,9 +180,9 @@ export class XDSAgentService {
   private configSubject = <BehaviorSubject<IXDSConfig>>new BehaviorSubject(this._config);
   private statusSubject = <BehaviorSubject<IAgentStatus>>new BehaviorSubject(this._status);
 
-  private socket: SocketIOClient.Socket;
 
-  constructor( @Inject(DOCUMENT) private document: Document,
+
+  constructor(@Inject(DOCUMENT) private document: Document,
     private http: HttpClient, private alert: AlertService) {
 
     this.XdsConfig$ = this.configSubject.asObservable();
@@ -161,22 +194,22 @@ export class XDSAgentService {
     // 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);
-      });
+        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) {
@@ -201,45 +234,39 @@ export class XDSAgentService {
   }
 
   private _handleIoSocket() {
-    this.socket = io(this.wsUrl, { transports: ['websocket'] });
+    this.Socket = this._socket = io(this.wsUrl, { transports: ['websocket'] });
 
-    this.socket.on('connect_error', (res) => {
+    this._socket.on('connect_error', (res) => {
       this._NotifyXdsAgentState(false);
       console.error('XDS Agent WebSocket Connection error !');
     });
 
-    this.socket.on('connect', (res) => {
+    this._socket.on('connect', (res) => {
       this._NotifyXdsAgentState(true);
+      this.sockConnect$.next(this._socket);
     });
 
-    this.socket.on('disconnection', (res) => {
+    this._socket.on('disconnection', (res) => {
       this._NotifyXdsAgentState(false);
       this.alert.error('WS disconnection: ' + res);
+      this.sockDisconnect$.next(this._socket);
     });
 
-    this.socket.on('error', (err) => {
+    this._socket.on('error', (err) => {
       console.error('WS error:', err);
     });
 
     // XDS Events decoding
 
-    this.socket.on('make:output', data => {
-      this.CmdOutput$.next(Object.assign({}, <ICmdOutput>data));
-    });
-
-    this.socket.on('make:exit', data => {
-      this.CmdExit$.next(Object.assign({}, <ICmdExit>data));
-    });
-
-    this.socket.on('exec:output', data => {
+    this._socket.on('exec:output', data => {
       this.CmdOutput$.next(Object.assign({}, <ICmdOutput>data));
     });
 
-    this.socket.on('exec:exit', data => {
+    this._socket.on('exec:exit', data => {
       this.CmdExit$.next(Object.assign({}, <ICmdExit>data));
     });
 
-    this.socket.on('event:server-config', ev => {
+    this._socket.on('event:server-config', ev => {
       if (ev && ev.data) {
         const cfg: IXDServerCfg = ev.data;
         const idx = this._config.servers.findIndex(el => el.id === cfg.id);
@@ -253,7 +280,7 @@ export class XDSAgentService {
 
     /*** Project events ****/
 
-    this.socket.on('event:project-add', (ev) => {
+    this._socket.on('event:project-add', (ev) => {
       if (ev && ev.data && ev.data.id) {
         this.projectAdd$.next(Object.assign({}, ev.data));
         if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
@@ -265,7 +292,7 @@ export class XDSAgentService {
       }
     });
 
-    this.socket.on('event:project-delete', (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 !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
@@ -276,17 +303,17 @@ export class XDSAgentService {
       }
     });
 
-    this.socket.on('event:project-state-change', ev => {
+    this._socket.on('event:project-state-change', ev => {
       if (ev && ev.data) {
         this.projectChange$.next(Object.assign({}, ev.data));
       } else if (isDevMode) {
-        console.log('Warning: received event:project-state-change with unkn220own data: ev=', ev);
+        console.log('Warning: received event:project-state-change with unknown data: ev=', ev);
       }
     });
 
     /*** SDK Events ***/
 
-    this.socket.on('event:sdk-add', (ev) => {
+    this._socket.on('event:sdk-add', (ev) => {
       if (ev && ev.data && ev.data.id) {
         const evt = <ISdk>ev.data;
         this.sdkAdd$.next(Object.assign({}, evt));
@@ -299,7 +326,7 @@ export class XDSAgentService {
       }
     });
 
-    this.socket.on('event:sdk-remove', (ev) => {
+    this._socket.on('event:sdk-remove', (ev) => {
       if (ev && ev.data && ev.data.id) {
         const evt = <ISdk>ev.data;
         this.sdkRemove$.next(Object.assign({}, evt));
@@ -312,7 +339,7 @@ export class XDSAgentService {
       }
     });
 
-    this.socket.on('event:sdk-state-change', (ev) => {
+    this._socket.on('event:sdk-state-change', (ev) => {
       if (ev && ev.data && ev.data.id) {
         const evt = <ISdk>ev.data;
         this.sdkChange$.next(Object.assign({}, evt));
@@ -322,8 +349,7 @@ export class XDSAgentService {
       }
     });
 
-
-    this.socket.on('event:sdk-management', (ev) => {
+    this._socket.on('event:sdk-management', (ev) => {
       if (ev && ev.data && ev.data.sdk) {
         const evt = <ISdkManagementMsg>ev.data;
         this.sdkManagement$.next(Object.assign({}, evt));
@@ -337,11 +363,86 @@ export class XDSAgentService {
       }
     });
 
+    /*** Target events ****/
+
+    this._socket.on('event:target-add', (ev) => {
+      if (ev && ev.data && ev.data.id) {
+        this.targetAdd$.next(Object.assign({}, ev.data));
+        if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
+          this.alert.info('Target "' + ev.data.label + '" has been added by another tool.');
+        }
+      } else if (isDevMode) {
+        /* tslint:disable:no-console */
+        console.log('Warning: received event:target-add with unknown data: ev=', ev);
+      }
+    });
+
+    this._socket.on('event:target-remove', (ev) => {
+      if (ev && ev.data && ev.data.id) {
+        this.targetDel$.next(Object.assign({}, ev.data));
+        if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
+          this.alert.info('Target "' + ev.data.label + '" has been deleted by another tool.');
+        }
+      } else if (isDevMode) {
+        console.log('Warning: received event:target-remove with unknown data: ev=', ev);
+      }
+    });
+
+    this._socket.on('event:target-state-change', ev => {
+      if (ev && ev.data) {
+        this.targetChange$.next(Object.assign({}, ev.data));
+      } else if (isDevMode) {
+        console.log('Warning: received event:target-state-change with unknown data: ev=', ev);
+      }
+    });
+
+    /*** Target Terminal events ****/
+
+    this._socket.on('event:target-terminal-add', (ev) => {
+      if (ev && ev.data && ev.data.id) {
+        this.targetTerminalAdd$.next(Object.assign({}, ev.data));
+        if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
+          this.alert.info('Target terminal "' + ev.data.label + '" has been added by another tool.');
+        }
+      } else if (isDevMode) {
+        /* tslint:disable:no-console */
+        console.log('Warning: received event:target-terminal-add with unknown data: ev=', ev);
+      }
+    });
+
+    this._socket.on('event:target-terminal-delete', (ev) => {
+      if (ev && ev.data && ev.data.id) {
+        this.targetTerminalDel$.next(Object.assign({}, ev.data));
+        if (ev.sessionID !== '' && ev.sessionID !== this.httpSessionID && ev.data.label) {
+          this.alert.info('Target terminal "' + ev.data.label + '" has been deleted by another tool.');
+        }
+      } else if (isDevMode) {
+        console.log('Warning: received event:target-terminal-delete with unknown data: ev=', ev);
+      }
+    });
+
+    this._socket.on('event:target-terminal-state-change', ev => {
+      if (ev && ev.data) {
+        this.targetTerminalChange$.next(Object.assign({}, ev.data));
+      } else if (isDevMode) {
+        console.log('Warning: received event:target-terminal-state-change with unknown data: ev=', ev);
+      }
+    });
+
   }
 
   /**
   ** Events registration
   ***/
+
+  onSocketConnect(): Observable<any> {
+    return this.sockConnect$.asObservable();
+  }
+
+  onSocketDisconnect(): Observable<any> {
+    return this.sockDisconnect$.asObservable();
+  }
+
   onProjectAdd(): Observable<IXDSProjectConfig> {
     return this.projectAdd$.asObservable();
   }
@@ -370,6 +471,30 @@ export class XDSAgentService {
     return this.sdkManagement$.asObservable();
   }
 
+  onTargetAdd(): Observable<IXDSTargetConfig> {
+    return this.targetAdd$.asObservable();
+  }
+
+  onTargetDelete(): Observable<IXDSTargetConfig> {
+    return this.targetDel$.asObservable();
+  }
+
+  onTargetChange(): Observable<IXDSTargetConfig> {
+    return this.targetChange$.asObservable();
+  }
+
+  onTargetTerminalAdd(): Observable<IXDSTargetTerminal> {
+    return this.targetTerminalAdd$.asObservable();
+  }
+
+  onTargetTerminalDelete(): Observable<IXDSTargetTerminal> {
+    return this.targetTerminalDel$.asObservable();
+  }
+
+  onTargetTerminalChange(): Observable<IXDSTargetTerminal> {
+    return this.targetTerminalChange$.asObservable();
+  }
+
   /**
   ** Misc / Version
   ***/
@@ -485,6 +610,61 @@ export class XDSAgentService {
       });
   }
 
+
+  /***
+  ** Targets
+  ***/
+  getTargets(serverID: string): Observable<IXDSTargetConfig[]> {
+    return this._get(this._getServerUrl(serverID) + '/targets');
+  }
+
+  addTarget(serverID: string, cfg: IXDSTargetConfig): Observable<IXDSTargetConfig> {
+    return this._post(this._getServerUrl(serverID) + '/targets', cfg);
+  }
+
+  deleteTarget(serverID: string, id: string): Observable<IXDSTargetConfig> {
+    return this._delete(this._getServerUrl(serverID) + '/targets/' + id);
+  }
+
+  updateTarget(serverID: string, cfg: IXDSTargetConfig): Observable<IXDSTargetConfig> {
+    return this._put(this._getServerUrl(serverID) + '/targets/' + cfg.id, cfg);
+  }
+
+  /***
+  ** Terminals
+  ***/
+  getTerminalsTarget(serverID, targetID: string): Observable<IXDSTargetTerminal[]> {
+    return this._get(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals');
+  }
+
+  getTerminalTarget(serverID, targetID, termID: string): Observable<IXDSTargetTerminal> {
+    return this._get(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals/' + termID);
+  }
+
+  createTerminalTarget(serverID, targetID: string, cfg: IXDSTargetTerminal): Observable<IXDSTargetTerminal> {
+    return this._post(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals', cfg);
+  }
+
+  updateTerminalTarget(serverID, targetID: string, cfg: IXDSTargetTerminal): Observable<IXDSTargetTerminal> {
+    if (cfg && (cfg.id !== '' || cfg.id !== undefined)) {
+      return this._put(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals/' + cfg.id, cfg);
+    }
+    return Observable.throw('Undefined terminal id');
+  }
+
+  openTerminalTarget(serverID, targetID, termID: string): Observable<IXDSTargetTerminal> {
+    return this._post(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals/' + termID + '/open', {});
+  }
+
+  closeTerminalTarget(serverID, targetID, termID: string): Observable<IXDSTargetTerminal> {
+    return this._post(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals/' + termID + '/close', {});
+  }
+
+  resizeTerminalTarget(serverID, targetID, termID: string, cols, rows: number): Observable<IXDSTargetTerminal> {
+    return this._post(this._getServerUrl(serverID) + '/targets/' + targetID + '/terminals/' + termID + '/resize',
+      { cols: cols, rows: rows });
+  }
+
   /**
   ** Private functions
   ***/
@@ -493,10 +673,10 @@ export class XDSAgentService {
     // Register to all existing events
     this._post('/events/register', { 'name': 'event:all' })
       .subscribe(
-      res => { },
-      error => {
-        this.alert.error('ERROR while registering to all events: ' + error);
-      },
+        res => { },
+        error => {
+          this.alert.error('ERROR while registering to all events: ' + error);
+        },
     );
   }
 
diff --git a/webapp/src/app/pages/pages-menu.ts b/webapp/src/app/pages/pages-menu.ts
index 1e4839d..86884bc 100644
--- a/webapp/src/app/pages/pages-menu.ts
+++ b/webapp/src/app/pages/pages-menu.ts
@@ -66,9 +66,18 @@ export const MENU_ITEMS: NbMenuItem[] = [
     */
   },
   {
-    title: 'Boards',
+    title: 'Targets',
     icon: 'fa fa-microchip',
+    link: '/pages/targets',
     children: [
+      {
+        title: 'List',
+        link: '/pages/targets/list',
+      },
+      {
+        title: 'Terminal',
+        link: '/pages/targets/term',
+      },
     ],
   },
   {
diff --git a/webapp/src/app/pages/pages-routing.module.ts b/webapp/src/app/pages/pages-routing.module.ts
index 7eeccd0..655dea2 100644
--- a/webapp/src/app/pages/pages-routing.module.ts
+++ b/webapp/src/app/pages/pages-routing.module.ts
@@ -24,6 +24,8 @@ 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 { TargetsComponent } from './targets/targets.component';
+import { TerminalsComponent } from './targets/terminals/terminals.component';
 import { BuildComponent } from './build/build.component';
 
 const routes: Routes = [{
@@ -45,6 +47,12 @@ const routes: Routes = [{
     path: 'build',
     component: BuildComponent,
   }, {
+    path: 'targets/list',
+    component: TargetsComponent,
+  }, {
+    path: 'targets/term',
+    component: TerminalsComponent,
+  }, {
     path: 'config',
     loadChildren: './config/config.module#ConfigModule',
   },
diff --git a/webapp/src/app/pages/pages.module.ts b/webapp/src/app/pages/pages.module.ts
index 42a9a84..55fe61a 100644
--- a/webapp/src/app/pages/pages.module.ts
+++ b/webapp/src/app/pages/pages.module.ts
@@ -26,6 +26,7 @@ import { DashboardModule } from './dashboard/dashboard.module';
 import { BuildModule } from './build/build.module';
 import { ProjectsModule } from './projects/projects.module';
 import { SdksModule } from './sdks/sdks.module';
+import { TargetsModule } from './targets/targets.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { ThemeModule } from '../@theme/theme.module';
@@ -46,6 +47,7 @@ const PAGES_COMPONENTS = [
     ProjectsModule,
     SdksModule,
     ToasterModule,
+    TargetsModule,
   ],
   declarations: [
     ...PAGES_COMPONENTS,
diff --git a/webapp/src/app/pages/projects/projects.module.ts b/webapp/src/app/pages/projects/projects.module.ts
index 7c4b0a8..54255f8 100644
--- a/webapp/src/app/pages/projects/projects.module.ts
+++ b/webapp/src/app/pages/projects/projects.module.ts
@@ -23,7 +23,6 @@ import { ProjectsComponent } from './projects.component';
 import { ProjectCardComponent, ProjectReadableTypePipe } from './project-card/project-card.component';
 import { ProjectAddModalComponent } from './project-add-modal/project-add-modal.component';
 
-
 @NgModule({
   imports: [
     ThemeModule,
diff --git a/webapp/src/app/pages/targets/settings/target-select-dropdown.component.ts b/webapp/src/app/pages/targets/settings/target-select-dropdown.component.ts
new file mode 100644
index 0000000..c124054
--- /dev/null
+++ b/webapp/src/app/pages/targets/settings/target-select-dropdown.component.ts
@@ -0,0 +1,57 @@
+/**
+* @license
+* Copyright (C) 2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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 } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { ITarget, TargetService } from '../../../@core-xds/services/target.service';
+
+@Component({
+  selector: 'xds-target-select-dropdown',
+  template: `
+    <div class="form-group row">
+      <label class="col-sm-3 form-control-label" style="margin-top:  auto; margin-bottom:  auto;">Target</label>
+      <div class="col-sm-9">
+        <select class="form-control" style="min-width: 10rem;" [(ngModel)]="curTgt" (click)="select()">
+          <option  *ngFor="let tgt of targets$ | async" [ngValue]="tgt">{{ tgt.name }}</option>
+        </select>
+      </div>
+    </div>
+  `,
+})
+export class TargetSelectDropdownComponent implements OnInit {
+
+  targets$: Observable<ITarget[]>;
+  curTgt: ITarget;
+
+  constructor(private targetSvr: TargetService) { }
+
+  ngOnInit() {
+    this.curTgt = this.targetSvr.getCurrent();
+    this.targets$ = this.targetSvr.targets$;
+    this.targetSvr.curTarget$.subscribe(p => this.curTgt = p);
+  }
+
+  select() {
+    if (this.curTgt) {
+      this.targetSvr.setCurrentById(this.curTgt.id);
+    }
+  }
+}
+
+
diff --git a/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.html b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.html
new file mode 100644
index 0000000..84424b4
--- /dev/null
+++ b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.html
@@ -0,0 +1,46 @@
+<div class="modal-header">
+  <span>Add a new target</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]="addTargetForm" (ngSubmit)="onSubmit()">
+
+      <div class="form-group row">
+        <label for="sharing-type" class="col-sm-3 col-form-label">Target Type</label>
+        <div class="col-sm-9">
+          <select id="select-sharing-type" class="form-control" formControlName="type">
+            <option *ngFor="let t of targetTypes" [value]="t.value">{{t.display}}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <label for="select-ip" class="col-sm-3 col-form-ip">IP or Name</label>
+        <div class="col-sm-9">
+          <input type="text" id="inputLabel" class="form-control" formControlName="ip" (keyup)="onKeyLabel($event)">
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <label for="select-name" class="col-sm-3 col-form-name">Name</label>
+        <div class="col-sm-9">
+          <input type="text" id="inputLabel" class="form-control" formControlName="name" (keyup)="onKeyLabel($event)">
+        </div>
+      </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]="!addTargetForm.valid">Add Folder</button>
+    </div>
+  </div>
+</div>
diff --git a/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts
new file mode 100644
index 0000000..fdcb048
--- /dev/null
+++ b/webapp/src/app/pages/targets/target-add-modal/target-add-modal.component.ts
@@ -0,0 +1,174 @@
+/**
+* @license
+* Copyright (C) 2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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, 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 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 { TargetService, ITarget, TargetType, TargetTypes } from '../../../@core-xds/services/target.service';
+import { XDSConfigService } from '../../../@core-xds/services/xds-config.service';
+
+
+@Component({
+  selector: 'xds-target-add-modal',
+  templateUrl: 'target-add-modal.component.html',
+  encapsulation: ViewEncapsulation.None,
+  styles: [`
+    .modal-xxl .modal-lg {
+      width: 90%;
+      max-width:1200px;
+    }
+  `],
+})
+export class TargetAddModalComponent implements OnInit {
+  // @Input('server-id') serverID: string;
+  private serverID: string;
+
+  cancelAction = false;
+  userEditedName = false;
+  targetTypes = Object.assign([], TargetTypes);
+
+  addTargetForm: FormGroup;
+  typeCtrl: FormControl;
+  ipCtrl: FormControl;
+
+  constructor(
+    private alert: AlertService,
+    private targetSvr: TargetService,
+    private XdsConfigSvr: XDSConfigService,
+    private fb: FormBuilder,
+    private activeModal: NgbActiveModal,
+  ) {
+    // Define types (first one is special/placeholder)
+    this.targetTypes.unshift({ value: TargetType.UNSET, display: '--Select a type--' });
+
+    // Select first type item (Standard) by default
+    this.typeCtrl = new FormControl(this.targetTypes[1].value, this.validatorTgtType.bind(this));
+    this.ipCtrl = new FormControl('', this.validatorIP.bind(this));
+
+    this.addTargetForm = fb.group({
+      type: this.typeCtrl,
+      ip: this.ipCtrl,
+      name: ['', Validators.nullValidator],
+    });
+  }
+
+  ngOnInit() {
+    // Update server ID
+    this.serverID = this.XdsConfigSvr.getCurServer().id;
+    this.XdsConfigSvr.onCurServer().subscribe(svr => this.serverID = svr.id);
+
+    // Auto create target name
+    this.ipCtrl.valueChanges
+      .debounceTime(100)
+      .filter(n => n)
+      .map(n => {
+        if (this._isIPstart(n)) {
+          return 'Target_' + n;
+        }
+//        SEB PB
+        return n;
+      })
+      .subscribe(value => {
+        if (value && !this.userEditedName) {
+          this.addTargetForm.patchValue({ name: value });
+        }
+      });
+  }
+
+  closeModal() {
+    this.activeModal.close();
+  }
+
+  onKeyLabel(event: any) {
+    this.userEditedName = (this.addTargetForm.value.label !== '');
+  }
+
+  onChangeLocalTarget(e) {
+  }
+
+  onSubmit() {
+    if (this.cancelAction) {
+      return;
+    }
+
+    const formVal = this.addTargetForm.value;
+
+    this.targetSvr.add({
+      name: formVal['name'],
+      ip: formVal['ip'],
+      type: formVal['type'],
+    }).subscribe(
+      tgt => {
+        this.alert.info('Target ' + tgt.name + ' successfully created.');
+        this.closeModal();
+
+        // Reset Value for the next creation
+        this.addTargetForm.reset();
+        const selectedType = this.targetTypes[0].value;
+        this.addTargetForm.patchValue({ type: selectedType });
+
+      },
+      err => {
+        this.alert.error(err, 60);
+        this.closeModal();
+      },
+    );
+  }
+
+  private validatorTgtType(g: FormGroup): ValidationErrors | null {
+    return (g.value !== TargetType.UNSET) ? null : { validatorTgtType: { valid: false } };
+  }
+
+  private validatorIP(g: FormGroup): ValidationErrors | null {
+    const noValid = <ValidationErrors>{ validatorProjPath: { valid: false } };
+
+    if (g.value === '') {
+      return noValid;
+    }
+
+    if (this._isIPstart(g.value) && !this._isIPv4(g.value)) {
+      return noValid;
+    }
+
+    // Else accept any text / hostname
+    return null;
+  }
+
+  private _isIPstart(str) {
+    return /^(\d+)\./.test(str);
+  }
+
+  private _isIPv4(str) {
+    const ipv4Maybe = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/
+    if (!ipv4Maybe.test(str)) {
+      return false;
+    }
+    const parts = str.split('.').sort(function (a, b) {
+      return a - b;
+    });
+    return (parts[3] <= 255);
+  }
+}
diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.html b/webapp/src/app/pages/targets/target-card/target-card.component.html
new file mode 100644
index 0000000..7c921b1
--- /dev/null
+++ b/webapp/src/app/pages/targets/target-card/target-card.component.html
@@ -0,0 +1,62 @@
+<nb-card class="xds-targets">
+  <nb-card-header>
+
+    <div class="row">
+      <div class="col-12 col-md-8">
+        {{ target.name }}
+      </div>
+      <div class="col-6 col-md-4 text-right" role="group">
+        <button class="btn btn-outline-danger btn-tn btn-xds" (click)="delete(target)">
+          <span class="fa fa-trash fa-size-x2"></span>
+        </button>
+      </div>
+    </div>
+  </nb-card-header>
+
+  <nb-card-body>
+    <table class="table table-striped">
+      <tbody>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-id-badge"></span>&nbsp;
+            <span>Target ID</span>
+          </th>
+          <td>{{ target.id }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-exchange"></span>&nbsp;
+            <span>Type</span>
+          </th>
+          <td>{{ target.type | readableType }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-folder-open-o"></span>&nbsp;
+            <span>IP</span>
+          </th>
+          <td>{{ target.ip }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-flag"></span>&nbsp;
+            <span>Status</span>
+          </th>
+          <td>{{ target.status }}</td>
+        </tr>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-folder-open-o"></span>&nbsp;
+            <span>Terminals</span>
+          </th>
+          <td>{{ target.terms.length }}</td>
+        </tr>
+
+      </tbody>
+    </table>
+  </nb-card-body>
+
+  <nb-card-footer>
+    <!-- <pre>{{target | json}}</pre> -->
+  </nb-card-footer>
+</nb-card>
diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.scss b/webapp/src/app/pages/targets/target-card/target-card.component.scss
new file mode 100644
index 0000000..6ac8d11
--- /dev/null
+++ b/webapp/src/app/pages/targets/target-card/target-card.component.scss
@@ -0,0 +1,41 @@
+@import '~@nebular/theme/styles/global/bootstrap/buttons';
+
+.xds-project-card .icon {
+  padding: 0.75rem 0;
+  font-size: 1.75rem;
+}
+
+nb-card-body {
+  padding: 0;
+}
+
+nb-card-footer {
+  text-align: right;
+}
+
+.fa-size-x2 {
+  font-size: 20px;
+}
+
+th span {
+  font-weight: 100;
+}
+
+th label {
+  font-weight: 100;
+  margin-bottom: 0;
+}
+
+.btn-outline-danger.btn-xds {
+  color: #ff4c6a;
+  &:focus {
+    color: white;
+  }
+}
+
+.btn-outline-info.btn-xds {
+  color: #4ca6ff;
+  &:focus {
+    color: white;
+  }
+}
diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.ts b/webapp/src/app/pages/targets/target-card/target-card.component.ts
new file mode 100644
index 0000000..6d43260
--- /dev/null
+++ b/webapp/src/app/pages/targets/target-card/target-card.component.ts
@@ -0,0 +1,87 @@
+/**
+* @license
+* Copyright (C) 2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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, Input, Pipe, PipeTransform } from '@angular/core';
+import { TargetService, ITarget, TargetType, TargetTypeEnum, TargetTypes } from '../../../@core-xds/services/target.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';
+import { find } from 'rxjs/operator/find';
+import { findIndex } from 'rxjs/operator/findIndex';
+
+@Component({
+  selector: 'xds-target-card',
+  styleUrls: ['./target-card.component.scss'],
+  templateUrl: './target-card.component.html',
+})
+export class TargetCardComponent {
+
+  // FIXME workaround of https://github.com/angular/angular-cli/issues/2034
+  // should be removed with angular 5
+  // @Input() target: ITarget;
+  @Input() target = <ITarget>null;
+
+  constructor(
+    private alert: AlertService,
+    private targetSvr: TargetService,
+    private modalService: NgbModal,
+  ) {
+  }
+
+  delete(tgt: ITarget) {
+
+    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 <b>permanently delete '` + tgt.name + `'</b> target ?
+      <br><br>
+      <i><small>(Target ID: ` + tgt.id + ` )</small></i>`;
+
+    modal.result
+      .then(res => {
+        if (res === 'yes') {
+          this.targetSvr.delete(tgt).subscribe(
+            r => { },
+            err => this.alert.error('ERROR delete: ' + err),
+          );
+        }
+      });
+
+  }
+
+}
+
+// Make Target type human readable
+@Pipe({
+  name: 'readableType',
+})
+
+export class TargetReadableTypePipe implements PipeTransform {
+  transform(type: TargetTypeEnum): string {
+    const tt = TargetTypes.find(el => type === el.value);
+    if (tt) {
+      return tt.display;
+    }
+    return String(type);
+  }
+}
diff --git a/webapp/src/app/pages/targets/targets.component.html b/webapp/src/app/pages/targets/targets.component.html
new file mode 100644
index 0000000..a4fd894
--- /dev/null
+++ b/webapp/src/app/pages/targets/targets.component.html
@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="col-12">
+    <nb-card-body>
+      <div class="col-9">
+        <nb-actions size="medium">
+          <nb-action>
+            <button (click)="add()">
+                <i class="nb-plus"></i>
+                <span>Add Target</span>
+            </button>
+          </nb-action>
+        </nb-actions>
+      </div>
+      <div class="col-3 right">
+        <nb-actions size="medium">
+          <nb-action>
+            <nb-search type="rotate-layout"></nb-search>
+          </nb-action>
+        </nb-actions>
+      </div>
+    </nb-card-body>
+  </div>
+  <div class="col-md-6 col-lg-6" *ngFor="let tgt of (targets$ | async)">
+    <xds-target-card [target]="tgt"></xds-target-card>
+  </div>
+</div>
diff --git a/webapp/src/app/pages/targets/targets.component.scss b/webapp/src/app/pages/targets/targets.component.scss
new file mode 100644
index 0000000..93ed0db
--- /dev/null
+++ b/webapp/src/app/pages/targets/targets.component.scss
@@ -0,0 +1,84 @@
+@import '~xterm/dist/xterm.css';
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/components/card/card.component.theme';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@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: 2.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;
+      }
+    }
+  }
+  @include media-breakpoint-down(md) {
+    nb-actions nb-action {
+      padding: 0 0.75rem;
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    nb-card-body {
+      padding: 1rem;
+    }
+    nb-action {
+      font-size: 0.75rem;
+      i {
+        font-size: 2rem;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+  @include media-breakpoint-down(is) {
+    nb-action i {
+      font-size: 1.75rem;
+      margin: 0;
+    }
+    span {
+      display: none;
+    }
+  }
+}
diff --git a/webapp/src/app/pages/targets/targets.component.ts b/webapp/src/app/pages/targets/targets.component.ts
new file mode 100644
index 0000000..95abdea
--- /dev/null
+++ b/webapp/src/app/pages/targets/targets.component.ts
@@ -0,0 +1,60 @@
+/**
+* @license
+* Copyright (C) 2017-2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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 } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TargetAddModalComponent } from './target-add-modal/target-add-modal.component';
+
+import { TargetService, ITarget } from '../../@core-xds/services/target.service';
+import { AlertService } from '../../@core-xds/services/alert.service';
+
+@Component({
+  selector: 'xds-targets',
+  styleUrls: ['./targets.component.scss'],
+  templateUrl: './targets.component.html',
+})
+export class TargetsComponent implements OnInit {
+
+  public targets$: Observable<ITarget[]>;
+
+  protected curTargetID: string;
+
+  constructor(
+    private modalService: NgbModal,
+    private targetSvr: TargetService,
+    private alert: AlertService,
+  ) {
+    this.curTargetID = '';
+  }
+
+  ngOnInit() {
+    this.targets$ = this.targetSvr.targets$;
+  }
+
+  add() {
+    const activeModal = this.modalService.open(TargetAddModalComponent, {
+      size: 'lg',
+      windowClass: 'modal-xxl',
+      container: 'nb-layout',
+    });
+  }
+
+}
diff --git a/webapp/src/app/pages/targets/targets.module.ts b/webapp/src/app/pages/targets/targets.module.ts
new file mode 100644
index 0000000..8589bcd
--- /dev/null
+++ b/webapp/src/app/pages/targets/targets.module.ts
@@ -0,0 +1,47 @@
+/**
+* @license
+* Copyright (C) 2017-2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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 { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+
+import { TargetsComponent } from './targets.component';
+import { TerminalsComponent } from './terminals/terminals.component';
+import { TerminalComponent } from './terminals/terminal.component';
+import { TargetCardComponent, TargetReadableTypePipe } from './target-card/target-card.component';
+import { TargetAddModalComponent } from './target-add-modal/target-add-modal.component';
+import { TargetSelectDropdownComponent } from './settings/target-select-dropdown.component';
+
+
+@NgModule({
+  imports: [
+    ThemeModule,
+  ],
+  declarations: [
+    TargetsComponent,
+    TerminalsComponent,
+    TerminalComponent,
+    TargetCardComponent,
+    TargetAddModalComponent,
+    TargetReadableTypePipe,
+    TargetSelectDropdownComponent,
+  ],
+  entryComponents: [
+    TargetAddModalComponent,
+  ],
+})
+export class TargetsModule { }
diff --git a/webapp/src/app/pages/targets/terminals/terminal.component.ts b/webapp/src/app/pages/targets/terminals/terminal.component.ts
new file mode 100644
index 0000000..0478a08
--- /dev/null
+++ b/webapp/src/app/pages/targets/terminals/terminal.component.ts
@@ -0,0 +1,135 @@
+/**
+* @license
+* Copyright (C) 2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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, ElementRef, ViewChild, Input, Output, HostListener, EventEmitter, AfterViewInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { Terminal } from 'xterm';
+import * as fit from 'xterm/lib/addons/fit/fit';
+
+export interface ITerminalFont {
+  fontFamily: string;
+  fontSize: string;
+  lineHeight: number;
+  charWidth: number;
+  charHeight: number;
+}
+
+
+@Component({
+  selector: 'xds-terminal',
+  styles: [],
+  template: `
+    <div #terminalContainer></div>
+  `,
+})
+export class TerminalComponent implements AfterViewInit {
+
+  private _xterm: Terminal;
+  private _initDone: boolean;
+
+  @ViewChild('terminalContainer') termContainer: ElementRef;
+
+  @Output() stdin = new EventEmitter<any>();
+  @Output() resize = new EventEmitter<{ cols: number, rows: number }>();
+
+
+  constructor() {
+    this._initDone = false;
+    Terminal.applyAddon(fit);
+
+    this._xterm = new Terminal({
+      cursorBlink: true,
+      // useStyle: true,
+      scrollback: 1000,
+      rows: 24,
+      cols: 80,
+    });
+  }
+
+  // getting the nativeElement only possible after view init
+  ngAfterViewInit() {
+
+    // this now finds the #terminal element
+    this._xterm.open(this.termContainer.nativeElement);
+
+    // the number of rows will determine the size of the terminal screen
+    (<any>this._xterm).fit();
+
+    // Bind input key
+    this._xterm.on('data', (data) => {
+      // console.log(data.charCodeAt(0));
+      this.stdin.emit(this._sanitizeInput(data));
+      return false;
+    });
+
+    this._initDone = true;
+  }
+
+  @Input('stdout')
+  set writeData(data) {
+    if (this._initDone && data !== undefined) {
+      this._xterm.write(data);
+    }
+  }
+
+  @Input('disable')
+  set disable(value: boolean) {
+    if (!this._initDone) {
+      return;
+    }
+
+    this._xterm.setOption('disableStdin', value);
+
+    if (value) {
+      this._xterm.blur();
+    } else {
+      this._xterm.focus();
+    }
+    this._resize();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize(event) {
+    this._resize();
+  }
+
+  /*** Private functions ***/
+
+  private _sanitizeInput(d) {
+    // TODO sanitize ?
+    return d;
+  }
+
+  private _resize() {
+    const geom = fit.proposeGeometry(this._xterm);
+
+    // console.log('DEBUG  cols ' + String(geom.cols) + ' rows ' + String(geom.rows));
+
+    if (geom.cols < 0 || geom.cols > 2000 || geom.rows < 0 || geom.rows > 2000) {
+      return;
+    }
+
+    // Update xterm size
+    this._xterm.resize(geom.cols, geom.rows);
+
+    // Send resize event to update remote terminal
+    this.resize.emit({ cols: geom.cols, rows: geom.rows });
+  }
+
+}
diff --git a/webapp/src/app/pages/targets/terminals/terminals.component.html b/webapp/src/app/pages/targets/terminals/terminals.component.html
new file mode 100644
index 0000000..8b78963
--- /dev/null
+++ b/webapp/src/app/pages/targets/terminals/terminals.component.html
@@ -0,0 +1,32 @@
+<div class="row">
+  <div class="col-12">
+    <nb-card-body>
+      <nb-actions size="medium">
+        <nb-action class="col-sm-6">
+          <xds-target-select-dropdown></xds-target-select-dropdown>
+        </nb-action>
+        <nb-action class="col-sm-3" [disabled]="curTarget==null">
+          <button (click)="openTerm()">
+                    <i class="nb-layout-default"></i>
+                    <span>Open Terminal</span>
+                </button>
+        </nb-action>
+        <nb-action class="col-sm-3" [disabled]="curTarget==null">
+          <button (click)="closeTerm()">
+              <i class="nb-close-circled"></i>
+              <span>Close Terminal</span>
+          </button>
+        </nb-action>
+      </nb-actions>
+    </nb-card-body>
+  </div>
+
+  <div class="col-12" *ngIf="!xTermDisable; else elseBlock">
+    <pre>Connected to {{curTarget?.name}}</pre>
+  </div>
+  <ng-template #elseBlock><pre> </pre></ng-template>
+
+  <div class="col-12">
+    <xds-terminal [(stdout)]="xTermStdout" (stdin)="onXTermData($event)" (resize)="onResize($event)" [disable]="xTermDisable"></xds-terminal>
+  </div>
+</div>
diff --git a/webapp/src/app/pages/targets/terminals/terminals.component.scss b/webapp/src/app/pages/targets/terminals/terminals.component.scss
new file mode 100644
index 0000000..3f12c78
--- /dev/null
+++ b/webapp/src/app/pages/targets/terminals/terminals.component.scss
@@ -0,0 +1,84 @@
+@import '~xterm/dist/xterm.css';
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/components/card/card.component.theme';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@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: 2.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;
+      }
+    }
+  }
+  @include media-breakpoint-down(md) {
+    nb-actions nb-action {
+      padding: 0 0.75rem;
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    nb-card-body {
+      padding: 1rem;
+    }
+    nb-action {
+      font-size: 0.75rem;
+      i {
+        font-size: 2rem;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+  @include media-breakpoint-down(is) {
+    nb-action i {
+      font-size: 1.75rem;
+      margin: 0;
+    }
+    span {
+      display: none;
+    }
+  }
+}
diff --git a/webapp/src/app/pages/targets/terminals/terminals.component.ts b/webapp/src/app/pages/targets/terminals/terminals.component.ts
new file mode 100644
index 0000000..306c759
--- /dev/null
+++ b/webapp/src/app/pages/targets/terminals/terminals.component.ts
@@ -0,0 +1,115 @@
+/**
+* @license
+* Copyright (C) 2017-2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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 } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { TargetService, TargetType, ITarget, ITerminal, TerminalType, ITerminalOutput } from '../../../@core-xds/services/target.service';
+import { AlertService } from '../../../@core-xds/services/alert.service';
+
+@Component({
+  selector: 'xds-terminals',
+  styleUrls: ['./terminals.component.scss'],
+  templateUrl: './terminals.component.html',
+})
+export class TerminalsComponent implements OnInit {
+
+  public curTarget: ITarget;
+  public xTermStdout: string;
+  public xTermDisable: boolean;
+
+  protected curTermID: string;
+
+  private termOut$: Subject<ITerminalOutput>;
+  private termSubs: Subscription;
+
+  constructor(
+    private modalService: NgbModal,
+    private targetSvr: TargetService,
+    private alert: AlertService,
+  ) {
+    this.xTermStdout = '';
+    this.xTermDisable = true;
+    this.curTarget = null;
+    this.curTermID = '';
+  }
+
+  ngOnInit() {
+    this.targetSvr.curTarget$.subscribe(p => this.curTarget = p);
+  }
+
+  openTerm() {
+    if (this.curTarget == null || this.curTarget.id === '') {
+      return;
+    }
+
+    // FIXME: don't always use 1st terminal
+    if (this.curTarget.terms.length > 0) {
+      this.curTermID = this.curTarget.terms[0].id;
+    }
+
+    this.targetSvr.terminalOpen(this.curTarget.id, this.curTermID)
+      .subscribe(
+        res => {
+          this.termOut$ = this.targetSvr.terminalOutput$;
+
+          this.termSubs = this.termOut$.subscribe(termOut => {
+            this.xTermStdout = termOut.stdout + termOut.stderr;
+          });
+
+          this.xTermDisable = false;
+        },
+        err => {
+          this.alert.error(err);
+        },
+    );
+  }
+
+  closeTerm() {
+    if (this.curTarget == null || this.curTarget.id === '' || this.curTermID === '') {
+      return;
+    }
+    this.targetSvr.terminalClose(this.curTarget.id, this.curTermID)
+      .subscribe(res => {
+        this.curTermID = '';
+        this.xTermStdout = '\r\n*** Terminal closed ***\n\n\r';
+        if (this.termSubs !== undefined) {
+          this.termSubs.unsubscribe();
+          this.termOut$ = undefined;
+        }
+        this.xTermDisable = true;
+      });
+  }
+
+  onXTermData(data: string) {
+    if (this.termOut$ !== undefined && !this.termOut$.closed) {
+      this.targetSvr.terminalWrite(data);
+    }
+  }
+
+  onResize(sz) {
+    if (this.termOut$ !== undefined && !this.termOut$.closed) {
+      this.targetSvr.terminalResize(this.curTarget.id, this.curTermID, sz.cols, sz.rows).subscribe();
+    }
+  }
+
+}