checktheroads-hyperglass/hyperglass/ui/components/ResolvedTarget.js

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";

format.extend(String.prototype, {});

const labelBg = { dark: "secondary", light: "secondary" };
const labelBgSuccess = { dark: "success", light: "success" };

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 [{ 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"
              >
                <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>
    );
  }
);

export default ResolvedTarget;