probe detail in progress

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

@@ -8,58 +8,76 @@
   </div>
 </div>
 
-<p-dialog [showHeader]="false" [closeOnEscape]="false" [modal]="true" header="Discovery" [width]="800" [(visible)]="display">
+<!-- Probe info -->
-  <of-discovery-setting [probe]="probe" [visible]="display" (close)="onDiscoveryClose()"></of-discovery-setting>
-</p-dialog>
 <div class="ui-g ui-bottom-space-10">
   <p-panel [showHeader]="false" class="nopad">
-    <div *ngIf="probe">
+    <div *ngIf="probeHost">
-
-
       <div class="ui-g form-group">
-
         <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 #input type="text" pInputText value="{{probe.displayName}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+              <input #input type="text" pInputText value="{{probeHost.probe.displayName}}" (keyup)="probeHost.probe.displayName = input.value">
             </span>
           </div>
-          <of-key-value *ngIf="!editMode" [key]="'Name'" [value]="probe.displayName"></of-key-value>
+          <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]="probe.cidr"></of-key-value>
+          <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 *ngIf="editMode" #input type="text" pInputText value="{{probe.description}}" (keypress)="onDisplayNameChangeKeypress($event, input.value)">
+              <input *ngIf="editMode" #input type="text" pInputText value="{{probeHost.probe.description}}" (keyup)="probeHost.probe.description = input.value">
             </span>
           </div>
-          <of-key-value *ngIf="!editMode" [key]="'Description'" [value]="probe.description"></of-key-value>
+          <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]="probe.probeKey"></of-key-value>
+          <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]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
+          <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]="probe.authorizeMember.name"></of-key-value>
+          <of-key-value [key]="'Authrozied by'" [value]="probeHost.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>
   </p-panel>
+
+  <!-- Host info -->
+  <p-panel [showHeader]="false" class="nopad">
+    <div *ngIf="probeHost">
+      <div class="ui-g form-group">
+
+        <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"></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 class="ui-g" dir="rtl">
   <button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
     (click)="onRemoveClick()"></button>
   <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
 </div>
-<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
+<!-- <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
-<p-growl [(value)]="msgs"></p-growl>
+<p-growl [(value)]="msgs"></p-growl> -->

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

@@ -1,129 +1,30 @@
-import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';
-import { Store, select } from '@ngrx/store';
-import { RPCClientError } from '@loafer/ng-rpc';
-// import * as DetailStore from '../../store/detail';
-// import * as ModifyStore from '../../store/modify';
-// import { DetailSelector, ModifySelector } from '../../store';
-import { Probe } from '@overflow/commons-typescript/model/probe';
-import { ConfirmationService, Message } from 'primeng/primeng';
-import * as CIDR from 'ip-cidr';
-import { Subscription } from 'rxjs/Subscription';
-import { MessageService } from 'primeng/components/common/messageservice';
-// import { SettingComponent as DiscoverySettingComponent } from '@overflow/discovery/component/setting/setting.component';
 
 
 @Component({
   selector: 'of-probe-detail',
   templateUrl: './detail.component.html',
-  providers: [ConfirmationService, MessageService]
+  // providers: [ConfirmationService, MessageService]
 })
