add routers
This commit is contained in:
snoop
parent
c2e92ac3e1
commit
ff01e2169c
|
|
@ -11,7 +11,9 @@ import Platform from '@overflow/commons/platform';
|
|||
import { store, sagaMiddleware, history } from './redux/store';
|
||||
|
||||
import sagas from './redux/saga';
|
||||
import routes from './router';
|
||||
// import routes from './router';
|
||||
|
||||
import {Layout} from './views/layout/Layout';
|
||||
|
||||
injectTapEventPlugin();
|
||||
|
||||
|
|
@ -35,11 +37,7 @@ function* app(): any {
|
|||
sagaMiddleware.run(sagas);
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<ConnectedRouter history={history}>
|
||||
{routes}
|
||||
</ConnectedRouter>
|
||||
</Provider>,
|
||||
<div><Layout /></div>,
|
||||
appContainer,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,33 @@ import { Route, Switch } from 'react-router-dom';
|
|||
|
||||
import SignIn from '../views/member/SignIn';
|
||||
|
||||
import { SignUp } from '@overflow/member/react/components/SignUp';
|
||||
// import { SignIn } from '@overflow/member/react/components/SignIn';;
|
||||
import { PWChange } from '@overflow/member/react/components/PWChange';
|
||||
import { ProbeDown } from '@overflow/probe/react/components/ProbeDown';
|
||||
import { DiscoveryDetails } from '@overflow/temp/react/components/DiscoveryDetails'
|
||||
import { Components } from '@overflow/temp/react/components/Components';
|
||||
import { Sensors } from '@overflow/temp/react/components/Sensors';
|
||||
// import { Layout } from './containers/test/layout/Layout'
|
||||
import { Tree } from '@overflow/temp/react/components/commons/Tree';
|
||||
import { TableExampleSortable } from '@overflow/temp/react/components/TableExampleSortable'
|
||||
|
||||
|
||||
const routes = (
|
||||
<Switch>
|
||||
<Route exact path='/' />
|
||||
<Route path='/signin' component={SignIn} />
|
||||
<Route exact path='/'/>
|
||||
<Route exact path='/test2' component={SignUp} />
|
||||
<Route exact path='/test3' component={SignIn} />
|
||||
<Route exact path='/test4' component={PWChange} />
|
||||
<Route exact path='/test5' component={ProbeDown} />
|
||||
<Route exact path='/test6' component={DiscoveryDetails} />
|
||||
<Route exact path='/test7' component={Tree} />
|
||||
<Route exact path='/test8' component={TableExampleSortable} />
|
||||
|
||||
<Route exact path='/test14' component={Components} />
|
||||
|
||||
<Route exact path='/test21' component={Sensors} />
|
||||
{/*<Route path='/signin' component={SignIn} />*/}
|
||||
|
||||
</Switch>
|
||||
|
||||
|
|
|
|||
23
src/ts/@overflow/app/views/layout/Footer.tsx
Normal file
23
src/ts/@overflow/app/views/layout/Footer.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import * as React from 'react';
|
||||
import { Segment } from 'semantic-ui-react';
|
||||
|
||||
export class Footer extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Segment vertical textAlign='center' size='tiny'>
|
||||
<br />
|
||||
Copyright LOAFLE.
|
||||
</Segment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
27
src/ts/@overflow/app/views/layout/Header.tsx
Normal file
27
src/ts/@overflow/app/views/layout/Header.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from 'react';
|
||||
import { Container, Divider } from 'semantic-ui-react';
|
||||
|
||||
import { LogoBar } from './LogoBar';
|
||||
import { TitleBar } from './TitleBar';
|
||||
|
||||
export class Header extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<LogoBar />
|
||||
<TitleBar />
|
||||
</Container>
|
||||
// <TopBar onSidebar={this.props.onSidebar}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
109
src/ts/@overflow/app/views/layout/Layout.tsx
Normal file
109
src/ts/@overflow/app/views/layout/Layout.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import * as React from 'react';
|
||||
import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb, Grid, Dropdown } from 'semantic-ui-react';
|
||||
import { Header } from './Header';
|
||||
import { Footer } from './Footer';
|
||||
import { LeftMenu } from './LeftMenu';
|
||||
|
||||
// import { Routes } from './Routes';
|
||||
|
||||
import routes from '../../router';
|
||||
|
||||
import { Router } from 'react-router';
|
||||
import * as History from 'history';
|
||||
|
||||
import { Provider } from 'react-redux';
|
||||
import { ConnectedRouter } from 'react-router-redux';
|
||||
import { store, sagaMiddleware, history } from '../../redux/store';
|
||||
|
||||
// const history = History.createHashHistory();
|
||||
|
||||
export class Layout extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
sidebar_visible: true,
|
||||
notification_visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
public onSidebar = () => {
|
||||
this.setState({ notification_visible: !this.state.notification_visible, sidebar_visible: !this.state.sidebar_visible });
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Sidebar.Pushable as={Segment} vertical>
|
||||
<Sidebar as={Menu} animation='overlay' width='thin' visible={this.state.sidebar_visible} icon='labeled' vertical inverted>
|
||||
<LeftMenu />
|
||||
</Sidebar>
|
||||
<Sidebar.Pusher>
|
||||
<Segment vertical style={{ margin: '0 0 0 150px', padding: '0' }}>
|
||||
<Header />
|
||||
|
||||
{/*<Router history={history} >
|
||||
{routes}
|
||||
</Router>*/}
|
||||
<Provider store={store}>
|
||||
<ConnectedRouter history={history}>
|
||||
{routes}
|
||||
</ConnectedRouter>
|
||||
</Provider>
|
||||
|
||||
<Footer />
|
||||
|
||||
</Segment>
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable>
|
||||
{/* <Header onSidebar={this.onSidebar.bind(this)} />
|
||||
<Sidebar.Pushable as={Segment} vertical >
|
||||
<Sidebar
|
||||
as={Menu}
|
||||
animation='overlay'
|
||||
width='thin'
|
||||
direction='right'
|
||||
visible={this.state.notification_visible}
|
||||
icon='labeled'
|
||||
vertical
|
||||
inverted
|
||||
>
|
||||
<Menu.Item name='home'>
|
||||
Notification 1
|
||||
</Menu.Item>
|
||||
<Menu.Item name='gamepad'>
|
||||
Notification 2
|
||||
</Menu.Item>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar.Pusher >
|
||||
<Container fluid textAlign='right' style={{ padding: '5px 20px 0px' }}>
|
||||
<Breadcrumb size='mini'>
|
||||
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider icon='right angle' />
|
||||
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider icon='right angle' />
|
||||
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
|
||||
</Breadcrumb>
|
||||
</Container>
|
||||
|
||||
<Segment vertical>
|
||||
<Container>
|
||||
<Router history={history} >
|
||||
<Routes />
|
||||
</Router>
|
||||
</Container>
|
||||
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable> */}
|
||||
|
||||
|
||||
</Container >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
113
src/ts/@overflow/app/views/layout/LeftMenu.tsx
Normal file
113
src/ts/@overflow/app/views/layout/LeftMenu.tsx
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import * as React from 'react';
|
||||
import { Container, Menu, Dropdown, Segment, Icon } from 'semantic-ui-react';
|
||||
|
||||
import { LogoBar } from './LogoBar';
|
||||
import { TitleBar } from './TitleBar';
|
||||
|
||||
export class LeftMenu extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
console.log(window);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid className='fullHeight'>
|
||||
<Segment inverted vertical className='fullHeight'>
|
||||
<Menu inverted secondary vertical fluid icon='labeled' >
|
||||
|
||||
<Menu.Item name='User' href='/' >
|
||||
<Icon name='user' />
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Home' href='/' >
|
||||
<Icon name='home' />
|
||||
Home
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Monitoring' href='/' >
|
||||
<Icon name='bar graph' />
|
||||
Monitoring
|
||||
{/*
|
||||
<Dropdown text='Monitoring' pointing>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Monitoring</Dropdown.Header>
|
||||
<Dropdown.Item>Probe</Dropdown.Item>
|
||||
<Dropdown.Item>Sensors</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
*/}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Infrastructure' href='/' >
|
||||
<Icon name='sitemap' />
|
||||
Infrastructure
|
||||
{/*
|
||||
<Dropdown text='Infrastructure' >
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Infrastructure</Dropdown.Header>
|
||||
<Dropdown.Item>Maps</Dropdown.Item>
|
||||
<Dropdown.Item>Targets</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
*/}
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Dashboard' href='/' >
|
||||
<Icon name='industry' />
|
||||
Dashboard
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Metrics' href='/' >
|
||||
<Icon name='tasks' />
|
||||
Metrics
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='Alerts' href='/' >
|
||||
<Icon name='alarm' />
|
||||
Alerts
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item name='History' href='/' >
|
||||
<Icon name='book' />
|
||||
History
|
||||
</Menu.Item>
|
||||
|
||||
|
||||
<Menu.Item href='/'>
|
||||
<Icon name='play circle' />
|
||||
<Dropdown text='Custom'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header>Custom</Dropdown.Header>
|
||||
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test8'>TableExampleSortable</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item name='Settings' href='/' >
|
||||
<Icon name='setting' />
|
||||
Settings
|
||||
</Menu.Item>
|
||||
|
||||
</Menu>
|
||||
</Segment>
|
||||
</Container>
|
||||
// <TopBar onSidebar={this.props.onSidebar}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
42
src/ts/@overflow/app/views/layout/LogoBar.tsx
Normal file
42
src/ts/@overflow/app/views/layout/LogoBar.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import * as React from 'react';
|
||||
import { Menu, Header, Container } from 'semantic-ui-react';
|
||||
|
||||
export class LogoBar extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
public handleLogoClick = () => {
|
||||
alert('handleLogoClick');
|
||||
}
|
||||
|
||||
public handleNotiClick = () => {
|
||||
alert('handleNotiClick');
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Menu borderless secondary >
|
||||
<Menu.Item
|
||||
name='logo'
|
||||
onClick={this.handleLogoClick}
|
||||
>
|
||||
<Header as='h3' icon='stack overflow' content='overFlow' />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
position='right'
|
||||
icon='bell'
|
||||
onClick={this.handleNotiClick}
|
||||
/>
|
||||
</Menu>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
0
src/ts/@overflow/app/views/layout/Routes.tsx
Normal file
0
src/ts/@overflow/app/views/layout/Routes.tsx
Normal file
51
src/ts/@overflow/app/views/layout/TitleBar.tsx
Normal file
51
src/ts/@overflow/app/views/layout/TitleBar.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import * as React from 'react';
|
||||
import { Grid, Container, Breadcrumb, Header, Menu, Input, Segment } from 'semantic-ui-react';
|
||||
|
||||
export class TitleBar extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
let subMenus = [
|
||||
{
|
||||
'name': 'Menu1',
|
||||
'href': '#/test2',
|
||||
},
|
||||
{
|
||||
'name': 'Menu2',
|
||||
'href': '#/test3',
|
||||
},
|
||||
{
|
||||
'name': 'Menu3',
|
||||
'href': '#/test4',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Menu basic fluid style={{ 'border-left': '0px', 'border-right': '0px', 'box-shadow': 'none', 'border-radius': '0' }}>
|
||||
<Menu.Item name='Page Title' style={{ width: '250px' }}>
|
||||
<Header as='h3'>Page Title
|
||||
<Header.Subheader>
|
||||
<Breadcrumb size='mini' left bottom>
|
||||
<Breadcrumb.Section link>Home</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
|
||||
<Breadcrumb.Divider />
|
||||
<Breadcrumb.Section active>Probes</Breadcrumb.Section>
|
||||
</Breadcrumb>
|
||||
</Header.Subheader>
|
||||
</Header>
|
||||
</Menu.Item>
|
||||
{subMenus.map((menu: any, index: number) => (
|
||||
<Menu.Item key={index} name={menu.name} href={menu.href} />
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
54
src/ts/@overflow/commons/utils/Rest.tsx
Normal file
54
src/ts/@overflow/commons/utils/Rest.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
|
||||
const url = "http://192.168.1.209:8080/v1/overflow/services";
|
||||
|
||||
export class OFRest {
|
||||
|
||||
obj: any;
|
||||
|
||||
|
||||
constructor(serviceName: string, methodName: string, data: any) {
|
||||
|
||||
this.obj = {
|
||||
"serviceName": serviceName,
|
||||
"methodName": methodName,
|
||||
"param": {
|
||||
"model": JSON.stringify(data)
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
public Call() {
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(this.obj)
|
||||
});
|
||||
}
|
||||
|
||||
public CallWithCB(callback: Function) {
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(this.obj)
|
||||
}).then(function (res) {
|
||||
return res.json();
|
||||
}).then(function (json) {
|
||||
if (json.error != undefined) {
|
||||
console.log(json.error);
|
||||
return;
|
||||
}
|
||||
callback(json);
|
||||
}).catch(function (err) {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
45
src/ts/@overflow/commons/utils/TargetCreate.tsx
Normal file
45
src/ts/@overflow/commons/utils/TargetCreate.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
// var obj: any;
|
||||
|
||||
// obj = {
|
||||
// "ip": "192.168.1.106",
|
||||
// "port": "80",
|
||||
// "portType": "TCP",
|
||||
// // "targetType":"",
|
||||
// "vendorName": "HTTP",
|
||||
// // "kinds":"",
|
||||
// // "version":"",
|
||||
|
||||
// }
|
||||
|
||||
// var objArray: any[];
|
||||
// objArray.push(obj);
|
||||
|
||||
|
||||
export class TargetCreator {
|
||||
|
||||
list: any[];
|
||||
|
||||
public Add(ip: number, port: number, portType: string, vendorName: string) {
|
||||
let obj: any;
|
||||
|
||||
obj = {
|
||||
"ip": ip,
|
||||
"port": port,
|
||||
"portType": portType,
|
||||
// "targetType":"",
|
||||
"vendorName": vendorName,
|
||||
// "kinds":"",
|
||||
// "version":"",
|
||||
};
|
||||
|
||||
this.list.push(obj);
|
||||
|
||||
}
|
||||
|
||||
public toString() :string {
|
||||
return JSON.stringify(this.list);
|
||||
}
|
||||
|
||||
}
|
||||
38
src/ts/@overflow/commons/utils/Utils.tsx
Normal file
38
src/ts/@overflow/commons/utils/Utils.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
|
||||
|
||||
|
||||
export function int2ip(ipInt: number) {
|
||||
return ((ipInt >>> 24) + '.' + (ipInt >> 16 & 255) + '.' + (ipInt >> 8 & 255) + '.' + (ipInt & 255));
|
||||
}
|
||||
|
||||
export function ip2int(ip: string) {
|
||||
return ip.split('.').reduce(function (ipInt, octet) { return (ipInt << 8) + parseInt(octet, 10); }, 0) >>> 0;
|
||||
}
|
||||
|
||||
export function sec2date(ms: number) {
|
||||
var dateTime = new Date(ms);
|
||||
return dateTime.toLocaleString();
|
||||
}
|
||||
|
||||
function numHex(s: number) {
|
||||
var a = s.toString(16);
|
||||
if ((a.length % 2) > 0) { a = "0" + a; }
|
||||
return a;
|
||||
}
|
||||
|
||||
export function intToMac(macInt: number): string {
|
||||
|
||||
var hexValue = numHex(macInt);
|
||||
|
||||
var macaddress = [];
|
||||
|
||||
for (var i = 0; i < hexValue.length; i = i + 2) {
|
||||
macaddress.push(hexValue.substr(i, 2));
|
||||
}
|
||||
|
||||
|
||||
return macaddress.join(':');
|
||||
}
|
||||
|
||||
|
||||
69
src/ts/@overflow/member/react/components/PWChange.tsx
Normal file
69
src/ts/@overflow/member/react/components/PWChange.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import *as React from 'react'
|
||||
import {
|
||||
Input, InputOnChangeData,
|
||||
Select, Button, Grid, Form, Container
|
||||
} from 'semantic-ui-react'
|
||||
|
||||
|
||||
export interface State {
|
||||
|
||||
}
|
||||
export interface Props {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class PWChange extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
pass:'',
|
||||
passCon:'',
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onSubmit = () => {
|
||||
console.log(this.state);
|
||||
}
|
||||
|
||||
|
||||
public render(): JSX.Element {
|
||||
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column mobile={16} tablet={5} computer={5}>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} tablet={6} computer={6}>
|
||||
<Form>
|
||||
<Form.Input placeholder='Password' type='password' onChange={
|
||||
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ pass: data.value });
|
||||
}} />
|
||||
<Form.Input placeholder='Password Confirm' type='password' onChange={
|
||||
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ passCon: data.value });
|
||||
}} />
|
||||
<Form.Group>
|
||||
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Submit </Button>
|
||||
<Button fluid style={{margin:'7'}}> Cancel </Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} tablet={4} computer={5}>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
99
src/ts/@overflow/member/react/components/SignUp.tsx
Normal file
99
src/ts/@overflow/member/react/components/SignUp.tsx
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import *as React from 'react'
|
||||
import {
|
||||
Input, InputOnChangeData,
|
||||
Select, Button, Dropdown, Grid, Form, Container
|
||||
} from 'semantic-ui-react'
|
||||
|
||||
|
||||
export interface State {
|
||||
|
||||
}
|
||||
export interface Props {
|
||||
|
||||
}
|
||||
|
||||
const options = [{ key: 'southkorea', value: '82', text: 'South Korea(82)' },
|
||||
{ key: 'unitedstates', value: '1', text: 'United States(1)' }]
|
||||
|
||||
|
||||
export class SignUp extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
email: '',
|
||||
name: '',
|
||||
pass: '',
|
||||
passCon: '',
|
||||
company: '',
|
||||
phone: '',
|
||||
country: '',
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
onSubmit = () => {
|
||||
console.log(this.state)
|
||||
|
||||
}
|
||||
|
||||
onChange = (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
|
||||
}
|
||||
|
||||
|
||||
public render(): JSX.Element {
|
||||
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column mobile={16} tablet={5} computer={5}>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} tablet={6} computer={6}>
|
||||
<Form>
|
||||
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
|
||||
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ email: data.value });
|
||||
}} />
|
||||
<Form.Input fluid placeholder='Name' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ name: data.value });
|
||||
}} />
|
||||
<Form.Input fluid placeholder='Password' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ pass: data.value });
|
||||
}} />
|
||||
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ passCon: data.value });
|
||||
}} />
|
||||
<Form.Input fluid placeholder='Company' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ company: data.value });
|
||||
}} />
|
||||
<Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ country: data.value });
|
||||
}} />
|
||||
<Form.Input fluid placeholder='phone' onChange={(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
|
||||
this.setState({ phone: data.value });
|
||||
}} />
|
||||
<Form.Group>
|
||||
<Button primary fluid style={{margin:'7'}} onClick={this.onSubmit}> Sign Up </Button>
|
||||
<Button fluid style={{margin:'7'}}> Cancel </Button>
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} tablet={4} computer={5}>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
64
src/ts/@overflow/probe/react/components/ProbeDown.tsx
Normal file
64
src/ts/@overflow/probe/react/components/ProbeDown.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import *as React from 'react'
|
||||
import {
|
||||
Grid, Menu, Segment, MenuItemProps, Header, Container
|
||||
} from 'semantic-ui-react'
|
||||
|
||||
|
||||
export interface State {
|
||||
|
||||
}
|
||||
export interface Props {
|
||||
|
||||
}
|
||||
|
||||
const osNames = ["Windows","Debian","Ubuntu","Fedora", "CentOS"];
|
||||
|
||||
export class ProbeDown extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = { activeItem: osNames[0] }
|
||||
|
||||
|
||||
}
|
||||
handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuItemProps) => {
|
||||
this.setState({ activeItem: data.name })
|
||||
|
||||
console.log(data.name);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { activeItem } = this.state
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Probe Download</Header>
|
||||
<Grid>
|
||||
<Grid.Column width={4}>
|
||||
<Menu fluid vertical tabular>
|
||||
{osNames.map((os: string) => {
|
||||
return (
|
||||
<Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
|
||||
)
|
||||
})}
|
||||
|
||||
|
||||
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
|
||||
|
||||
<Grid.Column stretched width={12}>
|
||||
<Segment vertical>
|
||||
{this.state.activeItem} Download Page
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
35
src/ts/@overflow/temp/react/components/Components.tsx
Normal file
35
src/ts/@overflow/temp/react/components/Components.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import * as React from 'react';
|
||||
import { Probes } from './Probes';
|
||||
import { NoauthProbes } from './NoauthProbes';
|
||||
import { SensorConfiguration } from './SensorConfiguration';
|
||||
import { Targets } from './Targets';
|
||||
import { Sensors } from './Sensors';
|
||||
import { Tab } from './commons/Tab';
|
||||
|
||||
// import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
|
||||
|
||||
export class Components extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const items = [
|
||||
{ name: 'Probes', child: <Probes /> },
|
||||
{ name: 'NoauthProbes', child: <NoauthProbes /> },
|
||||
{ name: 'Targets', child: <Targets /> },
|
||||
{ name: 'SensorConfiguration', child: <SensorConfiguration /> },
|
||||
{ name: 'Sensors', child: <Sensors /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<Tab panes={items} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
83
src/ts/@overflow/temp/react/components/DiscoveryDetails.tsx
Normal file
83
src/ts/@overflow/temp/react/components/DiscoveryDetails.tsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import * as React from 'react';
|
||||
import { Button, Modal, Checkbox, Header, Container } from 'semantic-ui-react';
|
||||
import { DiscoveryProbe } from './DiscoveryProbe';
|
||||
import { DiscoveryTable } from './DiscoveryTable';
|
||||
|
||||
export class DiscoveryDetails extends React.Component<any, any> {
|
||||
|
||||
private probeTemp: any;
|
||||
private submitData: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.handleProbeChange.bind(this);
|
||||
this.state = {
|
||||
startPopup:false
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentWillMount() {
|
||||
this.probeTemp =
|
||||
{
|
||||
"id": "11",
|
||||
"metaProbeStatus": {
|
||||
"name": "STARTED"
|
||||
},
|
||||
"domain": {
|
||||
"name": "overFlow's domain111"
|
||||
},
|
||||
"host": {
|
||||
"ip": "192.168.1.103",
|
||||
"mac": "44:8a:5b:44:8c:e8",
|
||||
"os": "Ubuntu 17.04",
|
||||
"name": "?????"
|
||||
},
|
||||
"createAt": "2017-07-12",
|
||||
"probeKey": "AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||
"description": "description1111111111",
|
||||
"lastPollingAt": "2017-07-12 14:20",
|
||||
"nextPollingAt": "2017-07-12 14:30"
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
handleProbeChange(obj: any) {
|
||||
console.log(obj)
|
||||
this.setState({ startPopup:true });
|
||||
this.submitData = obj;
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
console.log(this.submitData)
|
||||
}
|
||||
|
||||
handleCancel= () => this.setState({ startPopup: false });
|
||||
|
||||
handlePopupClose = () => this.setState({ startPopup: false });
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing> Discovery Details</Header>
|
||||
<DiscoveryProbe probe={this.probeTemp}/>
|
||||
<br />
|
||||
<DiscoveryTable onProbeChange={this.handleProbeChange.bind(this)} />
|
||||
|
||||
<Modal size='small' open={this.state.startPopup} onClose={this.handlePopupClose}>
|
||||
<Modal.Header>Change your password Enter email address.</Modal.Header>
|
||||
<Modal.Content >
|
||||
<Checkbox label='IP' />
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button onClick={this.handleSubmit.bind(this)} basic color='blue' > Submit </Button>
|
||||
<Button onClick={this.handleCancel}> Cancel </Button>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
|
||||
</Container>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
81
src/ts/@overflow/temp/react/components/DiscoveryProbe.tsx
Normal file
81
src/ts/@overflow/temp/react/components/DiscoveryProbe.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Label, Header, Container, Icon } from 'semantic-ui-react';
|
||||
|
||||
|
||||
export class DiscoveryProbe extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
// componentWillMount() {
|
||||
// console.log(this.props.probe);
|
||||
// }
|
||||
|
||||
handle() {
|
||||
this.props.onProbeChange();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h4' color='grey'> Probe</Header>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell width={4} collapsing>
|
||||
<Header size='small'>Domain</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell width={12}>{this.props.probe.domain.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Status</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Host IP</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.host.ip}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Host Name</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>Geek`s Ubuntu</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Authorized at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.createAt}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Description</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.description}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Last polling at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.lastPollingAt}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Next polling at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.nextPollingAt}</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
129
src/ts/@overflow/temp/react/components/DiscoveryTable.tsx
Normal file
129
src/ts/@overflow/temp/react/components/DiscoveryTable.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import * as React from 'react';
|
||||
import {Table, Button, Input, InputProps, ButtonProps, Dropdown, Container, Header } from 'semantic-ui-react';
|
||||
|
||||
export class DiscoveryTable extends React.Component<any, any> {
|
||||
|
||||
private serviceTemp: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
startIp: null,
|
||||
endIP: null,
|
||||
excludeIp: null,
|
||||
startPort: null,
|
||||
endPort: null
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.serviceTemp = [
|
||||
{ key: 'http', text: 'HTTP', value: 'http' },
|
||||
{ key: 'ftp', text: 'FTP', value: 'ftp' },
|
||||
{ key: 'snmp', text: 'SNMP', value: 'snmp' },
|
||||
{ key: 'oracle', text: 'Oracle', value: 'oracle' },
|
||||
{ key: 'mysql', text: 'MySQL', value: 'mysql' },
|
||||
{ key: 'wmi', text: 'WMI', value: 'wmi' },
|
||||
{ key: 'sql_server', text: 'SQL Server', value: 'sql_server' },
|
||||
{ key: 'stmp', text: 'STMP', value: 'stmp' },
|
||||
{ key: 'imap', text: 'IMAP', value: 'imap' },
|
||||
{ key: 'ssh', text: 'SSH', value: 'ssh' },
|
||||
{ key: 'telnet', text: 'Telnet', value: 'telnet' },
|
||||
{ key: 'casandra', text: 'Casandra', value: 'casandra' },
|
||||
{ key: 'mongodb', text: 'mongoDB', value: 'mongodb' },
|
||||
{ key: 'rmi', text: 'RMI', value: 'rmi' }
|
||||
];
|
||||
}
|
||||
|
||||
handleInput(event: React.SyntheticEvent<HTMLInputElement>, data: InputProps) {
|
||||
// console.log( data.value);
|
||||
// console.log( event.target);
|
||||
// console.log(data.tabIndex);
|
||||
|
||||
let value: string = data.value;
|
||||
switch (data.tabIndex) {
|
||||
case '1':{
|
||||
this.setState({
|
||||
startIp: value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case '2':{
|
||||
this.setState({
|
||||
endIP: value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case '3':{
|
||||
this.setState({
|
||||
excludeIp: value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case '4':{
|
||||
this.setState({
|
||||
startPort: value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case '5':{
|
||||
this.setState({
|
||||
endPort: value,
|
||||
});
|
||||
break;
|
||||
}
|
||||
default:{
|
||||
console.log("Error");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(this.state.startPort);
|
||||
}
|
||||
|
||||
discoveryStartHandler(event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps) {
|
||||
this.props.onProbeChange(this.state);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h4' color='grey'> Discovery</Header>
|
||||
<Table>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell width={4}><Header size='small'>Zone CIDR</Header></Table.Cell>
|
||||
<Table.Cell width={12}><Input fluid disabled placeholder='Start IP' defaultValue='192.168.1.0/24' /></Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell><Header size='small'>IP Range</Header></Table.Cell>
|
||||
<Table.Cell>
|
||||
<Input tabIndex='1' placeholder='Start IP' onChange={this.handleInput.bind(this)} />
|
||||
<Input tabIndex='2' placeholder='End IP' onChange={this.handleInput.bind(this)} />
|
||||
<Input tabIndex='3' placeholder='Exclude IP' onChange={this.handleInput.bind(this)} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell><Header size='small'>Port Range</Header></Table.Cell>
|
||||
<Table.Cell>
|
||||
<Input tabIndex='4' placeholder='Start Port' onChange={this.handleInput.bind(this)} />
|
||||
<Input tabIndex='5' placeholder='End Port' onChange={this.handleInput.bind(this)} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell><Header size='small'>Service</Header></Table.Cell>
|
||||
<Table.Cell>
|
||||
<Dropdown placeholder='Service' fluid multiple selection options={this.serviceTemp} />
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell><Header size='small'>End Port</Header></Table.Cell>
|
||||
<Table.Cell><Input tabIndex='6' placeholder='End Port' onChange={this.handleInput.bind(this)} /></Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<Button floated='right' primary onClick={this.discoveryStartHandler.bind(this)}> Start </Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
135
src/ts/@overflow/temp/react/components/NoauthProbes.tsx
Normal file
135
src/ts/@overflow/temp/react/components/NoauthProbes.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Checkbox, Button, Header, Container } 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 (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Noauth Probes</Header>
|
||||
<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>
|
||||
|
||||
<Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
|
||||
<Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
107
src/ts/@overflow/temp/react/components/ProbeDetails.tsx
Normal file
107
src/ts/@overflow/temp/react/components/ProbeDetails.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import * as React from 'react';
|
||||
import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
|
||||
import { TargetTable } from './Targets';
|
||||
|
||||
export class ProbeDetails extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<ProbeBasicInfo probe={this.props.probe} />
|
||||
<TargetTable />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ProbeBasicInfo extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleStartStop(event: any, data: any) {
|
||||
console.log(event);
|
||||
}
|
||||
handleDiscovery(event: any, data: any) {
|
||||
alert('Discovery');
|
||||
}
|
||||
|
||||
handleBack(event: any, data: any) {
|
||||
this.props.onBack();
|
||||
}
|
||||
|
||||
|
||||
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() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Probe Info</Header>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Domain</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Status</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Host IP</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Host Name</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Authorized at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Description</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.description}</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
|
||||
<Button content='List' icon='list' labelPosition='left' onClick={this.handleBack.bind(this)} />
|
||||
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
|
||||
{this.showStartStopBtn()}
|
||||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
222
src/ts/@overflow/temp/react/components/Probes.tsx
Normal file
222
src/ts/@overflow/temp/react/components/Probes.tsx
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-react';
|
||||
import { ProbeDetails } from './ProbeDetails';
|
||||
import { ListContainer } from './commons/ListContainer';
|
||||
|
||||
export class Probes extends React.Component<any, any> {
|
||||
|
||||
private data: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
selected: null,
|
||||
isDetail: false,
|
||||
list: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.data = [
|
||||
{
|
||||
"id": "11",
|
||||
"metaProbeStatus": {
|
||||
"name": "STARTED"
|
||||
},
|
||||
"domain": {
|
||||
"name": "asus"
|
||||
},
|
||||
"probeKey": "1AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||
"description": "description1111111111",
|
||||
},
|
||||
{
|
||||
"id": "22",
|
||||
"metaProbeStatus": {
|
||||
"name": "STOPPED"
|
||||
},
|
||||
"domain": {
|
||||
"name": "ottugi"
|
||||
},
|
||||
"probeKey": "2AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||
"description": "description22222222",
|
||||
},
|
||||
{
|
||||
"id": "33",
|
||||
"metaProbeStatus": {
|
||||
"name": "STOPPED"
|
||||
},
|
||||
"domain": {
|
||||
"name": "lg"
|
||||
},
|
||||
"probeKey": "3AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||
"description": "description33333",
|
||||
},
|
||||
{
|
||||
"id": "44",
|
||||
"metaProbeStatus": {
|
||||
"name": "STARTED"
|
||||
},
|
||||
"domain": {
|
||||
"name": "apple"
|
||||
},
|
||||
"probeKey": "4AGBLKDFJ2452ASDGFL2KWJLKSDJ",
|
||||
"description": "description4444",
|
||||
},
|
||||
];
|
||||
this.setState({
|
||||
list: this.data,
|
||||
});
|
||||
}
|
||||
|
||||
checkCellStatus(status: any): boolean {
|
||||
if (status.name === 'STOPPED') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
handleSelect(selectedProbe: object) {
|
||||
this.setState({
|
||||
selected: selectedProbe,
|
||||
isDetail: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleSearch(result: object[]) {
|
||||
this.setState({
|
||||
list: result,
|
||||
});
|
||||
}
|
||||
|
||||
handleFilter(filterStr: string) {
|
||||
if (filterStr === null) {
|
||||
this.setState({
|
||||
list: this.data,
|
||||
});
|
||||
return;
|
||||
}
|
||||
let founds = new Array();
|
||||
for (let probe of this.data) {
|
||||
if (probe.metaProbeStatus.name.indexOf(filterStr) !== -1) {
|
||||
founds.push(probe);
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
list: founds,
|
||||
});
|
||||
}
|
||||
|
||||
renderRows() {
|
||||
if (this.state.list.length === 0) {
|
||||
return <Table.Row error >
|
||||
<Table.Cell textAlign='center' colSpan='5'>No results found.</Table.Cell>
|
||||
</Table.Row>;
|
||||
}
|
||||
return this.state.list.map((probe: any, index: number) => (
|
||||
<Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
|
||||
<Table.Cell >{probe.domain.name}</Table.Cell>
|
||||
<Table.Cell>{index}</Table.Cell>
|
||||
<Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
|
||||
<Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
|
||||
</Table.Row>
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
if (this.state.isDetail) {
|
||||
return <ProbeDetails probe={this.state.selected} onBack={() => this.setState({ isDetail: false })} />;
|
||||
}
|
||||
let probeList =
|
||||
<Container fluid>
|
||||
<Table selectable striped>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{this.renderRows()}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Container>;
|
||||
|
||||
return (
|
||||
<ListContainer
|
||||
contents={probeList}
|
||||
data={this.data}
|
||||
onSearch={this.handleSearch.bind(this)}
|
||||
filter={<ProbeFilter onFilter={this.handleFilter.bind(this)} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ProbeFilter extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
status: null,
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(e: any, data: any) {
|
||||
this.setState({
|
||||
status: data.value,
|
||||
});
|
||||
this.props.onFilter(data.value);
|
||||
}
|
||||
handleReset(e: any, data: any) {
|
||||
this.setState({
|
||||
status: null,
|
||||
});
|
||||
this.props.onFilter(null);
|
||||
}
|
||||
|
||||
render() {
|
||||
//todo. getting MetaProbeStatus
|
||||
let metaProbeStatus = [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "STARTED",
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "STOPPED",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Form>
|
||||
<Container fluid>
|
||||
<Button size='mini' floated='right' basic content='Reset' onClick={this.handleReset.bind(this)} />
|
||||
<Form.Field>
|
||||
<b>Status</b>
|
||||
</Form.Field>
|
||||
|
||||
{metaProbeStatus.map((item: any, index: number) => (
|
||||
<Form.Field key={index}>
|
||||
<Checkbox
|
||||
radio
|
||||
label={item.name}
|
||||
name='status'
|
||||
value={item.name}
|
||||
checked={this.state.status === item.name}
|
||||
onChange={this.handleChange.bind(this)}
|
||||
/>
|
||||
</Form.Field>
|
||||
))}
|
||||
</Container>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
429
src/ts/@overflow/temp/react/components/SensorConfiguration.tsx
Normal file
429
src/ts/@overflow/temp/react/components/SensorConfiguration.tsx
Normal file
|
|
@ -0,0 +1,429 @@
|
|||
import * as React from 'react';
|
||||
import { Icon, Step, Button, Table, Radio, Form, Container, Checkbox } from 'semantic-ui-react';
|
||||
import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion, Loader } 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 />, <ETCSelector />];
|
||||
|
||||
return (
|
||||
<ConfigStepper steps={steps} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class ConfigStepper 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: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
|
||||
let step: number = this.state.currentStep;
|
||||
if (step <= 1) {
|
||||
step = 1;
|
||||
} else {
|
||||
step--;
|
||||
}
|
||||
this.setState({
|
||||
currentStep: step,
|
||||
});
|
||||
}
|
||||
handleNext(event: React.SyntheticEvent<HTMLAnchorElement>, data: object) {
|
||||
let step: number = this.state.currentStep;
|
||||
if (step >= this.props.steps.length + 1) {
|
||||
step = this.props.steps.length + 1;
|
||||
} else {
|
||||
step++;
|
||||
}
|
||||
this.setState({
|
||||
currentStep: step,
|
||||
});
|
||||
if (step === this.props.steps.length + 1) {
|
||||
console.log("Done");
|
||||
}
|
||||
}
|
||||
|
||||
showContent() {
|
||||
return this.props.steps[this.state.currentStep - 1];
|
||||
}
|
||||
|
||||
checkPrevDisabled(): boolean {
|
||||
if (this.state.currentStep <= 1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
checkNextDisabled(): boolean {
|
||||
if (this.state.currentStep === this.props.steps.length + 1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Step.Group fluid>
|
||||
<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'> {/* floated 사용시 레이아웃 깨지는 현상 */}
|
||||
<Button content='Prev' icon='left arrow' labelPosition='left' onClick={this.handlePrev.bind(this)} disabled={this.checkPrevDisabled()} />
|
||||
<Button.Or />
|
||||
<Button content='Next' icon='right arrow' labelPosition='right' positive onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
|
||||
</Button.Group>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class CrawlerSelector extends React.Component<any, any> {
|
||||
|
||||
private crawlers: object[];
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
selected: null,
|
||||
isInstalling: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.getMetaCrawlers();
|
||||
}
|
||||
|
||||
getMetaCrawlers() {
|
||||
//todo. getting MetaCrawler list
|
||||
let 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 crawlers) {
|
||||
var option = {
|
||||
key: crawler.id,
|
||||
text: crawler.name,
|
||||
value: crawler.name,
|
||||
icon: 'check', //or close?
|
||||
};
|
||||
crawlerOptions.push(option);
|
||||
}
|
||||
|
||||
this.crawlers = crawlerOptions;
|
||||
}
|
||||
|
||||
handleCrawlerSelection(e: any, data: any) {
|
||||
this.setState({
|
||||
selected: data.value,
|
||||
});
|
||||
this.checkInstall();
|
||||
}
|
||||
|
||||
checkInstall() {
|
||||
this.setState({
|
||||
isInstalling: true,
|
||||
});
|
||||
let that = this;
|
||||
setInterval(() => {
|
||||
this.setState({
|
||||
isInstalling: false,
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
<Segment raised>
|
||||
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
|
||||
<Icon name='checkmark' /> Choose a Crawler type.
|
||||
<br />
|
||||
<br />
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Column width='4'>
|
||||
<Dropdown openOnFocus
|
||||
placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<CrawlerAuthInputs crawler={this.state.selected} />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class CrawlerAuthInputs extends React.Component<any, any> {
|
||||
|
||||
private data: object[];
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
isVerifying: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.data = [
|
||||
{
|
||||
"id": "1",
|
||||
"metaInputType": {
|
||||
"id": "1",
|
||||
"name": "Text",
|
||||
},
|
||||
"name": "Community",
|
||||
"required": "true",
|
||||
"defaultValue": "public",
|
||||
"keyName": "Community",
|
||||
"keyValue": "",
|
||||
"pattern": "regex..."
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"metaInputType": {
|
||||
"id": "2",
|
||||
"name": "Radio",
|
||||
},
|
||||
"name": "AuthType",
|
||||
"required": "true",
|
||||
"defaultValue": "",
|
||||
"keyName": "AuthType",
|
||||
"keyValue": "MD5|SHA",
|
||||
"pattern": "regex..."
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
handleVerify() {
|
||||
this.setState({
|
||||
isVerifying: true,
|
||||
});
|
||||
}
|
||||
|
||||
renderRow(item: any, index: number) {
|
||||
let elem = new Array();
|
||||
if (item.metaInputType.name === 'Text') {
|
||||
elem.push(<Input placeholder={item.defaultValue} key={0} />);
|
||||
}
|
||||
else if (item.metaInputType.name === 'Radio') {
|
||||
let itemValues = item.keyValue.split('|');
|
||||
let idx = 0;
|
||||
for (let itemValue of itemValues) {
|
||||
elem.push(<Radio
|
||||
key={idx++}
|
||||
label={itemValue}
|
||||
name='radioGroup'
|
||||
value={itemValue}
|
||||
/>);
|
||||
}
|
||||
}
|
||||
|
||||
return <Table.Row key={index}>
|
||||
<Table.Cell collapsing>{item.keyName}</Table.Cell>
|
||||
<Table.Cell >{elem}</Table.Cell>
|
||||
</Table.Row >;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.crawler === null) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<Table basic='very' celled collapsing >
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{this.data.map((item: any, index: number) => (
|
||||
this.renderRow(item, index)
|
||||
))}
|
||||
</Table.Body>
|
||||
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell />
|
||||
<Table.HeaderCell colSpan='2'>
|
||||
<Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class SensorItemSelector extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Accordion exclusive={false} styled>
|
||||
<Accordion.Title>
|
||||
<Icon name='dropdown' />
|
||||
<Checkbox label='CPU' />
|
||||
</Accordion.Title>
|
||||
<Accordion.Content>
|
||||
<Checkbox label='cpu.free' /><br />
|
||||
<Checkbox label='cpu.free' /><br />
|
||||
</Accordion.Content>
|
||||
|
||||
<Accordion.Title>
|
||||
<Icon name='dropdown' />
|
||||
<Checkbox label='MEM' />
|
||||
</Accordion.Title>
|
||||
<Accordion.Content>
|
||||
<Checkbox label='cpu.free' /><br />
|
||||
<Checkbox label='cpu.free' /><br />
|
||||
</Accordion.Content>
|
||||
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ETCSelector extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
interval: 5,
|
||||
};
|
||||
}
|
||||
handleIntervalChange = (e: any, { value }: any) => this.setState({ interval: value });
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table celled={true}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
Interval
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
label='5 seconds'
|
||||
name='radioGroup'
|
||||
value='5'
|
||||
checked={this.state.interval === '5'}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
label='10 seconds'
|
||||
name='radioGroup'
|
||||
value='10'
|
||||
checked={this.state.interval === '10'}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
label='15 seconds'
|
||||
name='radioGroup'
|
||||
value='15'
|
||||
checked={this.state.interval === '15'}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
Notification
|
||||
</Table.Cell>
|
||||
<Table.Cell></Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
Warn Condition
|
||||
</Table.Cell>
|
||||
<Table.Cell></Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
110
src/ts/@overflow/temp/react/components/SensorDetails.tsx
Normal file
110
src/ts/@overflow/temp/react/components/SensorDetails.tsx
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import * as React from 'react';
|
||||
import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
|
||||
import { DetailContainer } from './commons/DetailContainer';
|
||||
import { SensorItems } from './SensorItems';
|
||||
|
||||
export class SensorDetails extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const items = [
|
||||
{ name: 'Info', child: <Button sensor={this.props.sensor}/> },
|
||||
{ name: 'Sensor Items', child: <SensorItems sensor={this.props.sensor}/> },
|
||||
];
|
||||
const data = {'probe':this.props.probe};
|
||||
return (
|
||||
<DetailContainer panes={items} data={data}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class SensorBasicInfo extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleStartStop(event: any, data: any) {
|
||||
console.log(event);
|
||||
}
|
||||
handleDiscovery(event: any, data: any) {
|
||||
alert('Discovery');
|
||||
}
|
||||
|
||||
handleBack(event: any, data: any) {
|
||||
this.props.onBack();
|
||||
}
|
||||
|
||||
|
||||
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() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Sensor Details</Header>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Domain</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Status</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Host IP</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Host Name</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Authorized at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Description</Header>
|
||||
</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.bind(this)} />
|
||||
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
|
||||
{this.showStartStopBtn()}
|
||||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
27
src/ts/@overflow/temp/react/components/SensorItems.tsx
Normal file
27
src/ts/@overflow/temp/react/components/SensorItems.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Button, Header, Container } from 'semantic-ui-react';
|
||||
|
||||
export class SensorItems extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Sensor Item</Header>
|
||||
Sensor Item List
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
134
src/ts/@overflow/temp/react/components/Sensors.tsx
Normal file
134
src/ts/@overflow/temp/react/components/Sensors.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Button, Header, Container } from 'semantic-ui-react';
|
||||
import { SensorDetails } from './SensorDetails';
|
||||
|
||||
export class Sensors extends React.Component<any, any> {
|
||||
|
||||
private data: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
selected: null,
|
||||
isDetail: false, //temp
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.data = [
|
||||
{
|
||||
"id": "111",
|
||||
"metaSensorStatus": {
|
||||
"name": "NORMAL"
|
||||
},
|
||||
"target": {
|
||||
"id": "1",
|
||||
},
|
||||
"metaCrawler": {
|
||||
"name": "WMI",
|
||||
"description": "WMI description",
|
||||
},
|
||||
"crawlerInputItems": "json value",
|
||||
"description": "description1111111111",
|
||||
},
|
||||
{
|
||||
"id": "222",
|
||||
"metaSensorStatus": {
|
||||
"name": "NORMAL"
|
||||
},
|
||||
"target": {
|
||||
"id": "1",
|
||||
},
|
||||
"metaCrawler": {
|
||||
"name": "SNMP",
|
||||
"description": "SNMP description",
|
||||
},
|
||||
"crawlerInputItems": "json value",
|
||||
"description": "description1111111111",
|
||||
},
|
||||
{
|
||||
"id": "333",
|
||||
"metaSensorStatus": {
|
||||
"name": "NORMAL"
|
||||
},
|
||||
"target": {
|
||||
"id": "1",
|
||||
},
|
||||
"metaCrawler": {
|
||||
"name": "JMX",
|
||||
"description": "JMX description",
|
||||
},
|
||||
"crawlerInputItems": "json value",
|
||||
"description": "description1111111111",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
handleSelect(selectedSensor: object) {
|
||||
this.setState({
|
||||
selected: selectedSensor,
|
||||
isDetail: true,
|
||||
});
|
||||
}
|
||||
|
||||
checkCellStatus(status: any): boolean {
|
||||
if (status.name === 'STOPPED') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
showStartStopBtn(status: any) {
|
||||
if (status.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} />;
|
||||
}
|
||||
}
|
||||
|
||||
handleStartStop(event: any, data: any) {
|
||||
console.log(event);
|
||||
}
|
||||
handleAddSensor() {
|
||||
console.log('adding a sensor');
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.isDetail) {
|
||||
return <SensorDetails sensor={this.state.selected} />;
|
||||
}
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Sensors</Header>
|
||||
<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'}>Crawler</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
|
||||
<Table.HeaderCell textAlign={'center'}>Item count</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{this.data.map((sensor: any, index: number) => (
|
||||
<Table.Row key={index} onClick={this.handleSelect.bind(this, sensor)}>
|
||||
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
|
||||
<Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>{sensor.metaSensorStatus.name}</Table.Cell>
|
||||
<Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
|
||||
<Table.Cell>{sensor.description}</Table.Cell>
|
||||
<Table.Cell>to do</Table.Cell>
|
||||
{/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { Table } from 'semantic-ui-react';
|
||||
|
||||
const tableData = [
|
||||
{ name: 'John', age: 15, gender: 'Male' },
|
||||
{ name: 'Amber', age: 40, gender: 'Female' },
|
||||
{ name: 'Leslie', age: 25, gender: 'Female' },
|
||||
{ name: 'Ben', age: 70, gender: 'Male' },
|
||||
];
|
||||
|
||||
export class TableExampleSortable extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
column: null,
|
||||
data: tableData,
|
||||
direction: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
handleSort = (clickedColumn:any) => () => {
|
||||
const { column, data, direction } = this.state
|
||||
|
||||
if (column !== clickedColumn) {
|
||||
this.setState({
|
||||
column: clickedColumn,
|
||||
data: _.sortBy(data, [clickedColumn]),
|
||||
direction: 'ascending',
|
||||
});
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
this.setState({
|
||||
data: data.reverse(),
|
||||
direction: direction === 'ascending' ? 'descending' : 'ascending',
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
const { column, data, direction } = this.state;
|
||||
|
||||
return (
|
||||
<Table sortable celled fixed>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
|
||||
Name
|
||||
</Table.HeaderCell>
|
||||
<Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
|
||||
Age
|
||||
</Table.HeaderCell>
|
||||
<Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
|
||||
Gender
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{_.map(data, ({ age, gender, name }) => (
|
||||
<Table.Row key={name}>
|
||||
<Table.Cell>{name}</Table.Cell>
|
||||
<Table.Cell>{age}</Table.Cell>
|
||||
<Table.Cell>{gender}</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
)
|
||||
}
|
||||
}
|
||||
102
src/ts/@overflow/temp/react/components/TargetDetails.tsx
Normal file
102
src/ts/@overflow/temp/react/components/TargetDetails.tsx
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import * as React from 'react';
|
||||
import { Button, Table, Header, Container } from 'semantic-ui-react';
|
||||
import { Sensors } from './Sensors';
|
||||
import { DetailContainer } from './commons/DetailContainer';
|
||||
|
||||
|
||||
export class TargetDetails extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleBack() {
|
||||
}
|
||||
|
||||
handleRemoveTarget() {
|
||||
alert('remove');
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const items = [
|
||||
{ name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
|
||||
{ name: 'Sensors', child: <Sensors probe={this.props.probe} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
// <DetailContainer panes={items}/>
|
||||
<Container fluid>
|
||||
<TargetBasicInfo probe={this.props.probe} />
|
||||
<Sensors probe={this.props.probe} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class TargetBasicInfo extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
}
|
||||
|
||||
handleRemoveTarget() {
|
||||
alert('remove');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Target Info</Header>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Name</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
???
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Type</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
????
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Sensor count</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
???
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Header size='small'>Created at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
???
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
|
||||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
163
src/ts/@overflow/temp/react/components/Targets.tsx
Normal file
163
src/ts/@overflow/temp/react/components/Targets.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import * as React from 'react';
|
||||
import { Table, Button, Modal, Input, Header, Container } from 'semantic-ui-react';
|
||||
import { TargetDetails } from './TargetDetails';
|
||||
|
||||
export class Targets extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
openAddTarget: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
handleAddTarget() {
|
||||
this.setState({
|
||||
openAddTarget: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const options = [
|
||||
{ key: 'm', text: 'Male', value: 'male' },
|
||||
{ key: 'f', text: 'Female', value: 'female' },
|
||||
];
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
{/*search bar */}
|
||||
<TargetTable />
|
||||
<br />
|
||||
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
|
||||
<br /><br /><br /><br /><br /><br /><br /><br /><br />
|
||||
<TargetDetails target={this.state.selected} />
|
||||
|
||||
<Modal
|
||||
open={this.state.openAddTarget}
|
||||
>
|
||||
<Modal.Header>
|
||||
Adding a Target
|
||||
</Modal.Header>
|
||||
<Modal.Content>
|
||||
<p>contents</p>
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
|
||||
<Button positive labelPosition='right' icon='checkmark' content='Done' />
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class TargetTable extends React.Component<any, any> {
|
||||
private data: any;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
selected: null,
|
||||
list: [],
|
||||
};
|
||||
}
|
||||
handleSelect(selectedTarget: object) {
|
||||
this.setState({
|
||||
selected: selectedTarget,
|
||||
});
|
||||
}
|
||||
|
||||
handleSearch(e: any, data: any) {
|
||||
let searchWord = data.value.toLowerCase();
|
||||
let foundTarget = new Array();
|
||||
for(let target of this.data) {
|
||||
let typeName = target.infra.metaInfraType.name.toLowerCase();
|
||||
if(typeName.indexOf(searchWord) !== -1) {
|
||||
foundTarget.push(target);
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
list: foundTarget,
|
||||
});
|
||||
}
|
||||
|
||||
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": "Host",
|
||||
"createDate": "424252"
|
||||
},
|
||||
"childId": "1",
|
||||
"createDate": "13345235"
|
||||
},
|
||||
},
|
||||
];
|
||||
this.setState({
|
||||
list: this.data,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Targets</Header>
|
||||
<Input icon='search' placeholder='Search...' onChange={this.handleSearch.bind(this)} />
|
||||
<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'}>Version</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{this.state.list.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>todo</Table.Cell>
|
||||
<Table.Cell>todo</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
165
src/ts/@overflow/temp/react/components/TopBar.tsx
Normal file
165
src/ts/@overflow/temp/react/components/TopBar.tsx
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
import *as React from 'react'
|
||||
import {
|
||||
Dropdown, Icon, Menu, Label,
|
||||
|
||||
Sidebar, Segment, Button, Image, Header,
|
||||
} from 'semantic-ui-react'
|
||||
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
import * as History from 'history';
|
||||
|
||||
const options = [
|
||||
{ key: 'angular', text: 'Angular', value: 'angular' },
|
||||
{ key: 'css', text: 'CSS', value: 'css' },
|
||||
{ key: 'design', text: 'Graphic Design', value: 'design' },
|
||||
{ key: 'ember', text: 'Ember', value: 'ember' },
|
||||
{ key: 'html', text: 'HTML', value: 'html' },
|
||||
{ key: 'ia', text: 'Information Architecture', value: 'ia' },
|
||||
{ key: 'javascript', text: 'Javascript', value: 'javascript' },
|
||||
{ key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
|
||||
{ key: 'meteor', text: 'Meteor', value: 'meteor' },
|
||||
{ key: 'node', text: 'NodeJS', value: 'node' },
|
||||
{ key: 'plumbing', text: 'Plumbing', value: 'plumbing' },
|
||||
{ key: 'python', text: 'Python', value: 'python' },
|
||||
{ key: 'rails', text: 'Rails', value: 'rails' },
|
||||
{ key: 'react', text: 'React', value: 'react' },
|
||||
{ key: 'repair', text: 'Kitchen Repair', value: 'repair' },
|
||||
{ key: 'ruby', text: 'Ruby', value: 'ruby' },
|
||||
{ key: 'ui', text: 'UI Design', value: 'ui' },
|
||||
{ key: 'ux', text: 'User Experience', value: 'ux' },
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export class TopBar extends React.Component<any, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
notification_visible: false,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
{/*<h1>React Redux sample</h1>
|
||||
|
||||
<li><Link to='/test' >TopBar</Link></li>
|
||||
<li><Link to='/test2' >Signup</Link></li>
|
||||
<li><Link to='/test3' >SignIn</Link></li>
|
||||
<li><Link to='/test4' >PWChange</Link></li>
|
||||
<li><Link to='/test5' >ProbeDown</Link></li>
|
||||
<li><Link to='/test6' >DiscoveryDetails</Link></li>
|
||||
|
||||
<li><Link to='/test14' >Insanity</Link></li>*/}
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<div>
|
||||
<Menu inverted borderless size='tiny'>
|
||||
<Menu.Item> overFlow </Menu.Item>
|
||||
<Menu.Item href='/' > Home </Menu.Item>
|
||||
<Dropdown text='Monitoring' pointing className='link item'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Header icon='angle right' content='Probe'/>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Download </Dropdown.Item>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown text='Infrastructure' pointing className='link item'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item> Maps </Dropdown.Item>
|
||||
<Dropdown.Item>Targets</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<Menu.Item link> Dashboard </Menu.Item>
|
||||
<Menu.Item link> Metrics </Menu.Item>
|
||||
<Menu.Item link> Alert </Menu.Item>
|
||||
<Menu.Item link> History </Menu.Item>
|
||||
<Dropdown text='Custom' pointing className='link item'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
|
||||
<Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
||||
|
||||
<Menu.Item position='right' link>
|
||||
<Icon name='setting' size='large' />
|
||||
</Menu.Item>
|
||||
<Menu.Item onClick={() => {
|
||||
this.props.onSidebar();
|
||||
}}>
|
||||
<Label color='teal' horizontal>22</Label>
|
||||
</Menu.Item>
|
||||
<Menu.Item link>
|
||||
<Dropdown icon='user' className='ui pointing dropdown top right'>
|
||||
<Dropdown.Menu >
|
||||
<Dropdown.Item text='Log out' />
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item text='Settings' />
|
||||
<Dropdown.Item text='- Profile' />
|
||||
<Dropdown.Item text='- Preferences' />
|
||||
<Dropdown.Item text='- Change Password' />
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Item text='Help' />
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Menu.Item>
|
||||
|
||||
|
||||
</Menu>
|
||||
|
||||
|
||||
{/*<Sidebar.Pushable as={Segment} >
|
||||
<Sidebar
|
||||
as={Menu}
|
||||
animation='overlay'
|
||||
width='thin'
|
||||
direction='right'
|
||||
visible={this.state.notification_visible}
|
||||
icon='labeled'
|
||||
vertical
|
||||
inverted
|
||||
|
||||
>
|
||||
<Menu.Item name='home'>
|
||||
<Icon name='home' />
|
||||
Home
|
||||
</Menu.Item>
|
||||
<Menu.Item name='gamepad'>
|
||||
<Icon name='gamepad' />
|
||||
Games
|
||||
</Menu.Item>
|
||||
<Menu.Item name='camera'>
|
||||
<Icon name='camera' />
|
||||
Channels
|
||||
</Menu.Item>
|
||||
</Sidebar>
|
||||
<Sidebar.Pusher >
|
||||
<Segment basic >
|
||||
|
||||
</Segment>
|
||||
</Sidebar.Pusher>
|
||||
</Sidebar.Pushable>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import * as React from 'react';
|
||||
import { Grid, Menu, Segment } from 'semantic-ui-react';
|
||||
|
||||
export class DetailContainer extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
active: 0,
|
||||
};
|
||||
}
|
||||
|
||||
showContents() {
|
||||
return this.props.panes[this.state.active].child;
|
||||
}
|
||||
|
||||
handleClick(index: number) {
|
||||
this.setState({
|
||||
active: index,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const activeItem = this.state.activeItem;
|
||||
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Column width={4} >
|
||||
<Menu pointing secondary vertical >
|
||||
{this.props.panes.map((pane: any, index: number) => (
|
||||
<Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
|
||||
))}
|
||||
</Menu>
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column stretched width={12} >
|
||||
<Segment basic>
|
||||
{this.showContents()}
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import * as React from 'react';
|
||||
import { Grid, Input, Form, Checkbox, Divider } from 'semantic-ui-react';
|
||||
|
||||
export class ListContainer extends React.Component<any, any> {
|
||||
|
||||
private found: boolean = false;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
handleSearch(e: any, data: any) {
|
||||
let searchWord = data.value;
|
||||
let items: object[];
|
||||
items = this.props.data;
|
||||
let item: any;
|
||||
|
||||
let result = new Array();
|
||||
for (item of items) {
|
||||
this.search(item, searchWord);
|
||||
if (this.found) {
|
||||
result.push(item);
|
||||
}
|
||||
this.found = false;
|
||||
}
|
||||
|
||||
this.props.onSearch(result);
|
||||
}
|
||||
|
||||
handleSearchInput(e: any, data: any) {
|
||||
this.setState({
|
||||
searchWord: data.value,
|
||||
});
|
||||
}
|
||||
|
||||
search(item: any, searchWord: string) {
|
||||
let key: any;
|
||||
for (key in item) {
|
||||
if (this.isString(item[key])) {
|
||||
if (item[key].toLowerCase().indexOf(searchWord.toLowerCase()) !== -1) {
|
||||
this.found = true;
|
||||
}
|
||||
} else {
|
||||
this.search(item[key], searchWord);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isString(val: any): boolean {
|
||||
if (typeof val === 'string') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Grid>
|
||||
<Grid.Column width={4}>
|
||||
<Input icon='search' label={{ icon: 'asterisk' }}
|
||||
labelPosition='left corner' placeholder='Search...' onChange={this.handleSearch.bind(this)} fluid/>
|
||||
<Divider />
|
||||
{this.props.filter}
|
||||
</Grid.Column>
|
||||
<Grid.Column stretched width={12} >
|
||||
{this.props.contents}
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
38
src/ts/@overflow/temp/react/components/commons/Tab.tsx
Normal file
38
src/ts/@overflow/temp/react/components/commons/Tab.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import * as React from 'react';
|
||||
import { Menu, Segment } from 'semantic-ui-react';
|
||||
|
||||
export class Tab extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
active: 0,
|
||||
};
|
||||
}
|
||||
|
||||
showContents() {
|
||||
return this.props.panes[this.state.active].child;
|
||||
}
|
||||
|
||||
handleClick(index: number) {
|
||||
this.setState({
|
||||
active: index,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Menu pointing secondary>
|
||||
{this.props.panes.map((pane: any, index: number) => (
|
||||
<Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
|
||||
))}
|
||||
</Menu>
|
||||
|
||||
<Segment vertical>
|
||||
{this.showContents()}
|
||||
</Segment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
399
src/ts/@overflow/temp/react/components/commons/Tree.tsx
Normal file
399
src/ts/@overflow/temp/react/components/commons/Tree.tsx
Normal file
|
|
@ -0,0 +1,399 @@
|
|||
import * as React from 'react';
|
||||
// import update from 'immutability-helper';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
|
||||
|
||||
|
||||
import Host from '@overflow/discovery/api/model/Host';
|
||||
import Port from '@overflow/discovery/api/model/Port';
|
||||
import Service from '@overflow/discovery/api/model/Service';
|
||||
|
||||
import MetaSensorItem from '@overflow/meta/api/model/MetaSensorItem';
|
||||
|
||||
import * as Utils from '@overflow/commons/utils/Utils';
|
||||
|
||||
|
||||
|
||||
|
||||
// import update from 'immutability-helper'
|
||||
|
||||
export class Tree extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<SensorItemTree />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class SensorItemTree extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
portState: [],
|
||||
};
|
||||
|
||||
|
||||
// fs.readFile('../../../../../dh.json', this.handlJSONFile);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<List selection>
|
||||
{SensorJsonData.map((data: any, idx: number)=> {
|
||||
|
||||
})}
|
||||
</List>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const SensorTypeJsonData = [
|
||||
{
|
||||
"id" : 1,
|
||||
"create_date" : "2017-06-26T10:49:39Z",
|
||||
"description" : "CPU blah blah blah",
|
||||
"name" : "CPU"
|
||||
},
|
||||
{
|
||||
"id" : 2,
|
||||
"create_date" : "2017-06-26T10:49:39Z",
|
||||
"description" : "MEMORY blah blah blah",
|
||||
"name" : "MEMORY"
|
||||
},
|
||||
{
|
||||
"id" : 3,
|
||||
"create_date" : "2017-06-26T10:49:39Z",
|
||||
"description" : "DISK blah blah blah",
|
||||
"name" : "DISK"
|
||||
}
|
||||
];
|
||||
|
||||
const SensorJsonData = [
|
||||
{
|
||||
"id": 1,
|
||||
"create_date": "2017-06-26T11:10:08Z",
|
||||
"key": "cpu.usage",
|
||||
"name": "CPU USAGE",
|
||||
"type_id": 1
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"create_date": "2017-06-26T11:10:08Z",
|
||||
"key": "cpu.free",
|
||||
"name": "CPU FREE",
|
||||
"type_id": 1
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"create_date": "2017-06-26T11:10:08Z",
|
||||
"key": "mem.usage",
|
||||
"name": "MEMORY USAGE",
|
||||
"type_id": 2
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"create_date": "2017-06-26T11:10:08Z",
|
||||
"key": "mem.free",
|
||||
"name": "MEMORY FREE",
|
||||
"type_id": 2
|
||||
}
|
||||
];
|
||||
|
||||
export class DiscoveryResult extends React.Component<any, any> {
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
portState: [],
|
||||
};
|
||||
|
||||
|
||||
// fs.readFile('../../../../../dh.json', this.handlJSONFile);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<List selection>
|
||||
{
|
||||
|
||||
jsonData.map((data: any, index: number) => {
|
||||
let hh: Host = data;
|
||||
this.state.portState[hh.ip] = false;
|
||||
return (
|
||||
<List.Item key={index} >
|
||||
|
||||
<List.Icon name='folder' onClick={() => {
|
||||
|
||||
|
||||
|
||||
{/*const newPortState = update.newContext()(this.state.portState, {
|
||||
[hh.ip]: !this.state.portState[hh.ip]
|
||||
});*/}
|
||||
|
||||
{/*this.setState({ portState: newPortState });*/ }
|
||||
|
||||
}} />
|
||||
|
||||
<List.Content>
|
||||
|
||||
<List.Header> <Checkbox label={Utils.int2ip(hh.ip) + ' ' + hh.os} /> </List.Header>
|
||||
<List.Description>Host</List.Description>
|
||||
{this.state.portState[hh.ip] ?
|
||||
hh.ports ? hh.ports.map((port: Port, idx: number) => {
|
||||
|
||||
return (
|
||||
<List.List key={idx * 1000}>
|
||||
<List.Item>
|
||||
<List.Icon name='folder' />
|
||||
<List.Content>
|
||||
<List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} /></List.Header>
|
||||
<List.Description>Port</List.Description>
|
||||
{port.services ? port.services.map((service: Service, sIdx: number) => {
|
||||
return (
|
||||
<List.List key={sIdx * 10000}>
|
||||
<List.Item>
|
||||
<List.Icon name='folder' />
|
||||
<List.Content>
|
||||
<List.Header><Checkbox label={service.serviceName + ' ' + service.portType} /></List.Header>
|
||||
<List.Description>Service</List.Description>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List.List>
|
||||
);
|
||||
}) : ''}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List.List>
|
||||
);
|
||||
}) : '' : ''}
|
||||
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
);
|
||||
|
||||
})}
|
||||
</List>
|
||||
|
||||
{/*<List>
|
||||
<List.Item >
|
||||
<Label basic onClick={() => {
|
||||
this.setState({ tt: !this.state.tt });
|
||||
}}>Host</Label>
|
||||
<Checkbox />
|
||||
</List.Item>
|
||||
{this.state.tt ? <List.Item selection >
|
||||
<List.List>
|
||||
<List.Item>Port 22 NOR</List.Item>
|
||||
<List.Item>Port 443 TLS</List.Item>
|
||||
<List.Item>Port 80 NOR </List.Item>
|
||||
</List.List>
|
||||
</List.Item> : ''}
|
||||
</List>*/}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const jsonData = [{
|
||||
"firstScanRange": 1,
|
||||
"lastScanRange": 10000,
|
||||
"name": "",
|
||||
"ip": 3232235818,
|
||||
"mac": 91754662925,
|
||||
"os": "Windows",
|
||||
"ports": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "SSH",
|
||||
"target": true
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 22
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 443
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 80
|
||||
}],
|
||||
"createDate": 1498470178000,
|
||||
"updateDate": 1498470178000
|
||||
},
|
||||
{
|
||||
"firstScanRange": 1,
|
||||
"lastScanRange": 10000,
|
||||
"name": "",
|
||||
"ip": 3232235781,
|
||||
"mac": 91754660625,
|
||||
"os": "Windows",
|
||||
"ports": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "SSH"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 22
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 80
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 1936
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": null,
|
||||
"portType": "TCP",
|
||||
"portNumber": 443
|
||||
}],
|
||||
"createDate": 1498470178000,
|
||||
"updateDate": 1498470178000
|
||||
},
|
||||
{
|
||||
"firstScanRange": 1,
|
||||
"lastScanRange": 10000,
|
||||
"name": "",
|
||||
"ip": 3232235797,
|
||||
"mac": 91754662913,
|
||||
"os": "Windows",
|
||||
"target": true,
|
||||
"ports": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 80
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "SSH"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 22
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 3343
|
||||
},
|
||||
{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"services": [{
|
||||
"createDate": -62135596800000,
|
||||
"updateDate": -62135596800000,
|
||||
"portType": "TCP",
|
||||
"serviceName": "HTTP"
|
||||
}],
|
||||
"portType": "TCP",
|
||||
"portNumber": 443
|
||||
}],
|
||||
"createDate": 1498470178000,
|
||||
"updateDate": 1498470178000
|
||||
},
|
||||
{
|
||||
"firstScanRange": 1,
|
||||
"lastScanRange": 10000,
|
||||
"name": "",
|
||||
"ip": 3232235877,
|
||||
"mac": 75361038758387,
|
||||
"os": "Windows",
|
||||
"ports": null,
|
||||
"createDate": 1498470179000,
|
||||
"updateDate": 1498470179000
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user