add routers

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

@@ -11,7 +11,9 @@ import Platform from '@overflow/commons/platform';
 import { store, sagaMiddleware, history } from './redux/store';
 
 import sagas from './redux/saga';
-import routes from './router';
+// import routes from './router';
+
+import {Layout} from './views/layout/Layout';
 
 injectTapEventPlugin();
 
@@ -35,11 +37,7 @@ function* app(): any {
   sagaMiddleware.run(sagas);
 
   ReactDOM.render(
-    <Provider store={store}>
+    <div><Layout /></div>,
-      <ConnectedRouter history={history}>
-        {routes}
-      </ConnectedRouter>
-    </Provider>,
     appContainer,
    );
 }

src/ts/@overflow/app/router/index.tsx

@@ -3,10 +3,33 @@ import { Route, Switch } from 'react-router-dom';
 
 import SignIn from '../views/member/SignIn';
 
+import { SignUp } from '@overflow/member/react/components/SignUp';
+// import { SignIn } from '@overflow/member/react/components/SignIn';;
+import { PWChange } from '@overflow/member/react/components/PWChange';
+import { ProbeDown } from '@overflow/probe/react/components/ProbeDown';
+import { DiscoveryDetails } from '@overflow/temp/react/components/DiscoveryDetails'
+import { Components } from '@overflow/temp/react/components/Components';
+import { Sensors } from '@overflow/temp/react/components/Sensors';
+// import { Layout } from './containers/test/layout/Layout'
+import { Tree } from '@overflow/temp/react/components/commons/Tree';
+import { TableExampleSortable } from '@overflow/temp/react/components/TableExampleSortable'
+
+
 const routes = (
     <Switch>
         <Route exact path='/'/>
-        <Route path='/signin' component={SignIn} />
+        <Route exact path='/test2' component={SignUp} />
+          <Route exact path='/test3' component={SignIn} />
+          <Route exact path='/test4' component={PWChange} />
+          <Route exact path='/test5' component={ProbeDown} />
+          <Route exact path='/test6' component={DiscoveryDetails} />
+          <Route exact path='/test7' component={Tree} />
+          <Route exact path='/test8' component={TableExampleSortable} />
+
+          <Route exact path='/test14' component={Components} />
+
+          <Route exact path='/test21' component={Sensors} />
+        {/*<Route path='/signin' component={SignIn} />*/}
 
     </Switch>
 

src/ts/@overflow/app/views/layout/Footer.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Segment } from 'semantic-ui-react';
+
+export class Footer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Segment vertical textAlign='center' size='tiny'>
+        <br />
+          Copyright LOAFLE.
+      </Segment>
+    );
+  }
+}
+
+
+

src/ts/@overflow/app/views/layout/Header.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Container, Divider } from 'semantic-ui-react';
+
+import { LogoBar } from './LogoBar';
+import { TitleBar } from './TitleBar';
+
+export class Header extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+   };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <LogoBar />
+        <TitleBar />
+      </Container>
+      // <TopBar onSidebar={this.props.onSidebar}/>
+    );
+  }
+}
+
+
+

src/ts/@overflow/app/views/layout/Layout.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { LeftMenu } from './LeftMenu';
+
+// import { Routes } from './Routes';
+
+import routes from '../../router';
+
+import { Router } from 'react-router';
+import * as History from 'history';
+
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import { store, sagaMiddleware, history } from '../../redux/store';
+
+// const history = History.createHashHistory();
+
+export class Layout extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      sidebar_visible: true,
+      notification_visible: false,
+    };
+  }
+
+  public onSidebar = () => {
+    this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Sidebar.Pushable as={Segment} vertical>
+          <Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
+            <LeftMenu />
+          </Sidebar>
+          <Sidebar.Pusher>
+            <Segment vertical style={{ margin: '0 0 0 150px', padding: '0' }}>
+              <Header />
+
+              {/*<Router history={history} >
+                {routes}
+              </Router>*/}
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  {routes}
+                </ConnectedRouter>
+              </Provider>
+
+              <Footer />
+
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>
+        {/* <Header onSidebar={this.onSidebar.bind(this)} />
+          <Sidebar.Pushable as={Segment} vertical >
+            <Sidebar
+              as={Menu}
+              animation='overlay'
+              width='thin'
+              direction='right'
+              visible={this.state.notification_visible}
+              icon='labeled'
+              vertical
+              inverted
+            >
+              <Menu.Item name='home'>
+                Notification 1
+            </Menu.Item>
+              <Menu.Item name='gamepad'>
+                Notification 2
+            </Menu.Item>
+            </Sidebar>
+
+            <Sidebar.Pusher >
+              <Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
+                <Breadcrumb size='mini'>
+                  <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                  <Breadcrumb.Divider icon='right angle' />
+                  <Breadcrumb.Section active>Probe</Breadcrumb.Section>
+                </Breadcrumb>
+              </Container>
+
+              <Segment vertical>
+                <Container>
+                  <Router history={history} >
+                    <Routes />
+                  </Router>
+                </Container>
+
+                <Footer />
+              </Segment>
+            </Sidebar.Pusher>
+          </Sidebar.Pushable> */}
+
+
+      </Container >
+    );
+  }
+}
+
+
+

src/ts/@overflow/app/views/layout/LeftMenu.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
+
+import { LogoBar } from './LogoBar';
+import { TitleBar } from './TitleBar';
+
+export class LeftMenu extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+
+    window.addEventListener('resize', () => {
+      console.log(window);
+    });
+  }
+
+
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid className='fullHeight'>
+        <Segment inverted vertical className='fullHeight'>
+          <Menu inverted secondary vertical fluid icon='labeled' >
+
+            <Menu.Item name='User' href='/' >
+              <Icon name='user' />
+            </Menu.Item>
+            <Menu.Item name='Home' href='/' >
+              <Icon name='home' />
+              Home
+            </Menu.Item>
+            <Menu.Item name='Monitoring' href='/' >
+              <Icon name='bar graph' />
+              Monitoring
+              {/*
+              <Dropdown text='Monitoring' pointing>
+                <Dropdown.Menu>
+                  <Dropdown.Header>Monitoring</Dropdown.Header>
+                  <Dropdown.Item>Probe</Dropdown.Item>
+                  <Dropdown.Item>Sensors</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              */}
+            </Menu.Item>
+
+            <Menu.Item name='Infrastructure' href='/' >
+              <Icon name='sitemap' />
+              Infrastructure
+              {/*
+              <Dropdown text='Infrastructure' >
+                <Dropdown.Menu>
+                  <Dropdown.Header>Infrastructure</Dropdown.Header>
+                  <Dropdown.Item>Maps</Dropdown.Item>
+                  <Dropdown.Item>Targets</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+              */}
+            </Menu.Item>
+
+            <Menu.Item name='Dashboard' href='/' >
+              <Icon name='industry' />
+              Dashboard
+            </Menu.Item>
+
+            <Menu.Item name='Metrics' href='/' >
+              <Icon name='tasks' />
+              Metrics
+            </Menu.Item>
+
+            <Menu.Item name='Alerts' href='/' >
+              <Icon name='alarm' />
+              Alerts
+            </Menu.Item>
+
+            <Menu.Item name='History' href='/' >
+              <Icon name='book' />
+              History
+            </Menu.Item>
+
+
+            <Menu.Item href='/'>
+              <Icon name='play circle' />
+              <Dropdown text='Custom'>
+                <Dropdown.Menu>
+                  <Dropdown.Header>Custom</Dropdown.Header>
+                  <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
+                  <Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
+                  <Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
+                  <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
+                  <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
+                  <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
+                  <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
+                  <Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
+            </Menu.Item>
+            <Menu.Item name='Settings' href='/' >
+              <Icon name='setting' />
+              Settings
+            </Menu.Item>
+
+          </Menu>
+        </Segment>
+      </Container>
+      // <TopBar onSidebar={this.props.onSidebar}/>
+    );
+  }
+}
+
+
+

