From d5c5c0d6ac91d8dba6e167e991e2c7bb17f09f11 Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Fri, 23 Sep 2016 16:13:18 -0700
Subject: [PATCH] Query Search Page (#1122)

* Query search page under SQL Lab tab

* Modifications based on comments

* Hash

* Added spec and endpoint test with modifications
based on second round comments

* Changed permission menu in https://github.com/airbnb/caravel/pull/1095/files
---
 caravel/assets/javascripts/SqlLab/common.js   |   2 +
 .../javascripts/SqlLab/components/App.jsx     |  71 ++++++++
 .../SqlLab/components/DatabaseSelect.jsx      |  51 ++++++
 .../SqlLab/components/QuerySearch.jsx         | 163 ++++++++++++------
 .../SqlLab/components/QueryTable.jsx          |   2 +-
 .../SqlLab/components/SqlEditorLeft.jsx       |  56 ++----
 caravel/assets/javascripts/SqlLab/index.jsx   |  51 +-----
 caravel/assets/javascripts/SqlLab/reducers.js |   1 +
 .../javascripts/sqllab/QuerySearch_spec.jsx   |  30 ++++
 caravel/config.py                             |   3 +
 caravel/utils.py                              |   2 +-
 caravel/views.py                              |  46 ++++-
 tests/core_tests.py                           |  11 +-
 13 files changed, 345 insertions(+), 144 deletions(-)
 create mode 100644 caravel/assets/javascripts/SqlLab/components/App.jsx
 create mode 100644 caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
 create mode 100644 caravel/assets/spec/javascripts/sqllab/QuerySearch_spec.jsx

diff --git a/caravel/assets/javascripts/SqlLab/common.js b/caravel/assets/javascripts/SqlLab/common.js
index 4851d5dba6b61..6d0ab5f5979df 100644
--- a/caravel/assets/javascripts/SqlLab/common.js
+++ b/caravel/assets/javascripts/SqlLab/common.js
@@ -4,3 +4,5 @@ export const STATE_BSSTYLE_MAP = {
   running: 'warning',
   success: 'success',
 };
+
+export const STATUS_OPTIONS = ['success', 'failed', 'running'];
diff --git a/caravel/assets/javascripts/SqlLab/components/App.jsx b/caravel/assets/javascripts/SqlLab/components/App.jsx
new file mode 100644
index 0000000000000..9cf62e4559647
--- /dev/null
+++ b/caravel/assets/javascripts/SqlLab/components/App.jsx
@@ -0,0 +1,71 @@
+import * as Actions from '../actions';
+import React from 'react';
+
+import TabbedSqlEditors from './TabbedSqlEditors';
+import QueryAutoRefresh from './QueryAutoRefresh';
+import QuerySearch from './QuerySearch';
+import Alerts from './Alerts';
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hash: window.location.hash,
+    };
+  }
+  componentDidMount() {
+    window.addEventListener('hashchange', this.onHashChanged.bind(this));
+  }
+  componentWillUnmount() {
+    window.removeEventListener('hashchange', this.onHashChanged.bind(this));
+  }
+  onHashChanged() {
+    this.setState({ hash: window.location.hash });
+  }
+  render() {
+    if (this.state.hash) {
+      return (
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-12">
+              <QuerySearch />
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="App SqlLab">
+        <div className="container-fluid">
+          <QueryAutoRefresh />
+          <Alerts alerts={this.props.alerts} />
+          <div className="row">
+            <div className="col-md-12">
+              <TabbedSqlEditors />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+App.propTypes = {
+  alerts: React.PropTypes.array,
+};
+
+function mapStateToProps(state) {
+  return {
+    alerts: state.alerts,
+  };
+}
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(Actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
new file mode 100644
index 0000000000000..cac31609ee81a
--- /dev/null
+++ b/caravel/assets/javascripts/SqlLab/components/DatabaseSelect.jsx
@@ -0,0 +1,51 @@
+const $ = window.$ = require('jquery');
+import React from 'react';
+import Select from 'react-select';
+
+class DatabaseSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      databaseLoading: false,
+      databaseOptions: [],
+      databaseId: null,
+    };
+  }
+  componentWillMount() {
+    this.fetchDatabaseOptions();
+  }
+  changeDb(db) {
+    const val = (db) ? db.value : null;
+    this.setState({ databaseId: val });
+    this.props.onChange(db);
+  }
+  fetchDatabaseOptions() {
+    this.setState({ databaseLoading: true });
+    const url = '/databaseasync/api/read?_flt_0_expose_in_sqllab=1';
+    $.get(url, (data) => {
+      const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
+      this.setState({ databaseOptions: options, databaseLoading: false });
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Select
+          name="select-db"
+          placeholder={`Select a database (${this.state.databaseOptions.length})`}
+          options={this.state.databaseOptions}
+          value={this.state.databaseId}
+          isLoading={this.state.databaseLoading}
+          autosize={false}
+          onChange={this.changeDb.bind(this)}
+        />
+      </div>
+    );
+  }
+}
+
+DatabaseSelect.propTypes = {
+  onChange: React.PropTypes.func,
+};
+
+export default DatabaseSelect;
diff --git a/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx b/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx
index d9a84a2e8a875..7f5908d082b5d 100644
--- a/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/QuerySearch.jsx
@@ -1,73 +1,134 @@
+const $ = window.$ = require('jquery');
 import React from 'react';
-import Select from 'react-select';
-import { Button } from 'react-bootstrap';
 
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import * as Actions from '../actions';
+import { Button } from 'react-bootstrap';
+import Select from 'react-select';
 import QueryTable from './QueryTable';
+import DatabaseSelect from './DatabaseSelect';
+import { STATUS_OPTIONS } from '../common';
 
 class QuerySearch extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      queryText: '',
+      userLoading: false,
+      userOptions: [],
+      databaseId: null,
+      userId: null,
+      searchText: null,
+      status: 'success',
+      queriesArray: [],
     };
   }
