test
This commit is contained in:
insanity
parent
f6c7c04db1
commit
e95ceedb77
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
|
||||
import { TargetTable } from './Targets';
|
||||
import { DetailContainer } from './commons/DetailContainer';
|
||||
|
||||
export class ProbeDetails extends React.Component<any, any> {
|
||||
|
||||
@ -14,6 +15,25 @@ export class ProbeDetails extends React.Component<any, any> {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const items = [
|
||||
{ name: 'Info', child: <ProbeBasicInfo probe={this.props.probe}/> },
|
||||
{ name: 'Targets', child: <TargetTable /> },
|
||||
];
|
||||
return (
|
||||
<DetailContainer panes={items}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ProbeBasicInfo extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleStartStop(event: any, data: any) {
|
||||
console.log(event);
|
||||
}
|
||||
@ -22,7 +42,7 @@ export class ProbeDetails extends React.Component<any, any> {
|
||||
}
|
||||
|
||||
handleBack(event: any, data: any) {
|
||||
console.log(data);
|
||||
this.props.onBack();
|
||||
}
|
||||
|
||||
|
||||
@ -35,82 +55,63 @@ export class ProbeDetails extends React.Component<any, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
let elem: any;
|
||||
if (this.props.probe === null) {
|
||||
elem = <div></div>;
|
||||
} else {
|
||||
elem =
|
||||
<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} />
|
||||
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
|
||||
{this.showStartStopBtn()}
|
||||
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Segment>
|
||||
|
||||
<Segment inverted color='grey'>
|
||||
<h4>Probe's Targets</h4>
|
||||
</Segment>
|
||||
<Segment>
|
||||
<TargetTable probe={this.props.probe}/>
|
||||
</Segment>
|
||||
</Segment.Group>;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{elem}
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -11,6 +11,7 @@ export class Probes extends React.Component<any, any> {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
selected: null,
|
||||
isDetail: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -64,7 +65,7 @@ export class Probes extends React.Component<any, any> {
|
||||
}
|
||||
|
||||
checkCellStatus(status: any): boolean {
|
||||
if(status.name === 'STOPPED') {
|
||||
if (status.name === 'STOPPED') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@ -73,40 +74,39 @@ export class Probes extends React.Component<any, any> {
|
||||
handleSelect(selectedProbe: object) {
|
||||
this.setState({
|
||||
selected: selectedProbe,
|
||||
isDetail: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.isDetail) {
|
||||
return <ProbeDetails probe={this.state.selected} onBack={()=>this.setState({isDetail:false})}/>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table selectable striped>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table selectable striped>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{this.data.map((probe: any, index: number) => (
|
||||
<Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
|
||||
<Table.Cell >todo. {probe.name}</Table.Cell>
|
||||
<Table.Cell>todo. {probe.cidr}</Table.Cell>
|
||||
<Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<div>
|
||||
<ProbeDetails probe={this.state.selected} />
|
||||
</div>
|
||||
</div>
|
||||
<Table.Body>
|
||||
{this.data.map((probe: any, index: number) => (
|
||||
<Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
|
||||
<Table.Cell >todo. {probe.name}</Table.Cell>
|
||||
<Table.Cell>todo. {probe.cidr}</Table.Cell>
|
||||
<Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
44
src/ts/containers/test/commons/DetailContainer.tsx
Normal file
44
src/ts/containers/test/commons/DetailContainer.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import * as React from 'react';
|
||||
import { Grid, Menu, Segment } from 'semantic-ui-react';
|
||||
|
||||
export class DetailContainer extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
active: 0,
|
||||
};
|
||||
}
|
||||
|
||||
showContents() {
|
||||
return this.props.panes[this.state.active].child;
|
||||
}
|
||||
|
||||
handleClick(index: number) {
|
||||
this.setState({
|
||||
active: index,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const activeItem = this.state.activeItem;
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Column width={4} >
|
||||
<Menu pointing secondary vertical >
|
||||
{this.props.panes.map((pane: any, index: number) => (
|
||||
<Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
|
||||
))}
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column stretched width={12} >
|
||||
<Segment basic>
|
||||
{this.showContents()}
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user