šŸ˜¬ hyperglass 2.0 and its documentation is still in development!
Configuration
Web UI

Web UI

hyperglass provides extensive customization options for the look and feel of the web UI.

ParameterTypeDefault ValueDescription
web.location_display_modeStringautoShow the locations field as a dropdown, gallery. When using auto, if there are more than 5 location groups, dropdown will be used.
web.custom_javascriptStringPath to a javascript file that will be loaded with the website.
web.custom_htmlStringPath to a custom HTML file that will be loaded with the website and rendered beneath the app.

DNS over HTTPS

DNS over HTTPS (opens in a new tab) is used to look up an FQDN query target from the perspective of the user's browser.

ParameterTypeDefault ValueDescription
dns_provider.nameStringcloudflareCloudflare or Google DNS are supported.

Logo

ParameterTypeDefault ValueDescription
web.logo.lightStringPath to logo to show in light mode.
web.logo.darkStringPath to logo to show in dark mode.
web.logo.faviconStringPath to icon/logo from which to generate favicons.
web.logo.widthNumber or String100%Width of logo, either as pixels or a percentage.
web.logo.heightNumber or StringHeight of logo, either as pixels or a percentage.
Example
config.yaml
web:
    logo:
        light: /path/to/light-logo.svg
        dark: /path/to/dark-logo.svg
        favicon: /path/to/favicon.svg
        width: 100%
        height: null

Greeting

The greeting is an optional modal/popup window that will present itself to users in the Web UI. It can be used for anything you want; for example:

  • A data privacy acknowledgement that must be acknowledged prior to proceeding
  • Information about your company
  • Instructions on how to use hyperglass
ParameterTypeDefault ValueDescription
web.greeting.enableBooleanFalseEnable or disable the greeting.
web.greeting.fileStringPath to markdown or plain text file that contains greeting content.
web.greeting.titleStringWelcomeText to be used as the greeting title.
web.greeting.buttonStringContinueText to be used for the button that acknowledges/closes the greeting.
web.greeting.requiredBooleanFalseIf true, users cannot close the modal or run any queries until the greeting has been acknowledged.
Example
config.yaml
web:
    greeting:
        enable: true
        file: /path/to/your/file.md
        title: Welcome
        button: Continue
        required: false

OpenGraph

OpenGraph (opens in a new tab) is 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, this Opengraph image is used, but you can provide your own image. You don't need to worry about sizing or formatting it properly, hyperglass will handle this for you.

ParameterTypeDefault ValueDescription
web.opengraph.imageStringPath to your OpenGraph image.

Highlighting

hyperglass can highlight special values in your router output and provide users with additional information about the content. For example, your organization's BGP communities or IP address space can be visually highlighted, and a tooltip can be shown when a user hovers over the highlighted value.

Each value you wish to be highlighted is defined with the following schema:

ParameterTypeDefault ValueDescription
patternStringRegEx pattern or string to match against router output.
labelStringTooltip value when the highlighted text is hovered.
colorStringColor name from web.theme.colors.
Example
config.yaml
web:
    highlight:
        - pattern: "65000:1234"
          label: Special snowflake community that does a thing
          color: primary
        - pattern: '^192\.0\.2\.[0-9]+$'
          label: Magical IP Address
          color: blue

Menus

hyperglass can show completely-customizable menus in the footer. Each menu can be configured with the following schema:

ParameterTypeDefault ValueDescription
titleStringMenu title, will be the text that shows on footer.
contentStringPlain text or markdown content of the menu or path to a file that contains plain text or markdown content.
sideStringleftSide of the footer with which the menu will be grouped.
orderNumber0Optionally specify an order for each menu item. If not specified, menus will be rendered in the order they are configured.
Example
config.yaml
web:
  menus:
    - title: Terms & Conditions
      content:
        | **Don't** break stuff!
          _please_
      side: right
      order: 1
    - title: Help
      content: /path/to/help/file.md
      side: left
      order: 0

Links

hyperglass can show customizable links to anything you think your users might find helpful. Each link can be configured with the following schema:

ParameterTypeDefault ValueDescription
titleStringLink text.
urlStringLink URL.
show_iconBooleanTrueIf true, an icon indicating the link is an external link is shown.
sideStringleftSide of the footer with which the link will be grouped.
orderNumber0Optionally specify an order for each link. If not specified, links will be rendered in the order they are configured.
Example
config.yaml
web:
    links:
        - title: PeeringDB
          url: https://www.peeringdb.com/65000
          show_icon: true
          side: right
          order: 1
        - title: Our Website
          url: https://example.com
          show_icon: false
          side: left
          order: 0

Credit

ParameterTypeDefaultDescription
enableBooleantrueEnable or disable the display of developer credit & link to hyperglass GitHub repository
ā¤ļø

