Merge remote-tracking branch 'origin/master'

src/ts/@overflow/meta/react/components/SensorItemTree.tsx

@@ -2,7 +2,16 @@ import * as React from 'react';
 import * as _ from 'lodash';
 // import update from 'immutability-helper';
 
-import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
+import {
+  Checkbox,
+  Container,
+  Label,
+  Accordion,
+  Icon,
+  List, Button,
+  ListItemProps,
+  CheckboxProps,
+} from 'semantic-ui-react';
 
 
 import MetaSensorItemType from '../../api/model/MetaSensorItemType';
@@ -26,22 +35,24 @@ export type SensorItemTreeProps = SensorItemTreeStateProps & SensorItemTreeDispa
 
 export interface SensorItemTreeState {
   categoryState: Map<number, boolean>;
-  itemState: Map<number, boolean[]>;
+  itemState: Map<number, Array<boolean>>;
 }
 
 interface TreeItem {
-  metaSensorItemList: MetaSensorItem[];
+  metaSensorItemList: Array<MetaSensorItem>;
   metaSensorItemType: MetaSensorItemType;
 }
 
 export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorItemTreeState> {
 
   private itemMap: Map<number, TreeItem>;
+  private selectedItemMap: Map<number, Array<MetaSensorItem>>;
 
   constructor(props: any, context: any) {
     super(props, context);
 
     this.itemMap = new Map;
+    this.selectedItemMap = new Map,
 
       this.state = {
         categoryState: new Map(),
@@ -64,27 +75,41 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
         item.metaSensorItemList = [];
         item.metaSensorItemList.push(sensorItem);
         item.metaSensorItemType = this.GetMetaSensorItemType(sensorItem.metaSensorItemType.id);
-        this.itemMap.set(sensorItem.id, item);
+        this.itemMap.set(sensorItem.metaSensorItemType.id, item);
       }
     });
   }
 
   public ViewSensorItemType(): JSX.Element[] {
     let elems: JSX.Element[] = new Array();
+
     this.itemMap.forEach((data: TreeItem, key: number) => {
-      // this.state.portState[key] = false;
+      // this.state.itemState[key] = new Array(data.metaSensorItemList.length).fill(false);
       elems.push(
-        <List.Item key={key} >
+        <List.Item key={key + 1} >
           <List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} onClick={() => {
 
             {/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
-            let newCategoryState: Map<number, boolean> = _.cloneDeep(this.state.categoryState);
+            let newCategoryState: Map<number, boolean> = _.clone(this.state.categoryState);
             newCategoryState[key] = !newCategoryState[key];
             this.setState({ categoryState: newCategoryState });
 
           }} />
           <List.Content>
-            <List.Header> <Checkbox label={data.metaSensorItemType.name} />   </List.Header>
+            <List.Header> <Checkbox label={data.metaSensorItemType.name} onChange={
+              (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
+                if (newItemState[key] === undefined) {
+                  newItemState[key] = new Array(data.metaSensorItemList.length).fill(false);
+                }
+                newItemState[key].fill(checkProps.checked);
+                if (checkProps.checked) {
+                  this.selectedItemMap[key] = _.clone(data.metaSensorItemList);
+                } else {
+                  this.selectedItemMap[key].length = 0;
+                }
+                this.setState({ itemState: newItemState });
+              }} />   </List.Header>
             <List.Description>Category</List.Description>
             {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
           </List.Content>
@@ -97,21 +122,38 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
 
   public ViewSensorItem(metaSensorItemList: MetaSensorItem[], parentKey: number): JSX.Element[] {
     let elems: JSX.Element[] = new Array();
+
+    if (this.state.itemState[parentKey] === undefined) {
+      this.state.itemState[parentKey] = new Array(metaSensorItemList.length).fill(false);
+    }
+
     metaSensorItemList.map((item: MetaSensorItem, idx: number) => {
-      let checkList: boolean[] = this.state.itemState[parentKey];
       elems.push(
         <List.List key={String(parentKey) + String(idx)} onClick={() => {
 
           {/*let newPortState: Map<number, boolean> = new Map(this.state.portState);*/ }
-          let newItemState: Map<number, boolean[]> = _.cloneDeep(this.state.itemState[parentKey]);
+          let newItemState: Map<number, Array<boolean>> = _.clone(this.state.itemState);
-          newItemState[idx] = !newItemState[idx];
+          newItemState[parentKey][idx] = !newItemState[parentKey][idx];
           this.setState({ itemState: newItemState });
 
         }}>
           <List.Item >
             <List.Icon name='file' />
             <List.Content>
-              <List.Header> <Checkbox label={item.name} checked={checkList[idx]} /></List.Header>
+              <List.Header> <Checkbox label={item.name} checked={this.state.itemState[parentKey][idx]} onChange={
+                (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
+                  if(this.selectedItemMap[parentKey] === undefined) {
+                    this.selectedItemMap[parentKey] = [];
+                  }
+                  if (checkProps.checked) {
+                    this.selectedItemMap[parentKey].push(item);
+                  } else {
+                    let index: number = this.selectedItemMap[parentKey].indexOf(item);
+                    if(index >= 0) {
+                      this.selectedItemMap[parentKey].splice(index, 1);
+                    }
+                  }
+                }} /></List.Header>
               <List.Description>Sensor Item</List.Description>
             </List.Content>
           </List.Item>
@@ -128,6 +170,9 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
         <List selection>
           {this.ViewSensorItemType()}
         </List>
+        <Button label='test' onClick={() => {
+          console.log(this.selectedItemMap);
+        }} />
       </Container>
     );
   }

src/ts/@overflow/probe/react/components/ProbeDown.tsx

@@ -4,8 +4,8 @@ import {
   Menu,
   Segment,
   MenuItemProps,
-  Header,
   Container,
+  Icon,
 } from 'semantic-ui-react';
 
 export interface StateProps {
@@ -19,45 +19,84 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  activeItem: string[];
+  activeItem: string;
 }
 
-const osNames = ['Windows', 'Debian', 'Ubuntu', 'Fedora', 'CentOS'];
+const osNames = [
+  {
+    'name': 'Windows',
+    'icon': 'windows',
+  },
+  {
+    'name': 'Ubuntu',
+    'icon': 'linux',
+  },
+  {
+    'name': 'Fedora',
+    'icon': 'linux',
+  },
+  {
+    'name': 'CentOS',
+    'icon': 'linux',
+  },
+];
 
 export class ProbeDown extends React.Component<any, any> {
   constructor(props: Props, context: State) {
     super(props, context);
-
+    this.state = {
-    this.state = { activeItem: osNames[0] };
+      activeItem: '',
+    };
   }
 
   public handleItemClick = (event: React.SyntheticEvent<HTMLAnchorElement>, data: MenuItemProps): void => {
     this.setState({ activeItem: data.name });
+  }
 
-    console.log(data.name);
+  public ShowContent = (): JSX.Element => {
+    let os = this.state.activeItem;
+    if(os === '') {
+      return <div>Instruction page.</div>;
+    }
+    switch (os) {
+      case 'Windows': {
+        return <Windows />;
+      }
+      case 'Ubuntu': {
+        return <Ubuntu />;
+      }
+      case 'Fedora': {
+        return <Fedora />;
+      }
+      case 'CentOS': {
+        return <CentOS />;
+      }
+      default:
+        break;
+    }
+    return null;
   }
 
   public render(): JSX.Element {
-
-    const { activeItem } = this.state.activeItem;
     return (
       <Container fluid>
-        <Header as='h3' dividing>Probe Download</Header>
         <Grid>
           <Grid.Column width={4}>
-            <Menu fluid vertical tabular>
+            <Menu fluid vertical icon='labeled' pointing>
-              {osNames.map((os: string) => {
+              {osNames.map((item: any, index: number) => {
                 return (
-                  <Menu.Item name={os} active={activeItem === os} onClick={this.handleItemClick} />
+                  <Menu.Item key={index} name={item.name} active={this.state.activeItem === item.name} onClick={this.handleItemClick} >
+                    <Icon name={item.icon} />
+                    {item.name}
+                  </Menu.Item>
                 );
               })}
             </Menu>
           </Grid.Column>
 
-
           <Grid.Column stretched width={12}>
-            <Segment vertical>
+            <Segment>
-              {this.state.activeItem} Download Page
+              {this.ShowContent()}
             </Segment>
           </Grid.Column>
         </Grid>
@@ -66,3 +105,58 @@ export class ProbeDown extends React.Component<any, any> {
   }
 }
 
+export class Windows extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div>
+        Windows Download Page
+      </div>
+    );
+  }
+}
+
+export class Ubuntu extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        Ubuntu Download Page
+      </Container>
+    );
+  }
+}
+
+export class Fedora extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        Fedora Download Page
+      </Container>
+    );
+  }
+}
+
+export class CentOS extends React.Component<any, any> {
+  constructor(props: Props, context: State) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Container fluid>
+        CentOS Download Page
+      </Container>
+    );
+  }
+}

src/ts/@overflow/sensor/react/SensorList.tsx

@@ -1,4 +1,6 @@
 import { connect, Dispatch } from 'react-redux';
+import { push as routerPush } from 'react-router-redux';
+
 import {
   SensorList,
   StateProps as SensorListStateProps,
@@ -6,6 +8,7 @@ import {
 } from './components/SensorList';
 import State from '../redux/state/ReadAllByTarget';
 
+
 import * as ReadAllByTargetActions from '../redux/action/read_all_by_target';
 import * as ReadAllByProbeActions from '../redux/action/read_all_by_probe';
 import * as ReadAllByDomainActions from '../redux/action/read_all_by_domain';
@@ -30,6 +33,9 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): SensorListDispatchP
     onReadAllByDomain: (domain: Domain) => {
       dispatch(ReadAllByDomainActions.request(domain));
     },
+    onSensorSelect: (id: number) => {
+      dispatch(routerPush('/sensor/' + String(id)));
+    },
   };
 }
 

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

@@ -16,12 +16,12 @@ export interface DispatchProps {
   onReadAllByTarget?(target: Target): void;
   onReadAllByProbe?(probe: Probe): void;
   onReadAllByDomain?(domain: Domain): void;
+  onSensorSelect?(id: number): void;
 }
 
 export type SensorListProps = StateProps & DispatchProps;
 
 export interface SensorListState {
-  isDetail: boolean;
   selected: Sensor;
 }
 
@@ -34,7 +34,6 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
     super(props, context);
     this.state = {
       selected: null,
-      isDetail: false, // temp
     };
   }
 
@@ -92,8 +91,9 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
   public handleSelect(selectedSensor: Sensor): void {
     this.setState({
       selected: selectedSensor,
-      isDetail: true,
     });
+
+    this.props.onSensorSelect(selectedSensor.id);
   }
 
   public checkCellStatus(status: any): boolean {
@@ -119,10 +119,6 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
   }
 
   public render(): JSX.Element {
-    if (this.state.isDetail) {
-      // return (<SensorDetailContainer sensor={this.state.selected} />);
-       return (<SensorDetailContainer />);
-    }
     return (
       <Container fluid>
         <Header as='h3' dividing>Sensors</Header>