Brian Foster, Sales Engineer and Rick Broker, Solutions Architect, XebiaLabs recently guided our customers through the process of Custom Tile Creation in XL Release. This post will show you the benefits of creating custom tiles and a little how-to. If XL Release is not yet a part of your software delivery process, learn more here.

Custom tiles benefit your release process in many ways including:

• Boosting the power of data presented to users in the dashboards
• Gaining deeper insight into bottle necks based on the tools you are using
• Creating team efficiencies and raising the visibility of releases throughout the company
• Quickly identifying issues to tackle across the organization
• Organizing management reporting in a better way
• Sharing operational data quickly and easily via graphs without needing to dig through log files

Let’s get started with creating custom tiles!

Part 1: Basic overview and getting project ready

How custom tiles get rendered in XL Release

1. Open a release
2. In the “Show” dropdown
3. Select “Release dashboard”
4. Click “Configure dashboard”
5. Click “Add tiles”
6. A list of available tiles you can add to the dashboard will appear for you to select. In the “Search” field, type in the name of the tile you want to add.
7. Click the “Add” button to add the tile to the dashboard

Structure for resources folder

• XL Release plugins should have a file structure similar to that on the right.
• The plugin folder name stores your python files.
• The key for custom tile creation is having a “web” folder. If the plugin you are working with does not have this folder, simply create one to store your html files.

Part 2: Core development cycle

synthetic.xml

This is the command center for your Plugin. It defines the synthetic types in the XebiaLabs platform (tiles, tasks, triggers, etc.) For a new tile, you need to define the tile model like this:

Please note: xlrelease.Tile, github.UserTile, user-summary.html, and scope

Postman – identify your data

Postman is a great tool to use when starting your development and accessing the API rest endpoints you want to display in your tiles. Here is the JSON response for the user API from Github. We will leverage these variables in our python logic.

UserTile.py

Now we create a python script that retrieves and organizes the JSON data we want to present. A few things to note:

• Call to GithubClient.py
• We set the response data attribute with our JSON data
• We are using jython, so you can leverage JAVA classes when needed

Client.py (GithubClient.py –Githubplugin)

• Methods here make connections, instantiate a client, get data, make request calls, use open source API’s, etc…
• For this plugin, we are using the PyGithub API

Client.py (Gitlab plugin)

Here is an example of a request call in the Gitlab plugin. This is another way to can access API rest endpoints. Notice how the response object data was converted to a JSON string and returned.

user-summary.html –(Githubplugin)

Now we build out the html file we want to use to display the JSON data in XL Release queryTileDatato get our response. Leverage the JSON object from the data variable in the response. You can access the response.dataobject via Javascript. You can use devtools in Chrome, for example, to see the response data object.

Part 3: Testing and third-party libraries

gitlab-echarts.js –(Gitlab plugin)

Use third party tools like echarts to create graphical charts in your tiles.

Again, access the data via the response data variable.

Gitlab plugin

When displayed in XL Release, charts can take any form such as pie charts, line charts, tables, etc…Build what best suits your organization!

Gradle –build.gradle

When you are ready to test your changes and render the code in XL Release, use Gradle to fire up a Docker image. Each plugin should have a build.gradle file. Make sure the xlDocker entries are in your build.gradle file. Your build.gradle file will also contain other dependencies your code needs like jython, PyGithub, license, etc.

Gradle – Let’s test

When ready, you can run ./gradlew runDocker at a unix command line or within your IDE to start up a local instance of XL Release. Be sure you have Docker installed and running on your machine. Other helpful Gradle commands are −./gradlewclean, ./gradlewbuild

Learn More

• XebiaLabs XL Release Documentation
• Github Repo Location 1; Github Repo Location 2
• Schedule a demo to see the XebiaLabs DevOps Platform in action, and make your own custom tiles!

The post Tutorial: Custom Tile Creation appeared first on XebiaLabs.