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

.gitignore

@@ -60,3 +60,4 @@ typings/
 dist/
 
 .idea/
+yarn.lock

src/ts/App.tsx

@@ -32,11 +32,9 @@ export class App extends React.Component<any, any> {
  
   render() {
     return (
-      <MuiThemeProvider muiTheme={muiTheme}>
         <Router history={history}>
           <Routes />
         </Router>
-      </MuiThemeProvider>
     );
   }
 }

src/ts/Routes.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import { Switch } from 'react-router';
 import { Link, Route } from 'react-router-dom';
 
- import { TopBar } from './containers/test/TopBar';
+import { TopBar } from './containers/test/TopBar';
- import { SignUp } from './containers/test/SignUp';
+import { SignUp } from './containers/test/SignUp';
- import { SignIn } from './containers/test/SignIn';
+import { SignIn } from './containers/test/SignIn';
- import { PWChange } from './containers/test/PWChange';
+import { PWChange } from './containers/test/PWChange';
- import { ProbeDown } from './containers/test/ProbeDown';
+import { ProbeDown } from './containers/test/ProbeDown';
+import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
+
 
 import { Components } from './containers/test/Components';
 
@@ -21,15 +23,18 @@ export class Routes extends React.Component<any, any> {
         <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>
 
+
         <Switch>
           <Route exact path='/test' component={TopBar} />
           <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='/test14' component={Components} />
         </Switch>

src/ts/containers/member/InputBox.tsx

@@ -0,0 +1,28 @@
+/**
+ * Created by geek on 17. 7. 7.
+ */
+
+import * as React from 'react';
+import {Input, Button} from 'semantic-ui-react';
+
+// const InputExampleInput = () => (
+//   <Input placeholder='Search...' />
+// )
+//
+// export default InputExampleInput
+
+export class InputBox extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+  }
+
+  render() {
+    return (
+      <div>
+        <Input  placeholder='search' />
+        <Button > Click </Button>
+      </div>
+    );
+  }
+}

src/ts/containers/member/PasswordChange.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+import {Input} from 'semantic-ui-react'
+
+const styles = {
+  body: {
+    textAlign: 'center',
+  },
+  container: {
+    textAlign: 'center',
+
+  },
+
+  textfield: {
+    width: 300,
+    marginLeft: 3
+  },
+
+  customWidth: {
+    width: 150,
+  },
+  button: {
+    margin: 12,
+  }
+};
+
+
+export class MemberPasswordChange extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.handlePasswordChange = this.handlePasswordChange.bind(this);
+
+    this.state = {
+      open: false,
+      value: 1,
+
+      pw: "",
+      pwConfirm: "",
+      errtext:"",
+    };
+  }
+
+  handleChange = () => this.setState({});
+
+  private emailInput: any;
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
+  handleTouchTap = () => {
+    this.setState({
+      open: true,
+    });
+  }
+
+  handlePasswordChange = () => {
+
+    let output: string;
+    let obj: any; //new object declaration
+
+    console.log(this.state.pw);
+    console.log(this.state.pwConfirm);
+    if (this.state.pw !==  this.state.pwConfirm) {
+      console.log("dddd");
+      this.setState({ errtext: "Password not equal" });
+      return;
+
+    }
+    obj = {
+      "pw": this.state.pw,
+      "pwConfirm": this.state.pwConfirm,
+    };
+
+    let exeObj: any;
+    exeObj = {
+      "serviceName": "Member",
+      "methodName": "PwChange",
+      "param": obj
+    }
+
+
+    output = JSON.stringify(exeObj);
+  }
+
+
+
+  btnTouchTap = () => {
+    alert(event)
+  };
+
+  render() {
+
+    return (
+      <div style={styles.container}>
+        <h1>Log in with a overflow Account:</h1>
+        <br />
+        <TextField
+          hintText="Password11"
+          floatingLabelText="Password"
+          errorText=""
+          type="password"
+          style={styles.textfield}
+          value={this.state.pw}
+          onChange={(e, newValue) => this.setState({ pw: newValue })}
+        />
+
+        <br />
+
+        <TextField
+          hintText="Password Confirm"
+          floatingLabelText="Password Confirm"
+          errorText=""
+          type="password"
+          style={styles.textfield}
+          value={this.state.pwConfirm}
+          onChange={(e, newValue) => this.setState({ pwConfirm: newValue })}
+        />
+        <br />
+
+
+        <RaisedButton label="Password Change" primary={true} style={styles.button} onClick={this.handlePasswordChange.bind(this)} />
+        <Link to="/member/regist"><RaisedButton label="Sign Up" primary={false} style={styles.button} /></Link>
+
+        <Input placeholder='Search...' />
+        </div>
+    );
+  }
+}

src/ts/containers/test/DiscoveryDetails.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Button } from 'semantic-ui-react';
+import { DiscoveryProbe } from './DiscoveryProbe';
+import { DiscoveryTable } from './DiscoveryTable';
+
+export class DiscoveryDetails extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  discoveryStartHandler = (event: any, data: object) => {
+    console.log(event);
+  };
+
+  render() {
+    return (
+      <div>
+        <div style={{ margin: '20px' }}>
+          <DiscoveryProbe />
+        </div>
+        <div style={{ margin: '20px' }}>
+          <DiscoveryTable />
+        </div>
+        <div style={{ margin: '20px' }}>
+          <Button floated='right' onClick={this.discoveryStartHandler}> Start </Button>
+        </div>
+
+      </div>
+
+    );
+  }
+}

