Dashboarding with TeamCity

Data visualization has never been so popular as it is today. The human eye and brain are so powerful that they catch information and detect patterns on-the-fly: just in a blink of an eye you can extract a lot of information and make a decision on what to do next. Dashboards are everywhere for business and fun.

Here at JetBrains we have a ‘KitchenTV’ project – a set of pages rotated on several large screens in the office. In the beginning they were charts with data from our issue tracker, lists of tweets, nice widgets with weather information for all JetBrains office locations. Then the real-time visualization of the daily purchases was added – every time one of our products is bought, a ball of the corresponding color falls down forming several nice different-sized and -colored mountains at the end of the day, which are a lot of fun to look at.

Now we decided to contribute to this project and add some useful information from our internal TeamCity server for the common benefit, and we thought you might be interested too, so here it is.

At the moment we have two widgets. The first one shows the list of assigned investigations – so your colleagues can see your involvement in problem digging and fixing.

Screen Shot 2015-02-09 at 14.35.37

The next widget displays the list of most recent VCS commits. It means that anyone can quickly understand what their teammates are working on.

Screen Shot 2015-02-13 at 14.45.16

The technologies behind these widgets are simple: REST + AngularJS, so it is basically the static content. If you want to use the widgets with your own TeamCity, you can choose one of two options:

  • install the TeamCity.Widgets plugin to your TeamCity or

  • install the TeamCity.StaticUIExtention plugin and add widgets content as a folder under the StaticUIExtention config root. Once you restart your server to make TeamCity.StaticUIExtention work, you can update the static content without further restarts.

The code of the plugin is open and available on GitHub.

Your feedback is welcome: in the comments here or in our issue tracker.

Enjoy the widgets and happy building!

This entry was posted in Uncategorized. Bookmark the permalink.

4 Responses to Dashboarding with TeamCity

  1. Alex says:

    Looks interesting, but I am not sure I get how to deploy this widget. Do I need to compile the source code or can I download a package from somewhere?
    Do I need then to place it under the “plugins” folder?

  2. Pingback: JetBrains Newsletter, March 2015 | Indie Game Developer!

    • Ekaterina Shliakhovetskaja says:

      Hi Alex,

      You can either install TeamCity.Widgets plugin or TeamCity.StaticUIExtension plugin and then add the static content under its config folder. I’ve added more details in description on GitHub.
      You can contact me directly shkate at jetbrains if you have any further questions. We will appreciate if you try the widgets and give us your feedback.

      Regards,
      Kate

  3. Bjorn van der Neut says:

    Hello,

    I am trying to install the widget but I am stuck :)
    Installed:
    https://github.com/JetBrains/TeamCity.WidgetsPlugin
    https://github.com/JetBrains/TeamCity.Widgets

    But now I don’t know how to proceed. If I go to my teamcity server in the browser:
    http://172.21.9.90/app/widgets/investigation/top_fullScreen.html

    I get this message:
    ERROR: Content for Widgets plugin was not found. Requested resource: investigation/top_fullScreen.html, error: Requested resource D:\plugins\Widgets\investigation\top_fullScreen.html doesn’t exist.

    The strange thing the url is I think incorrect. Because I see the file in this path:
    D:/TeamCity/webapps/ROOT/plugins/Widgets/investigations/top_fullScreen.html

    Hope you can help me out?

Comments are closed.