From d241b62ecd5bcf2841235847351e46b4603f8576 Mon Sep 17 00:00:00 2001
From: insanity <insanity@loafle.com>
Date: Thu, 9 Nov 2017 17:41:21 +0900
Subject: [PATCH] model's arranging

---
 .../react/components/chart/LoadChartLinux.tsx |   4 +-
 src/ts/@overflow/probe/api/model/Probe.ts     |   4 +-
 .../probe/react/components/ProbeList.tsx      |  15 +-
 src/ts/@overflow/sensor/api/model/Sensor.ts   |   1 +
 .../react/components/SensorConfigStepper.tsx  |   6 +-
 .../react/components/SensorDetailInfo.tsx     |   2 +-
 .../react/components/SensorDetailItems.tsx    | 172 ++++++------------
 .../sensor/react/components/SensorList.tsx    |   2 +-
 src/ts/@overflow/target/api/model/Target.ts   |   2 +
 .../target/react/components/TargetDetail.tsx  |  15 +-
 .../target/react/components/TargetList.tsx    |  17 +-
 11 files changed, 102 insertions(+), 138 deletions(-)

diff --git a/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx b/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx
index d3eeac1..e491494 100644
--- a/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx
+++ b/src/ts/@overflow/metric/react/components/chart/LoadChartLinux.tsx
@@ -34,8 +34,8 @@ export class LoadChartLinux extends React.Component<Props, State> {
 
   public render(): JSX.Element {
     return (
-      <ResponsiveContainer width={'100%'} height={300}>
-        <LineChart syncId='sync' width={800} height={300}
+      <ResponsiveContainer width={'100%'} height={250}>
+        <LineChart syncId='sync'
           data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
           <XAxis dataKey='id' />
           <YAxis type='number' domain={[0, 1]} />
diff --git a/src/ts/@overflow/probe/api/model/Probe.ts b/src/ts/@overflow/probe/api/model/Probe.ts
index 1a42e0d..770350e 100644
--- a/src/ts/@overflow/probe/api/model/Probe.ts
+++ b/src/ts/@overflow/probe/api/model/Probe.ts
@@ -1,6 +1,7 @@
 import MetaProbeStatus from '@overflow/meta/api/model/MetaProbeStatus';
 import Domain from '@overflow/domain/api/model/Domain';
 import Member from '@overflow/member/api/model/Member';
+import Target from '@overflow/target/api/model/Target';
 import InfraHost from '@overflow/infra/api/model/InfraHost';
 
 interface Probe {
@@ -11,13 +12,12 @@ interface Probe {
   domain?: Domain;
   probeKey?: string;
   encryptionKey?: string;
-  targetCount?: number;
-  sensorCount?: number;
   displayName?: string;
   cidr?: string;
   authorizeDate?: Date;
   authorizeMember?: Member;
   host?: InfraHost;
+  targets?: Target[];
 }
 
 export default Probe;
diff --git a/src/ts/@overflow/probe/react/components/ProbeList.tsx b/src/ts/@overflow/probe/react/components/ProbeList.tsx
index 9164177..41c2f4d 100644
--- a/src/ts/@overflow/probe/react/components/ProbeList.tsx
+++ b/src/ts/@overflow/probe/react/components/ProbeList.tsx
@@ -3,6 +3,7 @@ import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-re
 import { ListContainer } from '@overflow/commons/react/component/ListContainer';
 import Probe from '@overflow/probe/api/model/Probe';
 import Domain from '@overflow/domain/api/model/Domain';
+import Infra from '@overflow/infra/api/model/Infra';
 
 export interface StateProps {
   probeList?: Probe[];
@@ -85,8 +86,7 @@ export class ProbeList extends React.Component<Props, State> {
               <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>IP</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Targets</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
 
@@ -121,11 +121,18 @@ export class ProbeList extends React.Component<Props, State> {
         <Table.Cell>{probe.cidr}</Table.Cell>
         <Table.Cell>todo</Table.Cell>
         <Table.Cell negative={this.checkCellStatus(probe.status)} textAlign={'center'}>{probe.status.name}</Table.Cell>
-        <Table.Cell textAlign={'center'} >{probe.targetCount}</Table.Cell>
-        <Table.Cell textAlign={'center'} >{probe.sensorCount}</Table.Cell>
+        <Table.Cell textAlign={'center'} >{this.listTargets(probe)}</Table.Cell>
       </Table.Row>
     ));
   }
+  private listTargets(probe: Probe): JSX.Element[] {
+    if(probe.targets === null || probe.targets.length === 0) {
+      return null;
+    }
+    return probe.targets.map((infra: Infra, index: number) => (
+      <div key={index}>{infra.target.displayName}</div>
+    ));
+  }
 }
 
 export class ProbeFilter extends React.Component<any, any> {
diff --git a/src/ts/@overflow/sensor/api/model/Sensor.ts b/src/ts/@overflow/sensor/api/model/Sensor.ts
index 04fe7f9..fb530ee 100644
--- a/src/ts/@overflow/sensor/api/model/Sensor.ts
+++ b/src/ts/@overflow/sensor/api/model/Sensor.ts
@@ -10,6 +10,7 @@ interface Sensor {
   target?: Target;
   crawler?: MetaCrawler;
   crawlerInputItems?: string;
+  itemCount?: number;
 }
 
 export default Sensor;
diff --git a/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx b/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx
index 4199a95..463f1a8 100644
--- a/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx
+++ b/src/ts/@overflow/sensor/react/components/SensorConfigStepper.tsx
@@ -188,7 +188,6 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
     sensor.crawler = { id: sensorData.crawler.id };
     sensor.target = { id: sensorData.infra.target.id };
     sensor.status = { id: MetaSensorStatus_ID.RUNNING };
-
     sensor.description = sensorData.infra.infraType.name + '-' + sensorData.crawler.name;
 
     let siList: Array<SensorItem> = new Array;
@@ -200,6 +199,7 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
         });
       }
     });
