fix UI bugs

hyperglass/ui/components/HyperglassForm.js

@@ -58,6 +58,10 @@ const HyperglassForm = React.forwardRef(
         const [fqdnTarget, setFqdnTarget] = useState("");
         const [displayTarget, setDisplayTarget] = useState("");
         const onSubmit = values => {
+            if (values.query_vrf === undefined) {
+                values.query_vrf = "default";
+            }
+            console.log(values);
             setFormData(values);
             setSubmitting(true);
         };
@@ -136,7 +140,7 @@ const HyperglassForm = React.forwardRef(
                         </FormField>
                     </FormRow>
                     <FormRow>
-                        {availVrfs.length > 0 && (
+                        {availVrfs.length > 1 && (
                             <FormField
                                 label={config.web.text.query_vrf}
                                 name="query_vrf"

hyperglass/ui/components/Result.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
     AccordionItem,
     AccordionHeader,
@@ -22,6 +22,9 @@ import ResultHeader from "~/components/ResultHeader";
 import { startCase } from "lodash";
 
 const FormattedError = ({ keywords, message }) => {
+    if (keywords === null || keywords === undefined) {
+        keywords = [];
+    }
     const patternStr = `(${keywords.join("|")})`;
     const pattern = new RegExp(patternStr, "gi");
     const errorFmt = strReplace(message, pattern, match => (
@@ -45,7 +48,20 @@ const AccordionHeaderWrapper = styled(Flex)`
 const statusMap = { success: "success", warning: "warning", error: "warning", danger: "error" };
 
 const Result = React.forwardRef(
-    ({ device, timeout, queryLocation, queryType, queryVrf, queryTarget, index }, ref) => {
+    (
+        {
+            device,
+            timeout,
+            queryLocation,
+            queryType,
+            queryVrf,
+            queryTarget,
+            index,
+            resultsComplete,
+            setComplete
+        },
+        ref
+    ) => {
         const config = useConfig();
         const theme = useTheme();
         const { colorMode } = useColorMode();
@@ -64,6 +80,14 @@ const Result = React.forwardRef(
             },
             timeout: timeout
         });
+
+        const [isOpen, setOpen] = useState(false);
+        const [hasOverride, setOverride] = useState(false);
+
+        const handleToggle = () => {
+            setOpen(!isOpen);
+            setOverride(true);
+        };
         const cleanOutput =
             data &&
             data.output
@@ -91,9 +115,16 @@ const Result = React.forwardRef(
         const errorLevel =
             (error?.response?.data?.level && statusMap[error.response?.data?.level]) ?? "error";
 
+        useEffect(() => {
+            !loading && resultsComplete === null && setComplete(index);
+        }, [loading, resultsComplete]);
+
+        useEffect(() => {
+            resultsComplete === index && !hasOverride && setOpen(true);
+        }, [resultsComplete, index]);
         return (
             <AccordionItem
-                defaultIsOpen={index === 0 ? true : false}
+                isOpen={isOpen}
                 isDisabled={loading}
                 ref={ref}
                 css={css({
@@ -102,7 +133,14 @@ const Result = React.forwardRef(
                 })}
             >
                 <AccordionHeaderWrapper hoverBg={theme.colors.blackAlpha[50]}>
-                    <AccordionHeader flex="1 0 auto" py={2} _hover={{}} _focus={{}} w="unset">
+                    <AccordionHeader
+                        flex="1 0 auto"
+                        py={2}
+                        _hover={{}}
+                        _focus={{}}
+                        w="unset"
+                        onClick={handleToggle}
+                    >
                         <ResultHeader
                             title={device.display_name}
                             loading={loading}

hyperglass/ui/components/Results.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Accordion, Box, Stack, useTheme } from "@chakra-ui/core";
 import { motion, AnimatePresence } from "framer-motion";
 import Label from "~/components/Label";
@@ -54,7 +54,10 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
     const config = useConfig();
     const theme = useTheme();
     const { mediaSize } = useMedia();
-    const matchedVrf = config.vrfs.filter(v => v.id === queryVrf)[0];
+    const matchedVrf =
+        config.vrfs.filter(v => v.id === queryVrf)[0] ??
+        config.vrfs.filter(v => v.id === "default")[0];
+    const [resultsComplete, setComplete] = useState(null);
     return (
         <>
             <Box
@@ -140,6 +143,8 @@ const Results = ({ queryLocation, queryType, queryVrf, queryTarget, setSubmittin
                                     queryTarget={queryTarget}
                                     setSubmitting={setSubmitting}
                                     index={i}
+                                    resultsComplete={resultsComplete}
+                                    setComplete={setComplete}
                                 />
                             ))}
                     </AnimatePresence>