alm-rangers / visualize-team-project-health-widgets

Enable users to visualise the overall health of builds, releases, bugs, and pull requests on their dashboard, delivering a visual cue similar to the Codify Build Light. Marketplace: https://marketplace.visualstudio.com/items?itemName=ms-devlabs.TeamProjectHealth

Visualize-Team-Project-Health-Widgets

When you're running multiple CI/CD pipelines, it's invaluable to visualize the overall health of your projects. This extension contains several dashboard widgets, that enable users to create a visual cue on their dashboards, like the Codify Build Light.

Overview Widgets

Using the Build Health Overview and Release Health Overview widget you can add an overall status of your builds and releases to your dashboard. As shown, we have (1) thirty-four successful builds, (2) zero failed builds and (3) zero builds in progress. We also have 9 successful releases, zero failed releases, and 15 releases that are in progress. The widgets change its colour to green if everything is healthy, blue if anything is building, and red if anything has failed.

Build Details

By combining the Build Health Overview and the Build Health Details widgets you can create a build board that shows the same overview status and a detailed status for each build.

Release Details

By combining the Release Health Overview and the Release Health Details widgets you can create a release board that shows the same overview status and a detailed status for each release. As shown, we have 15 releases that are in progress, which changed the colour of the Release Health Overview widget and associated Release Health Details widgets to blue.

When you're configuring your release widgets you have an option to handle rejected releases as failed releases.

Known Limitations

• Until a Promise Polyfill hotfix is added to the web platform of TFS on-premises, this extension is not supported with Internet Explorer (IE) 11.0.
• Only supported from TFS2017 Update 3 or higher, due to new API dependencies.

Learn More

Microsoft DevLabs is an outlet for experiments from Microsoft, experiments that represent some of the latest ideas around developer tools. Solutions in this category are designed for broad usage, and you are encouraged to use and provide feedback on them; however, these extensions are not supported nor are any commitments made as to their longevity.

View Notices for third party software included in this extension.

Contributors

We thank the following contributor(s) for this extension: Wouter de Kort, Jakob Ehn,Utkarsh Shigihalli, Philippe Miossec and Ed Elliott.

Feedback

We need your feedback! Here are some ways to connect with us:

• Add a comment in the Q&A section below and please add an actionable review.
• Send us an email.

Review the list of features and resolved issues of latest tools and extensions for information on the latest releases.

Contribute

Contributions are welcome. Here is how you can contribute:

• Submit bugs and help us verify fixes
• Submit pull requests for bug fixes and features and discuss existing proposals

Please refer to Contribution guidelines and the Code of Conduct for more details.

Data/Telemetry

This project collects usage data and sends it to Microsoft to help Microsoft improve its products and services. For more information about how Microsoft uses telemetry data, read the Microsoft privacy statement.

This telemetry is used for A|B testing and troubleshooting.

To turn off telemetry you need to fork this repository, publish, and use your own version of the project without replacing the __InstrumentationKey__ configuration key.

visualize-team-project-health-widgets's Issues

Allow me to filter by branch

When monitoring I only want to see builds that are triggered on the master branch (or any specified branch), even if the same build can be used for multiple branches.

Differentiate In Progress and Waiting approval

Currently Release widgets display the same icon whether the Release is In Progress or is Waiting Approval.
It would be nice if these 2 status may be differantiated.
Some kind of clock icon may represent Waiting Approval status.

Widget: Release Health Detail; is empty when the release was abandoned

Dashboard card: Release Health Detail; is empty when the release was abandoned (third tile)

Allow filtering by folder

We use a large nuber of builds, over 300. We use folders to group them and it would be great to select a folder and have all builds automatically included, same for releases.

Thank you

Build Health Overview & Release Health Overview are not showing correct stats about builds and releases respectively

I am using 'Build Health Overview' widget that is configured on a specific build pipeline in azure DevOps and that build pipeline have N number of succeeded builds and M number of failed builds.
But, 'Build Health Overview' showing 1 succeeded, 0 failed, 0 running builds instead of N succeeded, M failed, 0 running builds.

The same issue with 'Release Health Overview' widget, it is configured on a release pipeline that has some stages and total 5 past releases but in the dash-board, it is showing 0 succeeded, 2 failed, 0 running releases.

Attaching the screenshot of dashboard and release pipeline for 'Release Health Overview'

Regards,
Vikash

Project status?

Hi 👋

Is this project still active? It appears that a few fixes have been merged but hasn't been released.

If there isn't a response from owners, would the community be interested in contributing to a fork?

Failed to load error in widget

Hi,
Few of widgets stopped to work:

On premise TFS 2017 (Version 16.131.28226.3)

Regards
-Roman

Allow 1x1 tile size for Build Health Details

Up to date release?

Even though #5 has been fixed about 2 years ago, it doesn't seem to be released yet. Would it be possible to provide an up to date release?

Doesn't work in IE

