Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

Simple tab-based menu to have a contianer for strategies

Browse Source
This commit is contained in:
ivaosthu 2014-11-01 14:52:37 +01:00 committed by Ivar Conradi Østhus
parent c6118baad3
commit b1b3d408f7
8 changed files with 151 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/strategyApi.js
View File

@ -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) {

26
public/js/app.jsx
View File

@ -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')
);

31
public/js/components/FeatureList.jsx
View File

@ -27,28 +27,21 @@ var FeatureList = React.createClass({
}.bind(this));
return (
<div className="container">
<div className="mod shadow mts">
<div className="inner">
<div className="bd">
<div className="line">
<div className="unit r-size1of4">
<h2>Features</h2>
</div>
<div>
<div className="line">
<div className="unit r-size1of4">
<h2>Features</h2>
</div>
<div className="unit r-size3of4 rightify prl ptm">
<button className="" onClick={this.props.onNewFeature}>New</button>
</div>
</div>
<hr />
{featureNodes}
</div>
<div className="unit r-size3of4 rightify prl ptm">
<button className="" onClick={this.props.onNewFeature}>New</button>
</div>
</div>
</div>
<hr />
{featureNodes}
</div>
);
);
}
});

48
public/js/components/TabView.jsx Normal file
View File

@ -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;

22
public/js/components/Unleash.jsx
View File

@ -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
errors={this.state.errors}
onClearErrors={this.clearErrors} />
<FeatureList
unsavedFeatures={this.state.unsavedFeatures}
savedFeatures={this.state.savedFeatures}
onFeatureChanged={this.updateFeature}
onFeatureSubmit={this.createFeature}
onFeatureCancel={this.cancelNewFeature}
onNewFeature={this.newFeature} />
<ErrorMessages
errors={this.state.errors}
onClearErrors={this.clearErrors} />
<FeatureList
unsavedFeatures={this.state.unsavedFeatures}
savedFeatures={this.state.savedFeatures}
onFeatureChanged={this.updateFeature}
onFeatureSubmit={this.createFeature}
onFeatureCancel={this.cancelNewFeature}
onNewFeature={this.newFeature} />
</div>
);
}

28
public/js/components/strategy/StrategyComponent.jsx Normal file
View File

@ -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;

0
public/js/components/strategy/StrategyList.jsx Normal file
View File

26
public/js/stores/StrategyStore.js Normal file
View File

@ -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;