add metrics to edit-view

frontend/src/component/feature/feature-list-item-component.jsx

@@ -1,11 +1,9 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Chip, Switch, Icon, Tooltip, IconButton, ChipContact } from 'react-mdl';
+import { Chip, Switch, Icon, IconButton } from 'react-mdl';
 import percentLib from 'percent';
 import Progress from './progress';
 
-
-
 import style from './feature.scss';
 
 const Feature = ({

frontend/src/component/feature/form-edit-container.jsx

@@ -3,7 +3,7 @@ import { hashHistory } from 'react-router';
 
 import { requestUpdateFeatureToggle } from '../../store/feature-actions';
 import { createMapper, createActions } from '../input-helpers';
-import EditAndView from './view-and-edit';
+import FormComponent from './form';
 
 const ID = 'edit-feature-toggle';
 function getId (props) {
@@ -59,4 +59,4 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(EditAndView);
+export default connect(mapStateToProps, actions)(FormComponent);

frontend/src/component/feature/form-edit-wrap.jsx

@@ -1,41 +0,0 @@
-import React, { PropTypes } from 'react';
-
-import { connect } from 'react-redux';
-import EditFeatureToggle from './form-edit-container.jsx';
-import { fetchFeatureToggles } from '../../store/feature-actions';
-
-class EditFeatureToggleWrapper extends React.Component {
-
-    static propTypes () {
-        return {
-            featureToggleName: PropTypes.string.isRequired,
-            features: PropTypes.array.isRequired,
-            fetchFeatureToggles: PropTypes.array.isRequired,
-        };
-    }
-
-    componentWillMount () {
-        if (this.props.features.length === 0) {
-            this.props.fetchFeatureToggles();
-        }
-    }
-
-    render () {
-        const { features, featureToggleName } = this.props;
-
-        const featureToggle = features.find(toggle => toggle.name === featureToggleName);
-
-        if (featureToggle) {
-            return <EditFeatureToggle featureToggle={featureToggle} />;
-        } else if (features.length === 0 ) {
-            return <span>Loading</span>;
-        } else  {
-            return <span>Could not find {this.props.featureToggleName}</span>;
-        }
-    }
-}
-
-
-export default connect((state) => ({
-    features: state.features.toJS(),
-}), { fetchFeatureToggles })(EditFeatureToggleWrapper);

frontend/src/component/feature/list-component.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import Feature from './feature-component';
+import Feature from './feature-list-item-component';
 import { Link } from 'react-router';
 import { Icon, Chip, ChipContact, IconButton, FABButton, Textfield, Menu, MenuItem } from 'react-mdl';
 

frontend/src/component/feature/progress.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react';
-import styles from './progress.scss';
+import styles from './progress-styles.scss';
 
 class Progress extends Component {
     constructor (props) {

frontend/src/component/feature/view-and-edit.jsx

@@ -1,22 +0,0 @@
-import React, { PropTypes } from 'react';
-
-import FormComponent from './form';
-
-
-const Render = (props) => {
-    return (
-        <div>
-            <h1>{props.featureToggle.name}</h1>
-
-            <p>add metrics</p>
-            <p>add apps</p>
-            <p>add instances</p>
-
-            <hr />
-            <h5>Edit</h5>
-            <FormComponent {...props} />
-        </div>
-    );
-};
-
-export default Render;

frontend/src/component/feature/view-edit-container.jsx

@@ -0,0 +1,121 @@
+import React, { PropTypes } from 'react';
+import { Grid, Cell, Icon } from 'react-mdl';
+
+import percentLib from 'percent';
+import Progress from './progress';
+
+import { connect } from 'react-redux';
+import EditFeatureToggle from './form-edit-container.jsx';
+import { fetchFeatureToggles } from '../../store/feature-actions';
+import { fetchFeatureMetrics } from '../../store/feature-metrics-actions';
+
+
+
+// import { toggleFeature, fetchFeatureToggles, removeFeatureToggle } from '../../store/feature-actions';
+
+
+class EditFeatureToggleWrapper extends React.Component {
+
+    static propTypes () {
+        return {
+            featureToggleName: PropTypes.string.isRequired,
+            features: PropTypes.array.isRequired,
+            fetchFeatureToggles: PropTypes.array.isRequired,
+        };
+    }
+
+    componentWillMount () {
+        if (this.props.features.length === 0) {
+            this.props.fetchFeatureToggles();
+        }
+        this.props.fetchFeatureMetrics();
+        setInterval(() => {
+            this.props.fetchFeatureMetrics();
+        }, 5000);
+    }
+
+    render () {
+        const {
+            features,
+            featureToggleName,
+            metrics = {
+                lastHour: { yes: 0, no: 0, isFallback: true },
+                lastMinute: { yes: 0, no: 0, isFallback: true },
+            },
+        } = this.props;
+
+        const lastHourPercent = percentLib.calc(metrics.lastHour.yes, metrics.lastHour.yes + metrics.lastHour.no, 0);
+        const lastMinutePercent = percentLib.calc(metrics.lastMinute.yes, metrics.lastMinute.yes + metrics.lastMinute.no, 0);
+    
+
+        const featureToggle = features.find(toggle => toggle.name === featureToggleName);
+
+        if (!featureToggle) {
+            if (features.length === 0 ) {
+                return <span>Loading</span>;
+            }
+            return <span>Could not find {this.props.featureToggleName}</span>;
+        }
+
+
+        return (
+            <div>
+                    <h4>{featureToggle.name}</h4>
+                    <Grid>
+                        <Cell col={3} style={{ textAlign: 'center' }}>
+                            {
+                                metrics.lastMinute.isFallback ?
+                                <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
+                                <div>
+                                    <Progress strokeWidth={15} percentage={lastMinutePercent} width="50" />
+                                </div>
+                            }
+                            <p><strong>Last minute:</strong> Yes {metrics.lastMinute.yes}, No: {metrics.lastMinute.no}</p>
+                        </Cell>
+                        <Cell col={3} style={{ textAlign: 'center' }}>
+                            {
+                                metrics.lastHour.isFallback ?
+                                <Icon style={{ width: '100px', height: '100px', fontSize: '100px', color: '#ccc' }} name="report problem" title="No metrics avaiable" /> :
+                                <div>
+                                    <Progress strokeWidth={15} percentage={lastHourPercent} width="50" />
+                                </div>
+                            }
+                            <p><strong>Last hour:</strong> Yes {metrics.lastHour.yes}, No: {metrics.lastHour.no}</p>
+                        </Cell>
+                        <Cell col={3}>
+                            <p>add apps</p>
+                        </Cell>
+                        <Cell col={3}>
+                             <p>add instances</p>
+                        </Cell>
+                    </Grid>
+                    
+                    
+                   
+                    
+                    <EditFeatureToggle featureToggle={featureToggle} />
+            </div>
+        );
+    }
+}
+
+function getMetricsForToggle (state, toggleName) {
+    if (!toggleName) {
+        return;
+    }
+    if (state.featureMetrics.hasIn(['lastHour', toggleName])) {
+        return {
+            lastHour: state.featureMetrics.getIn(['lastHour', toggleName]),
+            lastMinute: state.featureMetrics.getIn(['lastMinute', toggleName]),
+        };
+    }
+}
+
+
+export default connect((state, props) => ({
+    features: state.features.toJS(),
+    metrics: getMetricsForToggle(state, props.featureToggleName),
+}), {
+    fetchFeatureMetrics,
+    fetchFeatureToggles,
+})(EditFeatureToggleWrapper);

frontend/src/page/features/edit.js

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-import EditFeatureToggleForm from '../../component/feature/form-edit-wrap';
+import EditFeatureToggleForm from '../../component/feature/view-edit-container';
 
 export default class Features extends Component {
     static propTypes () {