witine/lookingglass
1
0
Fork 0
forked from mirrors/thatmattlove-hyperglass
Code Issues Pull requests Releases Activity

improve site accessibility; add new parsing_error docs

Browse source
This commit is contained in:
checktheroads 2020-06-03 08:32:12 -07:00
parent f3f280cea8
commit f54fd5df50
5 changed files with 135 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/docs/messages.mdx
View file

@ -24,11 +24,12 @@ All user-facing status messages can be customized if needed.
| `invalid_field` | String | `'{input} is an invalid {field}.'` | Displayed when a query field contains an invalid or unsupported value. `{input}` and `{field}` will be replaced with the invalid input value and corresponding field name. | | `invalid_field` | String | `'{input} is an invalid {field}.'` | Displayed when a query field contains an invalid or unsupported value. `{input}` and `{field}` will be replaced with the invalid input value and corresponding field name. |
| `invalid_input` | String | `'{target} is not a valid {query_type} target.'` | Displayed when a query target's value is invalid in relation to the corresponding query type. `{target}` and `{query_type}` will be replaced with the invalid target and corresponding query type. | | `invalid_input` | String | `'{target} is not a valid {query_type} target.'` | Displayed when a query target's value is invalid in relation to the corresponding query type. `{target}` and `{query_type}` will be replaced with the invalid target and corresponding query type. |
| `no_input` | String | `'{field} must be specified.'` | Displayed when no a required field is not specified. `{field}` will be replaced with the `display_name` of the field that was omitted. | | `no_input` | String | `'{field} must be specified.'` | Displayed when no a required field is not specified. `{field}` will be replaced with the `display_name` of the field that was omitted. |
| `no_output` | String | `'No output.'` | Displayed when hyperglass can connect to a device and execute a query, but the response is empty. | | `no_output` | String | `'The query completed, but no matching results were found.'` | Displayed when hyperglass can connect to a device and execute a query, but the response is empty. |
| `no_response` | String | `'No response.'` | Displayed when hyperglass can connect to a device, but no output is able to be read. Seeing this error may indicate a bug in hyperglass or one of its dependencies. If you see this in the wild, try enabling <Link to="/docs/configuration#global-settings"><Code>debug</Code></Link> mode and review the logs to pinpoint the source of the error. | | `no_response` | String | `'No response.'` | Displayed when hyperglass can connect to a device, but no output is able to be read. Seeing this error may indicate a bug in hyperglass or one of its dependencies. If you see this in the wild, try enabling <Link to="/docs/configuration#global-settings"><Code>debug</Code></Link> mode and review the logs to pinpoint the source of the error. |
| `parsing_error` | String | `'An error occurred while parsing the query output.'` | Displayed when hyperglass can connect to a device and execute a query, but the response cannot be parsed. |
| `request_timeout` | String | `'Request timed out.'` | Displayed when the <Link to="/docs/configuration#global-settings"><Code>request_timeout</Code></Link> time expires. | | `request_timeout` | String | `'Request timed out.'` | Displayed when the <Link to="/docs/configuration#global-settings"><Code>request_timeout</Code></Link> time expires. |
| `vrf_not_associated` | String | `'VRF {vrf_name} is not associated with {device_name}.'` | Displayed when a query request's VRF field value contains a VRF that is not configured or associated with the corresponding location/device. The UI automatically filters out VRFs that are not configured on a selected device, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` and `{device_name}` will be replaced with the VRF in question and corresponding device. | | `vrf_not_associated` | String | `'VRF {vrf_name} is not associated with {device_name}.'` | Displayed when a query request's VRF field value contains a VRF that is not configured or associated with the corresponding location/device. The UI automatically filters out VRFs that are not configured on a selected device, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` and `{device_name}` will be replaced with the VRF in question and corresponding device. |
| `vrf_not_found` | String | `'RF {vrf_name} is not defined.'` | Displayed when a query VRF is not configured on any devices. The UI only shows configured VRFs, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` will be replaced with the VRF in question. | | `vrf_not_found` | String | `'VRF {vrf_name} is not defined.'` | Displayed when a query VRF is not configured on any devices. The UI only shows configured VRFs, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` will be replaced with the VRF in question. |
## Example ## Example
@ -43,8 +44,9 @@ messages:
invalid_field: "{input} is an invalid {field}." invalid_field: "{input} is an invalid {field}."
invalid_input: "{target} is not a valid {query_type} target." invalid_input: "{target} is not a valid {query_type} target."
no_input: "{field} must be specified." no_input: "{field} must be specified."
no_output: No output. no_output: The query completed, but no matching results were found.
no_response: No response. no_response: No response.
parsing_error: An error occurred while parsing the query output.
request_timeout: Request timed out. request_timeout: Request timed out.
vrf_not_associated: VRF {vrf_name} is not associated with {device_name}. vrf_not_associated: VRF {vrf_name} is not associated with {device_name}.
vrf_not_found: VRF {vrf_name} is not defined. vrf_not_found: VRF {vrf_name} is not defined.

2
docs/src/components/GithubButton/index.js
View file

@ -37,6 +37,8 @@ export const GithubButton = ({ href, ...props }) => {
isDarkTheme ? "button--secondary" : "button--primary", isDarkTheme ? "button--secondary" : "button--primary",
"button button--outline" "button button--outline"
)} )}
aria-label="Github"
title="Github"
{...props} {...props}
> >
<Icon /> <Icon />

18
docs/src/css/custom.css
View file

@ -35,7 +35,7 @@
:root { :root {
--ifm-code-background: rgba(0, 0, 0, 0.04); --ifm-code-background: rgba(0, 0, 0, 0.04);
--ifm-code-color: var(--ifm-color-secondary-darker); --ifm-code-color: var(--ifm-color-secondary-darkest);
--ifm-footer-color: var(--ifm-secondary-lightest); --ifm-footer-color: var(--ifm-secondary-lightest);
--ifm-footer-link-color: var(--ifm-secondary-lightest); --ifm-footer-link-color: var(--ifm-secondary-lightest);
--ifm-footer-title-color: var(--ifm-color-emphasis-800); --ifm-footer-title-color: var(--ifm-color-emphasis-800);
@ -57,10 +57,11 @@ html[data-theme="dark"]:root {
--ra-color-important: var(--ifm-color-info-darkest); --ra-color-important: var(--ifm-color-info-darkest);
--ra-color-note: var(--ifm-color-gray-600); --ra-color-note: var(--ifm-color-gray-600);
--ra-color-warning: var(--ifm-color-danger-darker); --ra-color-warning: var(--ifm-color-danger-darker);
--ifm-blockquote-color: var(--ifm-color-emphasis-400);
} }
html[data-theme="dark"] .footer.footer--dark { html[data-theme="dark"] .footer.footer--dark {
--ifm-footer-color: var(--ifm-color-emphasis-300); --ifm-footer-color: var(--ifm-color-emphasis-400);
--ifm-navbar-background-color: var(--ifm-background-color); --ifm-navbar-background-color: var(--ifm-background-color);
} }
@ -78,6 +79,7 @@ html[data-theme="dark"] .footer.footer--dark {
html[data-theme="dark"] { html[data-theme="dark"] {
--ifm-code-background: rgba(255, 255, 255, 0.08); --ifm-code-background: rgba(255, 255, 255, 0.08);
--ifm-code-color: var(--ifm-color-secondary-lightest); --ifm-code-color: var(--ifm-color-secondary-lightest);
--ifm-footer-link-color: ;
/* #ace8cd /* #ace8cd
#b6a7e2 #b6a7e2
#dc7381 #dc7381
@ -86,10 +88,20 @@ html[data-theme="dark"] {
.admonition { .admonition {
--ifm-code-background: rgba(255, 255, 255, 0.5); --ifm-code-background: rgba(255, 255, 255, 0.5);
--ifm-code-color: var(--ifm-color-secondary-darker); --ifm-code-color: var(--ifm-color-secondary-darkest);
--ifm-link-color: rgba(0, 0, 0, 0.5); --ifm-link-color: rgba(0, 0, 0, 0.5);
} }
.admonition.alert--success .admonition-content a,
.admonition.alert--warning .admonition-content a,
.admonition.alert--critical .admonition-content a {
color: var(--ifm-color-black);
}
.admonition.admonition-note .admonition-content code {
--ifm-code-color: var(--ifm-color-gray-900);
}
.admonition a:hover { .admonition a:hover {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }

191
docs/src/theme/Footer/index.js
View file

@ -14,110 +14,109 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
function FooterLink({ to, href, label, ...props }) { function FooterLink({ to, href, label, ...props }) {
const toUrl = useBaseUrl(to); const toUrl = useBaseUrl(to);
return ( return (
<Link <Link
className="footer__link-item" className="footer__link-item"
{...(href {...(href
? { ? {
target: "_blank", target: "_blank",
rel: "noopener noreferrer", rel: "noopener noreferrer",
href href,
} }
: { : {
to: toUrl to: toUrl,
})} })}
{...props} {...props}
> >
{label} {label}
</Link> </Link>
); );
} }
const FooterLogo = ({ url, alt }) => <img className="footer__logo" alt={alt} src={url} />; const FooterLogo = ({ url, alt }) => (
<img className="footer__logo" alt={alt} src={url} />
);
function Footer() { function Footer() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const { siteConfig = {} } = context; const { siteConfig = {} } = context;
const { themeConfig = {} } = siteConfig; const { themeConfig = {} } = siteConfig;
const { footer } = themeConfig; const { footer } = themeConfig;
const { copyright, links = [], logo = {} } = footer || {}; const { copyright, links = [], logo = {} } = footer || {};
const logoUrl = useBaseUrl(logo.src); const logoUrl = useBaseUrl(logo.src);
if (!footer) { if (!footer) {
return null; return null;
} }
return ( return (
<footer <footer
className={classnames("footer", { className={classnames("footer", {
"footer--dark": footer.style === "dark" "footer--dark": footer.style === "dark",
})} })}
> >
<div className="container"> <div className="container">
{links && links.length > 0 && ( {links && links.length > 0 && (
<div className="row footer__links"> <div className="row footer__links">
{links.map((linkItem, i) => ( {links.map((linkItem, i) => (
<div <div
key={i} key={i}
className={classnames("col footer__col", styles.footerCol)} className={classnames("col footer__col", styles.footerCol)}
> >
{linkItem.title != null ? ( {linkItem.title != null ? (
<h4 className="footer__title">{linkItem.title}</h4> <h4 className="footer__title">{linkItem.title}</h4>
) : null} ) : null}
{linkItem.items != null && {linkItem.items != null &&
Array.isArray(linkItem.items) && Array.isArray(linkItem.items) &&
linkItem.items.length > 0 ? ( linkItem.items.length > 0 ? (
<ul className="footer__items"> <ul className="footer__items">
{linkItem.items.map((item, key) => {linkItem.items.map((item, key) =>
item.html ? ( item.html ? (
<li <li
key={key} key={key}
className="footer__item" className="footer__item"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: item.html __html: item.html,
}} }}
/> />
) : ( ) : (
<li <li key={item.href || item.to} className="footer__item">
key={item.href || item.to} <FooterLink {...item} />
className="footer__item" </li>
> )
<FooterLink {...item} /> )}
</li> </ul>
) ) : null}
)} </div>
</ul> ))}
) : null} </div>
</div> )}
))} {(logo || copyright) && (
</div> <div className="text--center">
{logo && logo.src && (
<div className="margin-bottom--sm">
{logo.href ? (
<a
href={logo.href}
target="_blank"
rel="noopener noreferrer"
className={styles.footerLogoLink}
>
<FooterLogo alt={logo.alt} url={logoUrl} />
</a>
) : (
<FooterLogo alt={logo.alt} url={logoUrl} />
)} )}
{(logo || copyright) && ( </div>
<div className="text--center"> )}
{logo && logo.src && ( {copyright}
<div className="margin-bottom--sm"> </div>
{logo.href ? ( )}
<a </div>
href={logo.href} </footer>
target="_blank" );
rel="noopener noreferrer"
className={styles.footerLogoLink}
>
<FooterLogo alt={logo.alt} url={logoUrl} />
</a>
) : (
<FooterLogo alt={logo.alt} url={logoUrl} />
)}
</div>
)}
{copyright}
</div>
)}
</div>
</footer>
);
} }
export default Footer; export default Footer;

21
docs/src/theme/Navbar/index.js
View file

@ -98,7 +98,12 @@ function Navbar() {
<div className="navbar__inner"> <div className="navbar__inner">
<div className={classnames("navbar__items", styles.navbarItems)}> <div className={classnames("navbar__items", styles.navbarItems)}>
{!isMobile && ( {!isMobile && (
<Link className="navbar__brand" to={baseUrl}> <Link
className="navbar__brand"
to={baseUrl}
aria-label="Home"
title="Home"
>
<Logo size={32} className={styles.logo} /> <Logo size={32} className={styles.logo} />
{title != null && ( {title != null && (
<strong <strong
@ -149,7 +154,12 @@ function Navbar() {
)} )}
> >
{isMobile && ( {isMobile && (
<Link className="navbar__brand" to={baseUrl}> <Link
className="navbar__brand"
to={baseUrl}
aria-label="Home"
title="Home"
>
<Logo size={32} className={styles.logo} /> <Logo size={32} className={styles.logo} />
{title != null && ( {title != null && (
<strong <strong
@ -190,7 +200,12 @@ function Navbar() {
/> />
<div className="navbar-sidebar"> <div className="navbar-sidebar">
<div className="navbar-sidebar__brand"> <div className="navbar-sidebar__brand">
<Link className="navbar__brand" to={baseUrl}> <Link
className="navbar__brand"
to={baseUrl}
aria-label="Home"
title="Home"
>
<Logo size={32} className={styles.logo} /> <Logo size={32} className={styles.logo} />
{title != null && ( {title != null && (
<strong <strong