added config based tab loading

src/App.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import './App.css';
-import ServerTable from './ServerTable';
+import ServerTabLoader from './ServerTabLoader';
 
 class App extends React.Component {
   public render() {
     return (
       <div className="App">
-        <ServerTable />
+        <ServerTabLoader/>
       </div>
     );
   }

src/ServerTabLoader.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import ServerTable from './ServerTable';
+import { Tabs, TabList, TabPanel, Tab } from 'react-tabs';
+import './Tabs.css';
+
+
+export default class ServerTabLoader extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      tabList: []
+    }
+    fetch('/config.json')
+      .then((response) => response.text())
+      .then((jsonStr) => {
+        const jsonObj = JSON.parse(jsonStr);
+        const tabList = _.get<any>(jsonObj, 'tabList', []);
+        this.setState({ tabList });
+      })
+      .catch((e) => {
+        this.setState({ message: e.stack, showMessage: true });
+      });
+  }
+
+  public render() {
+    return (
+      <Tabs>
+        <TabList>
+          {this.state.tabList.map((o: any, i: number) =>
+            (<Tab key={i}>{o.tabTitle}</Tab>)
+          )}
+        </TabList>
+        {this.state.tabList.map((o: any, i: number) =>
+          (<TabPanel key={i}>
+            <ServerTable csvFile={o.fileName} />
+          </TabPanel>
+          )
+        )}
+      </Tabs>
+    )
+  }
+}

src/ServerTable.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Tips } from "./Utils";
 import * as _ from 'lodash';
-import { Chart } from './Chart';
+// import { Chart } from './Chart';
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
 import * as Papa from 'papaparse';
@@ -23,7 +23,7 @@ export default class ServerTable extends React.Component<any, any> {
         data: results.data
       });
     }
-    Papa.parse('/data.csv', {
+    Papa.parse(this.props.csvFile, {
       header: true,
       download: true,
       skipEmptyLines: true,
@@ -54,10 +54,11 @@ export default class ServerTable extends React.Component<any, any> {
         filterable={true}
         defaultFilterMethod={filterPart}
         columns={headerCols}
-        defaultPageSize={20}
+        showPagination={false}
+        defaultPageSize={100}
         className="-striped -highlight"
         style={{
-          height: "450px"
+          height: "550px"
         }}
       >
         {(state, makeTable, ) => {
@@ -65,7 +66,7 @@ export default class ServerTable extends React.Component<any, any> {
           return (
             <div>
               {makeTable()}
-              <Chart data={lastFiltered} />
+              {/* <Chart data={lastFiltered} /> */}
               <CSVLink data={lastFiltered} filename={"data.csv"}>
                 Click here to download CSV file
               </CSVLink>

src/Tabs.css

@@ -0,0 +1,53 @@
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+  text-align: left;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}