target fix

src/ts/@overflow/target/react/TargetDetail.tsx

@@ -9,7 +9,7 @@ import * as targetDetailActions from '../redux/action/read';
 
 export function mapStateToProps(state: any): StateProps {
     return {
-        probe: state.probe,
+        // probe: state.probe,
     };
 }
 

src/ts/@overflow/target/react/components/TargetDetail.tsx

@@ -1,28 +1,20 @@
 import * as React from 'react';
 import { Button, Table, Header, Container } from 'semantic-ui-react';
-import { SensorList } from '@overflow/sensor/react/components/SensorList';
 import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
-
+import { TargetDetailInfra } from './TargetDetailInfra';
-import Probe from '@overflow/probe/api/model/Probe';
 import Target from '@overflow/target/api/model/Target';
 
 
 export interface StateProps {
-  probe?: Probe;
-  target?: Target;
 }
 
 export interface DispatchProps {
- onRead(id: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  selected: Probe;
+  target: any; // todo. fix to Target
-  targetTemp: any;
-  isDetail: boolean;
-  list: Probe[];
 }
 
 
@@ -31,41 +23,20 @@ export class TargetDetail extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
-      selected: null,
+      target: null,
-      targetTemp: null,
-      isDetail: false,
-      list: null,
     };
   }
 
   public componentWillMount(): void {
     let data = {
       'id': '1',
-      'probe': {
+      'createDate': '2017-01-01',
-        'id': '1',
+      'displayName': '192.168.1.105',
-        'status': {
+      'description': '',
-          'id': '1',
+      'sensorCount': 'todo.',
-          'name': 'INITIAL',
-        },
-        'description': 'snoop probe',
-        'domain': {
-          'id': '1',
-          'name': 'overFlow`s domain',
-        },
-      },
-      'infra': {
-        'id': '1',
-        'type': {
-          'id': '1',
-          'name': 'MACHINE',
-        },
-      },
     };
 
-    this.setState({targetTemp: data});
+    this.setState({ target: data });
-  }
-  public handleBack(): void {
-    console.log('handleBack');
   }
 
   public handleRemoveTarget(): void {
@@ -73,20 +44,13 @@ export class TargetDetail extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-
-    if (this.props.probe === null) {
-      return null;
-    }
-
-    const items = [
-      { name: 'Info', child: <TargetBasicInfo target={this.state.targetTemp} /> },
-      { name: 'Sensors', child: <SensorList target={this.props.target} /> },
-    ];
-
     return (
       <Container fluid>
-        <TargetBasicInfo target={this.state.targetTemp} />
+        <TargetBasicInfo target={this.state.target} />
-        {/*<SensorList target={this.props.target} />*/}
+        <br />
+        <TargetDetailInfra target={this.state.target} />
+        <br />
+        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
       </Container>
     );
   }
@@ -94,11 +58,11 @@ export class TargetDetail extends React.Component<Props, State> {
 
 
 export interface TargetBasicInfoProps {
-  target?: Target;
+  target?: any; // todo. fix to Target
 }
 
 export interface TargetBasicInfoState {
-
+  infra: any;
 }
 
 export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, TargetBasicInfoState> {
@@ -106,12 +70,20 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
   constructor(props: TargetBasicInfoProps, context: TargetBasicInfoState) {
     super(props, context);
     this.state = {
+      infra: null,
     };
   }
 
-
+  public componentWillMount(): void {
-  public handleRemoveTarget(): void {
+    let infra = {
-    alert('remove');
+      'id': '1',
+      'createDate': '2017-01-01',
+      'childId': '111',
+      'type': 'Host',
+    };
+    this.setState({
+      infra: infra,
+    });
   }
 
   public render(): JSX.Element {
@@ -124,26 +96,26 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Name</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.probe.domain.name}
+                {this.props.target.displayName}
-            </Table.Cell>
+              </Table.Cell>
             </Table.Row>
 
             <Table.Row>
               <Table.Cell collapsing>
-                <Header size='small'>Type</Header>
+                <Header size='small'>Description</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.props.target.infra.type.name}
+                {this.props.target.description}
-            </Table.Cell>
+              </Table.Cell>
             </Table.Row>
 
             <Table.Row>
               <Table.Cell collapsing>
-                <Header size='small'>Sensor count</Header>
+                <Header size='small'>Sensor Count</Header>
               </Table.Cell>
               <Table.Cell>
-                1
+                {this.props.target.sensorCount}
-            </Table.Cell>
+              </Table.Cell>
             </Table.Row>
 
             <Table.Row>
@@ -152,12 +124,19 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
               </Table.Cell>
               <Table.Cell>
                 {this.props.target.createDate}
-            </Table.Cell>
+              </Table.Cell>
             </Table.Row>
 
+            <Table.Row>
+              <Table.Cell collapsing>
+                <Header size='small'>Type</Header>
+              </Table.Cell>
+              <Table.Cell>
+                {this.state.infra.type}
+              </Table.Cell>
+            </Table.Row>
           </Table.Body>
         </Table>
-        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
       </Container>
     );
   }

