diff --git a/docs/docs/agent.mdx b/docs/docs/agent/installation.mdx similarity index 69% rename from docs/docs/agent.mdx rename to docs/docs/agent/installation.mdx index e03b5e0..d517199 100644 --- a/docs/docs/agent.mdx +++ b/docs/docs/agent/installation.mdx @@ -1,7 +1,7 @@ --- -id: agent -title: Linux Agent -sidebar_label: Linux Agent +id: installation +title: Linux Agent Installation +sidebar_label: Installation keywords: [configuration, linux, frr, frrouting, bird, agent] description: hyperglass agent configuration --- @@ -13,9 +13,9 @@ import TabItem from '@theme/TabItem'; Documentation for [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent) is in progress! ::: -# Installation +## Installation -## Dependencies +### Dependencies On the Linux server running [FRRouting](https://frrouting.org/) or [BIRD](https://bird.network.cz/), make sure Python 3.6+ is installed: @@ -51,7 +51,7 @@ $ python3 --version Python 3.6.9 ``` -## Application +### Application Now that Python 3.6+ is installed, you can install the hyperglass agent: @@ -59,7 +59,7 @@ Now that Python 3.6+ is installed, you can install the hyperglass agent: $ pip3 install --user hyperglass-agent ``` -# Setup +## Setup Just like with hyperglass, the hyperglass agent is easy to set up. To automatically create an application directory, generate SSL certificates, generate and symlink a systemd file, and generate a random secret, run: @@ -67,6 +67,24 @@ Just like with hyperglass, the hyperglass agent is easy to set up. To automatica $ hyperglass setup ``` +:::note +You can also run the setup wizard with certain options disabled, if needed: + +```shell-session +$ hyperglass-agent setup --help +Usage: hyperglass-agent setup [OPTIONS] + + Run the setup wizard + +Options: + --config / --no-config Don't regenerate config file + --certs / --no-certs Don't regenerate certificates + --systemd / --no-systemd Don't generate a systemd file + --force Force regeneration of config file + -h, --help Show this message and exit. +``` +::: + :::important More coming soon Documentation for [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent) is in progress! ::: \ No newline at end of file diff --git a/docs/docs/configuration.mdx b/docs/docs/configuration.mdx index 29df27f..f6dec43 100644 --- a/docs/docs/configuration.mdx +++ b/docs/docs/configuration.mdx @@ -16,7 +16,7 @@ hyperglass is meant to be _extremely_ customizable, but with reasonable defaults On the back end, hyperglass uses strict configuration schema validation, so it's virtually impossible to configure hyperglass incorrectly without receiving a contextual warning about what's missing or incorrect about a configuration. ::: -# Configuration Files +## Configuration Files hyperglass configuration consists of three separate [YAML](https://yaml.org/) configuration files: @@ -37,7 +37,7 @@ Configuration files may be located in one of the following directories: - `/etc/hyperglass` - `~/hyperglass` -# Global Settings +## Global Settings The following global settings can be set in `hyperglass.yaml`: @@ -72,7 +72,7 @@ log_file: /tmp/hyperglass.log cors_origins: [localhost:3000, 192.0.2.1] ``` -## Subsections +### Subsections From the top level, the following subsections may be defined and configured: @@ -84,7 +84,7 @@ From the top level, the following subsections may be defined and configured: | `queries` | Enable, disable, or configure query types. | ➡️ | | `web` | Web UI & branding settings. | ➡️ | -# Adding Devices +## Adding Devices To add, as an example, a Cisco router, add the following to your `devices.yaml`, with the relevant details changed for your device: diff --git a/docs/docs/devices.mdx b/docs/docs/devices.mdx index 46452c7..6000db7 100644 --- a/docs/docs/devices.mdx +++ b/docs/docs/devices.mdx @@ -1,7 +1,7 @@ --- id: devices title: Adding Devices -sidebar_label: Device Configuration +sidebar_label: Adding Devices keywords: [hyperglass, authentication, ssl, proxy, access list, prefix list, acl, help] description: Adding devices to hyperglass --- diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index 11e6363..bb172bd 100755 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -9,7 +9,7 @@ description: Getting started with hyperglass import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -# Automatic installation +## Automatic installation If your system runs on: @@ -27,11 +27,11 @@ $ curl https://raw.githubusercontent.com/checktheroads/hyperglass/v1.0.0/install You should be very worried when someone asks you to do what I just did. Downloading a bash script from the internet and piping it to `bash` with root privileges is a terrible idea, unless you fully trust the source. Please don't trust me - go [look at the code](https://github.com/checktheroads/hyperglass/blob/v1.0.0/install.sh) and determine for your self if it's safe to execute. If you feel it's not, please proceed with the manual installation (and [tell me why](https://github.com/checktheroads/hyperglass/issues), so I can fix it). ::: -# Manual Installation +## Manual Installation -## System Dependencies +### System Dependencies -### Python +#### Python hyperglass is written in Python 3 and requires Python version 3.6 as a minimum dependency. If you're confident upgrading your system's version of Python won't break your system (many Linux operating systems rely heavily on Python for package management and other system functions), you can install Python 3.6: @@ -68,7 +68,7 @@ $ python3 --version Python 3.6.9 ``` -### Other Dependencies +#### Other Dependencies The hyperglass UI is written in [ReactJS](https://reactjs.org/). As such, some Javascript dependencies are required. hyperglass also relies on [Redis](https://redis.io/) for caching purposes. hyperglass-agent for connection handling. When configuring the `nos` property of a device, use the value in the **Key** column. | Name | Key | | --------- | ------ | diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 9bab234..60fa9bf 100755 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -1,6 +1,6 @@ const githubURL = "https://github.com/checktheroads/hyperglass"; -const { googleTrackingId } = process.env; +const { googleTrackingId, algoliaKey } = process.env; module.exports = { title: "hyperglass", @@ -16,6 +16,10 @@ module.exports = { trackingID: googleTrackingId || " ", anonymizeIP: false }, + algolia: { + apiKey: algoliaKey, + indexName: "BH4D9OD16A" + }, navbar: { links: [ { to: "docs/introduction", label: "Docs", position: "left" }, diff --git a/docs/sidebars.js b/docs/sidebars.js index df8aeed..96fda87 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -10,8 +10,8 @@ module.exports = { label: "Configuration", items: ["configuration", "devices", "ui", "cache", "api", "messages", "queries"] }, + { type: "category", label: "Linux Agent", items: ["agent/installation"] }, { type: "doc", id: "platforms" }, - { type: "doc", id: "agent" }, { type: "doc", id: "license" } ] }; diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 4df9907..036594c 100755 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -123,3 +123,23 @@ h5 code, h6 code { color: var(--ifm-color-primary); } + +@media screen and (max-width: 997px) { + .col.footer__col[class][class] { + text-align: left; + } + .navbar .navbar__search { + padding-left: unset; + } + .navbar .navbar__search .navbar__search-input { + width: 100%; + display: block; + } +} + +.navbar .navbar__search .navbar__search-input { + border-radius: var(--ifm-button-border-radius); + border-width: var(--ifm-button-border-width); + border-color: var(--ifm-navbar-search-input-background-color); + border-style: solid; +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 7f7da63..7daae8e 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -12,31 +12,49 @@ function Home() { keywords={[ "hyperglass", "documentation", + "docs", "bgp", "lg", "looking", "glass", + "looking glass", "ping", "traceroute", - "test" + "matt love", + "python", + "python3", + "react", + "reactjs" ]} >

