tree .....

src/ts/Routes.tsx

@@ -10,16 +10,16 @@ import { ProbeDown } from './containers/test/ProbeDown';
 import { DiscoveryDetails } from './containers/test/DiscoveryDetails'
 import { Components } from './containers/test/Components';
 // import { Layout } from './containers/test/layout/Layout'
-
+import { Tree } from './containers/test/commons/Tree';
 
 export class Blank extends React.Component<any, any> {
-render() {
+  render() {
     return (<div>
 
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 
     </div>);
-}
+  }
 }
 
 
@@ -50,8 +50,10 @@ export class Routes extends React.Component<any, any> {
           <Route exact path='/test4' component={PWChange} />
           <Route exact path='/test5' component={ProbeDown} />
           <Route exact path='/test6' component={DiscoveryDetails} />
+          <Route exact path='/test7' component={Tree} />
 
           <Route exact path='/test14' component={Components} />
+
         </Switch>
 
       </div>

src/ts/containers/test/TopBar.tsx

@@ -87,6 +87,7 @@ export class TopBar extends React.Component<any, any> {
               <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
               <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
               <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
+              <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
           

src/ts/containers/test/commons/Tree.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Checkbox, Container, Label, Accordion, Icon, List, ListItemProps } from 'semantic-ui-react';
+
+
+
+export class Tree extends React.Component<any, any> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+    };
+  }
+
+  render() {
+    return (
+      <Container>
+        <List>
+          <List.Item selection>
+            <Label basic onClick={() => {
+              this.setState({tt:!this.state.tt});
+              }}>Host</Label>
+            <Checkbox />
+          </List.Item>
+         {this.state.tt ?  <List.Item selection >
+            <List.List>
+              <List.Item>Port 22 NOR</List.Item>
+              <List.Item>Port 443 TLS</List.Item>
+              <List.Item>Port 80 NOR </List.Item>
+            </List.List>
+          </List.Item> : ''}
+        </List>
+      </Container>
+    );
+  }
+}
+
+
+