VMware: Dynamic reports using PowerCLI and AngularJS

In latest articles I provided several ways to produce HTML reports out of data gathered by running a PowerCLI script. Alarms, charts and reports are produced in a simple yet effective way by running a PowerCLI script which retrieve data after querying an entity, usually a vCenter Server, then data is literally outputted as an HTML file by the script itself.
In today's post I will introduce a far more elegant way to produce HTML reports upon data retrieved from an ESXi cluster. These reports are HTML pages based on AngularJS, Google's extremely powerful framework based on MVC pattern. Extremely trivializing, the logic behind AngularJS and an MVC based framework is to separate the logic (Controller) from the content (Model) and from the style (View).

Since I'm a beginner on AngularJS I'm not the most suitable guy to explain these concepts in plain detail so let's proceed to what's the scope of this article: generate a dynamic HTML report.

Let's start by dividing the scenario in two parts:

1)Back-end: where the "magic" happens.
2)Front-end: where you will get in touch with this "magic".

Back-end is composed by GenerateJSON.ps1 PowerCLI script. This script retrieves all virtual machines from a given cluster and exports VM infos in JSON, a format that can be easily processed and consumed by the front-end.

Most of the job is done by this line of PowerCLI code:

 Get-VM -Name $vm | Select * -ExcludeProperty ExtensionData | ConvertTo-Json -Depth 1 > $OutputPath\$($vm.Id).json  

This gets data for each VM in the given cluster and exports it in JSON saving the output in the proper folder. The $OutputPath folder is really important since by default the front-end will search for JSON files in such folder so be careful to set it properly. If you wonder why we exclude ExtensionData from the report that is to prevent an error due to a conflicting naming with an already existing property.

Since this script could take some time depending on how many VMs there are in your cluster be patient.

Another advice is to add this PowerCLI script as a Windows Scheduled Task so you can have VM "fresh-data" once in while and you don't have to run it manually every time.

Front-end comprises a web page that, by using AngularJS, allow us to dynamically list all virtual machines gathered by the back-end with corresponding details like OS they are running, configured amount of memory/CPUs, power state, host on which they are currently running on, etc. AngularJS allow us to do some nice tricks like searching and sorting results without reloading the web page every time.

Who is already skilled on AngularJS will recognize that the front-end is the official AngularJS tutorial application slightly modified and styled. Of course this is just an example to point out how endless are the possibilities offered by PowerCLI for reporting. You should edit/change it according to your needs, but this could be a good starting point.

This is a diagram who gives an idea of what front-end and back-end are:

Here's how the final result will look like:

This is the PowerCLI code composing the back-end and, as usual you can find it in my GitHub repository GenerateJSON.ps1



Front-end is composed by some files, all of them available on my GitHub.

Download AngularJS dynamic reports

This is the folder tree, be careful to download every file in order to make web page work.

Root AngularJS folder\
|__data\
|    |_PLACE HERE GENERATED JSON FILES
|__img\
|    |_logo.png
|__js\
|    |_app.js
|    |_controllers.js
|    |_filters.js
|__partials\
|    |_vm-detail.html
|    |_vm-list.html
|_index.html
|_newstyle.css

In the AngularJS project you will notice that JSON files are fetched "statically", they are placed in data folder and read from there.It would be a nice addition to provide these files to the AngularJS page using a web service, like a PHP page which dynamically calls PowerCLI each time a JSON file is needed.

That's all!!