mirror of
https://github.com/Unleash/unleash.git
synced 2025-03-18 00:19:49 +01:00
remove old unleash-frontend from master
This commit is contained in:
ivaosthu
Ivar Conradi Østhus
parent
8f6932fb78
commit
b8b6e1eab8
@ -1,3 +0,0 @@
|
||||
{
|
||||
"presets": ["es2015", "stage-2", "react"]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"finn",
|
||||
"finn/node"
|
||||
]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
// preprocessor.js
|
||||
'use strict';
|
||||
|
||||
const ReactTools = require('react-tools');
|
||||
module.exports = {
|
||||
process (src) {
|
||||
return ReactTools.transform(src);
|
||||
},
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
publicFolder: path.join(__dirname, '..', 'public'),
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const server = require('unleash-api');
|
||||
|
||||
const unleash = server.start({});
|
||||
const app = unleash.app;
|
||||
const config = unleash.config;
|
||||
|
||||
const webpack = require('webpack');
|
||||
const webpackDevMiddleware = require('webpack-dev-middleware');
|
||||
const webpackConfig = require('./webpack.config');
|
||||
const compiler = webpack(webpackConfig);
|
||||
|
||||
app.use(config.baseUriPath, webpackDevMiddleware(compiler, {
|
||||
publicPath: '/js',
|
||||
noInfo: true,
|
||||
}));
|
||||
@ -1,79 +0,0 @@
|
||||
{
|
||||
"name": "unleash-frontend",
|
||||
"description": "unleash your features",
|
||||
"version": "1.0.0-alpha.2",
|
||||
"keywords": [
|
||||
"unleash",
|
||||
"feature toggle",
|
||||
"feature",
|
||||
"toggle"
|
||||
],
|
||||
"files": [
|
||||
"public",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "ssh://git@github.com:finn-no/unleash.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/finn-no/unleash/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": "6"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack -p",
|
||||
"start": "NODE_ENV=development supervisor --ignore ./node_modules/,./public/js lib/server-dev.js",
|
||||
"test": "jest",
|
||||
"test:ci": "npm run test",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"main": "./lib/index.js",
|
||||
"dependencies": {
|
||||
"lodash": "^3.5.0",
|
||||
"moment": "^2.13.0",
|
||||
"react": "^0.13.1",
|
||||
"react-router": "^0.13.2",
|
||||
"reflux": "^0.2.10",
|
||||
"reqwest": "^2.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.9.1",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-preset-es2015": "^6.9.0",
|
||||
"babel-preset-react": "^6.5.0",
|
||||
"babel-preset-stage-2": "^6.5.0",
|
||||
"chai": "3.5.0",
|
||||
"coveralls": "^2.11.9",
|
||||
"istanbul": "^0.4.3",
|
||||
"jest-cli": "0.5.8",
|
||||
"mocha": "^2.4.5",
|
||||
"mocha-lcov-reporter": "1.2.0",
|
||||
"nsp": "^2.3.2",
|
||||
"react-tools": "^0.13.1",
|
||||
"supertest": "^1.2.0",
|
||||
"supervisor": "^0.10.0",
|
||||
"unleash-api": "1.0.0-alpha.2",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-middleware": "^1.6.1"
|
||||
},
|
||||
"jest": {
|
||||
"scriptPreprocessor": "<rootDir>/jest-preprocessor.js",
|
||||
"modulePathIgnorePatterns": [
|
||||
"<rootDir>/node_modules/npm"
|
||||
],
|
||||
"unmockedModulePathPatterns": [
|
||||
"<rootDir>/node_modules/react",
|
||||
"<rootDir>/node_modules/reflux"
|
||||
],
|
||||
"moduleFileExtensions": [
|
||||
"jsx",
|
||||
"js"
|
||||
]
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint"
|
||||
]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"finn",
|
||||
"finn-react"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true
|
||||
},
|
||||
"rules": {
|
||||
"react/sort-comp": "off"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@ -1,17 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>unleash admin</title>
|
||||
<meta name="description" content="unleash">
|
||||
|
||||
<link rel="stylesheet" href="//finncdn.no/bb/css/so/5.5.28/so.min.css">
|
||||
<link rel="stylesheet" href="unleash.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,99 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Router = require('react-router');
|
||||
const Menu = require('./components/Menu');
|
||||
const ErrorMessages = require('./components/ErrorMessages');
|
||||
const initalizer = require('./stores/initalizer');
|
||||
const FeatureToggleStore = require('./stores/FeatureToggleStore');
|
||||
const StrategyStore = require('./stores/StrategyStore');
|
||||
const ArchiveStore = require('./stores/ArchivedToggleStore');
|
||||
const Link = Router.Link;
|
||||
const RouteHandler = Router.RouteHandler;
|
||||
|
||||
const UnleashApp = React.createClass({
|
||||
contextTypes: {
|
||||
router: React.PropTypes.func,
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
features: FeatureToggleStore.getFeatureToggles(),
|
||||
strategies: StrategyStore.getStrategies(),
|
||||
archivedFeatures: ArchiveStore.getArchivedToggles(),
|
||||
};
|
||||
},
|
||||
|
||||
onFeatureToggleChange () {
|
||||
this.setState({
|
||||
features: FeatureToggleStore.getFeatureToggles(),
|
||||
});
|
||||
},
|
||||
|
||||
onStrategiesChange () {
|
||||
this.setState({
|
||||
strategies: StrategyStore.getStrategies(),
|
||||
});
|
||||
},
|
||||
|
||||
onArchiveChange () {
|
||||
this.setState({
|
||||
archivedFeatures: ArchiveStore.getArchivedToggles(),
|
||||
});
|
||||
},
|
||||
|
||||
componentDidMount () {
|
||||
this.unsubscribeFS = FeatureToggleStore.listen(this.onFeatureToggleChange);
|
||||
this.unsubscribeSS = StrategyStore.listen(this.onStrategiesChange);
|
||||
this.unsubscribeAS = ArchiveStore.listen(this.onArchiveChange);
|
||||
},
|
||||
componentWillUnmount () {
|
||||
this.unsubscribeFS();
|
||||
this.unsubscribeSS();
|
||||
this.unsubscribeAS();
|
||||
},
|
||||
|
||||
componentWillMount () {
|
||||
initalizer(30);
|
||||
},
|
||||
|
||||
renderLink (id, label) {
|
||||
return (
|
||||
<Link to={id} className="nav-element centerify" activeClassName="nav-active">
|
||||
<span className="topbar-nav-svg-caption caption showbydefault no-break">{label}</span>
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Menu>
|
||||
{this.renderLink('features', 'Toggles')}
|
||||
{this.renderLink('strategies', 'Strategies')}
|
||||
{this.renderLink('log', 'Log')}
|
||||
{this.renderLink('archive', 'Archive')}
|
||||
</Menu>
|
||||
<div className="container">
|
||||
<div className="page">
|
||||
<ErrorMessages />
|
||||
<div className="mod shadow mrn pan">
|
||||
<div className="inner pan">
|
||||
<div className="bd">
|
||||
<RouteHandler
|
||||
features={this.state.features}
|
||||
strategies={this.state.strategies}
|
||||
archivedFeatures={this.state.archivedFeatures}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
module.exports = UnleashApp;
|
||||
@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"finn",
|
||||
"finn/node"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
"mocha": true
|
||||
},
|
||||
"globals": {
|
||||
"it": false,
|
||||
"jest": false,
|
||||
"beforeEach": false,
|
||||
"expect": false,
|
||||
"describe": false,
|
||||
"afterEach": false
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
/** @jsx React.DOM */
|
||||
'use strict';
|
||||
|
||||
jest.dontMock('../../components/Menu');
|
||||
|
||||
const Menu = require('../../components/Menu');
|
||||
const React = require('react/addons');
|
||||
const TestUtils = React.addons.TestUtils;
|
||||
|
||||
describe('Menu test', () => {
|
||||
it('should include unleash in menu', () => {
|
||||
const Compononent = TestUtils .renderIntoDocument(<Menu />);
|
||||
expect(Compononent.getDOMNode().textContent).toMatch('unleash');
|
||||
});
|
||||
});
|
||||
@ -1,41 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
jest.dontMock('../../../components/feature/ArchiveFeatureComponent');
|
||||
jest.mock('../../../stores/FeatureToggleActions');
|
||||
jest.autoMockOff();
|
||||
|
||||
const React = require('react/addons');
|
||||
const TestUtils = React.addons.TestUtils;
|
||||
const FeatureArchive = require('../../../components/feature/ArchiveFeatureComponent');
|
||||
const FeatureActions = require('../../../stores/FeatureToggleActions');
|
||||
|
||||
describe('FeatureForm', () => {
|
||||
let Component;
|
||||
beforeEach(() => {
|
||||
const archivedToggles = [
|
||||
{ name: 'featureX' },
|
||||
{ name: 'featureY' },
|
||||
];
|
||||
|
||||
Component = TestUtils.renderIntoDocument(
|
||||
<FeatureArchive archivedFeatures={archivedToggles} />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
React.unmountComponentAtNode(document.body);
|
||||
});
|
||||
|
||||
it('should render two archived features', () => {
|
||||
const rows = Component.getDOMNode().querySelectorAll('tbody tr');
|
||||
|
||||
expect(rows.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should revive archived feature toggle', () => {
|
||||
const button = Component.getDOMNode().querySelector('tbody button');
|
||||
TestUtils.Simulate.click(button);
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(FeatureActions.revive.triggerPromise).toBeCalled();
|
||||
});
|
||||
});
|
||||
@ -1,36 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
jest.dontMock('../../../components/feature/FeatureForm');
|
||||
|
||||
const React = require('react/addons');
|
||||
const TestUtils = React.addons.TestUtils;
|
||||
const FeatureForm = require('../../../components/feature/FeatureForm');
|
||||
|
||||
describe('FeatureForm', () => {
|
||||
let Component;
|
||||
const strategies = [
|
||||
{ name: 'default' },
|
||||
];
|
||||
afterEach(() => {
|
||||
React.unmountComponentAtNode(document.body);
|
||||
});
|
||||
|
||||
describe('new', () => {
|
||||
it('should render empty form', () => {
|
||||
Component = TestUtils .renderIntoDocument(<FeatureForm strategies={strategies} />);
|
||||
const value = Component.getDOMNode().querySelectorAll('input');
|
||||
expect(value[0].value).toEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('edit', () => {
|
||||
const feature = { name: 'Test', strategy: 'unknown' };
|
||||
|
||||
it('should show unknown strategy as default', () => {
|
||||
Component = TestUtils .renderIntoDocument(<FeatureForm feature={feature} strategies={strategies} />);
|
||||
|
||||
const strategySelect = Component.getDOMNode().querySelector('select');
|
||||
expect(strategySelect.value).toEqual('default');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,59 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
jest.dontMock('../../../components/feature/FeatureList');
|
||||
jest.dontMock('../../../components/feature/Feature');
|
||||
|
||||
const React = require('react/addons');
|
||||
const TestUtils = React.addons.TestUtils;
|
||||
const FeatureList = require('../../../components/feature/FeatureList');
|
||||
|
||||
describe('FeatureList', () => {
|
||||
let Component;
|
||||
|
||||
beforeEach(() => {
|
||||
const features = [
|
||||
{ name: 'featureX', strategy: 'other' },
|
||||
{ name: 'group.featureY', strategy: 'default' },
|
||||
];
|
||||
const strategies = [
|
||||
{ name: 'default' },
|
||||
];
|
||||
Component = TestUtils .renderIntoDocument(<FeatureList features={features} strategies={strategies} />);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
React.unmountComponentAtNode(document.body);
|
||||
});
|
||||
|
||||
it('should render all features', () => {
|
||||
const featuresElement = Component.getDOMNode().querySelectorAll('.feature');
|
||||
expect(featuresElement.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should filter list of features', () => {
|
||||
const filterNode = Component.refs.filter.getDOMNode();
|
||||
TestUtils.Simulate.change(filterNode, { target: { value: 'group' } });
|
||||
|
||||
const featuresElement = Component.getDOMNode().querySelectorAll('.feature');
|
||||
expect(featuresElement.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should filter list of features ignoring case', () => {
|
||||
const filterNode = Component.refs.filter.getDOMNode();
|
||||
TestUtils.Simulate.change(filterNode, { target: { value: 'GROUP' } });
|
||||
|
||||
const featuresElement = Component.getDOMNode().querySelectorAll('.feature');
|
||||
expect(featuresElement.length).toEqual(1);
|
||||
expect(featuresElement[0].textContent).toMatch('group');
|
||||
});
|
||||
|
||||
it('should filter list of features by strategy name', () => {
|
||||
const searchString = 'other';
|
||||
const filterNode = Component.refs.filter.getDOMNode();
|
||||
TestUtils.Simulate.change(filterNode, { target: { value: searchString } });
|
||||
|
||||
const featuresElement = Component.getDOMNode().querySelectorAll('.feature');
|
||||
expect(featuresElement.length).toEqual(1);
|
||||
expect(featuresElement[0].textContent).toMatch(searchString);
|
||||
});
|
||||
});
|
||||
@ -1,79 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
jest.autoMockOff();
|
||||
jest.dontMock('../../stores/FeatureToggleActions');
|
||||
jest.dontMock('../../stores/FeatureToggleStore');
|
||||
|
||||
describe('FeatureToggleStore', () => {
|
||||
let Actions;
|
||||
let Store;
|
||||
let toggles;
|
||||
|
||||
beforeEach(() => {
|
||||
Actions = require('../../stores/FeatureToggleActions');
|
||||
Store = require('../../stores/FeatureToggleStore');
|
||||
toggles = [
|
||||
{ name: 'app.feature', enabled: true, strategy: 'default' },
|
||||
];
|
||||
});
|
||||
|
||||
it('should be an empty store', () => {
|
||||
expect(Store.getFeatureToggles().length).toBe(0);
|
||||
});
|
||||
|
||||
it('should inititialize the store', () => {
|
||||
Actions.init.completed(toggles);
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(Store.getFeatureToggles().length).toBe(1);
|
||||
expect(Store.getFeatureToggles()[0].name).toEqual('app.feature');
|
||||
});
|
||||
|
||||
it('should add a another toggle', () => {
|
||||
Actions.init.completed(toggles);
|
||||
|
||||
const newToggle = { name: 'app.featureB', enabled: true, strategy: 'default' };
|
||||
|
||||
Actions.create.completed(newToggle);
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(Store.getFeatureToggles().length).toBe(2);
|
||||
expect(Store.getFeatureToggles()[1].name).toEqual('app.featureB');
|
||||
});
|
||||
|
||||
it('should archive toggle', () => {
|
||||
Actions.init.completed(toggles);
|
||||
|
||||
Actions.archive.completed(toggles[0]);
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(Store.getFeatureToggles().length).toBe(0);
|
||||
});
|
||||
|
||||
it('should keep toggles in sorted order', () => {
|
||||
Actions.init.completed([
|
||||
{ name: 'A' },
|
||||
{ name: 'B' },
|
||||
{ name: 'C' },
|
||||
]);
|
||||
|
||||
Actions.create.completed({ name: 'AA' });
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(Store.getFeatureToggles()[0].name).toEqual('A');
|
||||
expect(Store.getFeatureToggles()[1].name).toEqual('AA');
|
||||
expect(Store.getFeatureToggles()[3].name).toEqual('C');
|
||||
});
|
||||
|
||||
it('should update toggle', () => {
|
||||
Actions.init.completed(toggles);
|
||||
const toggle = toggles[0];
|
||||
|
||||
toggle.enabled = false;
|
||||
Actions.update.completed(toggle);
|
||||
|
||||
|
||||
jest.runAllTimers();
|
||||
expect(Store.getFeatureToggles()[0].enabled).toEqual(false);
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Router = require('react-router');
|
||||
const UserStore = require('./stores/UserStore');
|
||||
const routes = require('./routes');
|
||||
|
||||
UserStore.init();
|
||||
|
||||
Router.run(routes, Handler => {
|
||||
React.render(<Handler/>, document.getElementById('content'));
|
||||
});
|
||||
@ -1,40 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Ui = require('./ErrorMessages.ui');
|
||||
const ErrorStore = require('../stores/ErrorStore');
|
||||
const ErrorActions = require('../stores/ErrorActions');
|
||||
|
||||
const ErrorMessages = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
errors: ErrorStore.getErrors(),
|
||||
};
|
||||
},
|
||||
|
||||
onStoreChange () {
|
||||
this.setState({
|
||||
errors: ErrorStore.getErrors(),
|
||||
});
|
||||
},
|
||||
|
||||
componentDidMount () {
|
||||
this.unsubscribe = ErrorStore.listen(this.onStoreChange);
|
||||
},
|
||||
|
||||
componentWillUnmount () {
|
||||
this.unsubscribe();
|
||||
},
|
||||
|
||||
onClearErrors () {
|
||||
ErrorActions.clear();
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<Ui errors={this.state.errors} onClearErrors={this.onClearErrors} />
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = ErrorMessages;
|
||||
@ -1,35 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const ErrorMessages = React.createClass({
|
||||
render () {
|
||||
if (!this.props.errors.length) {
|
||||
return <div/>;
|
||||
}
|
||||
|
||||
const errorNodes = this.props.errors.map((e, i) => <li key={e + i} className="largetext">{e}</li>);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="mod shadow mtm mrn">
|
||||
<div className="inner bg-red-lt">
|
||||
<div className="bd">
|
||||
<div className="media centerify">
|
||||
<div className="imgExt">
|
||||
<a onClick={this.props.onClearErrors}
|
||||
className="icon-kryss1 linkblock sharp" />
|
||||
</div>
|
||||
<div className="bd">
|
||||
<ul>{errorNodes}</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = ErrorMessages;
|
||||
@ -1,65 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const User = require('./User');
|
||||
|
||||
const Menu = React.createClass({
|
||||
render () {
|
||||
return (
|
||||
<div className="topbar mbl">
|
||||
<div className="container">
|
||||
<div className="page">
|
||||
<div className="fright-ht768">
|
||||
<User />
|
||||
</div>
|
||||
<div className="nav-level1 h4">
|
||||
<a href="#" className="homelink pln">
|
||||
<span className="topbar-nav-svg-home">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
|
||||
y5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MjcuNDExIiBoZWlnaHQ9IjE2OS4z
|
||||
OTgiIHZpZXdCb3g9IjAgMCA1MjcuNDExIDE2OS4zOTgiPjxwYXRoIGZpbGw
|
||||
9IiNmZmYiIGQ9Ik00NjguNTA3IDBoLTI1Ni4xODdjLTIxLjcwNyAwLTQwLj
|
||||
Y5NSAxMS44MTItNTAuOTEyIDI5LjMzNy0xMC4yMTYtMTcuNTI1LTI5LjIwN
|
||||
C0yOS4zMzctNTAuOTExLTI5LjMzN2gtNTEuNTk1Yy0zMi40NzkgMC01OC45
|
||||
MDIgMjYuNDI1LTU4LjkwMiA1OC45MDV2NTEuNTg3YzAgMzIuNDgxIDI2LjQ
|
||||
yMyA1OC45MDYgNTguOTAyIDU4LjkwNmg0MDkuNjA1YzMyLjQ3OSAwIDU4Lj
|
||||
kwMy0yNi40MjUgNTguOTAzLTU4LjkwNnYtNTEuNTg3Yy4wMDEtMzIuNDgtM
|
||||
jYuNDIzLTU4LjkwNS01OC45MDMtNTguOTA1eiIvPjxwYXRoIGZpbGw9IiMw
|
||||
OWYiIGQ9Ik00NjguNTA3IDE1My4zODNjMjMuNjg3IDAgNDIuODg4LTE5LjE
|
||||
5OSA0Mi44ODgtNDIuODl2LTUxLjU4OGMwLTIzLjY5MS0xOS4yMDEtNDIuOD
|
||||
ktNDIuODg4LTQyLjg5aC0yNTYuMTg3Yy0yMy42ODYgMC00Mi44ODcgMTkuM
|
||||
Tk4LTQyLjg4NyA0Mi44OXY5NC40NzhoMjk5LjA3NHoiLz48cGF0aCBmaWxs
|
||||
PSIjMDA2IiBkPSJNMTUzLjM4NCAxNTMuMzgzdi05NC40NzhjMC0yMy42OTE
|
||||
tMTkuMjAxLTQyLjg5LTQyLjg4Ny00Mi44OWgtNTEuNTk1Yy0yMy42ODYgMC
|
||||
00Mi44ODcgMTkuMTk4LTQyLjg4NyA0Mi44OXY1MS41ODdjMCAyMy42OTEgM
|
||||
TkuMjAxIDQyLjg5IDQyLjg4NyA0Mi44OWg5NC40ODJ6Ii8%2BPHJlY3QgeD
|
||||
0iMzIwLjE1NiIgeT0iNzUuMjc1IiBmaWxsPSIjZmZmIiB3aWR0aD0iMTkuN
|
||||
jIxIiBoZWlnaHQ9IjUzLjIxMSIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0y
|
||||
NjIuOTEyIDg2LjI4MWMwLTUuNTI5IDMuODEzLTExLjAwNiAxMy4wNjktMTE
|
||||
uMDA2aDI4LjQyMXYxNS42MTNoLTE4LjYxMmMtMi40OTggMC0zLjI1NS45OT
|
||||
ItMy4yNTUgMi42NjR2Ny40NzJoMjEuODY3djE1LjYxaC0yMS44Njd2MTEuO
|
||||
DUyaC0xOS42MjN2LTQyLjIwNXpNMzc1LjE2NSA5MS4wOTloMTAuMzk5YzIu
|
||||
NDA5IDAgMy4yNDYuODMyIDMuMjQ2IDMuMjM1bC0uMDA4IDM0LjE1MmgxOS4
|
||||
2MzJ2LTQxLjk5NmMwLTUuNTI3LTMuODE1LTExLjAwNC0xMy4wNjktMTEuMD
|
||||
A0aC0zOS44MjRsLS4wMSA1M2gxOS42MzR2LTM3LjM4N3pNNDQyLjcxOSA5M
|
||||
S4wOTloMTAuNGMyLjQwOCAwIDMuMjQ1LjgzMiAzLjI0NSAzLjIzNWwtLjAw
|
||||
OSAzNC4xNTJoMTkuNjM0di00MS45OTZjMC01LjUyNy0zLjgxNS0xMS4wMDQ
|
||||
tMTMuMDctMTEuMDA0aC0zOS44MjNsLS4wMSA1M2gxOS42MzN2LTM3LjM4N3
|
||||
oiLz48L3N2Zz4%3D" width="106" height="34" />
|
||||
</span>
|
||||
|
||||
<span
|
||||
className="topbar-nav-svg-caption caption showbydefault hide-lt900">
|
||||
unleash admin
|
||||
</span>
|
||||
</a>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = Menu;
|
||||
@ -1,25 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const UserStore = require('../stores/UserStore');
|
||||
|
||||
const User = React.createClass({
|
||||
|
||||
onSave () {
|
||||
const value = this.refs.username.getDOMNode().value.trim();
|
||||
UserStore.set(value);
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="r-pvm">
|
||||
<input type="text" placeholder="username"
|
||||
ref="username"
|
||||
defaultValue={UserStore.get()}
|
||||
onBlur={this.onSave} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = User;
|
||||
@ -1,48 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const FeatureActions = require('../../stores/FeatureToggleActions');
|
||||
|
||||
const ArchiveFeatureComponent = React.createClass({
|
||||
|
||||
onRevive (item) {
|
||||
FeatureActions.revive.triggerPromise(item);
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Archived Feature Toggles</h1>
|
||||
<hr />
|
||||
<table className="outerborder man">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.archivedFeatures.map(this.renderArchivedItem)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderArchivedItem (f) {
|
||||
return (
|
||||
<tr key={f.name}>
|
||||
<td>
|
||||
{f.name}<br />
|
||||
<span className="opaque smalltext word-break">{f.description}</span>
|
||||
</td>
|
||||
<td className="rightify" width="150">
|
||||
<button onClick={this.onRevive.bind(this, f)} title="Revive feature toggle">
|
||||
<span className="icon-svar" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = ArchiveFeatureComponent;
|
||||
@ -1,124 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const FeatureForm = require('./FeatureForm');
|
||||
const LogEntryList = require('../log/LogEntryList');
|
||||
const eventStore = require('../../stores/EventStore');
|
||||
|
||||
const Feature = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
editMode: false,
|
||||
showHistory: false,
|
||||
events: [],
|
||||
};
|
||||
},
|
||||
|
||||
handleEventsResponse (response) {
|
||||
this.setState({ events: response });
|
||||
},
|
||||
|
||||
toggleHistory () {
|
||||
eventStore.getEventsByName(this.props.feature.name).then(this.handleEventsResponse);
|
||||
this.setState({ showHistory: !this.state.showHistory });
|
||||
},
|
||||
|
||||
|
||||
toggleEditMode () {
|
||||
this.setState({ editMode: !this.state.editMode });
|
||||
},
|
||||
|
||||
saveFeature (feature) {
|
||||
this.props.onChange(feature);
|
||||
this.toggleEditMode();
|
||||
},
|
||||
|
||||
archiveFeature () {
|
||||
if (window.confirm(`Are you sure you want to delete ${this.props.feature.name}?`)) { // eslint-disable-line no-alert
|
||||
this.props.onArchive(this.props.feature);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
renderEditMode () {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan="4" className="pan man no-border">
|
||||
<FeatureForm
|
||||
feature={this.props.feature}
|
||||
onSubmit={this.saveFeature}
|
||||
onCancel={this.toggleEditMode}
|
||||
strategies={this.props.strategies} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<tbody className="feature">
|
||||
<tr className={this.state.editMode ? 'edit bg-lilac-xlt' : ''}>
|
||||
<td width="20">
|
||||
<span className=
|
||||
{this.props.feature.enabled ? 'toggle-active' : 'toggle-inactive'} title="Status" />
|
||||
</td>
|
||||
<td>
|
||||
{this.props.feature.name} <br />
|
||||
<span className="opaque smalltext word-break">
|
||||
{this.props.feature.description || '\u00a0'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td className="hide-lt480">
|
||||
{this.props.feature.strategy}
|
||||
</td>
|
||||
|
||||
<td width="150">
|
||||
<div className="line">
|
||||
<div className="unit size1of3">
|
||||
<button
|
||||
title="Archive"
|
||||
onClick={this.archiveFeature}>
|
||||
<span className="icon-kryss1" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="unit size1of3">
|
||||
<button
|
||||
className={this.state.editMode ? 'primary' : ''}
|
||||
title="Edit"
|
||||
onClick={this.toggleEditMode}>
|
||||
<span className="icon-redigere" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="unit size1of3">
|
||||
<button
|
||||
className={this.state.showHistory ? 'primary' : ''}
|
||||
title="History"
|
||||
onClick={this.toggleHistory}>
|
||||
<span className="icon-visning_liste" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{this.state.editMode ? this.renderEditMode() : this.renderEmptyRow()}
|
||||
{this.state.showHistory ? this.renderHistory() : this.renderEmptyRow()}
|
||||
</tbody>
|
||||
);
|
||||
},
|
||||
|
||||
renderEmptyRow () {
|
||||
return (<tr />);
|
||||
},
|
||||
|
||||
renderHistory () {
|
||||
return (<tr>
|
||||
<td colSpan="4" className="no-border">
|
||||
<LogEntryList events={this.state.events} />
|
||||
</td>
|
||||
</tr>);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
module.exports = Feature;
|
||||
@ -1,175 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const TextInput = require('../form/TextInput');
|
||||
|
||||
const FeatureForm = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
strategyOptions: this.props.strategies,
|
||||
requiredParams: [],
|
||||
currentStrategy: this.props.feature ? this.props.feature.strategy : 'default',
|
||||
};
|
||||
},
|
||||
|
||||
componentWillMount () {
|
||||
if (this.props.feature) {
|
||||
this.setSelectedStrategy(this.props.feature.strategy);
|
||||
}
|
||||
},
|
||||
|
||||
onStrategyChange (e) {
|
||||
this.setSelectedStrategy(e.target.value);
|
||||
this.setState({ currentStrategy: e.target.value });
|
||||
},
|
||||
|
||||
getParameterValue (feature) {
|
||||
if (this.props.feature && this.props.feature.parameters) {
|
||||
return this.props.feature.parameters[feature];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
setSelectedStrategy (strategyName) {
|
||||
const selectedStrategy = this.props.strategies.filter(strategy => strategy.name === strategyName)[0];
|
||||
|
||||
if (selectedStrategy) {
|
||||
this.setStrategyParams(selectedStrategy);
|
||||
} else {
|
||||
this.setState({
|
||||
currentStrategy: 'default',
|
||||
requiredParams: [],
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
setStrategyParams (strategy) {
|
||||
const requiredParams = [];
|
||||
let key;
|
||||
for (key in strategy.parametersTemplate) {
|
||||
if (Object.hasOwnProperty.call(strategy.parametersTemplate, key)) {
|
||||
requiredParams.push({ name: key, value: this.getParameterValue(key) });
|
||||
}
|
||||
}
|
||||
this.setState({ requiredParams });
|
||||
},
|
||||
|
||||
render () {
|
||||
const feature = this.props.feature || {
|
||||
name: '',
|
||||
strategy: 'default',
|
||||
enabled: false,
|
||||
};
|
||||
|
||||
const idPrefix = this.props.feature ? this.props.feature.name : 'new';
|
||||
|
||||
return (
|
||||
<div className="bg-lilac-xlt r-pam">
|
||||
<form ref="form" className="r-size1of2">
|
||||
|
||||
<fieldset>
|
||||
{this.props.feature ? '' : <legend>Create new toggle</legend>}
|
||||
|
||||
<TextInput
|
||||
id={`${idPrefix}-name`}
|
||||
name="name"
|
||||
label="Name"
|
||||
value={feature.name}
|
||||
disabled={feature.name.length}
|
||||
ref="name"
|
||||
placeholder="Toggle name" />
|
||||
|
||||
<TextInput
|
||||
id={`${idPrefix}-description`}
|
||||
name="description"
|
||||
label="Description"
|
||||
value={feature.description}
|
||||
ref="description"
|
||||
placeholder="Enter description" />
|
||||
|
||||
<div className="formelement">
|
||||
<label htmlFor={`${idPrefix}-strategy`}>Strategy</label>
|
||||
<div className="input select">
|
||||
<select id={`${idPrefix}-strategy`}
|
||||
ref="strategy"
|
||||
value={this.state.currentStrategy}
|
||||
onChange={this.onStrategyChange}>
|
||||
{this.renderStrategyOptions()}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="formelement">
|
||||
<div className="input">
|
||||
<ul className="inputs-list">
|
||||
<li>
|
||||
<input id={`${idPrefix}-active`}
|
||||
ref="enabled"
|
||||
type="checkbox"
|
||||
defaultChecked={feature.enabled} />
|
||||
<label htmlFor={`${idPrefix}-active`}>
|
||||
Active
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{this.renderStrategyProperties()}
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div className="actions">
|
||||
<button className="primary mrs" onClick={this.saveFeature}>Save</button>
|
||||
<button className="" onClick={this.cancelFeature}>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderStrategyOptions () {
|
||||
return this.props.strategies.map(strategy => <option key={strategy.name} value={strategy.name}>
|
||||
{strategy.name}
|
||||
</option>);
|
||||
},
|
||||
|
||||
renderStrategyProperties () {
|
||||
return this.state.requiredParams.map(param => <TextInput
|
||||
id={`param-${param.name}`}
|
||||
key={`param-${param.name}`}
|
||||
name={param.name}
|
||||
label={param.name}
|
||||
ref={param.name}
|
||||
value={param.value} />);
|
||||
},
|
||||
|
||||
saveFeature (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const feature = {
|
||||
name: this.refs.name.getValue(),
|
||||
description: this.refs.description.getValue(),
|
||||
strategy: this.state.currentStrategy,
|
||||
enabled: this.refs.enabled.getDOMNode().checked,
|
||||
parameters: this.getParameters(),
|
||||
};
|
||||
|
||||
this.props.onSubmit(feature);
|
||||
},
|
||||
|
||||
cancelFeature (e) {
|
||||
e.preventDefault();
|
||||
this.props.onCancel();
|
||||
},
|
||||
|
||||
getParameters () {
|
||||
const parameters = {};
|
||||
this.state.requiredParams.forEach(param => {
|
||||
parameters[param.name] = this.refs[param.name].getValue();
|
||||
});
|
||||
return parameters;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureForm;
|
||||
@ -1,82 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Feature = require('./Feature');
|
||||
|
||||
const noop = function () {};
|
||||
|
||||
const FeatureList = React.createClass({
|
||||
propTypes: {
|
||||
features: React.PropTypes.array.isRequired,
|
||||
strategies: React.PropTypes.array.isRequired,
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
onFeatureChanged: noop,
|
||||
onFeatureArchive: noop,
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
filter: undefined,
|
||||
};
|
||||
},
|
||||
|
||||
onFilterChange (e) {
|
||||
e.preventDefault();
|
||||
this.setState({ filter: e.target.value.trim() });
|
||||
},
|
||||
|
||||
filteredFeatures () {
|
||||
if (this.state.filter) {
|
||||
const regex = new RegExp(this.state.filter, 'i');
|
||||
|
||||
return this.props.features.filter(item => regex.test(item.name) || regex.test(item.strategy));
|
||||
}
|
||||
return this.props.features;
|
||||
},
|
||||
|
||||
render () {
|
||||
const featureNodes = this.filteredFeatures().map(feature => <Feature
|
||||
key={feature.name}
|
||||
feature={feature}
|
||||
onChange={this.props.onFeatureChanged}
|
||||
onArchive={this.props.onFeatureArchive}
|
||||
strategies={this.props.strategies}
|
||||
/>);
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<table className="outerborder man">
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th>Name</th>
|
||||
<th className="hide-lt480">Strategy</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="4">
|
||||
<input
|
||||
name="filter"
|
||||
ref="filter"
|
||||
type="text"
|
||||
placeholder="Filter by name or strategy"
|
||||
onChange={this.onFilterChange}
|
||||
value={this.state.filter}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
{featureNodes}
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureList;
|
||||
@ -1,70 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const FeatureList = require('./FeatureList');
|
||||
const FeatureForm = require('./FeatureForm');
|
||||
const FeatureActions = require('../../stores/FeatureToggleActions');
|
||||
const ErrorActions = require('../../stores/ErrorActions');
|
||||
|
||||
const FeatureTogglesComponent = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
createView: false,
|
||||
};
|
||||
},
|
||||
|
||||
updateFeature (feature) {
|
||||
FeatureActions.update.triggerPromise(feature);
|
||||
},
|
||||
|
||||
archiveFeature (feature) {
|
||||
FeatureActions.archive.triggerPromise(feature);
|
||||
},
|
||||
|
||||
createFeature (feature) {
|
||||
FeatureActions.create.triggerPromise(feature)
|
||||
.then(this.cancelNewFeature);
|
||||
},
|
||||
|
||||
newFeature () {
|
||||
this.setState({ createView: true });
|
||||
},
|
||||
|
||||
cancelNewFeature () {
|
||||
this.setState({ createView: false });
|
||||
ErrorActions.clear();
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
|
||||
<h1>Feature Toggles</h1>
|
||||
|
||||
{this.state.createView ? this.renderCreateView() : this.renderCreateButton()}
|
||||
|
||||
<FeatureList
|
||||
features={this.props.features}
|
||||
onFeatureChanged={this.updateFeature}
|
||||
onFeatureArchive={this.archiveFeature}
|
||||
onFeatureSubmit={this.createFeature}
|
||||
onFeatureCancel={this.cancelNewFeature}
|
||||
onNewFeature={this.newFeature}
|
||||
strategies={this.props.strategies} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderCreateView () {
|
||||
return (<FeatureForm
|
||||
onCancel={this.cancelNewFeature}
|
||||
onSubmit={this.createFeature}
|
||||
strategies={this.props.strategies} />);
|
||||
},
|
||||
|
||||
renderCreateButton () {
|
||||
return <button className="mal" onClick={this.newFeature}>Create feature toggle</button>;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureTogglesComponent;
|
||||
@ -1,48 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const TextInput = React.createClass({
|
||||
propTypes: {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
label: React.PropTypes.string.isRequired,
|
||||
id: React.PropTypes.string.isRequired,
|
||||
placeholder: React.PropTypes.string,
|
||||
value: React.PropTypes.string,
|
||||
required: React.PropTypes.bool,
|
||||
},
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
required: false,
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {};
|
||||
},
|
||||
|
||||
getValue () {
|
||||
return this.refs.input.getDOMNode().value.trim();
|
||||
},
|
||||
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="formelement required">
|
||||
<label htmlFor={this.props.id} className="t4">{this.props.label}</label>
|
||||
<div className="input">
|
||||
<input type="text"
|
||||
id={this.props.id}
|
||||
name={this.props.name}
|
||||
defaultValue={this.props.value}
|
||||
placeholder={this.props.placeholder}
|
||||
disabled={this.props.disabled}
|
||||
ref="input" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = TextInput;
|
||||
@ -1,37 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const LogEntryList = require('./LogEntryList');
|
||||
const eventStore = require('../../stores/EventStore');
|
||||
const ErrorActions = require('../../stores/ErrorActions');
|
||||
|
||||
const LogEntriesComponent = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
createView: false,
|
||||
events: [],
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount () {
|
||||
eventStore.getEvents().then(res => {
|
||||
this.setState({ events: res.events });
|
||||
}, this.initError);
|
||||
},
|
||||
|
||||
initError () {
|
||||
ErrorActions.error('Could not load events from server');
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Log</h1>
|
||||
<hr />
|
||||
<LogEntryList events={this.state.events} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = LogEntriesComponent;
|
||||
@ -1,88 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const moment = require('moment');
|
||||
|
||||
const DIFF_PREFIXES = {
|
||||
A: ' ',
|
||||
E: ' ',
|
||||
D: '-',
|
||||
N: '+',
|
||||
};
|
||||
|
||||
const SPADEN_CLASS = {
|
||||
A: 'blue', // array edited
|
||||
E: 'blue', // edited
|
||||
D: 'negative', // deleted
|
||||
N: 'positive', // added
|
||||
};
|
||||
|
||||
const LogEntry = React.createClass({
|
||||
propTypes: {
|
||||
event: React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
render () {
|
||||
const date = moment(this.props.event.createdAt);
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>
|
||||
{date.format('ll')}<br />
|
||||
{date.format('HH:mm')}
|
||||
</td>
|
||||
<td>
|
||||
<strong>{this.props.event.data.name}</strong><em>[{this.props.event.type}]</em>
|
||||
</td>
|
||||
<td style={{ maxWidth: 300 }}>
|
||||
{this.renderEventDiff()}
|
||||
</td>
|
||||
<td>{this.props.event.createdBy}</td>
|
||||
</tr>
|
||||
);
|
||||
},
|
||||
|
||||
renderFullEventData () {
|
||||
const localEventData = JSON.parse(JSON.stringify(this.props.event.data));
|
||||
delete localEventData.description;
|
||||
delete localEventData.name;
|
||||
|
||||
const prettyPrinted = JSON.stringify(localEventData, null, 2);
|
||||
|
||||
return (<code className="JSON smalltext man">{prettyPrinted}</code>);
|
||||
},
|
||||
|
||||
renderEventDiff () {
|
||||
if (!this.props.showFullEvents && this.props.event.diffs) {
|
||||
const changes = this.props.event.diffs.map(this.buildDiff);
|
||||
return (
|
||||
<code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>
|
||||
);
|
||||
}
|
||||
return this.renderFullEventData();
|
||||
},
|
||||
|
||||
buildDiff (diff, idx) {
|
||||
let change;
|
||||
const key = diff.path.join('.');
|
||||
|
||||
if (diff.lhs !== undefined && diff.rhs !== undefined) {
|
||||
change = (
|
||||
<div>
|
||||
<div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
|
||||
<div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const spadenClass = SPADEN_CLASS[diff.kind];
|
||||
const prefix = DIFF_PREFIXES[diff.kind];
|
||||
|
||||
change = (<div className={spadenClass}>{prefix} {key}: {JSON.stringify(diff.rhs)}</div>);
|
||||
}
|
||||
|
||||
return (<div key={idx}>{change}</div>);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
module.exports = LogEntry;
|
||||
@ -1,57 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const LogEntry = require('./LogEntry');
|
||||
|
||||
const LogEntryList = React.createClass({
|
||||
propTypes: {
|
||||
events: React.PropTypes.array.isRequired,
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
showFullEvents: false,
|
||||
};
|
||||
},
|
||||
|
||||
render () {
|
||||
const logEntryNodes = this.props.events.map(evt =>
|
||||
<LogEntry event={evt} key={evt.id} showFullEvents={this.state.showFullEvents} />);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="prs fright-ht768 smalltext">
|
||||
Show full events
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mlm"
|
||||
value={this.state.fullEvents}
|
||||
onChange={this.toggleFullEvents} />
|
||||
</label>
|
||||
|
||||
<table className="outerborder zebra-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>When</th>
|
||||
<th>Action</th>
|
||||
<th>
|
||||
Data
|
||||
</th>
|
||||
<th>Author</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logEntryNodes}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
toggleFullEvents () {
|
||||
this.setState({ showFullEvents: !this.state.showFullEvents });
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
module.exports = LogEntryList;
|
||||
@ -1,63 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const StrategyList = require('./StrategyList');
|
||||
const StrategyForm = require('./StrategyForm');
|
||||
const StrategyActions = require('../../stores/StrategyActions');
|
||||
|
||||
const StrategiesComponent = React.createClass({
|
||||
getInitialState () {
|
||||
return {
|
||||
createView: false,
|
||||
};
|
||||
},
|
||||
|
||||
onNewStrategy () {
|
||||
this.setState({ createView: true });
|
||||
},
|
||||
|
||||
onCancelNewStrategy () {
|
||||
this.setState({ createView: false });
|
||||
},
|
||||
|
||||
onSave (strategy) {
|
||||
StrategyActions.create.triggerPromise(strategy)
|
||||
.then(this.onCancelNewStrategy);
|
||||
},
|
||||
|
||||
onRemove (strategy) {
|
||||
StrategyActions.remove.triggerPromise(strategy);
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h1>Activation Strategies</h1>
|
||||
{this.state.createView ?
|
||||
this.renderCreateView() : this.renderCreateButton()}
|
||||
<hr />
|
||||
<StrategyList
|
||||
strategies={this.props.strategies}
|
||||
onRemove={this.onRemove} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderCreateView () {
|
||||
return (
|
||||
<StrategyForm
|
||||
onCancelNewStrategy={this.onCancelNewStrategy}
|
||||
onSave={this.onSave}
|
||||
/>);
|
||||
},
|
||||
|
||||
renderCreateButton () {
|
||||
return (
|
||||
<button className="mal" onClick={this.onNewStrategy}>
|
||||
Create strategy
|
||||
</button>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = StrategiesComponent;
|
||||
@ -1,32 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const Strategy = React.createClass({
|
||||
propTypes: {
|
||||
strategy: React.PropTypes.object.isRequired,
|
||||
},
|
||||
|
||||
onRemove (evt) {
|
||||
evt.preventDefault();
|
||||
if (window.confirm(`Are you sure you want to delete strategy '${this.props.strategy.name}'?`)) { // eslint-disable-line no-alert
|
||||
this.props.onRemove(this.props.strategy);
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="line mal">
|
||||
<div className="unit">
|
||||
<strong>{this.props.strategy.name} </strong>
|
||||
<a href=""
|
||||
title="Delete strategy"
|
||||
onClick={this.onRemove}>(remove)</a><br />
|
||||
<em>{this.props.strategy.description}</em><br />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = Strategy;
|
||||
@ -1,140 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const TextInput = require('../form/TextInput');
|
||||
|
||||
const StrategyForm = React.createClass({
|
||||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
maxParams: 4,
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState () {
|
||||
return {
|
||||
parameters: [],
|
||||
};
|
||||
},
|
||||
|
||||
onSubmit (evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
const strategy = {};
|
||||
strategy.name = this.refs.name.getValue();
|
||||
strategy.description = this.refs.description.getValue();
|
||||
strategy.parametersTemplate = {};
|
||||
|
||||
this.state.parameters.forEach(parameter => {
|
||||
const value = this.refs[parameter.name].getDOMNode().value.trim();
|
||||
if (value) {
|
||||
strategy.parametersTemplate[value] = 'string';
|
||||
}
|
||||
});
|
||||
|
||||
this.props.onSave(strategy);
|
||||
},
|
||||
|
||||
onCancel (evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
this.props.onCancelNewStrategy();
|
||||
},
|
||||
|
||||
onAddParam (evt) {
|
||||
evt.preventDefault();
|
||||
const id = this.state.parameters.length + 1;
|
||||
const params = this.state.parameters.concat([{ id, name: `param_${id}`, label: `Parameter ${id}` }]);
|
||||
this.setState({ parameters: params });
|
||||
},
|
||||
|
||||
onRemoveParam (evt) {
|
||||
evt.preventDefault();
|
||||
const params = this.state.parameters.slice(0, -1);
|
||||
|
||||
this.setState({ parameters: params });
|
||||
},
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="line r-pam bg-lilac-xlt">
|
||||
<div className="unit r-size1of2">
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<fieldset>
|
||||
<legend>Create strategy</legend>
|
||||
|
||||
<TextInput
|
||||
id="name"
|
||||
name="name"
|
||||
label="Name"
|
||||
ref="name"
|
||||
placeholder="Strategy name" />
|
||||
|
||||
<TextInput
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
ref="description"
|
||||
placeholder="Please write a short description" />
|
||||
|
||||
{this.renderParameters()}
|
||||
{this.renderRemoveLink()}
|
||||
|
||||
<div className="actions">
|
||||
<input type="submit" value="Save" className="primary mrs" />
|
||||
<button onClick={this.onCancel} className="mrs">Cancel</button>
|
||||
{this.renderAddLink()}
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderParameters () {
|
||||
return this.state.parameters.map(param => <div className="formelement" key={param.name}>
|
||||
<label className="t4">{param.label}</label>
|
||||
<div className="input">
|
||||
<div className="line">
|
||||
|
||||
<div className="unit size2of3">
|
||||
<input
|
||||
type="text"
|
||||
name={param.name}
|
||||
ref={param.name}
|
||||
placeholder="Parameter name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="unit size1of3">
|
||||
<select defaultValue="string">
|
||||
<option value="string">string</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>);
|
||||
},
|
||||
|
||||
renderAddLink () {
|
||||
if (this.state.parameters.length < this.props.maxParams) {
|
||||
return <a href="#add" onClick={this.onAddParam}>+ Add required parameter</a>;
|
||||
}
|
||||
},
|
||||
renderRemoveLink () {
|
||||
if (this.state.parameters.length > 0) {
|
||||
return (
|
||||
<div className="formelement mtn">
|
||||
<a href="#add"
|
||||
className="negative"
|
||||
onClick={this.onRemoveParam}>
|
||||
- Remove parameter
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = StrategyForm;
|
||||
@ -1,20 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Strategy = require('./Strategy');
|
||||
|
||||
const StrategyList = React.createClass({
|
||||
propTypes: {
|
||||
strategies: React.PropTypes.array.isRequired,
|
||||
},
|
||||
|
||||
render () {
|
||||
const strategyNodes = this.props.strategies.map(strategy =>
|
||||
<Strategy strategy={strategy} key={strategy.name} onRemove={this.props.onRemove} />);
|
||||
return (
|
||||
<div>{strategyNodes}</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = StrategyList;
|
||||
@ -1,22 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const React = require('react');
|
||||
const Router = require('react-router');
|
||||
const UnleashApp = require('./UnleashApp');
|
||||
const LogEntriesComponent = require('./components/log/LogEntriesComponent');
|
||||
const FeatureTogglesComponent = require('./components/feature/FeatureTogglesComponent');
|
||||
const StrategiesComponent = require('./components/strategy/StrategiesComponent');
|
||||
const ArchiveFeatureComponent = require('./components/feature/ArchiveFeatureComponent');
|
||||
const DefaultRoute = Router.DefaultRoute;
|
||||
const Route = Router.Route;
|
||||
|
||||
const routes = (
|
||||
<Route name="app" path="/" handler={UnleashApp}>
|
||||
<Route name="strategies" handler={StrategiesComponent}/>
|
||||
<Route name="log" handler={LogEntriesComponent}/>
|
||||
<Route name="archive" handler={ArchiveFeatureComponent}/>
|
||||
<DefaultRoute name="features" handler={FeatureTogglesComponent}/>
|
||||
</Route>
|
||||
);
|
||||
|
||||
module.exports = routes;
|
||||
@ -1,47 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const FeatureActions = require('./FeatureToggleActions');
|
||||
const filter = require('lodash/collection/filter');
|
||||
const sortBy = require('lodash/collection/sortBy');
|
||||
|
||||
let _archivedToggles = [];
|
||||
|
||||
// Creates a DataStore
|
||||
const FeatureStore = Reflux.createStore({
|
||||
|
||||
// Initial setup
|
||||
init () {
|
||||
this.listenTo(FeatureActions.initArchive.completed, this.onInit);
|
||||
this.listenTo(FeatureActions.archive.completed, this.onArchive);
|
||||
this.listenTo(FeatureActions.revive.completed, this.onRevive);
|
||||
},
|
||||
|
||||
onInit (toggles) {
|
||||
_archivedToggles = toggles;
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
onArchive (feature) {
|
||||
const toggles = _archivedToggles.concat([feature]);
|
||||
_archivedToggles = sortBy(toggles, 'name');
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
onRevive (item) {
|
||||
const newStore = filter(_archivedToggles, f => f.name !== item.name);
|
||||
|
||||
_archivedToggles = sortBy(newStore, 'name');
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
getArchivedToggles () {
|
||||
return _archivedToggles;
|
||||
},
|
||||
|
||||
initStore (archivedToggles) {
|
||||
_archivedToggles = archivedToggles;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureStore;
|
||||
@ -1,10 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
|
||||
const ErrorActions = Reflux.createActions([
|
||||
'clear',
|
||||
'error',
|
||||
]);
|
||||
|
||||
module.exports = ErrorActions;
|
||||
@ -1,70 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const FeatureActions = require('./FeatureToggleActions');
|
||||
const ErrorActions = require('./ErrorActions');
|
||||
|
||||
// Creates a DataStore
|
||||
const FeatureStore = Reflux.createStore({
|
||||
// Initial setup
|
||||
init () {
|
||||
this.listenTo(FeatureActions.create.failed, this.onError);
|
||||
this.listenTo(FeatureActions.init.failed, this.onError);
|
||||
this.listenTo(FeatureActions.update.failed, this.onError);
|
||||
this.listenTo(FeatureActions.archive.failed, this.onError);
|
||||
this.listenTo(FeatureActions.revive.failed, this.onError);
|
||||
this.listenTo(ErrorActions.error, this.onError);
|
||||
this.listenTo(ErrorActions.clear, this.onClear);
|
||||
this.errors = [];
|
||||
},
|
||||
|
||||
onError (error) {
|
||||
if (this.isClientError(error)) {
|
||||
const errors = JSON.parse(error.responseText);
|
||||
errors.forEach(e => {
|
||||
this.addError(e.msg);
|
||||
});
|
||||
} else if (error.status === 0) {
|
||||
this.addError('server unreachable');
|
||||
} else {
|
||||
this.addError(error);
|
||||
}
|
||||
},
|
||||
|
||||
onClear () {
|
||||
this.errors = [];
|
||||
this.trigger([]);
|
||||
},
|
||||
|
||||
addError (msg) {
|
||||
const errors = this.errors;
|
||||
if (errors[errors.length - 1] !== msg) {
|
||||
errors.push(msg);
|
||||
this.errors = errors;
|
||||
this.trigger(errors);
|
||||
}
|
||||
},
|
||||
|
||||
isClientError (error) {
|
||||
try {
|
||||
return error.status >= 400 &&
|
||||
error.status < 500 &&
|
||||
JSON.parse(error.responseText);
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) {
|
||||
// fall through;
|
||||
console.log('Syntax error!'); // eslint-disable-line no-console
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
getErrors () {
|
||||
return this.errors;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureStore;
|
||||
@ -1,26 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const reqwest = require('reqwest');
|
||||
|
||||
const TYPE = 'json';
|
||||
|
||||
const EventStore = {
|
||||
getEvents () {
|
||||
return reqwest({
|
||||
url: 'events',
|
||||
method: 'get',
|
||||
type: TYPE,
|
||||
});
|
||||
},
|
||||
|
||||
getEventsByName (eventName) {
|
||||
return reqwest({
|
||||
url: `events/${eventName}`,
|
||||
method: 'get',
|
||||
type: TYPE,
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
module.exports = EventStore;
|
||||
@ -1,75 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const Server = require('./FeatureToggleServerFacade');
|
||||
|
||||
const FeatureToggleActions = Reflux.createActions({
|
||||
init: { asyncResult: true },
|
||||
initArchive: { asyncResult: true },
|
||||
create: { asyncResult: true },
|
||||
update: { asyncResult: true },
|
||||
archive: { asyncResult: true },
|
||||
revive: { asyncResult: true },
|
||||
});
|
||||
|
||||
FeatureToggleActions.init.listen(function () {
|
||||
Server.getFeatures((error, features) => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(features);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
FeatureToggleActions.initArchive.listen(function () {
|
||||
Server.getArchivedFeatures((error, archivedToggles) => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(archivedToggles);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
FeatureToggleActions.create.listen(function (feature) {
|
||||
Server.createFeature(feature, error => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
FeatureToggleActions.update.listen(function (feature) {
|
||||
Server.updateFeature(feature, error => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
FeatureToggleActions.archive.listen(function (feature) {
|
||||
Server.archiveFeature(feature, error => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
FeatureToggleActions.revive.listen(function (feature) {
|
||||
Server.reviveFeature(feature, error => {
|
||||
if (error) {
|
||||
this.failed(error);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = FeatureToggleActions;
|
||||
@ -1,100 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const reqwest = require('reqwest');
|
||||
|
||||
const TYPE = 'json';
|
||||
const CONTENT_TYPE = 'application/json';
|
||||
|
||||
const FeatureToggleServerFacade = {
|
||||
updateFeature (feature, cb) {
|
||||
reqwest({
|
||||
url: `features/${feature.name}`,
|
||||
method: 'put',
|
||||
type: TYPE,
|
||||
contentType: CONTENT_TYPE,
|
||||
data: JSON.stringify(feature),
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
createFeature (feature, cb) {
|
||||
reqwest({
|
||||
url: 'features',
|
||||
method: 'post',
|
||||
type: TYPE,
|
||||
contentType: CONTENT_TYPE,
|
||||
data: JSON.stringify(feature),
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
archiveFeature (feature, cb) {
|
||||
reqwest({
|
||||
url: `features/${feature.name}`,
|
||||
method: 'delete',
|
||||
type: TYPE,
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getFeatures (cb) {
|
||||
reqwest({
|
||||
url: 'features',
|
||||
method: 'get',
|
||||
type: TYPE,
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success (data) {
|
||||
cb(null, data.features);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getArchivedFeatures (cb) {
|
||||
reqwest({
|
||||
url: 'archive/features',
|
||||
method: 'get',
|
||||
type: TYPE,
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success (data) {
|
||||
cb(null, data.features);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
reviveFeature (feature, cb) {
|
||||
reqwest({
|
||||
url: 'archive/revive',
|
||||
method: 'post',
|
||||
type: TYPE,
|
||||
contentType: CONTENT_TYPE,
|
||||
data: JSON.stringify(feature),
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb();
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = FeatureToggleServerFacade;
|
||||
@ -1,57 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const FeatureActions = require('./FeatureToggleActions');
|
||||
const filter = require('lodash/collection/filter');
|
||||
const sortBy = require('lodash/collection/sortBy');
|
||||
const findIndex = require('lodash/array/findIndex');
|
||||
|
||||
let _featureToggles = [];
|
||||
|
||||
const FeatureStore = Reflux.createStore({
|
||||
|
||||
// Initial setup
|
||||
init () {
|
||||
this.listenTo(FeatureActions.init.completed, this.setToggles);
|
||||
this.listenTo(FeatureActions.create.completed, this.onCreate);
|
||||
this.listenTo(FeatureActions.update.completed, this.onUpdate);
|
||||
this.listenTo(FeatureActions.archive.completed, this.onArchive);
|
||||
this.listenTo(FeatureActions.revive.completed, this.onRevive);
|
||||
},
|
||||
|
||||
onCreate (feature) {
|
||||
this.setToggles([feature].concat(_featureToggles));
|
||||
},
|
||||
|
||||
setToggles (toggles) {
|
||||
_featureToggles = sortBy(toggles, 'name');
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
onUpdate (feature) {
|
||||
const idx = findIndex(_featureToggles, 'name', feature.name);
|
||||
_featureToggles[idx] = feature;
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
onArchive (feature) {
|
||||
const featureToggles = filter(_featureToggles, item => item.name !== feature.name);
|
||||
this.setToggles(featureToggles);
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
onRevive (item) {
|
||||
this.setToggles(_featureToggles.concat([item]));
|
||||
this.trigger();
|
||||
},
|
||||
|
||||
getFeatureToggles () {
|
||||
return _featureToggles;
|
||||
},
|
||||
|
||||
initStore (toggles) {
|
||||
_featureToggles = toggles;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = FeatureStore;
|
||||
@ -1,54 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const reqwest = require('reqwest');
|
||||
|
||||
const TYPE = 'json';
|
||||
const CONTENT_TYPE = 'application/json';
|
||||
|
||||
const StrategyAPI = {
|
||||
createStrategy (strategy, cb) {
|
||||
reqwest({
|
||||
url: 'strategies',
|
||||
method: 'post',
|
||||
type: TYPE,
|
||||
contentType: CONTENT_TYPE,
|
||||
data: JSON.stringify(strategy),
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb(null, strategy);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
removeStrategy (strategy, cb) {
|
||||
reqwest({
|
||||
url: `strategies/${strategy.name}`,
|
||||
method: 'delete',
|
||||
type: TYPE,
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success () {
|
||||
cb(null, strategy);
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
getStrategies (cb) {
|
||||
reqwest({
|
||||
url: 'strategies',
|
||||
method: 'get',
|
||||
type: TYPE,
|
||||
error (error) {
|
||||
cb(error);
|
||||
},
|
||||
success (data) {
|
||||
cb(null, data.strategies);
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = StrategyAPI;
|
||||
@ -1,42 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const StrategyAPI = require('./StrategyAPI');
|
||||
|
||||
const StrategyActions = Reflux.createActions({
|
||||
init: { asyncResult: true },
|
||||
create: { asyncResult: true },
|
||||
remove: { asyncResult: true },
|
||||
});
|
||||
|
||||
StrategyActions.init.listen(function () {
|
||||
StrategyAPI.getStrategies((err, strategies) => {
|
||||
if (err) {
|
||||
this.failed(err);
|
||||
} else {
|
||||
this.completed(strategies);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
StrategyActions.create.listen(function (feature) {
|
||||
StrategyAPI.createStrategy(feature, err => {
|
||||
if (err) {
|
||||
this.failed(err);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
StrategyActions.remove.listen(function (feature) {
|
||||
StrategyAPI.removeStrategy(feature, err => {
|
||||
if (err) {
|
||||
this.failed(err);
|
||||
} else {
|
||||
this.completed(feature);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = StrategyActions;
|
||||
@ -1,42 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Reflux = require('reflux');
|
||||
const StrategyActions = require('./StrategyActions');
|
||||
const filter = require('lodash/collection/filter');
|
||||
|
||||
let _strategies = [];
|
||||
|
||||
// Creates a DataStore
|
||||
const StrategyStore = Reflux.createStore({
|
||||
|
||||
// Initial setup
|
||||
init () {
|
||||
this.listenTo(StrategyActions.init.completed, this.setStrategies);
|
||||
this.listenTo(StrategyActions.create.completed, this.onCreate);
|
||||
this.listenTo(StrategyActions.remove.completed, this.onRemove);
|
||||
},
|
||||
|
||||
onCreate (strategy) {
|
||||
this.setStrategies(_strategies.concat([strategy]));
|
||||
},
|
||||
|
||||
onRemove (strategy) {
|
||||
const strategies = filter(_strategies, item => item.name !== strategy.name);
|
||||
this.setStrategies(strategies);
|
||||
},
|
||||
|
||||
setStrategies (strategies) {
|
||||
_strategies = strategies;
|
||||
this.trigger(_strategies);
|
||||
},
|
||||
|
||||
getStrategies () {
|
||||
return _strategies;
|
||||
},
|
||||
|
||||
initStore (strategies) {
|
||||
_strategies = strategies;
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = StrategyStore;
|
||||
@ -1,36 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
let _username;
|
||||
|
||||
// Ref: http://stackoverflow.com/questions/10730362/get-cookie-by-name
|
||||
function readCookie (cookieName) {
|
||||
const nameEQ = `${cookieName}=`;
|
||||
const ca = document.cookie.split(';');
|
||||
for (let i = 0;i < ca.length;i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') { // eslint-disable-line eqeqeq
|
||||
c = c.substring(1, c.length);
|
||||
}
|
||||
if (c.indexOf(nameEQ) === 0) {
|
||||
return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const UserStore = {
|
||||
init () {
|
||||
_username = readCookie('username');
|
||||
},
|
||||
|
||||
set (username) {
|
||||
_username = username;
|
||||
document.cookie = `username=${_username}; expires=Thu, 18 Dec 2099 12:00:00 UTC`;
|
||||
},
|
||||
|
||||
get () {
|
||||
return _username;
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = UserStore;
|
||||
@ -1,19 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const FeatureToggleActions = require('./FeatureToggleActions');
|
||||
const StrategyActions = require('./StrategyActions');
|
||||
const Timer = require('../utils/Timer');
|
||||
|
||||
let _timer;
|
||||
|
||||
function load () {
|
||||
FeatureToggleActions.init.triggerPromise();
|
||||
StrategyActions.init.triggerPromise();
|
||||
FeatureToggleActions.initArchive.triggerPromise();
|
||||
}
|
||||
|
||||
module.exports = function (pollInterval) {
|
||||
const intervall = pollInterval || 30;
|
||||
_timer = new Timer(load, intervall * 1000);
|
||||
_timer.start();
|
||||
};
|
||||
@ -1,29 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const Timer = function (cb, interval) {
|
||||
this.cb = cb;
|
||||
this.interval = interval;
|
||||
this.timerId = null;
|
||||
};
|
||||
|
||||
Timer.prototype.start = function () {
|
||||
if (this.timerId != null) {
|
||||
console.warn('timer already started'); // eslint-disable-line no-console
|
||||
}
|
||||
|
||||
console.log('starting timer'); // eslint-disable-line no-console
|
||||
this.timerId = setInterval(this.cb, this.interval);
|
||||
this.cb();
|
||||
};
|
||||
|
||||
Timer.prototype.stop = function () {
|
||||
if (this.timerId == null) {
|
||||
console.warn('no timer running'); // eslint-disable-line no-console
|
||||
} else {
|
||||
console.log('stopping timer'); // eslint-disable-line no-console
|
||||
clearInterval(this.timerId);
|
||||
this.timerId = null;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Timer;
|
||||
@ -1,37 +0,0 @@
|
||||
.toggle-active {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
background-color: lawngreen;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.toggle-inactive {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
code {
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code > .diff-N {
|
||||
color: green;
|
||||
}
|
||||
|
||||
code > .diff-D {
|
||||
color: red;
|
||||
}
|
||||
|
||||
code > .diff-A, .diff-E {
|
||||
color: black;
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
// docs: http://webpack.github.io/docs/configuration.html
|
||||
'use strict';
|
||||
|
||||
const path = require('path');
|
||||
const publicRoot = path.join(__dirname, 'public');
|
||||
const jsroot = path.join(publicRoot, 'js');
|
||||
|
||||
module.exports = {
|
||||
|
||||
context: jsroot,
|
||||
entry: './app.jsx',
|
||||
|
||||
output: {
|
||||
path: publicRoot,
|
||||
filename: 'bundle.js',
|
||||
publicPath: '/js/',
|
||||
},
|
||||
|
||||
resolve: {
|
||||
root: [jsroot],
|
||||
extensions: ['', '.js', '.jsx'],
|
||||
modulesDirectories: ['web_modules', 'node_modules'],
|
||||
},
|
||||
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
devtool: 'source-map',
|
||||
|
||||
externals: {
|
||||
// stuff not in node_modules can be resolved here.
|
||||
},
|
||||
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user