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 ( -
-
-
- - - - - - - - - - {queries.map(q => ( - - ))} - -
changeSort(newDBSort)} - > -
Database
-
Query changeSort(newTimeSort)} - > - Running - -
-
-
-
+ + + + + + + + + + {queries.map(q => ( + + ))} + +
changeSort(newDBSort)} + > +
Database
+
Query changeSort(newTimeSort)} + > + Running + +
) } 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 ( - +
+
+

{title}

+
+ +
+
+
+ +
+
) } @@ -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