From bc91fe6f296e37c5e02ca3ee0f9c13b043c266a2 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sun, 26 Jan 2020 02:24:12 -0700
Subject: [PATCH] improve error display

---
 ui/components/Result.js       | 42 ++++++++++++++++++++++++-----------
 ui/components/ResultHeader.js | 29 ++++--------------------
 2 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/ui/components/Result.js b/ui/components/Result.js
index b5d2afb..aec4936 100644
--- a/ui/components/Result.js
+++ b/ui/components/Result.js
@@ -4,6 +4,7 @@ import {
     AccordionHeader,
     AccordionPanel,
     Alert,
+    AlertDescription,
     Box,
     ButtonGroup,
     css,
@@ -19,6 +20,7 @@ import useConfig from "~/components/HyperglassProvider";
 import CopyButton from "~/components/CopyButton";
 import RequeryButton from "~/components/RequeryButton";
 import ResultHeader from "~/components/ResultHeader";
+import { startCase } from "lodash";
 
 const FormattedError = ({ keywords, message }) => {
     const patternStr = `(${keywords.join("|")})`;
@@ -41,6 +43,8 @@ const AccordionHeaderWrapper = styled(Flex)`
     }
 `;
 
+const statusMap = { success: "success", warning: "warning", error: "warning", danger: "error" };
+
 const Result = React.forwardRef(
     ({ device, timeout, queryLocation, queryType, queryVrf, queryTarget }, ref) => {
         const config = useConfig();
@@ -69,10 +73,21 @@ const Result = React.forwardRef(
                 .replace(/\n\n/g, "");
 
         const errorKw = (error && error.response?.data?.keywords) || [];
-        const errorMsg =
-            (error && error.response?.data?.output) ||
-            (error && error.message) ||
-            config.messages.general;
+
+        let errorMsg;
+        if (error && error.response?.data?.output) {
+            errorMsg = error.response.data.output;
+        } else if (error && error.message.startsWith("timeout")) {
+            errorMsg = config.messages.request_timeout;
+        } else if (error && error.message) {
+            errorMsg = startCase(error.message);
+        } else {
+            errorMsg = config.messages.general;
+        }
+
+        const errorLevel =
+            (error?.response?.data?.level && statusMap[error.response?.data?.level]) ?? "error";
+
         return (
             <AccordionItem
                 isDisabled={loading}
@@ -84,11 +99,17 @@ const Result = React.forwardRef(
             >
                 <AccordionHeaderWrapper hoverBg={theme.colors.blackAlpha[50]}>
                     <AccordionHeader flex="1 0 auto" py={2} _hover={{}} _focus={{}} w="unset">
-                        <ResultHeader title={device.display_name} loading={loading} error={error} />
+                        <ResultHeader
+                            title={device.display_name}
+                            loading={loading}
+                            error={error}
+                            errorMsg={errorMsg}
+                            errorLevel={errorLevel}
+                        />
                     </AccordionHeader>
                     <ButtonGroup px={3} py={2}>
-                        <CopyButton copyValue={cleanOutput} variant="ghost" />
-                        <RequeryButton requery={refetch} variant="ghost" />
+                        <CopyButton copyValue={cleanOutput} variant="ghost" isDisabled={loading} />
+                        <RequeryButton requery={refetch} variant="ghost" isDisabled={loading} />
                     </ButtonGroup>
                 </AccordionHeaderWrapper>
                 <AccordionPanel
@@ -123,12 +144,7 @@ const Result = React.forwardRef(
                                 </Box>
                             )}
                             {error && (
-                                <Alert
-                                    rounded="lg"
-                                    my={2}
-                                    py={4}
-                                    status={error.response?.data?.level || "error"}
-                                >
+                                <Alert rounded="lg" my={2} py={4} status={errorLevel}>
                                     <FormattedError keywords={errorKw} message={errorMsg} />
                                 </Alert>
                             )}
diff --git a/ui/components/ResultHeader.js b/ui/components/ResultHeader.js
index d287dbe..b3df955 100644
--- a/ui/components/ResultHeader.js
+++ b/ui/components/ResultHeader.js
@@ -1,22 +1,9 @@
 import React from "react";
-import {
-    AccordionIcon,
-    Icon,
-    Spinner,
-    Stack,
-    Text,
-    Tooltip,
-    useColorMode,
-    useTheme
-} from "@chakra-ui/core";
-import useConfig from "~/components/HyperglassProvider";
+import { AccordionIcon, Icon, Spinner, Stack, Text, Tooltip, useColorMode } from "@chakra-ui/core";
 
-export default React.forwardRef(({ title, loading, error }, ref) => {
-    const config = useConfig();
-    const theme = useTheme();
+export default React.forwardRef(({ title, loading, error, errorMsg, errorLevel }, ref) => {
     const { colorMode } = useColorMode();
     const statusColor = { dark: "primary.300", light: "primary.500" };
-    const defaultWarningColor = { dark: "danger.300", light: "danger.500" };
     const warningColor = { dark: 300, light: 500 };
     const defaultStatusColor = {
         dark: "success.300",
@@ -27,18 +14,10 @@ export default React.forwardRef(({ title, loading, error }, ref) => {
             {loading ? (
                 <Spinner size="sm" mr={4} color={statusColor[colorMode]} />
             ) : error ? (
-                <Tooltip
-                    hasArrow
-                    label={error.response?.data?.output || error.message || config.messages.general}
-                    placement="top"
-                >
+                <Tooltip hasArrow label={errorMsg} placement="top">
                     <Icon
                         name="warning"
-                        color={
-                            error.response
-                                ? theme.colors[error.response?.data?.level][warningColor[colorMode]]
-                                : defaultWarningColor[colorMode]
-                        }
+                        color={`${errorLevel}.${warningColor[colorMode]}`}
                         mr={4}
                         size={6}
                     />