discovery

package-lock.json

@@ -4634,6 +4634,11 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "hammer": {
+      "version": "0.0.5",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/hammer/-/hammer-0.0.5.tgz",
+      "integrity": "sha1-DqG/gc9+reY5qgQXJywnGCxeh2Q="
+    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "https://nexus.loafle.net/repository/npm-all/handle-thing/-/handle-thing-1.2.5.tgz",
@@ -7073,6 +7078,14 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng4-loader-bar": {
+      "version": "1.0.3",
+      "resolved": "https://nexus.loafle.net/repository/npm-all/ng4-loader-bar/-/ng4-loader-bar-1.0.3.tgz",
+      "integrity": "sha1-4mXOirdy4HOh3E0MUCwCAOVaBoo=",
+      "requires": {
+        "hammer": "0.0.5"
+      }
+    },
     "ngx-cookie-service": {
       "version": "1.0.10",
       "resolved": "https://nexus.loafle.net/repository/npm-all/ngx-cookie-service/-/ngx-cookie-service-1.0.10.tgz",

src/packages/commons/prime-ng/prime-ng.module.ts

@@ -45,7 +45,7 @@ import { PanelModule } from 'primeng/primeng';
 import { PanelMenuModule } from 'primeng/primeng';
 import { PasswordModule } from 'primeng/primeng';
 import { PickListModule } from 'primeng/primeng';
-import { ProgressBarModule } from 'primeng/primeng';
+import { ProgressBarModule, ProgressSpinner } from 'primeng/primeng';
 import { RadioButtonModule } from 'primeng/primeng';
 import { RatingModule } from 'primeng/primeng';
 import { ScheduleModule } from 'primeng/primeng';

src/packages/discovery/component/setting/filter-summary/filter-summary.component.html

@@ -1,5 +1,5 @@
-<div class="ui-g-12" (click)="onClick()">
+<div *ngIf="data" class="ui-g-12" (click)="onClick()">
-  <of-key-value [key]="'Host'" [value]="hostRange"></of-key-value>
+  <of-key-value *ngIf="data.discoverHost" [key]="'Host'" [value]="hostRange"></of-key-value>
   <of-key-value *ngIf="data.discoverHost.discoverPort" [key]="'Port'" [value]="portRange"></of-key-value>
   <span *ngIf="includeTCP">
     TCP

src/packages/discovery/component/setting/filter-summary/filter-summary.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { DiscoverZone } from '@overflow/commons-typescript/model/discovery';
 
 @Component({
   selector: 'of-discovery-filter-summary',
   templateUrl: './filter-summary.component.html',
 })
-export class FilterSummaryComponent implements OnInit, AfterContentInit, OnDestroy {
+export class FilterSummaryComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
 
   @Output() click = new EventEmitter();
   @Input() data: DiscoverZone;
@@ -25,12 +25,17 @@ export class FilterSummaryComponent implements OnInit, AfterContentInit, OnDestr
   }
 
   ngAfterContentInit() {
-    console.log(this.data);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.data) {
+      return;
+    }
     this.hostRange = this.data.discoverHost.firstScanRangev4 + ' ~ ' + this.data.discoverHost.lastScanRangev4;
     if (this.data.discoverHost.discoverPort) {
       this.portRange = this.data.discoverHost.discoverPort.firstScanRange + ' ~ ' + this.data.discoverHost.discoverPort.lastScanRange;
-      this.includeTCP =  this.data.discoverHost.discoverPort.includeTCP;
+      this.includeTCP = this.data.discoverHost.discoverPort.includeTCP;
-      this.includeUDP =  this.data.discoverHost.discoverPort.includeUDP;
+      this.includeUDP = this.data.discoverHost.discoverPort.includeUDP;
     }
 
     if (this.data.discoverHost.discoverPort.discoverService) {

src/packages/discovery/component/setting/result/result.component.html

@@ -1,12 +1,13 @@
 <div class="ui-g-12">
-  result
   <div *ngIf="inProgress">
-    <p-progressBar mode="indeterminate" [style]="{'height': '16px'}"></p-progressBar>
+    <p-progressBar mode="indeterminate"></p-progressBar>
   </div>
 
   <p-blockUI [target]="result" [blocked]="inProgress"></p-blockUI>
   <p-panel #result [showHeader]="false">
+    <div>
+        result
+    </div>
     <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
   </p-panel>
-
 </div>

src/packages/discovery/component/setting/result/result.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import { Subscription } from 'rxjs/Subscription';
@@ -18,7 +18,9 @@ import { Service } from '@overflow/commons-typescript/model/discovery';
   selector: 'of-discovery-result',
   templateUrl: './result.component.html',
 })
-export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ResultComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+
+  @Input() started: boolean;
 
   treeNodes = [];
   selectedNodes = [];
