discovery start setting

src/app/commons/component/input-chip/input-chip.component.scss

@@ -1,3 +1,3 @@
 .input-chip {
-  width: 80%;
+  width: 60%;
 }

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

@@ -10,40 +10,42 @@
         <mat-card-subtitle>{{cidr}}</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <div>
+        <!-- <form  (ngSubmit)="discovery()"> -->
           <div>
-            <mat-checkbox [checked]="true" [(ngModel)]="hostChecked">Host</mat-checkbox>
+            <div>
+              <mat-checkbox [checked]="true" [(ngModel)]="hostChecked">Host</mat-checkbox>
+            </div>
+            <div>
+              <mat-form-field *ngIf="hostChecked">
+                <input matInput placeholder="Start IP" type="string">
+              </mat-form-field>
+              <mat-form-field *ngIf="hostChecked">
+                <input matInput placeholder="End IP" type="string">
+              </mat-form-field>
+            </div>
           </div>
           <div>
-            <mat-form-field *ngIf="hostChecked">
-              <input matInput placeholder="Start IP" type="string">
-            </mat-form-field>
-            <mat-form-field *ngIf="hostChecked">
-              <input matInput placeholder="End IP" type="string">
-            </mat-form-field>
-          </div>
-        </div>
-        <div>
-          <div>
-            <mat-checkbox [(ngModel)]="portChecked">Port</mat-checkbox>
+            <div>
+              <mat-checkbox [(ngModel)]="portChecked">Port</mat-checkbox>
+            </div>
+            <div>
+              <mat-form-field *ngIf="portChecked">
+                <input matInput placeholder="Start Port" type="number">
+              </mat-form-field>
+              <mat-form-field *ngIf="portChecked">
+                <input matInput placeholder="End Port" type="number">
+              </mat-form-field>
+            </div>
           </div>
           <div>
-            <mat-form-field *ngIf="portChecked">
-              <input matInput placeholder="Start Port" type="number">
-            </mat-form-field>
-            <mat-form-field *ngIf="portChecked">
-              <input matInput placeholder="End Port" type="number">
-            </mat-form-field>
+            <div>
+              <mat-checkbox [(ngModel)]="serviceChecked">Service</mat-checkbox>
+            </div>
+            <div>
+              <of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems"></of-input-chip>
+            </div>
           </div>
-        </div>
-        <div>
-          <div>
-            <mat-checkbox [(ngModel)]="serviceChecked">Service</mat-checkbox>
-          </div>
-          <div>
-            <of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems"></of-input-chip>
-          </div>
-        </div>
+        <!-- </form> -->
       </mat-card-content>
     </mat-card>
   </mat-dialog-content>
@@ -51,7 +53,8 @@
 
   <mat-dialog-actions fxLayoutAlign="end">
     <button mat-button mat-dialog-close>Cancel</button>
-    <button mat-raised-button (click)="handleStart()" color="primary">Start</button>
+    <button mat-button mat-dialog-close color="primary" (click)="discovery()">Start</button>
+    <!-- <button mat-raised-button type="submit" color="primary">Start</button> -->
   </mat-dialog-actions>
 
 </div>

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

@@ -1,6 +1,10 @@
 import { Component, OnInit, AfterContentInit } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