-export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ProbeDetailComponent {
 
-  probeSubscription$: Subscription;
+  @Input() probeHost: ProbeHost;
-  // probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
+  @Output() modify = new EventEmitter<ProbeHost>();
-  // modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
+  @Output() discovery = new EventEmitter<number>();
-  probe: Probe = null;
-  IPRange: string;
-  display = false;
-  msgs: Message[] = [];
 
-  constructor(
+  editMode = false;
-    private route: ActivatedRoute,
-    // private detailStore: Store<DetailStore.State>,
-    // private modifyStore: Store<ModifyStore.State>,
-    private confirmationService: ConfirmationService,
-    private messageService: MessageService
-  ) { }
 
-  ngOnInit() {
+  constructor() {
-    // this.probeSubscription$ = this.probe$.subscribe(
-    //   (probe: Probe) => {
-    //     if (probe) {
-    //       this.probe = probe;
-    //       this.arrangeInfo();
-    //     }
-    //   },
-    //   (error: RPCClientError) => {
-    //     console.log(error.response.message);
-    //   }
-    // );
   }
 
-  ngOnDestroy() {
+  onEditSave() {
-    if (this.probeSubscription$) {
+    this.modify.emit(this.probeHost);
-      this.probeSubscription$.unsubscribe();
+    this.editMode = false;
-    }
-  }
-
-  ngAfterContentInit() {
-    // const probeId = this.route.snapshot.paramMap.get('id');
-    // this.detailStore.dispatch(
-    //   new DetailStore.Read(
-    //     { id: probeId }
-    //   )
-    // );
-  }
-
-  arrangeInfo() {
-    const cidr = new CIDR(this.probe.cidr);
-    if (!cidr.isValid()) {
-      return;
-    }
-    this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
   }
 
   onDiscoveryClick() {
-    this.display = true;
+    this.discovery.emit(this.probeHost.id);
-  }
-
-  onDiscoveryClose() {
-    this.display = false;
-  }
-
-  onRemoveClick() {
-    this.confirmationService.confirm({
-      header: 'Confirmation',
-      icon: 'fa fa-trash',
-      message: 'Are you sure to remove this Probe?',
-      accept: () => {
-        // this.router.navigate(['probes/list']);
-      },
-      reject: () => {
-      }
-    });
-  }
-
-  onDisplayNameChange(value: string) {
-    // if (value === this.probe.displayName) {
-    //   return;
-    // }
-    // this.probe.displayName = value;
-    // this.modifyStore.dispatch(
-    //   new ModifyStore.Modify(this.probe)
-    // );
-
-    // const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
-    //   (probe: Probe) => {
-    //     if (probe) {
-    //       this.msgs = [];
-    //       this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
-    //     }
-    //     if (modifySuccessSubscription$) {
-    //       modifySuccessSubscription$.unsubscribe();
-    //     }
-    //   },
-    //   (error: RPCClientError) => {
-    //     console.log(error.response.message);
-    //   }
-    // );
-  }
-
-  onDisplayNameChangeKeypress(event, value) {
-    if (event.key === 'Enter') {
-      this.onDisplayNameChange(value);
   }
 }
 
-}
-

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

@@ -1 +1 @@
-<of-probe-detail></of-probe-detail>
+<of-probe-detail [probeHost]="(probeHosts$ | async)[0]" (modify)="onModify($event)" (discovery)="onDiscovery($event)"></of-probe-detail>

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

@@ -1,9 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
+import { Store, select } from '@ngrx/store';
+import * as ProbeStore from '../store/entity/probe';
+import { ProbeSelector } from '../store';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-probe-detail-container',
   templateUrl: './probe-detail-container.html',
 })
-export class ProbeDetailContainerComponent  {
+export class ProbeDetailContainerComponent implements OnInit {
 
+  @Input() probeHostID;
+  @Output() discovery = new EventEmitter<number>();
+  probeHosts$: Observable<ProbeHost[]>;
+
+  constructor(
+    private store: Store<ProbeStore.State>,
+    private route: ActivatedRoute,
+  ) {
+    this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
+  }
+
+  ngOnInit() {
+    this.store.dispatch(new ProbeStore.Read(this.probeHostID));
+  }
+
+  onModify(probeHost: ProbeHost) {
+    this.store.dispatch(new ProbeStore.Modify(probeHost.probe));
+  }
+
+  onDiscovery(probeHostID: number) {
+    this.discovery.emit(probeHostID);
+  }
 }

@overflow/probe/container/probe-list-container.ts

@@ -1,8 +1,8 @@
-import { Component, EventEmitter, Output, OnInit, AfterContentInit } from '@angular/core';
+import { Component, EventEmitter, Output, OnInit } from '@angular/core';
 import { ProbeHost } from '@overflow/commons-typescript/model/probe';
 import { Observable } from 'rxjs';
 import { Store, select } from '@ngrx/store';
-import * as ProbeStore from '../store/probe';
+import * as ProbeStore from '../store/entity/probe';
 import { ProbeSelector } from '../store';
 import { AuthSelector } from '@overflow/member/store';
 import { Domain } from '@overflow/commons-typescript/model/domain';
@@ -11,7 +11,7 @@ import { Domain } from '@overflow/commons-typescript/model/domain';
     selector: 'of-probe-list-container',
     templateUrl: './probe-list-container.html',
 })