+    sensor.itemCount = siList.length;
 
     let etc: any = { interval: sensorData.interval };
 
@@ -240,12 +240,12 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
         <Step.Group fluid>
           <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
             <Icon name='settings' color='grey' />
-            <Step.Content title='Step 1' description='Choose Target' />
+            <Step.Content title='Step 1' description='Choose a Target' />
           </Step>
 
           <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
             <Icon name='list ul' color='grey' />
-            <Step.Content title='Step 2' description='Choose Crawler' />
+            <Step.Content title='Step 2' description='Choose a Crawler' />
           </Step>
 
           <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
diff --git a/src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx b/src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx
index 8ec70c5..761fba7 100644
--- a/src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx
+++ b/src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx
@@ -101,7 +101,7 @@ export class SensorDetailInfo extends React.Component<SensorDetailInfoProps, Sen
             <Table.Cell>
               <Header size='small'>Item Count</Header>
             </Table.Cell>
-            <Table.Cell>{44}</Table.Cell>
+            <Table.Cell>{this.props.sensor.itemCount}</Table.Cell>
           </Table.Row>
           <Table.Row>
             <Table.Cell>
diff --git a/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx b/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx
index 4e061ed..cfd9b56 100644
--- a/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx
+++ b/src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Table, Button, Header, Container } from 'semantic-ui-react';
+import { Table, Button, Header, Container, Card, Image, Icon } from 'semantic-ui-react';
 
 import Sensor from '@overflow/sensor/api/model/Sensor';
 import SensorItem from '@overflow/sensor/api/model/SensorItem';
@@ -7,6 +7,7 @@ import Page from '@overflow/commons/api/model/Page';
 import { Pager } from '@overflow/commons/react/component/Pager';
 import PageParams from '@overflow/commons/api/model/PageParams';
 import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
