target fix

2017-07-27 19:10:46 +09:00 · 2017-07-27 19:10:46 +09:00 · 78da1859ce
commit 78da1859ce
parent d8489298b7
4 changed files with 242 additions and 207 deletions
--- a/src/ts/@overflow/target/react/TargetDetail.tsx
+++ b/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,
    };
 }

--- a/src/ts/@overflow/target/react/components/TargetDetail.tsx
+++ b/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 Probe from '@overflow/probe/api/model/Probe';
+import { TargetDetailInfra } from './TargetDetailInfra';
 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;
-  targetTemp: any;
-  isDetail: boolean;
-  list: Probe[];
+  target: any; // todo. fix to Target
 }


@ -31,41 +23,20 @@ export class TargetDetail extends React.Component<Props, State> {
  constructor(props: Props, context: State) {
    super(props, context);
    this.state = {
-      selected: null,
-      targetTemp: null,
-      isDetail: false,
-      list: null,
+      target: 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',
-        },
-      },
+      'createDate': '2017-01-01',
+      'displayName': '192.168.1.105',
+      'description': '',
+      'sensorCount': 'todo.',
    };

-    this.setState({targetTemp: data});
-  }
-  public handleBack(): void {
-    console.log('handleBack');
+    this.setState({ target: data });
  }

  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} />
-        {/*<SensorList target={this.props.target} />*/}
+        <TargetBasicInfo target={this.state.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 handleRemoveTarget(): void {
-    alert('remove');
+  public componentWillMount(): void {
+    let infra = {
+      'id': '1',
+      'createDate': '2017-01-01',
+      'childId': '111',
+      'type': 'Host',
+    };
+    this.setState({
+      infra: infra,
+    });
  }

  public render(): JSX.Element {
@ -124,25 +96,25 @@ 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.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.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.Row>

@ -155,9 +127,16 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
              </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>
    );
  }
--- a/src/ts/@overflow/target/react/components/TargetDetailInfra.tsx
+++ b/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>
+    );
+  }
+}
--- a/src/ts/@overflow/target/react/components/TargetList.tsx
+++ b/src/ts/@overflow/target/react/components/TargetList.tsx
@ -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,8 +109,27 @@ 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}
        >
@ -107,140 +163,3 @@ export class TargetList extends React.Component<Props, State> {
  }
 }

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