fix

src/ts/Routes.tsx

@@ -12,6 +12,8 @@ import { SensorConfig } from './containers/config/SensorConfig';
 import { WaitForAuth } from './containers/agent/WaitForAuth';
 import { MemberRegistResult } from './containers/member/RegistResult';
 import { MemberEmailConfirm } from './containers/member/EmailConfirm';
+import { Agents } from './containers/agent/Agents';
+import { AgentDetail } from './containers/agent/AgentDetail';
 
 export class Routes extends React.Component<any, any> {
   render() {
@@ -29,6 +31,8 @@ export class Routes extends React.Component<any, any> {
 
         <li><Link to='/config/sensorconfig' >SensorConfig</Link></li>
         <li><Link to='/prove/download' >ProveDownload</Link></li>
+        <li><Link to='/agent/agents' >Agents</Link></li>
+        <li><Link to='/agent/agentDetail' >AgentDetail</Link></li>
         
         <Switch>
           <Route exact path='/' component={Main} />
@@ -40,6 +44,9 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/agent/waitauth' component={WaitForAuth} />
           <Route exact path='/config/sensorconfig' component={SensorConfig} />
           <Route exact path='/prove/download' component={ProveDownload} />
+          <Route exact path='/agent/agents' component={Agents} />
+          <Route exact path='/agent/agentDetail' component={AgentDetail} />
+
           <Route component={NotFound} />
         </Switch>
         

src/ts/components/Rest.tsx

@@ -32,3 +32,4 @@ export class OFRest {
     }
 
 }
+

src/ts/containers/agent/AgentDetail.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableFooter,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import { Link, Route, Redirect } from 'react-router-dom';
+import Divider from 'material-ui/Divider';
+import { TargetSelector } from '../config/TargetSelector';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import { Tabs, Tab } from 'material-ui/Tabs';
+import TextField from 'material-ui/TextField';
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+
+
+const styles = {
+    headline: {
+        fontSize: 24,
+        paddingTop: 16,
+        marginBottom: 12,
+        fontWeight: 400,
+    },
+}
+
+export class AgentDetail extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+            targetAddOpen: false,
+            targetAddType: 'host',
+            hostToAdd : '',
+            appToAdd: 1,
+            addType : 'host'
+        }
+
+    };
+
+    handleAddTarget = () => {
+        this.setState({
+            targetAddOpen: true
+        })
+    }
+    handleAddTargetPopupCancle = () => {
+        this.setState({ targetAddOpen: false });
+    };
+
+    handleRowSelected = (selectedRows: number[] | string) => {
+        console.log(selectedRows);
+    }
+
+    handleTargetTypeChange = (value: any) => {
+        this.setState({
+            addType: value,
+        });
+    };
+
+    handleAddTargetSubmit = (event: any) => {
+       if (this.state.addType == "host") {
+           alert(this.state.hostToAdd);
+       }else if (this.state.addType == "application") {
+           alert(this.state.appToAdd);
+       }
+       this.setState({targetAddOpen: false})
+    };
+
+    handleIPChange = (event: any) => {
+        this.setState({
+            hostToAdd : event.target.value
+        })
+    };
+
+    handleApplicationChange = (event:any, index:any, value:any) => {
+        this.setState({
+            appToAdd : value
+        })
+    };
+
+    render() {
+
+        const actions = [
+            <FlatButton
+                label="Cancel"
+                primary={true}
+                onTouchTap={this.handleAddTargetPopupCancle}
+            />,
+            <FlatButton
+                label="Submit"
+                primary={true}
+                onTouchTap={this.handleAddTargetSubmit}
+            />,
+        ];
+
+        return (
+
+            <div>
+                <div style={{ height: 100 }}>
+                    prove description area
+                    </div>
+                <Divider />
+
+                <div style={{ padding: 10, float: 'right' }}>
+                    <FloatingActionButton onClick={this.handleAddTarget}>
+                        <ContentAdd />
+                    </FloatingActionButton>
+                </div>
+
+                <div style={{ height: 300 }}>
+                    discovery result + target area
+                </div>
+
+                <Dialog
+                    title="Add Target to monitor"
+                    actions={actions}
+                    modal={true}
+                    open={this.state.targetAddOpen}>
+
+                    <Tabs
+                        value={this.state.value}
+                        onChange={this.handleTargetTypeChange}
+                    >
+                        <Tab label="Host" value="host">
+                            <div style={{padding:20}}>
+                                <TextField onChange={this.handleIPChange} 
+                                    hintText="IP Address"
+                                /><br />
+                            </div>
+                        </Tab>
+                        <Tab label="Application" value="application">
+                            <div style={{padding:20}}>
+                                <SelectField
+                                    value={this.state.appToAdd}
+                                    onChange={this.handleApplicationChange}
+                                >
+                                    <MenuItem value={1} primaryText="MySQL" />
+                                    <MenuItem value={2} primaryText="Redis" />
+                                </SelectField>
+                            </div>
+                        </Tab>
+                    </Tabs>
+
+                </Dialog>>
+            </div>
+
+        );
+    }
+
+
+}

