target

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

@@ -20,6 +20,7 @@ export type Props = StateProps & DispatchProps;
 
 export interface State {
   selected: Probe;
+  targetTemp: any;
   isDetail: boolean;
   list: Probe[];
 }
@@ -31,11 +32,38 @@ export class TargetDetail extends React.Component<Props, State> {
     super(props, context);
     this.state = {
       selected: null,
+      targetTemp: null,
       isDetail: false,
       list: null,
     };
   }
 
+  public componentWillMount(): void {
+    let 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',
+        },
+      },
+    };
+
+    this.setState({targetTemp: data});
+  }
   public handleBack(): void {
     console.log('handleBack');
   }
@@ -51,13 +79,13 @@ export class TargetDetail extends React.Component<Props, State> {
     }
 
     const items = [
-      { name: 'Info', child: <TargetBasicInfo probe={this.props.probe} /> },
+      { name: 'Info', child: <TargetBasicInfo target={this.state.targetTemp} /> },
       { name: 'Sensors', child: <SensorList target={this.props.target} /> },
     ];
 
     return (
       <Container fluid>
-        <TargetBasicInfo probe={this.props.probe} />
+        <TargetBasicInfo target={this.state.targetTemp} />
         <SensorList target={this.props.target} />
       </Container>
     );
@@ -66,7 +94,7 @@ export class TargetDetail extends React.Component<Props, State> {
 
 
 export interface TargetBasicInfoProps {
-  probe?: Probe;
+  target?: Target;
 }
 
 export interface TargetBasicInfoState {
@@ -81,6 +109,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
     };
   }
 
+
   public handleRemoveTarget(): void {
     alert('remove');
   }
@@ -96,7 +125,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Name</Header>
               </Table.Cell>
               <Table.Cell>
-                ???
+                {this.props.target.probe.domain.name}
             </Table.Cell>
             </Table.Row>
 
@@ -105,7 +134,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Type</Header>
               </Table.Cell>
               <Table.Cell>
-                ????
+                {this.props.target.infra.type.name}
             </Table.Cell>
             </Table.Row>
 
@@ -114,7 +143,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Sensor count</Header>
               </Table.Cell>
               <Table.Cell>
-                ???
+                1
             </Table.Cell>
             </Table.Row>
 
@@ -123,13 +152,20 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Created at</Header>
               </Table.Cell>
               <Table.Cell>
-                ???
+                {this.props.target.createDate}
             </Table.Cell>
             </Table.Row>
 
           </Table.Body>
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>
+                <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
         </Table>
-        <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
+
       </Container>
     );
   }