-  changeQueryText(value) {
-    this.setState({ queryText: value });
+  componentWillMount() {
+    this.fetchUsers();
+    this.refreshQueries();
+  }
+  onChange(db) {
+    const val = (db) ? db.value : null;
+    this.setState({ databaseId: val });
+  }
+  insertParams(baseUrl, params) {
+    return baseUrl + '?' + params.join('&');
+  }
+  changeUser(user) {
+    const val = (user) ? user.value : null;
+    this.setState({ userId: val });
+  }
+  changeStatus(status) {
+    const val = (status) ? status.value : null;
+    this.setState({ status: val });
+  }
+  changeSearch(event) {
+    this.setState({ searchText: event.target.value });
+  }
+  fetchUsers() {
+    this.setState({ userLoading: true });
+    const url = '/users/api/read';
+    $.getJSON(url, (data, status) => {
+      if (status === 'success') {
+        const options = [];
+        for (let i = 0; i < data.pks.length; i++) {
+          options.push({ value: data.pks[i], label: data.result[i].username });
+        }
+        this.setState({ userOptions: options, userLoading: false });
+      }
+    });
+  }
+  refreshQueries() {
+    const params = [
+      `userId=${this.state.userId}`,
+      `databaseId=${this.state.databaseId}`,
+      `searchText=${this.state.searchText}`,
+      `status=${this.state.status}`,
+    ];
+
+    const url = this.insertParams('/caravel/search_queries', params);
+    $.getJSON(url, (data, status) => {
+      if (status === 'success') {
+        const newQueriesArray = [];
+        for (const id in data) {
+          newQueriesArray.push(data[id]);
+        }
+        this.setState({ queriesArray: newQueriesArray });
+      }
+    });
+  }
+  search() {
+    this.refreshQueries(this.props);
   }
   render() {
-    const queries = this.props.queries;
     return (
       <div>
-        <div className="pane-cell pane-west m-t-5">
-          <div className="panel panel-default Workspace">
-            <div className="panel-heading">
-              <h6>
-                <i className="fa fa-search" /> Search Queries
-              </h6>
-            </div>
-            <div className="panel-body">
-              <input type="text" className="form-control" placeholder="Query Text" />
-              <Select
-                name="select-user"
-                placeholder="[User]"
-                options={['maxime_beauchemin', 'someone else']}
-                value={'maxime_beauchemin'}
-                className="m-t-10"
-                autosize={false}
-              />
-            </div>
+        <div className="row space-1">
+          <div className="col-sm-2">
+            <Select
+              name="select-user"
+              placeholder="[User]"
+              options={this.state.userOptions}
+              value={this.state.userId}
+              isLoading={this.state.userLoading}
+              autosize={false}
+              onChange={this.changeUser.bind(this)}
+            />
           </div>
+          <div className="col-sm-2">
+            <DatabaseSelect onChange={this.onChange.bind(this)} />
+          </div>
+          <div className="col-sm-4">
+            <input
+              type="text"
+              onChange={this.changeSearch.bind(this)}
+              className="form-control input-sm"
+              placeholder="Search Results"
+            />
+          </div>
+          <div className="col-sm-2">
+            <Select
+              name="select-state"
+              placeholder="[Query Status]"
+              options={STATUS_OPTIONS.map((s) => ({ value: s, label: s }))}
+              value={this.state.status}
+              isLoading={false}
+              autosize={false}
+              onChange={this.changeStatus.bind(this)}
+            />
+          </div>
+          <Button bsSize="small" bsStyle="success" onClick={this.search.bind(this)}>
+            Search
+          </Button>
         </div>
-        <div className="pane-cell">
-          <QueryTable
-            columns={['state', 'started', 'duration', 'rows', 'sql', 'actions']}
-            queries={queries}
-          />
-        </div>
-        <Button>Search!</Button>
+        <QueryTable
+          columns={[
+            'state', 'dbId', 'userId',
+            'progress', 'rows', 'sql',
+          ]}
+          queries={this.state.queriesArray}
+        />
       </div>
     );
   }
 }
