model's arranging

2017-11-09 17:41:21 +09:00 · 2017-11-09 17:41:21 +09:00 · d241b62ecd
commit d241b62ecd
parent 4e9d0cbcc8
11 changed files with 102 additions and 138 deletions
--- 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]} />
--- 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;
--- 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> {
--- 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;
--- 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)}>
--- 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>
--- 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,
-// },
-// ];
--- 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>
            )) : ''}
--- 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;
--- 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>
+    ));
+  }
 }
--- 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 });