sensorconfig
This commit is contained in:
insanity
parent
b8d15671a8
commit
bcad64f29d
@ -1,6 +1,6 @@
|
||||
|
||||
|
||||
const url = "http://192.168.1.203:8080/v1/overflow/services";
|
||||
const url = "http://192.168.1.105:8080/v1/overflow/services";
|
||||
|
||||
export class OFRest {
|
||||
|
||||
|
||||
@ -1,7 +1,131 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import Divider from 'material-ui/Divider';
|
||||
import Dialog from 'material-ui/Dialog';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import LinearProgress from 'material-ui/LinearProgress';
|
||||
import {ItemSelector} from './ItemSelector';
|
||||
|
||||
const styles = {
|
||||
};
|
||||
|
||||
|
||||
export class CrawlerSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
crawlerType: 0,
|
||||
authOpen: false,
|
||||
isloading: false
|
||||
};
|
||||
}
|
||||
|
||||
handleCrawlerChange = (event: any, index: any, value: any) => {
|
||||
if (value == 1) {
|
||||
this.setState({ crawlerType: value });
|
||||
return;
|
||||
}
|
||||
if (this.validateCrawlerType()) {
|
||||
this.setState({ crawlerType: value });
|
||||
} else {
|
||||
this.setState({ crawlerType: 0 });
|
||||
}
|
||||
}
|
||||
|
||||
validateCrawlerType = () => {
|
||||
this.setState({ authOpen: true });
|
||||
return true;
|
||||
}
|
||||
|
||||
handleAuthPopupOk = () => {
|
||||
this.setState({ isLoading: true })
|
||||
//this.setState({ authOpen: false });
|
||||
};
|
||||
handleAuthPopupCancle = () => {
|
||||
this.setState({ authOpen: false, crawlerType: 0, isLoading: false });
|
||||
};
|
||||
|
||||
|
||||
getAuthPopupContent = () => {
|
||||
switch (this.state.crawlerType) {
|
||||
case 2:
|
||||
return <WMIAuthPopup />;
|
||||
case 3:
|
||||
return <SNMPv2AuthPopup />;
|
||||
case 4:
|
||||
return <SNMPv3AuthPopup />;
|
||||
case 5:
|
||||
return <JMXAuthPopup />;
|
||||
default:
|
||||
return 'errrrrrr';
|
||||
}
|
||||
}
|
||||
|
||||
showLoadingBar = () => {
|
||||
if (this.state.isLoading) {
|
||||
return <LinearProgress mode="indeterminate" style={{ marginTop: 30 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onTouchTap={this.handleAuthPopupCancle}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Submit"
|
||||
primary={true}
|
||||
onTouchTap={this.handleAuthPopupOk}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<Dialog
|
||||
title="Connection information is required."
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.authOpen}
|
||||
>
|
||||
{this.getAuthPopupContent()}
|
||||
{this.showLoadingBar()}
|
||||
|
||||
</Dialog>
|
||||
|
||||
<Paper >
|
||||
<DropDownMenu value={this.state.crawlerType} onChange={this.handleCrawlerChange} style={{ width: 200 }}>
|
||||
<MenuItem value={1} primaryText="Protocol" />
|
||||
<MenuItem value={2} primaryText="WMI" />
|
||||
<MenuItem value={3} primaryText="SNMPv2c" />
|
||||
<MenuItem value={4} primaryText="SNMPv3" />
|
||||
<MenuItem value={5} primaryText="JMX" />
|
||||
</DropDownMenu>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div style={{ padding: 30 }}>
|
||||
Crawler description....
|
||||
</div>
|
||||
<br />
|
||||
<ItemSelector/>
|
||||
</Paper>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class SNMPv2AuthPopup extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
@ -11,11 +135,77 @@ export class CrawlerSelector extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div>
|
||||
CrawlerSelector
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
FORM FOR SNMPV2C
|
||||
<br />
|
||||
<TextField
|
||||
hintText="Community"
|
||||
errorText="This field is required"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class SNMPv3AuthPopup extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
FORM FOR SNMPV3
|
||||
<TextField
|
||||
hintText="User"
|
||||
errorText="This field is required"
|
||||
/>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class WMIAuthPopup extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
FORM FOR WMI
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class JMXAuthPopup extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
FORM FOR JMX
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,84 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
} from 'material-ui/Table';
|
||||
import IconMenu from 'material-ui/IconMenu';
|
||||
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
id: 0,
|
||||
name: 'CPU.USAGE',
|
||||
desc: 'desc....',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'CPU.FREE',
|
||||
desc: 'desc....',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'CPU.IDLE',
|
||||
desc: 'desc....',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export class ItemSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
selected: [],
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
isSelected = (index: any) => {
|
||||
return this.state.selected.indexOf(index) !== -1;
|
||||
};
|
||||
|
||||
handleRowSelection = (selectedRows: any) => {
|
||||
this.setState({
|
||||
selected: selectedRows,
|
||||
});
|
||||
console.log(selectedRows);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div>
|
||||
ItemSelector
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Table onRowSelection={this.handleRowSelection}
|
||||
selectable={true}
|
||||
multiSelectable={true}
|
||||
>
|
||||
<TableHeader >
|
||||
<TableRow>
|
||||
<TableHeaderColumn colSpan={3}>CPU</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody
|
||||
deselectOnClickaway={false}
|
||||
>
|
||||
{tableData.map((row, index) => (
|
||||
<TableRow key={index} selected={this.isSelected(index)} >
|
||||
<TableRowColumn style={{ display: 'none' }}>{row.id}</TableRowColumn>
|
||||
<TableRowColumn>{row.name}</TableRowColumn>
|
||||
<TableRowColumn>{row.desc}</TableRowColumn>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import {
|
||||
Step,
|
||||
Stepper,
|
||||
@ -7,57 +6,63 @@ import {
|
||||
} from 'material-ui/Stepper';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import Divider from 'material-ui/Divider';
|
||||
|
||||
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> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
selectedTarget: 0,
|
||||
selectedSensors: []
|
||||
};
|
||||
}
|
||||
|
||||
state = {
|
||||
finished: false,
|
||||
stepIndex: 0,
|
||||
selected: -1
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
if (this.state.selectedTarget == 0) {
|
||||
alert("Choose a target.");
|
||||
return;
|
||||
}
|
||||
const { stepIndex } = this.state;
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
finished: stepIndex >= 2,
|
||||
});
|
||||
if(this.state.stepIndex == 0) {
|
||||
alert(this.state.selected);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const { stepIndex } = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({ stepIndex: stepIndex - 1 });
|
||||
this.setState({ stepIndex: stepIndex - 1, selectedTarget: 0 });
|
||||
}
|
||||
};
|
||||
|
||||
handleChange(idx :any) {
|
||||
handleStep1Change(idx: any) {
|
||||
this.setState({
|
||||
selected : idx
|
||||
selectedTarget: idx
|
||||
});
|
||||
}
|
||||
|
||||
handleStep2Change(idx: any) {
|
||||
alert("aa");
|
||||
}
|
||||
|
||||
getStepContent(stepIndex: any) {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <TargetSelector onChange={this.handleChange.bind(this)} />;
|
||||
return <TargetSelector onChange={this.handleStep1Change.bind(this)} />;
|
||||
case 1:
|
||||
return <CrawlerSelector />;
|
||||
return <CrawlerSelector onChange={this.handleStep2Change.bind(this)}/>;
|
||||
case 2:
|
||||
return <ItemSelector />;
|
||||
return null;
|
||||
default:
|
||||
return 'errrrrrr';
|
||||
}
|
||||
@ -65,20 +70,18 @@ export class SensorConfig extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div style={{ width: '100%', maxWidth: 900, margin: 'auto' }}>
|
||||
<Stepper activeStep={this.state.stepIndex}>
|
||||
<Step>
|
||||
<StepLabel>MONITOR WHAT?</StepLabel>
|
||||
<StepLabel>STEP 1</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>TECHNOLOGY USED?</StepLabel>
|
||||
<StepLabel>STEP 2</StepLabel>
|
||||
</Step>
|
||||
<Step>
|
||||
<StepLabel>SELEC ITEMS</StepLabel>
|
||||
<StepLabel>STEP 3</StepLabel>
|
||||
</Step>
|
||||
</Stepper>
|
||||
<Divider />
|
||||
<div>
|
||||
{this.state.finished ? (
|
||||
<p>
|
||||
@ -112,7 +115,6 @@ export class SensorConfig extends React.Component<any, any> {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,11 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
|
||||
import { List, ListItem, makeSelectable } from 'material-ui/List';
|
||||
import Subheader from 'material-ui/Subheader';
|
||||
import Checkbox from 'material-ui/Checkbox';
|
||||
|
||||
import Paper from 'material-ui/Paper';
|
||||
|
||||
const styles = {
|
||||
test: {
|
||||
display: 'inline-block',
|
||||
float: 'left',
|
||||
width: '50%',
|
||||
height: 550,
|
||||
},
|
||||
}
|
||||
|
||||
let SelectableList = makeSelectable(List);
|
||||
|
||||
@ -43,9 +49,8 @@ function wrapState(ComposedComponent: any, par: any) {
|
||||
export class TargetSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context)
|
||||
this.state = {
|
||||
};
|
||||
SelectableList = wrapState(SelectableList, this);
|
||||
|
||||
}
|
||||
|
||||
handleSelect(idx: any) {
|
||||
@ -54,9 +59,9 @@ export class TargetSelector extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<div>
|
||||
<SelectableList >
|
||||
<div>
|
||||
<Paper style={styles.test}>
|
||||
<SelectableList>
|
||||
<Subheader>Select a target to monitor</Subheader>
|
||||
<ListItem
|
||||
value={1}
|
||||
@ -88,7 +93,6 @@ export class TargetSelector extends React.Component<any, any> {
|
||||
nestedItems={[
|
||||
<ListItem
|
||||
value={6}
|
||||
|
||||
primaryText="MySQL"
|
||||
secondaryText="Port 5432" />,
|
||||
<ListItem
|
||||
@ -100,8 +104,11 @@ export class TargetSelector extends React.Component<any, any> {
|
||||
]}
|
||||
/>
|
||||
</SelectableList>
|
||||
</div>
|
||||
|
||||
</Paper>
|
||||
<Paper style={styles.test}>
|
||||
Target description...
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import Menu from 'material-ui/Menu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
@ -44,28 +43,28 @@ export class ProveDownload extends React.Component<any, any> {
|
||||
render() {
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<Paper style={styles.osSelector}>
|
||||
<Menu onItemTouchTap={this.handleOSChange.bind(this)}>
|
||||
<MenuItem primaryText="Windows" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Ubuntu" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Mac OS X" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Docker" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Debian" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="CentOS" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Fedora" leftIcon={<ContentCopy />} />
|
||||
</Menu>
|
||||
</Paper>
|
||||
<Paper style={styles.osSelector}>
|
||||
<Menu onItemTouchTap={this.handleOSChange.bind(this)}>
|
||||
<MenuItem primaryText="Windows" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Ubuntu" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Mac OS X" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Docker" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Debian" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="CentOS" leftIcon={<ContentCopy />} />
|
||||
<MenuItem primaryText="Fedora" leftIcon={<ContentCopy />} />
|
||||
</Menu>
|
||||
</Paper>
|
||||
|
||||
<Paper style={styles.content}>
|
||||
<InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName} />
|
||||
</Paper>
|
||||
<Paper style={styles.content}>
|
||||
<InstallGuide idx={this.state.selectedOSidx} name={this.state.selectedOSName} />
|
||||
</Paper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||
import { List, ListItem } from 'material-ui/List';
|
||||
import ActionInfo from 'material-ui/svg-icons/action/info';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
@ -34,13 +33,13 @@ export class InstallGuide extends React.Component<any, any> {
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<h1>Installing on {this.props.name}</h1>
|
||||
<ListItem primaryText="Blah Blah Blah..." disabled={true} leftIcon={<ActionInfo />} />
|
||||
{target}
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<h1>Installing on {this.props.name}</h1>
|
||||
<ListItem primaryText="Blah Blah Blah..." disabled={true} leftIcon={<ActionInfo />} />
|
||||
{target}
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -60,18 +59,16 @@ export class WindowsInstallGuide extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
<SelectField
|
||||
floatingLabelText="Architecture"
|
||||
value={this.state.selectedArch}
|
||||
onChange={this.handleArchChange}
|
||||
>
|
||||
<MenuItem value={0} primaryText="32bit" />
|
||||
<MenuItem value={1} primaryText="64bit" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
<div>
|
||||
<SelectField
|
||||
floatingLabelText="Architecture"
|
||||
value={this.state.selectedArch}
|
||||
onChange={this.handleArchChange}
|
||||
>
|
||||
<MenuItem value={0} primaryText="32bit" />
|
||||
<MenuItem value={1} primaryText="64bit" />
|
||||
</SelectField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -86,11 +83,9 @@ export class UbuntuInstallGuide extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MuiThemeProvider >
|
||||
<div>
|
||||
Ubuntu blah blah
|
||||
<div>
|
||||
Ubuntu blah blah
|
||||
</div>
|
||||
</MuiThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,7 @@ module.exports = {
|
||||
historyApiFallback: true,
|
||||
contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path
|
||||
publicPath: '/' ,// match the output `publicPath`
|
||||
host: '192.168.1.209',
|
||||
host: '192.168.1.105',
|
||||
port: 9091,
|
||||
stats: {
|
||||
colors: true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user