fix
This commit is contained in:
insanity
parent
ee0806c17c
commit
8dd13ab46e
@ -12,6 +12,8 @@ import { SensorConfig } from './containers/config/SensorConfig';
|
||||
import { WaitForAuth } from './containers/agent/WaitForAuth';
|
||||
import { MemberRegistResult } from './containers/member/RegistResult';
|
||||
import { MemberEmailConfirm } from './containers/member/EmailConfirm';
|
||||
import { Agents } from './containers/agent/Agents';
|
||||
import { AgentDetail } from './containers/agent/AgentDetail';
|
||||
|
||||
export class Routes extends React.Component<any, any> {
|
||||
render() {
|
||||
@ -29,6 +31,8 @@ export class Routes extends React.Component<any, any> {
|
||||
|
||||
<li><Link to='/config/sensorconfig' >SensorConfig</Link></li>
|
||||
<li><Link to='/prove/download' >ProveDownload</Link></li>
|
||||
<li><Link to='/agent/agents' >Agents</Link></li>
|
||||
<li><Link to='/agent/agentDetail' >AgentDetail</Link></li>
|
||||
|
||||
<Switch>
|
||||
<Route exact path='/' component={Main} />
|
||||
@ -40,6 +44,9 @@ export class Routes extends React.Component<any, any> {
|
||||
<Route exact path='/agent/waitauth' component={WaitForAuth} />
|
||||
<Route exact path='/config/sensorconfig' component={SensorConfig} />
|
||||
<Route exact path='/prove/download' component={ProveDownload} />
|
||||
<Route exact path='/agent/agents' component={Agents} />
|
||||
<Route exact path='/agent/agentDetail' component={AgentDetail} />
|
||||
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
|
||||
|
||||
@ -31,4 +31,5 @@ export class OFRest {
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
156
src/ts/containers/agent/AgentDetail.tsx
Normal file
156
src/ts/containers/agent/AgentDetail.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
} from 'material-ui/Table';
|
||||
import { Link, Route, Redirect } from 'react-router-dom';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import { TargetSelector } from '../config/TargetSelector';
|
||||
import FloatingActionButton from 'material-ui/FloatingActionButton';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import { Tabs, Tab } from 'material-ui/Tabs';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
|
||||
|
||||
const styles = {
|
||||
headline: {
|
||||
fontSize: 24,
|
||||
paddingTop: 16,
|
||||
marginBottom: 12,
|
||||
fontWeight: 400,
|
||||
},
|
||||
}
|
||||
|
||||
export class AgentDetail extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
targetAddOpen: false,
|
||||
targetAddType: 'host',
|
||||
hostToAdd : '',
|
||||
appToAdd: 1,
|
||||
addType : 'host'
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
handleAddTarget = () => {
|
||||
this.setState({
|
||||
targetAddOpen: true
|
||||
})
|
||||
}
|
||||
handleAddTargetPopupCancle = () => {
|
||||
this.setState({ targetAddOpen: false });
|
||||
};
|
||||
|
||||
handleRowSelected = (selectedRows: number[] | string) => {
|
||||
console.log(selectedRows);
|
||||
}
|
||||
|
||||
handleTargetTypeChange = (value: any) => {
|
||||
this.setState({
|
||||
addType: value,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddTargetSubmit = (event: any) => {
|
||||
if (this.state.addType == "host") {
|
||||
alert(this.state.hostToAdd);
|
||||
}else if (this.state.addType == "application") {
|
||||
alert(this.state.appToAdd);
|
||||
}
|
||||
this.setState({targetAddOpen: false})
|
||||
};
|
||||
|
||||
handleIPChange = (event: any) => {
|
||||
this.setState({
|
||||
hostToAdd : event.target.value
|
||||
})
|
||||
};
|
||||
|
||||
handleApplicationChange = (event:any, index:any, value:any) => {
|
||||
this.setState({
|
||||
appToAdd : value
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleAddTargetPopupCancle}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.handleAddTargetSubmit}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<div style={{ height: 100 }}>
|
||||
prove description area
|
||||
</div>
|
||||
<Divider />
|
||||
|
||||
<div style={{ padding: 10, float: 'right' }}>
|
||||
<FloatingActionButton onClick={this.handleAddTarget}>
|
||||
<ContentAdd />
|
||||
</FloatingActionButton>
|
||||
</div>
|
||||
|
||||
<div style={{ height: 300 }}>
|
||||
discovery result + target area
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
title="Add Target to monitor"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.targetAddOpen}>
|
||||
|
||||
<Tabs
|
||||
value={this.state.value}
|
||||
onChange={this.handleTargetTypeChange}
|
||||
>
|
||||
<Tab label="Host" value="host">
|
||||
<div style={{padding:20}}>
|
||||
<TextField onChange={this.handleIPChange}
|
||||
hintText="IP Address"
|
||||
/><br />
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab label="Application" value="application">
|
||||
<div style={{padding:20}}>
|
||||
<SelectField
|
||||
value={this.state.appToAdd}
|
||||
onChange={this.handleApplicationChange}
|
||||
>
|
||||
<MenuItem value={1} primaryText="MySQL" />
|
||||
<MenuItem value={2} primaryText="Redis" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
</Dialog>>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
134
src/ts/containers/agent/Agents.tsx
Normal file
134
src/ts/containers/agent/Agents.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
} from 'material-ui/Table';
|
||||
import { Link, Route, Redirect } from 'react-router-dom';
|
||||
import { OFRest } from '../../components/Rest';
|
||||
|
||||
const styles = {
|
||||
propContainer: {
|
||||
width: 200,
|
||||
overflow: 'hidden',
|
||||
margin: '20px auto 0',
|
||||
},
|
||||
propToggleHeader: {
|
||||
margin: '20px auto 10px',
|
||||
},
|
||||
};
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
agentId: '111',
|
||||
desc: 'Agent 1',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 2',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 3',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 4',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 5',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 6',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
{
|
||||
agentId: 'wqekoekeeeeerw',
|
||||
desc: 'Agent 7',
|
||||
status: 'Wait For Auth',
|
||||
},
|
||||
];
|
||||
|
||||
export class Agents extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
agents: []
|
||||
};
|
||||
this.getAgents();
|
||||
};
|
||||
|
||||
getAgents = () => {
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"phone": this.state.phone
|
||||
};
|
||||
|
||||
let os: OFRest = new OFRest("Agent", "Regist", obj);
|
||||
|
||||
os.Call().then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (json) {
|
||||
console.log(json);
|
||||
}).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
handleRowSelected = (selectedRows: number[] | string) => {
|
||||
this.props.history.push('/agent/agentDetail');
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<Table
|
||||
selectable={true}
|
||||
multiSelectable={false}
|
||||
onRowSelection={this.handleRowSelected}
|
||||
>
|
||||
<TableHeader
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}
|
||||
displaySelectAll={false}>
|
||||
<TableRow>
|
||||
<TableHeaderColumn tooltip="The Agent Id">Agent Id</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Description">Description</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody
|
||||
displayRowCheckbox={false}
|
||||
>
|
||||
{tableData.map((row: any, index: number) => (
|
||||
<TableRow key={index} >
|
||||
<TableRowColumn>{row.agentId}</TableRowColumn>
|
||||
<TableRowColumn>{row.desc}</TableRowColumn>
|
||||
<TableRowColumn>{row.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
))};
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -12,6 +12,7 @@ import {
|
||||
import Toggle from 'material-ui/Toggle';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import { OFRest } from '../../components/Rest';
|
||||
|
||||
const styles = {
|
||||
propContainer: {
|
||||
@ -65,7 +66,7 @@ const tableData = [
|
||||
export class WaitForAuth extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
|
||||
this.getList();
|
||||
};
|
||||
|
||||
state = {
|
||||
@ -79,6 +80,24 @@ export class WaitForAuth extends React.Component<any, any> {
|
||||
|
||||
sselectedRows: number[] | string;
|
||||
|
||||
getList = () => {
|
||||
let output: string;
|
||||
let obj: any; //new object declaration
|
||||
obj = {
|
||||
"authStatus": "ACCEPT"
|
||||
};
|
||||
|
||||
let os: OFRest = new OFRest("NoauthAgent", "GetNoAuthList", obj);
|
||||
|
||||
os.Call().then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (json) {
|
||||
console.log(json);
|
||||
}).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
// handleCellClick = (e: any, idx: number) => {
|
||||
// console.log(e)
|
||||
// }
|
||||
@ -117,68 +136,68 @@ export class WaitForAuth extends React.Component<any, any> {
|
||||
/>,
|
||||
]
|
||||
return (
|
||||
|
||||
<div>
|
||||
<Table
|
||||
selectable={this.state.selectable}
|
||||
multiSelectable={this.state.multiSelectable}
|
||||
/*onCellClick={this.handleCellClick}*/
|
||||
onRowSelection={this.handleRowSelected}
|
||||
>
|
||||
<TableHeader
|
||||
displaySelectAll={this.state.showCheckboxes}
|
||||
adjustForCheckbox={this.state.showCheckboxes}
|
||||
enableSelectAll={this.state.enableSelectAll} >
|
||||
<TableRow>
|
||||
<TableHeaderColumn colSpan={3} tooltip="Super Header" style={{ textAlign: 'center' }}>
|
||||
Super Header
|
||||
|
||||
<div>
|
||||
<Table
|
||||
selectable={this.state.selectable}
|
||||
multiSelectable={this.state.multiSelectable}
|
||||
/*onCellClick={this.handleCellClick}*/
|
||||
onRowSelection={this.handleRowSelected}
|
||||
>
|
||||
<TableHeader
|
||||
displaySelectAll={this.state.showCheckboxes}
|
||||
adjustForCheckbox={this.state.showCheckboxes}
|
||||
enableSelectAll={this.state.enableSelectAll} >
|
||||
<TableRow>
|
||||
<TableHeaderColumn colSpan={3} tooltip="Super Header" style={{ textAlign: 'center' }}>
|
||||
Super Header
|
||||
</TableHeaderColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHeaderColumn tooltip="The API Key">API Key</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody
|
||||
displayRowCheckbox={this.state.showCheckboxes}
|
||||
stripedRows={this.state.stripedRows}>
|
||||
{tableData.map((row: any, index: number) => (
|
||||
<TableRow key={index} >
|
||||
<TableRowColumn>{row.apiKey}</TableRowColumn>
|
||||
<TableRowColumn>{row.name}</TableRowColumn>
|
||||
<TableRowColumn>{row.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHeaderColumn tooltip="The API Key">API Key</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn>
|
||||
<TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody
|
||||
displayRowCheckbox={this.state.showCheckboxes}
|
||||
stripedRows={this.state.stripedRows}>
|
||||
{tableData.map((row: any, index: number) => (
|
||||
<TableRow key={index} >
|
||||
<TableRowColumn>{row.apiKey}</TableRowColumn>
|
||||
<TableRowColumn>{row.name}</TableRowColumn>
|
||||
<TableRowColumn>{row.status}</TableRowColumn>
|
||||
</TableRow>
|
||||
))};
|
||||
))};
|
||||
|
||||
</TableBody>
|
||||
<TableFooter
|
||||
adjustForCheckbox={this.state.showCheckboxes} >
|
||||
< Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.open} >
|
||||
선택한 Agent를 인증하시겠습니까?
|
||||
<TableFooter
|
||||
adjustForCheckbox={this.state.showCheckboxes} >
|
||||
< Dialog
|
||||
title="Dialog With Actions"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.open} >
|
||||
선택한 Agent를 인증하시겠습니까?
|
||||
</Dialog >
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<FlatButton
|
||||
style={{float:'right'}}
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.handleOpenDialog}
|
||||
/>
|
||||
<FlatButton
|
||||
style={{float:'right' }}
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<FlatButton
|
||||
style={{ float: 'right' }}
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.handleOpenDialog}
|
||||
/>
|
||||
<FlatButton
|
||||
style={{ float: 'right' }}
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -10,7 +10,6 @@ import FlatButton from 'material-ui/FlatButton';
|
||||
import { TargetSelector } from './TargetSelector';
|
||||
import { CrawlerSelector } from './CrawlerSelector';
|
||||
import { ItemSelector } from './ItemSelector';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
|
||||
export class SensorConfig extends React.Component<any, any> {
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user