+import { LoadChartLinux } from '@overflow/metric/react/components/chart/LoadChartLinux';
 
 export interface StateProps {
   sensorId?: number;
@@ -26,9 +27,9 @@ export interface State {
 
 export class SensorDetailItems extends React.Component<Props, State> {
 
-  private countPerPage: number = 10;
+  private countPerPage: number = 100000;
   private sortCol: string = 'id';
-  private sortDirection: string = 'descending';
+  private sortDirection: string = 'ascending';
   private pageNo: number = 0;
 
   constructor(props: Props, context: State) {
@@ -50,42 +51,24 @@ export class SensorDetailItems extends React.Component<Props, State> {
     this.props.onReadAllBySensor({ id: this.props.sensorId }, pageParams);
   }
 
-  public componentWillMount(): void {
-    console.log('');
-  }
-
-  private handlePaging = (pageNo: number) => {
-    this.pageNo = pageNo;
-    const pageParams: PageParams = {
-      pageNo: String(this.pageNo),
-      countPerPage: String(this.countPerPage),
-      sortCol: this.sortCol,
-      sortDirection: this.sortDirection,
-    };
-    this.props.onReadAllBySensor({ id: this.props.sensorId }, pageParams);
-  }
 
   public render(): JSX.Element {
     if (this.props.sensorItemList === undefined) {
       return null;
     }
-    let colsmap: Map<string, string> = new Map();
-    colsmap.set('No.', 'id');
-    colsmap.set('Type', 'item.itemType.name');
-    colsmap.set('Name', 'item.name');
-    colsmap.set('Key', 'item.key');
+    // let colsmap: Map<string, string> = new Map();
+    // colsmap.set('Type', 'item.itemType.name');
+    // colsmap.set('Name', 'item.displayName');
+    // colsmap.set('Unit', 'item.unit.mark');
+    // colsmap.set('Description', 'item.description');
 
     return (
       <Container fluid>
-        <Table celled sortable>
+        {this.renderSensorItemInfo()}
+
+        {/* <Table celled sortable>
           <Table.Header>
             <SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} />
-            {/* <Table.Row>
-              <Table.HeaderCell>No.</Table.HeaderCell>
-              <Table.HeaderCell>Type</Table.HeaderCell>
-              <Table.HeaderCell>Name</Table.HeaderCell>
-              <Table.HeaderCell>Key</Table.HeaderCell>
-            </Table.Row> */}
           </Table.Header>
 
           <Table.Body>
@@ -93,10 +76,10 @@ export class SensorDetailItems extends React.Component<Props, State> {
               this.props.sensorItemList.content ? this.props.sensorItemList.content.map((sensorItem: SensorItem, idx: number) => {
                 return (
                   <Table.Row key={idx}>
-                    <Table.Cell>{idx}</Table.Cell>
-                    <Table.Cell>{sensorItem.item.itemType.name}</Table.Cell>
-                    <Table.Cell>{sensorItem.item.name}</Table.Cell>
-                    <Table.Cell>{sensorItem.item.key}</Table.Cell>
+                    <Table.Cell collapsing>{sensorItem.item.itemType.name}</Table.Cell>
+                    <Table.Cell collapsing>{sensorItem.item.displayName}</Table.Cell>
+                    <Table.Cell collapsing textAlign='center'>{sensorItem.item.unit.mark}</Table.Cell>
+                    <Table.Cell>{sensorItem.item.description}</Table.Cell>
                   </Table.Row>
                 );
               }) : ''
@@ -109,94 +92,45 @@ export class SensorDetailItems extends React.Component<Props, State> {
               </Table.HeaderCell>
             </Table.Row>
           </Table.Footer>
-        </Table>
+        </Table> */}
       </Container>
     );
   }
-  private handleSort = (col: string, direction: string): void => {
-    console.log(col + ' || direction:' + direction);
-    this.sortCol = col;
-    this.sortDirection = direction;
-    this.getData();
+  private renderSensorItemInfo(): JSX.Element {
+    return this.props.sensorItemList.content.map((sensorItem: SensorItem, index: number) => (
+      <Card fluid key={index}>
+      <Card.Content>
+        <Card.Header>{sensorItem.item.displayName}</Card.Header>
+        <Card.Meta>
+          <span className='date'>{sensorItem.item.description}</span>
+        </Card.Meta>
+        <Card.Description>{sensorItem.sensor.crawler.name}</Card.Description>
+      </Card.Content>
+      <Card.Content extra>
+        {this.getChart(sensorItem)}
+      </Card.Content>
+    </Card>
+    ));
   }
+  private getChart(sensorItem: SensorItem): JSX.Element {
+    return <LoadChartLinux itemKey={'cpu.load.all'} />;
+  }
+
+  // private handleSort = (col: string, direction: string): void => {
+  //   console.log(col + ' || direction:' + direction);
+  //   this.sortCol = col;
+  //   this.sortDirection = direction;
+  //   this.getData();
+  // }
+  // private handlePaging = (pageNo: number) => {
+  //   this.pageNo = pageNo;
+  //   const pageParams: PageParams = {
+  //     pageNo: String(this.pageNo),
+  //     countPerPage: String(this.countPerPage),
+  //     sortCol: this.sortCol,
+  //     sortDirection: this.sortDirection,
+  //   };
+  //   this.props.onReadAllBySensor({ id: this.props.sensorId }, pageParams);
+  // }
+
 }
-
-
-
-// const SensorItemJson: any = [{
-//   'id': 1,
-//   'sensor': {
-//     'id': 1,
-//     'createDate': 1498475947009,
-//     'description': 'My sensor',
-//     'status': {
-//       'id': 1,
-//       'name': 'RUNNING',
-//     },
-//     'target': {
-//       'id': 1,
-//       'createDate': 1501154289555,
-//       'displayName': 'ghost target',
-//       'description': 'i am target',
-//     },
-//     'crawler': {
-//       'id': 1,
-//       'createDate': 1498794968791,
-//       'name': 'ACTIVEDIRECTORY_CRAWLER',
-//       'description': 'ACTIVEDIRECTORY',
-//     },
-//     'crawlerInputItems': null,
-//   },
-//   'item': {
-//     'id': 1,
-//     'itemType': {
-//       'id': 1,
-//       'name': 'CPU',
-//       'description': 'CPU blah blah blah',
-//       'createDate': 1498474179690,
-//     },
-//     'key': 'cpu.usage',
-//     'name': 'CPU USAGE',
-//     'createDate': 1498475408269,
-//   },
-//   'createDate': 1498476076626,
-// },
-// {
-//   'id': 2,
-//   'sensor': {
-//     'id': 1,
-//     'createDate': 1498475947074,
-//     'description': 'My sensor',
-//     'status': {
-//       'id': 1,
-//       'name': 'RUNNING',
-//     },
-//     'target': {
-//       'id': 1,
-//       'createDate': 1501154289555,
-//       'displayName': 'ghost target',
-//       'description': 'i am target',
-//     },
-//     'crawler': {
-//       'id': 1,
-//       'createDate': 1498794968791,
-//       'name': 'ACTIVEDIRECTORY_CRAWLER',
-//       'description': 'ACTIVEDIRECTORY',
-//     },
-//     'crawlerInputItems': null,
-//   },
-//   'item': {
-//     'id': 2,
-//     'itemType': {
-//       'id': 1,
-//       'name': 'CPU',
-//       'description': 'CPU blah blah blah',
-//       'createDate': 1498474179690,
-//     },
-//     'key': 'cpu.free',
-//     'name': 'CPU FREE',
-//     'createDate': 1498475408361,
-//   },
-//   'createDate': 1498476110988,
-// },
-// ];
diff --git a/src/ts/@overflow/sensor/react/components/SensorList.tsx b/src/ts/@overflow/sensor/react/components/SensorList.tsx
index cc74cb3..edcd134 100644
--- a/src/ts/@overflow/sensor/react/components/SensorList.tsx
+++ b/src/ts/@overflow/sensor/react/components/SensorList.tsx
@@ -132,7 +132,7 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
                 </Table.Cell>
                 <Table.Cell><Header size='small'>{sensor.crawler.name}</Header></Table.Cell>
                 <Table.Cell>{sensor.description}</Table.Cell>
-                <Table.Cell>to do</Table.Cell>
+                <Table.Cell>{sensor.itemCount}</Table.Cell>
                 {/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
               </Table.Row>
             )) : ''}
diff --git a/src/ts/@overflow/target/api/model/Target.ts b/src/ts/@overflow/target/api/model/Target.ts
index f48f388..245ef57 100644
--- a/src/ts/@overflow/target/api/model/Target.ts
+++ b/src/ts/@overflow/target/api/model/Target.ts
@@ -1,11 +1,13 @@
 import Probe from '@overflow/probe/api/model/Probe';
 import Infra from '@overflow/infra/api/model/Infra';
+import Sensor from '@overflow/sensor/api/model/Sensor';
 
 interface Target {
   id?: number;
   createDate?: Date;
   displayName?: string;
   description?: string;
+  sensors?: Sensor[];
 }
 
 export default Target;
diff --git a/src/ts/@overflow/target/react/components/TargetDetail.tsx b/src/ts/@overflow/target/react/components/TargetDetail.tsx
index b8e2748..19e4da7 100644
--- a/src/ts/@overflow/target/react/components/TargetDetail.tsx
+++ b/src/ts/@overflow/target/react/components/TargetDetail.tsx
@@ -11,7 +11,7 @@ import InfraOSApplication from '@overflow/infra/api/model/InfraOSApplication';
 import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon';
 import InfraOSPort from '@overflow/infra/api/model/InfraOSPort';
 import InfraService from '@overflow/infra/api/model/InfraService';
-
+import Sensor from '@overflow/sensor/api/model/Sensor';
 
 import * as Utils from '@overflow/commons/util/Utils';
 
@@ -113,10 +113,10 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
 
             <Table.Row>
               <Table.Cell collapsing>
-                <Header size='small'>Sensor Count</Header>
+                <Header size='small'>Sensors</Header>
               </Table.Cell>
               <Table.Cell>
-                TODO
+                {this.listSensors()}
               </Table.Cell>
             </Table.Row>
 
@@ -142,4 +142,13 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
       </Container>
     );
   }
+
+  private listSensors = (): any => {
+    if (this.props.infra.target.sensors === null || this.props.infra.target.sensors.length === 0) {
+      return <div>-</div>;
+    }
+    return this.props.infra.target.sensors.map((sensor: Sensor, index: number) => (
+      <div key={index}>{sensor.crawler.name}</div>
+    ));
+  }
 }