-QuerySearch.propTypes = {
-  queries: React.PropTypes.array,
-};
-QuerySearch.defaultProps = {
-  queries: [],
-};
 
-function mapStateToProps(state) {
-  return {
-    queries: state.queries,
-  };
-}
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(QuerySearch);
+export default QuerySearch;
diff --git a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
index e9c35ea8c1cdb..0dbe38398e6ec 100644
--- a/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/QueryTable.jsx
@@ -123,7 +123,7 @@ QueryTable.propTypes = {
   queries: React.PropTypes.array,
 };
 QueryTable.defaultProps = {
-  columns: ['state', 'started', 'duration', 'progress', 'rows', 'sql', 'actions'],
+  columns: ['started', 'duration', 'rows'],
   queries: [],
 };
 
diff --git a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
index 25ea4fd723a02..25ca82d56cb59 100644
--- a/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
+++ b/caravel/assets/javascripts/SqlLab/components/SqlEditorLeft.jsx
@@ -8,14 +8,13 @@ import shortid from 'shortid';
 import Select from 'react-select';
 import { Label, Button } from 'react-bootstrap';
 import TableElement from './TableElement';
+import DatabaseSelect from './DatabaseSelect';
 
 
 class SqlEditorTopToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      databaseLoading: false,
-      databaseOptions: [],
       schemaLoading: false,
       schemaOptions: [],
       tableLoading: false,
@@ -23,10 +22,20 @@ class SqlEditorTopToolbar extends React.Component {
     };
   }
   componentWillMount() {
-    this.fetchDatabaseOptions();
     this.fetchSchemas();
     this.fetchTables();
   }
+  onChange(db) {
+    const val = (db) ? db.value : null;
+    this.setState({ schemaOptions: [] });
+    this.props.actions.queryEditorSetDb(this.props.queryEditor, val);
+    if (!(db)) {
+      this.setState({ tableOptions: [] });
+    } else {
+      this.fetchTables(val, this.props.queryEditor.schema);
+      this.fetchSchemas(val);
+    }
+  }
   resetState() {
     this.props.actions.resetState();
   }
@@ -64,37 +73,6 @@ class SqlEditorTopToolbar extends React.Component {
       });
     }
   }
-  changeDb(db) {
-    const val = (db) ? db.value : null;
-    this.setState({ schemaOptions: [] });
-    this.props.actions.queryEditorSetDb(this.props.queryEditor, val);
-    if (!(db)) {
-      this.setState({ tableOptions: [] });
-      return;
-    }
-    this.fetchTables(val, this.props.queryEditor.schema);
-    this.fetchSchemas(val);
-  }
-  fetchDatabaseOptions() {
-    this.setState({ databaseLoading: true });
-    const url = (
-      '/databaseasync/api/read?' +
-      '_flt_0_expose_in_sqllab=1&' +
-      '_oc_DatabaseAsync=database_name&' +
-      '_od_DatabaseAsync=asc'
-    );
-    $.get(url, (data) => {
-      const options = data.result.map((db) => ({ value: db.id, label: db.database_name }));
-      this.props.actions.setDatabases(data.result);
-      this.setState({ databaseOptions: options });
-      this.setState({ databaseLoading: false });
-
-      // Auto select if only one option
-      if (options.length === 1) {
-        this.changeDb(options[0]);
-      }
-    });
-  }
   closePopover(ref) {
     this.refs[ref].hide();
   }
