fixed sensor config

src/ts/@overflow/sensor/react/components/sensor_config.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
-  List, Icon,
+  List, Icon, Grid,
 } from 'semantic-ui-react';
-import {SensorConfigTarget} from './sensor_config_target';
-import {SensorConfigCrawler} from './sensor_config_crawler';
-import {SensorConfigAuthCrawler} from './sensor_config_auth_crawler';
-import {SensorConfigItem} from './sensor_config_item';
+import { SensorConfigTarget } from './sensor_config_target';
+import { SensorConfigCrawler } from './sensor_config_crawler';
+import { SensorConfigAuthCrawler } from './sensor_config_auth_crawler';
+import { SensorConfigItem } from './sensor_config_item';
+import { SensorConfigSetting } from './sensor_config_setting';
 
 export interface StateProps {
 }
@@ -33,15 +34,33 @@ export class SensorConfig extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Container>
-        Target Select
+        <Grid columns={2} divided>
+          <Grid.Row>
+            <Grid.Column >
+              Target Select
         <SensorConfigTarget />
-        Crawler Select
-        <SensorConfigCrawler />
-        Auth Crawler
+            </Grid.Column>
+            <Grid.Column>
+              Auth Crawler
         <SensorConfigAuthCrawler />
-        Sensor Item
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row>
+            <Grid.Column>
+              Crawler Select
+        <SensorConfigCrawler />
+            </Grid.Column>
+            <Grid.Column>
+              Sensor Item
         <SensorConfigItem />
-        {/* <SensorConfigSetting /> */}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+        Sensor Setting
+        <SensorConfigSetting />
+
+        <Button floated='left'>Cancel</Button>
+        <Button floated='right'>Next</Button>
       </Container>
     );
   }

src/ts/@overflow/sensor/react/components/sensor_config_item.tsx

@@ -33,17 +33,19 @@ export class SensorConfigItem extends React.Component<Props, State> {
         let item: ItemTreeObj = {
           icon: 'chevron up|chevron down',
           isCheckBox: true,
-          label: 'test label',
+          label: 'CPU',
         };
 
         item.children = new Array();
 
-        for(let idx: number = 0; idx < 10; ++idx) {
-          item.children.push({
-            isCheckBox: true,
-            label: 'test label-' + String(idx),
-          });
-        }
+        item.children.push({
+          isCheckBox: true,
+          label: 'CPU Total Usage(%)',
+        });
+        item.children.push({
+          isCheckBox: true,
+          label: 'CPU Free Usage(%)',
+        });
 
         this.state.testItemTreeList.push(item);
       }

