forked from mirrors/thatmattlove-hyperglass
start adding containing prefix feature
This commit is contained in:
checktheroads
parent
0c93972aa9
commit
cc4473db8b
1 changed files with 141 additions and 124 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { Button, Icon, Spinner, Stack, Tag, Text, Tooltip, useColorMode } from "@chakra-ui/core";
|
||||
import axios from "axios";
|
||||
import useAxios from "axios-hooks";
|
||||
import format from "string-format";
|
||||
import useConfig from "~/components/HyperglassProvider";
|
||||
|
|
@ -9,134 +10,150 @@ format.extend(String.prototype, {});
|
|||
const labelBg = { dark: "secondary", light: "secondary" };
|
||||
const labelBgSuccess = { dark: "success", light: "success" };
|
||||
|
||||
const ResolvedTarget = React.forwardRef(({ fqdnTarget, setTarget, queryTarget, families }, 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
|
||||
}
|
||||
};
|
||||
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 [{ data: data4, loading: loading4, error: error4 }] = useAxios(params[4]);
|
||||
|
||||
const [{ data: data6, loading: loading6, error: error6 }] = useAxios(params[6]);
|
||||
|
||||
const handleOverride = overridden => {
|
||||
setTarget({ field: "query_target", value: overridden });
|
||||
};
|
||||
|
||||
const isSelected = value => {
|
||||
return labelBgStatus[value === queryTarget];
|
||||
};
|
||||
|
||||
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 ? "space-between" : "flex-end"
|
||||
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
|
||||
}
|
||||
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))}
|
||||
};
|
||||
|
||||
const [{ data: data4, loading: loading4, error: error4 }] = useAxios(params[4]);
|
||||
|
||||
const [{ data: data6, loading: loading6, error: error6 }] = useAxios(params[6]);
|
||||
|
||||
const handleOverride = overridden => {
|
||||
setTarget({ field: "query_target", value: overridden });
|
||||
};
|
||||
|
||||
const isSelected = value => {
|
||||
return labelBgStatus[value === queryTarget];
|
||||
};
|
||||
|
||||
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"
|
||||
>
|
||||
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))}
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
);
|
||||
});
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue