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