src/ts/@overflow/sensor/react/components/sensor_config_setting.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon, Radio, CheckboxProps, InputOnChangeData, Input,
+} from 'semantic-ui-react';
+
+
+
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+
+}
+
+export class SensorConfigSetting extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+        Interval select
+        <SensorConfigSettingNameInterval />
+      </Container>
+    );
+  }
+
+}
+
+
+
+
+export interface NameIntervalStateProps {
+}
+
+export interface NameIntervalDispatchProps {
+}
+
+export type NameIntervalProps = NameIntervalStateProps & NameIntervalDispatchProps;
+
+export interface NameIntervalState {
+  selectedValue: number | string;
+}
+
+export class SensorConfigSettingNameInterval extends React.Component<NameIntervalProps, NameIntervalState> {
+
+  constructor(props: NameIntervalProps, context: NameIntervalState) {
+    super(props, context);
+
+    this.state = {
+      selectedValue: null,
+    };
+  }
+
+  public handleChange = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
+    this.setState({ selectedValue: data.value });
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+         <Input label={'Name'} placeholder={'Sensor 1234'} key={0} onChange={
+              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                {/* this.onChangeAuth(item.name, data.value); */ }
+              }} />
+        <Form>
+          <Form.Field>
+            <Radio
+              label='10'
+              name='intervalGroup'
+              value='10'
+              checked={this.state.selectedValue === '10'}
+              onChange={this.handleChange}
+            />
+          </Form.Field>
+          <Form.Field>
+            <Radio
+              label='15'
+              name='intervalGroup'
+              value='15'
+              checked={this.state.selectedValue === '15'}
+              onChange={this.handleChange}
+            />
+          </Form.Field>
+          <Form.Field>
+            <Radio
+              label='20'
+              name='intervalGroup'
+              value='20'
+              checked={this.state.selectedValue === '20'}
+              onChange={this.handleChange}
+            />
+          </Form.Field>
+        </Form>
+      </Container>
+    );
+  }
+
+}
+
+
+
+export interface TargetInfoStateProps {
+}
+
+export interface TargetInfoDispatchProps {
+}
+
+export type TargetInfoProps = TargetInfoStateProps & TargetInfoDispatchProps;
+
+export interface TargetInfoState {
+
+}
+
+export class SensorConfigSettingTargetInfo extends React.Component<TargetInfoProps, TargetInfoState> {
+
+  constructor(props: TargetInfoProps, context: TargetInfoState) {
+    super(props, context);
+
+    this.state = {
+
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+      </Container>
+    );
+  }
+
+}
+
+
+
+
+export interface SensorItemInfoStateProps {
+}
+
+export interface SensorItemInfoDispatchProps {
+}
+
+export type SensorItemInfoProps = SensorItemInfoStateProps & SensorItemInfoDispatchProps;
+
+export interface SensorItemInfoState {
+
+}
+
+export class SensorConfigSettingSensorItemInfo extends React.Component<SensorItemInfoProps, SensorItemInfoState> {
+
+  constructor(props: SensorItemInfoProps, context: SensorItemInfoState) {
+    super(props, context);
+
+    this.state = {
+
+    };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container>
+      </Container>
+    );
+  }
+
+}

src/ts/@overflow/sensor/react/components/sensor_config_target.tsx

@@ -3,7 +3,7 @@ import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
   List, Icon,
 } from 'semantic-ui-react';
-import { ListContainer } from '@overflow/commons/react/component/ListContainer';
+import {ItemTree, ItemTreeObj} from './item_tree';
 
 
 export interface StateProps {
@@ -15,6 +15,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+  testItemTreeList: Array<ItemTreeObj>;
 }
 
 export class SensorConfigTarget extends React.Component<Props, State> {
@@ -23,39 +24,37 @@ export class SensorConfigTarget extends React.Component<Props, State> {
     super(props, context);
 
     this.state = {
-      selected: null,
+      testItemTreeList: new Array(),
     };
+
+    this.testData();
+  }
+
+  private testData(): void {
+
+    let item: ItemTreeObj = {
+      icon: 'chevron up|chevron down',
+      isCheckBox: false,
+      label: 'Host',
+    };
+
+    item.children = new Array();
+
+    for(let idx: number = 0; idx < 10; ++idx) {
+      item.children.push({
+        isCheckBox: true,
+        label: '192.168.1.' + String(idx + 1),
+      });
+    }
+
+    this.state.testItemTreeList.push(item);
   }
 
 
   public render(): JSX.Element {
     return (
       <Container>
-        <List>
-          <List.Item >
-            <List.Icon name={true ? 'chevron up' : 'chevron down'}
-              onClick={null} />
-            <List.Content>
-              <List.Item>
-                <List.Header>
-                  <Checkbox label={'Host'} checked={true ? true : false} onChange={null} />
-                </List.Header>
-                <List.Description style={{ marginLeft: '26px' }}></List.Description>
-                <List.List onClick={null}>
-                  <List.Item >
-                    <List.Content>
-                      <List.Header>
-                        <Checkbox label={'192.168.1.1 | Linux'} checked={false} onChange={null} />
-                      </List.Header>
-                      <List.Description style={{ marginLeft: '26px' }}>
-                      </List.Description>
-                    </List.Content>
-                  </List.Item>
-                </List.List>
-              </List.Item>
-            </List.Content>
-          </List.Item>
-        </List>
+        <ItemTree ItemTreeList={this.state.testItemTreeList}/>
       </Container>
     );
   }