mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix cache UI issue

Browse Source
This commit is contained in:
checktheroads
2020-04-18 12:09:16 -07:00
parent e9de3f4295
commit a00be434cf
6 changed files with 346 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
hyperglass/ui/components/ResultHeader.js
View File

@@ -1,55 +1,70 @@
import React from "react";
import { AccordionIcon, Icon, Spinner, Stack, Text, Tooltip, useColorMode } from "@chakra-ui/core";
import {
AccordionIcon,
Icon,
Spinner,
Stack,
Text,
Tooltip,
useColorMode
} from "@chakra-ui/core";
import format from "string-format";
import useConfig from "~/components/HyperglassProvider";
format.extend(String.prototype, {});
const runtimeText = (runtime, text) => {
let unit;
if (runtime === 1) {
unit = "seconds";
} else {
unit = "second";
}
const fmt = text.format({ seconds: runtime });
return `${fmt} ${unit}`;
let unit;
if (runtime === 1) {
unit = "second";
} else {
unit = "seconds";
}
const fmt = text.format({ seconds: runtime });
return `${fmt} ${unit}`;
};
const statusColor = { dark: "primary.300", light: "primary.500" };
const warningColor = { dark: 300, light: 500 };
const defaultStatusColor = {
dark: "success.300",
light: "success.500",
dark: "success.300",
light: "success.500"
};
export default React.forwardRef(({ title, loading, error, errorMsg, errorLevel, runtime }, ref) => {
export default React.forwardRef(
({ title, loading, error, errorMsg, errorLevel, runtime }, ref) => {
const { colorMode } = useColorMode();
const config = useConfig();
return (
<Stack ref={ref} isInline alignItems="center" w="100%">
{loading ? (
<Spinner size="sm" mr={4} color={statusColor[colorMode]} />
) : error ? (
<Tooltip hasArrow label={errorMsg} placement="top">
<Icon
name="warning"
color={`${errorLevel}.${warningColor[colorMode]}`}
mr={4}
size={6}
/>
</Tooltip>
) : (
<Tooltip
hasArrow
label={runtimeText(runtime, config.web.text.complete_time)}
placement="top"
>
<Icon name="check" color={defaultStatusColor[colorMode]} mr={4} size={6} />
</Tooltip>
)}
<Text fontSize="lg">{title}</Text>
<AccordionIcon ml="auto" />
</Stack>
<Stack ref={ref} isInline alignItems="center" w="100%">
{loading ? (
<Spinner size="sm" mr={4} color={statusColor[colorMode]} />
) : error ? (
<Tooltip hasArrow label={errorMsg} placement="top">
<Icon
name="warning"
color={`${errorLevel}.${warningColor[colorMode]}`}
mr={4}
size={6}
/>
</Tooltip>
) : (
<Tooltip
hasArrow
label={runtimeText(runtime, config.web.text.complete_time)}
placement="top"
>
<Icon
name="check"
color={defaultStatusColor[colorMode]}
mr={4}
size={6}
/>
</Tooltip>
)}
<Text fontSize="lg">{title}</Text>
<AccordionIcon ml="auto" />
</Stack>
);
});
}
);