mirrors/thatmattlove-hyperglass
1
0
Fork 1
mirror of https://github.com/thatmattlove/hyperglass.git synced 2026-01-17 08:48:05 +00:00
Code Issues Activity

improve error display

Browse source
This commit is contained in:
checktheroads 2020-01-26 02:24:12 -07:00
parent cb8379e0e0
commit bc91fe6f29
2 changed files with 33 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ui/components/Result.js
View file

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

29
ui/components/ResultHeader.js
View file

@ -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}
/>