add test

src/ts/Routes.tsx

@@ -20,46 +20,36 @@ import { TargetList } from './containers/target/TargetList';
 import { TargetDetail } from './containers/target/TargetDetail';
 import { DiscoveryResult } from './containers/discovery/DiscoveryResult';
 
+import { NewRes } from './containers/NewRes';
+
+import {DropDownTest} from './containers/test/Sementic001';
+import {Page8} from './containers/test/Page8';
+import {SignIn} from './containers/test/Page9';
+import {PWChange} from './containers/test/Page11';
+import {ProbeDown} from './containers/test/Page17';
+
 export class Routes extends React.Component<any, any> {
   render() {
     return (
       <div>
         <h1>React Redux sample</h1>
         <li><Link to='/' >Home</Link></li>
-        <li><Link to='/member/regist' >Member Regist</Link></li>
+        <li><Link to='/test' >Test</Link></li>
-        <li><Link to='/member/login' >Member Login</Link></li>
+        <li><Link to='/test2' >Test2</Link></li>
-
+        <li><Link to='/test3' >SignIn</Link></li>
-        <li><Link to='/member/result' >MemberRegistResult</Link></li>
+        <li><Link to='/test4' >PWChange</Link></li>
-        <li><Link to='/member/emailconfirm' >MemberEmailConfirm</Link></li>
+        <li><Link to='/test5' >ProbeDown</Link></li>
-        <li><Link to='/agent/waitauth' >WaitForAuth</Link></li>
+       
-        <li><Link to='/agent/waitauthDetail' >WaitForAuthDetail</Link></li>
-
-        <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>
-        <li><Link to='/target/targetList' >TargetList</Link></li>
-        <li><Link to='/target/targetDetail' >TargetDetail</Link></li>
-        <li><Link to='/discovery/DiscoveryResult' >DiscoveryResult</Link></li>
 
 
         <Switch>
           <Route exact path='/' component={Main} />
-          <Route exact path='/member/regist' component={MemberRegist} />
+          <Route exact path='/test' component={DropDownTest} />
-          <Route exact path='/member/login' component={MemberLogin} />
+          <Route exact path='/test2' component={Page8} />
-          <Route exact path='/member/result' component={MemberRegistResult} />
+          <Route exact path='/test3' component={SignIn} />
-          <Route exact path='/member/emailconfirm' component={MemberEmailConfirm} />
+          <Route exact path='/test4' component={PWChange} />
-
+          <Route exact path='/test5' component={ProbeDown} />
-          <Route exact path='/agent/waitauth' component={WaitForAuth} />
+          
-          <Route exact path='/agent/waitauthDetail' component={WaitForAuthDetail} />
-          <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 exact path='/target/targetList' component={TargetList} />
-          <Route exact path='/target/targetDetail' component={TargetDetail} />
-          <Route exact path='/discovery/DiscoveryResult' component={DiscoveryResult} />
 
           <Route component={NotFound} />
         </Switch>

src/ts/containers/Main.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import RaisedButton from 'material-ui/RaisedButton';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-
+// import {client} from 'websocket'
 
 const styles = {
   container: {
@@ -15,6 +15,45 @@ interface MainState {
   open: boolean;
 }
 
+interface Person {
+  name: string;
+  age: number;
+}
+
+let es = new WebSocket("ws://192.168.1.209:8000/echo");
+
+es.onopen = function (event: any) {
+  console.log("open websocket")
+  let dat: any;
+  dat = {
+    "test": "fffff",
+    "echo": "ehochoc",
+  };
+
+  let mm :any;
+
+  mm = {
+    "message" : dat
+  };
+
+  es.send(JSON.stringify(mm));
+};
+
+es.onmessage = function (event:any) {
+  console.log(event.data);
+}
+
+var hello = (person: Person) => {
+  console.log(`안녕하세요! ${person.name} 입니다.`);
+
+
+
+
+}
+
+
+
+
 export class Main extends React.Component<any, any> {
   constructor(props: any, context: any) {
     super(props, context);
@@ -22,6 +61,13 @@ export class Main extends React.Component<any, any> {
     this.handleRequestClose = this.handleRequestClose.bind(this);
     this.handleTouchTap = this.handleTouchTap.bind(this);
 
+    const p: Person = {
+      name: 'Mark',
+      age: 35
+    };
+
+    hello(p); // 안녕하세요! Mark 입니다.
+
     this.state = {
       open: false,
     } as MainState;
@@ -49,23 +95,13 @@ export class Main extends React.Component<any, any> {
     ) as any;
 
     return (
-      <div style={styles.container}>
+      <div></div>
-        <Dialog
-          open={this.state.open}
-          title="Super Secret Password"
-          actions={standardActions}
-          onRequestClose={this.handleRequestClose}
-        >
-          1-2-3-4-5
-                    </Dialog>
-        <h1>Material-UI</h1>
-        <h2>example project</h2>
-        <RaisedButton
-          label="Super Secret Password"
-          secondary={true}
-          onTouchTap={this.handleTouchTap}
-        />
-      </div>
     );
   }
+
+
+
 }
+
+
+

src/ts/containers/NewRes.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
+import Menu from 'material-ui/Menu';
+import MenuItem from 'material-ui/MenuItem';
+
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
+
+import Badge from 'material-ui/Badge';
+import IconButton from 'material-ui/IconButton';
+import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
+import PersonIcon from 'material-ui/svg-icons/social/person';
+import SettingsIcon from 'material-ui/svg-icons/action/settings';
+
+
+
+import FontIcon from 'material-ui/FontIcon';
+import ActionHome from 'material-ui/svg-icons/action/home';
+
+
+export class NewRes extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+
+
+    this.state = {
+      open_monitor: false,
+      open_infra: false,
+    };
+  }
+
+  handleTouchTap = (event: any, state: any) => {
+    // This prevents ghost click.
+    event.preventDefault();
+    // console.log(event.target.outerText)
+    state.anchorEl = event.currentTarget;
+    this.setState(state);
+  };
+
+  handleRequestClose = () => {
+    this.setState({
+      open: false,
+    });
+  };
+
+
+  render() {
+
+
+    return (
+      <div>
+
+        <RaisedButton
+          label="Home"
+        />
+
+        <RaisedButton
+
+          onMouseEnter={(event: any) => {
+            this.handleTouchTap(event, { 
+              open_infra: false,
+              open_monitor: true,
+               })
+          }}
+
+          label="Monitoring"
+        />
+
+        <RaisedButton
+          onMouseEnter={(event: any) => {
+            this.handleTouchTap(event, { 
+              open_infra: true,
+              open_monitor: false,
+             })
+          }}
+          label="Infrastructure"
+        />
+        
+        <RaisedButton
+          label="Dashboard"
+        />
+
+        <RaisedButton
+          label="Metric"
+        />
+
+        <RaisedButton
+          label="Alert"
+        />
+
+        <RaisedButton
+          label="History"
+        />
+
+        <Popover
+          open={this.state.open_monitor}
+          anchorEl={this.state.anchorEl}
+          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+          onRequestClose={(event: any) => {
+            this.setState({ 
+              open_monitor: false,
+             });
+          }}
+          animation={PopoverAnimationVertical}
+        >
+          <Menu>
+            <MenuItem primaryText="Probe" />
+            <MenuItem primaryText="Sensors" />
+          </Menu>
+        </Popover>
+
+        <Popover
+          open={this.state.open_infra}
+          anchorEl={this.state.anchorEl}
+          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+          onRequestClose={(event: any) => {
+            this.setState({ open_infra: false });
+          }}
+          animation={PopoverAnimationVertical}
+        >
+          <Menu>
+            <MenuItem primaryText="Maps" />
+            <MenuItem primaryText="Targets" />
+          </Menu>
+        </Popover>
+
+        <IconButton tooltip="settings">
+          <SettingsIcon />
+        </IconButton>
+
+
+
+        <Badge
+          badgeContent={4}
+          secondary={true}
+          badgeStyle={{top: 12, right: 12}}
+        >
+          <IconButton tooltip="notification">
+            <NotificationsIcon />
+          </IconButton>
+
+        </Badge>
+
+
+        <IconButton tooltip="avatar">
+          <PersonIcon />
+        </IconButton>
+
+
+      </div>
+    );
+  }
+
+
+
+}
+
+
+

src/ts/containers/test/Page11.tsx

@@ -0,0 +1,48 @@
+import *as React from 'react'
+import {
+  Icon, Label, Input,
+  Select, Button
+} 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);
+
+
+  }
+
+
+  render() {
+
+
+    return (
+      <div>
+
+        <Label>  Password  </Label>
+        <Input placeholder='Password' type='password' />
+        <br />
+        <Label>  Password Confirm  </Label>
+        <Input placeholder='Password Confirm' type='password' />
+        <br />
+
+
+        <Button>    Submit  </Button>
+        <Button>    Cancel  </Button>
+      </div>
+    );
+  }
+
+
+
+}
+

src/ts/containers/test/Page17.tsx

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

src/ts/containers/test/Page8.tsx

@@ -0,0 +1,64 @@
+import *as React from 'react'
+import {
+  Icon, Label, Input,
+  Select, Button
+} 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 Page8 extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+
+  }
+
+
+  render() {
+
+
+    return (
+      <div>
+        <Label>  Email  </Label>
+        <Input placeholder='Email' />
+        <br/>
+        <Label>  User Name  </Label>
+        <Input placeholder='Name' />
+        <br/>
+        <Label>  Password  </Label>
+        <Input placeholder='Password' type='password' />
+        <br/>
+        <Label>  Password Confirm  </Label>
+        <Input placeholder='Password Confirm' type='password' />
+        <br/>
+        <Label>  Company Name  </Label>
+        <Input placeholder='Company' />
+        <br/>
+        <Label>  Phone  </Label>
+        <Select placeholder='Select your country' options={options} />
+        <Input placeholder='Phone' />
+        <br/>
+        <Button>
+    Sign Up
+  </Button>
+  <Button>
+    Cancel
+  </Button>
+      </div>
+    );
+  }
+
+
+
+}
+

