fixed sensor config : split - target select

src/ts/@overflow/sensor/react/SensorConfigTargetSelect.tsx

@@ -0,0 +1,40 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  SensorConfigTargetSelect,
+  Props as SensorConfigTargetSelectStateProps,
+  State as SensorConfigTargetSelectDispatchProps,
+} from './components/SensorConfigTargetSelect';
+// import State from '../redux/state/ReadAllByTarget';
+import { push as routerPush } from 'react-router-redux';
+
+// import Target from '@overflow/target/api/model/Target';
+// import Sensor from '@overflow/sensor/api/model/Sensor';
+// import SensorItem from '@overflow/sensor/api/model/SensorItem';
+import Domain from '@overflow/domain/api/model/Domain';
+import PageParams from '@overflow/commons/api/model/PageParams';
+
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+import * as targetListActions from '@overflow/target/redux/action/read_all_by_probe';
+import * as readActionType from '@overflow/infra/redux/action/read';
+
+export function mapStateToProps(state: any, props: any): SensorConfigTargetSelectStateProps {
+  return {
+    infraList: state.infraList,
+    infra: state.infra,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): SensorConfigTargetSelectDispatchProps {
+  return {
+    onReadAllTargetByDomain: (domain: Domain, pageParams: PageParams) => {
+      dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain', targetListActions.REQUEST,
+                                           JSON.stringify(domain), JSON.stringify(pageParams)));
+    },
+    onReadInfra: (infraId: number) => {
+      dispatch(asyncRequestActions.request('InfraService', 'read', readActionType.REQUEST, infraId));
+    },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensorConfigTargetSelect);

src/ts/@overflow/sensor/react/SensorConfiguration.tsx

