Added timer to explore v2 and share it with sqllab

apache · Dec 8, 2016 · f1d0e86 · f1d0e86
1 parent 34d0dd9
commit f1d0e86
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 24 deletions.
diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditor.jsx b/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>
     );

diff --git a/...s/javascripts/SqlLab/components/Timer.jsx → ...t/assets/javascripts/components/Timer.jsx b/...s/javascripts/SqlLab/components/Timer.jsx → ...t/assets/javascripts/components/Timer.jsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { now, fDuration } from '../../modules/dates';
-
-import { STATE_BSSTYLE_MAP } from '../constants.js';
+import { now, fDuration } from '../modules/dates';
 
 class Timer extends React.PureComponent {
   constructor(props) {
@@ -26,24 +24,25 @@ class Timer extends React.PureComponent {
     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') {
+    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.query && this.props.query.state === 'running') {
+    if (this.props && this.props.isRunning) {
       this.startTimer();
     }
     let timerSpan = null;
-    if (this.props && this.props.query) {
-      const bsStyle = STATE_BSSTYLE_MAP[this.props.query.state];
+    if (this.props) {
       timerSpan = (
-        <span className={'inlineBlock m-r-5 label label-' + bsStyle}>
+        <span className={'inlineBlock m-r-5 label label-' + this.props.state}>
           {this.state.clockStr}
         </span>
       );
@@ -52,10 +51,16 @@ class Timer extends React.PureComponent {
   }
 }
 Timer.propTypes = {
-  query: React.PropTypes.object,
+  startTime: React.PropTypes.string,
+  endTime: React.PropTypes.string,
+  isRunning: React.PropTypes.bool.isRequired,
+  state: React.PropTypes.bool,
 };
+
 Timer.defaultProps = {
-  query: null,
+  startTime: null,
+  endTime: null,
+  state: 'success',
 };
 
 export default Timer;
diff --git a/superset/assets/javascripts/explorev2/actions/exploreActions.js b/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}/`;
 

diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/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_STATE_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,12 @@ 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_STATE_MAP[this.props.chartStatus]}
+                />
                 <ExploreActionButtons
                   slice={this.state.mockSlice}
                   canDownload={this.props.can_download}
@@ -232,10 +247,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,

diff --git a/superset/assets/javascripts/explorev2/reducers/exploreReducer.js b/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,25 @@ 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.REMOVE_CHART_ALERT]() {
       return Object.assign({}, state, { chartAlert: null });