ing

@overflow/discovery/service/discovery.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { RPCService } from '@loafer/ng-rpc';
 import {

@overflow/discovery/service/target-discovery.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import {
   DiscoveryStartInfo,

@overflow/infra/component/index.ts

@@ -1,11 +1,13 @@
 import { InfraMapComponent } from './infra-map.component';
 // import { InfraProbeSummaryComponent } from './infra-probe-summary.component';
+import { InfraHostComponent } from './infra-host.component';
 import { InfraHostSummaryComponent } from './infra-host-summary.component';
 import { InfraServiceSummaryComponent } from './infra-service-summary.component';
 
 export const COMPONENTS = [
   InfraMapComponent,
   // InfraProbeSummaryComponent,
+  InfraHostComponent,
   InfraHostSummaryComponent,
-  InfraServiceSummaryComponent
+  InfraServiceSummaryComponent,
 ];

@overflow/infra/component/infra-host.component.html

@@ -0,0 +1,46 @@
+<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+
+<p-panel #content [showHeader]="false" class="block-panel">
+
+  <div class="ui-g">
+      <div class="ui-g-6 ui-nopad">
+        <h3>Host</h3>
+      </div>
+  
+      <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
+      </div>
+    </div>
+  
+    <!-- Host info -->
+  <div class="ui-g ui-bottom-space-10">
+    <div class="ui-g-12 ui-nopad">
+      <p-panel [showHeader]="false">
+        <div *ngIf="infraHost">
+          <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]="infraHost.ipv4"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'IPv6'" [value]="infraHost.ipv6 | uppercase"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'Mac Address'" [value]="infraHost.mac"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'OS'" [value]="infraHost.os.vendor.name"></of-key-value>
+            </div>
+          </div>
+        </div>
+      </p-panel>
+    </div>
+  </div>
+
+</p-panel>
+
+
+<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+<p-growl [(value)]="msgs"></p-growl> -->

@overflow/infra/component/infra-host.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { AuthSelector } from '@overflow/shared/auth/store';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
+import { InfraHost } from '@overflow/commons-typescript/model/infra';
+import { InfraHostService } from '../service/infra-host.service';
+
+@Component({
+  selector: 'of-infra-host',
+  templateUrl: './infra-host.component.html',
+})
+export class InfraHostComponent implements OnInit {
+
+  @Input() infraHost: InfraHost;
+  @Input() infraHostID: number;
+  error$: Observable<any>;
+  pending$: Observable<boolean>;
+
+  constructor(
+    private infraHostService: InfraHostService,
+  ) {
+  }
+
+  ngOnInit() {
+    if (undefined === this.infraHost && undefined === this.infraHostID) {
+      // Create
+    } else if (undefined !== this.infraHost && undefined === this.infraHostID) {
+      // use infraHost
+    } else if (undefined === this.infraHost && undefined !== this.infraHostID) {
+      // get infraHost
+      this.infraHostService.read(this.infraHostID)
+        .pipe(
+          tap(() => {
+            this.pending$ = of(true);
+          }),
+          map((infraHost: InfraHost) => {
+            this.infraHost = infraHost;
+          }),
+          catchError(error => {
+            this.error$ = of(error);
+            return of();
+          }),
+          tap(() => {
+            this.pending$ = of(false);
+          }),
+      ).take(1).subscribe();
+    } else {
+      // error
+    }
+  }
+
+}
+

@overflow/infra/component/infra-map.component.ts

@@ -64,7 +64,7 @@ export class InfraMapComponent implements OnInit, AfterContentInit {
 
   constructor(
     private store: Store<any>,
-    private infraService: InfraService,
+    // private infraService: InfraService,
   ) {
 
   }

@overflow/infra/infra.module.ts

@@ -5,7 +5,7 @@ import { SERVICES } from './service';
 import { FormsModule } from '@angular/forms';
 import { DiscoveryModule } from '@overflow/discovery/discovery.module';
 import { SensorModule } from '@overflow/sensor/sensor.module';
-import { ProbeModule } from '@overflow/probe/probe.module';
+// import { ProbeModule } from '@overflow/probe/probe.module';
 import { MetaModule } from '@overflow/meta/meta.module';
 import { UIModule } from '@overflow/shared/ui/ui.module';
 
@@ -16,7 +16,7 @@ import { UIModule } from '@overflow/shared/ui/ui.module';
     UIModule,
     DiscoveryModule,
     SensorModule,
-    ProbeModule,
+    // ProbeModule,
     MetaModule,
   ],
   declarations: [

@overflow/infra/service/infra-host.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { InfraHostService } from './infra-host.service';
+
+describe('InfraHostService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [InfraHostService]
+    });
+  });
+
+  it('should be created', inject([InfraHostService], (service: InfraHostService) => {
+    expect(service).toBeTruthy();
+  }));
+});