@@ -16,30 +16,19 @@ import * as SensorItemReadAllActions from '@overflow/meta/redux/action/sensor_it
 import * as RegistActions from '../redux/action/regist';
 
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
-import * as targetListActions from '@overflow/target/redux/action/read_all_by_probe';
-import * as readActionType from '@overflow/infra/redux/action/read';
-import PageParams from '@overflow/commons/api/model/PageParams';
+
+
 // FIXME::....
 
 export function mapStateToProps(state: any, props: any): SensorConfigurationStateProps {
   return {
-    infraList: state.infraList,
     infraId: props.params.id,
-    infra: state.infra,
   };
 }
 
 export function mapDispatchToProps(dispatch: Dispatch<any>): SensorConfigurationDispatchProps {
   return {
-    onReadAllTargetByDomain: (domain: Domain, pageParams: PageParams) => {
-      // dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain',
-      //                                      targetListActions.REQUEST, JSON.stringify(domain), '0', '10'));
-      dispatch(asyncRequestActions.request('InfraService', 'readAllByDomain', targetListActions.REQUEST,
-                                           JSON.stringify(domain), JSON.stringify(pageParams)));
-    },
-    onReadInfra: (infraId: number) => {
-      dispatch(asyncRequestActions.request('InfraService', 'read', readActionType.REQUEST, infraId));
-    },
+
     // onCheckCrawlerAuth: (authInfo: string) => {
     //   // dispatch(ReadActions.request(id));
     // },

src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx

@@ -39,8 +39,6 @@ import { MetaSensorStatus_ID } from '@overflow/meta/api/model/MetaSensorStatus';
 
 export interface SensorConfigStepperStateProps {
   steps?: Array<JSX.Element>;
-  infraList?: Page;
-  infra?: Infra;
   infraId?: number;
   setSensor?(data: SensorRegistInfo): void;
   getSensor?(): SensorRegistInfo;
@@ -60,8 +58,6 @@ export interface SensorConfigStepperState {
 
 export class SensorConfigStepper extends React.Component<SensorConfigStepperProps, SensorConfigStepperState> {
 
-  private selectOptions: Array<DropdownItemProps>;
-
   constructor(props: SensorConfigStepperProps, context: SensorConfigStepperState) {
     super(props, context);
     this.state = {
@@ -136,19 +132,23 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
           if (sd.infra === undefined || sd.infra === null) {
             return 'Target';
           }
+        }
+        break;
+      case 2:
+        {
            if (sd.crawler === undefined || sd.crawler === null) {
             return 'Crawler';
           }
         }
         break;
-      case 2:
+      case 3:
         {
           if (sd.sensorItemMap === undefined || sd.sensorItemMap === null || this.checkItemMapSize() === false) {
             return 'Sensor Item';
           }
         }
         break;
-      case 3:
+      case 4:
         {
           if (sd.interval === undefined) {
             return 'Interval';
@@ -228,77 +228,6 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
     }
   }
 
-  public convertInfraList(): void {
-
-    if (this.props.infraList === undefined) {
-      return null;
-    }
-
-    let selectionOptions: Array<DropdownItemProps> = new Array;
-
-    for (let infra of this.props.infraList.content) {
-
-      selectionOptions.push(this.createOption(infra));
-
-    }
-    this.selectOptions = selectionOptions;
-  }
-
-  public convertInfra(): void {
-    if (this.props.infra === undefined) {
-      return;
-    }
-    let selectionOptions: Array<DropdownItemProps> = new Array;
-
-    selectionOptions.push(this.createOption(this.props.infra));
-    this.selectOptions = selectionOptions;
-
-    let sd = this.props.getSensor();
-    // sd.targetId = this.props.infra.target.id;
-    // sd.type = this.props.infra.infraType.name;
-    sd.infra = this.props.infra;
-    this.props.setSensor(sd);
-  }
-
-  public createOption(infra: Infra): DropdownItemProps {
-    let option = {
-      key: infra.id,
-      text: infra.infraType.name + '-' + infra.target.displayName,
-      // value: infra.target.id,
-      value: JSON.stringify(infra),
-      // icon: 'check', // or close?
-    };
-    return option;
-  }
-
-  public defaultValue(): any {
-    if (this.selectOptions !== undefined && this.selectOptions.length > 0) {
-      return this.selectOptions[0].value;
-    }
-    return null;
-  }
-
-  public onChangeTarget(event: React.SyntheticEvent<HTMLElement>, data: DropdownProps): void {
-    let sd = this.props.getSensor();
-    // let infra: Infra = JSON.parse(String(data.value));
-    // sd.targetId = infra.target.id;
-    // sd.type = infra.infraType.name;
-    sd.infra = JSON.parse(String(data.value));
-    this.props.setSensor(sd);
-  }
-
-  public renderInfra(): JSX.Element {
-
-    if (this.props.infraId === undefined) {
-      this.convertInfraList();
-    } else {
-      this.convertInfra();
-    }
-
-    return (<Dropdown
-      placeholder='Select Target' selection options={this.selectOptions} defaultValue={this.defaultValue()}
-      onChange={this.onChangeTarget.bind(this)} />);
-  }
 
   public render(): JSX.Element {
 
@@ -307,20 +236,24 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
         <Step.Group fluid>
           <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
             <Icon name='settings' color='grey' />
-            <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
+            <Step.Content title='Step 1' description='Choose Target' />
           </Step>
 
           <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
             <Icon name='list ul' color='grey' />
-            <Step.Content title='Step 2' description='골라골라 아이템도 골라' />
+            <Step.Content title='Step 2' description='Choose Crawler' />
           </Step>
 
           <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
             <Icon name='options' color='grey' />
-            <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
+            <Step.Content title='Step 3' description='Choose Items' />
+          </Step>
+
+          <Step active={this.handleActive(4)} completed={this.handleCompleted(4)}>
+            <Icon name='options' color='grey' />
+            <Step.Content title='Step 4' description='Input ETC' />
           </Step>
         </Step.Group>
-        {this.renderInfra()}
         {this.showContent()}
         <br />
         <Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}

src/ts/@overflow/sensor/react/components/SensorConfigTargetSelect.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+
+import {
+  Icon,
+  Step,
+  Button,
+  Table,
+  Radio,
+  Form,
+  Container,
+  Checkbox,
+} from 'semantic-ui-react';
+import {
+  Grid,
+  Image,
+  Label,
+  Segment,
+  Dropdown,
+  Input,
+  List,
+  Accordion,
+  Loader,
+  DropdownItemProps, DropdownProps,
+} from 'semantic-ui-react';
+
+
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
+import Infra from '@overflow/infra/api/model/Infra';
+import Domain from '@overflow/domain/api/model/Domain';
+
+import Page from '@overflow/commons/api/model/Page';
+import SensorRegistInfo from '../../api/model/SensorRegistInfo';
+
+import PageParams from '@overflow/commons/api/model/PageParams';
+
+
+export interface StateProps {
+  infraList?: Page;
+  infra?: Infra;
+  infraId?: number;
+  setSensor?(data: SensorRegistInfo): void;
+  getSensor?(): SensorRegistInfo;
+}
+
+export interface DispatchProps {
+
+  onReadAllTargetByDomain?(domain: Domain, pageParams: PageParams): void;
+  onReadInfra?(infraId: number): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+
+}
+
+
+
+export class SensorConfigTargetSelect extends React.Component<Props, State> {
+
+  private selectOptions: Array<DropdownItemProps>;
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public componentWillMount(): void {
+    if (this.props.infraId === undefined) {
+      const pageParams: PageParams = {
+        pageNo: '0',
+        countPerPage: '999',
+        sortCol: 'id',
+        sortDirection: 'descending',
+      };
+      this.props.onReadAllTargetByDomain({ id: 1 }, pageParams);
+    } else {
+      this.props.onReadInfra(this.props.infraId);
+    }
+  }
+
+  public convertInfraList(): void {
+
+    if (this.props.infraList === undefined) {
+      return null;
+    }
+
+    let selectionOptions: Array<DropdownItemProps> = new Array;
+
+    for (let infra of this.props.infraList.content) {
+
+      selectionOptions.push(this.createOption(infra));
+
+    }
+    this.selectOptions = selectionOptions;
+  }
+
+  public convertInfra(): void {
+    if (this.props.infra === undefined) {
+      return;
+    }
+    let selectionOptions: Array<DropdownItemProps> = new Array;
+
+    selectionOptions.push(this.createOption(this.props.infra));
+    this.selectOptions = selectionOptions;
+
+    let sd = this.props.getSensor();
+    // sd.targetId = this.props.infra.target.id;
+    // sd.type = this.props.infra.infraType.name;
+    sd.infra = this.props.infra;
+    this.props.setSensor(sd);
+  }
+
+  public createOption(infra: Infra): DropdownItemProps {
+    let option = {
+      key: infra.id,
+      text: infra.infraType.name + '-' + infra.target.displayName,
+      // value: infra.target.id,
+      value: JSON.stringify(infra),
+      // icon: 'check', // or close?
+    };
+    return option;
+  }
+
+  public defaultValue(): any {
+    if (this.selectOptions !== undefined && this.selectOptions.length > 0) {
+      return this.selectOptions[0].value;
+    }
+    return null;
+  }
+
+  public onChangeTarget(event: React.SyntheticEvent<HTMLElement>, data: DropdownProps): void {
+    let sd = this.props.getSensor();
+    // let infra: Infra = JSON.parse(String(data.value));
+    // sd.targetId = infra.target.id;
+    // sd.type = infra.infraType.name;
+    sd.infra = JSON.parse(String(data.value));
+    this.props.setSensor(sd);
+  }
+
+  public renderInfra(): JSX.Element {
+
+    if (this.props.infraId === undefined) {
+      this.convertInfraList();
+    } else {
+      this.convertInfra();
+    }
+
+    return (<Dropdown
+      placeholder='Select Target' selection options={this.selectOptions} defaultValue={this.defaultValue()}
+      onChange={this.onChangeTarget.bind(this)} />);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        {this.renderInfra()}
+      </Container>
+    );
+  }
+}

src/ts/@overflow/sensor/react/components/SensorConfiguration.tsx

@@ -33,17 +33,15 @@ import SensorItemTree from '@overflow/meta/react/SensorItemTree';
 import CrawlerSelectorContainer from '@overflow/meta/react/CrawlerSelector';
 
 import SensorConfigStepperContainer from '../SensorConfigStepper';
-import PageParams from '@overflow/commons/api/model/PageParams';
+import SensorConfigTargetSelectContainer from '../SensorConfigTargetSelect';
+
 
 export interface SensorConfigurationStateProps {
   infraId?: number;
-  infraList?: Page;
-  infra?: Infra;
 }
 
 export interface SensorConfigurationDispatchProps {
-  onReadAllTargetByDomain?(domain: Domain, pageParams: PageParams): void;
-  onReadInfra?(infraId: number): void;
+
 }
 
 export interface SensorConfigurationState {
@@ -64,19 +62,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
     this.sensorData = {};
   }
 
-  public componentWillMount(): void {
-    if (this.props.infraId === undefined) {
-      const pageParams: PageParams = {
-        pageNo: '0',
-        countPerPage: '999',
-        sortCol: 'id',
-        sortDirection: 'descending',
-      };
-      this.props.onReadAllTargetByDomain({ id: 1 }, pageParams);
-    } else {
-      this.props.onReadInfra(this.props.infraId);
-    }
-  }
+
 
   public onSelectCrawlerId = (id: number) => {
     this.setState({
@@ -95,6 +81,8 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
 
   public render(): JSX.Element {
     let steps = [
+      <SensorConfigTargetSelectContainer setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)}
+      infraId={this.props.infraId} />,
       <CrawlerSelectorContainer onSelectCrawlerId={this.onSelectCrawlerId.bind(this)}
         setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />,
       <Segment vertical>
@@ -104,7 +92,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
       <ETCSelector setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />];
 
     return (
-      <SensorConfigStepperContainer steps={steps} infraId={this.props.infraId} infra={this.props.infra} infraList={this.props.infraList}
+      <SensorConfigStepperContainer steps={steps} infraId={this.props.infraId}
         setSensor={this.setSensor.bind(this)} getSensor={this.getSensor.bind(this)} />
     );
   }