feat(ui/admin/queries): let use choose queries refresh interval, add page header

ui/src/admin/components/QueriesTable.js

@@ -28,9 +28,6 @@ const QueriesTable = ({queries, queriesSort, changeSort, onKillQuery}) => {
       break
   }
   return (
-    <div>
-      <div className="panel panel-solid">
-        <div className="panel-body">
     <table className="table v-center admin-table table-highlight">
       <thead>
         <tr>
@@ -58,9 +55,6 @@ const QueriesTable = ({queries, queriesSort, changeSort, onKillQuery}) => {
         ))}
       </tbody>
     </table>
-        </div>
-      </div>
-    </div>
   )
 }
 

ui/src/admin/containers/QueriesPage.js

@@ -13,6 +13,7 @@ import showDatabasesParser from 'shared/parsing/showDatabases'
 import showQueriesParser from 'shared/parsing/showQueries'
 import {notifyQueriesError} from 'shared/copy/notifications'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
 
 import {
   loadQueries as loadQueriesAction,
@@ -24,26 +25,54 @@ import {
 import {notify as notifyAction} from 'shared/actions/notifications'
 
 class QueriesPage extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      updateInterval: 5000,
+    }
+  }
   componentDidMount() {
     this.updateQueries()
-    const updateInterval = 5000
-    this.intervalID = setInterval(this.updateQueries, updateInterval)
+    if (this.state.updateInterval > 0) {
+      this.intervalID = setInterval(
+        this.updateQueries,
+        this.state.updateInterval
+      )
+    }
   }
 
   componentWillUnmount() {
+    if (this.intervalID) {
       clearInterval(this.intervalID)
     }
+  }
 
   render() {
     const {queries, queriesSort, changeSort} = this.props
+    const {updateInterval, title} = this.state
 
     return (
+      <div className="panel panel-solid">
+        <div className="panel-heading">
+          <h2 className="panel-title">{title}</h2>
+          <div style={{float: 'right'}}>
+            <AutoRefreshDropdown
+              selected={updateInterval}
+              onChoose={this.changeRefreshInterval}
+              onManualRefresh={this.updateQueries}
+              showManualRefresh={true}
+            />
+          </div>
+        </div>
+        <div className="panel-body">
           <QueriesTable
             queries={queries}
             queriesSort={queriesSort}
             changeSort={changeSort}
             onKillQuery={this.handleKillQuery}
           />
+        </div>
+      </div>
     )
   }
 
@@ -52,9 +81,17 @@ class QueriesPage extends Component {
     showDatabases(source.links.proxy).then(resp => {
       const {databases, errors} = showDatabasesParser(resp.data)
       if (errors.length) {
+        this.setState(state => ({...state, title: ''}))
         errors.forEach(message => notify(notifyQueriesError(message)))
         return
       }
+      this.setState(state => ({
+        ...state,
+        title:
+          databases.length === 1
+            ? '1 Database'
+            : `${databases.length} Databases`,
+      }))
 
       const fetches = databases.map(db => showQueries(source.links.proxy, db))
 
@@ -83,6 +120,17 @@ class QueriesPage extends Component {
       })
     })
   }
+  changeRefreshInterval = ({milliseconds: updateInterval}) => {
+    this.setState(state => ({...state, updateInterval}))
+    if (this.intervalID) {
+      clearInterval(this.intervalID)
+      this.intervalID = undefined
+    }
+    if (updateInterval > 0) {
+      this.updateQueries()
+      this.intervalID = setInterval(this.updateQueries, updateInterval)
+    }
+  }
 
   handleKillQuery = query => {
     const {source, killQuery} = this.props