UI Customization

Change the layout and add custom content for all of the team and services in your organization.

Introduction

The default layout of the user dashboard, teams pages, and services pages suit most organizations, but some may want to change what content appears for users, teams, or services, or change the positioning of it. Customizing these pages allows you to select which widgets are visible and the layout of those widgets. Any changes made apply for all users, teams, and services on your account.

Only administrators can customize their account's layouts via the UI Customization page under Settings.

Customizing Layout

From the UI Customization page, you have the option of customizing the content for both the teams and services pages on you account.

For either option, to edit page content and layout, enter Edit mode by clicking the Edit Layout button.

Edit Layout Button

Repositioning

From the Edit mode, you can toggle the visibility of widgets. You can also drag and drop them to rearrange and resize them.

Edit Layout View

Similar to widgets, when customizing the services page you can toggle the visibility of tabs and drag and drop them to rearrange the tab order.

Edit Service Tab Order

Disabling

Sometimes, a widget is not useful to your organization's teams or services. In those cases, you can disable the widget by toggling the visibility of the widget.

Toggle Widget View

To re-enable the widget, you can find the disabled widget in the Hidden Items section at the bottom of the page.

Hidden Items View

Previewing

You can (and should) preview your layout as a particular team or service to ensure that the new layout does not look too compressed and shows information as you expect by selecting a team or service and clicking the Preview button.

Preview Selection View

The preview modal shows the view as it will appear on the selected team or service page. When previewing a service, it will show the preview of whatever tab you currently have selected.

Preview Result View

Canceling and Resetting

If you want to revert to your previously saved state, discarding your updates since you last saved, you can do so by pressing the Cancel button.

Cancel Button

If you want to discard all of your changes, including custom widgets that you or others might have created, you can press the Reset to Default button. This will revert all changes and remove all saved configurations.

Reset to Default Button

Saving

Once you are happy with the new layout, you can exit Edit mode by pressing the Save button.

Save Layout View

Once you are finished editing the view, the changes will persist on your account for all users.

Pre-Built Widgets

In addition to rearranging and hiding widgets, you can add widgets to the page for all of your teams and services. Sometimes these widgets will be the same for each team/service, and other times you can use liquid templates to allow each resources widget to render different content.

To begin, press the New Widget button.

New Widget Button

You will then be offered a choice of what type of widget to add.

Widget Selection

Markdown Widgets

Markdown widgets allow embedding any markdown content onto your dashboard, team or service pages. This can be useful for announcements, onboarding, or documentation.

Enter the title of the widget card, an optional description, and the content (which can use liquid templates for custom content per resource).

New Widget Modal

GitHub Widgets

Our GitHub widgets display information about pull requests, merged pull requests, and issues on service, team, and dashboard pages. The displayed information is based on the GitHub repositories linked to the relevant context:

  • Service pages: Repositories linked to the component.
  • Team pages: Repositories linked to the services owned by the team.
  • Dashboard pages: Repositories linked to the services owned by all the teams the user is a member of.

Note that if you use the GitHub App authentication method, you may need to approve an additional repository issues permission in order to use the issues widget.

GitHub Widget

Deploy Widgets

Deploy widgets allow you to view the most recent deploys on service, team and dashboard pages. Information will be displayed about the most recently received deploy for all environments which the service has been deployed to. If teams own multiple services, the widget will display expandable sections for each service on the team page.

Deploys Widget

Deploy Widget

Action Widgets

Action widgets allow triggering a custom action from your service, team and dashboard pages. For custom actions on service pages that are scoped to a service, they will auto-select that service, similar to how actions from the service page work.

Example of an embedded action to do a deploy freeze

Action Widget

Catalog Widgets

📘

Catalog Widgets are currently in Beta.

We are currently working to make the creation of widgets that allow maximum flexibility while being easy to create. As we are changing these fairly frequently, they are currently in Beta status and we are looking for feedback. Things might change in the creation process!

OpsLevel's catalog contains a lot of information about teams, components, and other resources. The Catalog Data Widgets enable you to highlight specific pieces of information from the catalog. Any data that is provided on our GraphQL API can be surfaced in a Catalog Data Widget.

Pie Chart Widgets