src/ts/containers/test/Page9.tsx

@@ -0,0 +1,64 @@
+import *as React from 'react'
+import {
+  Icon, Label, Input,
+  Select, Button, Header, Modal
+} from 'semantic-ui-react'
+
+
+
+
+const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' },
+{ key: 'unitedstates', value: '1', text: 'United States(1)' }]
+
+
+export class SignIn extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      forgotPopup: false,
+    };
+
+
+  }
+
+
+  render() {
+
+
+    return (
+      <div>
+        <Label>  Email  </Label>
+        <Input placeholder='Email' />
+        <br />
+
+        <Label>  Password  </Label>
+        <Input placeholder='Password' type='password' />
+        <br />
+        <Modal trigger={<Button>Forgot Password</Button>}>
+          <Modal.Header>Change your password Enter email address.</Modal.Header>
+          <Modal.Content >
+            <Label>  Email  </Label>
+            <Input placeholder='Email' />
+
+          </Modal.Content>
+          <Modal.Actions>
+            <Button basic color='blue' >              Submit      </Button>
+            <Button >              Cancel      </Button>
+          </Modal.Actions>
+        </Modal>
+        <br />
+
+        <Button>    Sign In  </Button>
+        <Button>    Sign Up  </Button>
+
+
+
+      </div>
+    );
+  }
+
+
+
+}
+

