Added timer to explore v2 and share it with sqllab (#1802)

* Added timer to explore v2 and share it with sqllab

* Fixed js tests

* Add timer to initial load

* Make timer smaller

* nits

superset/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -15,10 +15,10 @@ import {
 } from 'react-bootstrap';
 
 import SouthPane from './SouthPane';
-import Timer from './Timer';
-
+import Timer from '../../components/Timer';
 import SqlEditorLeftBar from './SqlEditorLeftBar';
 import AceEditorWrapper from './AceEditorWrapper';
+import { STATE_BSSTYLE_MAP } from '../constants.js';
 
 const propTypes = {
   actions: React.PropTypes.object.isRequired,
@@ -208,7 +208,14 @@ class SqlEditor extends React.PureComponent {
         </div>
         <div className="pull-right">
           {limitWarning}
-          <Timer query={this.props.latestQuery} />
+          {this.props.latestQuery &&
+            <Timer
+              startTime={this.props.latestQuery.startDttm}
+              endTime={this.props.latestQuery.endDttm}
+              state={STATE_BSSTYLE_MAP[this.props.latestQuery.state]}
+              isRunning={this.props.latestQuery.state === 'running'}
+            />
+          }
         </div>
       </div>
     );

superset/assets/javascripts/SqlLab/components/Timer.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { now, fDuration } from '../../modules/dates';
-
-import { STATE_BSSTYLE_MAP } from '../constants.js';
-
-class Timer extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      clockStr: '',
-    };
-  }
-  componentWillMount() {
-    this.startTimer();
-  }
-  componentWillUnmount() {
-    this.stopTimer();
-  }
-  startTimer() {
-    if (!(this.timer)) {
-      this.timer = setInterval(this.stopwatch.bind(this), 30);
-    }
-  }
-  stopTimer() {
-    clearInterval(this.timer);
-    this.timer = null;
-  }
-  stopwatch() {
-    if (this.props && this.props.query) {
-      const endDttm = this.props.query.endDttm || now();
-      const clockStr = fDuration(this.props.query.startDttm, endDttm);
-      this.setState({ clockStr });
-      if (this.props.query.state !== 'running') {
-        this.stopTimer();
-      }
-    }
-  }
-  render() {
-    if (this.props.query && this.props.query.state === 'running') {
-      this.startTimer();
-    }
-    let timerSpan = null;
-    if (this.props && this.props.query) {
-      const bsStyle = STATE_BSSTYLE_MAP[this.props.query.state];
-      timerSpan = (
-        <span className={'inlineBlock m-r-5 label label-' + bsStyle}>
-          {this.state.clockStr}
-        </span>
-      );
-    }
-    return timerSpan;
-  }
-}
-Timer.propTypes = {
-  query: React.PropTypes.object,
-};
-Timer.defaultProps = {
-  query: null,
-};
-
-export default Timer;

superset/assets/javascripts/components/Timer.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { now, fDuration } from '../modules/dates';
+
+class Timer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      clockStr: '',
+    };
+  }
+  componentWillMount() {
+    this.startTimer();
+  }
+  componentWillUnmount() {
+    this.stopTimer();
+  }
+  startTimer() {
+    if (!(this.timer)) {
+      this.timer = setInterval(this.stopwatch.bind(this), 30);
+    }
+  }
+  stopTimer() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+  stopwatch() {
+    if (this.props && this.props.startTime) {
+      const endDttm = this.props.endTime || now();
+      if (this.props.startTime < endDttm) {
+        const clockStr = fDuration(this.props.startTime, endDttm);
+        this.setState({ clockStr });
+      }
+      if (!this.props.isRunning) {
+        this.stopTimer();
+      }
+    }
+  }
+  render() {
+    if (this.props && this.props.isRunning) {
+      this.startTimer();
+    }
+    let timerSpan = null;
+    if (this.props) {
+      timerSpan = (
+        <span
+          className={`inlineBlock m-r-5 label label-${this.props.status}`}
+          style={this.props.style}
+        >
+          {this.state.clockStr}
+        </span>
+      );
+    }
+    return timerSpan;
+  }
+}
+Timer.propTypes = {
+  startTime: React.PropTypes.number,
+  endTime: React.PropTypes.number,
+  isRunning: React.PropTypes.bool.isRequired,
+  status: React.PropTypes.string,
+  style: React.PropTypes.object,
+};
+
+Timer.defaultProps = {
+  startTime: null,
+  endTime: null,
+  status: 'success',
+  style: null,
+};
+
+export default Timer;

superset/assets/javascripts/explorev2/actions/exploreActions.js

@@ -115,7 +115,7 @@ export function chartUpdateFailed(error) {
 
 export function updateExplore(datasource_type, datasource_id, form_data) {
   return function (dispatch) {
-    dispatch(chartUpdateStarted);
+    dispatch(chartUpdateStarted());
     const updateUrl =
     `/superset/update_explore/${datasource_type}/${datasource_id}/`;
 
@@ -194,3 +194,8 @@ export function saveSlice(url) {
     });
   };
 }
+
+export const UPDATE_CHART_STATUS = 'UPDATE_CHART_STATUS';
+export function updateChartStatus(status) {
+  return { type: UPDATE_CHART_STATUS, status };
+}

superset/assets/javascripts/explorev2/components/ChartContainer.jsx

@@ -7,6 +7,13 @@ import { d3format } from '../../modules/utils';
 import ExploreActionButtons from '../../explore/components/ExploreActionButtons';
 import FaveStar from '../../components/FaveStar';
 import TooltipWrapper from '../../components/TooltipWrapper';
