vvf
This commit is contained in:
snoop
commit
85da59d00b
67
src/ts/containers/test/Components.tsx
Normal file
67
src/ts/containers/test/Components.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Button } from 'semantic-ui-react';
|
||||||
|
import { Probes } from './Probes';
|
||||||
|
import { NoauthProbes } from './NoauthProbes';
|
||||||
|
import { SensorConfiguration } from './SensorConfiguration';
|
||||||
|
import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
|
||||||
|
|
||||||
|
const panes = [
|
||||||
|
{ menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
|
||||||
|
{ menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
|
||||||
|
{ menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export class Components extends React.Component<any, any> {
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
no: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleButton(n: number): void {
|
||||||
|
this.setState({
|
||||||
|
no: n,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showContent() {
|
||||||
|
switch(this.state.no) {
|
||||||
|
case 0: {
|
||||||
|
return <Probes/>;
|
||||||
|
}
|
||||||
|
case 1: {
|
||||||
|
return <NoauthProbes/>;
|
||||||
|
}
|
||||||
|
case 2: {
|
||||||
|
return <SensorConfiguration/>;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{margin:'20px'}}>
|
||||||
|
{/*<Tab panes={panes} />*/}
|
||||||
|
|
||||||
|
<Button.Group>
|
||||||
|
<Button onClick={this.handleButton.bind(this, 0)}>Probe list</Button>
|
||||||
|
<Button onClick={this.handleButton.bind(this, 1)}>Noauth Probe list</Button>
|
||||||
|
<Button onClick={this.handleButton.bind(this, 2)}>Sensor Configuration</Button>
|
||||||
|
</Button.Group>
|
||||||
|
<div style={{margin:'20px'}}>
|
||||||
|
{this.showContent()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
141
src/ts/containers/test/NoauthProbes.tsx
Normal file
141
src/ts/containers/test/NoauthProbes.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Table, Checkbox, Button } from 'semantic-ui-react';
|
||||||
|
|
||||||
|
|
||||||
|
export class NoauthProbes extends React.Component<any, any> {
|
||||||
|
|
||||||
|
private data: any;
|
||||||
|
private selectedIds: Array<string>;
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
selected: [],
|
||||||
|
};
|
||||||
|
this.selectedIds = new Array();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.data = [
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"MetaNoAuthProbeStatus": {
|
||||||
|
"name": "NORMAL"
|
||||||
|
},
|
||||||
|
"hostName": "insanity's windows",
|
||||||
|
"macAddress": "14:fe:b5:9d:54:7e",
|
||||||
|
"ipAddress": "192.168.1.105",
|
||||||
|
"tempProbeKey": "45374d4egsdfw332",
|
||||||
|
"apiKey": "45374d4egsdfw332",
|
||||||
|
"domain": {
|
||||||
|
|
||||||
|
},
|
||||||
|
"probe": {
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "22",
|
||||||
|
"MetaNoAuthProbeStatus": {
|
||||||
|
"name": "NORMAL"
|
||||||
|
},
|
||||||
|
"hostName": "insanity's ubuntu",
|
||||||
|
"macAddress": "14:fe:b5:9d:54:7e",
|
||||||
|
"ipAddress": "192.168.1.105",
|
||||||
|
"tempProbeKey": "45374d4egsdfw332",
|
||||||
|
"apiKey": "45374d4egsdfw332",
|
||||||
|
"domain": {
|
||||||
|
|
||||||
|
},
|
||||||
|
"probe": {
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSelect(id: string) {
|
||||||
|
let idx = this.selectedIds.indexOf(id);
|
||||||
|
if (idx === -1) {
|
||||||
|
this.selectedIds.push(id);
|
||||||
|
} else {
|
||||||
|
this.selectedIds.splice(idx, 1);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
selected: this.selectedIds,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
checkExist(id: string): boolean {
|
||||||
|
if (this.state.selected.indexOf(id) === -1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleAccept() {
|
||||||
|
alert(this.state.selected);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleDeny() {
|
||||||
|
alert(this.state.selected);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleRowActive(id: string):boolean {
|
||||||
|
if (this.state.selected.indexOf(id) === -1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Table celled selectable striped>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.HeaderCell />
|
||||||
|
<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>API Key</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.id)} active={this.handleRowActive(probe.id)}>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Checkbox checked={this.checkExist(probe.id)} />
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
|
||||||
|
<Table.Cell>{probe.hostName}</Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}></Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
))}
|
||||||
|
</Table.Body>
|
||||||
|
|
||||||
|
<Table.Footer fullWidth>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.HeaderCell />
|
||||||
|
<Table.HeaderCell colSpan='6'>
|
||||||
|
<Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
|
||||||
|
<Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
|
||||||
|
</Table.HeaderCell>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Footer>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
100
src/ts/containers/test/ProbeDetails.tsx
Normal file
100
src/ts/containers/test/ProbeDetails.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Button, Table, Label } from 'semantic-ui-react';
|
||||||
|
import { Targets } from './Targets';
|
||||||
|
|
||||||
|
export class ProbeDetails extends React.Component<any, any> {
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
handleStartStop(event: any, data: any) {
|
||||||
|
console.log(event);
|
||||||
|
}
|
||||||
|
handleDiscovery(event: any, data: any) {
|
||||||
|
alert('Discovery');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleBack(event: any, data: any) {
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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() {
|
||||||
|
let elem: any;
|
||||||
|
if (this.props.probe === null) {
|
||||||
|
elem = <div></div>;
|
||||||
|
} else {
|
||||||
|
elem =
|
||||||
|
<div>Probe Details...
|
||||||
|
<Table celled={false}>
|
||||||
|
<Table.Body>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon>Domain</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon>Status</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon >Host IP</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>????</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon >Host Name</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>????</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon>Authorized at</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.Cell collapsing>
|
||||||
|
<Label ribbon>Description</Label>
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell>{this.props.probe.description}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
<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()}
|
||||||
|
|
||||||
|
<Targets/>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{elem}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
113
src/ts/containers/test/Probes.tsx
Normal file
113
src/ts/containers/test/Probes.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Table } from 'semantic-ui-react';
|
||||||
|
import { ProbeDetails } from './ProbeDetails';
|
||||||
|
|
||||||
|
|
||||||
|
export class Probes extends React.Component<any, any> {
|
||||||
|
|
||||||
|
private data: any;
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
selected: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.data = [
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"metaProbeStatus": {
|
||||||
|
"name": "STARTED"
|
||||||
|
},
|
||||||
|
"domain": {
|
||||||
|
"name": "overFlow's domain111"
|
||||||
|
},
|
||||||
|
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||||
|
"description": "description1111111111",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "22",
|
||||||
|
"metaProbeStatus": {
|
||||||
|
"name": "STOPPED"
|
||||||
|
},
|
||||||
|
"domain": {
|
||||||
|
"name": "overFlow's domain222"
|
||||||
|
},
|
||||||
|
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||||
|
"description": "description22222222",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "33",
|
||||||
|
"metaProbeStatus": {
|
||||||
|
"name": "STOPPED"
|
||||||
|
},
|
||||||
|
"domain": {
|
||||||
|
"name": "overFlow's domain333"
|
||||||
|
},
|
||||||
|
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||||
|
"description": "description33333",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "44",
|
||||||
|
"metaProbeStatus": {
|
||||||
|
"name": "STARTED"
|
||||||
|
},
|
||||||
|
"domain": {
|
||||||
|
"name": "overFlow's domain444"
|
||||||
|
},
|
||||||
|
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||||
|
"description": "description4444",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
checkCellStatus(status: any): boolean {
|
||||||
|
if(status.name === 'STOPPED') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSelect(selectedProbe: object) {
|
||||||
|
this.setState({
|
||||||
|
selected: selectedProbe,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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'}>Probe Key</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Description</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 textAlign={'center'}>{index + 1}</Table.Cell>
|
||||||
|
<Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
|
||||||
|
<Table.Cell>{probe.probeKey}</Table.Cell>
|
||||||
|
<Table.Cell>{probe.description}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
))}
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
<div style={{ margin: '20px' }}>
|
||||||
|
<ProbeDetails probe={this.state.selected} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
206
src/ts/containers/test/SensorConfiguration.tsx
Normal file
206
src/ts/containers/test/SensorConfiguration.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Icon, Step, Button } from 'semantic-ui-react';
|
||||||
|
import { Grid, Image, Label, Segment, Dropdown } from 'semantic-ui-react';
|
||||||
|
|
||||||
|
|
||||||
|
export class SensorConfiguration extends React.Component<any, any> {
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let steps = [<CrawlerSelector />, <SensorItemSelector />];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stepper steps={steps} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class Stepper extends React.Component<any, any> {
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
currentStep: 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
handleActive(idx: number): boolean {
|
||||||
|
if (this.state.currentStep === idx) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCompleted(idx: number): boolean {
|
||||||
|
if (this.state.currentStep > idx) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
handlePrev(event: any, data: object) {
|
||||||
|
let step: number = this.state.currentStep;
|
||||||
|
if (step <= 1) {
|
||||||
|
step = 1;
|
||||||
|
} else {
|
||||||
|
step--;
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
currentStep: step,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleNext(event: any, data: object) {
|
||||||
|
let step: number = this.state.currentStep;
|
||||||
|
if (step >= 4) {
|
||||||
|
step = 4;
|
||||||
|
} else {
|
||||||
|
step++;
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
currentStep: step,
|
||||||
|
});
|
||||||
|
console.log(this.state.currentStep);
|
||||||
|
}
|
||||||
|
|
||||||
|
showContent() {
|
||||||
|
return this.props.steps[this.state.currentStep - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Step.Group>
|
||||||
|
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
|
||||||
|
<Icon name='settings' />
|
||||||
|
<Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
|
||||||
|
<Icon name='list ul' />
|
||||||
|
<Step.Content title='Step 2' description='골라골라 아이템도 골라' />
|
||||||
|
</Step>
|
||||||
|
|
||||||
|
<Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
|
||||||
|
<Icon name='options' />
|
||||||
|
<Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
|
||||||
|
</Step>
|
||||||
|
</Step.Group>
|
||||||
|
<br />
|
||||||
|
{this.showContent()}
|
||||||
|
<br />
|
||||||
|
<Button.Group floated={'right'}>
|
||||||
|
<Button onClick={this.handlePrev.bind(this)}>Prev</Button>
|
||||||
|
<Button.Or />
|
||||||
|
<Button positive onClick={this.handleNext.bind(this)} >Next</Button>
|
||||||
|
</Button.Group>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class CrawlerSelector extends React.Component<any, any> {
|
||||||
|
|
||||||
|
private crawlers: object[];
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
selected: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
//todo. getting MetaCrawler list
|
||||||
|
this.crawlers = [
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"name": "WMI",
|
||||||
|
"description": "WMI DESCRIPTION"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"name": "SNMP",
|
||||||
|
"description": "SNMP DESCRIPTION"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3",
|
||||||
|
"name": "JMX",
|
||||||
|
"description": "JMX DESCRIPTION"
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
let crawlerOptions = [];
|
||||||
|
let crawler: any;
|
||||||
|
for (crawler of this.crawlers) {
|
||||||
|
var option = {
|
||||||
|
key: crawler.id,
|
||||||
|
text: crawler.name,
|
||||||
|
value: crawler.name,
|
||||||
|
icon: 'windows',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCrawlerSelection(e: any, data: any) {
|
||||||
|
this.setState({
|
||||||
|
selected: data.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showCrawlerAuthInfo() {
|
||||||
|
if (this.state.selected === null) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return <div>{this.state.selected} auth inputs </div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Grid columns={1}>
|
||||||
|
<Grid.Column>
|
||||||
|
<Segment raised>
|
||||||
|
<Label color='red' ribbon>INFO</Label>
|
||||||
|
<span>Choose a Crawler type.</span>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Dropdown openOnFocus
|
||||||
|
placeholder='Select Crawler' selection options={crawlerOptions} onChange={this.handleCrawlerSelection.bind(this)} />
|
||||||
|
|
||||||
|
{this.showCrawlerAuthInfo()}
|
||||||
|
</Segment>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SensorItemSelector extends React.Component<any, any> {
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>SensorItemSelector</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
87
src/ts/containers/test/Targets.tsx
Normal file
87
src/ts/containers/test/Targets.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Table } from 'semantic-ui-react';
|
||||||
|
|
||||||
|
export class Targets extends React.Component<any, any> {
|
||||||
|
private data: any;
|
||||||
|
|
||||||
|
constructor(props: any, context: any) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
selected: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
handleSelect(selectedTarget: object) {
|
||||||
|
this.setState({
|
||||||
|
selected: selectedTarget,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.data = [
|
||||||
|
{
|
||||||
|
"id": "1",
|
||||||
|
"createDate": "",
|
||||||
|
"probe": {
|
||||||
|
"id": "1",
|
||||||
|
},
|
||||||
|
"infra": {
|
||||||
|
"id": "1",
|
||||||
|
"metaInfraType": {
|
||||||
|
"id": "1",
|
||||||
|
"name": "OS",
|
||||||
|
"createDate": "424252"
|
||||||
|
},
|
||||||
|
"childId": "1",
|
||||||
|
"createDate": "13345235"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2",
|
||||||
|
"createDate": "",
|
||||||
|
"probe": {
|
||||||
|
"id": "1",
|
||||||
|
},
|
||||||
|
"infra": {
|
||||||
|
"id": "1",
|
||||||
|
"metaInfraType": {
|
||||||
|
"id": "1",
|
||||||
|
"name": "OS",
|
||||||
|
"createDate": "424252"
|
||||||
|
},
|
||||||
|
"childId": "1",
|
||||||
|
"createDate": "13345235"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
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>
|
||||||
|
</Table.Row>
|
||||||
|
))}
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user