PowerShell Universal Dashboard: Making interactive dashboards
Tags: powershell, dashboard, monitoring, react
Published: 2019-06-11 08:18:53

---
title: PowerShell Universal Dashboard: Making interactive dashboards
published: true
description: PowerShell Universal Dashboard is one of the most interesting open-source projects I have ever seen.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6dz4wnclr3uuwaf1oeo5.jpg
tags: powershell, dashboard, monitoring, react
---

# PowerShell Universal Dashboard

[PowerShell Universal Dashboard](https://universaldashboard.io/) 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](https://media.giphy.com/media/nxuFTiUbYR3SE/giphy.gif)

## Let's build one

Let's get down to business and set up a simple dashboard so we can get to know the tool.
<sub>**(To follow along you'll need PowerShell 5+ and to follow the [instructions on how to install](https://docs.universaldashboard.io/getting-started) the module.)**<sub/>

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

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

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

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:
```console
Name       Port Running
----       ---- -------
Dashboard2 1000    True
```

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

![dashboard](https://thepracticaldev.s3.amazonaws.com/i/rqco7vwsux6857nv8yth.png)

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

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

```
Way cooler now, right?
![azure theme](https://thepracticaldev.s3.amazonaws.com/i/hh00mjohwrc2s1vqzkic.png)

## Monitoring

PowerShell Universal Dashboard has a component called [monitor](https://docs.universaldashboard.io/components/monitors) 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.

```powershell
$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
```
Basically what we are doing here is using the [Get-Counter cmdlet](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.diagnostics/get-counter?view=powershell-5.1) 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](https://docs.universaldashboard.io/components/data-visualizations/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](https://www.chartjs.org/docs/latest/).

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

```powershell
$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
```

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? :smiley:

![](https://thepracticaldev.s3.amazonaws.com/i/yf24d0vspd7h7shh8zeo.png)

**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](https://docs.universaldashboard.io/).

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 :)**