added sensor detail

This commit is contained in:
snoop 2017-07-24 20:10:38 +09:00
parent 61627664a4
commit 56bd548950
2 changed files with 103 additions and 17 deletions

View File

@ -36,7 +36,7 @@ export class SensorDetail extends React.Component<SensorDetailProps, SensorDetai
public render(): JSX.Element {
const items = [
{ name: 'Info', child: <Button sensor={this.props.sensor} /> },
{ name: 'Info', child: <SensorBasicInfo sensor={this.props.sensor} /> },
{ name: 'Sensor Items', child: <SensorItems sensor={this.props.sensor} /> },
];
const data = { 'probe': this.props.probe };
@ -46,6 +46,7 @@ export class SensorDetail extends React.Component<SensorDetailProps, SensorDetai
}
}
export interface SensorBasicInfoProps {
sensor?: Sensor;
probe?: Probe;
@ -53,7 +54,7 @@ export interface SensorBasicInfoProps {
}
export interface SensorBasicInfoState {
sensor: Sensor;
}
export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, SensorBasicInfoState> {
@ -61,6 +62,7 @@ export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, Senso
constructor(props: SensorBasicInfoProps, context: SensorBasicInfoState) {
super(props, context);
this.state = {
sensor: SensorDetailJson,
};
}
@ -75,9 +77,13 @@ export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, Senso
this.props.onBack();
}
public componentWillMount(): void {
console.log('');
}
public showStartStopBtn(): JSX.Element {
if (this.props.probe.status.name === 'STARTED') {
if (this.state.sensor.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} />;
@ -88,52 +94,103 @@ export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, Senso
return (
<Container fluid>
<Header as='h3' dividing>Sensor Details</Header>
<Table celled={false}>
<Table celled>
<Table.Body>
<Table.Row>
<Table.Cell>
<Header size='small'>Domain</Header>
<Header size='small'>Name</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
<Table.Cell>{this.state.sensor.target.infra.type.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Status</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.status.name}</Table.Cell>
<Table.Cell>{this.state.sensor.status.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host IP</Header>
<Header size='small'>Crawler</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
<Table.Cell>{this.state.sensor.crawler.name}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Host Name</Header>
<Header size='small'>Item Count</Header>
</Table.Cell>
<Table.Cell>????</Table.Cell>
<Table.Cell>{44}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Authorized at</Header>
<Header size='small'>Created at</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
<Table.Cell>{this.state.sensor.createDate}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
<Header size='small'>Description</Header>
<Header size='small'>Created by</Header>
</Table.Cell>
<Table.Cell>{this.props.probe.description}</Table.Cell>
<Table.Cell>test Snoop</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
<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()}
{/*{this.showStartStopBtn()}*/}
</Container>
);
}
}
const SensorDetailJson: any = {
'id': 1,
'createDate': 1498475947009,
'description': 'My sensor',
'status': {
'id': 1,
'name': 'RUNNING',
},
'target': {
'id': 1,
'createDate': 1498448242854,
'probe': {
'id': 1,
'status': {
'id': 1,
'name': 'INITIAL',
},
'description': 'snoop probe',
'createDate': 1498448699813,
'lastPollingDate': null,
'nextPollingDate': null,
'domain': {
'id': 1,
'name': 'overFlow\'s domain',
'createDate': 1498443944866,
},
'probeKey': 'a1e1710557de11e78799080027658d13',
'encryptionKey': '9c8d41ab57de11e7a2c9080027658d13',
},
'infra': {
'id': 1,
'type': {
'id': 1,
'name': 'MACHINE',
'createDate': 1498379502770,
},
'childId': 0,
'createDate': 1498446731809,
},
},
'crawler': {
'id': 1,
'createDate': 1498794968791,
'name': 'ACTIVEDIRECTORY_CRAWLER',
'description': 'ACTIVEDIRECTORY',
},
'crawlerInputItems': null,
};

View File

@ -28,7 +28,36 @@ export class SensorItems extends React.Component<Props, State> {
return (
<Container fluid>
<Header as='h3' dividing>Sensor Item</Header>
Sensor Item List
<Table celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Header</Table.HeaderCell>
<Table.HeaderCell>Header</Table.HeaderCell>
<Table.HeaderCell>Header</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
First
</Table.Cell>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Container>
);
}