Merge branch 'master' of https://git.loafle.net/overflow/overflow_app

src/ts/@overflow/app/config/index.ts

@@ -19,6 +19,9 @@ import SensorItemReadAllBySensorReducer from '@overflow/sensor/redux/reducer/ite
 import readMachineReducer from '@overflow/infra/redux/reducer/machine_read';
 import readHostReducer from '@overflow/infra/redux/reducer/host_read';
 
+import CrawlerReadAllByTargetReducer from '@overflow/meta/redux/reducer/crawler_read_all_by_target';
+import CrawlerAuthInputsReducer from '@overflow/meta/redux/reducer/crawler_auth_inputs';
+
 import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
 
 // Container Configuration
@@ -65,6 +68,8 @@ const reduxConfig: ReduxConfig = {
     readNoAuthProbeReducer,
     readMachineReducer,
     readHostReducer,
+    CrawlerReadAllByTargetReducer,
+    CrawlerAuthInputsReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/meta/api/model/MetaCrawler.ts

@@ -1,9 +1,9 @@
 
 interface MetaCrawler {
   id: number;
-  createDate: Date;
-  name: string;
-  description: string;
+  createDate?: Date;
+  name?: string;
+  description?: string;
 }
 
 enum MetaCrawler_ID {

src/ts/@overflow/meta/react/CrawlerAuthInputs.tsx

@@ -0,0 +1,38 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  CrawlerAuthInputs,
+  CrawlerAuthInputsStateProps,
+  CrawlerAuthInputsDispatchProps,
+} from './components/CrawlerAuthInputs';
+// import State from '../redux/state/ReadAllByTarget';
+
+import Crawler from '@overflow/meta/api/model/MetaCrawler';
+// import Sensor from '@overflow/sensor/api/model/Sensor';
+// import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
+
+import * as CrawlerAuthInputsActions from '@overflow/meta/redux/action/crawler_auth_inputs';
+// import * as SensorItemReadAllActions from '@overflow/meta/redux/action/sensor_item_read_all';
+// import * as CrawlerReadAllByTargetActions from '../redux/action/crawler_read_all_by_target';
+
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+
+// FIXME::....
+
+export function mapStateToProps(state: any, props: any): CrawlerAuthInputsStateProps {
+  return {
+    // crawler: props.crawler,
+    metaCrawlerInputItemList:props.metaCrawlerInputItemList,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): CrawlerAuthInputsDispatchProps {
+  return {
+    // onCrawlerReadAllByMetaCrawler: (crawler: Crawler) => {
+    //   dispatch(asyncRequestActions.request('MetaCrawlerInputItemService',
+    //                                        'readAllByMetaCrawler', CrawlerAuthInputsActions.REQUEST, JSON.stringify(crawler)));
+    // },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(CrawlerAuthInputs);

src/ts/@overflow/meta/react/CrawlerSelector.tsx

@@ -0,0 +1,53 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+  CrawlerSelector,
+  CrawlerSelectorStateProps,
+  CrawlerSelectorDispatchProps,
+} from './components/CrawlerSelector';
+// import State from '../redux/state/ReadAllByTarget';
+
+import Target from '@overflow/target/api/model/Target';
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
+// import Sensor from '@overflow/sensor/api/model/Sensor';
+// import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
+
+import * as CrawlerReadAllByTargetActions from '@overflow/meta/redux/action/crawler_read_all_by_target';
+// import * as SensorItemReadAllActions from '@overflow/meta/redux/action/sensor_item_read_all';
+// import * as CrawlerReadAllByTargetActions from '../redux/action/crawler_read_all_by_target';
+import * as CrawlerAuthInputsActions from '@overflow/meta/redux/action/crawler_auth_inputs';
+
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+
+// FIXME::....
+
+export function mapStateToProps(state: any): CrawlerSelectorStateProps {
+  return {
+    metaCralwerList: state.MetaCrawlerList,
+     metaCrawlerInputItemList:state.MetaCrawlerInputItemList,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): CrawlerSelectorDispatchProps {
+  return {
+    onCrawlerReadAllByTarget: (target: Target) => {
+      dispatch(asyncRequestActions.request('MetaCrawlerService', 'readAll', CrawlerReadAllByTargetActions.REQUEST));
+    },
+    onCrawlerReadAllByMetaCrawler: (crawler: MetaCrawler) => {
+      dispatch(asyncRequestActions.request('MetaCrawlerInputItemService',
+                                           'readAllByMetaCrawler', CrawlerAuthInputsActions.REQUEST, JSON.stringify(crawler)));
+    },
+    // onCheckCrawlerAuth: (authInfo: string) => {
+    //   // dispatch(ReadActions.request(id));
+    // },
+    // // FIXME::how to sensor item?
+    // onReadMetaSensorItem: () => {
+    //   dispatch(SensorItemReadAllActions.request());
+    // },
+    // onSaveSensor: (sensor: Sensor) => {
+    //   dispatch(RegistActions.request(sensor));
+    // },
+  };
+}
+
+
+export default connect(mapStateToProps, mapDispatchToProps)(CrawlerSelector);

src/ts/@overflow/meta/react/components/CrawlerAuthInputs.tsx

@@ -0,0 +1,156 @@
+
+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 } from 'semantic-ui-react';
+
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
+import MetaCrawlerInputItem from '@overflow/meta/api/model/MetaCrawlerInputItem';
+
+import SensorItemTree from '@overflow/meta/react/SensorItemTree';
+
+export interface CrawlerAuthInputsStateProps {
+  crawlerId?: number;
+  crawler?: MetaCrawler;
+  metaCrawlerInputItemList?: MetaCrawlerInputItem[];
+}
+
+export interface CrawlerAuthInputsDispatchProps {
+}
+
+export type CrawlerAuthInputsProps = CrawlerAuthInputsStateProps & CrawlerAuthInputsDispatchProps;
+
+
+
+export interface CrawlerAuthInputsState {
+  isVerifying: boolean;
+}
+
+export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, CrawlerAuthInputsState> {
+
+  // private data: object[];
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      isVerifying: false,
+    };
+
+  }
+
+  public componentWillMount(): void {
+    // this.data = [
+    //   {
+    //     'id': '1',
+    //     'metaInputType': {
+    //       'id': '1',
+    //       'name': 'Text',
+    //     },
+    //     'name': 'Community',
+    //     'required': 'true',
+    //     'defaultValue': 'public',
+    //     'keyName': 'Community',
+    //     'keyValue': '',
+    //     'pattern': 'regex...',
+    //   },
+    //   {
+    //     'id': '2',
+    //     'metaInputType': {
+    //       'id': '2',
+    //       'name': 'Radio',
+    //     },
+    //     'name': 'AuthType',
+    //     'required': 'true',
+    //     'defaultValue': '',
+    //     'keyName': 'AuthType',
+    //     'keyValue': 'MD5|SHA',
+    //     'pattern': 'regex...',
+    //   },
+    // ];
+  }
+
+  public handleVerify(): void {
+    this.setState({
+      isVerifying: true,
+    });
+  }
+
+  public renderRow(item: MetaCrawlerInputItem, index: number): JSX.Element {
+    let elem = new Array();
+    if (item.inputType.name === 'TEXT_TYPE') {
+      elem.push(<Input placeholder={item.defaultValue} key={0} />);
+    } else if (item.inputType.name === 'PASSWORD_TYPE') {
+      elem.push(<Input type='password' placeholder={item.defaultValue} key={0} />);
+    } else if (item.inputType.name === 'Radio') {
+      let itemValues = item.keyValue.split('|');
+      let idx = 0;
+      for (let itemValue of itemValues) {
+        elem.push(<Form.Radio
+          key={idx++}
+          label={itemValue}
+          name='radioGroup'
+          value={itemValue}
+        />);
+      }
+    }
+
+    return (
+      <Table.Row key={index}>
+        <Table.Cell collapsing>{item.keyName}</Table.Cell>
+        <Table.Cell >
+          <Form.Group inline>{elem}</Form.Group>
+        </Table.Cell>
+      </Table.Row >
+    );
+  }
+
+  public renderAuth(): JSX.Element[] {
+
+    if (this.props.metaCrawlerInputItemList === undefined) {
+      return null;
+    }
+
+    let elements: Array<JSX.Element> = new Array();
+    let elem: JSX.Element;
+    for (let index: number = 0; index < this.props.metaCrawlerInputItemList.length; ++index) {
+      elem = this.renderRow(this.props.metaCrawlerInputItemList[index], index);
+      elements.push(elem);
+    }
+
+    return elements;
+  }
+
+  public render(): JSX.Element {
+    // if (this.props.crawlerId === null) {
+    //   return null;
+    // }
+    // this.props.onCrawlerReadAllByMetaCrawler(this.props.crawler);
+
+    if (this.props.metaCrawlerInputItemList === undefined || this.props.metaCrawlerInputItemList.length <= 0) {
+      return null;
+    }
+
+
+    return (
+      <Segment style={{ width: '350px' }}>
+        <Table basic='very' celled >
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderAuth()}
+          </Table.Body>
+
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>
+                <Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Segment>
+    );
+  }
+}

