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-13 15:36:59 +09:00
commit be2850b640
7 changed files with 270 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ 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';
@ -20,8 +21,9 @@ export class Components extends React.Component<any, any> {
const items = [
{ name: 'Probes', child: <Probes /> },
{ name: 'NoauthProbes', child: <NoauthProbes /> },
{ name: 'SensorConfiguration', child: <SensorConfiguration /> },
{ name: 'Targets', child: <Targets /> },
{ name: 'SensorConfiguration', child: <SensorConfiguration /> },
{ name: 'Sensors', child: <Sensors /> },
];
return (

55
src/ts/containers/test/SensorConfiguration.tsx
View File

@ -1,6 +1,6 @@
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 } 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> {
@ -132,6 +132,7 @@ export class CrawlerSelector extends React.Component<any, any> {
super(props, context);
this.state = {
selected: null,
isInstalling: false,
};
}
@ -178,8 +179,20 @@ export class CrawlerSelector extends React.Component<any, any> {
this.setState({
selected: data.value,
});
this.checkInstall();
}
checkInstall() {
this.setState({
isInstalling: true,
});
let that = this;
setInterval(() => {
this.setState({
isInstalling: false,
});
}, 1500);
}
render() {
@ -188,12 +201,14 @@ export class CrawlerSelector extends React.Component<any, any> {
<Grid columns={1}>
<Grid.Column>
<Segment raised>
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
<Label color='red' ribbon>INFO</Label>
<span>Choose a Crawler type.</span>
<br />
<br />
<Dropdown openOnFocus
placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
<br />
<br />
<CrawlerAuthInputs crawler={this.state.selected} />
@ -255,24 +270,23 @@ export class CrawlerAuthInputs extends React.Component<any, any> {
renderRow(item: any, index: number) {
let elem = new Array();
let key = index;
if (item.metaInputType.name === 'Text') {
elem.push(<Input placeholder={item.defaultValue} key={key} />);
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={key}
key={idx++}
label={itemValue}
name='radioGroup'
value={itemValue}
/>);
key++;
}
}
return <Table.Row>
return <Table.Row key={index}>
<Table.Cell collapsing>{item.keyName}</Table.Cell>
<Table.Cell >{elem}</Table.Cell>
</Table.Row >;
@ -323,35 +337,14 @@ export class SensorItemSelector extends React.Component<any, any> {
render() {
return (
// <List>
// <List.Item >
// <Checkbox label='CPU' />
// <List.List>
// <List.Item>
// <Checkbox label='cpu.usage' />
// </List.Item>
// <List.Item><Checkbox label='cpu.free' /></List.Item>
// </List.List>
// </List.Item>
// <List.Item >
// <Checkbox label='MEM' />
// <List.List>
// <List.Item><Checkbox label='mem.usage' /></List.Item>
// <List.Item><Checkbox label='mem.free' /></List.Item>
// </List.List>
// </List.Item>
// </List>
<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/>
<Checkbox label='cpu.free' /><br />
<Checkbox label='cpu.free' /><br />
</Accordion.Content>
<Accordion.Title>
@ -359,8 +352,8 @@ export class SensorItemSelector extends React.Component<any, any> {
<Checkbox label='MEM' />
</Accordion.Title>
<Accordion.Content>
<Checkbox label='cpu.free' /><br/>
<Checkbox label='cpu.free' /><br/>
<Checkbox label='cpu.free' /><br />
<Checkbox label='cpu.free' /><br />
</Accordion.Content>
</Accordion>

118
src/ts/containers/test/SensorDetails.tsx Normal file
View File

@ -0,0 +1,118 @@
import * as React from 'react';
import { Button, Table, Label, Segment, Header } 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 (
<Segment.Group>
<Segment inverted color='grey'>
<h4>Probe Details</h4>
</Segment>
<Segment>
<Table celled={false} basic='very'>
<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.Row>
<Table.Cell colSpan='4'>
<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()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
</Segment.Group>
);
}
}

26
src/ts/containers/test/SensorItems.tsx Normal file
View File

@ -0,0 +1,26 @@
import * as React from 'react';
import { Table, Button } 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 (
<div>
Sensor Item List
</div>
);
}
}

19
src/ts/containers/test/Sensors.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { Table, Button } from 'semantic-ui-react';
import { SensorDetails } from './SensorDetails';
export class Sensors extends React.Component<any, any> {
@ -10,6 +10,7 @@ export class Sensors extends React.Component<any, any> {
super(props, context);
this.state = {
selected: null,
isDetail: false, //temp
};
}
@ -63,9 +64,10 @@ export class Sensors extends React.Component<any, any> {
];
}
handleSelect(selectedProbe: object) {
handleSelect(selectedSensor: object) {
this.setState({
selected: selectedProbe,
selected: selectedSensor,
isDetail: true,
});
}
@ -87,9 +89,14 @@ export class Sensors extends React.Component<any, any> {
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 (
<div>
<Table celled selectable striped>
@ -100,7 +107,6 @@ export class Sensors extends React.Component<any, any> {
<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>
@ -112,11 +118,12 @@ export class Sensors extends React.Component<any, any> {
<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.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)} />
</div>
);
}

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

@ -1,6 +1,8 @@
import * as React from 'react';
import { Button, Table, Container } from 'semantic-ui-react';
import { Button, Table } from 'semantic-ui-react';
import { Sensors } from './Sensors';
import { DetailContainer } from './commons/DetailContainer';
export class TargetDetails extends React.Component<any, any> {
@ -18,8 +20,35 @@ export class TargetDetails extends React.Component<any, any> {
}
render() {
const items = [
{ name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
{ name: 'Sensors', child: <Sensors probe={this.props.probe}/> },
];
return (
<Container>
<DetailContainer panes={items}/>
);
}
}
export class TargetBasicInfo extends React.Component<any, any> {
constructor(props: any, context: any) {
super(props, context);
this.state = {
};
}
handleRemoveTarget() {
alert('remove');
}
render() {
return (
<div>
<Table celled={true}>
<Table.Body>
<Table.Row>
@ -60,16 +89,9 @@ export class TargetDetails extends React.Component<any, any> {
</Table.Body>
</Table>
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Add Sensor</Button>
<Sensors target={this.props.target} />
</Container >
</div>
);
}
}
}

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

@ -1,5 +1,5 @@
import * as React from 'react';
import { Table, Grid, Segment, Button, Container, Modal } from 'semantic-ui-react';
import { Table, Grid, Segment, Button, Container, Modal, Input } from 'semantic-ui-react';
import { TargetDetails } from './TargetDetails';
export class Targets extends React.Component<any, any> {
@ -22,23 +22,19 @@ export class Targets extends React.Component<any, any> {
}
render() {
const options = [
{ key: 'm', text: 'Male', value: 'male' },
{ key: 'f', text: 'Female', value: 'female' },
];
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>
{/*search bar */}
<TargetTable />
<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}
>
@ -49,7 +45,7 @@ export class Targets extends React.Component<any, any> {
<p>contents</p>
</Modal.Content>
<Modal.Actions>
<Button negative onClick={ ()=> this.setState({openAddTarget:false}) }>Cancel</Button>
<Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
<Button positive labelPosition='right' icon='checkmark' content='Done' />
</Modal.Actions>
</Modal>
@ -66,6 +62,7 @@ export class TargetTable extends React.Component<any, any> {
super(props, context);
this.state = {
selected: null,
list: [],
};
}
handleSelect(selectedTarget: object) {
@ -74,6 +71,20 @@ export class TargetTable extends React.Component<any, any> {
});
}
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 = [
{
@ -103,7 +114,7 @@ export class TargetTable extends React.Component<any, any> {
"id": "1",
"metaInfraType": {
"id": "1",
"name": "OS",
"name": "Host",
"createDate": "424252"
},
"childId": "1",
@ -111,32 +122,37 @@ export class TargetTable extends React.Component<any, any> {
},
},
];
this.setState({
list: this.data,
});
}
render() {
console.log(this.props.probe);
return (
<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'}>Created At</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.data.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>{target.childId}</Table.Cell>
<Table.Cell>{target.createDate}</Table.Cell>
<div>
<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.Body>
</Table>
</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>
</div>
);
}
}