src/ts/@overflow/app/views/layout/LogoBar.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Menu, Header, Container } from 'semantic-ui-react';
+
+export class LogoBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public handleLogoClick = () => {
+    alert('handleLogoClick');
+  }
+
+  public handleNotiClick = () => {
+    alert('handleNotiClick');
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        <Menu borderless secondary >
+          <Menu.Item
+            name='logo'
+            onClick={this.handleLogoClick}
+          >
+            <Header as='h3' icon='stack overflow' content='overFlow' />
+          </Menu.Item>
+          <Menu.Item
+            position='right'
+            icon='bell'
+            onClick={this.handleNotiClick}
+          />
+        </Menu>
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/@overflow/app/views/layout/TitleBar.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
+
+export class TitleBar extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  public render(): JSX.Element {
+    let subMenus = [
+      {
+        'name': 'Menu1',
+        'href': '#/test2',
+      },
+      {
+        'name': 'Menu2',
+        'href': '#/test3',
+      },
+      {
+        'name': 'Menu3',
+        'href': '#/test4',
+      },
+    ];
+    return (
+      <Menu basic fluid style={{ 'border-left': '0px', 'border-right': '0px', 'box-shadow': 'none', 'border-radius': '0' }}>
+        <Menu.Item name='Page Title' style={{ width: '250px' }}>
+          <Header as='h3'>Page Title
+            <Header.Subheader>
+              <Breadcrumb size='mini' left bottom>
+                <Breadcrumb.Section link>Home</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
+                <Breadcrumb.Divider />
+                <Breadcrumb.Section active>Probes</Breadcrumb.Section>
+              </Breadcrumb>
+            </Header.Subheader>
+          </Header>
+        </Menu.Item>
+        {subMenus.map((menu: any, index: number) => (
+          <Menu.Item key={index} name={menu.name} href={menu.href} />
+        ))}
+      </Menu>
+    );
+  }
+}
+
+
+

src/ts/@overflow/commons/utils/Rest.tsx

@@ -0,0 +1,54 @@
+
+
+const url = "http://192.168.1.209:8080/v1/overflow/services";
+
+export class OFRest {
+
+    obj: any;
+
+
+    constructor(serviceName: string, methodName: string, data: any) {
+
+        this.obj = {
+            "serviceName": serviceName,
+            "methodName": methodName,
+            "param": {
+                "model": JSON.stringify(data)
+            }
+
+        };
+    }
+
+    public Call() {
+
+        return fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify(this.obj)
+        });
+    }
+
+    public CallWithCB(callback: Function) {
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+            },
+            body: JSON.stringify(this.obj)
+        }).then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            if (json.error != undefined) {
+                console.log(json.error);
+                return;
+            }
+            callback(json);
+        }).catch(function (err) {
+            console.log(err);
+        });
+    }
+
+}
+

src/ts/@overflow/commons/utils/TargetCreate.tsx

@@ -0,0 +1,45 @@
+
+
+// var obj: any;
+
+// obj = {
+//     "ip": "192.168.1.106",
+//     "port": "80",
+//     "portType": "TCP",
+//     // "targetType":"",
+//     "vendorName": "HTTP",
+//     // "kinds":"",
+//     // "version":"",
+
+// }
+
+// var objArray: any[];
+// objArray.push(obj);
+
+
+export class TargetCreator {
+
+    list: any[];
+
+    public Add(ip: number, port: number, portType: string, vendorName: string) {
+        let obj: any;
+
+        obj = {
+            "ip": ip,
+            "port": port,
+            "portType": portType,
+            // "targetType":"",
+            "vendorName": vendorName,
+            // "kinds":"",
+            // "version":"",
+        };
+
+        this.list.push(obj);
+
+    }
+
+    public toString() :string {
+        return JSON.stringify(this.list);
+    }
+
+}

src/ts/@overflow/commons/utils/Utils.tsx

@@ -0,0 +1,38 @@
+
+
+
+
+export function int2ip(ipInt: number) {
+    return ((ipInt >>> 24) + '.' + (ipInt >> 16 & 255) + '.' + (ipInt >> 8 & 255) + '.' + (ipInt & 255));
+}
+
+export function ip2int(ip: string) {
+    return ip.split('.').reduce(function (ipInt, octet) { return (ipInt << 8) + parseInt(octet, 10); }, 0) >>> 0;
+}
+
+export function sec2date(ms: number) {
+    var dateTime = new Date(ms);
+    return dateTime.toLocaleString();
+}
+
+function numHex(s: number) {
+    var a = s.toString(16);
+    if ((a.length % 2) > 0) { a = "0" + a; }
+    return a;
+}
+
+export function intToMac(macInt: number): string {
+
+    var hexValue = numHex(macInt);
+
+    var macaddress = [];
+
+    for (var i = 0; i < hexValue.length; i = i + 2) {
+        macaddress.push(hexValue.substr(i, 2));
+    }
+
+
+    return macaddress.join(':');
+}
+
+

src/ts/@overflow/member/react/components/PWChange.tsx

@@ -0,0 +1,69 @@
+import *as React from 'react'
+import {
+  Input, InputOnChangeData,
+  Select, Button, Grid, Form, Container
+} from 'semantic-ui-react'
+
+
+export interface State {
+
+}
+export interface Props {
+
+}
+
+
+
+export class PWChange extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      pass:'',
+      passCon:'',
+    }
+
+  }
+
+  onSubmit = () => {
+    console.log(this.state);
+  }
+
+
+  public render(): JSX.Element {
+
+
+    return (
+      <Container fluid>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Form>
+                <Form.Input placeholder='Password' type='password' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ pass: data.value });
+                  }} />
+                <Form.Input placeholder='Password Confirm' type='password' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ passCon: data.value });
+                  }} />
+                <Form.Group>
+                  <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>    Submit  </Button>
+                  <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+                </Form.Group>
+              </Form>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
+    );
+  }
+
+
+
+}
+

src/ts/@overflow/member/react/components/SignUp.tsx

@@ -0,0 +1,99 @@
+import *as React from 'react'
+import {
+  Input, InputOnChangeData,
+  Select, Button, Dropdown, Grid, Form, Container
+} from 'semantic-ui-react'
+
+
+export interface State {
+
+}
+export interface Props {
+
+}
+
+const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' },
+{ key: 'unitedstates', value: '1', text: 'United States(1)' }]
+
+
+export class SignUp extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      email: '',
+      name: '',
+      pass: '',
+      passCon: '',
+      company: '',
+      phone: '',
+      country: '',
+    };
+
+  }
+
+
+  onSubmit = () => {
+    console.log(this.state)
+
+  }
+
+  onChange = (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+
+  }
+
+
+  public render(): JSX.Element {
+
+
+    return (
+      <Container fluid>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column mobile={16} tablet={5} computer={5}>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={6} computer={6}>
+              <Form>
+                <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
+                  (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                    this.setState({ email: data.value });
+                  }} />
+                <Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ name: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ pass: data.value });
+                }} />
+                <Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ passCon: data.value });
+                }} />
+                <Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ company: data.value });
+                }} />
+                <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ country: data.value });
+                }} />
+                <Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                  this.setState({ phone: data.value });
+                }} />
+                <Form.Group>
+                  <Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}>   Sign Up  </Button>
+                  <Button fluid style={{margin:'7'}}>    Cancel  </Button>
+                </Form.Group>
+              </Form>
+            </Grid.Column>
+            <Grid.Column mobile={16} tablet={4} computer={5}>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
+
+
+      
+    );
+  }
+
+
+
+}
+