src/ts/@overflow/meta/react/components/CrawlerSelector.tsx

@@ -0,0 +1,155 @@
+
+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 '../../api/model/MetaCrawler';
+
+import SensorItemTree from '@overflow/meta/react/SensorItemTree';
+import CrawlerAuthInputsContainer from '../CrawlerAuthInputs';
+import MetaCrawlerInputItem from '@overflow/meta/api/model/MetaCrawlerInputItem';
+
+import Target from '@overflow/target/api/model/Target';
+
+export interface CrawlerSelectorStateProps {
+  metaCralwerList?: MetaCrawler[];
+  targetId?: number;
+  metaCrawlerInputItemList?: MetaCrawlerInputItem[];
+}
+
+export interface CrawlerSelectorDispatchProps {
+  onCrawlerReadAllByTarget?(target: Target): void;
+  onCrawlerReadAllByMetaCrawler?(crawler: MetaCrawler): void;
+}
+
+export type CrawlerSelectorProps = CrawlerSelectorStateProps & CrawlerSelectorDispatchProps;
+
+export interface CrawlerSelectorState {
+  isInstalling: boolean;
+  selected: MetaCrawler;
+  // selectOptions: Array<DropdownItemProps>;
+}
+
+export class CrawlerSelector extends React.Component<CrawlerSelectorProps, CrawlerSelectorState> {
+
+  private selectOptions: Array<DropdownItemProps>;
+
+  constructor(props: CrawlerSelectorProps, context: CrawlerSelectorState) {
+    super(props, context);
+    this.state = {
+      selected: null,
+      isInstalling: false,
+    };
+
+    let target: Target;
+    if (this.props.targetId === undefined) {
+      target = null;
+    } else {
+      target = { id: this.props.targetId };
+    }
+
+    this.props.onCrawlerReadAllByTarget(target);
+
+  }
+
+  // public componentWillMount(): void {
+  //   this.getMetaCrawlers();
+  // }
+
+  public convertCrawler(): void {
+    // todo. getting MetaCrawler list
+    // let crawlers = [
+    //   {
+    //     'id': '1',
+    //     'name': 'WMI',
+    //     'description': 'WMI DESCRIPTION',
+    //   },
+    //   {
+    //     'id': '2',
+    //     'name': 'SNMP',
+    //     'description': 'SNMP DESCRIPTION',
+    //   },
+    //   {
+    //     'id': '3',
+    //     'name': 'JMX',
+    //     'description': 'JMX DESCRIPTION',
+    //   },
+    // ];
+
+    let crawlerOptions = [];
+    let crawler: MetaCrawler;
+    for (crawler of this.props.metaCralwerList) {
+      let option = {
+        // key: crawler.id,
+        text: crawler.name,
+        value: crawler.id,
+        icon: 'check', // or close?
+      };
+      crawlerOptions.push(option);
+    }
+
+    this.selectOptions = crawlerOptions;
+  }
+
+  public handleCrawlerSelection(event: React.SyntheticEvent<HTMLElement>, data: DropdownProps): void {
+    // this.setState({
+    //   selected: data.key,
+    // });
+    this.checkInstall();
+    let crawler: MetaCrawler = {
+      id: Number(data.value),
+    };
+    this.props.onCrawlerReadAllByMetaCrawler(crawler);
+  }
+
+  public checkInstall(): void {
+    // this.setState({
+    //   isInstalling: true,
+    // });
+    // let that = this;
+    // setInterval(() => {
+    //   this.setState({
+    //     isInstalling: false,
+    //   });
+    // },          1500);
+  }
+
+  public renderCrawler(): JSX.Element {
+
+    if (this.props.metaCralwerList === undefined) {
+      return null;
+    }
+
+    this.convertCrawler();
+    console.log(this.selectOptions);
+
+    return (
+      <Grid.Row>
+        <Grid.Column width='4'>
+          <Dropdown openOnFocus
+            placeholder='Select Crawler' selection options={this.selectOptions} onChange={this.handleCrawlerSelection.bind(this)} />
+          <br />
+          <br />
+        </Grid.Column>
+        <Grid.Column>
+          <CrawlerAuthInputsContainer metaCrawlerInputItemList={this.props.metaCrawlerInputItemList} />
+        </Grid.Column>
+      </Grid.Row>
+    );
+  }
+
+  public render(): JSX.Element {
+
+    return (
+      <Segment vertical>
+        <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
+        <Icon name='checkmark' /> Choose a Crawler type.
+        <br />
+        <br />
+        <Grid>
+          {this.props.metaCralwerList ? this.renderCrawler() : ''}
+        </Grid>
+      </Segment>
+    );
+  }
+}

