discovery design

src/packages/discovery/component/index.ts

@@ -3,11 +3,13 @@ import { ProbeSelectorComponent } from './setting/probe-selector/probe-selector.
 import { ServiceSelectorComponent } from './setting/filter/service-selector/service-selector.component';
 import { FilterComponent } from './setting/filter/filter.component';
 import { ResultComponent } from './setting/result/result.component';
+import { FilterSummaryComponent } from './setting/filter-summary/filter-summary.component';
 
 export const COMPONENTS = [
   SettingComponent,
   FilterComponent,
   ServiceSelectorComponent,
   ProbeSelectorComponent,
-  ResultComponent
+  ResultComponent,
+  FilterSummaryComponent
 ];

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

@@ -0,0 +1,11 @@
+<div class="ui-g-12" (click)="onClick()">
+  <of-key-value [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
+  </span>
+  <span *ngIf="includeUDP">
+    UDP
+  </span>
+  <of-key-value *ngIf="services !== ''" [key]="'Services'" [value]="services"></of-key-value>
+</div>

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

@@ -0,0 +1,54 @@
+import { Component, OnInit, Input, AfterContentInit, Output, EventEmitter, OnDestroy } 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 {
+
+  @Output() click = new EventEmitter();
+  @Input() data: DiscoverZone;
+
+  private hostRange: string;
+  private portRange: string;
+  private includeTCP: boolean;
+  private includeUDP: boolean;
+  private services: string;
+
+  constructor(
+  ) {
+    this.services = '';
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterContentInit() {
+    console.log(this.data);
+    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.includeUDP =  this.data.discoverHost.discoverPort.includeUDP;
+    }
+
+    if (this.data.discoverHost.discoverPort.discoverService) {
+      const services = this.data.discoverHost.discoverPort.discoverService.includeServices;
+      if (services.length > 3) {
+        this.services = String(services.length) + ' services selected.';
+        return;
+      }
+      for (const service of services) {
+        this.services += service;
+      }
+    }
+  }
+
+  ngOnDestroy() {
+  }
+
+  onClick() {
+    this.click.emit();
+  }
+}

src/packages/discovery/component/setting/filter/service-selector/service-selector.component.ts

@@ -31,7 +31,7 @@ export class ServiceSelectorComponent implements OnInit, AfterContentInit, OnDes
       (list: MetaCrawler[]) => {
         if (list !== null) {
           this.crawlers = [];
-          this.includeServices = list;
+          this.crawlers = list;
         }
       },
       (error: RPCClientError) => {

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

@@ -1,4 +1,5 @@
 <div class="ui-g-12">
+  result
   <div *ngIf="inProgress">
     <p-progressBar mode="indeterminate" [style]="{'height': '16px'}"></p-progressBar>
   </div>

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

@@ -48,6 +48,7 @@ export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngOnInit() {
+    this.inProgress = true;
     this.resultSubscription$ = this.result$.subscribe(
       (zones: Map<string, Zone>) => {
         if (zones !== undefined && zones !== null) {
@@ -63,7 +64,6 @@ export class ResultComponent implements OnInit, AfterContentInit, OnDestroy {
     this.startedSubscription$ = this.started$.subscribe(
       (isStart: boolean) => {
         if (isStart !== undefined && isStart !== null && isStart) {
-          this.inProgress = true;
           console.log('##Discovery has started.##');
         }
       },

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

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

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

@@ -1,5 +1,7 @@
-import { Component, OnInit, AfterContentInit, Output, EventEmitter,
+import {
-  Input, OnDestroy, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+  Component, OnInit, AfterContentInit, Output, EventEmitter,
+  Input, OnDestroy, OnChanges, SimpleChanges, ViewChild
+} from '@angular/core';
 import { Store, select, StateObservable } from '@ngrx/store';
 import { RPCClientError } from '@loafer/ng-rpc/protocol';
 import {
@@ -29,9 +31,34 @@ import { ResultComponent } from './result/result.component';
 import { ProbeSelectorComponent } from './probe-selector/probe-selector.component';
 import { FilterComponent } from './filter/filter.component';
 
+import { trigger, state, transition, style, animate } from '@angular/core';
+
 @Component({
   selector: 'of-discovery-setting',
   templateUrl: './setting.component.html',
+  animations: [
+    trigger(
+      'discoveryFilter', [
+        state('summary', style({
+          height: '70px',
+        })),
+        state('full', style({
+          height: '500px',
+        })),
+        transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
+      ]),
+      trigger(
+        'result', [
+          state('show', style({
+            height: '300px',
+          })),
+          state('hidden', style({
+            height: '0px',
+          })),
+          transition('* => *', animate('200ms cubic-bezier(0.86, 0, 0.07, 1)')),
+        ]
+      )
+  ]
 })
 export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
 
@@ -40,10 +67,13 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   @Output() close = new EventEmitter();
   private requestStart = false;
   private started = false;
+  private filterData: DiscoverZone;
 
   private selectedProbe: Probe;
   private height: number;
 
+  private filterExpand = true;
+
   @ViewChild('probeSelectorComponent') probeSelectorComponent: ProbeSelectorComponent;
   @ViewChild('filterComponent') filterComponent: FilterComponent;
   @ViewChild('resultComponent') resultComponent: ResultComponent;
@@ -51,11 +81,11 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   constructor(
     private discoverStore: Store<DiscoverStore.State>,
   ) {
+    this.height = window.innerHeight * 0.9;
   }
 
   ngOnInit() {
     this.selectedProbe = this.probe;
-    this.height = window.innerHeight * 0.9;
   }
 
   ngAfterContentInit() {
@@ -66,7 +96,7 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
       const change = changes['visible'];
       if (!change.previousValue && change.currentValue) {
         this.initAll();
-      } else  if (change.previousValue && !change.currentValue) {
+      } else if (change.previousValue && !change.currentValue) {
         this.destroyAll();
       }
     }
@@ -77,6 +107,7 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
     this.started = false;
     this.close.emit();
     this.requestStart = false;
+    this.filterExpand = true;
   }
 
   initAll() {
@@ -110,9 +141,10 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
   }
 
   onDiscoveryStart(discoverZone: DiscoverZone) {
-    console.log('DiscoveryStart requested');
+    this.filterData = discoverZone;
-    this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
+    this.filterExpand = false;
-      { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
+    // this.discoverStore.dispatch(new DiscoverStore.DiscoverZone(
+    //   { probeID: this.selectedProbe.probeKey, discoverZone: discoverZone }));
 
     setTimeout(() => {
       this.started = true;
@@ -128,4 +160,15 @@ export class SettingComponent implements OnInit, AfterContentInit, OnDestroy, On
     this.resultComponent.save();
   }
 
+  onStop() {
+    this.started = false;
+  }
+
+  onSummaryClick() {
+    if (this.started) {
+      return;
+    }
+    this.filterExpand = true;
+  }
+
 }

src/packages/discovery/discovery.module.ts

@@ -9,6 +9,7 @@ import { DiscoveryLoggerModule } from './discovery-logger.module';
 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';
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
     DiscoveryStoreModule,
     DiscoveryRPCModule,
     DiscoveryLoggerModule,
+    KeyValueModule
   ],
   declarations: [
     COMPONENTS