Display copyable error message when queries fail

Co-authored-by: Alex Paxton <thealexpaxton@gmail.com>
influxdata · Mar 22, 2019 · f84d25c · f84d25c
1 parent 6840050
commit f84d25c
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 5 deletions.
diff --git a/ui/src/shared/components/EmptyGraphError.scss b/ui/src/shared/components/EmptyGraphError.scss
@@ -0,0 +1,26 @@
+.empty-graph-error {
+  border-radius: $radius;
+  background: $g2-kevlar;
+  position: relative;
+  color: $c-dreamsicle;
+  border: $ix-border solid $g5-pepper;
+
+  pre {
+    font-size: 14px;
+    padding: $ix-marg-c;
+    user-select: text !important;
+    cursor: text;
+  }
+}
+
+.empty-graph-error--icon {
+  display: inline-block;
+  margin-right: $ix-marg-b;
+}
+
+.empty-graph-error--copy {
+  position: absolute;
+  top: $ix-marg-b;
+  right: $ix-marg-b;
+  opacity: 0.9;
+}
diff --git a/ui/src/shared/components/EmptyGraphError.tsx b/ui/src/shared/components/EmptyGraphError.tsx
@@ -0,0 +1,63 @@
+// Libraries
+import React, {useState, FunctionComponent} from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+
+// Components
+import {
+  Button,
+  ComponentSize,
+  ComponentColor,
+  IconFont,
+} from '@influxdata/clockface'
+import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+
+interface Props {
+  message: string
+  testID?: string
+}
+
+const EmptyGraphError: FunctionComponent<Props> = ({message, testID}) => {
+  const [didCopy, setDidCopy] = useState(false)
+
+  const buttonText = didCopy ? 'Copied!' : 'Copy'
+  const buttonColor = didCopy ? ComponentColor.Success : ComponentColor.Default
+
+  const onClick = () => {
+    setDidCopy(true)
+    setTimeout(() => setDidCopy(false), 2000)
+  }
+
+  return (
+    <div className="cell--view-empty" data-testid={testID}>
+      <div className="empty-graph-error">
+        <CopyToClipboard text={message}>
+          <Button
+            size={ComponentSize.ExtraSmall}
+            color={buttonColor}
+            titleText={buttonText}
+            text={buttonText}
+            onClick={onClick}
+            customClass="empty-graph-error--copy"
+          />
+        </CopyToClipboard>
+        <FancyScrollbar
+          className="empty-graph-error--scroll"
+          autoHide={false}
+          thumbStartColor="#FF8564"
+          thumbStopColor="#DC4E58"
+        >
+          <pre>
+            <span
+              className={`icon ${
+                IconFont.AlertTriangle
+              } empty-graph-error--icon`}
+            />
+            <code>{message}</code>
+          </pre>
+        </FancyScrollbar>
+      </div>
+    </div>
+  )
+}
+
+export default EmptyGraphError
diff --git a/ui/src/shared/components/EmptyQueryView.tsx b/ui/src/shared/components/EmptyQueryView.tsx
@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
+import EmptyGraphError from 'src/shared/components/EmptyGraphError'
 import Markdown from 'src/shared/components/views/Markdown'
 
 // Constants
@@ -43,10 +44,7 @@ export default class EmptyQueryView extends PureComponent<Props> {
 
     if (errorMessage) {
       return (
-        <EmptyGraphMessage
-          message={`Error: ${errorMessage}`}
-          testID="empty-graph--error"
-        />
+        <EmptyGraphError message={errorMessage} testID="empty-graph--error" />
       )
     }
 

diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss
@@ -42,11 +42,34 @@ $cell--header-size: 36px;
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  align-content: center;
   color: $empty-state-text;
   @extend %no-user-select;
+  padding: 0 $ix-marg-d $ix-marg-d $ix-marg-d;
+  overflow: hidden;
+
+  .empty-graph-error {
+    position: absolute;
+    top: $ix-marg-c;
+    right: $ix-marg-c;
+    bottom: $ix-marg-c;
+    left: $ix-marg-c;
+  }
+
+  .empty-graph-error--scroll {
+    z-index: 0;
+    position: absolute;
+  }
+
+  .empty-graph-error--copy {
+    z-index: 1;
+  }
+}
+
+.dashboard .cell--view-empty .empty-graph-error {
+    top: $ix-marg-c + $cell--header-size;
 }
 
 .cell--header {

diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
@@ -105,6 +105,7 @@
 @import 'src/timeMachine/components/view_options/ViewTypeDropdown.scss';
 @import 'src/dataLoaders/components/side_bar/SideBar.scss';
 @import 'src/dataLoaders/components/DataLoadersOverlay.scss';
+@import 'src/shared/components/EmptyGraphError.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';