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;