Skip to main content
Version: v2.18.x LTS

Customizing the API Catalog UI

Customizing the API Catalog UI

Role: system administrator

As a system administrator, you can customize the API Catalog UI to have a similar interface to your organization's service, or with your existing visualization portal.

API Catalog branding

It is possible to customize the logotype and selected style options directly in zowe.yaml.

  1. Open the file zowe.yaml.

  2. Configure the following properties by setting them under ZWE_configs_apiml_catalog_customStyles:

    • logo
      Specifies the location of the logo that will replace the default Zowe logo in the API Catalog header. The supported image formats are: svg, png and jpg/jpeg.

    • titlesColor
      Specifies the title color.

    • fontFamily
      Specifies the font family to use across the API Catalog.

    • headerColor
      Specifies the HTML color of the header element in the API Catalog home page

    • backgroundColor
      Specifies the HTML color of the main background across the API Catalog

    • textColor
      Specifies the HTML color of the main text across the API Catalog

    • docLink
      Specifies a custom link to be displayed in the header. Use this property to refer to applicable documentation. The format is <link_name>|<link_url>
      Example: docLink: Custom Documentation|https://somedoc.com

      Follow this example to define this parameter globally.

      Example:

        configs:
      apiml:
      catalog:
      customStyles:
      logo: /path/to/logo.png
      titlesColor: #F7190E
      fontFamily: Roboto
      headerColor: grey
      backgroundColor: #FFFFFF
      textColor: blue
      docLink: Custom Documentation|https://somedoc.com

      Properties in the example that are not set default to Zowe API Catalog css values.

  3. Restart Zowe.

Replace or remove the Catalog with another service

By default, the API Mediation Layer contains the API Catalog as a service showing available services. As the API Mediation Layer can be successfully run without this component it is possible to replace or remove the service from the Gateway home page and health checks. The following section describes the behavior of the Gateway home page and health checks.

The default option displays the API Catalog.

A value can also be applied to components.gateway.apiml.catalog.serviceId.

Examples:

  • none
    Nothing is displayed on the Gateway home page and the Catalog is removed from /application/health

  • alternative-catalog
    An alternative to the API Catalog is displayed

  • metrics-dashboard
    A possible dashboard that could appear in place of the API Catalog

Notes:
  • If the application contains the homePageUrl and statusPageRelativeUrl, then the full set of information is displayed.
  • If the application contains the homePageUrl the link is displayed without the UP information.
  • If the application contains the statusPageRelativeUrl then UP or DOWN is displayed based on the statusPage without the link.

Use the following procedure to change or replace the Catalog service.

  1. Open the file zowe.yaml.

  2. Find or add the property components.gateway.apiml.catalog.serviceId. Set the value with the following options:

    • Set the value to none to remove the Catalog service.
    • Set the value to the ID of the service that is onboarded to the API Mediation Layer.
  3. Restart Zowe.