test
This commit is contained in:
insanity
parent
895b113359
commit
3ddae62a6a
@ -29,6 +29,7 @@
|
||||
"webpack-dev-server": "^2.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"semantic-ui-react": "^0.70.0",
|
||||
"material-ui": "^0.18.1",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "15.5.4",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
@ -19,13 +19,14 @@ import { ProveDownload } from './containers/prove/Download';
|
||||
import { TargetList } from './containers/target/TargetList';
|
||||
import { TargetDetail } from './containers/target/TargetDetail';
|
||||
import { DiscoveryResult } from './containers/discovery/DiscoveryResult';
|
||||
import { Components } from './containers/test/Components';
|
||||
|
||||
export class Routes extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>React Redux sample</h1>
|
||||
<li><Link to='/' >Home</Link></li>
|
||||
{/*<li><Link to='/' >Home</Link></li>
|
||||
<li><Link to='/member/regist' >Member Regist</Link></li>
|
||||
<li><Link to='/member/login' >Member Login</Link></li>
|
||||
|
||||
@ -39,12 +40,13 @@ export class Routes extends React.Component<any, any> {
|
||||
<li><Link to='/agent/agents' >Agents</Link></li>
|
||||
<li><Link to='/agent/agentDetail' >AgentDetail</Link></li>
|
||||
<li><Link to='/target/targetList' >TargetList</Link></li>
|
||||
<li><Link to='/target/targetDetail' >TargetDetail</Link></li>
|
||||
<li><Link to='/target/targetDetail' >TargetDetail</Link></li>*/}
|
||||
<li><Link to='/discovery/DiscoveryResult' >DiscoveryResult</Link></li>
|
||||
<li><Link to='/discovery/Components' >Components</Link></li>
|
||||
|
||||
|
||||
<Switch>
|
||||
<Route exact path='/' component={Main} />
|
||||
{/*<Route exact path='/' component={Main} />
|
||||
<Route exact path='/member/regist' component={MemberRegist} />
|
||||
<Route exact path='/member/login' component={MemberLogin} />
|
||||
<Route exact path='/member/result' component={MemberRegistResult} />
|
||||
@ -58,8 +60,9 @@ export class Routes extends React.Component<any, any> {
|
||||
<Route exact path='/agent/agentDetail' component={AgentDetail} />
|
||||
|
||||
<Route exact path='/target/targetList' component={TargetList} />
|
||||
<Route exact path='/target/targetDetail' component={TargetDetail} />
|
||||
<Route exact path='/target/targetDetail' component={TargetDetail} />*/}
|
||||
<Route exact path='/discovery/DiscoveryResult' component={DiscoveryResult} />
|
||||
<Route exact path='/discovery/Components' component={Components} />
|
||||
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
|
||||
@ -1,183 +1,149 @@
|
||||
import * as React from 'react';
|
||||
import { OFRest } from '../../components/Rest';
|
||||
import * as Utils from '../../components/Utils';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import { TargetCreator } from '../../components/TargetCreate';
|
||||
|
||||
const styles = {
|
||||
|
||||
checkbox: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
};
|
||||
import { Icon, Step, Button } from 'semantic-ui-react';
|
||||
import { Label, Menu, Table } from 'semantic-ui-react';
|
||||
|
||||
|
||||
export class DiscoveryResult extends React.Component<any, any> {
|
||||
list: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
result: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
let data = '{"startDate":1496812121000,"endDate":1496812155000,"result":true,"zone":{"ip":3232235985,"mask":24,"iface":"enp0s3","mac":8796753988883,"firstScanRange":3232235777,"lastScanRange":3232236030,"hosts":[{"firstScanRange":1,"lastScanRange":10000,"name":"","ip":3232235985,"mac":8796753988883,"ports":null,"createDate":1496812124000,"updateDate":1496812124000},{"firstScanRange":1,"lastScanRange":10000,"name":"","ip":3232235881,"mac":23084201235582,"ports":[{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"SMTP"}],"portType":"TCP","portNumber":25},{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"HTTP"}],"portType":"TCP","portNumber":3000},{"createDate":-62135596800000,"updateDate":-62135596800000,"services":[{"createDate":-62135596800000,"updateDate":-62135596800000,"portType":"TCP","serviceName":"HTTP"}],"portType":"TCP","portNumber":80}],"createDate":1496812124000,"updateDate":1496812124000}]}}';
|
||||
let obj = JSON.parse(data);
|
||||
this.list = Array();
|
||||
this.setState({
|
||||
result: obj,
|
||||
});
|
||||
}
|
||||
|
||||
getData() {
|
||||
let obj: any;
|
||||
obj = {
|
||||
"id": "0",
|
||||
"member": {
|
||||
"id": "1"
|
||||
}
|
||||
};
|
||||
|
||||
let os: OFRest = new OFRest("Target", "List", obj);
|
||||
var that: any = this;
|
||||
os.Call().then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (json) {
|
||||
let targetList = JSON.parse(json.resultStr);
|
||||
that.setState({
|
||||
targets: targetList,
|
||||
});
|
||||
}).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
handleNext = () => {
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
var target = this.list[i];
|
||||
console.log(target);
|
||||
}
|
||||
|
||||
let os: OFRest = new OFRest("Target", "CreateAll", this.list);
|
||||
|
||||
os.Call().then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
}).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
handleTargetCheck = (seq: number, type: string, checked: boolean, host: any, port: any) => {
|
||||
let obj: any;
|
||||
if (type === "host") {
|
||||
obj = {
|
||||
"seq": seq,
|
||||
"ip": host.ip,
|
||||
"port": 0,
|
||||
"portType": "",
|
||||
"vendorName": host.name,
|
||||
};
|
||||
} else {
|
||||
obj = {
|
||||
"seq": seq,
|
||||
"ip": host.ip,
|
||||
"port": port.portNumber,
|
||||
"portType": port.portType,
|
||||
"vendorName": port.services[0].serviceName,
|
||||
};
|
||||
}
|
||||
|
||||
if (checked) {
|
||||
this.list.push(obj);
|
||||
} else {
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
if (this.list[i].seq === seq) {
|
||||
this.list.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.list);
|
||||
}
|
||||
|
||||
|
||||
renderHosts = (zone: any, num: number) => {
|
||||
if (zone.hosts === null || zone.hosts.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return <div style={{ marginLeft: 20 }}>
|
||||
{zone.hosts.map((host: any, index: number) => (
|
||||
<div key={index}>
|
||||
<Row type='host' seq={num++} host={host} name={Utils.int2ip(host.ip)} desc={host.mac} onCheck={this.handleTargetCheck.bind(this)} />
|
||||
{this.renderPorts(host, num)}
|
||||
</div>
|
||||
))}
|
||||
</div>;
|
||||
}
|
||||
|
||||
renderPorts = (host: any, num: number) => {
|
||||
if (host.ports === null || host.ports.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return <div style={{ marginLeft: 20 }}>
|
||||
{host.ports.map((port: any, index: number) => (
|
||||
<div key={index}>
|
||||
<Row type='service' seq={num++} host={host} port={port} name={port.portType + port.portNumber} desc={port.services[0].serviceName} onCheck={this.handleTargetCheck.bind(this)} />
|
||||
</div>
|
||||
))}
|
||||
</div>;
|
||||
}
|
||||
|
||||
render() {
|
||||
var num = 0;
|
||||
|
||||
return (
|
||||
<div style={{ margin: 20 }}>
|
||||
<div>
|
||||
Elapsed : {Utils.sec2date(this.state.result.startDate)} ~ {Utils.sec2date(this.state.result.endDate)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Scan Range : {Utils.int2ip(this.state.result.zone.firstScanRange)} ~ {Utils.int2ip(this.state.result.zone.lastScanRange)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Iface : {this.state.result.zone.iface}
|
||||
</div>
|
||||
<div>
|
||||
IP : {Utils.int2ip(this.state.result.zone.ip)}/{this.state.result.zone.mask}
|
||||
</div>
|
||||
<div>
|
||||
MacAddress : {Utils.intToMac(this.state.result.zone.mac)}
|
||||
</div>
|
||||
|
||||
<div style={{ margin: 20 }} > Targets </div>
|
||||
{this.renderHosts(this.state.result.zone, num)}
|
||||
|
||||
<RaisedButton label="Next" primary={true} onClick={this.handleNext.bind(this)} style={{ margin: 20 }} />
|
||||
<div style={{ margin: "20px" }}>
|
||||
<Stepper />
|
||||
<PropertyTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Row extends React.Component<any, any> {
|
||||
export class Stepper extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
currentStep: 0,
|
||||
};
|
||||
}
|
||||
|
||||
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,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Step.Group>
|
||||
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
|
||||
<Icon name='truck' />
|
||||
<Step.Content>
|
||||
<Step.Title>Step 1</Step.Title>
|
||||
<Step.Description>Choose your shipping options</Step.Description>
|
||||
</Step.Content>
|
||||
</Step>
|
||||
|
||||
<Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
|
||||
<Icon name='payment' />
|
||||
<Step.Content title='Step 2' description='Enter billing information' />
|
||||
</Step>
|
||||
|
||||
<Step active={this.handleActive(3)} completed={this.handleCompleted(3)}
|
||||
icon='info' title='Step 3' />
|
||||
</Step.Group>
|
||||
|
||||
<br />
|
||||
|
||||
<Button.Group>
|
||||
<Button onClick={this.handlePrev.bind(this)}>Prev</Button>
|
||||
<Button.Or />
|
||||
<Button positive onClick={this.handleNext.bind(this)} >Next</Button>
|
||||
</Button.Group>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class PropertyTable extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleCheck(ev: any, checked: boolean) {
|
||||
this.props.onCheck(this.props.seq, this.props.type, checked, this.props.host, this.props.port);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Checkbox label={this.props.name + "-------------" + this.props.desc} style={styles.checkbox} onCheck={this.handleCheck.bind(this)} />
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Domain</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Property value</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon >Host IP</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Property value</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon >Host Name</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Property value</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Auth at</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Property value</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
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…
x
Reference in New Issue
Block a user