-
+import { FormGroup } from '@angular/forms';
+import { Store, select } from '@ngrx/store';
+import { RPCError } from 'packages/core/rpc/error';
+import * as DiscoverySettingStore from '../../store/setting';
+import { DiscoveryStartInfo } from '../../model';
 
 @Component({
   selector: 'of-setting',
@@ -10,6 +14,7 @@ import { MatCheckboxChange } from '@angular/material';
 export class SettingComponent implements OnInit, AfterContentInit {
 
   private cidr;
+  // private settingForm: FormGroup;
 
   serviceItems = [
     { name: 'MySQL' },
@@ -17,7 +22,10 @@ export class SettingComponent implements OnInit, AfterContentInit {
     { name: 'Tomcat' },
     { name: 'Nginx' },
   ];
-  constructor() { }
+  constructor(
+    private store: Store<DiscoverySettingStore.State>
+  ) {
+  }
 
   ngOnInit() {
   }
@@ -26,8 +34,11 @@ export class SettingComponent implements OnInit, AfterContentInit {
     this.cidr = '192.168.1.0/24';
   }
 
-  handleStart() {
-    console.log('Start discovery');
-
+  discovery() {
+    const startInfo: DiscoveryStartInfo = {
+      startIp: '1111',
+      endIP: '11111',
+    };
+    this.store.dispatch(new DiscoverySettingStore.Setting(startInfo));
   }
 }

src/packages/discovery/model/DiscoveryStartInfo.ts

@@ -2,10 +2,10 @@
 export interface DiscoveryStartInfo {
   startIp: string;
   endIP: string;
-  excludeIp: string;
-  startPort: string;
-  endPort: string;
-  services: Array<string>;
+  excludeIp?: string;
+  startPort?: string;
+  endPort?: string;
+  services?: Array<string>;
 }
 
 // export default DiscoveryStartInfo;

src/packages/discovery/service/discovery.service.ts

@@ -1,10 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/operator/map';
-
 import { RPCClient } from 'packages/core/rpc/client/RPCClient';
-
 import { DiscoveryStartInfo } from '../model';
 
 @Injectable()
@@ -17,15 +13,7 @@ export class DiscoveryService {
   }
 
   public start(dsInfo: DiscoveryStartInfo): Observable<DiscoveryStartInfo> {
-    // const body = {
-    //   signinId: email,
-    //   signinPw: password,
-    // };
 
-    return this.rpcClient.call('DiscoveryService.start', dsInfo);
+    return this.rpcClient.call('DiscoveryService.startDiscovery', dsInfo);
   }
-
-//   public signup(member: DiscoveryStartInfo): Observable<DiscoveryStartInfo> {
-//     return this.restService.post('/account/signup', member);
-//   }
 }

src/packages/discovery/store/setting/setting.action.ts

@@ -14,7 +14,7 @@ export enum ActionType {
 export class Setting implements Action {
   readonly type = ActionType.Setting;
 
-  constructor(public payload: { payload: DiscoveryStartInfo}) {}
+  constructor(public payload: DiscoveryStartInfo) {}
 }
 
 export class SettingSuccess implements Action {

src/packages/discovery/store/setting/setting.effect.ts

@@ -36,39 +36,15 @@ export class Effects {
   ) { }
 
   @Effect()
-  signin$: Observable<Action> = this.actions$
-    .ofType(ActionType.Setting)
-    .map((action: Setting) => action.payload)
-    .switchMap(payload => this.discoveryService.start(payload.payload))
-    .map(discoveryStartInfo => {
-      return new SettingSuccess(discoveryStartInfo);
-    })
-    .catch((error: RPCError) => {
-      return of(new SettingFailure(error));
-    });
-
-    // .map((action: Signin) => action.payload)
-    // .exhaustMap(payload =>
-    //   this.memberService
-    //     .signin(payload.email, payload.password)
-    //     .map(member => {
-    //       return new SigninSuccess(member);
-    //     })
-    //     .catch((error) => {
-    //       return of(new SigninFailure(error.message));
-    //     })
-    // );
-
-  @Effect({ dispatch: false })
-  signinSuccess$ = this.actions$
-    .ofType(ActionType.SettingSuccess)
-    .do(() => this.router.navigate(['/']));
-
-  @Effect({ dispatch: false })
-  signinRedirect$ = this.actions$
-    .ofType(ActionType.SettingRedirect)
-    .do(authed => {
-      this.router.navigate(['/login']);
-    });
-
+  startDiscovery$: Observable<Action> = this.actions$
+  .ofType(ActionType.Setting)
+  .map((action: Setting) => action.payload)
+  .switchMap(payload => this.discoveryService.start(payload))
+  .map(discoveryStartInfo => {
+    return new SettingSuccess(discoveryStartInfo);
+  })
+  .catch((error: RPCError) => {
+    console.log(error.message);
+    return of(new SettingFailure(error));
+  });
 }

src/packages/discovery/store/setting/setting.state.ts

@@ -10,7 +10,7 @@ export interface State {
 }
 
 export const initialState: State = {
-    isStart: false,
+  isStart: false,
   error: null,
   isPending: false,
   discoveryStartInfo: null,