Pie Chart Widgets allow for visualizing data from a GraphQL Query as a pie chart. You must provide a query (testable via the GraphiQL playground) and define the path to the list of items to aggregate, as well as the field to group by, in the query results.

Beta Limitations: As we are working on this widget, there are a few limitations for the moment:

  • No grouping of value ranges is currently available (each value is grouped by exact matches)

Several examples of the Pie Chart Widget Creation and Display

Languages with Field Value aggregation

Languages with Field Value aggregation

Frameworks with parameters for more than 100 records

Frameworks with parameters for more than 100 records

Products

Value Widgets

Value Widgets allow for exposing a single value from a GraphQL Query as a large styled widget. You must populate a query (testable via the GraphiQL playground) and then specify the path to the relevant value in the query results. Style overrides are provided that accept any CSS to apply to the widget value.

Value widget input fields

Value Widget Creation

Value Widget

Custom Widgets

Custom widgets allow embedding content from external websites into your resource's page.

There are several caveats on what types of websites can be rendered in a custom widget. See the explanation about what can be included.

Enter the title of the widget card, an optional description, the URL (which can use liquid templates for custom content per resource), and the minimum height of the content.

New Widget Modal

Liquid Templating

A custom widget's URL field supports liquid templating. When templates are evaluated, they receive a context object. This allows the action to behave dynamically based on the information in the resource's context.

Context fields are accessed using Liquid's double handle bar notation: {{ identifier }}. When evaluated this would be replaced by the matching value in the context. Services (available on the service page), teams (available on the team page), and user (available on the dashboard) have different context fields.

Team

On a team's page, information about that team is available via liquid templates.

The Team context contains the following properties:

Description
team.hrefA link to the HTML page for the team.
team.idThe unique identifier for the team.
team.nameThe display name of the team.
team.contactsAn object representing the contacts for the team.
team.managerAn object representing the manager of the team.
team.slugThe URL friendly name of the team.
team.service_statAn object representing the stats about the team's service statistics.
team.tagsAn object representing the tags for the team.

Filters

In addition to Liquid’s standard filters, we also support:

contacts_by_display_name

Find contacts by their display name

  • Input: {{ team | contacts_by_display_name: 'pagerduty' }}
  • Output: \[contact_1, contact_2\]
tag_value

Returns the value of the first matching tag.

  • Input: {{ team | tag_value: "version" }}
  • Output: "3.2.1"
tag_values

Returns the array of matching tag values.

  • Input: {{ team | tag_values: "ip" }}
  • Output: \["1.1.1.1", "2.2.2.2"\]

This can be combined with the standard filters to extract specific values:

  • Input: {{ service | tag_values: "ip" | last }}
  • Output: "1.1.1.1"

Service

On a service page, information about the service that is being viewed is available via liquid templates.

The Service context contains the following properties:

Description
service.hrefA link to the HTML page for the service.
service.idThe unique identifier for the service.
service.nameThe display name of the service.
service.ownerAn object representing the owner of the service.
service.slugThe URL friendly name of the service.
service.tagsAn object representing the tags for the service.
service.toolsAn object representing the tools for the service.
service.propertiesAn object containing all custom properties for the service via their identifier e.g. service.properties.property_value

Filters

In addition to Liquid’s standard filters, we also support:

tag_value

Returns the value of the first matching tag.

  • Input: {{ service | tag_value: "version" }}
  • Output: "3.2.1"
tag_values

Returns the array of matching tag values.

  • Input: {{ service | tag_values: "ip" }}
  • Output: \["1.1.1.1", "2.2.2.2"\]

Dashboard

On the dashboard, information about the particular user accessing the dashboard is available via liquid templates.

The User context contains the following properties:

Description
user.idThe unique identifier for the user.
user.nameThe display name of the user.
user.roleThe role of the user.
user.emailThe email of the user.
user.tagsAn object representing the tags for the user.

Filters

In addition to Liquid’s standard filters, we also support:

tag_value

Returns the value of the first matching tag.

  • Input: {{ user | tag_value: "version" }}
  • Output: "3.2.1"
tag_values

Returns the array of matching tag values.

  • Input: {{ user | tag_values: "ip" }}
  • Output: \["1.1.1.1", "2.2.2.2"\]