fix: stopgap error messages (#4935)

Author: drdelambre

src/dataExplorer/components/QueryTime.scss

@@ -2,6 +2,7 @@
 
 .query-status {
   flex-grow: 1;
+  margin-top: 14px;
 
   .status {
     width: 12px;
@@ -26,4 +27,10 @@
       background: $c-rainforest;
     }
   }
+
+  pre {
+    color: $c-fire;
+    font-family: $cf-code-font;
+    margin: $cf-space-2xs;
+  }
 }

src/dataExplorer/components/QueryTime.tsx

@@ -9,7 +9,7 @@ const humanReadable = (time: number): string => {
 }
 
 const QueryTime: FC = () => {
-  const {status, time} = useContext(ResultsContext)
+  const {result, status, time} = useContext(ResultsContext)
 
   if (status === RemoteDataState.Done) {
     return (
@@ -42,6 +42,7 @@ const QueryTime: FC = () => {
       <div className="query-status">
         <div className="status error" />
         <label>Error ({humanReadable(time)})</label>
+        <pre>{result.error}</pre>
       </div>
     )
   }

src/dataExplorer/components/ResultsPane.tsx

@@ -13,6 +13,7 @@ import {
   FlexBox,
   FlexDirection,
   JustifyContent,
+  AlignItems,
 } from '@influxdata/clockface'
 import {createLocalStorageStateHook} from 'use-local-storage-state'
 
@@ -122,7 +123,12 @@ const ResultsPane: FC = () => {
         setResult(r)
         setStatus(RemoteDataState.Done)
       })
-      .catch(() => {
+      .catch(e => {
+        setResult({
+          source: text,
+          parsed: null,
+          error: e.message,
+        })
         event('resultReceived', {status: 'error'})
         setStatus(RemoteDataState.Error)
       })
@@ -172,6 +178,7 @@ const ResultsPane: FC = () => {
             <FlexBox
               direction={FlexDirection.Row}
               justifyContent={JustifyContent.FlexEnd}
+              alignItems={AlignItems.FlexStart}
               margin={ComponentSize.Small}
             >
               <QueryTime />