src/ts/containers/test/DiscoveryProbe.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Table, Label } from 'semantic-ui-react';
+
+
+export class DiscoveryProbe extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  componentWillMount() {
+
+  }
+
+  render() {
+    return (
+      <div>Probe Details...
+        <Table celled={false}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Domain</Label>
+              </Table.Cell>
+              <Table.Cell>overFlow's domain111</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Status</Label>
+              </Table.Cell>
+              <Table.Cell>STARTED</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon >Host IP</Label>
+              </Table.Cell>
+              <Table.Cell>192.168.1.103</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon >Host Name</Label>
+              </Table.Cell>
+              <Table.Cell>Geek`s Ubuntu</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Authorized at</Label>
+              </Table.Cell>
+              <Table.Cell>2017-07-13</Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Label ribbon>Description</Label>
+              </Table.Cell>
+              <Table.Cell>description1111111111</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+
+      </div>
+    )
+  }
+
+}

src/ts/containers/test/DiscoveryTable.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Table, Label, Input } from 'semantic-ui-react';
+
+export class DiscoveryTable extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div>
+        <Table celled>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell width='1'>Start IP</Table.Cell>
+              <Table.Cell width='6'><Input size='large' placeholder='Start IP'  /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>End IP</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='End IP' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Exclude IP</Table.Cell>
+              <Table.Cell><Input  size='large' placeholder='Exclude IP' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>Start Port</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='Start Port' /></Table.Cell>
+            </Table.Row>
+            <Table.Row>
+              <Table.Cell>End Port</Table.Cell>
+              <Table.Cell><Input size='large' placeholder='End Port' /></Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </div>
+    );
+  }
+}

src/ts/containers/test/ProbeDetails.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Table, Label } from 'semantic-ui-react';
-import { Targets } from './Targets';
+import { TargetTable } from './Targets';
 
 export class ProbeDetails extends React.Component<any, any> {
 
@@ -85,7 +85,7 @@ export class ProbeDetails extends React.Component<any, any> {
           <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
           {this.showStartStopBtn()}
 
-          <Targets/>
+          <TargetTable probe={this.props.probe}/>
         </div>;
     }
     return (

src/ts/containers/test/Sensors.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { Table, Button } from 'semantic-ui-react';
+
+
+export class Sensors extends React.Component<any, any> {
+
+  private data: any;
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selected: null,
+    };
+  }
+
+  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(selectedProbe: object) {
+    this.setState({
+      selected: selectedProbe,
+    });
+  }
+
+  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);
+  }
+
+  render() {
+
+    return (
+      <div>
+        <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.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>
+      </div>
+    );
+  }
+}
+
+
+

src/ts/containers/test/TargetDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Button, Table, Label } from 'semantic-ui-react';
+import { Button, Table, Container } from 'semantic-ui-react';
+import { Sensors } from './Sensors';
 
 export class TargetDetails extends React.Component<any, any> {
 
@@ -9,11 +10,62 @@ export class TargetDetails extends React.Component<any, any> {
     };
   }
 
+  handleBack() {
+  }
+
+  handleRemoveTarget() {
+    alert('remove');
+  }
+
   render() {
     return (
-      <div>
+      <Container>
-        target details
+        <Table celled={true}>
-      </div>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell collapsing>
+                Name
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Type
+            </Table.Cell>
+              <Table.Cell>
+                ????
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Sensor count
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+            <Table.Row>
+              <Table.Cell collapsing>
+                Created at
+            </Table.Cell>
+              <Table.Cell>
+                ???
+            </Table.Cell>
+            </Table.Row>
+
+          </Table.Body>
+        </Table>
+        <Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+
+        <Sensors target={this.props.target} />
+
+      </Container >
     );
   }
 }

src/ts/containers/test/Targets.tsx

@@ -1,7 +1,47 @@
 import * as React from 'react';
-import { Table } from 'semantic-ui-react';
+import { Table, Grid, Segment, Button, 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 = {
+    };
+  }
+
+  componentWillMount() {
+
+  }
+
+  handleAddTarget() {
+    alert('Add a Target');
+  }
+
+  render() {
+
+    return (
+      <Container>
+        <Grid columns={2}>
+          <Grid.Row>
+            <Grid.Column width='4'>
+              <Segment>SEARCH AREA</Segment>
+            </Grid.Column>
+            <Grid.Column>
+              <TargetTable />
+              <Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)}/>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+          
+        <TargetDetails target={this.state.selected}/>
+      </Container>
+    );
+  }
+}
+
+
+export class TargetTable extends React.Component<any, any> {
   private data: any;
 
   constructor(props: any, context: any) {
@@ -56,7 +96,7 @@ export class Targets extends React.Component<any, any> {
   }
 
   render() {
-
+    console.log(this.props.probe);
     return (
       <Table celled selectable striped>
         <Table.Header>

src/ts/index.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
+
+
 import { App } from './App';
 
 injectTapEventPlugin();