diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45637fde7..f4261ddeb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
1. [#5878](https://github.com/influxdata/chronograf/pull/5878): Rename Flux Query to Flux Script.
1. [#5885](https://github.com/influxdata/chronograf/pull/5885): Repair time zone selector on Host page.
1. [#5886](https://github.com/influxdata/chronograf/pull/5886): Report correct chronograf version.
+1. [#5888](https://github.com/influxdata/chronograf/pull/5888): Show failure reason on Queries page.
### Other
diff --git a/ui/src/admin/containers/QueriesPage.js b/ui/src/admin/containers/QueriesPage.js
index 457c59914..d624c23d1 100644
--- a/ui/src/admin/containers/QueriesPage.js
+++ b/ui/src/admin/containers/QueriesPage.js
@@ -25,12 +25,14 @@ import {
import {notify as notifyAction} from 'shared/actions/notifications'
import {Button, IconFont, ComponentStatus} from 'src/reusable_ui'
import moment from 'moment'
+import FormElementError from 'src/reusable_ui/components/form_layout/FormElementError'
class QueriesPage extends Component {
constructor(props) {
super(props)
this.state = {
updateInterval: 5000,
+ errors: [],
}
}
componentDidMount() {
@@ -51,22 +53,24 @@ class QueriesPage extends Component {
render() {
const {queries, queriesSort, changeSort} = this.props
- const {updateInterval, title} = this.state
+ const {updateInterval, title, errors} = this.state
return (
{title}
-
-
-
+ {queries && queries.length ? (
+
+
+
+ ) : null}
-
+ {queries && queries.length ? (
+
+ ) : null}
+ {errors.length ? (
+
+ {errors.map((e, i) => (
+
+
+
+ ))}
+
+ ) : null}
)
@@ -89,47 +104,57 @@ class QueriesPage extends Component {
updateQueries = () => {
const {source, notify, loadQueries} = this.props
- 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 dbErrors = []
+ 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))
+ const fetches = databases.map(db => showQueries(source.links.proxy, db))
- Promise.allSettled(fetches).then(results => {
- const allQueries = []
- results.forEach((settledResponse, i) => {
- if (!settledResponse.value) {
- console.error(
- `Unable to show queries on '${databases[i]}': `,
- settledResponse.reason
- )
- return
- }
- const result = showQueriesParser(settledResponse.value.data)
- if (result.errors.length) {
- result.errors.forEach(message =>
- notify(notifyQueriesError(message))
- )
- }
+ return Promise.allSettled(fetches).then(results => {
+ const allQueries = []
+ results.forEach((settledResponse, i) => {
+ if (!settledResponse.value) {
+ const msg = `Unable to show queries on '${databases[i]}': ${settledResponse.reason}`
+ dbErrors.push(msg)
+ console.error(
+ 'Unable to show queries',
+ databases[i],
+ settledResponse.reason
+ )
+ return
+ }
+ const result = showQueriesParser(settledResponse.value.data)
+ if (result.errors.length) {
+ result.errors.forEach(message =>
+ notify(notifyQueriesError(message))
+ )
+ }
- allQueries.push(...result.queries)
+ allQueries.push(...result.queries)
+ })
+
+ const queries = uniqBy(flatten(allQueries), q => q.id)
+ loadQueries(queries)
})
-
- const queries = uniqBy(flatten(allQueries), q => q.id)
- loadQueries(queries)
})
- })
+ .catch(e => {
+ dbErrors.push(`Unable to show databases: ${e}`)
+ console.error('Unable to show databases', e)
+ })
+ .then(() => this.setState({errors: dbErrors}))
}
changeRefreshInterval = ({milliseconds: updateInterval}) => {
this.setState(state => ({...state, updateInterval}))