Customizing the Anchore Enterprise UI

When managing a complex security platform like Anchore Enterprise, communication and accessibility are key. Whether you’re alerting your security and development teams to upcoming maintenance or providing quick access to API documentation, the ability to customize your Anchore Enterprise Deployment makes for a better user experience, that is tailored to your organization and use case.

These customizations are outlined below and can be easily made through the Web UI System Configuration or programmatically via Helm values or Manual Config. Let’s run through what and how you can configure these.

Custom Message

A Custom Message can be displayed on the Anchore Enterprise Client Web UI login view. You can specify a title and a message, both of which support Markdown formatting with any HTML tags removed.

Below is an example of a custom message title with a handy message below.

Recommendation: This can be a useful place to display messages, such as Legal Disclaimers. You can utilize Unicode characters, such as emojis, to help draw attention if required.

Configuration: Edit the config-ui.yaml file under the key ‘custom_message’ and if you are using Helm tweak your values for anchoreConfig.ui.custom_message. Below is an example yaml configuration:

custom_message:
  title: "Custom message"
  message: "This is a handy custom message you can set"

Custom Banners

Custom Banners can be displayed on the Anchore Enterprise Client Web UI across the top and/or bottom of the view. Each banner can have its own text, display mode (always, or login-only, where the banner is only displayed on the login view), as well as an optional background color and text color.

Below is an example of a top banner with always display mode, green background with white text ‘🚨🚨 ENVIRONMENT: DEMO 🚨🚨’

Recommendation: This can be a useful place to signpost users towards gaining access or displaying suitable messages, such as an upcoming maintenance window. You can utilize Unicode characters, such as emojis, to help draw attention if required.

Configuration: You can simply configure your Custom Banner via the Web UI. Alternatively, edit the config-ui.yaml file under the key ‘banners’ and if you are using Helm tweak your values for anchoreConfig.ui.banners. Below is an example yaml configuration:

banners:
  top:
    text: "🚨🚨 ENVIRONMENT: DEMO 🚨🚨"
    text_color: "white"
    background_color: "#32a883"
    display: "always"
  bottom:
    text: "Here is an example login only banner"
    text_color: "white"
    background_color: "#1e6ee6"
    display: "login-only"

Custom Links

Custom links can be displayed on the Anchore Enterprise Client Web UI on the login page and also within the system dropdown menu (top-right in the main view). You can specify a title and up to 10 links with their own titles and URIs. This feature is only enabled if a main title and at least one link and associated title are provided. HTML tags will be removed.

An example below shows how the custom links section on mouse click/hover can be expanded on both the login page:

and the system dropdown menu:

Recommendation: This might be a useful place to link to your deployments copies of AnchoreCTL for the distributions used in your organisation (Windows, Linux, MacOS). This allows users to quickly find and download AnchoreCTL, and importantly, it will download the latest compatible version of AnchoreCTL. Developers also find having links to Anchore’s Swagger API docs useful.

Configuration: You can simply configure your Custom Links via the Web UI. Alternatively, edit the config-ui.yaml file under the key ‘custom_links’ and if you are using Helm, tweak your values under anchoreConfig.ui.custom_links. Below is an example Helm yaml configuration:

custom_links:
  title: "Internal Resources"
  links:
  - title: "Download AnchoreCTL Linux AMD64"
    uri: "/v2/system/anchorectl?operating_system=linux&architecture=amd64"
  - title: "API - SwaggerUI"
    uri: "/swagger/"
  - title: "API - GraphiQL"
    uri: "/v2/reports/graphql"
  - title: "Integration - Gitlab"
    uri: "https://gitlab.anchoredemo.com/"

Configuration changes via the Web UI

Users with an Administrator role can configure both Custom Banners and Custom Links directly through the Anchore Enterprise Client Web UI by navigating to System > Configuration.

You can make these changes, without the need to change Helm or application values requiring a redeployment of Anchore Enterprise. However, configuring these custom elements within the Web UI, only works if you have NOT already defined the relevant custom values via config-ui.yaml, Helm values or environment variables.

The Web UI offers a helpful WYSIWYG editor allowing you to make changes instantly. Once you click ‘apply’ and then click ‘save’ on the configuration, refresh the page to see your custom changes. The example below shows adding a Top Custom Banner that has its display mode set to always appear.