src/ts/@overflow/probe/react/components/ProbeDown.tsx

@@ -0,0 +1,64 @@
+import *as React from 'react'
+import {
+  Grid, Menu, Segment, MenuItemProps, Header, Container
+} from 'semantic-ui-react'
+
+
+export interface State {
+
+}
+export interface Props {
+
+}
+
+const osNames = ["Windows","Debian","Ubuntu","Fedora", "CentOS"];
+
+export class ProbeDown extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+  this.state = { activeItem: osNames[0] }
+
+  
+  }
+handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuItemProps) => {
+  this.setState({ activeItem: data.name })
+
+  console.log(data.name);
+}
+
+  render() {
+
+const { activeItem } = this.state
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Probe Download</Header>
+        <Grid>
+          <Grid.Column width={4}>
+            <Menu fluid vertical tabular>
+              {osNames.map((os: string) => {
+                    return (
+                      <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+                    )
+              })}
+
+
+            
+            </Menu>
+          </Grid.Column>
+          
+
+          <Grid.Column stretched width={12}>
+            <Segment vertical>
+              {this.state.activeItem} Download Page
+            </Segment>
+          </Grid.Column>
+        </Grid>
+      </Container>
+    );
+  }
+
+
+
+}
+

src/ts/@overflow/temp/react/components/Components.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Probes } from './Probes';
+import { NoauthProbes } from './NoauthProbes';
+import { SensorConfiguration } from './SensorConfiguration';
+import { Targets } from './Targets';
+import { Sensors } from './Sensors';
+import { Tab } from './commons/Tab';
+
+// import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab'; 
+
+export class Components extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  render() {
+
+    const items = [
+      { name: 'Probes', child: <Probes /> },
+      { name: 'NoauthProbes', child: <NoauthProbes /> },
+      { name: 'Targets', child: <Targets /> },
+      { name: 'SensorConfiguration', child: <SensorConfiguration /> },
+      { name: 'Sensors', child: <Sensors /> },
+    ];
+
+    return (
+      <Tab panes={items} />
+    );
+  }
+}
+
+

src/ts/@overflow/temp/react/components/DiscoveryDetails.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Button, Modal, Checkbox, Header, Container } from 'semantic-ui-react';
+import { DiscoveryProbe } from './DiscoveryProbe';
+import { DiscoveryTable } from './DiscoveryTable';
+
+export class DiscoveryDetails extends React.Component<any, any> {
+
+  private probeTemp: any;
+  private submitData: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.handleProbeChange.bind(this);
+    this.state = {
+      startPopup:false
+    };
+  }
+
+
+
+  componentWillMount() {
+    this.probeTemp =
+      {
+        "id": "11",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "overFlow's domain111"
+        },
+        "host": {
+          "ip": "192.168.1.103",
+          "mac": "44:8a:5b:44:8c:e8",
+          "os": "Ubuntu 17.04",
+          "name": "?????"
+        },
+        "createAt": "2017-07-12",
+        "probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description1111111111",
+        "lastPollingAt": "2017-07-12 14:20",
+        "nextPollingAt": "2017-07-12 14:30"
+      };
+
+  }
+
+  handleProbeChange(obj: any) {
+    console.log(obj)
+    this.setState({ startPopup:true });
+    this.submitData = obj;
+  }
+
+  handleSubmit() {
+    console.log(this.submitData)
+  }
+
+  handleCancel= () => this.setState({ startPopup: false });
+
+  handlePopupClose = () => this.setState({ startPopup: false });
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing> Discovery Details</Header>
+        <DiscoveryProbe probe={this.probeTemp}/>
+        <br />
+        <DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} />
+
+        <Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}>
+          <Modal.Header>Change your password Enter email address.</Modal.Header>
+          <Modal.Content >
+            <Checkbox label='IP' />
+          </Modal.Content>
+          <Modal.Actions>
+            <Button onClick={this.handleSubmit.bind(this)} basic color='blue'  >              Submit      </Button>
+            <Button onClick={this.handleCancel}>              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+
+      </Container>
+
+    );
+  }
+}

