tab

src/ts/containers/test/Components.tsx

@@ -1,42 +1,33 @@
 import * as React from 'react';
-import { Button } from 'semantic-ui-react';
 import { Probes } from './Probes';
 import { NoauthProbes } from './NoauthProbes';
 import { SensorConfiguration } from './SensorConfiguration';
 import { Targets } from './Targets';
+import { Tab } from './commons/Tab';
 
-import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab';
-
+// import Tab, { TabProps } from 'semantic-ui-react/dist/commonjs/modules/Tab'; 
 
 export class Components extends React.Component<any, any> {
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = {
-      no: 0,
     };
   }
 
-  handleButton(n: number): void {
-    this.setState({
-      no: n,
-    });
-  }
-
   render() {
 
-    const panes = [
-      { menuItem: 'Probes', render: () => <Tab.Pane attached={false}><Probes /></Tab.Pane> },
-      { menuItem: 'Noauth Probes', render: () => <Tab.Pane attached={false}><NoauthProbes /></Tab.Pane> },
-      { menuItem: 'Sensor Configuration', render: () => <Tab.Pane attached={false}><SensorConfiguration /></Tab.Pane> },
-      { menuItem: 'Targets', render: () => <Tab.Pane attached={false}><Targets /></Tab.Pane> },
+    const items = [
+      { name: 'Probes', child: <Probes /> },
+      { name: 'NoauthProbes', child: <NoauthProbes /> },
+      { name: 'SensorConfiguration', child: <SensorConfiguration /> },
+      { name: 'Targets', child: <Targets /> },
     ];
 
     return (
-      <Tab menu={{ pointing: true }} panes={panes} />
+      <Tab panes={items} />
     );
   }
 }
 
 
-

src/ts/containers/test/Probes.tsx

@@ -80,23 +80,25 @@ export class Probes extends React.Component<any, any> {
 
     return (
       <div>
-        <Table celled selectable striped>
+        <Table celled selectable striped collapsing>
           <Table.Header>
             <Table.Row>
-              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>CIDR</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Probe Key</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Target Count</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Sensor Count</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
 
           <Table.Body>
             {this.data.map((probe: any, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, probe)}>
-                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)} textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
-                <Table.Cell>{probe.probeKey}</Table.Cell>
-                <Table.Cell>{probe.description}</Table.Cell>
+                <Table.Cell >todo. {probe.name}</Table.Cell>
+                <Table.Cell>todo. {probe.cidr}</Table.Cell>
+                <Table.Cell negative={this.checkCellStatus(probe.metaProbeStatus)}  textAlign={'center'}>{probe.metaProbeStatus.name}</Table.Cell>
+                <Table.Cell textAlign={'center'} >todo. {probe.targetCnt}</Table.Cell>
+                <Table.Cell textAlign={'center'} >todo. {probe.sensorCnt}</Table.Cell>
               </Table.Row>
             ))}
           </Table.Body>

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Menu, Segment } from 'semantic-ui-react';
+
+export class Tab extends React.Component<any, any> {
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {
+            active: 0,
+        };
+    }
+
+    showContents() {
+        return this.props.panes[this.state.active].child;
+    }
+
+    handleClick(index: number) {
+        this.setState({
+            active: index,
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <Menu tabular>
+                    {this.props.panes.map((pane: any, index: number) => (
+                        <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
+                    ))}
+                </Menu>
+
+                <Segment>
+                    {this.showContents()}
+                </Segment>
+            </div>
+        );
+    }
+}