@overflow/infra/service/infra-host.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { RPCService } from '@loafer/ng-rpc';
+
+import { InfraHost } from '@overflow/commons-typescript/model/infra';
+
+@Injectable()
+export class InfraHostService {
+
+  public constructor(
+    private rpcService: RPCService,
+  ) {
+
+  }
+
+  // public readAllByDomain(domain: Domain, pageParams: PageParams): Observable<Page> {
+  //   return this.rpcService.call('InfraService.readAllByDomain', domain, pageParams);
+  // }
+
+  // public readAllByProbe(probe: Probe, pageParams: PageParams): Observable<Page> {
+  //   return this.rpcService.call('InfraService.readAllByProbe', probe, pageParams);
+  // }
+
+  public read(id: number): Observable<InfraHost> {
+    return this.rpcService.call('InfraHostService.read', id);
+  }
+}

@overflow/infra/service/infra.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/member/service/email-auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/member/service/member-totp.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { RPCService } from '@loafer/ng-rpc';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { MemberTotp } from '@overflow/commons-typescript/model/member';
 import { Member } from '@overflow/commons-typescript/model/member';
 

@overflow/member/service/member.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/meta/service/meta-crawler-input-item.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaCrawlerInputItem } from '@overflow/commons-typescript/model/meta';
 import { MetaCrawler } from '@overflow/commons-typescript/model/meta';

@overflow/meta/service/meta-history-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaHistoryType } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-infra-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaInfraType } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-infra-vendor.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaInfraType, MetaInfraVendor } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-input-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaInputType } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-member-status.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaMemberStatus } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-noauth-probe-status.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaNoAuthProbeStatus } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-notification.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaCrawler, MetaNotification } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-architecture.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeArchitecture } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-os.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeOs } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-package.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeOs, MetaProbePackage } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-status.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeStatus } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-task-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeTaskType } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-probe-version.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaProbeVersion } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-display-item.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/meta/service/meta-sensor-display-mapping.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaSensorDisplayItem, MetaSensorItemKey } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-item-key.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaCrawler, MetaSensorItemKey } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-item-type.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaSensorItemType } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-item-unit.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaCrawler, MetaSensorItemUnit } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-item.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaSensorItem } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-sensor-status.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaSensorStatus } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-vendor-crawler-sensor-item.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaVendorCrawlerSensorItem } from '@overflow/commons-typescript/model/meta';
 

@overflow/meta/service/meta-vendor-crawler.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { RPCService } from '@loafer/ng-rpc';
 import { MetaInfraVendor, MetaVendorCrawler } from '@overflow/commons-typescript/model/meta';
 

@overflow/noauth-probe/service/noauth-probe.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/notification/container/badge/badge-container.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AfterContentInit, OnDestroy, OnChanges, SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Store, select } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { Domain, DomainMember } from '@overflow/commons-typescript/model/domain';
 import * as NotificationEntityStore from '../../store/entity/notification';
 import { NotificationEntitySelector } from '../../store/';

@overflow/notification/container/list/list-container.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Store, select } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import * as NotificationEntityStore from '../../store/entity/notification';
 import { NotificationEntitySelector } from '../../store/';
 import { AuthSelector } from '@overflow/shared/auth/store';

@overflow/notification/service/notification.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/notification/store/entity/notification/notification.effect.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { Effect, Actions, ofType } from '@ngrx/effects';
 import { Action } from '@ngrx/store';
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { of } from 'rxjs/observable/of';
 
 import 'rxjs/add/operator/catch';

