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

2
hyperglass/configuration/models/web.py
View File

@@ -139,7 +139,7 @@ class Text(HyperglassModel):
query_vrf: StrictStr = "Routing Table"
fqdn_tooltip: StrictStr = "Use {protocol}" # Formatted by Javascript
cache_prefix: StrictStr = "Results cached for "
cache_icon: StrictStr = "Cached Response from {time}" # Formatted by Javascript
cache_icon: StrictStr = "Cached Response from {time} UTC" # Formatted by Javascript
complete_time: StrictStr = "Completed in {seconds}" # Formatted by Javascript
@validator("title_mode")

2
hyperglass/constants.py
View File

@@ -4,7 +4,7 @@
from datetime import datetime
__name__ = "hyperglass"
__version__ = "1.0.0-beta.26"
__version__ = "1.0.0-beta.27"
__author__ = "Matt Love"
__copyright__ = f"Copyright {datetime.now().year} Matthew Love"
__license__ = "BSD 3-Clause Clear License"

109
hyperglass/ui/components/Result.js
View File

@@ -10,7 +10,7 @@ import {
Flex,
Tooltip,
Text,
useColorMode,
useColorMode
} from "@chakra-ui/core";
import styled from "@emotion/styled";
import LightningBolt from "~/components/icons/LightningBolt";
@@ -28,11 +28,11 @@ import CacheTimeout from "~/components/CacheTimeout";
format.extend(String.prototype, {});
const FormattedError = ({ keywords, message }) => {
const patternStr = keywords.map((kw) => `(${kw})`).join("|");
const patternStr = keywords.map(kw => `(${kw})`).join("|");
const pattern = new RegExp(patternStr, "gi");
let errorFmt;
try {
errorFmt = strReplace(message, pattern, (match) => (
errorFmt = strReplace(message, pattern, match => (
<Text key={match} as="strong">
{match}
</Text>
@@ -46,14 +46,19 @@ const FormattedError = ({ keywords, message }) => {
const AccordionHeaderWrapper = styled(Flex)`
justify-content: space-between;
&:hover {
background-color: ${(props) => props.hoverBg};
background-color: ${props => props.hoverBg};
}
&:focus {
box-shadow: "outline";
}
`;
const statusMap = { success: "success", warning: "warning", error: "warning", danger: "error" };
const statusMap = {
success: "success",
warning: "warning",
error: "warning",
danger: "error"
};
const bg = { dark: "gray.800", light: "blackAlpha.100" };
const color = { dark: "white", light: "black" };
const selectionBg = { dark: "white", light: "black" };
@@ -70,7 +75,7 @@ const Result = React.forwardRef(
queryTarget,
index,
resultsComplete,
setComplete,
setComplete
},
ref
) => {
@@ -84,10 +89,10 @@ const Result = React.forwardRef(
query_location: queryLocation,
query_type: queryType,
query_vrf: queryVrf,
query_target: queryTarget,
query_target: queryTarget
},
timeout: timeout,
useCache: false,
useCache: false
});
const [isOpen, setOpen] = useState(false);
@@ -122,11 +127,16 @@ const Result = React.forwardRef(
error && console.dir(error);
const errorLevel =
(error?.response?.data?.level && statusMap[error.response?.data?.level]) ?? "error";
(error?.response?.data?.level &&
statusMap[error.response?.data?.level]) ??
"error";
const cacheLg = (
<>
<CacheTimeout timeout={config.cache.timeout} text={config.web.text.cache_prefix} />
<CacheTimeout
timeout={config.cache.timeout}
text={config.web.text.cache_prefix}
/>
{data?.cached && (
<Tooltip
hasArrow
@@ -153,7 +163,10 @@ const Result = React.forwardRef(
</Box>
</Tooltip>
)}
<CacheTimeout timeout={config.cache.timeout} text={config.web.text.cache_prefix} />
<CacheTimeout
timeout={config.cache.timeout}
text={config.web.text.cache_prefix}
/>
</>
);
@@ -166,6 +179,9 @@ const Result = React.forwardRef(
useEffect(() => {
resultsComplete === index && !hasOverride && setOpen(true);
}, [resultsComplete, index]);
useEffect(() => {
data && console.log(data);
});
return (
<AccordionItem
isOpen={isOpen}
@@ -173,7 +189,7 @@ const Result = React.forwardRef(
ref={ref}
css={css({
"&:last-of-type": { borderBottom: "none" },
"&:first-of-type": { borderTop: "none" },
"&:first-of-type": { borderTop: "none" }
})}
>
<AccordionHeaderWrapper hoverBg="blackAlpha.50">
@@ -195,8 +211,16 @@ const Result = React.forwardRef(
/>
</AccordionHeader>
<ButtonGroup px={3} py={2}>
<CopyButton copyValue={cleanOutput} variant="ghost" isDisabled={loading} />
<RequeryButton requery={refetch} variant="ghost" isDisabled={loading} />
<CopyButton
copyValue={cleanOutput}
variant="ghost"
isDisabled={loading}
/>
<RequeryButton
requery={refetch}
variant="ghost"
isDisabled={loading}
/>
</ButtonGroup>
</AccordionHeaderWrapper>
<AccordionPanel
@@ -205,7 +229,11 @@ const Result = React.forwardRef(
css={css({ WebkitOverflowScrolling: "touch" })}
>
<Flex direction="row" flexWrap="wrap">
<Flex direction="column" flex="1 0 auto" maxW={error ? "100%" : null}>
<Flex
direction="column"
flex="1 0 auto"
maxW={error ? "100%" : null}
>
{data && !error && (
<Box
fontFamily="mono"
@@ -223,8 +251,8 @@ const Result = React.forwardRef(
css={css({
"&::selection": {
backgroundColor: selectionBg[colorMode],
color: selectionColor[colorMode],
},
color: selectionColor[colorMode]
}
})}
>
{cleanOutput}
@@ -242,10 +270,53 @@ const Result = React.forwardRef(
<Flex
px={3}
mt={2}
justifyContent={["flex-start", "flex-start", "flex-end", "flex-end"]}
justifyContent={[
"flex-start",
"flex-start",
"flex-end",
"flex-end"
]}
flex="1 0 auto"
>
{data && !error && config.cache.show_text && cacheData}
{data && !error && config.cache.show_text && isSm ? (
<>
<Tooltip
display={data?.cached ? null : "none"}
hasArrow
label={config.web.text.cache_icon.format({
time: data?.timestamp
})}
placement="top"
>
<Box mr={1} display={data?.cached ? null : "none"}>
<LightningBolt color={color[colorMode]} />
</Box>
</Tooltip>
<CacheTimeout
timeout={config.cache.timeout}
text={config.web.text.cache_prefix}
/>
</>
) : data && !error && config.cache.show_text ? (
<>
<CacheTimeout
timeout={config.cache.timeout}
text={config.web.text.cache_prefix}
/>
<Tooltip
display={data?.cached ? null : "none"}
hasArrow
label={config.web.text.cache_icon.format({
time: data?.timestamp
})}
placement="top"
>
<Box ml={1} display={data?.cached ? null : "none"}>
<LightningBolt color={color[colorMode]} />
</Box>
</Tooltip>
</>
) : null}
</Flex>
</Flex>
</AccordionPanel>

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

@@ -1,5 +1,13 @@
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";
@@ -8,9 +16,9 @@ format.extend(String.prototype, {});
const runtimeText = (runtime, text) => {
let unit;
if (runtime === 1) {
unit = "seconds";
} else {
unit = "second";
} else {
unit = "seconds";
}
const fmt = text.format({ seconds: runtime });
return `${fmt} ${unit}`;
@@ -20,10 +28,11 @@ const statusColor = { dark: "primary.300", light: "primary.500" };
const warningColor = { dark: 300, light: 500 };
const defaultStatusColor = {
dark: "success.300",
light: "success.500",
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 (
@@ -45,11 +54,17 @@ export default React.forwardRef(({ title, loading, error, errorMsg, errorLevel,
label={runtimeText(runtime, config.web.text.complete_time)}
placement="top"
>
<Icon name="check" color={defaultStatusColor[colorMode]} mr={4} size={6} />
<Icon
name="check"
color={defaultStatusColor[colorMode]}
mr={4}
size={6}
/>
</Tooltip>
)}
<Text fontSize="lg">{title}</Text>
<AccordionIcon ml="auto" />
</Stack>
);
});
}
);

2
install.sh
View File

@@ -2,7 +2,7 @@
set -e
HYPERGLASS_VERSION="1.0.0b26"
HYPERGLASS_VERSION="1.0.0b27"
MIN_PYTHON_MAJOR="3"
MIN_PYTHON_MINOR="6"

2
pyproject.toml
View File

@@ -4,7 +4,7 @@ build-backend = "poetry.masonry.api"
[tool.poetry]
name = "hyperglass"
version = "1.0.0-beta.26"
version = "1.0.0-beta.27"
description = "hyperglass is the modern network looking glass that tries to make the internet better."
authors = ["Matt Love <matt@hyperglass.io>"]
readme = "README.md"