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