tree .....

src/ts/Routes.tsx

@@ -10,21 +10,21 @@ 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() {
-  return (<div>
+  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 />
+      <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>);
-}
+    </div>);
+  }
 }
 
 
 export class Routes extends React.Component<any, any> {
-   constructor(props: any, context: any) {
+  constructor(props: any, context: any) {
     super(props, context);
   }
   render() {
@@ -43,15 +43,17 @@ export class Routes extends React.Component<any, any> {
 
 
         <Switch>
-          
+
           <Route exact path='/' component={Blank} />
           <Route exact path='/test2' component={SignUp} />
           <Route exact path='/test3' component={SignIn} />
           <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>
+    );
+  }
+}
+
+
+