forked from mirrors/thatmattlove-hyperglass
253 lines
15 KiB
Text
253 lines
15 KiB
Text
---
|
|
id: ui
|
|
title: Web UI
|
|
sidebar_label: Web UI
|
|
keywords: [web ui, gui, theme, colors, branding]
|
|
description: hyperglass Web UI Configuration
|
|
---
|
|
|
|
import Link from "@docusaurus/Link";
|
|
import Admonition from "react-admonitions";
|
|
import R from "../src/components/Required";
|
|
import MiniNote from "../src/components/MiniNote";
|
|
import Code from "../src/components/JSXCode";
|
|
import Color from "../src/components/Color";
|
|
import Font from "../src/components/Font";
|
|
import PageLink from "../src/components/PageLink";
|
|
|
|
The `web` subsection contains multiple subsections of its own, should you wish to customize various aspects of the UI:
|
|
|
|
| Section | Description | All Options |
|
|
| :-------------- | :----------------------------- | :-----------------------------------------: |
|
|
| `credit` | Developer credit & GitHub Link | <PageLink to="#credit">➡️</PageLink> |
|
|
| `dns_provider` | DNS over HTTPS Provider | <PageLink to="#dns_provider">➡️</PageLink> |
|
|
| `external_link` | Link to external site | <PageLink to="#external_link">➡️</PageLink> |
|
|
| `logo` | Logo & Favicons | <PageLink to="#logo">➡️</PageLink> |
|
|
| `opengraph` | [OpenGraph](https://ogp.me/) | <PageLink to="#opengraph">➡️</PageLink> |
|
|
| `terms` | Terms & Conditions | <PageLink to="#terms">➡️</PageLink> |
|
|
| `theme` | Colors & Fonts | <PageLink to="#theme">➡️</PageLink> |
|
|
|
|
## Example
|
|
|
|
```yaml
|
|
web:
|
|
credit:
|
|
enable: true
|
|
dns_provider:
|
|
name: google
|
|
url: https://dns.google/resolve
|
|
external_link:
|
|
enable: true
|
|
title: PeeringDB
|
|
url: https://www.peeringdb.com/AS{primary_asn}
|
|
help_menu:
|
|
enable: true
|
|
file: null
|
|
title: Help
|
|
logo:
|
|
dark: /images/hyperglass-light.png
|
|
favicons: ui/images/favicons/
|
|
height: null
|
|
light: /images/hyperglass-dark.png
|
|
width: 384
|
|
opengraph:
|
|
height: 1132
|
|
image: /images/hyperglass-opengraph.png
|
|
width: 7355
|
|
terms:
|
|
enable: true
|
|
file: null
|
|
title: Terms
|
|
text:
|
|
cache: Results will be cached for 2 minutes.
|
|
fqdn_tooltip: 'Use {protocol}'
|
|
query_location: Location
|
|
query_target: Target
|
|
query_type: Query Type
|
|
query_vrf: Routing Table
|
|
subtitle: AS65001
|
|
title: hyperglass
|
|
title_mode: text_only
|
|
theme:
|
|
colors:
|
|
black: "#262626"
|
|
blue: "#314cb6"
|
|
cyan: "#118ab2"
|
|
danger: "#d84b4b"
|
|
error: "#ff6b35"
|
|
gray: "#c1c7cc"
|
|
green: "#35b246"
|
|
orange: "#ff6b35"
|
|
pink: "#f2607d"
|
|
primary: "#118ab2"
|
|
purple: "#8d30b5"
|
|
red: "#d84b4b"
|
|
secondary: "#314cb6"
|
|
success: "#35b246"
|
|
teal: "#35b299"
|
|
warning: "#edae49"
|
|
white: "#f7f7f7"
|
|
yellow: "#edae49"
|
|
fonts:
|
|
body: Nunito
|
|
mono: Fira Code
|
|
```
|
|
|
|
## `credit`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :-----: | :-----: | :--------------------------------------------------------------------------------------- |
|
|
| `enable` | Boolean | `true` | Enable or disable the display of developer credit & link to hyperglass GitHub repository |
|
|
|
|
<Admonition title="From the developer" type="tip">
|
|
If your organization's policy allows, and you don't mind, I request that you keep{" "}
|
|
<Code>credit</Code> enabled. Remember: my goal for this project is get more networks to use
|
|
looking glasses to make all of our lives easier. <br />
|
|
<br /> Because it's primarily other network operators that will use this tool to begin with, I'd
|
|
love for any operators that use your looking glass to know where they can get their own.
|
|
</Admonition>
|
|
|
|
## `dns_provider`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :----: | :------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `name` | String | `'cloudflare'` | DNS over HTTPS provider for in-browser DNS resolution. Cloudflare & Google supported. <MiniNote>Must be <Code>cloudflare</Code> or <Code>google</Code></MiniNote> |
|
|
|
|
## `external_link`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :-----: | :-------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `enable` | Boolean | `true` | Enable or disable the display of an external link |
|
|
| `title` | String | `'PeeringDB'` | Link title/label |
|
|
| `url` | String | `'https://www.peeringdb.com/AS{primary_asn}'` | Target URL. `{primary_asn}` will be replaced with the `primary_asn` value from <Link to="/docs/configuration#global-settings">Global Settings</Link> |
|
|
|
|
## `logo`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :-----: | :----------------------------------------------------------- | :------------------------------------------- |
|
|
| `light` | String | `'hyperglass/hyperglass/static/images/hyperglass-dark.png'` | Path to logo that will be used in light mode |
|
|
| `dark` | String | `'hyperglass/hyperglass/static/images/hyperglass-light.png'` | Path to logo that will be used in dark mode |
|
|
| `width` | Integer | `384` | Maximum logo width in pixels |
|
|
| `height` | Integer | | Maximum logo height in pixels |
|
|
|
|
## `opengraph`
|
|
|
|
If you're not familiar with [OpenGraph](https://ogp.me/), it's the thing that generates the pretty pictures, titles, and descriptions for links when you post them to sites/tools such as Facebook, Twitter, Slack, etc.
|
|
|
|
By default, no Opengraph image is set. If you define one with `image`, hyperglass will try to determine the image's dimensions automatically. Or, you can override those dimensions with the `width` and `height` parameters.
|
|
|
|
| Parameter | Type | Description |
|
|
| :-------- | :-----: | :---------------------- |
|
|
| `image` | String | Path to opengraph image |
|
|
| `width` | Integer | Opengraph image width |
|
|
| `height` | Integer | Opengraph image height |
|
|
|
|
## `terms`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :-----: | :-------- | :-------------------------------------------------------------------------------------------- |
|
|
| `enable` | Boolean | `true` | Enable or display the display of terms & conditions |
|
|
| `file` | String | | Path to a plain text or markdown file with content to override the default terms & conditions |
|
|
| `title` | String | `'Terms'` | Terms & conditions title |
|
|
|
|
## `text`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :--------------- | :----: | :------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| `cache` | String | `'Results will be cached for {timeout} {period}.'` | User-facing text regarding the cache timeout. `{timeout}` and `{period}` are replaced with the a generated value derived from the length of the <Link to="/docs/configuration#global-settings"><Code>request_timeout</Code></Link> setting. |
|
|
| `fqdn_tooltip` | String | `'Use {protocol}'` | Text displayed when a user hovers over the IPv4 or IPv6 button on an FQDN target resolved by DNS. `{protocol}` is replaced with the relevant IP protocol. |
|
|
| `query_location` | String | `'Location'` | Query Location (router) form label. |
|
|
| `query_target` | String | `'Target'` | Query Target (IP/hostname/community/AS Path) form label. |
|
|
| `query_type` | String | `'Query Type'` | Query Type (BGP Route, Ping, Traceroute, etc.) form label. |
|
|
| `query_vrf` | String | `'Routing Table'` | Query VRF form label. |
|
|
| `subtitle` | String | `'AS{primary_asn}'` | Subtitle text. `{primary_asn}` will be replaced with the <PageLink to="/docs/configuration#global-settings"><Code>primary_asn</Code></PageLink> value. |
|
|
| `title` | String | `'hyperglass'` | Title text. |
|
|
| `title_mode` | String | `'text_only'` | Set the title mode. <MiniNote>Must be <Code>text_only</Code>, <Code>logo_only</Code>, <Code>logo_title</Code>, or <Code>all</Code></MiniNote> |
|
|
|
|
<Admonition type="important" title="Title Mode">
|
|
The <Code>title_mode</Code> parameter behaves in the following manner:
|
|
<br/>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th align="left">Mode</th>
|
|
<th>Behavior</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<Code>text_only</Code>
|
|
</td>
|
|
<td>
|
|
Shows the <Code>title</Code> and <Code>subtitle</Code> only.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Code>logo_only</Code>
|
|
</td>
|
|
<td>
|
|
Shows the <Link to="#logo"><Code>logo</Code></Link> only.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Code>logo_title</Code>
|
|
</td>
|
|
<td>
|
|
Shows the <Link to="#logo"><Code>logo</Code></Link> and <Code>title</Code> only.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<Code>all</Code>
|
|
</td>
|
|
<td>
|
|
Shows the <Link to="#logo"><Code>logo</Code></Link>, <Code>title</Code>, and <Code>subtitle</Code>.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Admonition>
|
|
|
|
## `theme`
|
|
|
|
| Section | Description | All Options |
|
|
| :------- | :----------- | :----------------------------------: |
|
|
| `colors` | Theme colors | <PageLink to="#colors">➡️</PageLink> |
|
|
| `fonts` | Theme fonts | <PageLink to="#fonts">➡️</PageLink> |
|
|
|
|
### `colors`
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :---------- | :----: | :--------------------- | :------------------------------------- |
|
|
| `primary` | String | | Primary accent color |
|
|
| `secondary` | String | | Secondary accent color |
|
|
| `success` | String | | Success message/status color |
|
|
| `warning` | String | | Warning message/status color |
|
|
| `error` | String | | Error message/status color |
|
|
| `danger` | String | | Danger message/status color |
|
|
| `black` | String | <Color hex="#262626"/> | Used as background color in dark mode |
|
|
| `white` | String | <Color hex="#f7f7f7"/> | Used as background color in light mode |
|
|
| `red` | String | <Color hex="#d84b4b"/> | Used as `danger` color if undefined |
|
|
| `orange` | String | <Color hex="#ff6b35"/> | Used as `error` color if undefined |
|
|
| `yellow` | String | <Color hex="#edae49"/> | Used as `warning` color if undefined |
|
|
| `green` | String | <Color hex="#35b246"/> | Used as `success` color if undefined |
|
|
| `cyan` | String | <Color hex="#118ab2"/> | Used as `primary` color if undefined |
|
|
| `blue` | String | <Color hex="#314cb6"/> | Used as `secondary` color if undefined |
|
|
| `teal` | String | <Color hex="#35b299"/> | |
|
|
| `pink` | String | <Color hex="#f2607d"/> | |
|
|
| `purple` | String | <Color hex="#8d30b5"/> | |
|
|
| `gray` | String | <Color hex="#c1c7cc"/> | |
|
|
|
|
### `fonts`
|
|
|
|
Currently, only [Google Fonts](https://fonts.google.com/) are supported.
|
|
|
|
| Parameter | Type | Default | Description |
|
|
| :-------- | :----: | :----------------------- | :-------------------------------------- |
|
|
| `body` | String | <Font name='Nunito'/> | Main body font |
|
|
| `mono` | String | <Font name='Fira Code'/> | Monospace font, used for command output |
|
|
|
|
|