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

Refactor React components & update deps

Browse Source
This commit is contained in:
checktheroads
2020-07-05 17:20:10 -07:00
parent 6ea8dfe975
commit 79c271b0ce
56 changed files with 1231 additions and 1272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
hyperglass/ui/components/ResolvedTarget.js
View File

@@ -1,6 +1,15 @@
import React, { useEffect } from "react";
import { Button, Icon, Spinner, Stack, Tag, Text, Tooltip, useColorMode } from "@chakra-ui/core";
import axios from "axios";
import * as React from "react";
import { forwardRef, useEffect } from "react";
import {
Button,
Icon,
Spinner,
Stack,
Tag,
Text,
Tooltip,
useColorMode
} from "@chakra-ui/core";
import useAxios from "axios-hooks";
import format from "string-format";
import useConfig from "~/components/HyperglassProvider";
@@ -10,150 +19,164 @@ format.extend(String.prototype, {});
const labelBg = { dark: "secondary", light: "secondary" };
const labelBgSuccess = { dark: "success", light: "success" };
async function containingPrefix(ipAddress) {
try {
const prefixData = await axios.get("https://stat.ripe.net/data/network-info/data.json", {
params: { resource: ipAddress },
});
return prefixData.data?.data?.prefix;
} catch (err) {
console.dir(err);
return null;
}
}
const ResolvedTarget = forwardRef(
({ fqdnTarget, setTarget, queryTarget, families, availVrfs }, ref) => {
const { colorMode } = useColorMode();
const config = useConfig();
const labelBgStatus = {
true: labelBgSuccess[colorMode],
false: labelBg[colorMode]
};
const dnsUrl = config.web.dns_provider.url;
const query4 = families.includes(4);
const query6 = families.includes(6);
const params = {
4: {
url: dnsUrl,
params: { name: fqdnTarget, type: "A" },
headers: { accept: "application/dns-json" },
crossdomain: true,
timeout: 1000
},
6: {
url: dnsUrl,
params: { name: fqdnTarget, type: "AAAA" },
headers: { accept: "application/dns-json" },
crossdomain: true,
timeout: 1000
}
};
const ResolvedTarget = React.forwardRef(
({ fqdnTarget, setTarget, queryTarget, families, availVrfs }, ref) => {
const { colorMode } = useColorMode();
const config = useConfig();
const labelBgStatus = { true: labelBgSuccess[colorMode], false: labelBg[colorMode] };
const dnsUrl = config.web.dns_provider.url;
const query4 = families.includes(4);
const query6 = families.includes(6);
const params = {
4: {
url: dnsUrl,
params: { name: fqdnTarget, type: "A" },
headers: { accept: "application/dns-json" },
crossdomain: true,
timeout: 1000,
},
6: {
url: dnsUrl,
params: { name: fqdnTarget, type: "AAAA" },
headers: { accept: "application/dns-json" },
crossdomain: true,
timeout: 1000,
},
};
const [{ data: data4, loading: loading4, error: error4 }] = useAxios(
params[4]
);
const [{ data: data4, loading: loading4, error: error4 }] = useAxios(params[4]);
const [{ data: data6, loading: loading6, error: error6 }] = useAxios(
params[6]
);
const [{ data: data6, loading: loading6, error: error6 }] = useAxios(params[6]);
const handleOverride = overridden => {
setTarget({ field: "query_target", value: overridden });
};
const handleOverride = (overridden) => {
setTarget({ field: "query_target", value: overridden });
};
const isSelected = value => {
return labelBgStatus[value === queryTarget];
};
const isSelected = (value) => {
return labelBgStatus[value === queryTarget];
};
const findAnswer = data => {
return data?.Answer?.filter(
answerData => answerData.type === data?.Question[0]?.type
)[0]?.data;
};
const findAnswer = (data) => {
return data?.Answer?.filter(
(answerData) => answerData.type === data?.Question[0]?.type
)[0]?.data;
};
useEffect(() => {
if (query6 && data6?.Answer) {
handleOverride(findAnswer(data6));
} else if (query4 && data4?.Answer && !query6 && !data6?.Answer) {
handleOverride(findAnswer(data4));
} else if (query4 && data4?.Answer) {
handleOverride(findAnswer(data4));
}
}, [data4, data6]);
return (
<Stack
ref={ref}
isInline
w="100%"
justifyContent={
query4 && data4?.Answer && query6 && data6?.Answer && availVrfs.length > 1
? "space-between"
: "flex-end"
}
flexWrap="wrap"
>
{loading4 ||
error4 ||
(query4 && findAnswer(data4) && (
<Tag my={2}>
<Tooltip
hasArrow
label={config.web.text.fqdn_tooltip.format({ protocol: "IPv4" })}
placement="bottom"
>
<Button
height="unset"
minW="unset"
fontSize="xs"
py="0.1rem"
px={2}
mr={2}
variantColor={labelBgStatus[findAnswer(data4) === queryTarget]}
borderRadius="md"
onClick={() => handleOverride(findAnswer(data4))}
>
IPv4
</Button>
</Tooltip>
{loading4 && <Spinner />}
{error4 && <Icon name="warning" />}
{findAnswer(data4) && (
<Text fontSize="xs" fontFamily="mono" as="span" fontWeight={400}>
{findAnswer(data4)}
</Text>
)}
</Tag>
))}
{loading6 ||
error6 ||
(query6 && findAnswer(data6) && (
<Tag my={2}>
<Tooltip
hasArrow
label={config.web.text.fqdn_tooltip.format({ protocol: "IPv6" })}
placement="bottom"
>
<Button
height="unset"
minW="unset"
fontSize="xs"
py="0.1rem"
px={2}
mr={2}
variantColor={isSelected(findAnswer(data6))}
borderRadius="md"
onClick={() => handleOverride(findAnswer(data6))}
>
IPv6
</Button>
</Tooltip>
{loading6 && <Spinner />}
{error6 && <Icon name="warning" />}
{findAnswer(data6) && (
<Text fontSize="xs" fontFamily="mono" as="span" fontWeight={400}>
{findAnswer(data6)}
</Text>
)}
</Tag>
))}
</Stack>
);
}
useEffect(() => {
if (query6 && data6?.Answer) {
handleOverride(findAnswer(data6));
} else if (query4 && data4?.Answer && !query6 && !data6?.Answer) {
handleOverride(findAnswer(data4));
} else if (query4 && data4?.Answer) {
handleOverride(findAnswer(data4));
}
}, [data4, data6]);
return (
<Stack
ref={ref}
isInline
w="100%"
justifyContent={
query4 &&
data4?.Answer &&
query6 &&
data6?.Answer &&
availVrfs.length > 1
? "space-between"
: "flex-end"
}
flexWrap="wrap"
>
{loading4 ||
error4 ||
(query4 && findAnswer(data4) && (
<Tag my={2}>
<Tooltip
hasArrow
label={config.web.text.fqdn_tooltip.format({
protocol: "IPv4"
})}
placement="bottom"
>
<Button
height="unset"
minW="unset"
fontSize="xs"
py="0.1rem"
px={2}
mr={2}
variantColor={
labelBgStatus[findAnswer(data4) === queryTarget]
}
borderRadius="md"
onClick={() => handleOverride(findAnswer(data4))}
>
IPv4
</Button>
</Tooltip>
{loading4 && <Spinner />}
{error4 && <Icon name="warning" />}
{findAnswer(data4) && (
<Text
fontSize="xs"
fontFamily="mono"
as="span"
fontWeight={400}
>
{findAnswer(data4)}
</Text>
)}
</Tag>
))}
{loading6 ||
error6 ||
(query6 && findAnswer(data6) && (
<Tag my={2}>
<Tooltip
hasArrow
label={config.web.text.fqdn_tooltip.format({
protocol: "IPv6"
})}
placement="bottom"
>
<Button
height="unset"
minW="unset"
fontSize="xs"
py="0.1rem"
px={2}
mr={2}
variantColor={isSelected(findAnswer(data6))}
borderRadius="md"
onClick={() => handleOverride(findAnswer(data6))}
>
IPv6
</Button>
</Tooltip>
{loading6 && <Spinner />}
{error6 && <Icon name="warning" />}
{findAnswer(data6) && (
<Text
fontSize="xs"
fontFamily="mono"
as="span"
fontWeight={400}
>
{findAnswer(data6)}
</Text>
)}
</Tag>
))}
</Stack>
);
}
);
ResolvedTarget.displayName = "ResolvedTarget";
export default ResolvedTarget;