Tweakin' & linting

apache · Aug 28, 2016 · 98ecdcc · 98ecdcc
1 parent 58213c2
commit 98ecdcc
Show file tree

Hide file tree

Showing 24 changed files with 225 additions and 228 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/common.js b/caravel/assets/javascripts/SqlLab/common.js
@@ -1,5 +1,6 @@
 export const STATE_BSSTYLE_MAP = {
   failed: 'danger',
+  pending: 'info',
   running: 'warning',
   success: 'success',
 };
diff --git a/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx b/caravel/assets/javascripts/SqlLab/components/ButtonWithTooltip.jsx
@@ -17,6 +17,7 @@ const ButtonWithTooltip = (props) => {
       <Button
         onClick={props.onClick}
         bsStyle={props.bsStyle}
+        bsSize={props.bsSize}
         disabled={props.disabled}
         className={props.className}
       >
@@ -34,6 +35,7 @@ ButtonWithTooltip.defaultProps = {
 };
 
 ButtonWithTooltip.propTypes = {
+  bsSize: React.PropTypes.string,
   bsStyle: React.PropTypes.string,
   children: React.PropTypes.element,
   className: React.PropTypes.string,

diff --git a/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx b/caravel/assets/javascripts/SqlLab/components/LeftPane.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button, Label } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
@@ -25,9 +25,6 @@ const LeftPane = (props) => {
         <div className="panel-heading">
           <div className="panel-title">
             Saved Queries
-            <div className="pull-right">
-              <Label bsStyle="danger">ALPHA</Label>
-            </div>
           </div>
         </div>
         <div className="panel-body">

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx b/caravel/assets/javascripts/SqlLab/components/QueryAutoRefresh.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import moment from 'moment';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as Actions from '../actions';
 
-$ = require('jquery');
+const $ = require('jquery');
 
 
 class QueryAutoRefresh extends React.Component {
@@ -26,20 +25,18 @@ class QueryAutoRefresh extends React.Component {
   stopwatch() {
     const url = '/caravel/queries/0';
     // No updates in case of failure.
-    $.getJSON(
-      url,
-      (data, status, xhr) => {
-        if (status === "success") {
-          this.props.actions.refreshQueries(data);
-        }
+    $.getJSON(url, (data, status) => {
+      if (status === 'success') {
+        this.props.actions.refreshQueries(data);
+      }
     });
   }
   render() {
     return null;
   }
 }
 QueryAutoRefresh.propTypes = {
-  // queries: React.PropTypes.object,
+  actions: React.PropTypes.object,
 };
 QueryAutoRefresh.defaultProps = {
   // queries: null,

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx b/caravel/assets/javascripts/SqlLab/components/QueryHistory.jsx
@@ -9,16 +9,19 @@ import { Alert } from 'react-bootstrap';
 
 const QueryHistory = (props) => {
   const activeQeId = props.tabHistory[props.tabHistory.length - 1];
-  const queriesArray = []
-  for (var query_id in props.queries) {
-      if (props.queries[query_id].sqlEditorId === activeQeId) {
-        queriesArray.push(props.queries[query_id])
-      }
+  const queriesArray = [];
+  for (const id in props.queries) {
+    if (props.queries[id].sqlEditorId === activeQeId) {
+      queriesArray.push(props.queries[id]);
+    }
   }
   if (queriesArray.length > 0) {
     return (
       <QueryTable
-        columns={['state', 'started', 'duration', 'progress', 'rows', 'sql', 'actions']}
+        columns={[
+          'state', 'started', 'duration', 'progress',
+          'rows', 'sql', 'output', 'actions',
+        ]}
         queries={queriesArray}
       />
     );

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx b/caravel/assets/javascripts/SqlLab/components/QueryLink.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { ButtonGroup } from 'react-bootstrap';
 import Link from './Link';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -23,8 +22,8 @@ class QueryLink extends React.Component {
   render() {
     return (
       <div>
-        <div className="row">
-          <div className="col-md-10">
+        <div className="clearfix">
+          <div className="pull-left">
             <a
               href="#"
               tooltip="Pop this query in a new tab"
@@ -33,7 +32,7 @@ class QueryLink extends React.Component {
               {this.props.query.title}
             </a>
           </div>
-          <div className="col-md-2">
+          <div className="pull-right">
             <Link
               onClick={this.props.actions.removeWorkspaceQuery.bind(this, this.props.query)}
               tooltip="Remove query from workspace"

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx b/caravel/assets/javascripts/SqlLab/components/QueryLog.jsx
diff --git a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
@@ -6,6 +6,7 @@ import * as Actions from '../actions';
 
 import moment from 'moment';
 import { Table } from 'reactable';
+import { ProgressBar } from 'react-bootstrap';
 
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { github } from 'react-syntax-highlighter/dist/styles';
@@ -30,6 +31,9 @@ class QueryTable extends React.Component {
     this.setState({ showVisualizeModal: true });
     this.setState({ activeQuery: query });
   }
+  restoreSql(query) {
+    this.props.actions.queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+  }
   notImplemented() {
     alert('Not implemented yet!');
   }
@@ -43,39 +47,58 @@ class QueryTable extends React.Component {
         q.duration = duration.format('HH:mm:ss.SS');
       }
       q.started = moment.utc(q.startDttm).format('HH:mm:ss');
-      q.sql = <SyntaxHighlighter language="sql" style={github}>{q.sql}</SyntaxHighlighter>;
+      const source = q.ctas ? q.executedSql : q.sql;
+      q.sql = (
+        <SyntaxHighlighter language="sql" style={github}>
+          {source || ''}
+        </SyntaxHighlighter>
+      );
+      q.output = q.tempTable;
+      q.progress = (
+        <ProgressBar
+          style={{ width: '75px' }}
+          striped
+          now={q.progress}
+          label={`${q.progress}%`}
+        />
+      );
+      let errorTooltip;
+      if (q.errorMessage) {
+        errorTooltip = (
+          <Link tooltip={q.errorMessage}>
+            <i className="fa fa-exclamation-circle text-danger" />
+          </Link>
+        );
+      }
       q.state = (
-        <span
-          className={"label label-" + STATE_BSSTYLE_MAP[q.state]}
-        >
-          {q.state}
-        </span>
+        <div>
+          <span className={'m-r-3 label label-' + STATE_BSSTYLE_MAP[q.state]}>
+            {q.state}
+          </span>
+          {errorTooltip}
+        </div>
       );
       q.actions = (
-        <div>
+        <div style={{ width: '75px' }}>
           <Link
-            className="fa fa-line-chart"
+            className="fa fa-line-chart m-r-3"
             tooltip="Visualize the data out of this query"
             onClick={this.showVisualizeModal.bind(this, query)}
-            href="#"
           />
           <Link
-            className="fa fa-pencil"
-            onClick={self.notImplemented}
+            className="fa fa-pencil m-r-3"
+            onClick={this.restoreSql.bind(this, query)}
             tooltip="Overwrite text in editor with a query on this table"
             placement="top"
-            href="#"
           />
           <Link
-            className="fa fa-plus-circle"
+            className="fa fa-plus-circle m-r-3"
             onClick={self.notImplemented}
             tooltip="Run query in a new tab"
             placement="top"
-            href="#"
           />
           <Link
-            className="fa fa-trash"
-            href="#"
+            className="fa fa-trash m-r-3"
             tooltip="Remove query from log"
             onClick={this.props.actions.removeQuery.bind(this, query)}
           />
@@ -92,7 +115,7 @@ class QueryTable extends React.Component {
           onHide={this.hideVisualizeModal.bind(this)}
         />
         <Table
-          columns={['state', 'started', 'duration', 'progress', 'rows', 'sql', 'actions']}
+          columns={this.props.columns}
           className="table table-condensed"
           data={data}
         />

diff --git a/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx b/caravel/assets/javascripts/SqlLab/components/ResultSet.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Alert, Button } from 'react-bootstrap';
+import { Alert, Button, ButtonGroup } from 'react-bootstrap';
 import { Table } from 'reactable';
 
 import VisualizeModal from './VisualizeModal';
@@ -36,16 +36,23 @@ class ResultSet extends React.Component {
         <div className="ResultSetControls">
           <div className="clearfix">
             <div className="pull-left">
-              <Button className="m-r-5" onClick={this.showModal.bind(this)}>
-                <i className="fa fa-line-chart m-l-1" /> Visualize
-              </Button>
-              <Button className="m-r-5"><i className="fa fa-file-text-o" /> .CSV</Button>
+              <ButtonGroup>
+                <Button
+                  bsSize="small"
+                  onClick={this.showModal.bind(this)}
+                >
+                  <i className="fa fa-line-chart m-l-1" /> Visualize
+                </Button>
+                <Button bsSize="small">
+                  <i className="fa fa-file-text-o" /> .CSV
+                </Button>
+              </ButtonGroup>
             </div>
             <div className="pull-right">
               <input
                 type="text"
                 onChange={this.changeSearch.bind(this)}
-                className="form-control"
+                className="form-control input-sm"
                 placeholder="Search Results"
               />
             </div>