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,28 +27,21 @@ var FeatureList = React.createClass({
         }.bind(this));
 
         return (
-            <div className="container">
+            <div>
-              <div className="mod shadow mts">
+                <div className="line">
-                <div className="inner">
+                    <div className="unit r-size1of4">
-                   <div className="bd">
+                        <h2>Features</h2>
-                     <div className="line">
+                    </div>
-                       <div className="unit r-size1of4">
-                         <h2>Features</h2>
-                       </div>
 
-                       <div className="unit r-size3of4 rightify prl ptm">
+                    <div className="unit r-size3of4 rightify prl ptm">
-                         <button className="" onClick={this.props.onNewFeature}>New</button>
+                        <button className="" onClick={this.props.onNewFeature}>New</button>
-                       </div>
+                    </div>
-                     </div>
-
-                     <hr />
-
-                     {featureNodes}
-                   </div>
                 </div>
-              </div>
+
+                <hr />
+                {featureNodes}
             </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,17 +115,16 @@ var Unleash = React.createClass({
     render: function() {
         return (
             <div>
-              <Menu />
+                <ErrorMessages
-              <ErrorMessages
+                errors={this.state.errors}
-                 errors={this.state.errors}
+                onClearErrors={this.clearErrors} />
-                 onClearErrors={this.clearErrors} />
+                <FeatureList
-              <FeatureList
+                unsavedFeatures={this.state.unsavedFeatures}
-                 unsavedFeatures={this.state.unsavedFeatures}
+                savedFeatures={this.state.savedFeatures}
-                 savedFeatures={this.state.savedFeatures}
+                onFeatureChanged={this.updateFeature}
-                 onFeatureChanged={this.updateFeature}
+                onFeatureSubmit={this.createFeature}
-                 onFeatureSubmit={this.createFeature}
+                onFeatureCancel={this.cancelNewFeature}
-                 onFeatureCancel={this.cancelNewFeature}
+                onNewFeature={this.newFeature} />
-                 onNewFeature={this.newFeature} />
             </div>
         );
     }

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;