overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add routers

Browse Source
This commit is contained in:
snoop 2017-07-19 19:47:36 +09:00
parent c2e92ac3e1
commit ff01e2169c
34 changed files with 3315 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/ts/@overflow/app/index.tsx
View File

@ -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,13 +37,9 @@ function* app(): any {
sagaMiddleware.run(sagas);
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
{routes}
</ConnectedRouter>
</Provider>,
<div><Layout /></div>,
appContainer,
);
);
}
sagaMiddleware.run(app);

27
src/ts/@overflow/app/router/index.tsx
View File

@ -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
View 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
View 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
View 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
View 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
View 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
View File

51
src/ts/@overflow/app/views/layout/TitleBar.tsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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)} /> &nbsp;&nbsp;
<Input tabIndex='2' placeholder='End IP' onChange={this.handleInput.bind(this)} /> &nbsp;&nbsp;
<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)} /> &nbsp;&nbsp;
<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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>
);
}
}

74
src/ts/@overflow/temp/react/components/TableExampleSortable.tsx Normal file
View File

@ -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
View 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
View 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
View 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>
);
}
}

44
src/ts/@overflow/temp/react/components/commons/DetailContainer.tsx Normal file
View File

@ -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>
);
}
}

74
src/ts/@overflow/temp/react/components/commons/ListContainer.tsx Normal file
View File

@ -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
View 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
View 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
}
]