DEV Community

Cover image for PowerShell Universal Dashboard: Making interactive dashboards
José Coelho
José Coelho

Posted on

PowerShell Universal Dashboard: Making interactive dashboards

PowerShell Universal Dashboard

PowerShell Universal Dashboard is a very cool PowerShell module and one of the most interesting open source projects I have come across.
It allows you to create web-based, beautiful and interactive dashboards for your IT systems, using solely PowerShell commands.
It works great for setting up monitoring dashboards to keep track of your systems.

It's every sysadmin's dream to have a big screen in their office where they can see the status of their systems.

monitor

Let's build one

Let's get down to business and set up a simple dashboard so we can get to know the tool.
(To follow along you'll need PowerShell 5+ and to follow the instructions on how to install the module.)

Create a dashboard.ps1 file and add the following code:



$dashboard = New-UDDashboard -Title "DevTo Dashboard" -Content{
    New-UDHeading -Text "DevTo"
}

Start-UDDashboard -Dashboard $dashboard -Port 1000 -AutoReload


Enter fullscreen mode Exit fullscreen mode

Here we are creating our dashboard object and adding a heading to it.
If everything is right once you execute this file you should get the following output:



Name       Port Running
----       ---- -------
Dashboard2 1000    True


Enter fullscreen mode Exit fullscreen mode

And your dashboard should be available at http://localhost:1000 :

dashboard

Now let's make it cooler and add a different theme, I particularly like the built-in Azure theme:



$theme = Get-UDTheme -Name 'Azure'
$dashboard = New-UDDashboard -Title "DevTo Dashboard" -Theme $theme -Content{
    New-UDHeading -Text "DevTo"
}
...



Enter fullscreen mode Exit fullscreen mode

Way cooler now, right?
azure theme

Monitoring

PowerShell Universal Dashboard has a component called monitor which is a particular type of chart that tracks data over time. You can use it, for example, to plot your CPU or memory usage.



$theme = Get-UDTheme -Name 'Azure'
$dashboard = New-UDDashboard -Title "DevTo Dashboard" -Theme $theme -Content{
New-UdMonitor -Title "CPU (% processor time)" -Type Line -DataPointHistory 20 -RefreshInterval 10 -ChartBackgroundColor '#80FF6B63' -ChartBorderColor '#FFFF6B63'  -Endpoint {
            try {
                Get-Counter '\Processor(_Total)\% Processor Time' -ErrorAction SilentlyContinue | Select-Object -ExpandProperty CounterSamples | Select-Object -ExpandProperty CookedValue | Out-UDMonitorData
            }
            catch {
                0 | Out-UDMonitorData
            }
        }
}

Start-UDDashboard -Dashboard $dashboard -Port 1000 -AutoReload


Enter fullscreen mode Exit fullscreen mode

Basically what we are doing here is using the Get-Counter cmdlet to fetch real-time data from Windows performance monitoring tool, and then piping it through the Out-UDMonitorData which will convert this information into data readable by the Monitor.

Un*x users: This specific command will only work on Windows, so you would need to find a different strategy to get your CPU data.
Maybe try using the mpstat command from the sysstat package and then parsing the data with Powershell.

Charts

Another really useful component is charts. You can display all sorts of data into either a bar, line, doughnut or pie chart. They are very customizable and easy to use as they are built with the Chart.js library.

You can, for example, use a doughnut chart to show you used and available disk space:



$theme = Get-UDTheme -Name 'Azure'
$dashboard = New-UDDashboard -Title "DevTo Dashboard" -Theme $theme -Content{

New-UDChart -Title "Disk Space" -Type Doughnut -RefreshInterval $refreshRate -Endpoint {  
            try {
                Get-CimInstance -ClassName Win32_LogicalDisk | Where-Object {$_.DriveType -eq '3'} | Select-Object -First 1 -Property DeviceID,Size,FreeSpace | ForEach-Object {
                    @([PSCustomObject]@{
                        Label = "Used Space"
                        Data = [Math]::Round(($_.Size - $_.FreeSpace) / 1GB, 2);
                    },
                    [PSCustomObject]@{
                        Label = "Free Space"
                        Data = [Math]::Round($_.FreeSpace / 1GB, 2);
                    }) | Out-UDChartData -DataProperty "Data" -LabelProperty "Label" -BackgroundColor @("#80FF6B63","#8028E842") -HoverBackgroundColor @("#80FF6B63","#8028E842") -BorderColor @("#80FF6B63","#8028E842") -HoverBorderColor @("#F2675F","#68e87a")
                }
            }
            catch {
                0 | Out-UDChartData -DataProperty "Data" -LabelProperty "Label"
            }
        }

}

Start-UDDashboard -Dashboard $dashboard -Port 1000 -AutoReload


Enter fullscreen mode Exit fullscreen mode

You can now join both the Monitor and the Chart on your dashboard. Here's how your dashboard should look by now. Pretty cool hun? 😃

Un*x users: Again this will only work for Windows, but you can easily workaround and adapt it for Un*x systems.

And there you have it! A pretty cool a good looking dashboard. Now get yourself a big screen on the wall and display it.

Explore

These examples are just a fraction of what this framework can do. You can also build simple REST API, have multiple pages rotate dynamically, have input forms to fill out and a lot of other components.

The best thing you can do is to check by yourself, they have pretty good documentation.

I hope you found this tool as interesting and useful as I did.

What do you think about this PowerShell module? If you have used this tool, let me know how in the comments :)

Top comments (2)

Collapse
 
barneyskirvin profile image
Barney Skirvin

ou can now join both the Monitor and the Chart on your dashboard. Here's how your dashboard should look by now???? how did you do this???

Collapse
 
jcoelho profile image
José Coelho

There is a grid system (just like with CSS frameworks).
You can put the monitor and the chart on a separate a column