src/ts/containers/agent/Agents.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import {
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderColumn,
+    TableFooter,
+    TableRow,
+    TableRowColumn,
+} from 'material-ui/Table';
+import { Link, Route, Redirect } from 'react-router-dom';
+import { OFRest } from '../../components/Rest';
+
+const styles = {
+    propContainer: {
+        width: 200,
+        overflow: 'hidden',
+        margin: '20px auto 0',
+    },
+    propToggleHeader: {
+        margin: '20px auto 10px',
+    },
+};
+
+const tableData = [
+    {
+        agentId: '111',
+        desc: 'Agent 1',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 2',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 3',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 4',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 5',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 6',
+        status: 'Wait For Auth',
+    },
+    {
+        agentId: 'wqekoekeeeeerw',
+        desc: 'Agent 7',
+        status: 'Wait For Auth',
+    },
+];
+
+export class Agents extends React.Component<any, any> {
+    constructor(props: any, context: any) {
+        super(props, context)
+        this.state = {
+            agents: []
+        };
+        this.getAgents();
+    };
+
+    getAgents = () => {
+        let output: string;
+        let obj: any; //new object declaration
+        obj = {
+            "phone": this.state.phone
+        };
+
+        let os: OFRest = new OFRest("Agent", "Regist", obj);
+
+        os.Call().then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            console.log(json);
+        }).catch(function (err) {
+            console.log(err);
+        });
+    }
+
+
+    handleRowSelected = (selectedRows: number[] | string) => {
+        this.props.history.push('/agent/agentDetail');
+    }
+
+    render() {
+
+        return (
+
+            <div>
+                <Table
+                    selectable={true}
+                    multiSelectable={false}
+                    onRowSelection={this.handleRowSelected}
+                >
+                    <TableHeader
+                        adjustForCheckbox={false}
+                        enableSelectAll={false}
+                        displaySelectAll={false}>
+                        <TableRow>
+                            <TableHeaderColumn tooltip="The Agent Id">Agent Id</TableHeaderColumn>
+                            <TableHeaderColumn tooltip="The Description">Description</TableHeaderColumn>
+                            <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody
+                        displayRowCheckbox={false}
+                    >
+                        {tableData.map((row: any, index: number) => (
+                            <TableRow key={index} >
+                                <TableRowColumn>{row.agentId}</TableRowColumn>
+                                <TableRowColumn>{row.desc}</TableRowColumn>
+                                <TableRowColumn>{row.status}</TableRowColumn>
+                            </TableRow>
+                        ))};
+
+                        </TableBody>
+                </Table>
+            </div>
+
+        );
+    }
+
+
+}

src/ts/containers/agent/WaitForAuth.tsx

@@ -12,6 +12,7 @@ import {
 import Toggle from 'material-ui/Toggle';
 import FlatButton from 'material-ui/FlatButton';
 import Dialog from 'material-ui/Dialog';
+import { OFRest } from '../../components/Rest';
 
 const styles = {
     propContainer: {
@@ -65,7 +66,7 @@ const tableData = [
 export class WaitForAuth extends React.Component<any, any> {
     constructor(props: any, context: any) {
         super(props, context)
-
+        this.getList();
     };
 
     state = {
@@ -79,6 +80,24 @@ export class WaitForAuth extends React.Component<any, any> {
 
     sselectedRows: number[] | string;
 
+    getList = () => {
+        let output: string;
+        let obj: any; //new object declaration
+        obj = {
+            "authStatus": "ACCEPT"
+        };
+
+        let os: OFRest = new OFRest("NoauthAgent", "GetNoAuthList", obj);
+
+        os.Call().then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            console.log(json);
+        }).catch(function (err) {
+            console.log(err);
+        });
+    };
+
     // handleCellClick = (e: any, idx: number) => {
     //     console.log(e)
     // }

src/ts/containers/config/SensorConfig.tsx

@@ -10,7 +10,6 @@ import FlatButton from 'material-ui/FlatButton';
 import { TargetSelector } from './TargetSelector';
 import { CrawlerSelector } from './CrawlerSelector';
 import { ItemSelector } from './ItemSelector';
-import Dialog from 'material-ui/Dialog';
 
 export class SensorConfig extends React.Component<any, any> {