diff --git a/src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx b/src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx index ef8729e..80d30a5 100644 --- a/src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx +++ b/src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx @@ -7,6 +7,7 @@ import TitleBarContainer from './TitleBarContainer'; import LeftMenu from './LeftMenu'; import ProbeDetail from '../../views/monitoring/probe/Detail'; +import ProbeHost from '../../views/monitoring/probe/Host'; import ProbeHistory from '../../views/monitoring/probe/History'; import TargetList from '../../views/infrastructure/target/List'; @@ -32,6 +33,10 @@ export class ProbeDetailLayout extends React.Component { 'name': 'Info', 'path': this.state.currUrl, }, + { + 'name': 'Host', + 'path': this.state.currUrl + '/host', + }, { 'name': 'History', 'path': this.state.currUrl + '/history', @@ -49,6 +54,7 @@ export class ProbeDetailLayout extends React.Component { + diff --git a/src/ts/@overflow/app/views/monitoring/probe/Host.tsx b/src/ts/@overflow/app/views/monitoring/probe/Host.tsx new file mode 100644 index 0000000..095dd45 --- /dev/null +++ b/src/ts/@overflow/app/views/monitoring/probe/Host.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { RouteComponentProps } from 'react-router'; +import ProbeHostContainer from '@overflow/probe/react/ProbeHost'; +import WebSocketRPC from '@overflow/commons/websocket/WebSocketRPC'; +import AppContext from '@overflow/commons/context'; +import inject from '@overflow/commons/context/decorator/inject'; + +class ProbeHost extends React.Component, object> { + @inject() + private client: WebSocketRPC; + + public constructor(props?: RouteComponentProps, context?: object) { + super(props, context); + + let con = AppContext.get(); + } + + public render(): JSX.Element { + return ( + + ); + } +} + + +export default ProbeHost; diff --git a/src/ts/@overflow/probe/react/ProbeDetail.tsx b/src/ts/@overflow/probe/react/ProbeDetail.tsx index 44fb625..bdd3578 100644 --- a/src/ts/@overflow/probe/react/ProbeDetail.tsx +++ b/src/ts/@overflow/probe/react/ProbeDetail.tsx @@ -5,7 +5,6 @@ import { DispatchProps as ProbeDetailDispatchProps, } from './components/ProbeDetailInfo'; import { push as routerPush } from 'react-router-redux'; -import Probe from '@overflow/probe/api/model/Probe'; export function mapStateToProps(state: any, props: any): ProbeDetailStateProps { @@ -16,9 +15,6 @@ export function mapStateToProps(state: any, props: any): ProbeDetailStateProps { export function mapDispatchToProps(dispatch: Dispatch): ProbeDetailDispatchProps { return { - // onDiscoverySelect: ( id: string) => { - // dispatch(routerPush('/discovery/' + id )); - // }, }; } diff --git a/src/ts/@overflow/probe/react/ProbeHost.tsx b/src/ts/@overflow/probe/react/ProbeHost.tsx new file mode 100644 index 0000000..845704e --- /dev/null +++ b/src/ts/@overflow/probe/react/ProbeHost.tsx @@ -0,0 +1,21 @@ +import { connect, Dispatch } from 'react-redux'; +import { + ProbeHost, + StateProps as ProbeDetailStateProps, + DispatchProps as ProbeDetailDispatchProps, +} from './components/ProbeHost'; +import { push as routerPush } from 'react-router-redux'; + + +export function mapStateToProps(state: any, props: any): ProbeDetailStateProps { + return { + id: props.params.id, + }; +} + +export function mapDispatchToProps(dispatch: Dispatch): ProbeDetailDispatchProps { + return { + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(ProbeHost); diff --git a/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx b/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx index b8ddb97..7a64cad 100644 --- a/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx +++ b/src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx @@ -7,7 +7,6 @@ import { Header, Container, } from 'semantic-ui-react'; -// import { TargetTable } from '@overflow/target/react/components/TargetList'; import Probe from '@overflow/probe/api/model/Probe'; import { Discovery } from '../../../discovery/react/components/Discovery'; @@ -22,8 +21,7 @@ export interface DispatchProps { export type Props = StateProps & DispatchProps; export interface State { - probe: Probe; - id: string; + probe: any; // todo. fix to Probe isDiscovery: boolean; } @@ -34,15 +32,41 @@ export class ProbeDetailInfo extends React.Component { super(props, context); this.state = { probe: null, - id: '44', isDiscovery: false, }; } public componentWillMount(): void { + + // todo. getting probe by probeId + let p = { + 'id': '11', + 'status': { + 'name': 'STARTED', + }, + 'domain': { + 'name': 'insanity\'s domain', + }, + 'displayName': '192.168.1.105\'s probe', + 'network': { + 'cidr': '192.168.1.0/24', + 'ip': '192.168.1.105', + 'mac': 'ab:cd:ef:gh:ij', + }, + 'targetCount': '20', + 'sensorCount': '30', + 'probeKey': '1AGBLKDFJ2452ASDGFL2KWJLKSDJ', + 'description': 'description1111111111', + 'createDate': '2017-01-01', + 'authorizeDate': '2017-01-01', + 'restartDate': '2017-01-01', + 'authorizeMember': { + 'name': 'insanity', + }, + }; + this.setState({ - probe: null, - id: '44', + probe: p, isDiscovery: false, }); } @@ -53,16 +77,7 @@ export class ProbeDetailInfo extends React.Component { public handleDiscovery = (event: any, data: any): void => { console.log(event); - this.setState({isDiscovery: true}); - // // let probeId = String(this.state.id); - // // this.props.onDiscoverySelect(this.state.id); - // if (this.state.isDiscovery) { - - // // this.setState({isDiscovery: false}); - // } else { - // // this.setState({isDiscovery: true}); - // return null; - // } + this.setState({ isDiscovery: true }); } public renderDiscovery(): JSX.Element { @@ -83,39 +98,45 @@ export class ProbeDetailInfo extends React.Component { -
Domain
+
Name
- todo + {this.state.probe.displayName}
- +
Status
- todo + {this.state.probe.status.name}
-
Host IP
+
Created at
- todo -
- - -
Host Name
-
- todo + {this.state.probe.createDate}
Authorized at
- todo + {this.state.probe.authorizeDate} +
+ + +
Authorized by
+
+ {this.state.probe.authorizeMember.name} +
+ + +
Uptime
+
+ todo.
Description
- todo + {this.state.probe.description}
@@ -134,14 +155,5 @@ export class ProbeDetailInfo extends React.Component { ); } - private showDiscovery = (): JSX.Element => { - if (!this.state.isDiscovery) { - this.setState({ isDiscovery: true }); - return ; - } else { - this.setState({ isDiscovery: false }); - return null; - } - } } diff --git a/src/ts/@overflow/probe/react/components/ProbeHost.tsx b/src/ts/@overflow/probe/react/components/ProbeHost.tsx new file mode 100644 index 0000000..a00b1d9 --- /dev/null +++ b/src/ts/@overflow/probe/react/components/ProbeHost.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { + Button, + Table, + Label, + Segment, + Header, + Container, +} from 'semantic-ui-react'; +import Probe from '@overflow/probe/api/model/Probe'; + +export interface StateProps { + id: string; +} + +export interface DispatchProps { +} + +export type Props = StateProps & DispatchProps; + +export interface State { + probe: any; // todo. fix to Probe +} + + +export class ProbeHost extends React.Component { + + constructor(props: Props, context: State) { + super(props, context); + this.state = { + probe: null, + }; + } + + public componentWillMount(): void { + console.log(this.props.id); + } + + + public render(): JSX.Element { + return ( + + + + + +
Name
+
+ todo +
+
+
+
+ ); + } +} +