src/ts/@overflow/meta/redux/action/crawler_auth_inputs.ts

@@ -0,0 +1,10 @@
+import Action from '@overflow/commons/redux/Action';
+
+// Action Type
+export type REQUEST = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/meta_crawler/crawler_auth_inputs/REQUEST/FAILURE';

src/ts/@overflow/meta/redux/action/crawler_read_all_by_target.ts

@@ -6,39 +6,39 @@ import CrawlerReadAllByTargetPayload from '../payload/CrawlerReadAllByTargetPayl
 
 // Action Type
 export type REQUEST = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST';
-export type REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST_SUCCESS';
-export type REQUEST_FAILURE = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST_FAILURE';
+export type REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST/FAILURE';
 
 export const REQUEST: REQUEST = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST';
-export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST_SUCCESS';
-export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST_FAILURE';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/meta_crawler/crawler_read_all_by_target/REQUEST/FAILURE';
 
-// Action Creater
-export type request = (target: Target) => Action<CrawlerReadAllByTargetPayload>;
-export type requestSuccess = (metaCrawlerList: MetaCrawler[]) => Action<MetaCrawler[]>;
-export type requestFailure = (error: Error) => Action;
+// // Action Creater
+// export type request = (target: Target) => Action<CrawlerReadAllByTargetPayload>;
+// export type requestSuccess = (metaCrawlerList: MetaCrawler[]) => Action<MetaCrawler[]>;
+// export type requestFailure = (error: Error) => Action;
 
 
 