@overflow/probe/component/index.ts

@@ -4,10 +4,15 @@ import { ProbeDownloadComponent } from './probe-download.component';
 import { ProbeSelectorComponent } from './probe-selector.component';
 import { ProbeSummaryComponent } from './probe-summary.component';
 
+import { ProbeGeneralComponent } from './probe-general.component';
+import { ProbeHostComponent } from './probe-host.component';
+
 export const COMPONENTS = [
   ProbeListComponent,
   ProbeDetailComponent,
   ProbeDownloadComponent,
   ProbeSelectorComponent,
-  ProbeSummaryComponent
+  ProbeSummaryComponent,
+  ProbeGeneralComponent,
+  ProbeHostComponent,
 ];

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

@@ -1,95 +1,13 @@
 <of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
 <of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
 
-<p-panel #content [showHeader]="false" class="block-panel">
-
-  <div class="ui-g">
-    <div class="ui-g-6 ui-nopad">
-      <h1>Info</h1>
-    </div>
-
-    <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
-      <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
-      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
-      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
-    </div>
-  </div>
-
-  <!-- Probe info -->
-  <div class="ui-g ui-bottom-space-10">
-    <div class="ui-g-12 ui-nopad">
-      <p-panel [showHeader]="false">
-        <div *ngIf="probeHost">
-          <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>
-                <span class="ng-star-inserted">
-                  <input #displayName type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
-                  <div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
-                </span>
-              </div>
-              <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probeHost.probe.displayName"></of-key-value>
-            </div>
-
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'CIDR'" [value]="probeHost.probe.cidr"></of-key-value>
-            </div>
-            <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>Description</span>
-                <span class="ng-star-inserted">
-                  <input #description type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
-                  <div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
-                </span>
-              </div>
-              <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probeHost.probe.description"></of-key-value>
-            </div>
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'Key'" [value]="probeHost.probe.probeKey"></of-key-value>
-            </div>
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'Authrozied at'" [value]="probeHost.probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
-            </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]="probeHost.probe.authorizeMember.name"></of-key-value>
-            </div>
-          </div>
-        </div>
-      </p-panel>
-    </div>
-  </div>
-
-    <!-- Host info -->
-  <div class="ui-g ui-bottom-space-10">
-    <div class="ui-g-12 ui-nopad">
-      <p-panel [showHeader]="false">
-        <div *ngIf="probeHost">
-          <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>
-
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6 | uppercase"></of-key-value>
-            </div>
-
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'Mac Address'" [value]="probeHost.host.mac"></of-key-value>
-            </div>
-
-            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
-              <of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
-            </div>
-          </div>
-        </div>
-      </p-panel>
-    </div>
-  </div>
+<p-panel *ngIf="probeHost" #content [showHeader]="false" class="block-panel">
+  <of-probe-general [probe]="probeHost.probe" (modified)="modifiedGeneral($event)"></of-probe-general>
+  <of-probe-host [infraHost]="probeHost.host"></of-probe-host>
 
   <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>
+      (click)="remove(probeHost)"></button>
     <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="discovery.emit(probeHost.id)"></button>
   </div>
 </p-panel>

@overflow/probe/component/probe-detail.component.ts

@@ -6,7 +6,6 @@ import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import { AuthSelector } from '@overflow/shared/auth/store';
 import { DomainMember } from '@overflow/commons-typescript/model/domain';
 import { ProbeHostService } from '../service/probe-host.service';
