diff --git a/ui/src/admin/components/QueriesTable.js b/ui/src/admin/components/QueriesTable.js
index 4c29a54b3..6a00f6119 100644
--- a/ui/src/admin/components/QueriesTable.js
+++ b/ui/src/admin/components/QueriesTable.js
@@ -28,39 +28,33 @@ const QueriesTable = ({queries, queriesSort, changeSort, onKillQuery}) => {
break
}
return (
-
-
-
-
-
-
- changeSort(newDBSort)}
- >
- Database
- |
- Query |
- changeSort(newTimeSort)}
- >
- Running
- |
- |
-
-
-
- {queries.map(q => (
-
- ))}
-
-
-
-
-
+
+
+
+ changeSort(newDBSort)}
+ >
+ Database
+ |
+ Query |
+ changeSort(newTimeSort)}
+ >
+ Running
+ |
+ |
+
+
+
+ {queries.map(q => (
+
+ ))}
+
+
)
}
diff --git a/ui/src/admin/containers/QueriesPage.js b/ui/src/admin/containers/QueriesPage.js
index eb00c859d..22c07c048 100644
--- a/ui/src/admin/containers/QueriesPage.js
+++ b/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 (
-
+
)
}
@@ -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