diff --git a/hyperglass/ui/.eslintrc b/hyperglass/ui/.eslintrc new file mode 100644 index 0000000..6beb7e1 --- /dev/null +++ b/hyperglass/ui/.eslintrc @@ -0,0 +1,9 @@ +{ + "extends": "@upstatement/eslint-config/react", + "plugins": ["react-hooks"], + "settings": { "import/resolver": { "typescript": {} } }, + "rules": { + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": ["warn"] + } +} diff --git a/hyperglass/ui/components/BGPTable.js b/hyperglass/ui/components/BGPTable.js index 1699213..7cb0e61 100644 --- a/hyperglass/ui/components/BGPTable.js +++ b/hyperglass/ui/components/BGPTable.js @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from 'react'; import { Flex, Icon, @@ -8,39 +8,39 @@ import { PopoverTrigger, Text, Tooltip, - useColorMode -} from "@chakra-ui/core"; -import { MdLastPage } from "@meronex/icons/md"; -import dayjs from "dayjs"; -import relativeTimePlugin from "dayjs/plugin/relativeTime"; -import utcPlugin from "dayjs/plugin/utc"; -import { useConfig } from "app/context"; -import { Table } from "app/components"; + useColorMode, +} from '@chakra-ui/core'; +import { MdLastPage } from '@meronex/icons/md'; +import dayjs from 'dayjs'; +import relativeTimePlugin from 'dayjs/plugin/relativeTime'; +import utcPlugin from 'dayjs/plugin/utc'; +import { useConfig } from 'app/context'; +import { Table } from 'app/components'; dayjs.extend(relativeTimePlugin); dayjs.extend(utcPlugin); const isActiveColor = { - true: { dark: "green.300", light: "green.500" }, - false: { dark: "gray.300", light: "gray.500" } + true: { dark: 'green.300', light: 'green.500' }, + false: { dark: 'gray.300', light: 'gray.500' }, }; const arrowColor = { - true: { dark: "blackAlpha.500", light: "blackAlpha.500" }, - false: { dark: "whiteAlpha.300", light: "blackAlpha.500" } + true: { dark: 'blackAlpha.500', light: 'blackAlpha.500' }, + false: { dark: 'whiteAlpha.300', light: 'blackAlpha.500' }, }; -const rpkiIcon = ["not-allowed", "check-circle", "warning", "question"]; +const rpkiIcon = ['not-allowed', 'check-circle', 'warning', 'question']; const rpkiColor = { true: { - dark: ["red.500", "green.600", "yellow.500", "gray.800"], - light: ["red.500", "green.500", "yellow.500", "gray.600"] + dark: ['red.500', 'green.600', 'yellow.500', 'gray.800'], + light: ['red.500', 'green.500', 'yellow.500', 'gray.600'], }, false: { - dark: ["red.300", "green.300", "yellow.300", "gray.300"], - light: ["red.400", "green.500", "yellow.400", "gray.500"] - } + dark: ['red.300', 'green.300', 'yellow.300', 'gray.300'], + light: ['red.400', 'green.500', 'yellow.400', 'gray.500'], + }, }; const makeColumns = fields => { @@ -50,7 +50,7 @@ const makeColumns = fields => { Header: header, accessor: accessor, align: align, - hidden: false + hidden: false, }; if (align === null) { columnConfig.hidden = true; @@ -68,22 +68,15 @@ const MonoField = ({ v, ...props }) => ( const Active = ({ isActive }) => { const { colorMode } = useColorMode(); return ( - + ); }; const Age = ({ inSeconds }) => { const now = dayjs.utc(); - const then = now.subtract(inSeconds, "seconds"); + const then = now.subtract(inSeconds, 'seconds'); return ( - + {now.to(then, true)} ); @@ -91,9 +84,7 @@ const Age = ({ inSeconds }) => { const Weight = ({ weight, winningWeight }) => { const fixMeText = - winningWeight === "low" - ? "Lower Weight is Preferred" - : "Higher Weight is Preferred"; + winningWeight === 'low' ? 'Lower Weight is Preferred' : 'Higher Weight is Preferred'; return ( @@ -113,22 +104,12 @@ const ASPath = ({ path, active }) => { const asnStr = String(asn); i !== 0 && paths.push( - + , ); paths.push( - + {asnStr} - + , ); }); return paths; @@ -152,13 +133,12 @@ const Communities = ({ communities }) => { textAlign="left" p={4} width="unset" - color={colorMode === "dark" ? "white" : "black"} + color={colorMode === 'dark' ? 'white' : 'black'} fontFamily="mono" fontWeight="normal" - whiteSpace="pre-wrap" - > + whiteSpace="pre-wrap"> - {communities.join("\n")} + {communities.join('\n')} )); @@ -172,18 +152,11 @@ const RPKIState = ({ state, active }) => { web.text.rpki_invalid, web.text.rpki_valid, web.text.rpki_unknown, - web.text.rpki_unverified + web.text.rpki_unverified, ]; return ( - - + + ); }; @@ -193,24 +166,16 @@ const Cell = ({ data, rawData, longestASN }) => { prefix: , active: , age: , - weight: ( - - ), + weight: , med: , local_preference: , - as_path: ( - - ), + as_path: , communities: , next_hop: , source_as: , source_rid: , peer_rid: , - rpki_state: + rpki_state: , }; return component[data.column.id] ?? <> ; }; @@ -220,7 +185,7 @@ export const BGPTable = ({ children: data, ...props }) => { const columns = makeColumns(config.parsed_data_fields); return ( - + { if (completed) { @@ -15,7 +15,7 @@ const Renderer = ({ hours, minutes, seconds, completed, props }) => { {props.text} - {time.join(":")} + {time.join(':')} ); diff --git a/hyperglass/ui/components/Card/CardBody.js b/hyperglass/ui/components/Card/CardBody.js index e7c7334..f4447b1 100644 --- a/hyperglass/ui/components/Card/CardBody.js +++ b/hyperglass/ui/components/Card/CardBody.js @@ -1,8 +1,8 @@ -import * as React from "react"; -import { Flex, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { Flex, useColorMode } from '@chakra-ui/core'; -const bg = { light: "white", dark: "original.dark" }; -const color = { light: "original.dark", dark: "white" }; +const bg = { light: 'white', dark: 'original.dark' }; +const color = { light: 'original.dark', dark: 'white' }; export const CardBody = ({ onClick = () => false, children, ...props }) => { const { colorMode } = useColorMode(); @@ -17,8 +17,7 @@ export const CardBody = ({ onClick = () => false, children, ...props }) => { bg={bg[colorMode]} color={color[colorMode]} overflow="hidden" - {...props} - > + {...props}> {children} ); diff --git a/hyperglass/ui/components/Card/CardFooter.js b/hyperglass/ui/components/Card/CardFooter.js index 3bddeb2..7800757 100644 --- a/hyperglass/ui/components/Card/CardFooter.js +++ b/hyperglass/ui/components/Card/CardFooter.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { Flex } from "@chakra-ui/core"; +import * as React from 'react'; +import { Flex } from '@chakra-ui/core'; export const CardFooter = ({ children, ...props }) => ( ( overflowY="hidden" flexDirection="row" justifyContent="space-between" - {...props} - > + {...props}> {children} ); diff --git a/hyperglass/ui/components/Card/CardHeader.js b/hyperglass/ui/components/Card/CardHeader.js index 66a8952..9b8f6f7 100644 --- a/hyperglass/ui/components/Card/CardHeader.js +++ b/hyperglass/ui/components/Card/CardHeader.js @@ -1,7 +1,7 @@ -import * as React from "react"; -import { Flex, Text, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { Flex, Text, useColorMode } from '@chakra-ui/core'; -const bg = { light: "blackAlpha.50", dark: "whiteAlpha.100" }; +const bg = { light: 'blackAlpha.50', dark: 'whiteAlpha.100' }; export const CardHeader = ({ children, ...props }) => { const { colorMode } = useColorMode(); @@ -13,8 +13,7 @@ export const CardHeader = ({ children, ...props }) => { roundedTopLeft={4} roundedTopRight={4} borderBottomWidth="1px" - {...props} - > + {...props}> {children} ); diff --git a/hyperglass/ui/components/Card/index.mjs b/hyperglass/ui/components/Card/index.mjs index e211fac..39dfd07 100644 --- a/hyperglass/ui/components/Card/index.mjs +++ b/hyperglass/ui/components/Card/index.mjs @@ -1,3 +1,3 @@ -export * from "./CardBody"; -export * from "./CardFooter"; -export * from "./CardHeader"; +export * from './CardBody'; +export * from './CardFooter'; +export * from './CardHeader'; diff --git a/hyperglass/ui/components/ChakraSelect.js b/hyperglass/ui/components/ChakraSelect.js index 5ab571b..c7e013c 100644 --- a/hyperglass/ui/components/ChakraSelect.js +++ b/hyperglass/ui/components/ChakraSelect.js @@ -1,85 +1,76 @@ -import * as React from "react"; -import { Text, useColorMode, useTheme } from "@chakra-ui/core"; -import Select from "react-select"; -import { opposingColor } from "app/util"; +import * as React from 'react'; +import { Text, useColorMode, useTheme } from '@chakra-ui/core'; +import Select from 'react-select'; +import { opposingColor } from 'app/util'; export const ChakraSelect = React.forwardRef( - ( - { placeholder = "Select...", isFullWidth, size, children, ...props }, - ref - ) => { + ({ placeholder = 'Select...', isFullWidth, size, children, ...props }, ref) => { const theme = useTheme(); const { colorMode } = useColorMode(); const sizeMap = { lg: { height: theme.space[12] }, md: { height: theme.space[10] }, - sm: { height: theme.space[8] } + sm: { height: theme.space[8] }, }; const colorSetPrimaryBg = { dark: theme.colors.primary[300], - light: theme.colors.primary[500] + light: theme.colors.primary[500], }; - const colorSetPrimaryColor = opposingColor( - theme, - colorSetPrimaryBg[colorMode] - ); + const colorSetPrimaryColor = opposingColor(theme, colorSetPrimaryBg[colorMode]); const bg = { dark: theme.colors.whiteAlpha[100], - light: theme.colors.white + light: theme.colors.white, }; const color = { dark: theme.colors.whiteAlpha[800], - light: theme.colors.black + light: theme.colors.black, }; const borderFocused = theme.colors.secondary[500]; const borderDisabled = theme.colors.whiteAlpha[100]; const border = { dark: theme.colors.whiteAlpha[50], - light: theme.colors.gray[100] + light: theme.colors.gray[100], }; const borderRadius = theme.space[1]; const hoverColor = { dark: theme.colors.whiteAlpha[200], - light: theme.colors.gray[300] + light: theme.colors.gray[300], }; const { height } = sizeMap[size]; const optionBgActive = { dark: theme.colors.primary[400], - light: theme.colors.primary[600] + light: theme.colors.primary[600], }; const optionBgColor = opposingColor(theme, optionBgActive[colorMode]); const optionSelectedBg = { dark: theme.colors.whiteAlpha[400], - light: theme.colors.blackAlpha[400] + light: theme.colors.blackAlpha[400], }; - const optionSelectedColor = opposingColor( - theme, - optionSelectedBg[colorMode] - ); + const optionSelectedColor = opposingColor(theme, optionSelectedBg[colorMode]); const selectedDisabled = theme.colors.whiteAlpha[400]; const placeholderColor = { dark: theme.colors.whiteAlpha[700], - light: theme.colors.gray[600] + light: theme.colors.gray[600], }; const menuBg = { dark: theme.colors.blackFaded[800], - light: theme.colors.whiteFaded[50] + light: theme.colors.whiteFaded[50], }; const menuColor = { dark: theme.colors.white, - light: theme.colors.blackAlpha[800] + light: theme.colors.blackAlpha[800], }; const scrollbar = { dark: theme.colors.whiteAlpha[300], - light: theme.colors.blackAlpha[300] + light: theme.colors.blackAlpha[300], }; const scrollbarHover = { dark: theme.colors.whiteAlpha[400], - light: theme.colors.blackAlpha[400] + light: theme.colors.blackAlpha[400], }; const scrollbarBg = { dark: theme.colors.whiteAlpha[50], - light: theme.colors.blackAlpha[50] + light: theme.colors.blackAlpha[50], }; return ( ); - } + }, ); diff --git a/hyperglass/ui/components/CodeBlock.js b/hyperglass/ui/components/CodeBlock.js index 83767e7..e12e242 100644 --- a/hyperglass/ui/components/CodeBlock.js +++ b/hyperglass/ui/components/CodeBlock.js @@ -1,10 +1,10 @@ -import * as React from "react"; -import { Box, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { Box, useColorMode } from '@chakra-ui/core'; export const CodeBlock = ({ children }) => { const { colorMode } = useColorMode(); - const bg = { dark: "gray.800", light: "blackAlpha.100" }; - const color = { dark: "white", light: "black" }; + const bg = { dark: 'gray.800', light: 'blackAlpha.100' }; + const color = { dark: 'white', light: 'black' }; return ( { color={color[colorMode]} fontSize="sm" whiteSpace="pre-wrap" - as="pre" - > + as="pre"> {children} ); diff --git a/hyperglass/ui/components/ColorModeToggle.js b/hyperglass/ui/components/ColorModeToggle.js index 84d85a1..e0f377d 100644 --- a/hyperglass/ui/components/ColorModeToggle.js +++ b/hyperglass/ui/components/ColorModeToggle.js @@ -1,43 +1,41 @@ -import * as React from "react"; -import { forwardRef } from "react"; -import { Button, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { forwardRef } from 'react'; +import { Button, useColorMode } from '@chakra-ui/core'; -const Sun = ({ color, size = "1.5rem", ...props }) => ( +const Sun = ({ color, size = '1.5rem', ...props }) => ( + {...props}> ); -const Moon = ({ color, size = "1.5rem", ...props }) => ( +const Moon = ({ color, size = '1.5rem', ...props }) => ( + {...props}> @@ -45,13 +43,13 @@ const Moon = ({ color, size = "1.5rem", ...props }) => ( ); const iconMap = { dark: Moon, light: Sun }; -const outlineColor = { dark: "primary.300", light: "primary.600" }; +const outlineColor = { dark: 'primary.300', light: 'primary.600' }; export const ColorModeToggle = forwardRef((props, ref) => { const { colorMode, toggleColorMode } = useColorMode(); const Icon = iconMap[colorMode]; - const label = `Switch to ${colorMode === "light" ? "dark" : "light"} mode`; + const label = `Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`; return ( ); diff --git a/hyperglass/ui/components/CommunitySelect.js b/hyperglass/ui/components/CommunitySelect.js index 0fef4ed..2445302 100644 --- a/hyperglass/ui/components/CommunitySelect.js +++ b/hyperglass/ui/components/CommunitySelect.js @@ -1,21 +1,15 @@ -import * as React from "react"; -import { useEffect } from "react"; -import { Text } from "@chakra-ui/core"; -import { components } from "react-select"; -import { ChakraSelect } from "app/components"; +import * as React from 'react'; +import { useEffect } from 'react'; +import { Text } from '@chakra-ui/core'; +import { components } from 'react-select'; +import { ChakraSelect } from 'app/components'; -export const CommunitySelect = ({ - name, - communities, - onChange, - register, - unregister -}) => { +export const CommunitySelect = ({ name, communities, onChange, register, unregister }) => { const communitySelections = communities.map(c => { return { value: c.community, label: c.display_name, - description: c.description + description: c.description, }; }); const Option = ({ label, data, ...props }) => { @@ -38,7 +32,7 @@ export const CommunitySelect = ({ size="lg" name={name} onChange={e => { - onChange({ field: name, value: e.value || "" }); + onChange({ field: name, value: e.value || '' }); }} options={communitySelections} components={{ Option }} diff --git a/hyperglass/ui/components/CopyButton.js b/hyperglass/ui/components/CopyButton.js index 73ddc5e..acc7466 100644 --- a/hyperglass/ui/components/CopyButton.js +++ b/hyperglass/ui/components/CopyButton.js @@ -1,7 +1,7 @@ -import * as React from "react"; -import { Button, Icon, Tooltip, useClipboard } from "@chakra-ui/core"; +import * as React from 'react'; +import { Button, Icon, Tooltip, useClipboard } from '@chakra-ui/core'; -export const CopyButton = ({ bg = "secondary", copyValue, ...props }) => { +export const CopyButton = ({ bg = 'secondary', copyValue, ...props }) => { const { onCopy, hasCopied } = useClipboard(copyValue); return ( @@ -12,13 +12,8 @@ export const CopyButton = ({ bg = "secondary", copyValue, ...props }) => { zIndex="dropdown" onClick={onCopy} mx={1} - {...props} - > - {hasCopied ? ( - - ) : ( - - )} + {...props}> + {hasCopied ? : } ); diff --git a/hyperglass/ui/components/Debugger.js b/hyperglass/ui/components/Debugger.js index 23f333f..db048ba 100644 --- a/hyperglass/ui/components/Debugger.js +++ b/hyperglass/ui/components/Debugger.js @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from 'react'; import { Button, Modal, @@ -11,36 +11,28 @@ import { Tag, useDisclosure, useColorMode, - useTheme -} from "@chakra-ui/core"; -import { useConfig, useMedia } from "app/context"; -import { CodeBlock } from "app/components"; + useTheme, +} from '@chakra-ui/core'; +import { useConfig, useMedia } from 'app/context'; +import { CodeBlock } from 'app/components'; const prettyMediaSize = { - sm: "SMALL", - md: "MEDIUM", - lg: "LARGE", - xl: "X-LARGE" + sm: 'SMALL', + md: 'MEDIUM', + lg: 'LARGE', + xl: 'X-LARGE', }; export const Debugger = () => { - const { - isOpen: configOpen, - onOpen: onConfigOpen, - onClose: configClose - } = useDisclosure(); - const { - isOpen: themeOpen, - onOpen: onThemeOpen, - onClose: themeClose - } = useDisclosure(); + const { isOpen: configOpen, onOpen: onConfigOpen, onClose: configClose } = useDisclosure(); + const { isOpen: themeOpen, onOpen: onThemeOpen, onClose: themeClose } = useDisclosure(); const config = useConfig(); const theme = useTheme(); - const bg = { light: "white", dark: "black" }; - const color = { light: "black", dark: "white" }; + const bg = { light: 'white', dark: 'black' }; + const color = { light: 'black', dark: 'white' }; const { colorMode } = useColorMode(); const { mediaSize } = useMedia(); - const borderColor = { light: "gray.100", dark: "gray.600" }; + const borderColor = { light: 'gray.100', dark: 'gray.600' }; return ( <> { bottom={0} justifyContent="center" zIndex={1000} - maxW="100%" - > + maxW="100%"> {colorMode.toUpperCase()} {prettyMediaSize[mediaSize]} - + diff --git a/hyperglass/ui/components/QueryLocation.js b/hyperglass/ui/components/QueryLocation.js index 3810f75..00fffaf 100644 --- a/hyperglass/ui/components/QueryLocation.js +++ b/hyperglass/ui/components/QueryLocation.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { ChakraSelect } from "app/components"; +import * as React from 'react'; +import { ChakraSelect } from 'app/components'; const buildLocations = networks => { const locations = []; @@ -9,7 +9,7 @@ const buildLocations = networks => { netLocations.push({ label: loc.display_name, value: loc.name, - group: net.display_name + group: net.display_name, }); }); locations.push({ label: net.display_name, options: netLocations }); @@ -25,7 +25,7 @@ export const QueryLocation = ({ locations, onChange, label }) => { e.map(sel => { selected.push(sel.value); }); - onChange({ field: "query_location", value: selected }); + onChange({ field: 'query_location', value: selected }); }; return ( { const { colorMode } = useColorMode(); @@ -61,7 +61,7 @@ export const QueryTarget = ({ placeholder={placeholder} borderColor={border[colorMode]} _placeholder={{ - color: placeholderColor[colorMode] + color: placeholderColor[colorMode], }} /> diff --git a/hyperglass/ui/components/QueryType.js b/hyperglass/ui/components/QueryType.js index 8e04c47..105470d 100644 --- a/hyperglass/ui/components/QueryType.js +++ b/hyperglass/ui/components/QueryType.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { ChakraSelect } from "app/components"; +import * as React from 'react'; +import { ChakraSelect } from 'app/components'; export const QueryType = ({ queryTypes, onChange, label }) => { const queries = queryTypes @@ -11,7 +11,7 @@ export const QueryType = ({ queryTypes, onChange, label }) => { onChange({ field: "query_type", value: e.value })} + onChange={e => onChange({ field: 'query_type', value: e.value })} options={queries} aria-label={label} /> diff --git a/hyperglass/ui/components/QueryVrf.js b/hyperglass/ui/components/QueryVrf.js index 9d56211..73afba0 100644 --- a/hyperglass/ui/components/QueryVrf.js +++ b/hyperglass/ui/components/QueryVrf.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { ChakraSelect } from "app/components"; +import * as React from 'react'; +import { ChakraSelect } from 'app/components'; export const QueryVrf = ({ vrfs, onChange, label }) => ( ( options={vrfs} name="query_vrf" aria-label={label} - onChange={e => onChange({ field: "query_vrf", value: e.value })} + onChange={e => onChange({ field: 'query_vrf', value: e.value })} /> ); diff --git a/hyperglass/ui/components/RequeryButton.js b/hyperglass/ui/components/RequeryButton.js index c41e4dc..da0d4fb 100644 --- a/hyperglass/ui/components/RequeryButton.js +++ b/hyperglass/ui/components/RequeryButton.js @@ -1,17 +1,9 @@ -import * as React from "react"; -import { Button, Icon, Tooltip } from "@chakra-ui/core"; +import * as React from 'react'; +import { Button, Icon, Tooltip } from '@chakra-ui/core'; -export const RequeryButton = ({ requery, bg = "secondary", ...props }) => ( +export const RequeryButton = ({ requery, bg = 'secondary', ...props }) => ( - diff --git a/hyperglass/ui/components/ResetButton.js b/hyperglass/ui/components/ResetButton.js index 2de3d45..d862840 100644 --- a/hyperglass/ui/components/ResetButton.js +++ b/hyperglass/ui/components/ResetButton.js @@ -1,18 +1,15 @@ -import * as React from "react"; -import { Button } from "@chakra-ui/core"; -import { FiChevronLeft } from "@meronex/icons/fi"; +import * as React from 'react'; +import { Button } from '@chakra-ui/core'; +import { FiChevronLeft } from '@meronex/icons/fi'; -export const ResetButton = React.forwardRef( - ({ isSubmitting, onClick }, ref) => ( - - ) -); +export const ResetButton = React.forwardRef(({ isSubmitting, onClick }, ref) => ( + +)); diff --git a/hyperglass/ui/components/ResolvedTarget.js b/hyperglass/ui/components/ResolvedTarget.js index ef72012..f5b9381 100644 --- a/hyperglass/ui/components/ResolvedTarget.js +++ b/hyperglass/ui/components/ResolvedTarget.js @@ -1,23 +1,14 @@ -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 "app/context"; +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 'app/context'; format.extend(String.prototype, {}); -const labelBg = { dark: "secondary", light: "secondary" }; -const labelBgSuccess = { dark: "success", light: "success" }; +const labelBg = { dark: 'secondary', light: 'secondary' }; +const labelBgSuccess = { dark: 'success', light: 'success' }; export const ResolvedTarget = forwardRef( ({ fqdnTarget, setTarget, queryTarget, families, availVrfs }, ref) => { @@ -25,7 +16,7 @@ export const ResolvedTarget = forwardRef( const config = useConfig(); const labelBgStatus = { true: labelBgSuccess[colorMode], - false: labelBg[colorMode] + false: labelBg[colorMode], }; const dnsUrl = config.web.dns_provider.url; const query4 = families.includes(4); @@ -33,30 +24,26 @@ export const ResolvedTarget = forwardRef( const params = { 4: { url: dnsUrl, - params: { name: fqdnTarget, type: "A" }, - headers: { accept: "application/dns-json" }, + params: { name: fqdnTarget, type: 'A' }, + headers: { accept: 'application/dns-json' }, crossdomain: true, - timeout: 1000 + timeout: 1000, }, 6: { url: dnsUrl, - params: { name: fqdnTarget, type: "AAAA" }, - headers: { accept: "application/dns-json" }, + params: { name: fqdnTarget, type: 'AAAA' }, + headers: { accept: 'application/dns-json' }, crossdomain: true, - timeout: 1000 - } + 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 }); + setTarget({ field: 'query_target', value: overridden }); }; const isSelected = value => { @@ -64,9 +51,8 @@ export const ResolvedTarget = forwardRef( }; const findAnswer = data => { - return data?.Answer?.filter( - answerData => answerData.type === data?.Question[0]?.type - )[0]?.data; + return data?.Answer?.filter(answerData => answerData.type === data?.Question[0]?.type)[0] + ?.data; }; useEffect(() => { @@ -84,16 +70,11 @@ export const ResolvedTarget = forwardRef( isInline w="100%" justifyContent={ - query4 && - data4?.Answer && - query6 && - data6?.Answer && - availVrfs.length > 1 - ? "space-between" - : "flex-end" + query4 && data4?.Answer && query6 && data6?.Answer && availVrfs.length > 1 + ? 'space-between' + : 'flex-end' } - flexWrap="wrap" - > + flexWrap="wrap"> {loading4 || error4 || (query4 && findAnswer(data4) && ( @@ -101,10 +82,9 @@ export const ResolvedTarget = forwardRef( + placement="bottom"> {loading4 && } {error4 && } {findAnswer(data4) && ( - + {findAnswer(data4)} )} @@ -142,10 +114,9 @@ export const ResolvedTarget = forwardRef( + placement="bottom"> {loading6 && } {error6 && } {findAnswer(data6) && ( - + {findAnswer(data6)} )} @@ -176,5 +141,5 @@ export const ResolvedTarget = forwardRef( ))} ); - } + }, ); diff --git a/hyperglass/ui/components/Result.js b/hyperglass/ui/components/Result.js index c6a2007..3637c89 100644 --- a/hyperglass/ui/components/Result.js +++ b/hyperglass/ui/components/Result.js @@ -1,6 +1,6 @@ /** @jsx jsx */ -import { jsx } from "@emotion/core"; -import { forwardRef, useEffect, useState } from "react"; +import { jsx } from '@emotion/core'; +import { forwardRef, useEffect, useState } from 'react'; import { AccordionItem, AccordionHeader, @@ -13,30 +13,30 @@ import { Tooltip, Text, useColorMode, - useTheme -} from "@chakra-ui/core"; -import { BsLightningFill } from "@meronex/icons/bs"; -import styled from "@emotion/styled"; -import useAxios from "axios-hooks"; -import strReplace from "react-string-replace"; -import format from "string-format"; -import { startCase } from "lodash"; -import { useConfig, useMedia } from "app/context"; + useTheme, +} from '@chakra-ui/core'; +import { BsLightningFill } from '@meronex/icons/bs'; +import styled from '@emotion/styled'; +import useAxios from 'axios-hooks'; +import strReplace from 'react-string-replace'; +import format from 'string-format'; +import { startCase } from 'lodash'; +import { useConfig, useMedia } from 'app/context'; import { BGPTable, CacheTimeout, CopyButton, RequeryButton, ResultHeader, - TextOutput -} from "app/components"; -import { tableToString } from "app/util"; + TextOutput, +} from 'app/components'; +import { tableToString } from 'app/util'; format.extend(String.prototype, {}); const FormattedError = ({ keywords, message }) => { - const patternStr = keywords.map(kw => `(${kw})`).join("|"); - const pattern = new RegExp(patternStr, "gi"); + const patternStr = keywords.map(kw => `(${kw})`).join('|'); + const pattern = new RegExp(patternStr, 'gi'); let errorFmt; try { errorFmt = strReplace(message, pattern, match => ( @@ -56,21 +56,21 @@ const AccordionHeaderWrapper = styled(Flex)` background-color: ${props => props.hoverBg}; } &:focus { - box-shadow: "outline"; + box-shadow: 'outline'; } `; const statusMap = { - success: "success", - warning: "warning", - error: "warning", - danger: "error" + success: 'success', + warning: 'warning', + error: 'warning', + danger: 'error', }; -const color = { dark: "white", light: "black" }; -const scrollbar = { dark: "whiteAlpha.300", light: "blackAlpha.300" }; -const scrollbarHover = { dark: "whiteAlpha.400", light: "blackAlpha.400" }; -const scrollbarBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" }; +const color = { dark: 'white', light: 'black' }; +const scrollbar = { dark: 'whiteAlpha.300', light: 'blackAlpha.300' }; +const scrollbarHover = { dark: 'whiteAlpha.400', light: 'blackAlpha.400' }; +const scrollbarBg = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' }; export const Result = forwardRef( ( @@ -83,25 +83,25 @@ export const Result = forwardRef( queryTarget, index, resultsComplete, - setComplete + setComplete, }, - ref + ref, ) => { const config = useConfig(); const theme = useTheme(); const { isSm } = useMedia(); const { colorMode } = useColorMode(); let [{ data, loading, error }, refetch] = useAxios({ - url: "/api/query/", - method: "post", + url: '/api/query/', + method: 'post', data: { query_location: queryLocation, query_type: queryType, query_vrf: queryVrf, - query_target: queryTarget + query_target: queryTarget, }, timeout: timeout, - useCache: false + useCache: false, }); const [isOpen, setOpen] = useState(false); @@ -117,7 +117,7 @@ export const Result = forwardRef( let errorMsg; if (error && error.response?.data?.output) { errorMsg = error.response.data.output; - } else if (error && error.message.startsWith("timeout")) { + } else if (error && error.message.startsWith('timeout')) { errorMsg = config.messages.request_timeout; } else if (error?.response?.statusText) { errorMsg = startCase(error.response.statusText); @@ -130,22 +130,20 @@ export const Result = forwardRef( error && console.error(error); const errorLevel = - (error?.response?.data?.level && - statusMap[error.response?.data?.level]) ?? - "error"; + (error?.response?.data?.level && statusMap[error.response?.data?.level]) ?? 'error'; const structuredDataComponent = { bgp_route: BGPTable, bgp_aspath: BGPTable, bgp_community: BGPTable, ping: TextOutput, - traceroute: TextOutput + traceroute: TextOutput, }; let Output = TextOutput; let copyValue = data?.output; - if (data?.format === "application/json") { + if (data?.format === 'application/json') { Output = structuredDataComponent[queryType]; copyValue = tableToString(queryTarget, data, config); } @@ -168,10 +166,9 @@ export const Result = forwardRef( isDisabled={loading} ref={ref} css={css({ - "&:last-of-type": { borderBottom: "none" }, - "&:first-of-type": { borderTop: "none" } - })(theme)} - > + '&:last-of-type': { borderBottom: 'none' }, + '&:first-of-type': { borderTop: 'none' }, + })(theme)}> + onClick={handleToggle}> - - + + + '-ms-overflow-style': { display: 'none' }, + })(theme)}> - + {!error && data && {data?.output}} {error && ( @@ -241,14 +224,8 @@ export const Result = forwardRef( + justifyContent={['flex-start', 'flex-start', 'flex-end', 'flex-end']} + flex="1 0 auto"> {config.cache.show_text && data && !error && ( <> {!isSm && ( @@ -258,14 +235,13 @@ export const Result = forwardRef( /> )} - + placement="top"> + @@ -282,5 +258,5 @@ export const Result = forwardRef( ); - } + }, ); diff --git a/hyperglass/ui/components/ResultHeader.js b/hyperglass/ui/components/ResultHeader.js index 64531e7..8f9d6a3 100644 --- a/hyperglass/ui/components/ResultHeader.js +++ b/hyperglass/ui/components/ResultHeader.js @@ -1,35 +1,27 @@ -import * as React from "react"; -import { forwardRef } from "react"; -import { - AccordionIcon, - Icon, - Spinner, - Stack, - Text, - Tooltip, - useColorMode -} from "@chakra-ui/core"; -import format from "string-format"; -import { useConfig } from "app/context"; +import * as React from 'react'; +import { forwardRef } from 'react'; +import { AccordionIcon, Icon, Spinner, Stack, Text, Tooltip, useColorMode } from '@chakra-ui/core'; +import format from 'string-format'; +import { useConfig } from 'app/context'; format.extend(String.prototype, {}); const runtimeText = (runtime, text) => { let unit; if (runtime === 1) { - unit = "second"; + unit = 'second'; } else { - unit = "seconds"; + unit = 'seconds'; } const fmt = text.format({ seconds: runtime }); return `${fmt} ${unit}`; }; -const statusColor = { dark: "primary.300", light: "primary.500" }; +const statusColor = { dark: 'primary.300', light: 'primary.500' }; const warningColor = { dark: 300, light: 500 }; const defaultStatusColor = { - dark: "success.300", - light: "success.500" + dark: 'success.300', + light: 'success.500', }; export const ResultHeader = forwardRef( @@ -53,19 +45,13 @@ export const ResultHeader = forwardRef( - + placement="top"> + )} {title} ); - } + }, ); diff --git a/hyperglass/ui/components/Results.js b/hyperglass/ui/components/Results.js index d27cf48..8586f7b 100644 --- a/hyperglass/ui/components/Results.js +++ b/hyperglass/ui/components/Results.js @@ -1,9 +1,9 @@ -import * as React from "react"; -import { useState } from "react"; -import { Accordion, Box, Stack, useTheme } from "@chakra-ui/core"; -import { motion, AnimatePresence } from "framer-motion"; -import { Label, Result } from "app/components"; -import { useConfig, useMedia } from "app/context"; +import * as React from 'react'; +import { useState } from 'react'; +import { Accordion, Box, Stack, useTheme } from '@chakra-ui/core'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Label, Result } from 'app/components'; +import { useConfig, useMedia } from 'app/context'; const AnimatedResult = motion.custom(Result); const AnimatedLabel = motion.custom(Label); @@ -13,40 +13,40 @@ const labelInitial = { sm: { opacity: 0, x: -100 }, md: { opacity: 0, x: -100 }, lg: { opacity: 0, x: -100 }, - xl: { opacity: 0, x: -100 } + xl: { opacity: 0, x: -100 }, }, center: { sm: { opacity: 0 }, md: { opacity: 0 }, lg: { opacity: 0 }, - xl: { opacity: 0 } + xl: { opacity: 0 }, }, right: { sm: { opacity: 0, x: 100 }, md: { opacity: 0, x: 100 }, lg: { opacity: 0, x: 100 }, - xl: { opacity: 0, x: 100 } - } + xl: { opacity: 0, x: 100 }, + }, }; const labelAnimate = { left: { sm: { opacity: 1, x: 0 }, md: { opacity: 1, x: 0 }, lg: { opacity: 1, x: 0 }, - xl: { opacity: 1, x: 0 } + xl: { opacity: 1, x: 0 }, }, center: { sm: { opacity: 1 }, md: { opacity: 1 }, lg: { opacity: 1 }, - xl: { opacity: 1 } + xl: { opacity: 1 }, }, right: { sm: { opacity: 1, x: 0 }, md: { opacity: 1, x: 0 }, lg: { opacity: 1, x: 0 }, - xl: { opacity: 1, x: 0 } - } + xl: { opacity: 1, x: 0 }, + }, }; export const Results = ({ @@ -61,20 +61,18 @@ export const Results = ({ const theme = useTheme(); const { mediaSize } = useMedia(); const matchedVrf = - config.vrfs.filter(v => v.id === queryVrf)[0] ?? - config.vrfs.filter(v => v.id === "default")[0]; + config.vrfs.filter(v => v.id === queryVrf)[0] ?? config.vrfs.filter(v => v.id === 'default')[0]; const [resultsComplete, setComplete] = useState(null); return ( <> + {...props}> {queryLocation && ( @@ -87,7 +85,7 @@ export const Results = ({ label={config.web.text.query_type} value={config.queries[queryType].display_name} valueBg={theme.colors.cyan[500]} - fontSize={["xs", "sm", "sm", "sm"]} + fontSize={['xs', 'sm', 'sm', 'sm']} /> )} @@ -115,7 +113,7 @@ export const Results = ({ + overflow="hidden"> + exit={{ opacity: 0, y: 300 }}> {queryLocation && queryLocation.map((loc, i) => ( diff --git a/hyperglass/ui/components/SubmitButton.js b/hyperglass/ui/components/SubmitButton.js index e21e7b6..ccef50a 100644 --- a/hyperglass/ui/components/SubmitButton.js +++ b/hyperglass/ui/components/SubmitButton.js @@ -1,63 +1,57 @@ -import * as React from "react"; -import { forwardRef } from "react"; -import { - Box, - PseudoBox, - Spinner, - useColorMode, - useTheme -} from "@chakra-ui/core"; -import { FiSearch } from "@meronex/icons/fi"; -import { opposingColor } from "app/util"; +import * as React from 'react'; +import { forwardRef } from 'react'; +import { Box, PseudoBox, Spinner, useColorMode, useTheme } from '@chakra-ui/core'; +import { FiSearch } from '@meronex/icons/fi'; +import { opposingColor } from 'app/util'; const btnProps = { - display: "inline-flex", - appearance: "none", - alignItems: "center", - justifyContent: "center", - transition: "all 250ms", - userSelect: "none", - position: "relative", - whiteSpace: "nowrap", - verticalAlign: "middle", - lineHeight: "1.2", - outline: "none", - as: "button", - type: "submit", - borderRadius: "md", - fontWeight: "semibold" + display: 'inline-flex', + appearance: 'none', + alignItems: 'center', + justifyContent: 'center', + transition: 'all 250ms', + userSelect: 'none', + position: 'relative', + whiteSpace: 'nowrap', + verticalAlign: 'middle', + lineHeight: '1.2', + outline: 'none', + as: 'button', + type: 'submit', + borderRadius: 'md', + fontWeight: 'semibold', }; const btnSizeMap = { lg: { height: 12, minWidth: 12, - fontSize: "lg", - px: 6 + fontSize: 'lg', + px: 6, }, md: { height: 10, minWidth: 10, - fontSize: "md", - px: 4 + fontSize: 'md', + px: 4, }, sm: { height: 8, minWidth: 8, - fontSize: "sm", - px: 3 + fontSize: 'sm', + px: 3, }, xs: { height: 6, minWidth: 6, - fontSize: "xs", - px: 2 - } + fontSize: 'xs', + px: 2, + }, }; -const btnBg = { dark: "primary.300", light: "primary.500" }; -const btnBgActive = { dark: "primary.400", light: "primary.600" }; -const btnBgHover = { dark: "primary.200", light: "primary.400" }; +const btnBg = { dark: 'primary.300', light: 'primary.500' }; +const btnBgActive = { dark: 'primary.400', light: 'primary.600' }; +const btnBgHover = { dark: 'primary.200', light: 'primary.400' }; export const SubmitButton = forwardRef( ( @@ -66,12 +60,12 @@ export const SubmitButton = forwardRef( isDisabled = false, isActive = false, isFullWidth = false, - size = "lg", + size = 'lg', loadingText, children, ...props }, - ref + ref, ) => { const _isDisabled = isDisabled || isLoading; const { colorMode } = useColorMode(); @@ -86,8 +80,8 @@ export const SubmitButton = forwardRef( disabled={_isDisabled} aria-disabled={_isDisabled} aria-label="Submit Query" - width={isFullWidth ? "full" : undefined} - data-active={isActive ? "true" : undefined} + width={isFullWidth ? 'full' : undefined} + data-active={isActive ? 'true' : undefined} bg={btnBg[colorMode]} color={btnColor} _active={{ bg: btnBgActive[colorMode], color: btnColorActive }} @@ -95,11 +89,10 @@ export const SubmitButton = forwardRef( _focus={{ boxShadow: theme.shadows.outline }} {...btnProps} {...btnSize} - {...props} - > + {...props}> {isLoading ? ( ); - } + }, ); diff --git a/hyperglass/ui/components/Table/Table.js b/hyperglass/ui/components/Table/Table.js index 9ef90cb..3c5796e 100644 --- a/hyperglass/ui/components/Table/Table.js +++ b/hyperglass/ui/components/Table/Table.js @@ -1,16 +1,16 @@ -import * as React from "react"; -import { useMemo } from "react"; -import { Flex, Icon, Text } from "@chakra-ui/core"; -import { usePagination, useSortBy, useTable } from "react-table"; -import { useMedia } from "app/context"; -import { CardBody, CardFooter, CardHeader } from "app/components"; -import { TableMain } from "./TableMain"; -import { TableCell } from "./TableCell"; -import { TableHead } from "./TableHead"; -import { TableRow } from "./TableRow"; -import { TableBody } from "./TableBody"; -import { TableIconButton } from "./TableIconButton"; -import { TableSelectShow } from "./TableSelectShow"; +import * as React from 'react'; +import { useMemo } from 'react'; +import { Flex, Icon, Text } from '@chakra-ui/core'; +import { usePagination, useSortBy, useTable } from 'react-table'; +import { useMedia } from 'app/context'; +import { CardBody, CardFooter, CardHeader } from 'app/components'; +import { TableMain } from './TableMain'; +import { TableCell } from './TableCell'; +import { TableHead } from './TableHead'; +import { TableRow } from './TableRow'; +import { TableBody } from './TableBody'; +import { TableIconButton } from './TableIconButton'; +import { TableSelectShow } from './TableSelectShow'; export const Table = ({ columns, @@ -24,7 +24,7 @@ export const Table = ({ cellRender = null, rowHighlightProp, rowHighlightBg, - rowHighlightColor + rowHighlightColor, }) => { const tableColumns = useMemo(() => columns, [columns]); @@ -34,9 +34,9 @@ export const Table = ({ () => ({ minWidth: 100, width: 150, - maxWidth: 300 + maxWidth: 300, }), - [] + [], ); let hiddenColumns = []; @@ -60,7 +60,7 @@ export const Table = ({ nextPage, previousPage, setPageSize, - state: { pageIndex, pageSize } + state: { pageIndex, pageSize }, } = useTable( { columns: tableColumns, @@ -69,11 +69,11 @@ export const Table = ({ initialState: { pageIndex: 0, pageSize: initialPageSize, - hiddenColumns: hiddenColumns - } + hiddenColumns: hiddenColumns, + }, }, useSortBy, - usePagination + usePagination, ); return ( @@ -82,20 +82,16 @@ export const Table = ({ {headerGroups.map(headerGroup => ( - + {headerGroup.headers.map(column => ( + {...column.getSortByToggleProps()}> - {column.render("Header")} + {column.render('Header')} {column.isSorted ? ( column.isSortedDesc ? ( @@ -104,7 +100,7 @@ export const Table = ({ ) ) : ( - "" + '' )} ))} @@ -124,8 +120,7 @@ export const Table = ({ highlight={row.values[rowHighlightProp] ?? false} highlightBg={rowHighlightBg} highlightColor={rowHighlightColor} - {...row.getRowProps()} - > + {...row.getRowProps()}> {row.cells.map((cell, i) => { return ( - {cell.render(cellRender ?? "Cell")} + {...cell.getCellProps()}> + {cell.render(cellRender ?? 'Cell')} ); })} - ) + ), )} @@ -161,10 +155,10 @@ export const Table = ({ - Page{" "} + Page{' '} {pageIndex + 1} of {pageOptions.length} - {" "} + {' '} {!(isSm || isMd) && ( ( + {...props}> {children} ); diff --git a/hyperglass/ui/components/Table/TableCell.js b/hyperglass/ui/components/Table/TableCell.js index acbd3f3..15dc517 100644 --- a/hyperglass/ui/components/Table/TableCell.js +++ b/hyperglass/ui/components/Table/TableCell.js @@ -1,18 +1,12 @@ -import * as React from "react"; -import { Box, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { Box, useColorMode } from '@chakra-ui/core'; const cellBorder = { - dark: { borderLeft: "1px", borderLeftColor: "whiteAlpha.100" }, - light: { borderLeft: "1px", borderLeftColor: "blackAlpha.100" } + dark: { borderLeft: '1px', borderLeftColor: 'whiteAlpha.100' }, + light: { borderLeft: '1px', borderLeftColor: 'blackAlpha.100' }, }; -export const TableCell = ({ - bordersVertical = [false, 0, 0], - align, - cell, - children, - ...props -}) => { +export const TableCell = ({ bordersVertical = [false, 0, 0], align, cell, children, ...props }) => { const { colorMode } = useColorMode(); const [doVerticalBorders, index] = bordersVertical; let borderProps = {}; @@ -28,8 +22,7 @@ export const TableCell = ({ whiteSpace="nowrap" textAlign={align} {...borderProps} - {...props} - > + {...props}> {children} ); diff --git a/hyperglass/ui/components/Table/TableHead.js b/hyperglass/ui/components/Table/TableHead.js index d2faa2c..6c5432b 100644 --- a/hyperglass/ui/components/Table/TableHead.js +++ b/hyperglass/ui/components/Table/TableHead.js @@ -1,18 +1,12 @@ -import * as React from "react"; -import { Box, useColorMode } from "@chakra-ui/core"; +import * as React from 'react'; +import { Box, useColorMode } from '@chakra-ui/core'; -const bg = { dark: "whiteAlpha.100", light: "blackAlpha.100" }; +const bg = { dark: 'whiteAlpha.100', light: 'blackAlpha.100' }; export const TableHead = ({ children, ...props }) => { const { colorMode } = useColorMode(); return ( - + {children} ); diff --git a/hyperglass/ui/components/Table/TableIconButton.js b/hyperglass/ui/components/Table/TableIconButton.js index 063291e..cd845e4 100644 --- a/hyperglass/ui/components/Table/TableIconButton.js +++ b/hyperglass/ui/components/Table/TableIconButton.js @@ -1,14 +1,7 @@ -import * as React from "react"; -import { IconButton } from "@chakra-ui/core"; +import * as React from 'react'; +import { IconButton } from '@chakra-ui/core'; -export const TableIconButton = ({ - icon, - onClick, - isDisabled, - color, - children, - ...props -}) => ( +export const TableIconButton = ({ icon, onClick, isDisabled, color, children, ...props }) => ( + {...props}> {children} ); diff --git a/hyperglass/ui/components/Table/TableMain.js b/hyperglass/ui/components/Table/TableMain.js index c927ca9..4ab4c5e 100644 --- a/hyperglass/ui/components/Table/TableMain.js +++ b/hyperglass/ui/components/Table/TableMain.js @@ -1,10 +1,10 @@ /** @jsx jsx */ -import { jsx } from "@emotion/core"; -import { Box, css, useTheme, useColorMode } from "@chakra-ui/core"; +import { jsx } from '@emotion/core'; +import { Box, css, useTheme, useColorMode } from '@chakra-ui/core'; -const scrollbar = { dark: "whiteAlpha.300", light: "blackAlpha.300" }; -const scrollbarHover = { dark: "whiteAlpha.400", light: "blackAlpha.400" }; -const scrollbarBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" }; +const scrollbar = { dark: 'whiteAlpha.300', light: 'blackAlpha.300' }; +const scrollbarHover = { dark: 'whiteAlpha.400', light: 'blackAlpha.400' }; +const scrollbarBg = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' }; export const TableMain = ({ children, ...props }) => { const theme = useTheme(); @@ -14,24 +14,23 @@ export const TableMain = ({ children, ...props }) => { as="table" display="block" css={css({ - "&::-webkit-scrollbar": { height: "5px" }, - "&::-webkit-scrollbar-track": { - backgroundColor: scrollbarBg[colorMode] + '&::-webkit-scrollbar': { height: '5px' }, + '&::-webkit-scrollbar-track': { + backgroundColor: scrollbarBg[colorMode], }, - "&::-webkit-scrollbar-thumb": { - backgroundColor: scrollbar[colorMode] + '&::-webkit-scrollbar-thumb': { + backgroundColor: scrollbar[colorMode], }, - "&::-webkit-scrollbar-thumb:hover": { - backgroundColor: scrollbarHover[colorMode] + '&::-webkit-scrollbar-thumb:hover': { + backgroundColor: scrollbarHover[colorMode], }, - "-ms-overflow-style": { display: "none" } + '-ms-overflow-style': { display: 'none' }, })(theme)} overflowX="auto" borderRadius="md" boxSizing="border-box" - {...props} - > + {...props}> {children} ); diff --git a/hyperglass/ui/components/Table/TableRow.js b/hyperglass/ui/components/Table/TableRow.js index 23e82e5..a411e4c 100644 --- a/hyperglass/ui/components/Table/TableRow.js +++ b/hyperglass/ui/components/Table/TableRow.js @@ -1,19 +1,19 @@ -import * as React from "react"; -import { PseudoBox, useColorMode, useTheme } from "@chakra-ui/core"; -import { opposingColor } from "app/util"; +import * as React from 'react'; +import { PseudoBox, useColorMode, useTheme } from '@chakra-ui/core'; +import { opposingColor } from 'app/util'; -const hoverBg = { dark: "whiteAlpha.50", light: "blackAlpha.50" }; -const bgStripe = { dark: "whiteAlpha.50", light: "blackAlpha.50" }; +const hoverBg = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' }; +const bgStripe = { dark: 'whiteAlpha.50', light: 'blackAlpha.50' }; const rowBorder = { - dark: { borderTop: "1px", borderTopColor: "whiteAlpha.100" }, - light: { borderTop: "1px", borderTopColor: "blackAlpha.100" } + dark: { borderTop: '1px', borderTopColor: 'whiteAlpha.100' }, + light: { borderTop: '1px', borderTopColor: 'blackAlpha.100' }, }; -const alphaMap = { dark: "200", light: "100" }; -const alphaMapHover = { dark: "100", light: "200" }; +const alphaMap = { dark: '200', light: '100' }; +const alphaMapHover = { dark: '100', light: '200' }; export const TableRow = ({ highlight = false, - highlightBg = "primary", + highlightBg = 'primary', doStripe = false, doHorizontalBorders = false, index = 0, @@ -31,23 +31,21 @@ export const TableRow = ({ } const color = highlight ? opposingColor(theme, bg) : null; - const borderProps = - doHorizontalBorders && index !== 0 ? rowBorder[colorMode] : {}; + const borderProps = doHorizontalBorders && index !== 0 ? rowBorder[colorMode] : {}; return ( + {...props}> {children} ); diff --git a/hyperglass/ui/components/Table/TableSelectShow.js b/hyperglass/ui/components/Table/TableSelectShow.js index 231fe4d..be6cdab 100644 --- a/hyperglass/ui/components/Table/TableSelectShow.js +++ b/hyperglass/ui/components/Table/TableSelectShow.js @@ -1,5 +1,5 @@ -import * as React from "react"; -import { Select } from "@chakra-ui/core"; +import * as React from 'react'; +import { Select } from '@chakra-ui/core'; export const TableSelectShow = ({ value, onChange, children, ...props }) => (