+import Timer from '../../components/Timer';
+
+const CHART_STATUS_MAP = {
+  failed: 'danger',
+  loading: 'warning',
+  success: 'success',
+};
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -22,8 +29,10 @@ const propTypes = {
   query: PropTypes.string.isRequired,
   column_formats: PropTypes.object,
   data: PropTypes.any,
-  isChartLoading: PropTypes.bool,
+  chartStatus: PropTypes.bool,
   isStarred: PropTypes.bool.isRequired,
+  chartUpdateStartTime: PropTypes.string.isRequired,
+  chartUpdateEndTime: PropTypes.string.isRequired,
   alert: PropTypes.string,
   table_name: PropTypes.string,
 };
@@ -157,7 +166,7 @@ class ChartContainer extends React.Component {
         </Alert>
       );
     }
-    if (this.props.isChartLoading) {
+    if (this.props.chartStatus === 'loading') {
       return (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />);
     }
     return (
@@ -205,6 +214,13 @@ class ChartContainer extends React.Component {
               }
 
               <div className="pull-right">
+                <Timer
+                  startTime={this.props.chartUpdateStartTime}
+                  endTime={this.props.chartUpdateEndTime}
+                  isRunning={this.props.chartStatus === 'loading'}
+                  state={CHART_STATUS_MAP[this.props.chartStatus]}
+                  style={{ 'font-size': '10px', 'margin-right': '5px' }}
+                />
                 <ExploreActionButtons
                   slice={this.state.mockSlice}
                   canDownload={this.props.can_download}
@@ -232,10 +248,12 @@ function mapStateToProps(state) {
     csv_endpoint: state.viz.csv_endpoint,
     json_endpoint: state.viz.json_endpoint,
     standalone_endpoint: state.viz.standalone_endpoint,
+    chartUpdateStartTime: state.chartUpdateStartTime,
+    chartUpdateEndTime: state.chartUpdateEndTime,
     query: state.viz.query,
     column_formats: state.viz.column_formats,
     data: state.viz.data,
-    isChartLoading: state.isChartLoading,
+    chartStatus: state.chartStatus,
     isStarred: state.isStarred,
     alert: state.chartAlert,
     table_name: state.viz.form_data.datasource_name,

superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx

@@ -30,6 +30,7 @@ class ExploreViewContainer extends React.Component {
 
   componentDidMount() {
     window.addEventListener('resize', this.handleResize.bind(this));
+    this.props.actions.updateChartStatus('success');
   }
 
   componentWillReceiveProps(nextProps) {

superset/assets/javascripts/explorev2/index.jsx

@@ -5,6 +5,7 @@ import ExploreViewContainer from './components/ExploreViewContainer';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
+import { now } from '../modules/dates';
 
 // jquery and bootstrap required to make bootstrap dropdown menu's work
 const $ = window.$ = require('jquery'); // eslint-disable-line
@@ -26,6 +27,9 @@ const bootstrappedState = Object.assign(
     datasource_type: bootstrapData.datasource_type,
     viz: bootstrapData.viz,
     user_id: bootstrapData.user_id,
+    chartUpdateStartTime: now(),
+    chartUpdateEndTime: null,
+    chartStatus: 'loading',
   }
 );
 bootstrappedState.viz.form_data.datasource = parseInt(bootstrapData.datasource_id, 10);

superset/assets/javascripts/explorev2/reducers/exploreReducer.js

@@ -1,6 +1,7 @@
 import { defaultFormData } from '../stores/store';
 import * as actions from '../actions/exploreActions';
 import { addToArr, removeFromArr, alterInArr } from '../../../utils/reducerUtils';
+import { now } from '../../modules/dates';
 
 export const exploreReducer = function (state, action) {
   const actionHandlers = {
@@ -113,19 +114,32 @@ export const exploreReducer = function (state, action) {
         query: action.viz.query,
         data: action.viz.data,
       };
+      const chartUpdateEndTime = now();
       return Object.assign(
         {},
         state,
         {
           viz: Object.assign({}, state.viz, vizUpdates),
-          isChartLoading: false,
+          chartStatus: 'success',
+          chartUpdateEndTime,
         });
     },
     [actions.CHART_UPDATE_STARTED]() {
-      return Object.assign({}, state, { isChartLoading: true });
+      const chartUpdateStartTime = now();
+      return Object.assign({}, state,
+        { chartStatus: 'loading', chartUpdateEndTime: null, chartUpdateStartTime });
     },
     [actions.CHART_UPDATE_FAILED]() {
-      return Object.assign({}, state, { isChartLoading: false, chartAlert: action.error });
+      const chartUpdateEndTime = now();
+      return Object.assign({}, state,
+        { chartStatus: 'failed', chartAlert: action.error, chartUpdateEndTime });
+    },
+    [actions.UPDATE_CHART_STATUS]() {
+      const newState = Object.assign({}, state, { chartStatus: action.status });
+      if (action.status === 'success' || action.status === 'failed') {
+        newState.chartUpdateEndTime = now();
+      }
+      return newState;
     },
     [actions.REMOVE_CHART_ALERT]() {
       return Object.assign({}, state, { chartAlert: null });

superset/assets/spec/javascripts/sqllab/Timer_spec.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import Timer from '../../../javascripts/SqlLab/components/Timer';
+import Timer from '../../../javascripts/components/Timer';
 import { shallow } from 'enzyme';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
-import { queries } from './fixtures';
+import { now } from '../../../javascripts/modules/dates';
 
 
 describe('Timer', () => {
   const mockedProps = {
-    query: queries[0],
+    startTime: now(),
+    endTime: null,
+    isRunning: true,
+    state: 'warning',
   };
   it('renders', () => {
     expect(React.isValidElement(<Timer />)).to.equal(true);