src/ts/@overflow/temp/react/components/DiscoveryProbe.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Table, Label, Header, Container, Icon } from 'semantic-ui-react';
+
+
+export class DiscoveryProbe extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  // componentWillMount() {
+  //   console.log(this.props.probe);
+  // }
+
+  handle() {
+    this.props.onProbeChange();
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h4' color='grey'> Probe</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell width={4} collapsing>
+                <Header size='small'>Domain</Header>
+              </Table.Cell>
+              <Table.Cell width={12}>{this.props.probe.domain.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host IP</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.host.ip}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host Name</Header>
+              </Table.Cell>
+              <Table.Cell>Geek`s Ubuntu</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Authorized at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.createAt}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Last polling at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Next polling at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+      </Container>
+    )
+  }
+
+}

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

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container, Header } from 'semantic-ui-react';
+
+export class DiscoveryTable extends React.Component<any, any> {
+
+  private serviceTemp: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      startIp: null,
+      endIP: null,
+      excludeIp: null,
+      startPort: null,
+      endPort: null
+    };
+  }
+
+  componentWillMount() {
+    this.serviceTemp = [
+      { key: 'http', text: 'HTTP', value: 'http' },
+      { key: 'ftp', text: 'FTP', value: 'ftp' },
+      { key: 'snmp', text: 'SNMP', value: 'snmp' },
+      { key: 'oracle', text: 'Oracle', value: 'oracle' },
+      { key: 'mysql', text: 'MySQL', value: 'mysql' },
+      { key: 'wmi', text: 'WMI', value: 'wmi' },
+      { key: 'sql_server', text: 'SQL Server', value: 'sql_server' },
+      { key: 'stmp', text: 'STMP', value: 'stmp' },
+      { key: 'imap', text: 'IMAP', value: 'imap' },
+      { key: 'ssh', text: 'SSH', value: 'ssh' },
+      { key: 'telnet', text: 'Telnet', value: 'telnet' },
+      { key: 'casandra', text: 'Casandra', value: 'casandra' },
+      { key: 'mongodb', text: 'mongoDB', value: 'mongodb' },
+      { key: 'rmi', text: 'RMI', value: 'rmi' }
+    ];
+  }
+
+  handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps) {
+    // console.log( data.value);
+    // console.log( event.target);
+    // console.log(data.tabIndex);
+
+    let value: string = data.value;
+    switch (data.tabIndex) {
+      case '1':{
+        this.setState({
+          startIp: value,
+        });
+        break;
+      }
+      case '2':{
+        this.setState({
+          endIP: value,
+        });
+        break;
+      }
+      case '3':{
+        this.setState({
+          excludeIp: value,
+        });
+        break;
+      }
+      case '4':{
+        this.setState({
+          startPort: value,
+        });
+        break;
+      }
+      case '5':{
+        this.setState({
+          endPort: value,
+        });
+        break;
+      }
+      default:{
+        console.log("Error");
+        break;
+      }
+    }
+
+    console.log(this.state.startPort);
+  }
+
+  discoveryStartHandler(event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps) {
+    this.props.onProbeChange(this.state);
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h4' color='grey'> Discovery</Header>
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell width={4}><Header size='small'>Zone CIDR</Header></Table.Cell>
+              <Table.Cell width={12}><Input fluid disabled placeholder='Start IP' defaultValue='192.168.1.0/24' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell><Header size='small'>IP Range</Header></Table.Cell>
+              <Table.Cell>
+                <Input tabIndex='1' placeholder='Start IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='2' placeholder='End IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
+                <Input tabIndex='3' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} />
+              </Table.Cell>
+            </Table.Row>
+            <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)} />
+              </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}  />
+              </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>
+        <Button floated='right' primary onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
+      </Container>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/NoauthProbes.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { Table, Checkbox, Button, Header, Container } from 'semantic-ui-react';
+
+
+export class NoauthProbes extends React.Component<any, any> {
+
+  private data: any;
+  private selectedIds: Array<string>;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: [],
+    };
+    this.selectedIds = new Array();
+  }
+
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "11",
+        "MetaNoAuthProbeStatus": {
+          "name": "NORMAL"
+        },
+        "hostName": "insanity's windows",
+        "macAddress": "14:fe:b5:9d:54:7e",
+        "ipAddress": "192.168.1.105",
+        "tempProbeKey": "45374d4egsdfw332",
+        "apiKey": "45374d4egsdfw332",
+        "domain": {
+
+        },
+        "probe": {
+
+        },
+      },
+      {
+        "id": "22",
+        "MetaNoAuthProbeStatus": {
+          "name": "NORMAL"
+        },
+        "hostName": "insanity's ubuntu",
+        "macAddress": "14:fe:b5:9d:54:7e",
+        "ipAddress": "192.168.1.105",
+        "tempProbeKey": "45374d4egsdfw332",
+        "apiKey": "45374d4egsdfw332",
+        "domain": {
+
+        },
+        "probe": {
+
+        },
+      },
+    ];
+  }
+
+  handleSelect(id: string) {
+    let idx = this.selectedIds.indexOf(id);
+    if (idx === -1) {
+      this.selectedIds.push(id);
+    } else {
+      this.selectedIds.splice(idx, 1);
+    }
+    this.setState({
+      selected: this.selectedIds,
+    });
+  }
+
+  checkExist(id: string): boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  handleAccept() {
+    alert(this.state.selected);
+  }
+
+  handleDeny() {
+    alert(this.state.selected);
+  }
+
+  handleRowActive(id: string):boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  render() {
+
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Noauth Probes</Header>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell />
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>API Key</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((probe: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
+                <Table.Cell collapsing>
+                  <Checkbox checked={this.checkExist(probe.id)} />
+                </Table.Cell>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
+                <Table.Cell>{probe.hostName}</Table.Cell>
+                <Table.Cell textAlign={'center'}></Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+
+        <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
+        <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/@overflow/temp/react/components/ProbeDetails.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
+import { TargetTable } from './Targets';
+
+export class ProbeDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <ProbeBasicInfo probe={this.props.probe} />
+        <TargetTable />
+      </Container>
+    );
+  }
+}
+
+export class ProbeBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+  handleDiscovery(event: any, data: any) {
+    alert('Discovery');
+  }
+
+  handleBack(event: any, data: any) {
+    this.props.onBack();
+  }
+
+
+  showStartStopBtn() {
+    if (this.props.probe.metaProbeStatus.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Probe Info</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Domain</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host IP</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Host Name</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Authorized at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+        <Button content='List' icon='list' labelPosition='left' onClick={this.handleBack.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+        {this.showStartStopBtn()}
+
+      </Container>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/Probes.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-react';
+import { ProbeDetails } from './ProbeDetails';
+import { ListContainer } from './commons/ListContainer';
+
+export class Probes extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+      isDetail: false,
+      list: [],
+    };
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "11",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "asus"
+        },
+        "probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description1111111111",
+      },
+      {
+        "id": "22",
+        "metaProbeStatus": {
+          "name": "STOPPED"
+        },
+        "domain": {
+          "name": "ottugi"
+        },
+        "probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description22222222",
+      },
+      {
+        "id": "33",
+        "metaProbeStatus": {
+          "name": "STOPPED"
+        },
+        "domain": {
+          "name": "lg"
+        },
+        "probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description33333",
+      },
+      {
+        "id": "44",
+        "metaProbeStatus": {
+          "name": "STARTED"
+        },
+        "domain": {
+          "name": "apple"
+        },
+        "probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
+        "description": "description4444",
+      },
+    ];
+    this.setState({
+      list: this.data,
+    });
+  }
+
+  checkCellStatus(status: any): boolean {
+    if (status.name === 'STOPPED') {
+      return true;
+    }
+    return false;
+  }
+
+  handleSelect(selectedProbe: object) {
+    this.setState({
+      selected: selectedProbe,
+      isDetail: true,
+    });
+  }
+
+  handleSearch(result: object[]) {
+    this.setState({
+      list: result,
+    });
+  }
+
+  handleFilter(filterStr: string) {
+    if (filterStr === null) {
+      this.setState({
+        list: this.data,
+      });
+      return;
+    }
+    let founds = new Array();
+    for (let probe of this.data) {
+      if (probe.metaProbeStatus.name.indexOf(filterStr) !== -1) {
+        founds.push(probe);
+      }
+    }
+    this.setState({
+      list: founds,
+    });
+  }
+
+  renderRows() {
+    if (this.state.list.length === 0) {
+      return <Table.Row error >
+        <Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
+      </Table.Row>;
+    }
+    return this.state.list.map((probe: any, index: number) => (
+      <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
+        <Table.Cell >{probe.domain.name}</Table.Cell>
+        <Table.Cell>{index}</Table.Cell>
+        <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+        <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+        <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
+      </Table.Row>
+    ));
+  }
+
+
+  render() {
+    if (this.state.isDetail) {
+      return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
+    }
+    let probeList =
+      <Container fluid>
+        <Table selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderRows()}
+          </Table.Body>
+        </Table>
+      </Container>;
+
+    return (
+      <ListContainer
+        contents={probeList}
+        data={this.data}
+        onSearch={this.handleSearch.bind(this)}
+        filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
+      />
+    );
+  }
+}
+
+export class ProbeFilter extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      status: null,
+    };
+  }
+
+  handleChange(e: any, data: any) {
+    this.setState({
+      status: data.value,
+    });
+    this.props.onFilter(data.value);
+  }
+  handleReset(e: any, data: any) {
+    this.setState({
+      status: null,
+    });
+    this.props.onFilter(null);
+  }
+
+  render() {
+    //todo. getting MetaProbeStatus
+    let metaProbeStatus = [
+      {
+        "id": "1",
+        "name": "STARTED",
+      },
+      {
+        "id": "2",
+        "name": "STOPPED",
+      },
+    ];
+    return (
+      <Form>
+        <Container fluid>
+          <Button size='mini' floated='right' basic content='Reset' onClick={this.handleReset.bind(this)} />
+          <Form.Field>
+            <b>Status</b>
+          </Form.Field>
+
+          {metaProbeStatus.map((item: any, index: number) => (
+            <Form.Field key={index}>
+              <Checkbox
+                radio
+                label={item.name}
+                name='status'
+                value={item.name}
+                checked={this.state.status === item.name}
+                onChange={this.handleChange.bind(this)}
+              />
+            </Form.Field>
+          ))}
+        </Container>
+      </Form>
+    );
+  }
+}
+
+
+

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

@@ -0,0 +1,429 @@
+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';
+
+
+export class SensorConfiguration extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+
+  render() {
+    let steps = [<CrawlerSelector />, <SensorItemSelector />, <ETCSelector />];
+
+    return (
+      <ConfigStepper steps={steps} />
+    );
+  }
+}
+
+
+export class ConfigStepper extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      currentStep: 1,
+    };
+  }
+
+  handleActive(idx: number): boolean {
+    if (this.state.currentStep === idx) {
+      return true;
+    }
+    return false;
+  }
+
+  handleCompleted(idx: number): boolean {
+    if (this.state.currentStep > idx) {
+      return true;
+    }
+    return false;
+  }
+
+  handlePrev(event: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
+    let step: number = this.state.currentStep;
+    if (step <= 1) {
+      step = 1;
+    } else {
+      step--;
+    }
+    this.setState({
+      currentStep: step,
+    });
+  }
+  handleNext(event: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
+    let step: number = this.state.currentStep;
+    if (step >= this.props.steps.length + 1) {
+      step = this.props.steps.length + 1;
+    } else {
+      step++;
+    }
+    this.setState({
+      currentStep: step,
+    });
+    if (step === this.props.steps.length + 1) {
+      console.log("Done");
+    }
+  }
+
+  showContent() {
+    return this.props.steps[this.state.currentStep - 1];
+  }
+
+  checkPrevDisabled(): boolean {
+    if (this.state.currentStep <= 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  checkNextDisabled(): boolean {
+    if (this.state.currentStep === this.props.steps.length + 1) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Step.Group fluid>
+          <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
+            <Icon name='settings' />
+            <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
+          </Step>
+
+          <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
+            <Icon name='list ul' />
+            <Step.Content title='Step 2' description='골라골라 아이템도 골라' />
+          </Step>
+
+          <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
+            <Icon name='options' />
+            <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
+          </Step>
+        </Step.Group>
+        <br />
+        {this.showContent()}
+        <br />
+        <Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}
+          <Button content='Prev' icon='left arrow' labelPosition='left' onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()} />
+          <Button.Or />
+          <Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
+        </Button.Group>
+      </Container>
+    );
+  }
+}
+
+
+export class CrawlerSelector extends React.Component<any, any> {
+
+  private crawlers: object[];
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+      isInstalling: false,
+    };
+  }
+
+  componentWillMount() {
+    this.getMetaCrawlers();
+  }
+
+  getMetaCrawlers() {
+    //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) {
+      var option = {
+        key: crawler.id,
+        text: crawler.name,
+        value: crawler.name,
+        icon: 'check', //or close?
+      };
+      crawlerOptions.push(option);
+    }
+
+    this.crawlers = crawlerOptions;
+  }
+
+  handleCrawlerSelection(e: any, data: any) {
+    this.setState({
+      selected: data.value,
+    });
+    this.checkInstall();
+  }
+
+  checkInstall() {
+    this.setState({
+      isInstalling: true,
+    });
+    let that = this;
+    setInterval(() => {
+      this.setState({
+        isInstalling: false,
+      });
+    }, 1500);
+  }
+
+  render() {
+
+    return (
+      <Container fluid>
+        <Segment raised>
+          <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>
+      </Container>
+    );
+  }
+}
+
+export class CrawlerAuthInputs extends React.Component<any, any> {
+
+  private data: object[];
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      isVerifying: false,
+    };
+  }
+
+  componentWillMount() {
+    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..."
+      },
+    ];
+  }
+
+  handleVerify() {
+    this.setState({
+      isVerifying: true,
+    });
+  }
+
+  renderRow(item: any, index: number) {
+    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(<Radio
+          key={idx++}
+          label={itemValue}
+          name='radioGroup'
+          value={itemValue}
+        />);
+      }
+    }
+
+    return <Table.Row key={index}>
+      <Table.Cell collapsing>{item.keyName}</Table.Cell>
+      <Table.Cell >{elem}</Table.Cell>
+    </Table.Row >;
+  }
+
+  render() {
+    if (this.props.crawler === null) {
+      return null;
+    }
+    return (
+      <Table basic='very' celled collapsing >
+        <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 />
+            <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>
+    );
+  }
+}
+
+
+
+export class SensorItemSelector extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+
+  render() {
+    return (
+      <Accordion exclusive={false} styled>
+        <Accordion.Title>
+          <Icon name='dropdown' />
+          <Checkbox label='CPU' />
+        </Accordion.Title>
+        <Accordion.Content>
+          <Checkbox label='cpu.free' /><br />
+          <Checkbox label='cpu.free' /><br />
+        </Accordion.Content>
+
+        <Accordion.Title>
+          <Icon name='dropdown' />
+          <Checkbox label='MEM' />
+        </Accordion.Title>
+        <Accordion.Content>
+          <Checkbox label='cpu.free' /><br />
+          <Checkbox label='cpu.free' /><br />
+        </Accordion.Content>
+
+      </Accordion>
+    );
+  }
+}
+
+export class ETCSelector extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      interval: 5,
+    };
+  }
+  handleIntervalChange = (e: any, { value }: any) => this.setState({ interval: value });
+
+  render() {
+    return (
+      <Table celled={true}>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Interval
+            </Table.Cell>
+            <Table.Cell>
+              <Form.Field>
+                <Radio
+                  label='5 seconds'
+                  name='radioGroup'
+                  value='5'
+                  checked={this.state.interval === '5'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Radio
+                  label='10 seconds'
+                  name='radioGroup'
+                  value='10'
+                  checked={this.state.interval === '10'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+              <Form.Field>
+                <Radio
+                  label='15 seconds'
+                  name='radioGroup'
+                  value='15'
+                  checked={this.state.interval === '15'}
+                  onChange={this.handleIntervalChange}
+                />
+              </Form.Field>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Notification
+            </Table.Cell>
+            <Table.Cell></Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              Warn Condition
+            </Table.Cell>
+            <Table.Cell></Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/SensorDetails.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
+import { DetailContainer } from './commons/DetailContainer';
+import { SensorItems } from './SensorItems';
+
+export class SensorDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    const items = [
+      { name: 'Info', child: <Button sensor={this.props.sensor}/> },
+      { name: 'Sensor Items', child: <SensorItems sensor={this.props.sensor}/> },
+    ];
+    const data = {'probe':this.props.probe};
+    return (
+      <DetailContainer panes={items} data={data}/>
+    );
+  }
+}
+
+export class SensorBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+  handleDiscovery(event: any, data: any) {
+    alert('Discovery');
+  }
+
+  handleBack(event: any, data: any) {
+    this.props.onBack();
+  }
+
+
+  showStartStopBtn() {
+    if (this.props.probe.metaProbeStatus.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Sensor Details</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Domain</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Status</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Host IP</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Host Name</Header>
+              </Table.Cell>
+              <Table.Cell>????</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Authorized at</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.createDate}</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>
+                <Header size='small'>Description</Header>
+              </Table.Cell>
+              <Table.Cell>{this.props.probe.description}</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack.bind(this)} />
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
+        {this.showStartStopBtn()}
+
+      </Container>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/SensorItems.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
+
+export class SensorItems extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Sensor Item</Header>
+        Sensor Item List
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/@overflow/temp/react/components/Sensors.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { Table, Button, Header, Container } from 'semantic-ui-react';
+import { SensorDetails } from './SensorDetails';
+
+export class Sensors extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+       isDetail: false, //temp
+    };
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "111",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "WMI",
+          "description": "WMI description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "222",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "SNMP",
+          "description": "SNMP description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+      {
+        "id": "333",
+        "metaSensorStatus": {
+          "name": "NORMAL"
+        },
+        "target": {
+          "id": "1",
+        },
+        "metaCrawler": {
+          "name": "JMX",
+          "description": "JMX description",
+        },
+        "crawlerInputItems": "json value",
+        "description": "description1111111111",
+      },
+    ];
+  }
+
+  handleSelect(selectedSensor: object) {
+    this.setState({
+      selected: selectedSensor,
+      isDetail: true,
+    });
+  }
+
+  checkCellStatus(status: any): boolean {
+    if (status.name === 'STOPPED') {
+      return true;
+    }
+    return false;
+  }
+
+  showStartStopBtn(status: any) {
+    if (status.name === 'STARTED') {
+      return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    } else {
+      return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
+    }
+  }
+
+  handleStartStop(event: any, data: any) {
+    console.log(event);
+  }
+  handleAddSensor() {
+    console.log('adding a sensor');
+  }
+
+  render() {
+    if (this.state.isDetail) {
+      return <SensorDetails sensor={this.state.selected} />;
+    } 
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Sensors</Header>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Crawler</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((sensor: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, sensor)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>{sensor.metaSensorStatus.name}</Table.Cell>
+                <Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
+                <Table.Cell>{sensor.description}</Table.Cell>
+                <Table.Cell>to do</Table.Cell>
+                {/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/@overflow/temp/react/components/TableExampleSortable.tsx

@@ -0,0 +1,74 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Table } from 'semantic-ui-react';
+
+const tableData = [
+  { name: 'John', age: 15, gender: 'Male' },
+  { name: 'Amber', age: 40, gender: 'Female' },
+  { name: 'Leslie', age: 25, gender: 'Female' },
+  { name: 'Ben', age: 70, gender: 'Male' },
+];
+
+export class TableExampleSortable extends React.Component<any, any>  {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      column: null,
+      data: tableData,
+      direction: null,
+    };
+  }
+
+
+  handleSort = (clickedColumn:any) => () => {
+    const { column, data, direction } = this.state
+
+    if (column !== clickedColumn) {
+      this.setState({
+        column: clickedColumn,
+        data: _.sortBy(data, [clickedColumn]),
+        direction: 'ascending',
+      });
+
+      return
+    }
+
+    this.setState({
+      data: data.reverse(),
+      direction: direction === 'ascending' ? 'descending' : 'ascending',
+    })
+  };
+
+  render() {
+    const { column, data, direction } = this.state;
+
+    return (
+      <Table sortable celled fixed>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
+              Name
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
+              Age
+            </Table.HeaderCell>
+            <Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
+              Gender
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {_.map(data, ({ age, gender, name }) => (
+            <Table.Row key={name}>
+              <Table.Cell>{name}</Table.Cell>
+              <Table.Cell>{age}</Table.Cell>
+              <Table.Cell>{gender}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    )
+  }
+}

src/ts/@overflow/temp/react/components/TargetDetails.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Button, Table, Header, Container } from 'semantic-ui-react';
+import { Sensors } from './Sensors';
+import { DetailContainer } from './commons/DetailContainer';
+
+
+export class TargetDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleBack() {
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
+  render() {
+
+    const items = [
+      { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
+      { name: 'Sensors', child: <Sensors probe={this.props.probe} /> },
+    ];
+
+    return (
+      // <DetailContainer panes={items}/>
+      <Container fluid>
+        <TargetBasicInfo probe={this.props.probe} />
+        <Sensors probe={this.props.probe} />
+      </Container>
+    );
+  }
+}
+
+
+
+export class TargetBasicInfo extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Target Info</Header>
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Name</Header>
+              </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Type</Header>
+              </Table.Cell>
+              <Table.Cell>
+                ????
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Sensor count</Header>
+              </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Created at</Header>
+              </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+          </Table.Body>
+        </Table>
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+
+      </Container>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/Targets.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { Table, Button, Modal, Input, Header, Container } from 'semantic-ui-react';
+import { TargetDetails } from './TargetDetails';
+
+export class Targets extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      openAddTarget: false,
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  handleAddTarget() {
+    this.setState({
+      openAddTarget: true,
+    });
+  }
+
+  render() {
+    const options = [
+      { key: 'm', text: 'Male', value: 'male' },
+      { key: 'f', text: 'Female', value: 'female' },
+    ];
+
+    return (
+      <Container fluid>
+        {/*search bar  */}
+        <TargetTable />
+        <br />
+        <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
+        <br /><br /><br /><br /><br /><br /><br /><br /><br />
+        <TargetDetails target={this.state.selected} />
+
+        <Modal
+          open={this.state.openAddTarget}
+        >
+          <Modal.Header>
+            Adding a Target
+          </Modal.Header>
+          <Modal.Content>
+            <p>contents</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
+            <Button positive labelPosition='right' icon='checkmark' content='Done' />
+          </Modal.Actions>
+        </Modal>
+      </Container>
+    );
+  }
+}
+
+
+export class TargetTable extends React.Component<any, any> {
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+      list: [],
+    };
+  }
+  handleSelect(selectedTarget: object) {
+    this.setState({
+      selected: selectedTarget,
+    });
+  }
+
+  handleSearch(e: any, data: any) {
+    let searchWord = data.value.toLowerCase();
+    let foundTarget = new Array();
+    for(let target of this.data) {
+      let typeName = target.infra.metaInfraType.name.toLowerCase();
+      if(typeName.indexOf(searchWord) !== -1) {
+        foundTarget.push(target);
+      }
+    }
+    this.setState({
+      list: foundTarget,
+    });
+  }
+
+  componentWillMount() {
+    this.data = [
+      {
+        "id": "1",
+        "createDate": "",
+        "probe": {
+          "id": "1",
+        },
+        "infra": {
+          "id": "1",
+          "metaInfraType": {
+            "id": "1",
+            "name": "OS",
+            "createDate": "424252"
+          },
+          "childId": "1",
+          "createDate": "13345235"
+        },
+      },
+      {
+        "id": "2",
+        "createDate": "",
+        "probe": {
+          "id": "1",
+        },
+        "infra": {
+          "id": "1",
+          "metaInfraType": {
+            "id": "1",
+            "name": "Host",
+            "createDate": "424252"
+          },
+          "childId": "1",
+          "createDate": "13345235"
+        },
+      },
+    ];
+    this.setState({
+      list: this.data,
+    });
+  }
+
+  render() {
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Targets</Header>
+        <Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Version</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.state.list.map((target: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{target.infra.metaInfraType.name}</Table.Cell>
+                <Table.Cell>todo</Table.Cell>
+                <Table.Cell>todo</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+
+

src/ts/@overflow/temp/react/components/TopBar.tsx

@@ -0,0 +1,165 @@
+import *as React from 'react'
+import {
+  Dropdown, Icon, Menu, Label,
+
+  Sidebar, Segment, Button, Image, Header,
+} from 'semantic-ui-react'
+
+import { Link, Route } from 'react-router-dom';
+import * as History from 'history';
+
+const options = [
+  { key: 'angular', text: 'Angular', value: 'angular' },
+  { key: 'css', text: 'CSS', value: 'css' },
+  { key: 'design', text: 'Graphic Design', value: 'design' },
+  { key: 'ember', text: 'Ember', value: 'ember' },
+  { key: 'html', text: 'HTML', value: 'html' },
+  { key: 'ia', text: 'Information Architecture', value: 'ia' },
+  { key: 'javascript', text: 'Javascript', value: 'javascript' },
+  { key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
+  { key: 'meteor', text: 'Meteor', value: 'meteor' },
+  { key: 'node', text: 'NodeJS', value: 'node' },
+  { key: 'plumbing', text: 'Plumbing', value: 'plumbing' },
+  { key: 'python', text: 'Python', value: 'python' },
+  { key: 'rails', text: 'Rails', value: 'rails' },
+  { key: 'react', text: 'React', value: 'react' },
+  { key: 'repair', text: 'Kitchen Repair', value: 'repair' },
+  { key: 'ruby', text: 'Ruby', value: 'ruby' },
+  { key: 'ui', text: 'UI Design', value: 'ui' },
+  { key: 'ux', text: 'User Experience', value: 'ux' },
+]
+
+
+
+
+export class TopBar extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      notification_visible: false,
+    };
+
+  }
+
+
+  render() {
+ {/*<h1>React Redux sample</h1>
+        
+        <li><Link to='/test' >TopBar</Link></li>
+        <li><Link to='/test2' >Signup</Link></li>
+        <li><Link to='/test3' >SignIn</Link></li>
+        <li><Link to='/test4' >PWChange</Link></li>
+        <li><Link to='/test5' >ProbeDown</Link></li>
+        <li><Link to='/test6' >DiscoveryDetails</Link></li>
+
+        <li><Link to='/test14' >Insanity</Link></li>*/}
+
+    return (
+
+      
+      <div>
+        <Menu  inverted borderless size='tiny'>
+          <Menu.Item>  overFlow   </Menu.Item>
+          <Menu.Item href='/' > Home   </Menu.Item>
+          <Dropdown text='Monitoring' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Header icon='angle right' content='Probe'/>
+              <Dropdown.Divider />
+              <Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Download </Dropdown.Item>
+              <Dropdown.Divider />
+              <Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          
+          <Dropdown text='Infrastructure' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Item> Maps </Dropdown.Item>
+              <Dropdown.Item>Targets</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Menu.Item link>            Dashboard    </Menu.Item>
+          <Menu.Item link>            Metrics    </Menu.Item>
+          <Menu.Item link>            Alert    </Menu.Item>
+          <Menu.Item link>            History    </Menu.Item>
+          <Dropdown text='Custom' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
+              <Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
+              <Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
+              <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
+              <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
+              <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
+              <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          
+
+          <Menu.Item position='right' link>
+            <Icon name='setting' size='large' />
+          </Menu.Item>
+          <Menu.Item onClick={() => {
+            this.props.onSidebar();
+          }}>
+            <Label color='teal' horizontal>22</Label>
+          </Menu.Item>
+          <Menu.Item link>
+            <Dropdown icon='user' className='ui pointing dropdown top right'>
+              <Dropdown.Menu >
+                <Dropdown.Item text='Log out' />
+                <Dropdown.Divider />
+                <Dropdown.Item text='Settings' />
+                <Dropdown.Item text='- Profile' />
+                <Dropdown.Item text='- Preferences' />
+                <Dropdown.Item text='- Change Password' />
+                <Dropdown.Divider />
+                <Dropdown.Item text='Help' />
+              </Dropdown.Menu>
+            </Dropdown>
+          </Menu.Item>
+
+
+        </Menu>
+
+
+        {/*<Sidebar.Pushable as={Segment}  >
+          <Sidebar
+            as={Menu}
+            animation='overlay'
+            width='thin'
+            direction='right'
+            visible={this.state.notification_visible}
+            icon='labeled'
+            vertical
+            inverted
+
+          >
+            <Menu.Item name='home'>
+              <Icon name='home' />
+              Home
+            </Menu.Item>
+            <Menu.Item name='gamepad'>
+              <Icon name='gamepad' />
+              Games
+            </Menu.Item>
+            <Menu.Item name='camera'>
+              <Icon name='camera' />
+              Channels
+            </Menu.Item>
+          </Sidebar>
+          <Sidebar.Pusher >
+            <Segment basic >
+
+            </Segment>
+          </Sidebar.Pusher>
+        </Sidebar.Pushable>*/}
+      </div>
+    );
+  }
+
+
+
+}
+

src/ts/@overflow/temp/react/components/commons/DetailContainer.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Grid, Menu, Segment } from 'semantic-ui-react';
+
+export class DetailContainer extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      active: 0,
+    };
+  }
+
+  showContents() {
+    return this.props.panes[this.state.active].child;
+  }
+
+  handleClick(index: number) {
+    this.setState({
+      active: index,
+    });
+  }
+
+  render() {
+    const activeItem = this.state.activeItem;
+
+    return (
+      <Grid>
+        <Grid.Column width={4} >
+          <Menu pointing secondary vertical >
+            {this.props.panes.map((pane: any, index: number) => (
+              <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
+            ))}
+          </Menu>
+        </Grid.Column>
+
+        <Grid.Column stretched width={12} >
+          <Segment basic>
+            {this.showContents()}
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/commons/ListContainer.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
+
+export class ListContainer extends React.Component<any, any> {
+
+  private found: boolean = false;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+
+  }
+
+  handleSearch(e: any, data: any) {
+    let searchWord = data.value;
+    let items: object[];
+    items = this.props.data;
+    let item: any;
+
+    let result = new Array();
+    for (item of items) {
+      this.search(item, searchWord);
+      if (this.found) {
+        result.push(item);
+      }
+      this.found = false;
+    }
+
+    this.props.onSearch(result);
+  }
+
+  handleSearchInput(e: any, data: any) {
+    this.setState({
+      searchWord: data.value,
+    });
+  }
+
+  search(item: any, searchWord: string) {
+    let key: any;
+    for (key in item) {
+      if (this.isString(item[key])) {
+        if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
+          this.found = true;
+        }
+      } else {
+        this.search(item[key], searchWord);
+      }
+    }
+  }
+
+  isString(val: any): boolean {
+    if (typeof val === 'string') {
+      return true;
+    }
+    return false;
+  }
+
+  render() {
+    return (
+      <Grid>
+        <Grid.Column width={4}>
+          <Input icon='search' label={{ icon: 'asterisk' }}
+            labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
+          <Divider />
+          {this.props.filter}
+        </Grid.Column>
+        <Grid.Column stretched width={12} >
+          {this.props.contents}
+        </Grid.Column>
+      </Grid>
+    );
+  }
+}

src/ts/@overflow/temp/react/components/commons/Tab.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Menu, Segment } from 'semantic-ui-react';
+
+export class Tab extends React.Component<any, any> {
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+            active: 0,
+        };
+    }
+
+    showContents() {
+        return this.props.panes[this.state.active].child;
+    }
+
+    handleClick(index: number) {
+        this.setState({
+            active: index,
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <Menu pointing secondary>
+                    {this.props.panes.map((pane: any, index: number) => (
+                        <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
+                    ))}
+                </Menu>
+
+                <Segment vertical>
+                    {this.showContents()}
+                </Segment>
+            </div>
+        );
+    }
+}

src/ts/@overflow/temp/react/components/commons/Tree.tsx

@@ -0,0 +1,399 @@
+import * as React from 'react';
+// import update from 'immutability-helper';
+
+
+
+
+
+
+import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
+
+
+import Host from '@overflow/discovery/api/model/Host';
+import Port from '@overflow/discovery/api/model/Port';
+import Service from '@overflow/discovery/api/model/Service';
+
+import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
+
+import * as Utils from '@overflow/commons/utils/Utils';
+
+
+
+
+// import update from 'immutability-helper'
+
+export class Tree extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    return (
+      <Container>
+        <SensorItemTree />
+      </Container>
+    );
+  }
+
+
+}
+
+
+
+export class SensorItemTree extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      portState: [],
+    };
+
+
+    // fs.readFile('../../../../../dh.json', this.handlJSONFile);
+  }
+
+  render() {
+    return (
+      <Container>
+        <List selection>
+          {SensorJsonData.map((data: any, idx: number)=> {
+
+          })}
+        </List>
+      </Container>
+    );
+  }
+
+}
+
+const SensorTypeJsonData = [
+	{
+		"id" : 1,
+		"create_date" : "2017-06-26T10:49:39Z",
+		"description" : "CPU blah blah blah",
+		"name" : "CPU"
+	},
+	{
+		"id" : 2,
+		"create_date" : "2017-06-26T10:49:39Z",
+		"description" : "MEMORY blah blah blah",
+		"name" : "MEMORY"
+	},
+	{
+		"id" : 3,
+		"create_date" : "2017-06-26T10:49:39Z",
+		"description" : "DISK blah blah blah",
+		"name" : "DISK"
+	}
+];
+
+const SensorJsonData = [
+  {
+    "id": 1,
+    "create_date": "2017-06-26T11:10:08Z",
+    "key": "cpu.usage",
+    "name": "CPU USAGE",
+    "type_id": 1
+  },
+  {
+    "id": 2,
+    "create_date": "2017-06-26T11:10:08Z",
+    "key": "cpu.free",
+    "name": "CPU FREE",
+    "type_id": 1
+  },
+  {
+    "id": 3,
+    "create_date": "2017-06-26T11:10:08Z",
+    "key": "mem.usage",
+    "name": "MEMORY USAGE",
+    "type_id": 2
+  },
+  {
+    "id": 4,
+    "create_date": "2017-06-26T11:10:08Z",
+    "key": "mem.free",
+    "name": "MEMORY FREE",
+    "type_id": 2
+  }
+];
+
+export class DiscoveryResult extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      portState: [],
+    };
+
+
+    // fs.readFile('../../../../../dh.json', this.handlJSONFile);
+  }
+
+
+  render() {
+
+    return (
+      <Container>
+        <List selection>
+          {
+
+            jsonData.map((data: any, index: number) => {
+              let hh: Host = data;
+              this.state.portState[hh.ip] = false;
+              return (
+                <List.Item key={index} >
+
+                  <List.Icon name='folder' onClick={() => {
+
+
+
+                    {/*const newPortState = update.newContext()(this.state.portState, {
+                      [hh.ip]: !this.state.portState[hh.ip]
+                    });*/}
+
+                    {/*this.setState({ portState: newPortState });*/ }
+
+                  }} />
+
+                  <List.Content>
+
+                    <List.Header> <Checkbox label={Utils.int2ip(hh.ip) + ' ' + hh.os} />   </List.Header>
+                    <List.Description>Host</List.Description>
+                    {this.state.portState[hh.ip] ?
+                      hh.ports ? hh.ports.map((port: Port, idx: number) => {
+
+                        return (
+                          <List.List key={idx * 1000}>
+                            <List.Item>
+                              <List.Icon name='folder' />
+                              <List.Content>
+                                <List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} /></List.Header>
+                                <List.Description>Port</List.Description>
+                                {port.services ? port.services.map((service: Service, sIdx: number) => {
+                                  return (
+                                    <List.List key={sIdx * 10000}>
+                                      <List.Item>
+                                        <List.Icon name='folder' />
+                                        <List.Content>
+                                          <List.Header><Checkbox label={service.serviceName + ' ' + service.portType} /></List.Header>
+                                          <List.Description>Service</List.Description>
+                                        </List.Content>
+                                      </List.Item>
+                                    </List.List>
+                                  );
+                                }) : ''}
+                              </List.Content>
+                            </List.Item>
+                          </List.List>
+                        );
+                      }) : '' : ''}
+
+                  </List.Content>
+                </List.Item>
+              );
+
+            })}
+        </List>
+
+        {/*<List>
+          <List.Item >
+            <Label basic onClick={() => {
+              this.setState({ tt: !this.state.tt });
+            }}>Host</Label>
+            <Checkbox />
+          </List.Item>
+          {this.state.tt ? <List.Item selection >
+            <List.List>
+              <List.Item>Port 22 NOR</List.Item>
+              <List.Item>Port 443 TLS</List.Item>
+              <List.Item>Port 80 NOR </List.Item>
+            </List.List>
+          </List.Item> : ''}
+        </List>*/}
+      </Container>
+    );
+  }
+}
+
+const jsonData = [{
+  "firstScanRange": 1,
+  "lastScanRange": 10000,
+  "name": "",
+  "ip": 3232235818,
+  "mac": 91754662925,
+  "os": "Windows",
+  "ports": [{
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "SSH",
+      "target": true
+    }],
+    "portType": "TCP",
+    "portNumber": 22
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 443
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 80
+  }],
+  "createDate": 1498470178000,
+  "updateDate": 1498470178000
+},
+{
+  "firstScanRange": 1,
+  "lastScanRange": 10000,
+  "name": "",
+  "ip": 3232235781,
+  "mac": 91754660625,
+  "os": "Windows",
+  "ports": [{
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "SSH"
+    }],
+    "portType": "TCP",
+    "portNumber": 22
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 80
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 1936
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": null,
+    "portType": "TCP",
+    "portNumber": 443
+  }],
+  "createDate": 1498470178000,
+  "updateDate": 1498470178000
+},
+{
+  "firstScanRange": 1,
+  "lastScanRange": 10000,
+  "name": "",
+  "ip": 3232235797,
+  "mac": 91754662913,
+  "os": "Windows",
+  "target": true,
+  "ports": [{
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 80
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "SSH"
+    }],
+    "portType": "TCP",
+    "portNumber": 22
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 3343
+  },
+  {
+    "createDate": -62135596800000,
+    "updateDate": -62135596800000,
+    "services": [{
+      "createDate": -62135596800000,
+      "updateDate": -62135596800000,
+      "portType": "TCP",
+      "serviceName": "HTTP"
+    }],
+    "portType": "TCP",
+    "portNumber": 443
+  }],
+  "createDate": 1498470178000,
+  "updateDate": 1498470178000
+},
+{
+  "firstScanRange": 1,
+  "lastScanRange": 10000,
+  "name": "",
+  "ip": 3232235877,
+  "mac": 75361038758387,
+  "os": "Windows",
+  "ports": null,
+  "createDate": 1498470179000,
+  "updateDate": 1498470179000
+}
+
+
+]