Customizing the API Catalog UI
Customizing the API Catalog UI
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.
- To customize the logotype and selected syle options in the zowe.yaml file, see API Catalog branding.
- To replace or remove the API Catolog service from the Gateway home page and health checks, see Replace or remove the Catalog with another service.
API Catalog branding
It is possible to customize the logotype and selected style options directly in zowe.yaml
.
-
Open the file
zowe.yaml
. -
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
andjpg/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.comProperties in the example that are not set default to Zowe API Catalog css values.
-
-
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
- If the application contains the
homePageUrl
andstatusPageRelativeUrl
, then the full set of information is displayed. - If the application contains the
homePageUrl
the link is displayed without theUP
information. - If the application contains the
statusPageRelativeUrl
thenUP
orDOWN
is displayed based on thestatusPage
without the link.
Use the following procedure to change or replace the Catalog service.
-
Open the file
zowe.yaml
. -
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.
- Set the value to
-
Restart Zowe.