diff --git a/src/ts/@overflow/target/react/components/TargetList.tsx b/src/ts/@overflow/target/react/components/TargetList.tsx
index 521b32d..a652b89 100644
--- a/src/ts/@overflow/target/react/components/TargetList.tsx
+++ b/src/ts/@overflow/target/react/components/TargetList.tsx
@@ -12,7 +12,7 @@ import { Pager } from '@overflow/commons/react/component/Pager';
 import * as Utils from '@overflow/commons/util/Utils';
 import PageParams from '@overflow/commons/api/model/PageParams';
 import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
-
+import Sensor from '@overflow/sensor/api/model/Sensor';
 
 export interface StateProps {
   probeId?: string;
@@ -134,7 +134,7 @@ export class TargetList extends React.Component<Props, State> {
     colsmap.set('No.', 'id');
     colsmap.set('Type', 'infraType.name');
     colsmap.set('Name', 'target.displayName');
-    colsmap.set('Sensor Count', 'sensorCount');
+    colsmap.set('Sensors', 'target.sensors');
     colsmap.set('Created at', 'createDate');
 
     if (this.props.infraList === undefined) {
@@ -162,7 +162,9 @@ export class TargetList extends React.Component<Props, State> {
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
                 <Table.Cell textAlign={'center'}>{infra.infraType.name}</Table.Cell>
                 <Table.Cell textAlign={'center'}>{infra.target.displayName}</Table.Cell>
-                <Table.Cell>TODO</Table.Cell>
+                <Table.Cell>
+                  {this.listSensors(infra)}
+                </Table.Cell>
                 <Table.Cell>{Utils.date2date(infra.target.createDate)}</Table.Cell>
               </Table.Row>
             ))}
@@ -190,6 +192,15 @@ export class TargetList extends React.Component<Props, State> {
     );
   }
 
+  private listSensors = (infra: Infra): any => {
+    if (infra.target.sensors.length === 0) {
+      return <div>-</div>;
+    }
+    return infra.target.sensors.map((sensor: Sensor, index: number) => (
+      <div key={index}>{sensor.crawler.name}</div>
+    ));
+  }
+
   private handleSelectedTarget = (infra: Infra): void => {
     console.log('handleSelectedTarget ');
     this.setState({ selected: infra });