overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
geek 2017-07-11 14:37:20 +09:00
commit b0f933bb4e
7 changed files with 255 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ts/containers/test/ProbeDetails.tsx
View File

@ -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 (

16
src/ts/containers/test/ProbeDown.tsx
View File

@ -11,13 +11,13 @@ export interface Props {
}
const osNames = ["Windows","Debian","Ubuntu","Fedora"];
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: 'Windows' }
this.state = { activeItem: osNames[0] }
}
@ -35,10 +35,14 @@ const { activeItem } = this.state
<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} />
{osNames.map((os: string) => {
return (
<Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
)
})}
</Menu>
</Grid.Column>

126
src/ts/containers/test/Sensors.tsx Normal file
View File

@ -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>
);
}
}

13
src/ts/containers/test/SignIn.tsx
View File

@ -15,12 +15,16 @@ export class SignIn extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
forgotPopup: false,
};
}
forgotPopupOpen = () => this.setState({ forgotPopup: true });
forgotPopupClose = () => this.setState({ forgotPopup: false });
render() {
@ -35,7 +39,8 @@ export class SignIn extends React.Component<any, any> {
<Label> Password </Label>
<Input placeholder='Password' type='password' />
<br />
<Modal trigger={<Button>Forgot Password</Button>}>
<Button onClick={this.forgotPopupOpen}>Forgot Password</Button>
<Modal size='small' open={this.state.forgotPopup} onClose={this.forgotPopupClose}>
<Modal.Header>Change your password Enter email address.</Modal.Header>
<Modal.Content >
<Label> Email </Label>
@ -43,14 +48,14 @@ export class SignIn extends React.Component<any, any> {
</Modal.Content>
<Modal.Actions>
<Button basic color='blue' > Submit </Button>
<Button > Cancel </Button>
<Button basic color='blue' > Submit </Button>
<Button onClick={this.forgotPopupClose}> Cancel </Button>
</Modal.Actions>
</Modal>
<br />
<Button> Sign In </Button>
<Button> Sign Up </Button>
<Button href='/#/test2'> Sign Up </Button>

60
src/ts/containers/test/TargetDetails.tsx
View File

@ -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>
target details
</div>
<Container>
<Table celled={true}>
<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 >
);
}
}

44
src/ts/containers/test/Targets.tsx
View File

@ -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>

31
src/ts/containers/test/TopBar.tsx
View File

@ -46,31 +46,20 @@ export class TopBar extends React.Component<any, any> {
return (
<div>
<Menu>
<Menu.Item> Home </Menu.Item>
<Menu.Item href='//google.com' target='_blank'> 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> Probe </Dropdown.Item>
<Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Menu.Item> Infrastructure </Menu.Item>
<Dropdown text='Infrastructure' pointing className='link item'>
<Dropdown.Menu>
<Dropdown.Item> Maps </Dropdown.Item>
<Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Menu.Item> Dashboard </Menu.Item>
<Menu.Item> Metrics </Menu.Item>
<Menu.Item> Alert </Menu.Item>
@ -114,7 +103,7 @@ export class TopBar extends React.Component<any, any> {
icon='labeled'
vertical
inverted
>
<Menu.Item name='home'>
<Icon name='home' />