-export class ProbeListContainerComponent implements OnInit, AfterContentInit {
+export class ProbeListContainerComponent implements OnInit {
 
     probeHosts$: Observable<ProbeHost[]>;
     @Output() select = new EventEmitter();
@@ -20,10 +20,6 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
         this.probeHosts$ = store.pipe(select(ProbeSelector.select('probeHosts')));
     }
 
-    onSelect(probeHost: ProbeHost) {
-        this.select.emit(probeHost);
-    }
-
     ngOnInit() {
         this.store.select(AuthSelector.select('domain')).subscribe(
             (domain: Domain) => {
@@ -35,7 +31,8 @@ export class ProbeListContainerComponent implements OnInit, AfterContentInit {
         );
     }
 
-    ngAfterContentInit() {
+    onSelect(probeHost: ProbeHost) {
+        this.select.emit(probeHost);
+    }
 
 }
-}

@overflow/probe/store/entity/probe/probe.action.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc';
-import { ProbeHost } from '@overflow/commons-typescript/model/probe';
+import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 
 export enum ActionType {
   ReadAllByDomainID = '[probe.list] ReadAllByDomainID',
@@ -10,6 +10,10 @@ export enum ActionType {
   Read = '[probe.detail] Read',
   ReadSuccess = '[probe.detail] ReadSuccess',
   ReadFailure = '[probe.detail] ReadFailure',
+
+  Modify = '[probe.detail] Modify',
+  ModifySuccess = '[probe.detail] ModifySuccess',
+  ModifyFailure = '[probe.detail] ModifyFailure',
 }
 
 export class ReadAllByDomainID implements Action {
@@ -48,6 +52,24 @@ export class ReadFailure implements Action {
   constructor(public payload: RPCClientError) {}
 }
 
+export class Modify implements Action {
+  readonly type = ActionType.Modify;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ModifySuccess implements Action {
+  readonly type = ActionType.ModifySuccess;
+
+  constructor(public payload: Probe) {}
+}
+
+export class ModifyFailure implements Action {
+  readonly type = ActionType.ModifyFailure;
+
+  constructor(public payload: RPCClientError) {}
+}
+
 export type Actions =
   | ReadAllByDomainID
   | ReadAllByDomainIDSuccess
@@ -55,4 +77,7 @@ export type Actions =
   | Read
   | ReadSuccess
   | ReadFailure
+  | Modify
+  | ModifySuccess
+  | ModifyFailure
 ;

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

@@ -25,9 +25,13 @@ import {
   Read,
   ReadSuccess,
   ReadFailure,
+  Modify,
+  ModifySuccess,
+  ModifyFailure,
   ActionType
 } from './probe.action';
-import { ProbeHostService } from '../../service/probe-host.service';
+import { ProbeHostService } from '../../../service/probe-host.service';
+import { ProbeService } from '../../../service/probe.service';
 
 @Injectable()
 export class Effects {
@@ -35,6 +39,7 @@ export class Effects {
   constructor(
     private actions$: Actions,
     private probeHostService: ProbeHostService,
+    private probeService: ProbeService,
     private router: Router
   ) { }
 
@@ -61,4 +66,16 @@ export class Effects {
     .catch((error: RPCClientError) => {
       return of(new ReadAllByDomainIDFailure(error));
     });
+
+    @Effect()
+    Modify$: Observable<Action> = this.actions$
+      .ofType(ActionType.Modify)
+      .map((action: Modify) => action.payload)
+      .switchMap(payload => this.probeService.modify(payload))
+      .map(probe => {
+        return new ModifySuccess(probe);
+      })
+      .catch((error: RPCClientError) => {
+        return of(new ModifyFailure(error));
+      });
 }

@overflow/probe/store/entity/probe/probe.reducer.ts

@@ -1,7 +1,4 @@
 import {
-  ReadAllByDomainID,
-  ReadAllByDomainIDFailure,
-  ReadAllByDomainIDSuccess,
   ActionType,
   Actions,
 } from './probe.action';
@@ -61,6 +58,21 @@ export function reducer(state = initialState, action: Actions): State {
       };
     }
 
+    case ActionType.Modify: {
+      return {
+        ...state,
+        error: null,
+      };
+    }
+
+    case ActionType.ModifyFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        probeHosts: null,
+      };
+    }
+
     default: {
       return state;
     }

@overflow/probe/store/index.ts

@@ -8,7 +8,7 @@ import { StateSelector } from '@overflow/core/ngrx/store';
 
 import { MODULE } from '../probe.constant';
 
-import * as ProbeStore from './probe';
+import * as ProbeStore from './entity/probe';
 
 export interface State {
   probes: ProbeStore.State;

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

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { AppComponent } from '../../../../app.component';
-import { BreadcrumbService } from '../../../../commons/service/breadcrumb.service';
+import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 import { Subscription } from 'rxjs/Subscription';
 import { MenuItem } from 'primeng/primeng';
 

src/app/pages/discovery/discovery-page-routing.module.ts

@@ -8,6 +8,10 @@ const routes: Routes = [
   {
     path: '',
     component: DiscoveryPageComponent,
+  },
+  {
+    path: ':probeHostID',
+    component: DiscoveryPageComponent,
   }
 ];
 

src/app/pages/discovery/discovery-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-discovery-page',
@@ -7,8 +8,13 @@ import { Component, OnInit } from '@angular/core';
 export class DiscoveryPageComponent implements OnInit {
 
   constructor(
+    private route: ActivatedRoute
   ) { }
 
   ngOnInit() {
+    this.route.params.subscribe((params: any) => {
+      const probeHostID = params['probeHostID'];
+      console.log('probeHostID : ' + probeHostID);
+    });
   }
 }

src/app/pages/notification/notification-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { BreadcrumbService } from '../../commons/service/breadcrumb.service';
+import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 import { Router } from '@angular/router';
 
 

src/app/pages/pages.component.ts

@@ -64,7 +64,6 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   constructor(public renderer: Renderer, public zone: NgZone, private router: Router, private breadcrumbService: BreadcrumbService) {
     router.events.subscribe((val) => {
-      console.log(val);
       if (val instanceof NavigationStart) {
         breadcrumbService.setItems(null);
       }

src/app/pages/probes/download/download-page.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
+import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-download',

src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
+import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-noauth-probe',

src/app/pages/probes/probe/probe-page.component.html

@@ -3,5 +3,8 @@
 </div>
 
 <ng-template #detailView>
-    <of-probe-detail-container (targetSelect)="onTargetSelect($event)"></of-probe-detail-container>
+    <of-probe-detail-container [probeHostID]="probeHostID"
+     (targetSelect)="onTargetSelect($event)"
+     (discovery)="onDiscovery($event)"
+     ></of-probe-detail-container>
 </ng-template>

src/app/pages/probes/probe/probe-page.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
-import { Probe } from '@overflow/commons-typescript/model/probe';
+import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
 import { Target } from '@overflow/commons-typescript/model/target';
-import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
+import { BreadcrumbService } from '@app/commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-probe',
@@ -12,6 +12,7 @@ import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
 export class ProbePageComponent {
 
   private isDetail: boolean;
+  private probeHostID: string;
 
   constructor(
     private router: Router,
@@ -34,19 +35,24 @@ export class ProbePageComponent {
     this.isDetail = false;
   }
 
-  onDetailContainer(probeId: string) {
+  onDetailContainer(probeHostID: string) {
+    this.probeHostID = probeHostID;
     this.breadcrumbService.setItems([
       { label: 'Probe', routerLink: ['/probe/list'] },
-      { label: probeId }
+      { label: this.probeHostID }
     ]);
     this.isDetail = true;
   }
 
-  onProbeSelect(probe: Probe) {
+  onProbeSelect(probeHost: ProbeHost) {
-    this.router.navigate(['probe', probe.id, 'info']);
+    this.router.navigate(['probe', probeHost.id, 'info']);
   }
 
   onTargetSelect(target: Target) {
     console.log(target);
   }
+
+  onDiscovery(probeHostID: number) {
+    this.router.navigate(['discovery', probeHostID]);
+  }
 }