added discovery tree
This commit is contained in:
snoop
parent
7c70dc0d71
commit
e893f2a9ce
|
|
@ -6,6 +6,7 @@ import { Footer } from './Footer';
|
|||
import LeftMenu from './LeftMenu';
|
||||
|
||||
import TableSortView from '../../../temp/react/components/TableSortView';
|
||||
import DiscoveryTreeContainer from '@overflow/discovery/react/DiscoveryTree';
|
||||
|
||||
export interface Props extends RouteComponentProps<any> {
|
||||
}
|
||||
|
|
@ -36,6 +37,7 @@ export class AppLayout extends React.Component<Props, State> {
|
|||
<Segment basic style={{ margin: '0 0 0 210px', padding: '0' }}>
|
||||
<Header />
|
||||
<Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
|
||||
<Route exact path={`${this.props.match.url}/discoveryTree`} component={DiscoveryTreeContainer} />
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Container >
|
||||
|
|
|
|||
21
src/ts/@overflow/discovery/react/DiscoveryTree.tsx
Normal file
21
src/ts/@overflow/discovery/react/DiscoveryTree.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { connect, Dispatch } from 'react-redux';
|
||||
import {
|
||||
DiscoveryTree,
|
||||
DiscoveryTreeStateProps,
|
||||
DiscoveryTreeDispatchProps,
|
||||
} from './components/DiscoveryTree';
|
||||
|
||||
|
||||
export function mapStateToProps(state: any): DiscoveryTreeStateProps {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export function mapDispatchToProps(dispatch: Dispatch<any>): DiscoveryTreeDispatchProps {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(DiscoveryTree);
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
import * as React from 'react';
|
||||
// import update from 'immutability-helper';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import {
|
||||
Checkbox,
|
||||
|
|
@ -8,8 +9,9 @@ import {
|
|||
Label,
|
||||
Accordion,
|
||||
Icon,
|
||||
List,
|
||||
List, Button,
|
||||
ListItemProps,
|
||||
CheckboxProps,
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
|
||||
|
|
@ -19,114 +21,199 @@ import Service from '@overflow/discovery/api/model/Service';
|
|||
|
||||
import * as Utils from '@overflow/commons/util/Utils';
|
||||
|
||||
export interface DiscoveryResultProps {
|
||||
export interface DiscoveryTreeStateProps {
|
||||
}
|
||||
|
||||
export interface DiscoveryResultState {
|
||||
portState: { [key: number]: boolean; };
|
||||
export interface DiscoveryTreeDispatchProps {
|
||||
}
|
||||
|
||||
export type DiscoveryTreeProps = DiscoveryTreeStateProps & DiscoveryTreeDispatchProps;
|
||||
|
||||
export interface DiscoveryTreeState {
|
||||
portState: Map<string, boolean>;
|
||||
serviceState: Map<string, boolean>;
|
||||
checkHostState: Map<string, boolean>;
|
||||
checkPortState: Map<string, boolean>;
|
||||
checkServiceState: Map<string, boolean>;
|
||||
|
||||
}
|
||||
|
||||
|
||||
export class DiscoveryTree extends React.Component<DiscoveryResultProps, DiscoveryResultState> {
|
||||
export class DiscoveryTree extends React.Component<DiscoveryTreeProps, DiscoveryTreeState> {
|
||||
|
||||
private selectedHostState: Map<string, boolean>;
|
||||
private selectedPortState: Map<string, boolean>;
|
||||
private selectedServiceState: Map<string, boolean>;
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
|
||||
this.state = {
|
||||
portState: {},
|
||||
portState: new Map,
|
||||
serviceState: new Map,
|
||||
checkHostState: new Map,
|
||||
checkPortState: new Map,
|
||||
checkServiceState: new Map,
|
||||
};
|
||||
|
||||
this.selectedHostState = new Map;
|
||||
this.selectedPortState = new Map;
|
||||
this.selectedServiceState = new Map;
|
||||
|
||||
// fs.readFile('../../../../../dh.json', this.handlJSONFile);
|
||||
}
|
||||
|
||||
public onClickHost = (key: string) => {
|
||||
let newPortStateMap: Map<string, boolean> = _.clone(this.state.portState);
|
||||
newPortStateMap[key] = !newPortStateMap[key];
|
||||
this.setState({ portState: newPortStateMap });
|
||||
}
|
||||
|
||||
public onClickPort = (key: string) => {
|
||||
let newServiceStateMap: Map<string, boolean> = _.clone(this.state.serviceState);
|
||||
newServiceStateMap[key] = !newServiceStateMap[key];
|
||||
this.setState({ serviceState: newServiceStateMap });
|
||||
}
|
||||
|
||||
public onCheckHost = (host: Host, key: string) => {
|
||||
console.log('aa');
|
||||
}
|
||||
public onCheckPort = (port: Port, key: string) => {
|
||||
console.log('aa');
|
||||
}
|
||||
public onCheckService = (service: Service, key: string) => {
|
||||
console.log('aa');
|
||||
}
|
||||
|
||||
public onCheck = (checkProps: CheckboxProps, checkState: Map<string, boolean>, key: string, stateKey: string,
|
||||
selectedMap: Map<string, any>, selectedObj: any) => {
|
||||
let newCheckState = _.clone(checkState);
|
||||
newCheckState[key] = !newCheckState[key];
|
||||
let state: any = {};
|
||||
state[stateKey] = newCheckState;
|
||||
this.setState(state);
|
||||
|
||||
if (checkProps.checked) {
|
||||
selectedMap[key] = selectedObj;
|
||||
} else {
|
||||
delete selectedMap[key];
|
||||
}
|
||||
}
|
||||
|
||||
public renderDiscovery(): JSX.Element[] {
|
||||
|
||||
let elems: JSX.Element[] = new Array();
|
||||
|
||||
let hostList: Host[] = hostListJson;
|
||||
let host: Host;
|
||||
for (let index: number = 0; index < hostList.length; ++index) {
|
||||
host = hostList[index];
|
||||
let key: string = String(index);
|
||||
elems.push(
|
||||
<List.Item key={key} >
|
||||
<List.Icon name={host.ports ? (this.state.portState[key] ? 'chevron up' : 'chevron down') : 'file'}
|
||||
onClick={this.onClickHost.bind(this, key)} />
|
||||
<List.Content>
|
||||
<List.Header>
|
||||
<Checkbox label={Utils.int2ip(host.ip) + ' ' + host.os} checked={this.state.checkHostState[key]} onChange={
|
||||
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
|
||||
{
|
||||
this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedHostState, host);
|
||||
}
|
||||
}} />
|
||||
</List.Header>
|
||||
<List.Description style={{ marginLeft: '26px' }}>Host</List.Description>
|
||||
{host.ports ? (this.state.portState[key] ? this.renderPort(host.ports, index) : null) : null}
|
||||
</List.Content>
|
||||
</List.Item>,
|
||||
);
|
||||
}
|
||||
return elems;
|
||||
}
|
||||
|
||||
public renderPort(portList: Port[], hostIndex: number): JSX.Element[] {
|
||||
|
||||
if (portList === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let elems: JSX.Element[] = new Array();
|
||||
let port: Port;
|
||||
for (let index: number = 0; index < portList.length; ++index) {
|
||||
port = portList[index];
|
||||
let key: string = String(hostIndex) + '-' + String(index);
|
||||
elems.push(
|
||||
<List.List key={key}>
|
||||
<List.Item >
|
||||
<List.Icon name={port.services ? (this.state.serviceState[key] ? 'chevron up' : 'chevron down') : 'file'}
|
||||
onClick={this.onClickPort.bind(this, key)} />
|
||||
<List.Content>
|
||||
<List.Header> <Checkbox label={port.portNumber + ' ' + port.portType} checked={this.state.checkHostState[key]} onChange={
|
||||
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
|
||||
{
|
||||
this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedPortState, port);
|
||||
}
|
||||
}} /></List.Header>
|
||||
<List.Description style={{ marginLeft: '26px' }}>Port</List.Description>
|
||||
{port.services ? (this.state.serviceState[key] ? this.renderService(port.services, key) : null) : null}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List.List>,
|
||||
);
|
||||
}
|
||||
|
||||
return elems;
|
||||
}
|
||||
|
||||
public renderService(serviceList: Service[], portKey: string): JSX.Element[] {
|
||||
let elems: JSX.Element[] = new Array();
|
||||
let service: Service;
|
||||
for (let index: number = 0; index < serviceList.length; ++index) {
|
||||
service = serviceList[index];
|
||||
let key: string = portKey + '-' + String(index);
|
||||
elems.push(
|
||||
<List.List key={key}>
|
||||
<List.Item >
|
||||
<List.Icon name='file' />
|
||||
<List.Content>
|
||||
<List.Header> <Checkbox label={service.serviceName + ' ' + service.portType}
|
||||
checked={this.state.checkHostState[key]} onChange={
|
||||
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
|
||||
{
|
||||
this.onCheck(checkProps, this.state.checkHostState, key, 'checkHostState', this.selectedServiceState, service);
|
||||
}
|
||||
}} /></List.Header>
|
||||
<List.Description style={{ marginLeft: '26px' }}>Service</List.Description>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List.List>,
|
||||
);
|
||||
}
|
||||
|
||||
return elems;
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Container fluid>
|
||||
<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>
|
||||
);
|
||||
|
||||
})}
|
||||
{this.renderDiscovery()}
|
||||
</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>*/}
|
||||
<Button primary floated='right' onClick={() => {
|
||||
console.log(this.selectedHostState);
|
||||
console.log(this.selectedPortState);
|
||||
console.log(this.selectedServiceState);
|
||||
}}>Test</Button><br /><br />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const jsonData = [{
|
||||
|
||||
|
||||
const hostListJson: any = [{
|
||||
'firstScanRange': 1,
|
||||
'lastScanRange': 10000,
|
||||
'name': '',
|
||||
|
|
@ -299,3 +386,5 @@ const jsonData = [{
|
|||
|
||||
|
||||
];
|
||||
|
||||
const jsonData = hostListJson;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user