-import { ProbeService } from '../service/probe.service';
 
 @Component({
   selector: 'of-probe-detail',
@@ -21,16 +20,9 @@ export class ProbeDetailComponent implements OnInit {
 
   @Output() discovery = new EventEmitter<number>();
 
-  editMode = false;
-  displayNameErrMsg: string;
-  descriptionErrMsg: string;
-  displayName: string;
-  description: string;
-
   constructor(
     private store: Store<any>,
     private probeHostService: ProbeHostService,
-    private probeService: ProbeService,
   ) {
   }
 
@@ -53,70 +45,12 @@ export class ProbeDetailComponent implements OnInit {
     ).take(1).subscribe();
   }
 
+  modifiedGeneral(probe: Probe) {
+
+  }
+
+  remove(probeHost: ProbeHost) {
 
-  onDisplayNameEditing(value: string) {
-    const msg: string = this.checkValidDisplayName(value);
-    if (msg !== null) {
-      this.displayNameErrMsg = msg;
-    } else {
-      this.displayNameErrMsg = null;
-      this.displayName = value.trim();
-    }
-  }
-
-  onDescriptionEditing(value: string) {
-    const msg: string = this.checkValidDescription(value);
-    if (msg !== null) {
-      this.descriptionErrMsg = msg;
-    } else {
-      this.descriptionErrMsg = null;
-      this.description = value.trim();
-    }
-  }
-
-  onEditSave() {
-    this.probeHost.probe.displayName = this.displayName ? this.displayName : this.probeHost.probe.displayName;
-    this.probeHost.probe.description = this.description ? this.description : this.probeHost.probe.description;
-
-    this.probeService.modify(this.probeHost.probe)
-      .pipe(
-        tap(() => {
-          this.pending$ = of(true);
-        }),
-        map((probe: Probe) => {
-          this.editMode = false;
-          this.probeHost.probe = probe;
-        }),
-        catchError(error => {
-          this.error$ = of(error);
-          return of();
-        }),
-        tap(() => {
-          this.pending$ = of(false);
-        }),
-    ).take(1).subscribe();
-  }
-
-  checkValidDisplayName(value: string): string | null {
-    if (value.length <= 2 || value.length > 20) {
-      return 'displayname length : 3 ~ 20';
-    }
-    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
-    if (value.match(regex)) {
-      return 'Cannot use special characters.';
-    }
-    return null;
-  }
-
-  checkValidDescription(value: string): string | null {
-    if (value.length > 50) {
-      return 'description length : 0 ~ 50';
-    }
-    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
-    if (value.match(regex)) {
-      return 'Cannot use special characters.';
-    }
-    return null;
   }
 }
 

@overflow/probe/component/probe-general.component.html

@@ -0,0 +1,66 @@
+<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+
+<p-panel #content [showHeader]="false" class="block-panel">
+
+  <div class="ui-g">
+    <div class="ui-g-6 ui-nopad">
+      <h3>General</h3>
+    </div>
+
+    <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
+      <button class="ui-button-width-fit" *ngIf="!editMode" pButton type="button" label="Edit" (click)="editMode = true"></button>
+      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Save" (click)="onEditSave()" [disabled]="displayNamedisplayNameErrMsg || descriptionErrMsg"></button>
+      <button class="ui-button-width-fit" *ngIf="editMode" pButton type="button" label="Cancel" (click)="editMode = false"></button>
+    </div>
+  </div>
+
+  <!-- Probe info -->
+  <div class="ui-g ui-bottom-space-10">
+    <div class="ui-g-12 ui-nopad">
+      <p-panel [showHeader]="false">
+        <div *ngIf="probe">
+          <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>
+                <span class="ng-star-inserted">
+                  <input #displayName type="text" pInputText value="{{probe.displayName}}" (keyup)="onDisplayNameEditing(displayName.value)"/>
+                  <div *ngIf="displayNameErrMsg" class="ui-message ui-messages-error ui-corner-all">{{displayNameErrMsg}}</div>
+                </span>
+              </div>
+              <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
+            </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 *ngIf="editMode" class="of-key-value-div">
+                <span>Description</span>
+                <span class="ng-star-inserted">
+                  <input #description type="text" pInputText value="{{probe.description}}" (keyup)="onDescriptionEditing(description.value)"/>
+                  <div *ngIf="descriptionErrMsg" class="ui-message ui-messages-error ui-corner-all">{{descriptionErrMsg}}</div>
+                </span>
+              </div>
+              <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
+            </div>
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
+            </div>
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
+            </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>
+        </div>
+      </p-panel>
+    </div>
+  </div>
+</p-panel>
+
+
+<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+<p-growl [(value)]="msgs"></p-growl> -->

@overflow/probe/component/probe-general.component.ts

@@ -0,0 +1,129 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
+import { Store, select } from '@ngrx/store';
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+import { AuthSelector } from '@overflow/shared/auth/store';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
+import { ProbeHostService } from '../service/probe-host.service';
+import { ProbeService } from '../service/probe.service';
+
+@Component({
+  selector: 'of-probe-general',
+  templateUrl: './probe-general.component.html',
+})
+export class ProbeGeneralComponent implements OnInit {
+
+  @Input() probeID: number;
+  @Input() probe: Probe;
+  @Output() modified = new EventEmitter<Probe>();
+
+  error$: Observable<any>;
+  pending$: Observable<boolean>;
+
+  editMode = false;
+  displayNameErrMsg: string;
+  descriptionErrMsg: string;
+  displayName: string;
+  description: string;
+
+  constructor(
+    private probeService: ProbeService,
+  ) {
+  }
+
+  ngOnInit() {
+    if (undefined === this.probe && undefined === this.probeID) {
+      // Create
+    } else if (undefined !== this.probe && undefined === this.probeID) {
+      // use probe
+    } else if (undefined === this.probe && undefined !== this.probeID) {
+      // get probe
+      this.probeService.read(this.probeID)
+        .pipe(
+          tap(() => {
+            this.pending$ = of(true);
+          }),
+          map((probe: Probe) => {
+            this.probe = probe;
+          }),
+          catchError(error => {
+            this.error$ = of(error);
+            return of();
+          }),
+          tap(() => {
+            this.pending$ = of(false);
+          }),
+      ).take(1).subscribe();
+    } else {
+      // error
+    }
+  }
+
+  onDisplayNameEditing(value: string) {
+    const msg: string = this.checkValidDisplayName(value);
+    if (msg !== null) {
+      this.displayNameErrMsg = msg;
+    } else {
+      this.displayNameErrMsg = null;
+      this.displayName = value.trim();
+    }
+  }
+
+  onDescriptionEditing(value: string) {
+    const msg: string = this.checkValidDescription(value);
+    if (msg !== null) {
+      this.descriptionErrMsg = msg;
+    } else {
+      this.descriptionErrMsg = null;
+      this.description = value.trim();
+    }
+  }
+
+  onEditSave() {
+    this.probe.displayName = this.displayName ? this.displayName : this.probe.displayName;
+    this.probe.description = this.description ? this.description : this.probe.description;
+
+    this.probeService.modify(this.probe)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((probe: Probe) => {
+          this.editMode = false;
+          this.probe = probe;
+          this.modified.emit(probe);
+        }),
+        catchError(error => {
+          this.error$ = of(error);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+    ).take(1).subscribe();
+  }
+
+  checkValidDisplayName(value: string): string | null {
+    if (value.length <= 2 || value.length > 20) {
+      return 'displayname length : 3 ~ 20';
+    }
+    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
+    if (value.match(regex)) {
+      return 'Cannot use special characters.';
+    }
+    return null;
+  }
+
+  checkValidDescription(value: string): string | null {
+    if (value.length > 50) {
+      return 'description length : 0 ~ 50';
+    }
+    const regex = /[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi;
+    if (value.match(regex)) {
+      return 'Cannot use special characters.';
+    }
+    return null;
+  }
+}
+

@overflow/probe/component/probe-host.component.html

@@ -0,0 +1,46 @@
+<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
+
+<p-panel #content [showHeader]="false" class="block-panel">
+
+  <div class="ui-g">
+      <div class="ui-g-6 ui-nopad">
+        <h3>Host</h3>
+      </div>
+  
+      <div class="ui-g-6 nopad" dir="rtl" style="padding-top: 15px">
+      </div>
+    </div>
+  
+    <!-- Host info -->
+  <div class="ui-g ui-bottom-space-10">
+    <div class="ui-g-12 ui-nopad">
+      <p-panel [showHeader]="false">
+        <div *ngIf="infraHost">
+          <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]="infraHost.ipv4"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'IPv6'" [value]="infraHost.ipv6 | uppercase"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'Mac Address'" [value]="infraHost.mac"></of-key-value>
+            </div>
+
+            <div class="ui-g-12 ui-md-6 ui-key-value ui-bottom-border-1 ui-nopad">
+              <of-key-value [key]="'OS'" [value]="infraHost.os.vendor.name"></of-key-value>
+            </div>
+          </div>
+        </div>
+      </p-panel>
+    </div>
+  </div>
+
+</p-panel>
+
+
+<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+<p-growl [(value)]="msgs"></p-growl> -->

@overflow/probe/component/probe-host.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, of, Subscription } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { AuthSelector } from '@overflow/shared/auth/store';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
+import { InfraHost } from '@overflow/commons-typescript/model/infra';
+
+@Component({
+  selector: 'of-probe-host',
+  templateUrl: './probe-host.component.html',
+})
+export class ProbeHostComponent implements OnInit {
+
+  @Input() infraHost: InfraHost;
+  @Input() infraHostID: number;
+  error$: Observable<any>;
+  pending$: Observable<boolean>;
+
+  constructor(
+  ) {
+  }
+
+  ngOnInit() {
+    if (undefined === this.infraHost && undefined === this.infraHostID) {
+      // Create
+    } else if (undefined !== this.infraHost && undefined === this.infraHostID) {
+      // use infraHost
+    } else if (undefined === this.infraHost && undefined !== this.infraHostID) {
+      // get infraHost
+    } else {
+      // error
+    }
+  }
+
+}
+

@overflow/probe/probe.module.ts

@@ -5,6 +5,7 @@ import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { FormsModule } from '@angular/forms';
 import { MetaModule } from '@overflow/meta/meta.module';
+// import { InfraModule } from '@overflow/infra/infra.module';
 import { UIModule } from '@overflow/shared/ui/ui.module';
 
 @NgModule({
@@ -13,6 +14,7 @@ import { UIModule } from '@overflow/shared/ui/ui.module';
     FormsModule,
     UIModule,
     MetaModule,
+    // InfraModule,
   ],
   declarations: [
     COMPONENTS,

@overflow/probe/service/probe-host.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import { RPCService } from '@loafer/ng-rpc';
 import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';

@overflow/probe/service/probe.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 
@@ -23,7 +23,7 @@ export class ProbeService {
     return this.rpcService.call<Probe[]>('ProbeService.readAllByDomain', domain);
   }
 
-  public read(id: string): Observable<Probe> {
+  public read(id: number): Observable<Probe> {
     return this.rpcService.call<Probe>('ProbeService.read', id);
   }
 
@@ -31,11 +31,11 @@ export class ProbeService {
     return this.rpcService.call<Probe>('ProbeService.modify', probe);
   }
 
-  public remove(id: string): Observable<boolean> {
+  public remove(id: number): Observable<boolean> {
     return this.rpcService.call<boolean>('ProbeService.remove', id);
   }
 
-  public modifyDisplayName(id: string, displayName: string): Observable<Probe> {
+  public modifyDisplayName(id: number, displayName: string): Observable<Probe> {
     return this.rpcService.call<Probe>('ProbeService.modifyDisplayName', id, displayName);
   }
 

@overflow/sensor-item/service/sensor-item-dependency.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { RPCService } from '@loafer/ng-rpc';
 import { SensorItemDependency } from '@overflow/commons-typescript/model/sensor-item';

@overflow/sensor/service/sensor.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

@overflow/target/service/target.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import 'rxjs/add/operator/map';
 

src/app/commons/component/layout/banner/app.banner.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { ActivatedRoute, Router } from '@angular/router';
 import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 
 @Component({

src/app/commons/component/layout/profile/app.profile.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { ActivatedRoute, Router } from '@angular/router';
 import { select, Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { Member } from '@overflow/commons-typescript/model/member';
 import { AuthSelector } from '@overflow/shared/auth/store';

src/app/commons/service/auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
 import { RESTService } from '@loafer/ng-rest';
 import { DomainMember } from '@overflow/commons-typescript/model/domain';

src/app/commons/service/breadcrumb.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { MenuItem } from 'primeng/primeng';
 
 @Injectable()