Sort searched queries by recency (#1735)

* Sort searched queries by recency

* Fixed sqllab tests

* Add one more tr to QueryTable spec for pagination

* Change desc to asc as we reverse queries in component

superset/assets/javascripts/SqlLab/components/App.jsx

@@ -49,7 +49,7 @@ class App extends React.PureComponent {
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-12">
-              <QuerySearch height={this.state.contentHeight} />
+              <QuerySearch height={this.state.contentHeight} actions={this.props.actions} />
             </div>
           </div>
         </div>

superset/assets/javascripts/SqlLab/components/QuerySearch.jsx

@@ -116,11 +116,7 @@ class QuerySearch extends React.PureComponent {
     const url = this.insertParams('/superset/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, queriesLoading: false });
+        this.setState({ queriesArray: data, queriesLoading: false });
       }
     });
   }
@@ -143,6 +139,7 @@ class QuerySearch extends React.PureComponent {
             <DatabaseSelect
               onChange={this.onChange.bind(this)}
               databaseId={this.state.databaseId}
+              actions={this.props.actions}
             />
           </div>
           <div className="col-sm-4">
@@ -200,7 +197,7 @@ class QuerySearch extends React.PureComponent {
             <div className="scrollbar-content">
               <QueryTable
                 columns={[
-                  'state', 'db', 'user', 'date',
+                  'state', 'db', 'user', 'time',
                   'progress', 'rows', 'sql', 'querylink',
                 ]}
                 onUserClicked={this.onUserClicked.bind(this)}

superset/assets/javascripts/SqlLab/components/QueryTable.jsx

@@ -65,14 +65,20 @@ class QueryTable extends React.PureComponent {
   removeQuery(query) {
     this.props.actions.removeQuery(query);
   }
-
   render() {
     const data = this.props.queries.map((query) => {
       const q = Object.assign({}, query);
       if (q.endDttm) {
         q.duration = fDuration(q.startDttm, q.endDttm);
       }
-      q.date = moment(q.startDttm).format('MMM Do YYYY');
+      const time = moment(q.startDttm).format().split('T');
+      q.time = (
+        <div>
+          <span>
+            {time[0]} <br /> {time[1]}
+          </span>
+        </div>
+      );
       q.user = (
         <button
           className="btn btn-link btn-xs"
@@ -188,6 +194,7 @@ class QueryTable extends React.PureComponent {
           columns={this.props.columns}
           className="table table-condensed"
           data={data}
+          itemsPerPage={50}
         />
       </div>
     );