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/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 });