discovery send object

src/ts/@overflow/discovery/react/DiscoveryTable.tsx

@@ -0,0 +1,20 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  DiscoveryTable,
+  StateProps as DiscoveryTableStateProps,
+  DispatchProps as DiscoveryTableDispatchProps,
+} from './components/DiscoveryTable';
+
+
+export function mapStateToProps(state: any, props: any): DiscoveryTableStateProps {
+  return {
+    onProbeChange: props.onProbeChange,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): DiscoveryTableDispatchProps {
+  return {
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(DiscoveryTable);

src/ts/@overflow/discovery/react/components/Discovery.tsx

@@ -7,7 +7,7 @@ import {
   Container,
 } from 'semantic-ui-react';
 import { DiscoveryProbe } from './DiscoveryProbe';
-import { DiscoveryTable } from './DiscoveryTable';
+import DiscoveryTableContainer from '../DiscoveryTable';
 import DiscoveryTreeContainer from '../DiscoveryTree';
 
 export interface StateProps {
@@ -81,7 +81,7 @@ export class Discovery extends React.Component<Props, State> {
         <Header as='h3' dividing> Discovery Details</Header>
         {/*<DiscoveryProbe probe={this.state.probeTemp}/>*/}
         <br />
-        <DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} />
+        <DiscoveryTableContainer onProbeChange={this.handleProbeChange.bind(this)} />
 
         <Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}>
           <Modal.Header>Discovery</Modal.Header>

src/ts/@overflow/discovery/react/components/DiscoveryTable.tsx

@@ -8,13 +8,20 @@ import {
   Dropdown,
   Container,
   Header,
+  DropdownProps,
 } from 'semantic-ui-react';
 
+import * as _ from 'lodash';
 
-export interface Props {
-  onProbeChange?(state:object):void;
+export interface StateProps {
 }
 
+export interface DispatchProps {
+  onProbeChange?(state: object): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
 export interface State {
   startIp: string;
   endIP: string;
@@ -26,6 +33,7 @@ export interface State {
 export class DiscoveryTable extends React.Component<Props, State> {
 
   private serviceTemp: any;
+  private selectedServices: number | string | Array<number | string>;
 
   constructor(props: Props, context: State) {
     super(props, context);
@@ -38,7 +46,7 @@ export class DiscoveryTable extends React.Component<Props, State> {
     };
   }
 
-  public componentWillMount():void {
+  public componentWillMount(): void {
     // super.componentWillMount();
     this.serviceTemp = [
       { key: 'http', text: 'HTTP', value: 'http' },
@@ -58,44 +66,44 @@ export class DiscoveryTable extends React.Component<Props, State> {
     ];
   }
 
-  public handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps):void {
+  public handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps): void {
     // console.log( data.value);
     // console.log( event.target);
     // console.log(data.tabIndex);
 
     let value: string = data.value;
     switch (data.tabIndex) {
-      case '1':{
+      case '1': {
         this.setState({
           startIp: value,
         });
         break;
       }
-      case '2':{
+      case '2': {
         this.setState({
           endIP: value,
         });
         break;
       }
-      case '3':{
+      case '3': {
         this.setState({
           excludeIp: value,
         });
         break;
       }
-      case '4':{
+      case '4': {
         this.setState({
           startPort: value,
         });
         break;
       }
-      case '5':{
+      case '5': {
         this.setState({
           endPort: value,
         });
         break;
       }
-      default:{
+      default: {
         console.log('Error');
         break;
       }
@@ -105,7 +113,14 @@ export class DiscoveryTable extends React.Component<Props, State> {
   }
 
   public discoveryStartHandler(event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps): void {
-    this.props.onProbeChange(this.state);
+
+    let discoveryStartInfo: any = {
+      ...this.state,
+      services: this.selectedServices,
+    };
+
+
+    this.props.onProbeChange(discoveryStartInfo);
   }
 
   public render(): JSX.Element {
@@ -129,26 +144,25 @@ export class DiscoveryTable extends React.Component<Props, State> {
             <Table.Row>
               <Table.Cell><Header size='small'>Port Range</Header></Table.Cell>
               <Table.Cell>
-                <Input tabIndex='4'  placeholder='Start Port' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
-                <Input tabIndex='5'  placeholder='End Port' onChange={this.handleInput.bind(this)} />
+                <Input tabIndex='4' placeholder='Start Port' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='5' placeholder='End Port' onChange={this.handleInput.bind(this)} />
               </Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell><Header size='small'>Service</Header></Table.Cell>
               <Table.Cell>
-                  <Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp}  />
+                <Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp}
+                  onChange={(event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => {
+                      this.selectedServices = data.value;
+                  }} />
               </Table.Cell>
             </Table.Row>
-            <Table.Row>
-              <Table.Cell><Header size='small'>End Port</Header></Table.Cell>
-              <Table.Cell><Input tabIndex='6' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
-            </Table.Row>
           </Table.Body>
           <Table.Footer>
             <Table.Row>
               <Table.HeaderCell colSpan='2'>
-                <Button  icon='checkmark' floated='right' labelPosition='left'
-                        content='Start' positive onClick={this.discoveryStartHandler.bind(this)} />
+                <Button icon='checkmark' floated='right' labelPosition='left'
+                  content='Start' positive onClick={this.discoveryStartHandler.bind(this)} />
               </Table.HeaderCell>
             </Table.Row>
           </Table.Footer>