This doesn't work in IE11. It says "widget cannot load" and then "Promise is undefined". It can be fixed by installing es6-promise and adding import "es6-promise/auto"; to the top of various .ts files. Sorry I can't submit a PR; I'm waiting for my organization to finish some paper work that would allow me to do that without getting fired.

Also, there are missing html content types in your vss-extension.json which prevents the page from displaying in any browser (in on-prem TFS2017U3, anyway) if anyone tries to rebuild/redeploy from your source. This seems to be true for all (or almost all?) extensions created by Microsoft or by ms-devops or by ALM Rangers.

Not supporting Microsoft Internet Explorer is also a seemingly universal shortcoming of Microsoft web extensions.

Drop down list for definitions is difficult to use

The list of Build defintions for "Build Health Overview doesn't render very well so difficult to use. Screenshot below

html contentType missing

Replying to #12 ,
The missing content types are for html files. They are always missing when I download MS extensions from the marketplace, or github. I deploy them to an on-prem TFS (2017U3) using Tfx-Cli, and if I don't add "contentType": "text/html" entries to the files object in vss-extension.json for all served .html files, all my browsers just download, or offer to download, html files instead of displaying them. I'm guessing later versions of TFS/ADO correctly infer the contentType from the file itself, and you don't deploy to the versions that don't (like 2017U3). Either that, or your deployment is adding the missing content types, at some point, to the manifest (but not committing those changes). Or I guess it's possible our app tier's web server is not configured properly.

widget return erreur ''Promise' is undefined

Hi,

On promise 2017 CU3, version 1.2.62

When I add any of the build/release widgets get erreur
'Promise' is undefined

Any help would be appreciated

Is this the "Team Project Health" extension?

Wondering if this repo is supposed to hold the extension https://marketplace.visualstudio.com/items?itemName=ms-devlabs.TeamProjectHealth

Builds with similar names show up in Build Health Overview

Build definitions with similar names are included in results.

Steps to reproduce

1. Create builds with similar names: Foo.Bar and Foo.Bar.Gated

2. Configure Build Health Overview only for build Foo.Bar.Gated

3. Run both builds

Result

The overview shows results from both build definitions.

Investigation
This line is the culprit:
definitions = definitions.filter(def => customSettings.selectedDefinitions.indexOf(def.name) != -1);

Foo.Bar is present within string Foo.Bar.Build
Thus not filtered from the original set of build definitions

proposed solutions

1. split customSettings.selectedDefinitions and check for full match
2. when selecting builds store the build id's in customSettings.selectedDefinitions (note: when a build is regenerated and gets a new id it won't be in the results)

Automatic refresh without refresing the whole dashboard

Is there a way to configure each widget to poll or add a webhook to a build/release pipeline? For example polling the status every 60 seconds would be great.

The default refresh time for dashboard is 5 minutes and it's too long for our builds. Also it makes the build monitor too flickery while it's in the middle of the office.

Failed to load resource: the server responded with a status of 400

POST https://dc.services.visualstudio.com/v2/track receiving
400 (Invalid instrumentation key)

Stage Health

We have a multi-stage (environment) release pipeline. It would be great to be able to pick the specific stage against the release health widget. As far as I can see it only allows for a release definition to be picked so it is not possible to target the results to a given stage.

I want to track any changes that made by my team, will this extension work?

I want to track any changes that made by my team, will this extension work?
include any new comment.

What kinds of filters are happening on this widget? All I get is 1 0 0 no matter what product i reference.

very confusing.. there must be a filter of some kind running here.

Release Health Detail Stays as In Progress if Release has Failing Tests

The Release Health Detail widget stays in the state of in progress (blue with round arrow) for a release which contains tasks that execute tests that do not all pass. Removing the test tasks allows the widget to display a success state (green with check). The desired behavior is that the widget would turn either yellow or red to match the state of the release.

This particular release is setup with a single stage that has two jobs. The first job deploys the code (RESTful API) to the environment and the second job uses Newman(PostMan) to execute a series of requests to the RESTful API.

Here is an image of the release tasks:

Filter by date?

I can't find information to verify the overview is for all builds in the project ever.

If so (as I suspect), is there a way to filter? (ie last 30 days) or to see the count over time?

Build health details : cannot open build by link

I have these wonderful widgets installed for our TFS 2018 onprem. When I open build info by clicking on Build health details widget from the dashboard I have an error:

Does this extension fully support TFS 2018 onprem?

Widget doesn't know about most build definitions

The config dropdown for the Build Health Details only shows three of my builds. Older ones. It looks like it is only grabbing builds from the first folder in my Build Definitions, but I don't know where to configure this.
Where does that list of build definitions come from, and is there a way to configure it?

Add less compilation to webpack

We're using a less file for the CSS styling of the widgets. For now, I've installed a VS Code extension that creates the .css file at save and I've added app.css to source control. It would be nicer if webpack would do the compilation and minification of the less file at build.