From cc4473db8b957e1b02832d98051259006630fae7 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 28 Mar 2020 17:46:40 -0700
Subject: [PATCH] start adding containing prefix feature

---
 hyperglass/ui/components/ResolvedTarget.js | 265 +++++++++++----------
 1 file changed, 141 insertions(+), 124 deletions(-)

diff --git a/hyperglass/ui/components/ResolvedTarget.js b/hyperglass/ui/components/ResolvedTarget.js
index 7e1ce7e..5bd1601 100644
--- a/hyperglass/ui/components/ResolvedTarget.js
+++ b/hyperglass/ui/components/ResolvedTarget.js
@@ -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;