@@ -136,15 +114,7 @@ class SqlEditorTopToolbar extends React.Component {
       <div className="clearfix sql-toolbar">
         {networkAlert}
         <div>
-          <Select
-            name="select-db"
-            placeholder={`Select a database (${this.state.databaseOptions.length})`}
-            options={this.state.databaseOptions}
-            value={this.props.queryEditor.dbId}
-            isLoading={this.state.databaseLoading}
-            autosize={false}
-            onChange={this.changeDb.bind(this)}
-          />
+          <DatabaseSelect onChange={this.onChange.bind(this)} />
         </div>
         <div className="m-t-5">
           <Select
diff --git a/caravel/assets/javascripts/SqlLab/index.jsx b/caravel/assets/javascripts/SqlLab/index.jsx
index a4af9c41366a1..d9b158e38cf51 100644
--- a/caravel/assets/javascripts/SqlLab/index.jsx
+++ b/caravel/assets/javascripts/SqlLab/index.jsx
@@ -4,61 +4,24 @@ require('bootstrap');
 
 import React from 'react';
 import { render } from 'react-dom';
-import * as Actions from './actions';
-
-import TabbedSqlEditors from './components/TabbedSqlEditors';
-import QueryAutoRefresh from './components/QueryAutoRefresh';
-import Alerts from './components/Alerts';
-
-import { bindActionCreators, createStore } from 'redux';
-import { connect, Provider } from 'react-redux';
-
 import { initialState, sqlLabReducer } from './reducers';
 import { enhancer } from '../reduxUtils';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+
+import App from './components/App';
+
 
 require('./main.css');
 
 let store = createStore(sqlLabReducer, initialState, enhancer());
 
 // jquery hack to highlight the navbar menu
-$('a[href="/caravel/sqllab"]').parent().addClass('active');
-
-const App = function (props) {
-  return (
-    <div className="App SqlLab">
-      <div className="container-fluid">
-        <QueryAutoRefresh />
-        <Alerts alerts={props.alerts} />
-        <div className="row">
-          <div className="col-md-12">
-            <TabbedSqlEditors />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-App.propTypes = {
-  alerts: React.PropTypes.array,
-};
-
-function mapStateToProps(state) {
-  return {
-    alerts: state.alerts,
-  };
-}
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(Actions, dispatch),
-  };
-}
-
-const ReduxedApp = connect(mapStateToProps, mapDispatchToProps)(App);
+$('a:contains("SQL Lab")').parent().addClass('active');
 
 render(
   <Provider store={store}>
-    <ReduxedApp />
+    <App />
   </Provider>,
   document.getElementById('app')
 );
diff --git a/caravel/assets/javascripts/SqlLab/reducers.js b/caravel/assets/javascripts/SqlLab/reducers.js
index b7a850c982ae8..d711d64525c4e 100644
--- a/caravel/assets/javascripts/SqlLab/reducers.js
+++ b/caravel/assets/javascripts/SqlLab/reducers.js
@@ -13,6 +13,7 @@ const defaultQueryEditor = {
   dbId: null,
 };
 
+// TODO(bkyryliuk): document the object schemas
 export const initialState = {
   alerts: [],
   networkOn: true,
diff --git a/caravel/assets/spec/javascripts/sqllab/QuerySearch_spec.jsx b/caravel/assets/spec/javascripts/sqllab/QuerySearch_spec.jsx
new file mode 100644
index 0000000000000..076771129aaa7
--- /dev/null
+++ b/caravel/assets/spec/javascripts/sqllab/QuerySearch_spec.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Select from 'react-select';
+import { Button } from 'react-bootstrap';
+import QuerySearch from '../../../javascripts/SqlLab/components/QuerySearch';
+import { shallow } from 'enzyme';
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+
+describe('QuerySearch', () => {
+  it('should render', () => {
+    expect(
+      React.isValidElement(<QuerySearch />)
+    ).to.equal(true);
+  });
+
+  it('should have two Select', () => {
+    const wrapper = shallow(<QuerySearch />);
+    expect(wrapper.find(Select)).to.have.length(2);
+  });
+
+  it('should have one input for searchText', () => {
+    const wrapper = shallow(<QuerySearch />);
+    expect(wrapper.find('input')).to.have.length(1);
+  });
+
+  it('should have one Button', () => {
+    const wrapper = shallow(<QuerySearch />);
+    expect(wrapper.find(Button)).to.have.length(1);
+  });
+});
diff --git a/caravel/config.py b/caravel/config.py
index ca378d8cd6187..267a7777333a9 100644
--- a/caravel/config.py
+++ b/caravel/config.py
@@ -47,6 +47,9 @@
 # SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'
 # SQLALCHEMY_DATABASE_URI = 'postgresql://root:password@localhost/myapp'
 
+# The limit of queries fetched for query search
+QUERY_SEARCH_LIMIT = 1000
+
 # Flask-WTF flag for CSRF
 CSRF_ENABLED = True
 
diff --git a/caravel/utils.py b/caravel/utils.py
index f646a4342365e..670c0694e02b3 100644
--- a/caravel/utils.py
+++ b/caravel/utils.py
@@ -217,7 +217,7 @@ def init(caravel):
         'RoleModelView',
         'Security',
         'UserDBModelView',
-        'SQL Lab <span class="label label-danger">alpha</span>',
+        'SQL Lab',
         'AccessRequestsModelView',
     ])
 