@@ -86,6 +88,12 @@ export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
   ngAfterContentInit() {
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['started'] && !changes['started'].currentValue) {
+      this.inProgress = false;
+    }
+  }
+
   ngOnDestroy() {
     if (this.startedSubscription$) {
       this.startedSubscription$.unsubscribe();

src/packages/discovery/component/setting/setting.component.html

@@ -4,29 +4,29 @@
   </div>
 
   <div>
-    <of-probe-selector #probeSelectorComponent [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
+    <of-probe-selector [hidden]="requestStart" #probeSelectorComponent [preProbe]="probe" (probeSelected)="onProbeSelect($event)"></of-probe-selector>
 
     <p-blockUI [target]="df" [blocked]="!selectedProbe && !probe"></p-blockUI>
     <p-panel #df [showHeader]="false">
-      <div [@discoveryFilter]="filterExpand ? 'full' : 'summary'">
+      <div [@discoveryFilter]="!requestStart ? 'full' : 'summary'">
-        <div *ngIf="filterExpand; else filterSummary">
+        <div [hidden]="requestStart">
           <of-discovery-filter #filterComponent [probe]="selectedProbe" [requestStart]="requestStart" (discoveryRequested)="onDiscoveryStart($event)"></of-discovery-filter>
         </div>
-        <ng-template #filterSummary>
+        <div [hidden]="!requestStart">
           <of-discovery-filter-summary [data]="filterData" (click)="onSummaryClick($event)"></of-discovery-filter-summary>
-        </ng-template>
+        </div>
       </div>
     </p-panel>
 
-    <div dir="rtl" *ngIf="filterExpand">
+    <div dir="rtl" *ngIf="!requestStart">
       <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit"
         (click)="requestStart = true"></button>
       <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="onCancel()"></button>
     </div>
   </div>
 
-  <div *ngIf="!filterExpand" [@result]="filterExpand ? 'hidden' : 'show'">
+  <div *ngIf="requestStart" [@result]="!requestStart ? 'hidden' : 'show'">
-    <of-discovery-result (close)="onCancel()"></of-discovery-result>
+    <of-discovery-result (close)="onCancel()" [started]="started"></of-discovery-result>
     <div dir="rtl">
       <button [disabled]="!selectedProbe && !probe" pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit"
         (click)="onSave()"></button>

src/packages/discovery/component/setting/setting.component.ts

@@ -47,17 +47,17 @@ import { trigger, state, transition, style, animate } from '@angular/core';
         })),
         transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
       ]),
-      trigger(
+    trigger(
-        'result', [
+      'result', [
-          state('show', style({
+        state('show', style({
-            height: '300px',
+          height: '300px',
-          })),
+        })),
-          state('hidden', style({
+        state('hidden', style({
-            height: '0px',
+          height: '0px',
-          })),
+        })),
-          transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
+        transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
-        ]
+      ]
-      )
+    )
   ]
 })
 export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
@@ -72,8 +72,6 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   private selectedProbe: Probe;
   private height: number;
 
-  private filterExpand = true;
-
   @ViewChild('probeSelectorComponent') probeSelectorComponent: ProbeSelectorComponent;
   @ViewChild('filterComponent') filterComponent: FilterComponent;
   @ViewChild('resultComponent') resultComponent: ResultComponent;
@@ -107,7 +105,6 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
     this.started = false;
     this.close.emit();
     this.requestStart = false;
-    this.filterExpand = true;
   }
 
   initAll() {
@@ -142,13 +139,12 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
 
   onDiscoveryStart(discoverZone: DiscoverZone) {
     this.filterData = discoverZone;
-    this.filterExpand = false;
+    this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
-    // this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
+      { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
-    //   { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
 
     setTimeout(() => {
       this.started = true;
-      this.requestStart = false;
+      // this.requestStart = false;
     });
   }
 
@@ -168,7 +164,7 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
     if (this.started) {
       return;
     }
-    this.filterExpand = true;
+    this.requestStart = false;
   }
 
 }

src/packages/discovery/discovery.module.ts

@@ -10,6 +10,7 @@ import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { KeyValueModule } from 'app/commons/component/key-value/key-value.module';
+import {AngularLoadingBarModule} from 'ng4-loader-bar';
 
 @NgModule({
   imports: [
@@ -19,7 +20,8 @@ import { KeyValueModule } from 'app/commons/component/key-value/key-value.module
     DiscoveryStoreModule,
     DiscoveryRPCModule,
     DiscoveryLoggerModule,
-    KeyValueModule
+    KeyValueModule,
+    AngularLoadingBarModule.forRoot()
   ],
   declarations: [
     COMPONENTS

src/styles.scss

@@ -298,4 +298,7 @@
 }
 .layout-container .topbar-items .profile-image{
     border-radius: 50%;
+}
+body .ui-progressbar .ui-progressbar-value {
+    height: 0 !important;
 }