-export const request: request = (target: Target): Action<CrawlerReadAllByTargetPayload> => {
-  return {
-    type: REQUEST,
-    payload: {
-      target: target,
-    },
-  };
-};
+// export const request: request = (target: Target): Action<CrawlerReadAllByTargetPayload> => {
+//   return {
+//     type: REQUEST,
+//     payload: {
+//       target: target,
+//     },
+//   };
+// };
 
-export const requestSuccess: requestSuccess = (metaCrawlerList: MetaCrawler[]): Action<MetaCrawler[]> => {
-  return {
-    type: REQUEST_SUCCESS,
-    payload: metaCrawlerList,
-  };
-};
+// export const requestSuccess: requestSuccess = (metaCrawlerList: MetaCrawler[]): Action<MetaCrawler[]> => {
+//   return {
+//     type: REQUEST_SUCCESS,
+//     payload: metaCrawlerList,
+//   };
+// };
 
-export const requestFailure: requestFailure = (error: Error): Action => {
-  return {
-    type: REQUEST_FAILURE,
-    error: error,
-  };
-};
+// export const requestFailure: requestFailure = (error: Error): Action => {
+//   return {
+//     type: REQUEST_FAILURE,
+//     error: error,
+//   };
+// };

src/ts/@overflow/meta/redux/reducer/crawler_auth_inputs.ts