diff --git a/caravel/views.py b/caravel/views.py
index 78d424523f490..415a03571cf06 100755
--- a/caravel/views.py
+++ b/caravel/views.py
@@ -1,4 +1,3 @@
-"""Flask web views for Caravel"""
 from __future__ import absolute_import
 from __future__ import division
 from __future__ import print_function
@@ -1864,6 +1863,41 @@ def queries(self, last_updated_ms):
             status=200,
             mimetype="application/json")
 
+    @has_access
+    @expose("/search_queries")
+    @log_this
+    def search_queries(self):
+        """Search for queries."""
+        query = db.session.query(models.Query)
+        userId = request.args.get('userId')
+        databaseId = request.args.get('databaseId')
+        searchText = request.args.get('searchText')
+        status = request.args.get('status')
+
+        if userId != 'null':
+            # Filter on db Id
+            query = query.filter(models.Query.user_id == userId)
+
+        if databaseId != 'null':
+            # Filter on db Id
+            query = query.filter(models.Query.database_id == databaseId)
+
+        if status != 'null':
+            # Filter on status
+            query = query.filter(models.Query.status == status)
+
+        if searchText != 'null':
+            # Filter on search text
+            query = query.filter(models.Query.sql.like('%{}%'.format(searchText)))
+
+        sql_queries = query.limit(config.get("QUERY_SEARCH_LIMIT")).all()
+
+        dict_queries = {q.client_id: q.to_dict() for q in sql_queries}
+        return Response(
+            json.dumps(dict_queries, default=utils.json_int_dttm_ser),
+            status=200,
+            mimetype="application/json")
+
     @has_access
     @expose("/refresh_datasources/")
     def refresh_datasources(self):
@@ -1938,9 +1972,15 @@ class CssTemplateModelView(CaravelModelView, DeleteMixin):
     category_icon='')
 
 appbuilder.add_link(
-    'SQL Lab <span class="label label-danger">alpha</span>',
+    'SQL Editor',
     href='/caravel/sqllab',
-    icon="fa-flask")
+    icon="fa-flask",
+    category='SQL Lab')
+appbuilder.add_link(
+    'Query Search',
+    href='/caravel/sqllab#search',
+    icon="fa-flask",
+    category='SQL Lab')
 
 
 @app.after_request
diff --git a/tests/core_tests.py b/tests/core_tests.py
index bb1ace23a8cd1..af90591e31f7c 100644
--- a/tests/core_tests.py
+++ b/tests/core_tests.py
@@ -69,7 +69,7 @@ def assert_admin_view_menus_in(role_name, assert_func):
             assert_func('RoleModelView', view_menus)
             assert_func('Security', view_menus)
             assert_func('UserDBModelView', view_menus)
-            assert_func('SQL Lab <span class="label label-danger">alpha</span>',
+            assert_func('SQL Lab',
                         view_menus)
             assert_func('AccessRequestsModelView', view_menus)
 
@@ -670,6 +670,15 @@ def test_queries_endpoint(self):
         resp = self.client.get('/caravel/queries/{}'.format(0))
         self.assertEquals(403, resp.status_code)
 
+    def test_search_query_endpoint(self):
+        userId = 'userId=null'
+        databaseId = 'databaseId=null'
+        searchText = 'searchText=null'
+        status = 'status=success'
+        params = [userId, databaseId, searchText, status]
+        resp = self.client.get('/caravel/search_queries?'+'&'.join(params))
+        self.assertEquals(200, resp.status_code)
+
     def test_public_user_dashboard_access(self):
         # Try access before adding appropriate permissions.
         self.revoke_public_access('birth_names')