• Fat Cats Boardgame
  • Wicket UI Library
  • About Me

Java and Wicket web development thoughts, tutorials, and tips

roman@coderdreams.com
Coder DreamsCoder Dreams
  • Fat Cats Boardgame
  • Wicket UI Library
  • About Me

Creating a release info dashboard

February 12, 2020 Posted by Roman Sery tool, wicket No Comments

Hopefully, you are in the position of having an online software product/website with multiple clients. The problem you run into when deploying to multiple clients and environments is keeping track of which release is where. Let’s also assume that you have testing, stage, and production environments for each client; that quickly becomes a headache.

In this post, we look at how to create a simple dashboard for displaying this info. There are three basic steps:

  • Use the git-commit-id-plugin maven plugin in your project to output the brach and commit info to a file.
  • Create an HTTP endpoint for retriving the deployed branch.
  • Create a page that will invoke these endpoints and display in a table.

Creating git properties

The first step is to make our project create a file with the git repository info at build time. To accomplish this, we will use the git-commit-id-plugin plugin. Let’s add the plugin in our pom.xml file:

<plugins>
      <plugin>
        <groupId>pl.project13.maven</groupId>
        <artifactId>git-commit-id-plugin</artifactId>
        <version>4.0.0</version>
        <executions>
          <execution>
            <id>get-the-git-infos</id>
            <goals>
              <goal>revision</goal>
            </goals>
            <phase>initialize</phase>
          </execution>
        </executions>
        <configuration>
          <generateGitPropertiesFile>true</generateGitPropertiesFile>
          <generateGitPropertiesFilename>${project.build.outputDirectory}/git.properties</generateGitPropertiesFilename>
          <commitIdGenerationMode>full</commitIdGenerationMode>
          <format>properties</format>
        </configuration>
      </plugin>
</plugins>

When we do a maven build, a file named git.properties will be created that will have all of the information about the branch, build, and last commit info.

Creating the endpoint

The next step is to expose an HTTP endpoint in our application that will use git.properties to return the current git branch. We will use Wicket-rest annotations which is a great library for creating REST endpoints.

public class VersionDetailsEndpoints extends AbstractRestResource<JsonWebSerialDeserial> {
    public VersionDetailsEndpoints() {
        super(new JsonWebSerialDeserial(new JacksonObjectSerialDeserial()));
    }
    @MethodMapping(value = "/")
    public String details() {
        getCurrentWebResponse().addHeader("Access-Control-Allow-Origin", "*");
        return ApplicationDetailsService.getBranch();
    }
}

ApplicationDetailsService is a simple utility class that reads and parses the generated git.properties file from our maven build process. We also set the CORS header to allow invoking this endpoint using Javascript from a different domain as will be necessary for the last step.

We register it in our WebApplication init() method by mounting a resource:

this.mountResource("/releaseinfo", new ResourceReference("/releaseinfo") {            
    VersionDetailsEndpoints versionDetailsEndpoints = new VersionDetailsEndpoints();
    @Override
    public IResource getResource() {
	Injector.get().inject(versionDetailsEndpoints);
	return versionDetailsEndpoints;
    }
});

Creating the dashboard

Now the fun part! We will use the Javascript fetch API to iterate a map of clients and URL’s, invoking the /releaseinfo endpoint for each and populate a table with the results. The below code will go into the HEAD section of our HTML page:

let urlMap = {};
urlMap["ABC Corp"] = ["test.abc.com", "stage.abc.com", "abc.com"];
urlMap["Oracle"] = ["test.oracle-www.coderdreams.com", "stage.oracle-www.coderdreams.com", "oracle-www.coderdreams.com"];
urlMap["Microsoft"] = ["test.ms.com", "stage.ms.com", "ms-www.coderdreams.com"];

const clients = Object.keys(urlMap);

$(document).ready(function() {
  clients.forEach(function(client) {
    const clientId = client.replace(/ /g, "_");

    $("#releasesTable").append('<tr id="' + clientId + '"><td>' + client + "</td><td></td><td></td><td></td><td></td></tr>");

    urlMap[client].forEach(function(url, index) {
      if (url.length == 0) {
        return;
      }
      const tdNum = index + 2;
      const fullUrl = "http://" + url + "/releaseinfo";
      getReleaseBranch(fullUrl)
        .then(response => {
          $("#" + clientId + " td:nth-child(" + tdNum + ")").html(response);
        })
        .catch(e => {
          $("#" + clientId + " td:nth-child(" + tdNum + ")").html("ERR");
          $("#" + clientId + " td:nth-child(" + tdNum + ")").addClass("text-danger");
        });
    });
  });
});

async function getReleaseBranch(url) {
  let response = await fetch(url, { cache: "no-store" });
  return await response.json();
}

We need to make sure that the fetch call does not hit the browser cache which is done by passing the “no-store” argument. If we fail to get a response from the endpoint we highlight that in the table as an error.

You can also add other useful info to this dashboard such as database connectivity, the status of some ‘health’ check, number of active users; use your imagination!

The full dashboard code along with the HTML can be found on Github.

No Comments
Share
4

About Roman Sery

I've been a software developer for over 10 years and still loving Java!

You also might be interested in

How to write a JSON response in Wicket

Jan 26, 2020

Learn how to create JSON response endpoints in Wicket

Understanding Wicket Models

Oct 5, 2019

The most important part of being an effective Wicket developer is understanding how to use Models. The #1 rule is, always use Models! Here's how.

Creating secure encrypted links in Wicket with Apache Shiro

Nov 16, 2019

Quickly get started creating secure encrypted links in your Wicket application!

Categories

  • aws
  • customization
  • database
  • debugging
  • enum
  • java
  • models
  • performance
  • projects
  • react
  • software design
  • Spring
  • tool
  • Uncategorized
  • wicket

Recent Posts

  • Rent Day
  • Self-contained Wicket Fragments
  • Pros and cons of unit testing
  • Themeable React Monopoly board
  • Please dont use client-specific release branches

Recent Comments

  • TCI Express Thanks for sharing such insightful information. TCI Express truly stands out as the best air logistics company, offering fast, secure, and efficient air express and cold chain transportation services....

    Tracking down a bug in production Wicket application ·  March 25, 2025

  • Tom Error: A zip file cannot include itself Can you please correct the plugin part so it doesn't use the same folder as input?

    Deploying Spring Boot app to AWS Beanstalk with Nginx customization ·  September 3, 2021

  • Golfman: Reality always wins I've used both Wicket and front-end JS frameworks and, having worked extensively on both, I can tell you that "Speed of development" is definitely NOT with the JS frameworks. You basically end up...

    Five reasons you should use Apache Wicket ·  August 29, 2021

  • Kiriller Sorry can not agree with you, wicket might be a well built technical framework. But the advantages of using a front-end framework like react.js and vue.js can not be beaten by Wicket nowadays. - Speed...

    Five reasons you should use Apache Wicket ·  August 23, 2021

  • Bernd Lauert Sorry but i have to refute your claims with the following arguments: 1. the Wicket community may be small but it is also very responsive, you usually get a helpful answer from the core devs on the...

    Five reasons you should use Apache Wicket ·  July 1, 2021

Archives

  • May 2021
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019

Contact Me

Send Message
Prev Next