src/ts/@overflow/target/react/components/TargetDetailInfra.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { Button, Table, Header, Container } from 'semantic-ui-react';
+import { SensorList } from '@overflow/sensor/react/components/SensorList';
+import { DetailContainer } from '@overflow/commons/react/component/DetailContainer';
+
+import Target from '@overflow/target/api/model/Target';
+
+
+export interface StateProps {
+  target: any;
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  infra: any; // todo. fix to Infra
+  childInfra: any; // todo. fix to InfraTypes
+}
+
+
+export class TargetDetailInfra extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      infra: null,
+      childInfra: null,
+    };
+  }
+
+  public componentWillMount(): void {
+    // todo. getting infra and child infra
+
+    let child = { // infraHost
+      'id': '1',
+      'os': {
+        'id': '11',
+        'machine': {
+          'id': '111',
+        },
+        'meta': 'T ^ T',
+        'vendor': {
+          'name': 'Loafle',
+        },
+      },
+      'ip': '192.168.1.105',
+      'mac': 'ab:12:cd:34:ef:ef',
+      'createDate': '2017-01-01',
+    };
+
+    this.setState({
+      infra: infra,
+      childInfra: child,
+    });
+  }
+
+  public handleRemoveTarget(): void {
+    alert('remove');
+  }
+
+  public renderInfra(): JSX.Element {
+    let type = this.state.infra.type;
+    switch (type) {
+      case 'Host': {
+        return <InfraHostTable data={this.state.childInfra} />;
+      }
+      case 'OS': {
+        break;
+      }
+      default:
+        break;
+    }
+    return null;
+  }
+
+
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        {this.renderInfra()}
+      </Container>
+    );
+  }
+}
+
+
+export class InfraHostTable extends React.Component<any, any> {
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+  public render(): JSX.Element {
+    return (
+      <Table celled={false}>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>os.vender.name?</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.props.data.os.vendor.name}
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>os.meta?</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.props.data.os.meta}
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>IP</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.props.data.ip}
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell collapsing>
+              <Header size='small'>mac</Header>
+            </Table.Cell>
+            <Table.Cell>
+              {this.props.data.mac}
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  }
+}

src/ts/@overflow/target/react/components/TargetList.tsx

@@ -4,7 +4,7 @@ import { TargetDetail } from './TargetDetail';
 import Target from '@overflow/target/api/model/Target';
 import Probe from '@overflow/probe/api/model/Probe';
 import { ListContainer } from '@overflow/commons/react/component/ListContainer';
-import {Discovery} from '../../../discovery/react/components/Discovery';
+import { Discovery } from '../../../discovery/react/components/Discovery';
 
 export interface StateProps {
 
@@ -35,6 +35,43 @@ export class TargetList extends React.Component<Props, State> {
     };
   }
 