hyperglass

- the network looking glass that tries to - make the internet better. + the network looking glass that + tries to + make the internet better.

- Get Started + Get a looking glass + + + Why hyperglass?
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css index 984a396..346de00 100644 --- a/docs/src/pages/styles.module.css +++ b/docs/src/pages/styles.module.css @@ -30,21 +30,32 @@ padding: 24px; } -.getStarted { +.homeBtn { color: unset !important; font-size: 24px; padding: 16px 36px; + margin: 0.25rem; + border-color: unset; } -.getStarted:hover { +.homeBtn:hover { color: unset !important; } +.btnPrimary:hover { + border-color: var(--ifm-color-primary); +} + +.btnSecondary:hover { + border-color: var(--ifm-color-secondary); +} + .buttons { margin-top: 4vh; display: flex; align-items: center; justify-content: center; + flex-wrap: wrap; } .content { @@ -57,13 +68,22 @@ @media screen and (max-width: 966px) { .heroBanner { padding: 2rem; + min-height: 80vh; } .title { font-size: 2.5rem !important; } + + .homeBtn { + min-width: 100%; + } } -.tag { +.tagPrimary { color: var(--ifm-color-primary); } + +.tagSecondary { + color: var(--ifm-color-secondary); +} diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js new file mode 100644 index 0000000..bf56195 --- /dev/null +++ b/docs/src/theme/Footer/index.js @@ -0,0 +1,123 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from "react"; +import classnames from "classnames"; + +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./styles.module.css"; + +function FooterLink({ to, href, label, ...props }) { + const toUrl = useBaseUrl(to); + return ( + + {label} + + ); +} + +const FooterLogo = ({ url, alt }) => {alt}; + +function Footer() { + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + const { themeConfig = {} } = siteConfig; + const { footer } = themeConfig; + + const { copyright, links = [], logo = {} } = footer || {}; + const logoUrl = useBaseUrl(logo.src); + + if (!footer) { + return null; + } + + return ( +
+
+ {links && links.length > 0 && ( +
+ {links.map((linkItem, i) => ( +
+ {linkItem.title != null ? ( +

{linkItem.title}

+ ) : null} + {linkItem.items != null && + Array.isArray(linkItem.items) && + linkItem.items.length > 0 ? ( +
    + {linkItem.items.map((item, key) => + item.html ? ( +
  • + ) : ( +
  • + +
    • + ) + )} +
+ ) : null} +
+ ))} +
+ )} + {(logo || copyright) && ( +
+ {logo && logo.src && ( +
+ {logo.href ? ( + + + + ) : ( + + )} +
+ )} + {copyright} +
+ )} +
+
+ ); +} + +export default Footer; diff --git a/docs/src/theme/Footer/styles.module.css b/docs/src/theme/Footer/styles.module.css new file mode 100644 index 0000000..6a3b85b --- /dev/null +++ b/docs/src/theme/Footer/styles.module.css @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.footerLogoLink { + opacity: 0.5; + transition: opacity 0.15s ease-in-out; +} + +.footerLogoLink:hover { + opacity: 1; +} + +.footerCol:first-child { + text-align: left; +} + +.footerCol:not(:first-child):not(:last-child) { + text-align: center; +} + +.footerCol:last-child { + text-align: right; +} diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js index b3f8860..7c9c5ed 100644 --- a/docs/src/theme/Navbar/index.js +++ b/docs/src/theme/Navbar/index.js @@ -73,20 +73,6 @@ function Navbar() { setSidebarShown(false); }, [setSidebarShown]); - // const onToggleChange = useCallback(e => (e.target.checked ? setDarkTheme() : setLightTheme()), [ - // setLightTheme, - // setDarkTheme - // ]); - - // const onToggleChange = e => { - // console.log(e); - // }; - - // const onToggleChange = useCallback(e => (e ? setDarkTheme() : setLightTheme()), [ - // setLightTheme, - // setDarkTheme - // ]); - const onToggleChange = checked => { checked ? setDarkTheme() : setLightTheme(); }; @@ -182,12 +168,12 @@ function Navbar() { checked={isDarkTheme} /> )} - {links - .filter(linkItem => linkItem.position === "right") - .map((linkItem, i) => ( - - ))} - + {!isMobile && ( + + )} GITHUB → -
@@ -236,8 +218,12 @@ function Navbar() { /> ))} - -
+
+ +
'); + background-repeat: no-repeat; + background-position: center; + background-size: 100%; + overflow: hidden; + text-indent: -9000px; + width: 110px; + height: 100%; + display: block; + margin-left: auto; + margin-right: 5px; +} diff --git a/docs/src/theme/SearchBar/index.js b/docs/src/theme/SearchBar/index.js new file mode 100644 index 0000000..3c9bd3b --- /dev/null +++ b/docs/src/theme/SearchBar/index.js @@ -0,0 +1,120 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {useState, useRef, useCallback} from 'react'; +import classnames from 'classnames'; + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import {useHistory} from '@docusaurus/router'; + +import './styles.css'; + +const Search = props => { + const [algoliaLoaded, setAlgoliaLoaded] = useState(false); + const searchBarRef = useRef(null); + const {siteConfig = {}} = useDocusaurusContext(); + const { + themeConfig: {algolia}, + } = siteConfig; + const history = useHistory(); + + function initAlgolia(focus) { + window.docsearch({ + appId: algolia.appId, + apiKey: algolia.apiKey, + indexName: algolia.indexName, + inputSelector: '#search_input_react', + algoliaOptions: algolia.algoliaOptions, + // Override algolia's default selection event, allowing us to do client-side + // navigation and avoiding a full page refresh. + handleSelected: (_input, _event, suggestion) => { + // Use an anchor tag to parse the absolute url into a relative url + // Alternatively, we can use new URL(suggestion.url) but its not supported in IE + const a = document.createElement('a'); + a.href = suggestion.url; + + // Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id + // So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details. + const routePath = + `#__docusaurus` === a.hash + ? `${a.pathname}` + : `${a.pathname}${a.hash}`; + history.push(routePath); + }, + }); + + if (focus) { + searchBarRef.current.focus(); + } + } + + const loadAlgolia = (focus = true) => { + if (algoliaLoaded) { + return; + } + + Promise.all([import('docsearch.js'), import('./algolia.css')]).then( + ([{default: docsearch}]) => { + setAlgoliaLoaded(true); + window.docsearch = docsearch; + initAlgolia(focus); + }, + ); + }; + + const handleSearchIcon = useCallback(() => { + loadAlgolia(); + + if (algoliaLoaded) { + searchBarRef.current.focus(); + } + + props.handleSearchBarToggle(!props.isSearchBarExpanded); + }, [props.isSearchBarExpanded]); + + const handleSearchInputBlur = useCallback(() => { + props.handleSearchBarToggle(!props.isSearchBarExpanded); + }, [props.isSearchBarExpanded]); + + const handleSearchInput = useCallback(e => { + const needFocus = e.type !== 'mouseover'; + + loadAlgolia(needFocus); + }); + + return ( +
+ + +
+ ); +}; + +export default Search; diff --git a/docs/src/theme/SearchBar/styles.css b/docs/src/theme/SearchBar/styles.css new file mode 100644 index 0000000..047517e --- /dev/null +++ b/docs/src/theme/SearchBar/styles.css @@ -0,0 +1,40 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.search-icon { + background-image: var(--ifm-navbar-search-input-icon); + height: auto; + width: 24px; + cursor: pointer; + padding: 8px; + line-height: 32px; + background-repeat: no-repeat; + background-position: center; + display: none; +} + +.search-icon-hidden { + visibility: hidden; +} + +@media (max-width: 360px) { + .search-bar { + width: 0 !important; + background: none !important; + padding: 0 !important; + transition: none !important; + } + + .search-bar-expanded { + width: 9rem !important; + } + + .search-icon { + display: inline; + vertical-align: sub; + } +}