fixed sensor config

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

@@ -2,11 +2,12 @@ import * as React from 'react';
 import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
   List, Icon, Radio, CheckboxProps, InputOnChangeData, Input,
-  Grid,
+  Grid, Segment, ButtonProps,
 } from 'semantic-ui-react';
 import { Infra } from '@overflow/infra/api/model/Infra';
 import { InfraHost } from '@overflow/infra/api/model/InfraHost';
 
+import * as _ from 'lodash';
 import * as Utils from '@overflow/commons/util/Utils';
 
 export interface StateProps {
@@ -291,6 +292,7 @@ export type SensorItemInfoProps = SensorItemInfoStateProps & SensorItemInfoDispa
 
 export interface SensorItemInfoState {
   testSensorItemList: Array<any>;
+  notiState: Map<string, boolean>;
 }
 
 export class SensorConfigSettingSensorItemInfo extends React.Component<SensorItemInfoProps, SensorItemInfoState> {
@@ -300,6 +302,7 @@ export class SensorConfigSettingSensorItemInfo extends React.Component<SensorIte
 
     this.state = {
       testSensorItemList: new Array(),
+      notiState: new Map(),
     };
 
     this.testCreateData();
@@ -313,6 +316,40 @@ export class SensorConfigSettingSensorItemInfo extends React.Component<SensorIte
     this.state.testSensorItemList.push({ key: 'Mem Total Usage', unit: '%', realKey: 'wmi.mem.usage.total' });
   }
 
+  public onClickAddNotiOnOff(idx: number): void {
+    let newNotiStateMap: Map<string, boolean> = _.clone(this.state.notiState);
+
+    newNotiStateMap[idx] = newNotiStateMap[idx] === undefined ? true : !newNotiStateMap[idx];
+
+    this.setState({ notiState: newNotiStateMap });
+  }
+
+  public renderAddNoitiInfo(idx: number): JSX.Element {
+
+    if (this.state.notiState[idx]) {
+
+      return (
+        <Grid.Row>
+          <Grid.Column>
+            <Segment>
+              <Form>
+                <Form.Group inline>
+                  <Form.Input placeholder='MIN' />
+                  <Form.Input placeholder='MAX' />
+                  <Form.Checkbox label={{ children: 'local push' }} />
+                  <Form.Checkbox label={{ children: 'email' }} />
+                  <Form.Checkbox label={{ children: 'sms' }} />
+                </Form.Group>
+              </Form>
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>
+      );
+    }
+
+    return null;
+  }
+
   public renderSensorItem(): JSX.Element[] {
 
     let elems: Array<JSX.Element> = new Array();
@@ -320,27 +357,42 @@ export class SensorConfigSettingSensorItemInfo extends React.Component<SensorIte
 
     this.state.testSensorItemList.map((data: any, idx: number) => {
       elems.push(
-        <Table.Row key={'sil' + String(idx)}>
+        <Grid.Row>
-          <Table.Cell collapsing>
+          <Grid.Column>
-            {data.key} ({data.unit})
+            <Segment>{data.key} ({data.unit})</Segment>
-            </Table.Cell>
+          </Grid.Column>
-          <Table.Cell>
+          <Grid.Column>
-            {data.realKey}
+            <Segment>{data.realKey}</Segment>
-          </Table.Cell>
+          </Grid.Column>
-          <Table.Cell>
+          <Grid.Column>
-            [Add Notification]
+            <Segment>
-            </Table.Cell>
+              {this.state.notiState[idx] ?
-        </Table.Row>,
+                <Button.Group basic>
-        <Table.Row key={'siladd' + String(idx)}>
+                  <Button label='Save' />
-          <Table.Cell>
+                  <Button label='Cancel' onClick={
-            <input type='text' placeholder='MIN' />
+                    (event: React.MouseEvent<HTMLButtonElement>, btnData: ButtonProps): void => {
-            <input type='text' placeholder='MAX' />
+                      this.onClickAddNotiOnOff(idx);
-            <Checkbox label={{ children: 'local push' }} />
+                    }
-            <Checkbox label={{ children: 'email' }} />
+                  } />
-            <Checkbox label={{ children: 'sms' }} />
+                </Button.Group>
-          </Table.Cell>
+                :
-        </Table.Row>,
+                <Button.Group basic>
+                  <Button label='Add Notification' onClick={
+                    (event: React.MouseEvent<HTMLButtonElement>, btnData: ButtonProps): void => {
+                      this.onClickAddNotiOnOff(idx);
+                    }
+                  } />
+                </Button.Group>
+              }
+            </Segment>
+          </Grid.Column>
+        </Grid.Row>,
       );
+
+      let addInfo: JSX.Element = this.renderAddNoitiInfo(idx);
+      if (addInfo !== null) {
+        elems.push(addInfo);
+      }
     });
 
     return elems;
@@ -349,11 +401,9 @@ export class SensorConfigSettingSensorItemInfo extends React.Component<SensorIte
   public render(): JSX.Element {
     return (
       <Container>
-        <Table celled={false}>
+        <Grid columns='equal' textAlign='center' >
-          <Table.Body>
+          {this.renderSensorItem()}
-            {this.renderSensorItem()}
+        </Grid>
-          </Table.Body>
-        </Table>
       </Container>
     );
   }