+  public componentWillMount(): void {
+    this.data = [
+      {
+        'id': '1',
+        'createDate': '2017-01-01',
+        'displayName': 'Oracle',
+        'description': '',
+        'sensorCount': 'todo.',
+      },
+      {
+        'id': '2',
+        'createDate': '2017-01-01',
+        'displayName': 'MySQL',
+        'description': '',
+        'sensorCount': 'todo.',
+      },
+      {
+        'id': '3',
+        'createDate': '2017-01-01',
+        'displayName': '192.168.1.105',
+        'description': '',
+        'sensorCount': 'todo.',
+      },
+    ];
+
+    this.setState({ list: this.data });
+  }
+
+  public handleSelect(selectedTarget: any): void {
+
+    this.setState({
+      selected: selectedTarget,
+    });
+
+    this.props.onTargetSelection(selectedTarget.id);
+  }
+
 
   public handleAddTarget(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
     this.setState({
@@ -72,16 +109,35 @@ export class TargetList extends React.Component<Props, State> {
         {/*search bar  */}
         <Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
         <br /><br />
-        <TargetTable onSelectTarget={this.handleSelectedTarget}/>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'} collapsing>Sensor Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created at</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.displayName}</Table.Cell>
+                <Table.Cell>{target.sensorCount}</Table.Cell>
+                <Table.Cell>{target.createDate}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
         <Modal
           open={this.state.openAddTarget}
         >
           {/*<Modal.Header>*/}
-            {/*Adding a Target*/}
+          {/*Adding a Target*/}
           {/*</Modal.Header>*/}
           <Modal.Content>
-            <Discovery/>
+            <Discovery />
           </Modal.Content>
           <Modal.Actions>
             <Button negative onClick={() => this.setState({ openAddTarget: false })}>Cancel</Button>
@@ -101,146 +157,9 @@ export class TargetList extends React.Component<Props, State> {
 
   private handleSelectedTarget = (target: Target): void => {
     console.log('handleSelectedTarget ');
-    this.setState({selected: target});
+    this.setState({ selected: target });
 
     this.props.onTargetSelection(String(target.id));
   }
 }
 
-export interface TargetTableProps {
-  onSelectTarget?:((target:Target) => void);
-}
-
-export interface TargetTableState {
-  list: Array<Target>;
-  selected: Target;
-}
-
-export class TargetTable extends React.Component<TargetTableProps, TargetTableState> {
-  private data: any;
-
-  constructor(props: TargetTableProps, context: TargetTableState) {
-    super(props, context);
-    this.state = {
-      selected: null,
-      list: [],
-    };
-  }
-
-  public componentWillMount(): void {
-    this.data = [
-      {
-        'id': '1',
-        'probe': {
-          'id': '1',
-          'status': {
-            'id': '1',
-            'name': 'INITIAL',
-          },
-          'description': 'snoop probe',
-          'domain': {
-            'id': '1',
-            'name': 'overFlow`s domain',
-          },
-        },
-        'infra': {
-          'id': '1',
-          'type': {
-            'id': '1',
-            'name': 'MACHINE',
-          },
-        },
-      },
-
-      {
-        'id': '11',
-        'probe': {
-          'id': '1',
-          'status': {
-            'id': '1',
-            'name': 'INITIAL',
-          },
-          'description': 'snoop probe',
-          'domain': {
-            'id': '1',
-            'name': 'overFlow`s domain',
-          },
-        },
-        'infra': {
-          'id': '1',
-          'type': {
-            'id': '1',
-            'name': 'MACHINE',
-          },
-        },
-      },
-
-      {
-        'id': '21',
-        'probe': {
-          'id': '1',
-          'status': {
-            'id': '1',
-            'name': 'INITIAL',
-          },
-          'description': 'snoop probe',
-          'domain': {
-            'id': '1',
-            'name': 'overFlow`s domain',
-          },
-        },
-        'infra': {
-          'id': '3',
-          'type': {
-            'id': '2',
-            'name': 'HOST',
-          },
-        },
-      },
-    ];
-
-    this.setState({list:this.data});
-  }
-
-  public handleSelect(selectedTarget: Target): void {
-
-    console.log(selectedTarget.id);
-    this.setState({
-      selected: selectedTarget,
-    });
-
-    this.props.onSelectTarget(selectedTarget);
-  }
-
-  public render(): JSX.Element {
-    return (
-      <Container fluid>
-        <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: Target, 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.type.name}</Table.Cell>
-                <Table.Cell>{target.probe.domain.name}</Table.Cell>
-                <Table.Cell>todo</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </Container>
-    );
-  }
-
-}
-
-
-