mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

accessibility improvements

Browse Source
This commit is contained in:
checktheroads
2020-05-02 16:09:03 -07:00
parent 51d3804d07
commit 07508b4b02
16 changed files with 2482 additions and 2485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
hyperglass/ui/components/ChakraSelect.js
View File

@@ -58,8 +58,8 @@ const ChakraSelect = React.forwardRef(
);
const selectedDisabled = theme.colors.whiteAlpha[400];
const placeholderColor = {
dark: theme.colors.whiteAlpha[400],
light: theme.colors.gray[400]
dark: theme.colors.whiteAlpha[700],
light: theme.colors.gray[600]
};
const menuBg = { dark: theme.colors.black, light: theme.colors.white };
const menuColor = {

24
hyperglass/ui/components/Footer.js
View File

@@ -13,7 +13,10 @@ const Footer = () => {
const theme = useTheme();
const config = useConfig();
const { colorMode } = useColorMode();
const footerBg = { light: theme.colors.blackAlpha[50], dark: theme.colors.whiteAlpha[100] };
const footerBg = {
light: theme.colors.blackAlpha[50],
dark: theme.colors.whiteAlpha[100]
};
const footerColor = { light: theme.colors.black, dark: theme.colors.white };
const contentBorder = {
light: theme.colors.blackAlpha[100],
@@ -85,12 +88,20 @@ const Footer = () => {
justifyContent="space-between"
>
{config.web.terms.enable && (
<FooterButton side="left" onClick={() => handleCollapse("terms")}>
<FooterButton
side="left"
onClick={() => handleCollapse("terms")}
aria-label={config.web.terms.title}
>
{config.web.terms.title}
</FooterButton>
)}
{config.web.help_menu.enable && (
<FooterButton side="left" onClick={() => handleCollapse("help")}>
<FooterButton
side="left"
onClick={() => handleCollapse("help")}
aria-label={config.web.help_menu.title}
>
{config.web.help_menu.title}
</FooterButton>
)}
@@ -103,7 +114,11 @@ const Footer = () => {
p={0}
/>
{config.web.credit.enable && (
<FooterButton side="right" onClick={() => handleCollapse("credit")}>
<FooterButton
side="right"
onClick={() => handleCollapse("credit")}
aria-label="Powered by hyperglass"
>
<FiCode />
</FooterButton>
)}
@@ -111,6 +126,7 @@ const Footer = () => {
<FooterButton
as="a"
href={extUrl}
aria-label={config.web.external_link.title}
target="_blank"
rel="noopener noreferrer"
variant="ghost"

9
hyperglass/ui/components/FooterButton.js
View File

@@ -4,7 +4,8 @@ import { motion } from "framer-motion";
const AnimatedFlex = motion.custom(Flex);
export default React.forwardRef(({ onClick, side, children, ...props }, ref) => {
const FooterButton = React.forwardRef(
({ onClick, side, children, ...props }, ref) => {
return (
<AnimatedFlex
p={0}
@@ -24,4 +25,8 @@ export default React.forwardRef(({ onClick, side, children, ...props }, ref) =>
</Button>
</AnimatedFlex>
);
});
}
);
FooterButton.displayName = "FooterButton";
export default FooterButton;

10
hyperglass/ui/components/FormField.js
View File

@@ -1,5 +1,11 @@
import React from "react";
import { Flex, FormControl, FormLabel, FormErrorMessage, useColorMode } from "@chakra-ui/core";
import {
Flex,
FormControl,
FormLabel,
FormErrorMessage,
useColorMode
} from "@chakra-ui/core";
export default ({
label,
@@ -15,7 +21,7 @@ export default ({
...props
}) => {
const { colorMode } = useColorMode();
const labelColor = { dark: "whiteAlpha.600", light: "blackAlpha.600" };
const labelColor = { dark: "whiteAlpha.700", light: "blackAlpha.700" };
return (
<FormControl
as={Flex}

67
hyperglass/ui/components/HyperglassForm.js
View File

@@ -18,19 +18,27 @@ import useConfig from "~/components/HyperglassProvider";
format.extend(String.prototype, {});
const formSchema = (config) =>
const formSchema = config =>
yup.object().shape({
query_location: yup
.array()
.of(yup.string())
.required(config.messages.no_input.format({ field: config.web.text.query_location })),
.required(
config.messages.no_input.format({
field: config.web.text.query_location
})
),
query_type: yup
.string()
.required(config.messages.no_input.format({ field: config.web.text.query_type })),
.required(
config.messages.no_input.format({ field: config.web.text.query_type })
),
query_vrf: yup.string(),
query_target: yup
.string()
.required(config.messages.no_input.format({ field: config.web.text.query_target })),
.required(
config.messages.no_input.format({ field: config.web.text.query_target })
)
});
const FormRow = ({ children, ...props }) => (
@@ -46,11 +54,21 @@ const FormRow = ({ children, ...props }) => (
);
const HyperglassForm = React.forwardRef(
({ isSubmitting, setSubmitting, setFormData, greetingAck, setGreetingAck, ...props }, ref) => {
(
{
isSubmitting,
setSubmitting,
setFormData,
greetingAck,
setGreetingAck,
...props
},
ref
) => {
const config = useConfig();
const { handleSubmit, register, unregister, setValue, errors } = useForm({
validationSchema: formSchema(config),
defaultValues: { query_vrf: "default", query_target: "" },
defaultValues: { query_vrf: "default", query_target: "" }
});
const [queryLocation, setQueryLocation] = useState([]);
@@ -61,7 +79,7 @@ const HyperglassForm = React.forwardRef(
const [fqdnTarget, setFqdnTarget] = useState("");
const [displayTarget, setDisplayTarget] = useState("");
const [families, setFamilies] = useState([]);
const onSubmit = (values) => {
const onSubmit = values => {
if (!greetingAck && config.web.greeting.required) {
window.location.reload(false);
setGreetingAck(false);
@@ -71,16 +89,16 @@ const HyperglassForm = React.forwardRef(
}
};
const handleLocChange = (locObj) => {
const handleLocChange = locObj => {
setQueryLocation(locObj.value);
const allVrfs = [];
const deviceVrfs = [];
locObj.value.map((loc) => {
locObj.value.map(loc => {
const locVrfs = [];
config.devices[loc].vrfs.map((vrf) => {
config.devices[loc].vrfs.map(vrf => {
locVrfs.push({
label: vrf.display_name,
value: vrf.id,
value: vrf.id
});
deviceVrfs.push([{ id: vrf.id, ipv4: vrf.ipv4, ipv6: vrf.ipv6 }]);
});
@@ -89,17 +107,19 @@ const HyperglassForm = React.forwardRef(
const intersecting = lodash.intersectionWith(...allVrfs, lodash.isEqual);
setAvailVrfs(intersecting);
!intersecting.includes(queryVrf) && queryVrf !== "default" && setQueryVrf("default");
!intersecting.includes(queryVrf) &&
queryVrf !== "default" &&
setQueryVrf("default");
let ipv4 = 0;
let ipv6 = 0;
deviceVrfs.length !== 0 &&
intersecting.length !== 0 &&
deviceVrfs
.filter((v) => intersecting.every((i) => i.id === v.id))
.filter(v => intersecting.every(i => i.id === v.id))
.reduce((a, b) => a.concat(b))
.filter((v) => v.id === "default")
.map((v) => {
.filter(v => v.id === "default")
.map(v => {
v.ipv4 === true && ipv4++;
v.ipv6 === true && ipv6++;
});
@@ -114,7 +134,7 @@ const HyperglassForm = React.forwardRef(
}
};
const handleChange = (e) => {
const handleChange = e => {
setValue(e.field, e.value);
e.field === "query_location"
? handleLocChange(e)
@@ -160,7 +180,11 @@ const HyperglassForm = React.forwardRef(
name="query_location"
error={errors.query_location}
>
<QueryLocation onChange={handleChange} locations={config.networks} />
<QueryLocation
onChange={handleChange}
locations={config.networks}
label={config.web.text.query_location}
/>
</FormField>
<FormField
label={config.web.text.query_type}
@@ -170,7 +194,11 @@ const HyperglassForm = React.forwardRef(
vrfContent && <HelpModal item={vrfContent} name="query_type" />
}
>
<QueryType onChange={handleChange} queryTypes={config.queries.list} />
<QueryType
onChange={handleChange}
queryTypes={config.queries.list}
label={config.web.text.query_type}
/>
</FormField>
</FormRow>
<FormRow>
@@ -181,7 +209,7 @@ const HyperglassForm = React.forwardRef(
error={errors.query_vrf}
>
<QueryVrf
placeholder={config.web.text.query_vrf}
label={config.web.text.query_vrf}
vrfs={availVrfs}
onChange={handleChange}
/>
@@ -207,6 +235,7 @@ const HyperglassForm = React.forwardRef(
{queryType === "bgp_community" &&
config.queries.bgp_community.mode === "select" ? (
<CommunitySelect
label={config.queries.bgp_community.display_name}
name="query_target"
register={register}
unregister={unregister}

18
hyperglass/ui/components/QueryLocation.js
View File

@@ -1,15 +1,15 @@
import React from "react";
import ChakraSelect from "~/components/ChakraSelect";
const buildLocations = (networks) => {
const buildLocations = networks => {
const locations = [];
networks.map((net) => {
networks.map(net => {
const netLocations = [];
net.locations.map((loc) => {
net.locations.map(loc => {
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 });
@@ -17,12 +17,12 @@ const buildLocations = (networks) => {
return locations;
};
export default ({ locations, onChange }) => {
const QueryLocation = ({ locations, onChange, label }) => {
const options = buildLocations(locations);
const handleChange = (e) => {
const handleChange = e => {
const selected = [];
e &&
e.map((sel) => {
e.map(sel => {
selected.push(sel.value);
});
onChange({ field: "query_location", value: selected });
@@ -35,6 +35,10 @@ export default ({ locations, onChange }) => {
options={options}
isMulti
closeMenuOnSelect={false}
aria-label={label}
/>
);
};
QueryLocation.displayName = "QueryLocation";
export default QueryLocation;

25
hyperglass/ui/components/QueryTarget.js
View File

@@ -1,19 +1,13 @@
import React, { useEffect } from "react";
import styled from "@emotion/styled";
import * as React from "react";
import { useEffect } from "react";
import { Input, useColorMode } from "@chakra-ui/core";
const StyledInput = styled(Input)`
&::placeholder {
color: ${(props) => props.placeholderColor};
}
`;
const fqdnPattern = /^(?!:\/\/)([a-zA-Z0-9]+\.)?[a-zA-Z0-9][a-zA-Z0-9-]+\.[a-zA-Z]{2,6}?$/gim;
const bg = { dark: "whiteAlpha.100", light: "white" };
const color = { dark: "whiteAlpha.800", light: "gray.400" };
const border = { dark: "whiteAlpha.50", light: "gray.100" };
const placeholderColor = { dark: "whiteAlpha.400", light: "gray.400" };
const placeholderColor = { dark: "whiteAlpha.700", light: "gray.600" };
const QueryTarget = ({
placeholder,
@@ -25,7 +19,7 @@ const QueryTarget = ({
setTarget,
resolveTarget,
displayValue,
setDisplayValue,
setDisplayValue
}) => {
const { colorMode } = useColorMode();
@@ -36,11 +30,11 @@ const QueryTarget = ({
setFqdn(false);
}
};
const handleChange = (e) => {
const handleChange = e => {
setDisplayValue(e.target.value);
setTarget({ field: name, value: e.target.value });
};
const handleKeyDown = (e) => {
const handleKeyDown = e => {
if ([9, 13].includes(e.keyCode)) {
handleBlur();
}
@@ -52,8 +46,9 @@ const QueryTarget = ({
return (
<>
<input hidden readOnly name={name} ref={register} value={value} />
<StyledInput
<Input
size="lg"
aria-label={placeholder}
name="query_target_display"
bg={bg[colorMode]}
onBlur={handleBlur}
@@ -65,7 +60,9 @@ const QueryTarget = ({
color={color[colorMode]}
placeholder={placeholder}
borderColor={border[colorMode]}
placeholderColor={placeholderColor[colorMode]}
_placeholder={{
color: placeholderColor[colorMode]
}}
/>
</>
);

6
hyperglass/ui/components/QueryType.js
View File

@@ -1,7 +1,7 @@
import React from "react";
import ChakraSelect from "~/components/ChakraSelect";
export default ({ queryTypes, onChange }) => {
const QueryType = ({ queryTypes, onChange, label }) => {
const queries = queryTypes
.filter(q => q.enable === true)
.map(q => {
@@ -13,6 +13,10 @@ export default ({ queryTypes, onChange }) => {
name="query_type"
onChange={e => onChange({ field: "query_type", value: e.value })}
options={queries}
aria-label={label}
/>
);
};
QueryType.displayName = "QueryType";
export default QueryType;

6
hyperglass/ui/components/QueryVrf.js
View File

@@ -1,13 +1,17 @@
import React from "react";
import ChakraSelect from "~/components/ChakraSelect";
export default ({ vrfs, onChange }) => {
const QueryVrf = ({ vrfs, onChange, label }) => {
return (
<ChakraSelect
size="lg"
onChange={e => onChange({ field: "query_vrf", value: e.value })}
name="query_vrf"
options={vrfs}
aria-label={label}
/>
);
};
QueryVrf.displayName = "QueryVrf";
export default QueryVrf;

29
hyperglass/ui/components/SubmitButton.js
View File

@@ -1,5 +1,11 @@
import React from "react";
import { Box, PseudoBox, Spinner, useColorMode, useTheme } from "@chakra-ui/core";
import {
Box,
PseudoBox,
Spinner,
useColorMode,
useTheme
} from "@chakra-ui/core";
import { FiSearch } from "react-icons/fi";
import { opposingColor } from "~/util";
@@ -48,7 +54,7 @@ const btnSizeMap = {
}
};
export default React.forwardRef(
const SubmitButton = React.forwardRef(
(
{
isLoading = false,
@@ -65,9 +71,18 @@ export default React.forwardRef(
const _isDisabled = isDisabled || isLoading;
const { colorMode } = useColorMode();
const theme = useTheme();
const btnBg = { dark: theme.colors.primary[300], light: theme.colors.primary[500] };
const btnBgActive = { dark: theme.colors.primary[400], light: theme.colors.primary[600] };
const btnBgHover = { dark: theme.colors.primary[200], light: theme.colors.primary[400] };
const btnBg = {
dark: theme.colors.primary[300],
light: theme.colors.primary[500]
};
const btnBgActive = {
dark: theme.colors.primary[400],
light: theme.colors.primary[600]
};
const btnBgHover = {
dark: theme.colors.primary[200],
light: theme.colors.primary[400]
};
const btnColor = opposingColor(theme, btnBg[colorMode]);
const btnColorActive = opposingColor(theme, btnBgActive[colorMode]);
const btnColorHover = opposingColor(theme, btnBgHover[colorMode]);
@@ -77,6 +92,7 @@ export default React.forwardRef(
ref={ref}
disabled={_isDisabled}
aria-disabled={_isDisabled}
aria-label="Submit Query"
width={isFullWidth ? "full" : undefined}
data-active={isActive ? "true" : undefined}
bg={btnBg[colorMode]}
@@ -109,3 +125,6 @@ export default React.forwardRef(
);
}
);
SubmitButton.displayName = "SubmitButton";
export default SubmitButton;

35
hyperglass/ui/components/Table/makeData.js
View File

@@ -1,35 +0,0 @@
import { generate } from "namor";
const range = (len) => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
};
export const newPerson = () => {
const statusChance = Math.random();
return {
name: generate({ words: 2, numbers: 0 }),
age: Math.floor(Math.random() * 30),
visits: Math.floor(Math.random() * 100),
progress: Math.floor(Math.random() * 100),
status:
statusChance > 0.66 ? "relationship" : statusChance > 0.33 ? "complicated" : "single",
};
};
export default function makeData(...lens) {
const makeDataLevel = (depth = 0) => {
const len = lens[depth];
return range(len).map((d) => {
return {
...newPerson(),
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
};
});
};
return makeDataLevel();
}

10
hyperglass/ui/package.json vendored
View File

@@ -8,10 +8,14 @@
"scripts": {
"dev": "node nextdev",
"build": "next build && next export -o ../hyperglass/static/ui",
"start": "next start"
"start": "next start",
"clean": "rimraf --no-glob ./.next ./out",
"check:es:build": "es-check es5 './.next/static/**/*.js' -v",
"check:es:export": "es-check es5 './out/**/*.js' -v"
},
"browserslist": "> 0.25%, not dead",
"dependencies": {
"@chakra-ui/core": "^0.6.1",
"@chakra-ui/core": "^0.7.0",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@styled-system/should-forward-prop": "^5.1.5",
@@ -22,7 +26,6 @@
"emotion-theming": "^10.0.27",
"framer-motion": "^1.10.0",
"lodash": "^4.17.15",
"namor": "^2.0.2",
"next": "^9.3.1",
"react": "^16.13.1",
"react-countdown": "^2.2.1",
@@ -43,6 +46,7 @@
"@typescript-eslint/eslint-plugin": "^2.24.0",
"@typescript-eslint/parser": "^2.24.0",
"babel-eslint": "^10.1.0",
"es-check": "^5.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.0",

5
hyperglass/ui/pages/_document.js
View File

@@ -9,10 +9,11 @@ class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<Html lang="en">
<Head></Head>
<body>
<script src="noflash.js" />
<Main />
<NextScript />
</body>

3211
hyperglass/ui/yarn.lock vendored
View File

File diff suppressed because it is too large Load Diff