Merge remote-tracking branch 'origin/master'

@overflow/discovery/component/discovery/discovery.component.html

@@ -1,38 +1,19 @@
 <div class="ui-g">
   <div class="ui-g-12 ui-md-3">
-    <of-discovery-search-config *ngIf="selectedProbe else block" [probeHost]="selectedProbe" (requestDiscovery)="requestDiscovery.emit($event)"></of-discovery-search-config>
+    <p-accordion [multiple]="true">
-    <ng-template #block>나는 커서 block ui가 될거얌</ng-template>
+      <p-accordionTab header="Discovery Settings" [selected]="selectedProbe">
-  </div>
+        <of-probe-summary *ngIf="requested" [probeHost]="selectedProbe"></of-probe-summary>
-  <div class="ui-g-12 ui-md-9">
+        <of-discovery-search-config *ngIf="!requested && selectedProbe" [probeHost]="selectedProbe" (requestDiscovery)="onRequestDiscovery($event)"></of-discovery-search-config>
-    <div *ngIf="selectedProbe">
-        SELECTED_PROBE_DISPLAY_NAME : {{selectedProbe.probe.displayName}}
-    </div>
-  </div>
-</div>
-
-<!-- <div class="ui-g-12">
-  <p-panel [showHeader]="false" >Temp Area</p-panel>
-</div> -->
-
-<!-- <div class="ui-g">
-  <div class="ui-g-12 ui-md-3">
-    <p-accordion (onClose)="onTabClose($event)" (onOpen)="OnTabOpen($event)">
-      <p-accordionTab header="Probe Select Area" [selected]="true">
       </p-accordionTab>
-      <p-accordionTab header="Discovery Search Config Area" >
+      <p-accordionTab header="Filter" [selected]="requested" [disabled]="!requested">
-        <of-discovery-search-config
-          (discoverySearchStartClick)="onDiscoveryStart()"
-          (selectProbe)="onSelectedProbe($event)"></of-discovery-search-config>
-      </p-accordionTab>
-      <p-accordionTab header="Result Filter Area">
         <of-discovery-search-filter></of-discovery-search-filter>
       </p-accordionTab>
     </p-accordion>
   </div>
 
-  <div class="ui-g-12 ui-md-9">
+  <div class="ui-g-12 ui-md-9" >
     <p-panel>
-      <of-discovery-search-result [probe]="selectedProbe"></of-discovery-search-result>
+      <of-discovery-result-container (stop)="onStop($event)"></of-discovery-result-container>
     </p-panel>
   </div>
-</div> -->
+</div>

@overflow/discovery/component/discovery/discovery.component.ts

@@ -10,12 +10,23 @@ import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
 })
 export class DiscoveryComponent  {
 
-  private tabIdx: number;
   @Input() selectedProbe: ProbeHost;
   @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
+  @Output() stop = new EventEmitter<DiscoverZone>();
+
+  requested: boolean;
 
   constructor(
   ) {
   }
 
+  onRequestDiscovery(dz: DiscoverZone) {
+    this.requested = true;
+    this.requestDiscovery.emit(dz);
+  }
+
+  onStop() {
+    this.requested = false;
+    this.stop.emit();
+  }
 }

@overflow/discovery/component/discovery/ip-input.component.html

@@ -0,0 +1,11 @@
+<div class="ui-inputgroup">
+  <span style="margin-right: 18px">{{title}} </span>
+  <input [disabled]="fixed >= 0"type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
+  <span class="ui-inputgroup-addon">.</span>
+  <input [disabled]="fixed > 1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
+  <span class="ui-inputgroup-addon">.</span>
+  <input [disabled]="fixed > 2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
+  <span class="ui-inputgroup-addon">.</span>
+  <input type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
+</div>
+

@overflow/discovery/component/discovery/ip-input.component.ts

