Merge pull request #5888 from influxdata/fix/show_queries_error

fix(ui): show failure reason on queries page

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
 

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 (
       <div className="panel panel-solid">
         <div className="panel-heading">
           <h2 className="panel-title">{title}</h2>
           <div style={{float: 'right', display: 'flex'}}>
-            <div style={{marginRight: '5px'}}>
-              <Button
-                customClass="csv-export"
-                text="CSV"
-                icon={IconFont.Download}
-                status={ComponentStatus.Default}
-                onClick={this.downloadCSV}
-              />
-            </div>
+            {queries && queries.length ? (
+              <div style={{marginRight: '5px'}}>
+                <Button
+                  customClass="csv-export"
+                  text="CSV"
+                  icon={IconFont.Download}
+                  status={ComponentStatus.Default}
+                  onClick={this.downloadCSV}
+                />
+              </div>
+            ) : null}
             <AutoRefreshDropdown
               selected={updateInterval}
               onChoose={this.changeRefreshInterval}
@@ -76,12 +80,23 @@ class QueriesPage extends Component {
           </div>
         </div>
         <div className="panel-body">
-          <QueriesTable
-            queries={queries}
-            queriesSort={queriesSort}
-            changeSort={changeSort}
-            onKillQuery={this.handleKillQuery}
-          />
+          {queries && queries.length ? (
+            <QueriesTable
+              queries={queries}
+              queriesSort={queriesSort}
+              changeSort={changeSort}
+              onKillQuery={this.handleKillQuery}
+            />
+          ) : null}
+          {errors.length ? (
+            <div style={{marginTop: '5px'}}>
+              {errors.map((e, i) => (
+                <div key={`error${i}`}>
+                  <FormElementError message={e} />
+                </div>
+              ))}
+            </div>
+          ) : null}
         </div>
       </div>
     )
@@ -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}))