@@ -0,0 +1,29 @@
+/**
+ * Created by geek on 17. 7. 3.
+ */
+
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import MetaCrawlerInputItem from '../../api/model/MetaCrawlerInputItem';
+
+import * as CrawlerAuthInputsActions from '../action/crawler_auth_inputs';
+import CrawlerAuthInputsState, { defaultState as CrawlerAuthInputsDefaultState } from '../state/CrawlerAuthInputs';
+
+import MetaCrawler from '../../api/model/MetaCrawler';
+
+const reducer: ReducersMapObject = {
+  [CrawlerAuthInputsActions.REQUEST_SUCCESS]:
+  (state: CrawlerAuthInputsState = CrawlerAuthInputsDefaultState, action: Action<MetaCrawlerInputItem[]>): CrawlerAuthInputsState => {
+    console.log(action);
+    return {
+      ...state,
+      MetaCrawlerInputItemList:<MetaCrawlerInputItem[]>action.payload,
+    };
+  },
+  [CrawlerAuthInputsActions.REQUEST_FAILURE]:
+  (state: CrawlerAuthInputsState = CrawlerAuthInputsDefaultState, action: Action<Error>): CrawlerAuthInputsState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/meta/redux/reducer/crawler_read_all_by_target.ts

@@ -0,0 +1,29 @@
+/**
+ * Created by geek on 17. 7. 3.
+ */
+
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+
+
+import * as CrawlerReadAllByTargetActions from '../action/crawler_read_all_by_target';
+import CrawlerReadAllByTargetState, { defaultState as CrawlerReadAllByTargetDefaultState } from '../state/CrawlerReadAllByTarget';
+
+import MetaCrawler from '../../api/model/MetaCrawler';
+
+const reducer: ReducersMapObject = {
+  [CrawlerReadAllByTargetActions.REQUEST_SUCCESS]:
+  (state: CrawlerReadAllByTargetState = CrawlerReadAllByTargetDefaultState, action: Action<MetaCrawler[]>): CrawlerReadAllByTargetState => {
+    console.log(action);
+    return {
+      ...state,
+      MetaCrawlerList:<MetaCrawler[]>action.payload,
+    };
+  },
+  [CrawlerReadAllByTargetActions.REQUEST_FAILURE]:
+  (state: CrawlerReadAllByTargetState = CrawlerReadAllByTargetDefaultState, action: Action<Error>): CrawlerReadAllByTargetState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/meta/redux/state/CrawlerAuthInputs.ts

@@ -0,0 +1,14 @@
+
+import MetaCrawlerInputItem from '../../api/model/MetaCrawlerInputItem';
+
+export interface State {
+  readonly MetaCrawlerInputItemList: MetaCrawlerInputItem[];
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  MetaCrawlerInputItemList: undefined,
+  error: undefined,
+};
+
+export default State;

src/ts/@overflow/meta/redux/state/CrawlerReadAllByTarget.ts

@@ -0,0 +1,14 @@
+
+import MetaCrawler from '../../api/model/MetaCrawler';
+
+export interface State {
+  readonly MetaCrawlerList: MetaCrawler[];
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  MetaCrawlerList: undefined,
+  error: undefined,
+};
+
+export default State;

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

@@ -14,6 +14,8 @@ import * as CrawlerReadAllByTargetActions from '@overflow/meta/redux/action/craw
 import * as SensorItemReadAllActions from '@overflow/meta/redux/action/sensor_item_read_all';
 import * as RegistActions from '../redux/action/regist';
 
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+
 // FIXME::....
 
 export function mapStateToProps(state: any): SensorConfigurationStateProps {
@@ -24,7 +26,7 @@ export function mapStateToProps(state: any): SensorConfigurationStateProps {
 export function mapDispatchToProps(dispatch: Dispatch<any>): SensorConfigurationDispatchProps {
   return {
     onCrawlerReadAllByTarget: (target: Target) => {
-      dispatch(CrawlerReadAllByTargetActions.request(target));
+      dispatch(asyncRequestActions.request('MetaCrawlerService', 'readAll', CrawlerReadAllByTargetActions.REQUEST));
     },
     onCheckCrawlerAuth: (authInfo: string) => {
       // dispatch(ReadActions.request(id));

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

@@ -5,6 +5,7 @@ import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion, Loader }
 import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
 
 import SensorItemTree from '@overflow/meta/react/SensorItemTree';
+import CrawlerSelectorContainer from '@overflow/meta/react/CrawlerSelector';
 
 export interface SensorConfigurationStateProps {
 
@@ -30,7 +31,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
 
 
   public render(): JSX.Element {
-    let steps = [<CrawlerSelector />, <Segment vertical><SensorItemTree /></Segment>, <ETCSelector />];
+    let steps = [<CrawlerSelectorContainer />, <Segment vertical><SensorItemTree /></Segment>, <ETCSelector />];
 
     return (
       <ConfigStepper steps={steps} />
@@ -150,226 +151,6 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
   }
 }
 
-export interface CrawlerSelectorProps {
-
-}
-
-export interface CrawlerSelectorState {
-  isInstalling: boolean;
-  selected: MetaCrawler;
-
-}
-
-export class CrawlerSelector extends React.Component<CrawlerSelectorProps, CrawlerSelectorState> {
-
-  private crawlers: object[];
-
-  constructor(props: CrawlerSelectorProps, context: CrawlerSelectorState) {
-    super(props, context);
-    this.state = {
-      selected: null,
-      isInstalling: false,
-    };
-  }
-
-  public componentWillMount(): void {
-    this.getMetaCrawlers();
-  }
-
-  public getMetaCrawlers(): void {
-    // todo. getting MetaCrawler list
-    let crawlers = [
-      {
-        'id': '1',
-        'name': 'WMI',
-        'description': 'WMI DESCRIPTION',
-      },
-      {
-        'id': '2',
-        'name': 'SNMP',
-        'description': 'SNMP DESCRIPTION',
-      },
-      {
-        'id': '3',
-        'name': 'JMX',
-        'description': 'JMX DESCRIPTION',
-      },
-    ];
-
-    let crawlerOptions = [];
-    let crawler: any;
-    for (crawler of crawlers) {
-      let option = {
-        key: crawler.id,
-        text: crawler.name,
-        value: crawler.name,
-        icon: 'check', // or close?
-      };
-      crawlerOptions.push(option);
-    }
-
-    this.crawlers = crawlerOptions;
-  }
-
-  public handleCrawlerSelection(e: any, data: any): void {
-    this.setState({
-      selected: data.value,
-    });
-    this.checkInstall();
-  }
-
-  public checkInstall(): void {
-    this.setState({
-      isInstalling: true,
-    });
-    let that = this;
-    setInterval(() => {
-      this.setState({
-        isInstalling: false,
-      });
-    },          1500);
-  }
-
-  public render(): JSX.Element {
-
-    return (
-      <Segment vertical>
-        <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
-        <Icon name='checkmark' /> Choose a Crawler type.
-        <br />
-        <br />
-        <Grid>
-          <Grid.Row>
-            <Grid.Column width='4'>
-              <Dropdown openOnFocus
-                placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
-
-              <br />
-              <br />
-            </Grid.Column>
-            <Grid.Column>
-              <CrawlerAuthInputs crawler={this.state.selected} />
-            </Grid.Column>
-          </Grid.Row>
-        </Grid>
-      </Segment>
-    );
-  }
-}
-
-export interface CrawlerAuthInputsProps {
-  crawler?: MetaCrawler;
-}
-
-export interface CrawlerAuthInputsState {
-  isVerifying: boolean;
-}
-
-export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, CrawlerAuthInputsState> {
-
-  private data: object[];
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.state = {
-      isVerifying: false,
-    };
-  }
-
-  public componentWillMount(): void {
-    this.data = [
-      {
-        'id': '1',
-        'metaInputType': {
-          'id': '1',
-          'name': 'Text',
-        },
-        'name': 'Community',
-        'required': 'true',
-        'defaultValue': 'public',
-        'keyName': 'Community',
-        'keyValue': '',
-        'pattern': 'regex...',
-      },
-      {
-        'id': '2',
-        'metaInputType': {
-          'id': '2',
-          'name': 'Radio',
-        },
-        'name': 'AuthType',
-        'required': 'true',
-        'defaultValue': '',
-        'keyName': 'AuthType',
-        'keyValue': 'MD5|SHA',
-        'pattern': 'regex...',
-      },
-    ];
-  }
-
-  public handleVerify(): void {
-    this.setState({
-      isVerifying: true,
-    });
-  }
-
-  public renderRow(item: any, index: number): JSX.Element {
-    let elem = new Array();
-    if (item.metaInputType.name === 'Text') {
-      elem.push(<Input placeholder={item.defaultValue} key={0} />);
-    } else if (item.metaInputType.name === 'Radio') {
-      let itemValues = item.keyValue.split('|');
-      let idx = 0;
-      for (let itemValue of itemValues) {
-        elem.push(<Form.Radio
-          key={idx++}
-          label={itemValue}
-          name='radioGroup'
-          value={itemValue}
-        />);
-      }
-    }
-
-    return (
-      <Table.Row key={index}>
-        <Table.Cell collapsing>{item.keyName}</Table.Cell>
-        <Table.Cell >
-          <Form.Group inline>{elem}</Form.Group>
-        </Table.Cell>
-      </Table.Row >
-    );
-  }
-
-  public render(): JSX.Element {
-    if (this.props.crawler === null) {
-      return null;
-    }
-    return (
-      <Segment style={{ width: '350px' }}>
-        <Table basic='very' celled >
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {this.data.map((item: any, index: number) => (
-              this.renderRow(item, index)
-            ))}
-          </Table.Body>
-
-          <Table.Footer>
-            <Table.Row>
-              <Table.HeaderCell colSpan='2'>
-                <Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Footer>
-        </Table>
-      </Segment>
-    );
-  }
-}
 
 
 export interface ETCSelectorProps {