@@ -18,8 +18,9 @@ export class IpInputComponent implements OnInit, AfterContentInit {
   third: string;
   fourth: string;
 
-  @Input() hostIp;
+  @Input() hostIp: string;
-  @Input() title;
+  @Input() title: string;
+  @Input() fixed: number;
   @Output() inputIp = new EventEmitter();
 
   constructor(

@overflow/discovery/component/discovery/search-config.component.html

@@ -0,0 +1,83 @@
+<div class="ui-g" *ngIf="probeHost">
+  <div>
+    <label>IP Version</label>
+  </div>
+  <div class="ui-g-12 ui-bottom-space-20">
+    <div class="ui-g-6 ui-g-nopad">
+      <p-radioButton name="group1" value="v4" label="IPv4" [(ngModel)]="ipVer"></p-radioButton>
+    </div>
+    <div class="ui-g-6 ui-g-nopad">
+      <p-radioButton [disabled]="!SUPPORT_V6" name="group1" value="v6" label="IPv6" [(ngModel)]="ipVer"></p-radioButton>
+    </div>
+  </div>
+
+  <div *ngIf="ipVer === 'v4' else V6" class="ui-g-12">
+    <div>
+      <div>
+        <p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
+      </div>
+      <label>Range</label>
+    </div>
+    <div class="ui-g-12">
+      <of-ip-input [hostIp]="startIP" (inputIp)="onInputIP($event, 0)" [title]="'From'" [fixed]="fixedIPrange"></of-ip-input>
+    </div>
+    <div class="ui-g-12">
+      <of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'" [fixed]="fixedIPrange"></of-ip-input>
+    </div>
+    <div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
+      {{ipErrMsg}}
+    </div>
+  </div>
+
+  <ng-template #V6>
+    <!-- TODO -->
+  </ng-template>
+
+  <div class="ui-g-12">
+    <div>
+      <p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
+    </div>
+  </div>
+  <div class="ui-g-12 ui-bottom-space-20">
+    <div class="ui-g-6 ui-g-nopad">
+      TCP &nbsp;
+      <p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
+    </div>
+    <div class="ui-g-6 ui-g-nopad">
+      UDP &nbsp;
+      <p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true" (onChange)="onPortTypeCheck(portCheckbox, serviceCheckbox)"></p-inputSwitch>
+    </div>
+  </div>
+
+  <div class="ui-g-12">
+    <label>Range</label>
+  </div>
+  <div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
+    <div class="ui-g-4">
+      <input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
+        (keyup)="onInputPort(startPort.value, 0)">
+    </div>
+    <div class="ui-g-4">
+      <input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
+        (keyup)="onInputPort(endPort.value, 1)">
+    </div>
+  </div>
+  <div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
+    {{portErrMsg}}
+  </div>
+
+  <div class="ui-g-12">
+    <div>
+      <p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)"
+        binary="true"></p-checkbox>
+    </div>
+  </div>
+
+  <div class="ui-g-12 ui-g-nopad">
+    <of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
+  </div>
+
+  <div class="ui-g-12" dir="rtl">
+    <button type="submit" [disabled]="!validation" label="Discovery Start" pButton class="ui-button-width-fit" (click)="onRequestDiscovery()"></button>
+  </div>
+</div>

@overflow/discovery/component/discovery/search-config.component.ts

@@ -14,6 +14,8 @@ import { Checkbox } from 'primeng/primeng';
 })
 export class SearchConfigComponent implements OnChanges {
 
+  SUPPORT_V6 = false;
+
   @Input() probeHost: ProbeHost;
   @Output() requestDiscovery = new EventEmitter<DiscoverZone>();
 
@@ -34,12 +36,16 @@ export class SearchConfigComponent implements OnChanges {
   ipErrMsg: string;
   portErrMsg: string;
 
+  fixedIPrange: number;
+
   constructor(
   ) {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    this.initByProbe();
+    if (changes['probeHost']) {
+      this.initByProbe();
+    }
     this.validation = true;
   }
 
@@ -48,13 +54,14 @@ export class SearchConfigComponent implements OnChanges {
     if (!cidr.isValid()) {
       return;
     }
-    this.ipVer = 'ipv4';
+    this.ipVer = 'v4';
     this.startIP = cidr.addressStart.address;
     this.endIP = cidr.addressEnd.address;
     this.startPort = '1';
     this.endPort = '1024';
-
     // TODO: Initialize services
+
+    this.checkEditableIPrange(cidr);
   }
 
   onRequestDiscovery() {
@@ -91,10 +98,27 @@ export class SearchConfigComponent implements OnChanges {
     this.requestDiscovery.emit(discoverZone);
   }
 
+  checkEditableIPrange(cidr) {
+    const startIPArray = cidr.addressStart.parsedAddress;
+    const endIPArray = cidr.addressEnd.parsedAddress;
+    let count = 0;
+    endIPArray.forEach((element, idx) => {
+      if (element === startIPArray[idx]) {
+        count++;
+      }
+    });
+    this.fixedIPrange = count;
+  }
+
   onPortCheckChange(serviceCheckbox: Checkbox, checked: boolean) {
     if (!checked) {
       serviceCheckbox.checked = false;
       this.serviceChecked = false;
+    } else {
+      if (!this.tcpChecked && !this.udpChecked) {
+        this.tcpChecked = true;
+        this.udpChecked = true;
+      }
     }
   }
 
@@ -105,6 +129,15 @@ export class SearchConfigComponent implements OnChanges {
     }
   }
 
+  onPortTypeCheck(portCheckbox: Checkbox, serviceCheckbox: Checkbox): void {
+    if (!this.tcpChecked && !this.udpChecked) {
+      this.portChecked = false;
+      portCheckbox.checked = false;
+      this.serviceChecked = false;
+      serviceCheckbox.checked = false;
+    }
+  }
+
   onInputIP(e, idx: number) {
     const value = e.value;
     if (idx === 0) {

@overflow/discovery/component/discovery/search-config/ip-input.component.html

@@ -1,12 +0,0 @@
-
-<div class="ui-inputgroup">
-  <span style="margin-right: 18px">{{title}} </span>
-  <input id="0" type="text" pInputText placeholder="127" maxlength="3" [(ngModel)]="first" value="{{first}}" (keyup)="onIpInput($event)">
-  <span class="ui-inputgroup-addon">.</span>
-  <input id="1" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="second" value="{{second}}" (keyup)="onIpInput($event)">
-  <span class="ui-inputgroup-addon">.</span>
-  <input id="2" type="text" pInputText placeholder="0" maxlength="3" [(ngModel)]="third" value="{{third}}" (keyup)="onIpInput($event)">
-  <span class="ui-inputgroup-addon">.</span>
-  <input id="3" type="text" pInputText placeholder="1" maxlength="3" [(ngModel)]="fourth" value="{{fourth}}" (keyup)="onIpInput($event)">
-</div>
-

@overflow/discovery/component/discovery/search-config/search-config.component.html

@@ -1,71 +0,0 @@
-<div class="ui-g">
-  <label>IP Version</label>
-</div>
-<div class="ui-g-12 ui-bottom-space-20">
-  <div class="ui-g-6 ui-g-nopad">
-    <p-radioButton name="group1" value="ipv4" label="IPv4" [(ngModel)]="ipVer" inputId="opt1"></p-radioButton>
-  </div>
-  <div class="ui-g-6 ui-g-nopad">
-    <p-radioButton [disabled]="true" name="group1" value="ipv6" label="IPv6" [(ngModel)]="ipVer"></p-radioButton>
-  </div>
-</div>
-
-<div class="ui-g-12">
-  <div>
-    <p-checkbox value="host" label="Host" [(ngModel)]="hostChecked" binary="true" [disabled]="true"></p-checkbox>
-  </div>
-  <label>Range</label>
-</div>
-<div class="ui-g-12">
-  <of-ip-input [hostIp]="startIP" (inputIp)="onInputIP($event, 0)" [title]="'From'"></of-ip-input>
-</div>
-<div class="ui-g-12">
-  <of-ip-input [hostIp]="endIP" (inputIp)="onInputIP($event, 1)" [title]="'To'"></of-ip-input>
-</div>
-<div *ngIf="ipErrMsg" class="ui-message ui-messages-error ui-corner-all">
-  {{ipErrMsg}}
-</div>
-<div class="ui-g-12">
-  <div>
-    <p-checkbox #portCheckbox value="port" label="Port" [(ngModel)]="portChecked" binary="true" (onChange)="onPortCheckChange(serviceCheckbox, $event)"></p-checkbox>
-  </div>
-</div>
-<div class="ui-g-12 ui-bottom-space-20">
-  <div class="ui-g-6 ui-g-nopad">
-    TCP &nbsp;
-    <p-inputSwitch [(ngModel)]="tcpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
-  </div>
-  <div class="ui-g-6 ui-g-nopad">
-    UDP &nbsp;
-    <p-inputSwitch [(ngModel)]="udpChecked" [disabled]="!portChecked" binary="true"></p-inputSwitch>
-  </div>
-</div>
-
-<div class="ui-g-12">
-  <label>Range</label>
-</div>
-<div class="ui-g-12 ui-g-nopad ui-bottom-space-20">
-  <div class="ui-g-4">
-    <input #startPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1"
-      (keyup)="onInputPort(startPort.value, 0)">
-  </div>
-  <div class="ui-g-4">
-    <input #endPort id="float-input" type="number" maxlength="5" min="1" max="65535" pInputText [disabled]="!portChecked" value="1024"
-      (keyup)="onInputPort(endPort.value, 1)">
-  </div>
-</div>
-<div *ngIf="portErrMsg" class="ui-message ui-messages-error ui-corner-all">
-  {{portErrMsg}}
-</div>
-<div class="ui-g-12">
-  <div>
-    <p-checkbox #serviceCheckbox value="service" label="Service" [(ngModel)]="serviceChecked" (onChange)="onServiceCheckChange(portCheckbox, $event)"
-      binary="true"></p-checkbox>
-  </div>
-</div>
-<div class="ui-g-12 ui-g-nopad">
-  <of-service-selector [disabled]="!serviceChecked" [(includeServices)]="includeServices"></of-service-selector>
-</div>
-<div class="ui-g-12" dir="rtl">
-  <button type="submit" [disabled]="!validation" label="Discovery Start" pButton class="ui-button-width-fit" (click)="onRequestDiscovery()"></button>
-</div>

@overflow/discovery/component/discovery/search-result.component.html

@@ -0,0 +1,4 @@
+<div class="ui-g">
+    <p-button label="Stop" (click)="stop.emit()"></p-button>
+</div>
+

@overflow/discovery/component/discovery/search-result.component.ts

@@ -0,0 +1,19 @@
+import {
+  AfterContentInit, Component, Input,
+  OnInit,
+  EventEmitter,
+  Output
+} from '@angular/core';
+
+@Component({
+  selector: 'of-discovery-result',
+  templateUrl: './search-result.component.html',
+})
+export class SearchResultComponent {
+
+  @Output() stop = new EventEmitter();
+
+  constructor(
+  ) {
+  }
+}

@overflow/discovery/component/discovery/search-result/search-result.component.html

@@ -1,36 +0,0 @@
-<div class="ui-g" *ngIf="probe">
-  <div class="ui-g form-group">
-
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-      <div class="of-key-value-div">
-        <span>Name</span>
-        <span class="ng-star-inserted">
-          {{probe.displayName}}
-        </span>
-      </div>
-    </div>
-
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-      <of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
-    </div>
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-      <div class="of-key-value-div">
-        <span>Description</span>
-        <span class="ng-star-inserted">
-          {{probe.description}}
-        </span>
-      </div>
-    </div>
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-      <span>Key</span>
-      {{probe.probeKey}}
-    </div>
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-      <of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
-    </div>
-    <div class="ui-g-12 ui-md-6 ui-key-value ui-nopad">
-      <of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
-    </div>
-  </div>
-</div>
-

@overflow/discovery/component/discovery/search-result/search-result.component.ts

@@ -1,24 +0,0 @@
-import {
-  AfterContentInit, Component, Input,
-  OnInit
-} from '@angular/core';
-import { Probe } from '@overflow/commons-typescript/model/probe';
-
-@Component({
-  selector: 'of-discovery-search-result',
-  templateUrl: './search-result.component.html',
-})
-export class SearchResultComponent implements OnInit, AfterContentInit {
-
-  @Input() selectedProbe: Probe;
-
-  constructor(
-  ) {
-  }
-
-  ngOnInit() {
-  }
-
-  ngAfterContentInit() {
-  }
-}

@overflow/discovery/component/index.ts

@@ -1,9 +1,9 @@
 import { ServiceSelectorComponent } from './discovery/service-selector/service-selector.component';
 import { DiscoveryComponent } from './discovery/discovery.component';
-import { SearchConfigComponent } from './discovery/search-config/search-config.component';
+import { SearchConfigComponent } from './discovery/search-config.component';
-import { SearchFilterComponent } from './discovery/search-filter/search-filter.component';
+import { SearchFilterComponent } from './discovery/search-filter.component';
-import { SearchResultComponent } from './discovery/search-result/search-result.component';
+import { SearchResultComponent } from './discovery/search-result.component';
-import { IpInputComponent } from './discovery/search-config/ip-input.component';
+import { IpInputComponent } from './discovery/ip-input.component';
 
 export const COMPONENTS = [
   ServiceSelectorComponent,

@overflow/discovery/container/discovery-result/discovery-result-container.component.html

@@ -0,0 +1 @@
+<of-discovery-result></of-discovery-result>

@overflow/discovery/container/discovery-result/discovery-result-container.component.ts

@@ -0,0 +1,15 @@
+import {
+  Component,
+  Input,
+} from '@angular/core';
+
+@Component({
+  selector: 'of-discovery-result-container',
+  templateUrl: './discovery-result-container.component.html',
+})
+export class DiscoveryResultContainerComponent {
+
+  constructor(
+  ) {
+  }
+}

@overflow/discovery/container/index.ts

@@ -1,5 +1,7 @@
 import {DiscoveryContainerComponent} from './discovery/discovery-container.component';
+import { DiscoveryResultContainerComponent } from './discovery-result/discovery-result-container.component';
 
 export const CONTAINER_COMPONENTS = [
   DiscoveryContainerComponent,
+  DiscoveryResultContainerComponent
 ];

@overflow/probe/component/detail/detail.component.html

@@ -18,9 +18,9 @@
 
   <!-- Probe info -->
   <div class="ui-g ui-bottom-space-10">
-    <p-panel [showHeader]="false" class="nopad">
+    <p-panel [showHeader]="false">
       <div *ngIf="probeHost">
-        <div class="ui-g form-group">
+        <div class="ui-g">
           <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
             <div *ngIf="editMode" class="of-key-value-div">
               <span>Name</span>
@@ -54,15 +54,20 @@
           <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
             <of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
           </div>
+
+          <!--
         </div>
       </div>
     </p-panel>
+  </div>-->
 
     <!-- Host info -->
-    <p-panel [showHeader]="false" class="nopad">
+    <!--
+  <div class="ui-g ui-bottom-space-10">
+    <p-panel [showHeader]="false">
       <div *ngIf="probeHost">
-        <div class="ui-g form-group">
+        <div class="ui-g">
-
+-->
           <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
             <of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
           </div>
@@ -82,8 +87,8 @@
         </div>
       </div>
     </p-panel>
-
   </div>
+
   <div class="ui-g" dir="rtl">
     <button class="ui-button-danger ui-button-width-fit" [disabled]="true" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
       (click)="onRemoveClick()"></button>

@overflow/probe/component/download/download.component.html

@@ -1,5 +1,5 @@
 <h1>Download</h1>
-<p-tabView orientation="left" (onChange)="onChange($event)" [activeIndex]="index">
+<p-tabView orientation="left" (onChange)="onChange($event)" [activeIndex]="index" class="ui-tab-bgcolor">
   <!-- 
     <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
         {{item.content}}

@overflow/probe/component/index.ts

@@ -2,10 +2,12 @@ import { ProbeDetailComponent } from './detail/detail.component';
 import { ProbeListComponent } from './list/list.component';
 import { ProbeDownloadComponent } from './download/download.component';
 import { ProbeSelectorComponent } from './selector/selector.component';
+import { ProbeSummaryComponent } from './summary/summary.component';
 
 export const COMPONENTS = [
   ProbeListComponent,
   ProbeDetailComponent,
   ProbeDownloadComponent,
   ProbeSelectorComponent,
+  ProbeSummaryComponent
 ];

@overflow/probe/component/summary/summary.component.html

@@ -0,0 +1,15 @@
+<div *ngIf="probeHost else info">
+  <of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
+  <of-key-value [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
+  <of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
+  <of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
+  <of-key-value [key]="'Authrozied by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
+  <of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
+  <of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6 | uppercase"></of-key-value>
+  <of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
+  <of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
+</div>
+
+<ng-template #info>
+  Choose a Probe to perform Network Discovery.
+</ng-template>

@overflow/probe/component/summary/summary.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
+
+@Component({
+  selector: 'of-probe-summary',
+  templateUrl: './summary.component.html',
+})
+export class ProbeSummaryComponent  {
+
+  @Input() probeHost: ProbeHost;
+
+  constructor() {
+  }
+}
+

src/environments/environment.ts

@@ -5,7 +5,7 @@
 
 export const environment = {
   production: false,
-  restBaseURL: 'http://192.168.1.103:19080/webapp',
+  restBaseURL: 'http://192.168.1.101:19080/webapp',
   webappRPCConfig: {
     url: 'ws://192.168.1.101:19090/webapp',
     reconnectInterval: 5000,

src/styles.scss

@@ -162,7 +162,7 @@
 
         .profile {
             box-sizing: border-box;
-            padding-top: 1.2em !important;
+            padding-top: 2em !important;
             width: 200px !important;
             height: 110px !important;
             text-align: center;
@@ -414,6 +414,7 @@
             li {
                 display: inline-block;
                 vertical-align: top;
+                font-size: 12px !important;
                 //color: $textSecondaryColor;
 
                 &:nth-child(even) {
@@ -1842,10 +1843,19 @@ body .ui-progressbar .ui-progressbar-value {
     font-size: 50px;
     color: #ffffff !important;
 }
-.ui-panel {
+.block-panel>div {
     border: none !important;
 }
+.block-panel div .ui-panel-content {
+        padding : 0px !important;
+        margin : 0px !important;
+}
 
 .ui-blockui.ui-widget-overlay {
     opacity: 0;
 }
+.ui-tab-bgcolor{
+     .ui-tabview-nav > li.ui-state-active {
+        background-color: #f3f3f3 !important;
+     }
+}