model's arranging

This commit is contained in:
insanity 2017-11-09 17:41:21 +09:00
parent 4e9d0cbcc8
commit d241b62ecd
11 changed files with 102 additions and 138 deletions

View File

@ -34,8 +34,8 @@ export class LoadChartLinux extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<ResponsiveContainer width={'100%'} height={300}> <ResponsiveContainer width={'100%'} height={250}>
<LineChart syncId='sync' width={800} height={300} <LineChart syncId='sync'
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' /> <XAxis dataKey='id' />
<YAxis type='number' domain={[0, 1]} /> <YAxis type='number' domain={[0, 1]} />

View File

@ -1,6 +1,7 @@
import MetaProbeStatus from '@overflow/meta/api/model/MetaProbeStatus'; import MetaProbeStatus from '@overflow/meta/api/model/MetaProbeStatus';
import Domain from '@overflow/domain/api/model/Domain'; import Domain from '@overflow/domain/api/model/Domain';
import Member from '@overflow/member/api/model/Member'; import Member from '@overflow/member/api/model/Member';
import Target from '@overflow/target/api/model/Target';
import InfraHost from '@overflow/infra/api/model/InfraHost'; import InfraHost from '@overflow/infra/api/model/InfraHost';
interface Probe { interface Probe {
@ -11,13 +12,12 @@ interface Probe {
domain?: Domain; domain?: Domain;
probeKey?: string; probeKey?: string;
encryptionKey?: string; encryptionKey?: string;
targetCount?: number;
sensorCount?: number;
displayName?: string; displayName?: string;
cidr?: string; cidr?: string;
authorizeDate?: Date; authorizeDate?: Date;
authorizeMember?: Member; authorizeMember?: Member;
host?: InfraHost; host?: InfraHost;
targets?: Target[];
} }
export default Probe; export default Probe;

View File

@ -3,6 +3,7 @@ import { Table, Header, Container, Form, Checkbox, Button } from 'semantic-ui-re
import { ListContainer } from '@overflow/commons/react/component/ListContainer'; import { ListContainer } from '@overflow/commons/react/component/ListContainer';
import Probe from '@overflow/probe/api/model/Probe'; import Probe from '@overflow/probe/api/model/Probe';
import Domain from '@overflow/domain/api/model/Domain'; import Domain from '@overflow/domain/api/model/Domain';
import Infra from '@overflow/infra/api/model/Infra';
export interface StateProps { export interface StateProps {
probeList?: Probe[]; 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'}>CIDR</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>IP</Table.HeaderCell> <Table.HeaderCell textAlign={'center'}>IP</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell> <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell> <Table.HeaderCell textAlign={'center'}>Targets</Table.HeaderCell>
<Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
@ -121,11 +121,18 @@ export class ProbeList extends React.Component<Props, State> {
<Table.Cell>{probe.cidr}</Table.Cell> <Table.Cell>{probe.cidr}</Table.Cell>
<Table.Cell>todo</Table.Cell> <Table.Cell>todo</Table.Cell>
<Table.Cell negative={this.checkCellStatus(probe.status)} textAlign={'center'}>{probe.status.name}</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'} >{this.listTargets(probe)}</Table.Cell>
<Table.Cell textAlign={'center'} >{probe.sensorCount}</Table.Cell>
</Table.Row> </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> { export class ProbeFilter extends React.Component<any, any> {

View File

@ -10,6 +10,7 @@ interface Sensor {
target?: Target; target?: Target;
crawler?: MetaCrawler; crawler?: MetaCrawler;
crawlerInputItems?: string; crawlerInputItems?: string;
itemCount?: number;
} }
export default Sensor; export default Sensor;

View File

@ -188,7 +188,6 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
sensor.crawler = { id: sensorData.crawler.id }; sensor.crawler = { id: sensorData.crawler.id };
sensor.target = { id: sensorData.infra.target.id }; sensor.target = { id: sensorData.infra.target.id };
sensor.status = { id: MetaSensorStatus_ID.RUNNING }; sensor.status = { id: MetaSensorStatus_ID.RUNNING };
sensor.description = sensorData.infra.infraType.name + '-' + sensorData.crawler.name; sensor.description = sensorData.infra.infraType.name + '-' + sensorData.crawler.name;
let siList: Array<SensorItem> = new Array; 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 }; let etc: any = { interval: sensorData.interval };
@ -240,12 +240,12 @@ export class SensorConfigStepper extends React.Component<SensorConfigStepperProp
<Step.Group fluid> <Step.Group fluid>
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}> <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
<Icon name='settings' color='grey' /> <Icon name='settings' color='grey' />
<Step.Content title='Step 1' description='Choose Target' /> <Step.Content title='Step 1' description='Choose a Target' />
</Step> </Step>
<Step active={this.handleActive(2)} completed={this.handleCompleted(2)}> <Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
<Icon name='list ul' color='grey' /> <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>
<Step active={this.handleActive(3)} completed={this.handleCompleted(3)}> <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>

View File

@ -101,7 +101,7 @@ export class SensorDetailInfo extends React.Component<SensorDetailInfoProps, Sen
<Table.Cell> <Table.Cell>
<Header size='small'>Item Count</Header> <Header size='small'>Item Count</Header>
</Table.Cell> </Table.Cell>
<Table.Cell>{44}</Table.Cell> <Table.Cell>{this.props.sensor.itemCount}</Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.Cell> <Table.Cell>

View File

@ -1,5 +1,5 @@
import * as React from 'react'; 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 Sensor from '@overflow/sensor/api/model/Sensor';
import SensorItem from '@overflow/sensor/api/model/SensorItem'; 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 { Pager } from '@overflow/commons/react/component/Pager';
import PageParams from '@overflow/commons/api/model/PageParams'; import PageParams from '@overflow/commons/api/model/PageParams';
import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow'; import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
import { LoadChartLinux } from '@overflow/metric/react/components/chart/LoadChartLinux';
export interface StateProps { export interface StateProps {
sensorId?: number; sensorId?: number;
@ -26,9 +27,9 @@ export interface State {
export class SensorDetailItems extends React.Component<Props, State> { export class SensorDetailItems extends React.Component<Props, State> {
private countPerPage: number = 10; private countPerPage: number = 100000;
private sortCol: string = 'id'; private sortCol: string = 'id';
private sortDirection: string = 'descending'; private sortDirection: string = 'ascending';
private pageNo: number = 0; private pageNo: number = 0;
constructor(props: Props, context: State) { 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); 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 { public render(): JSX.Element {
if (this.props.sensorItemList === undefined) { if (this.props.sensorItemList === undefined) {
return null; return null;
} }
let colsmap: Map<string, string> = new Map(); // let colsmap: Map<string, string> = new Map();
colsmap.set('No.', 'id'); // colsmap.set('Type', 'item.itemType.name');
colsmap.set('Type', 'item.itemType.name'); // colsmap.set('Name', 'item.displayName');
colsmap.set('Name', 'item.name'); // colsmap.set('Unit', 'item.unit.mark');
colsmap.set('Key', 'item.key'); // colsmap.set('Description', 'item.description');
return ( return (
<Container fluid> <Container fluid>
<Table celled sortable> {this.renderSensorItemInfo()}
{/* <Table celled sortable>
<Table.Header> <Table.Header>
<SortTableHeaderRow columnMap={colsmap} onHeaderColumnClick={this.handleSort} /> <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.Header>
<Table.Body> <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) => { this.props.sensorItemList.content ? this.props.sensorItemList.content.map((sensorItem: SensorItem, idx: number) => {
return ( return (
<Table.Row key={idx}> <Table.Row key={idx}>
<Table.Cell>{idx}</Table.Cell> <Table.Cell collapsing>{sensorItem.item.itemType.name}</Table.Cell>
<Table.Cell>{sensorItem.item.itemType.name}</Table.Cell> <Table.Cell collapsing>{sensorItem.item.displayName}</Table.Cell>
<Table.Cell>{sensorItem.item.name}</Table.Cell> <Table.Cell collapsing textAlign='center'>{sensorItem.item.unit.mark}</Table.Cell>
<Table.Cell>{sensorItem.item.key}</Table.Cell> <Table.Cell>{sensorItem.item.description}</Table.Cell>
</Table.Row> </Table.Row>
); );
}) : '' }) : ''
@ -109,94 +92,45 @@ export class SensorDetailItems extends React.Component<Props, State> {
</Table.HeaderCell> </Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Footer> </Table.Footer>
</Table> </Table> */}
</Container> </Container>
); );
} }
private handleSort = (col: string, direction: string): void => { private renderSensorItemInfo(): JSX.Element {
console.log(col + ' || direction:' + direction); return this.props.sensorItemList.content.map((sensorItem: SensorItem, index: number) => (
this.sortCol = col; <Card fluid key={index}>
this.sortDirection = direction; <Card.Content>
this.getData(); <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,
// },
// ];

View File

@ -132,7 +132,7 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
</Table.Cell> </Table.Cell>
<Table.Cell><Header size='small'>{sensor.crawler.name}</Header></Table.Cell> <Table.Cell><Header size='small'>{sensor.crawler.name}</Header></Table.Cell>
<Table.Cell>{sensor.description}</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.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
</Table.Row> </Table.Row>
)) : ''} )) : ''}

View File

@ -1,11 +1,13 @@
import Probe from '@overflow/probe/api/model/Probe'; import Probe from '@overflow/probe/api/model/Probe';
import Infra from '@overflow/infra/api/model/Infra'; import Infra from '@overflow/infra/api/model/Infra';
import Sensor from '@overflow/sensor/api/model/Sensor';
interface Target { interface Target {
id?: number; id?: number;
createDate?: Date; createDate?: Date;
displayName?: string; displayName?: string;
description?: string; description?: string;
sensors?: Sensor[];
} }
export default Target; export default Target;

View File

@ -11,7 +11,7 @@ import InfraOSApplication from '@overflow/infra/api/model/InfraOSApplication';
import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon'; import InfraOSDaemon from '@overflow/infra/api/model/InfraOSDaemon';
import InfraOSPort from '@overflow/infra/api/model/InfraOSPort'; import InfraOSPort from '@overflow/infra/api/model/InfraOSPort';
import InfraService from '@overflow/infra/api/model/InfraService'; import InfraService from '@overflow/infra/api/model/InfraService';
import Sensor from '@overflow/sensor/api/model/Sensor';
import * as Utils from '@overflow/commons/util/Utils'; import * as Utils from '@overflow/commons/util/Utils';
@ -113,10 +113,10 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
<Table.Row> <Table.Row>
<Table.Cell collapsing> <Table.Cell collapsing>
<Header size='small'>Sensor Count</Header> <Header size='small'>Sensors</Header>
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
TODO {this.listSensors()}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
@ -142,4 +142,13 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
</Container> </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>
));
}
} }

View File

@ -12,7 +12,7 @@ import { Pager } from '@overflow/commons/react/component/Pager';
import * as Utils from '@overflow/commons/util/Utils'; import * as Utils from '@overflow/commons/util/Utils';
import PageParams from '@overflow/commons/api/model/PageParams'; import PageParams from '@overflow/commons/api/model/PageParams';
import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow'; import { SortTableHeaderRow } from '@overflow/commons/react/component/SortTableHeaderRow';
import Sensor from '@overflow/sensor/api/model/Sensor';
export interface StateProps { export interface StateProps {
probeId?: string; probeId?: string;
@ -134,7 +134,7 @@ export class TargetList extends React.Component<Props, State> {
colsmap.set('No.', 'id'); colsmap.set('No.', 'id');
colsmap.set('Type', 'infraType.name'); colsmap.set('Type', 'infraType.name');
colsmap.set('Name', 'target.displayName'); colsmap.set('Name', 'target.displayName');
colsmap.set('Sensor Count', 'sensorCount'); colsmap.set('Sensors', 'target.sensors');
colsmap.set('Created at', 'createDate'); colsmap.set('Created at', 'createDate');
if (this.props.infraList === undefined) { 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'}>{index + 1}</Table.Cell>
<Table.Cell textAlign={'center'}>{infra.infraType.name}</Table.Cell> <Table.Cell textAlign={'center'}>{infra.infraType.name}</Table.Cell>
<Table.Cell textAlign={'center'}>{infra.target.displayName}</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.Cell>{Utils.date2date(infra.target.createDate)}</Table.Cell>
</Table.Row> </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 => { private handleSelectedTarget = (infra: Infra): void => {
console.log('handleSelectedTarget '); console.log('handleSelectedTarget ');
this.setState({ selected: infra }); this.setState({ selected: infra });