src/ts/containers/test/Sementic001.tsx

@@ -0,0 +1,145 @@
+import *as React from 'react'
+import {
+  Dropdown, Icon, Menu, Label,
+
+  Sidebar, Segment, Button, Image, Header,
+} from 'semantic-ui-react'
+
+
+
+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 DropDownTest extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+
+    this.state = {
+      notification_visible: false,
+    };
+
+  }
+
+
+  render() {
+
+
+    return (
+      <div>
+        <Menu>
+          <Menu.Item>           Home    </Menu.Item>
+          <Dropdown text='Monitoring' pointing className='link item'>
+            <Dropdown.Menu>
+              <Dropdown.Header>Monitoring</Dropdown.Header>
+              <Dropdown.Item>
+                <Icon name='dropdown' />
+                <span className='text'>Probe</span>
+                <Dropdown.Menu>
+                  <Dropdown.Header>Mens</Dropdown.Header>
+                  <Dropdown.Item>Shirts</Dropdown.Item>
+                  <Dropdown.Item>Pants</Dropdown.Item>
+                  <Dropdown.Item>Jeans</Dropdown.Item>
+                  <Dropdown.Item>Shoes</Dropdown.Item>
+                  <Dropdown.Divider />
+                  <Dropdown.Header>Womens</Dropdown.Header>
+                  <Dropdown.Item>Dresses</Dropdown.Item>
+                  <Dropdown.Item>Shoes</Dropdown.Item>
+                  <Dropdown.Item>Bags</Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown.Item>
+              <Dropdown.Item>Sensors</Dropdown.Item>
+
+            </Dropdown.Menu>
+          </Dropdown>
+          <Menu.Item>            Infrastructure    </Menu.Item>
+          <Menu.Item>            Dashboard    </Menu.Item>
+          <Menu.Item>            Metrics    </Menu.Item>
+          <Menu.Item>            Alert    </Menu.Item>
+          <Menu.Item>            History    </Menu.Item>
+
+          <Menu.Item position='right'>
+            <Icon name='setting' />
+          </Menu.Item>
+          <Menu.Item onClick={() => {
+            this.setState({ notification_visible: !this.state.notification_visible })
+          }}>
+            <Icon name='alarm' />
+            <Label color='red' floating>22</Label>
+          </Menu.Item>
+          <Menu.Item>
+            <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>
+    );
+  }
+
+
+
+}
+