Simple tab-based menu to have a contianer for strategies

lib/strategyApi.js

@@ -2,7 +2,7 @@ var strategies = [
     {name: "default"},
     {
         name: "activeForUsers",
-        configurationTemplate: {
+        parametersTemplate: {
             userNames: "String"
         }
     }
@@ -17,7 +17,7 @@ function byName(name) {
 module.exports = function (app) {
 
     app.get('/strategies', function (req, res) {
-        res.json({features: strategies});
+        res.json({strategies: strategies});
     });
 
     app.get('/strategies/:name', function (req, res) {

public/js/app.jsx

@@ -1,7 +1,31 @@
 var React   = require('react');
+var TabView  = require('./components/TabView');
+var Menu    = require('./components/Menu');
 var Unleash = require('./components/Unleash');
+var Strategy = require('./components/strategy/StrategyComponent');
+
+var tabPanes = [
+    {
+        name: "Feature Toggles",
+        content: new Unleash({pollInterval: 5000})
+    },
+    {
+        name: "Strategies",
+        content: new Strategy({})
+    }
+
+
+];
 
 React.render(
-    <Unleash pollInterval={5000} />,
+    <div>
+        <Menu />
+        <div className="container">
+            <div className="page">
+                <TabView tabPanes={tabPanes} />
+            </div>
+        </div>
+    </div>
+    ,
     document.getElementById('content')
 );

public/js/components/FeatureList.jsx

@@ -27,10 +27,7 @@ var FeatureList = React.createClass({
         }.bind(this));
 
         return (
-            <div className="container">
+            <div>
-              <div className="mod shadow mts">
-                <div className="inner">
-                   <div className="bd">
                 <div className="line">
                     <div className="unit r-size1of4">
                         <h2>Features</h2>
@@ -42,12 +39,8 @@ var FeatureList = React.createClass({
                 </div>
 
                 <hr />
-
                 {featureNodes}
             </div>
-                </div>
-              </div>
-            </div>
             );
     }
 });

public/js/components/TabView.jsx

@@ -0,0 +1,48 @@
+var React = require('react');
+
+var TabView = React.createClass({
+    getDefaultProps: function() {
+        return {tabPanes: []};
+    },
+
+    getInitialState: function() {
+        return {activeTab: this.props.tabPanes[0]};
+    },
+
+    handleChangeTab: function(tabPane) {
+        this.setState({activeTab: tabPane});
+    },
+
+    render: function() {
+        var tabNodes = this.props.tabPanes.map(function (tabPane) {
+            return (
+                <li  key={tabPane.name} className={tabPane.name===this.state.activeTab.name ? "active": ""}>
+                    <a  href={"#" + tabPane.name}
+                        onClick={this.handleChangeTab.bind(this, tabPane)}>{tabPane.name}
+                    </a>
+                </li>
+            );
+        }.bind(this));
+
+        return (
+            <div>
+                <ul className="tabs mbn">
+                    {tabNodes}
+                </ul>
+                <div className="tab-content">
+                    <div className="active">
+                        <div className="mod shadow mrn prn">
+                            <div className="inner">
+                                <div className="bd">
+                                    {this.state.activeTab.content}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            );
+    }
+});
+
+module.exports = TabView;

public/js/components/Unleash.jsx

@@ -1,6 +1,5 @@
 var React         = require('react');
 var Timer         = require('../utils/Timer');
-var Menu          = require('./Menu');
 var ErrorMessages = require('./ErrorMessages');
 var FeatureList   = require('./FeatureList');
 var FeatureStore  = require('../stores/FeatureStore');
@@ -116,7 +115,6 @@ var Unleash = React.createClass({
     render: function() {
         return (
             <div>
-              <Menu />
                 <ErrorMessages
                 errors={this.state.errors}
                 onClearErrors={this.clearErrors} />

public/js/components/strategy/StrategyComponent.jsx

@@ -0,0 +1,28 @@
+var React          = require('react'),
+    strategyStore  = require('../../stores/StrategyStore');
+
+var StrategyComponent = React.createClass({
+    getInitialState: function() {
+        return {
+            createView: false,
+            strategies: []
+        };
+    },
+
+    componentDidMount: function () {
+        strategyStore.getStrategies().then(function(res) {
+            this.setState({strategies: res.strategies});
+        }.bind(this));
+    },
+
+    render: function() {
+        return (
+            <div>
+                <h1>Strategies</h1>
+                {JSON.stringify(this.state.strategies)}
+            </div>
+            );
+    }
+});
+
+module.exports = StrategyComponent;

public/js/stores/StrategyStore.js

@@ -0,0 +1,26 @@
+var reqwest = require('reqwest');
+
+TYPE         = 'json';
+CONTENT_TYPE = 'application/json';
+
+var StrategyStore = {
+    createStrategy: function (strategy) {
+        return reqwest({
+            url: 'strategies',
+            method: 'post',
+            type: TYPE,
+            contentType: CONTENT_TYPE,
+            data: JSON.stringify(strategy)
+        });
+    },
+
+    getStrategies: function () {
+        return reqwest({
+            url: 'strategies',
+            method: 'get',
+            type: TYPE
+        });
+    }
+};
+
+module.exports = StrategyStore;