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

ui/src/admin/components/QueriesTable.js

@@ -28,39 +28,33 @@ 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>
-                <th
-                  style={{width: `${QUERIES_TABLE.colDatabase}px`}}
-                  className={`col--sortable ${dbSortClass}`}
-                  onClick={() => changeSort(newDBSort)}
-                >
-                  <div>Database</div>
-                </th>
-                <th>Query</th>
-                <th
-                  style={{width: `${QUERIES_TABLE.colRunning}px`}}
-                  className={`col--sortable ${timeSortClass}`}
-                  onClick={() => changeSort(newTimeSort)}
-                >
-                  Running
-                </th>
-                <th style={{width: `${QUERIES_TABLE.colKillQuery}px`}} />
-              </tr>
-            </thead>
-            <tbody>
-              {queries.map(q => (
-                <QueryRow key={q.id} query={q} onKill={onKillQuery} />
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
+    <table className="table v-center admin-table table-highlight">
+      <thead>
+        <tr>
+          <th
+            style={{width: `${QUERIES_TABLE.colDatabase}px`}}
+            className={`col--sortable ${dbSortClass}`}
+            onClick={() => changeSort(newDBSort)}
+          >
+            <div>Database</div>
+          </th>
+          <th>Query</th>
+          <th
+            style={{width: `${QUERIES_TABLE.colRunning}px`}}
+            className={`col--sortable ${timeSortClass}`}
+            onClick={() => changeSort(newTimeSort)}
+          >
+            Running
+          </th>
+          <th style={{width: `${QUERIES_TABLE.colKillQuery}px`}} />
+        </tr>
+      </thead>
+      <tbody>
+        {queries.map(q => (
+          <QueryRow key={q.id} query={q} onKill={onKillQuery} />
+        ))}
+      </tbody>
+    </table>
   )
 }
 

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() {
-    clearInterval(this.intervalID)
+    if (this.intervalID) {
+      clearInterval(this.intervalID)
+    }
   }
 
   render() {
     const {queries, queriesSort, changeSort} = this.props
+    const {updateInterval, title} = this.state
 
     return (
-      <QueriesTable
-        queries={queries}
-        queriesSort={queriesSort}
-        changeSort={changeSort}
-        onKillQuery={this.handleKillQuery}
-      />
+      <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