Some polish on query search (#1222)

* Some polish - Changed query search icon - CopyToClipboard in action bar * Added dbId as linked-button, made modifications based on comments * Fix duplicated import (linting)
apache · Oct 5, 2016 · 421a86a · 421a86a
1 parent 140a055
commit 421a86a
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 18 deletions.
diff --git a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
@@ -11,15 +11,12 @@ class DatabaseSelect extends React.Component {
     this.state = {
       databaseLoading: false,
       databaseOptions: [],
-      databaseId: null,
     };
   }
   componentDidMount() {
     this.fetchDatabaseOptions();
   }
   changeDb(db) {
-    const val = (db) ? db.value : null;
-    this.setState({ databaseId: val });
     this.props.onChange(db);
   }
   fetchDatabaseOptions() {
@@ -38,7 +35,7 @@ class DatabaseSelect extends React.Component {
           name="select-db"
           placeholder={`Select a database (${this.state.databaseOptions.length})`}
           options={this.state.databaseOptions}
-          value={this.state.databaseId}
+          value={this.props.databaseId}
           isLoading={this.state.databaseLoading}
           autosize={false}
           onChange={this.changeDb.bind(this)}
@@ -51,6 +48,12 @@ class DatabaseSelect extends React.Component {
 DatabaseSelect.propTypes = {
   onChange: React.PropTypes.func,
   actions: React.PropTypes.object,
+  databaseId: React.PropTypes.number,
+};
+
+DatabaseSelect.defaultProps = {
+  onChange: () => {},
+  databaseId: null,
 };
 
 function mapDispatchToProps(dispatch) {

diff --git a/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx b/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx
@@ -24,6 +24,12 @@ class QuerySearch extends React.Component {
     this.fetchUsers();
     this.refreshQueries();
   }
+  onUserClicked(userId) {
+    this.setState({ userId }, () => { this.refreshQueries(); });
+  }
+  onDbClicked(dbId) {
+    this.setState({ databaseId: dbId }, () => { this.refreshQueries(); });
+  }
   onChange(db) {
     const val = (db) ? db.value : null;
     this.setState({ databaseId: val });
@@ -74,9 +80,6 @@ class QuerySearch extends React.Component {
       }
     });
   }
-  search() {
-    this.refreshQueries(this.props);
-  }
   render() {
     return (
       <div>
@@ -93,7 +96,10 @@ class QuerySearch extends React.Component {
             />
           </div>
           <div className="col-sm-2">
-            <DatabaseSelect onChange={this.onChange.bind(this)} />
+            <DatabaseSelect
+              onChange={this.onChange.bind(this)}
+              databaseId={this.state.databaseId}
+            />
           </div>
           <div className="col-sm-4">
             <input
@@ -114,15 +120,17 @@ class QuerySearch extends React.Component {
               onChange={this.changeStatus.bind(this)}
             />
           </div>
-          <Button bsSize="small" bsStyle="success" onClick={this.search.bind(this)}>
+          <Button bsSize="small" bsStyle="success" onClick={this.refreshQueries.bind(this)}>
             Search
           </Button>
         </div>
         <QueryTable
           columns={[
             'state', 'dbId', 'userId',
-            'progress', 'rows', 'sql',
+            'progress', 'rows', 'sql', 'querylink',
           ]}
+          onUserClicked={this.onUserClicked.bind(this)}
+          onDbClicked={this.onDbClicked.bind(this)}
           queries={this.state.queriesArray}
         />
       </div>

diff --git a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
@@ -12,16 +12,24 @@ import VisualizeModal from './VisualizeModal';
 import SqlShrink from './SqlShrink';
 import { STATE_BSSTYLE_MAP } from '../common';
 import { fDuration } from '../../modules/dates';
+import { getLink } from '../../../utils/common';
 
 
 class QueryTable extends React.Component {
   constructor(props) {
     super(props);
+    const uri = window.location.toString();
+    const cleanUri = uri.substring(0, uri.indexOf('#'));
     this.state = {
+      cleanUri,
       showVisualizeModal: false,
       activeQuery: null,
     };
   }
+  getQueryLink(dbId, sql) {
+    const params = ['dbid=' + dbId, 'sql=' + sql, 'title=Untitled Query'];
+    return getLink(this.state.cleanUri, params);
+  }
   hideVisualizeModal() {
     this.setState({ showVisualizeModal: false });
   }
@@ -42,10 +50,26 @@ class QueryTable extends React.Component {
       if (q.endDttm) {
         q.duration = fDuration(q.startDttm, q.endDttm);
       }
+      q.userId = (
+        <button
+          className="btn btn-link btn-xs"
+          onClick={this.props.onUserClicked.bind(this, q.userId)}
+        >
+          {q.userId}
+        </button>
+      );
+      q.dbId = (
+        <button
+          className="btn btn-link btn-xs"
+          onClick={this.props.onDbClicked.bind(this, q.dbId)}
+        >
+          {q.dbId}
+        </button>
+      );
       q.started = moment(q.startDttm).format('HH:mm:ss');
       const source = (q.ctas) ? q.executedSql : q.sql;
       q.sql = (
-        <SqlShrink sql={source} />
+        <SqlShrink sql={source} maxWidth={100} />
       );
       q.output = q.tempTable;
       q.progress = (
@@ -98,7 +122,16 @@ class QueryTable extends React.Component {
           />
         </div>
       );
-
+      q.querylink = (
+        <div style={{ width: '100px' }}>
+          <a
+            href={this.getQueryLink(q.dbId, source)}
+            className="btn btn-primary btn-xs"
+          >
+            <i className="fa fa-external-link" />Open in SQL Editor
+          </a>
+        </div>
+      );
       return q;
     }).reverse();
     return (
@@ -121,10 +154,14 @@ QueryTable.propTypes = {
   columns: React.PropTypes.array,
   actions: React.PropTypes.object,
   queries: React.PropTypes.array,
+  onUserClicked: React.PropTypes.func,
+  onDbClicked: React.PropTypes.func,
 };
 QueryTable.defaultProps = {
   columns: ['started', 'duration', 'rows'],
   queries: [],
+  onUserClicked: () => {},
+  onDbClicked: () => {},
 };
 
 function mapStateToProps() {

diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorTopToolbar.jsx
@@ -114,7 +114,10 @@ class SqlEditorTopToolbar extends React.Component {
       <div className="clearfix sql-toolbar">
         {networkAlert}
         <div>
-          <DatabaseSelect onChange={this.onChange.bind(this)} />
+          <DatabaseSelect
+            onChange={this.onChange.bind(this)}
+            databaseId={this.props.queryEditor.dbId}
+          />
         </div>
         <div className="m-t-5">
           <Select

diff --git a/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx b/caravel/assets/javascripts/SqlLab/components/TabbedSqlEditors.jsx
@@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
 import * as Actions from '../actions';
 import SqlEditor from './SqlEditor';
 import shortid from 'shortid';
-import { getParamFromQuery } from '../../../utils/common';
+import { getParamFromQuery, getLink } from '../../../utils/common';
 import CopyQueryTabUrl from './CopyQueryTabUrl';
 
 let queryCount = 1;
@@ -47,10 +47,7 @@ class TabbedSqlEditors extends React.Component {
     if (qe.autorun) params.push('autorun=' + qe.autorun);
     if (qe.sql) params.push('sql=' + qe.sql);
 
-    const queryString = params.join('&');
-    const queryLink = this.state.cleanUri + '?' + queryString;
-
-    return queryLink;
+    return getLink(this.state.cleanUri, params);
   }
   renameTab(qe) {
     /* eslint no-alert: 0 */

diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js
@@ -37,3 +37,7 @@ export function getParamFromQuery(query, param) {
   }
   return null;
 }
+
+export function getLink(baseUrl, params) {
+  return baseUrl + '?' + params.join('&');
+}