New slider

See zalmoxisus/remotedev-app#20 and
zalmoxisus/remotedev-app#21

Author: zalmoxisus

package.json

@@ -79,7 +79,8 @@
     "redux": "^3.5.2",
     "redux-devtools": "^3.3.1",
     "redux-devtools-instrument": "^1.3.2",
-    "remotedev-app": "^0.8.0-beta-4",
+    "remotedev-app": "^0.8.0-beta-8",
+    "remotedev-slider": "^1.0.1",
     "remotedev-utils": "0.0.1"
   }
 }

src/app/containers/App.js

@@ -1,7 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { liftedDispatch } from 'remotedev-app/lib/actions';
+import SliderMonitor from 'remotedev-slider';
+import { liftedDispatch, getReport } from 'remotedev-app/lib/actions';
 import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
 import styles from 'remotedev-app/lib/styles';
 import enhance from 'remotedev-app/lib/hoc';
@@ -49,13 +50,18 @@ class App extends Component {
           testComponent={isRedux && TestGenerator}
         />
         <Notification />
-        {sliderIsOpen && <div style={styles.sliderMonitor}>
-          <DevTools
+        {sliderIsOpen && options.connectionId &&
+          <SliderMonitor
             monitor="SliderMonitor"
             liftedState={liftedState}
             dispatch={this.props.liftedDispatch}
+            getReport={this.props.getReport}
+            reports={this.props.reports}
+            showActions={monitor === 'ChartMonitor'}
+            style={{ padding: '15px 5px' }}
+            fillColor="rgb(120, 144, 156)"
           />
-        </div>}
+        }
         {dispatcherIsOpen && options.connectionId &&
           <Dispatcher options={options} />
         }
@@ -109,11 +115,13 @@ class App extends Component {
 App.propTypes = {
   bgStore: PropTypes.object,
   liftedDispatch: PropTypes.func.isRequired,
+  getReport: PropTypes.func.isRequired,
   selected: PropTypes.string,
   liftedState: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
   monitor: PropTypes.string,
   position: PropTypes.string,
+  reports: PropTypes.array.isRequired,
   dispatcherIsOpen: PropTypes.bool,
   sliderIsOpen: PropTypes.bool
 };
@@ -128,12 +136,16 @@ function mapStateToProps(state) {
     monitor: state.monitor.selected,
     dispatcherIsOpen: state.monitor.dispatcherIsOpen,
     sliderIsOpen: state.monitor.sliderIsOpen,
+    reports: state.reports.data,
     shouldSync: state.instances.sync
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return { liftedDispatch: bindActionCreators(liftedDispatch, dispatch) };
+  return {
+    liftedDispatch: bindActionCreators(liftedDispatch, dispatch),
+    getReport: bindActionCreators(getReport, dispatch)
+  };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/app/reducers/panel/index.js

@@ -3,11 +3,13 @@ import instances from 'remotedev-app/lib/reducers/instances';
 import monitor from 'remotedev-app/lib/reducers/monitor';
 import notification from 'remotedev-app/lib/reducers/notification';
 import test from 'remotedev-app/lib/reducers/test';
+import reports from 'remotedev-app/lib/reducers/reports';
 
 const rootReducer = combineReducers({
   instances,
   monitor,
   test,
+  reports,
   notification
 });
 

src/app/reducers/window/index.js

@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
 import instances from './instances';
 import monitor from 'remotedev-app/lib/reducers/monitor';
 import notification from 'remotedev-app/lib/reducers/notification';
+import reports from 'remotedev-app/lib/reducers/reports';
 import test from 'remotedev-app/lib/reducers/test';
 
 const rootReducer = combineReducers({
   instances,
   monitor,
   test,
+  reports,
   notification
 });