Note from the Developer
If your organization's policy allows, and you don't mind, I request that you keep credit enabled. Remember: my goal for this project is get more networks to use looking glasses to make all of our lives easier. Because it's primarily other network operators who 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.

Text

Most of the text in the hyperglass UI can be overridden to suit your needs.

ParameterTypeDefault ValueDescription
web.text.title_modeStringlogo_onlySee title mode section
web.text.titleStringhyperglassTitle text.
web.text.subtitleStringNetwork Looking GlassSubtitle text.
web.text.query_locationStringLocationText used to label the query location (router) field.
web.text.query_typeStringQuery TypeText used to label the query type (directive) field.
web.text.query_targetStringTargetText used to label the query target field.
web.text.fqdn_tooltipStringUse {protocol}Tooltip text used when a user hovers over the FQDN tooltip.
web.text.fqdn_messageStringYour browser has resolved {fqdn} toText used when prompting a user to select a resolve IPv4 or IPv6 address for an FQDN query.
web.text.fqdn_errorStringUnable to resolve {fqdn}Text used when an FQDN is not resolvable.
web.text.fqdn_error_buttonStringTry AgainButton text used when an FQDN is not resolvable.
web.text.cache_prefixStringResults cached forText displayed with the cache timeout countdown.
web.text.cache_iconStringCached from {time} UTCText used when a user hovers over the cache icon, which is displayed when a response was a cached response. {time} is replaced with the original query's timestamp.
web.text.complete_timeStringCompleted in {seconds}Text used when a user hovers over the success icon for a query result. {seconds} will be replaced with 'n seconds' where n is the time a query took to complete.
web.text.rpki_invalidStringInvalidText used in table output when a route's RPKI status is invalid.
web.text.rpki_validStringValidText used in table output when a route's RPKI status is valid.
web.text.rpki_unknownStringNo ROAs ExistText used in table output when a route's RPKI status is unknown.
web.text.rpki_unverifiedStringNot VerifiedText used in table output when a route's RPKI status is unverified.
web.text.no_communitiesStringNo CommunitiesText used in table output when a route has no communities.
web.text.ip_errorStringUnable to determine IP AddressError displayed if hyperglass is unable to determine the user's IP.
web.text.no_ipStringNo {protocol} AddressText displayed if the user doesn't have an IP address of {protocol} (IPv4 or IPv6).
web.text.ip_selectStringSelect an IP AddressText used to label the IP Address selection for the user's IP.
web.text.ip_buttonStringMy IPText used for the user IP button.

Title Mode

Available title modes are:

title_mode ValueAction
logo_onlyOnly the logo is displayed, no title or subtitle will be visible.
text_onlyOnly the title and subtitle are displayed, no logo will be visible.
logo_subtitleOnly the logo and subtitle are displayed, no title will be visible.
allLogo, title, and subtitle will all be visible.
Example
config.yaml
web:
    text:
        title: Our Looking Glass
        subtitle: Company Name, Inc.
        title_mode: text_only

Theme

hyperglass allows you to customize the colors and fonts used in the Web UI.

ParameterTypeDefault ValueDescription
web.theme.default_color_modeStringSet hyperglass's default color mode. By default, the user's system preference is used. Must be light or dark

Colors

Intrinsic Colors
ParameterDefault Value
web.theme.colors.black#000000
web.theme.colors.white#ffffff
web.theme.colors.dark#010101
web.theme.colors.light#f5f6f7
web.theme.colors.gray#c1c7cc
web.theme.colors.red#d84b4b
web.theme.colors.orange#ff6b35
web.theme.colors.yellow#edae49
web.theme.colors.green#35b246
web.theme.colors.blue#314cb6
web.theme.colors.teal#35b299
web.theme.colors.cyan#118ab2
web.theme.colors.pink#f2607d
web.theme.colors.purple#8d30b5
Functional Colors
ParameterDefault Value
web.theme.colors.primary#118ab2
web.theme.colors.secondary#314cb6
web.theme.colors.success#35b246
web.theme.colors.warning#edae49
web.theme.colors.error#ff6b35
web.theme.colors.danger#d84b4b
Example

To override hyperglass's primary color, it's recommended to override its mapped intrinsic color. For example, to override the default primary color to cyan:

config.yaml
web:
    theme:
        colors:
            cyan: "#00ffff"

Fonts

hyperglass's fonts are loaded from Google Fonts (opens in a new tab). Any Google font name may be specified to override the default fonts.

ParameterTypeDefault ValueDescription
web.theme.fonts.bodyStringNunitoFont for all standard body text, including headings.
web.theme.fonts.monoStringFire CodeFont for all monospace text such as inline code or code blocks, including device output.
Example
config.yaml
web:
    theme:
        fonts:
            body: Inter