Introduction
In today’s fast-paced IT world, system reliability is crucial. Monitoring key system metrics helps prevent downtime and costly errors. In this post, I’ll walk you through a project I built: a real-time system health dashboard that runs on a Windows VM using PowerShell, HTML, and CSS. It provides live insights on CPU, memory, disk health, uptime, network, and more — all wrapped in a sleek dark blue futuristic interface.
⸻
Why I Built This
Downtime and unnoticed errors can cause serious business losses. Existing monitoring tools can be complex or expensive. I wanted a simple, automated solution that provides clear, real-time data for system admins and IT pros.
⸻
Key Features
• Real-time monitoring of CPU usage, memory utilisation, disk health, uptime, network status, and critical event logs
• Interactive HTML dashboard with modern dark blue theme
• Automation via Windows Task Scheduler for continuous updates
• Built entirely with PowerShell scripting and web technologies (HTML/CSS)
⸻
Step-by-Step implementation
Planning the Dashboard
Planning the dashboard took a bit of time and heavy reasoning. There are many system health metrics, but my goal was to provide the key ones - CPU, memory, disk, uptime, network, and event logs. My focus was on real-time accuracy and easy readability. I gave the dashboard a futuristic dark blue theme to make the data visually appealing. I separated the PowerShell script, HTML and CSS into different files to make the project maintainable. Lastly, I automated the script via Task Scheduler to ensure regular updates without manual intervention.
Gathering System Data with PowerShell
In PowerShell, I was able to derive all the system metrics - these include the following:
HostName: shows the name that identifies your computer in a local network
$env: COMPUTERNAME
OSName: shows what Operating System you are using
$OSInformation = Get-CimInstance - ClassName Win32_OperatingSystem
$OSname = $OSInformation.Caption.Trim()
OSVersion: shows the version of the OS you are using
(Get-CimInstance -ClassName Win32_OperatingSystem).Version
OSBuild number: a specific identifier for the version of your OS
(Get-CimInstance -ClassName Win32_OperatingSystem).BuildNumber
CPU Load Percentage: shows you how much the CPU is currently in use
`(Get-CimInstance Win32_Processor).LoadPercentage
CPU Name(Model): Identifies the exact CPU chip
(Get-CimInstance Win32_Processor).Name
Number of Cores: Finds the physical processing power of the computer
(Get-CimInstance Win32_Processor).NumberOfCores
Number of Logical Processors: Finds the multitasking capacity of the CPU
(Get-CimInstance Win32_Processor).NumberOfLogicalProcessors
Total Physical Memory: The total installed RAM on your system
$totalMemory = (Get-CimInstance Win32_ComputerSystem).TotalPhysicalMemory/1GB
I round this figure to give a concise result
Available Memory: Determines how much RAM is currently available (free space)
$freeMemory = (Get-CimInstance Win32_OperatingSystem).FreePhysicalMemory/1MBI round this figure to give a concise result
To dive deeper - check the source code.
Exporting Data to HTML
In HTML, I created placeholders to accept the values from PowerShell. I made sure to get the content of the HTML file in PowerShell by using this syntax:
$html = Get-Content "C:\Users\Mikel\Desktop\index.html" -Raw
Get-Content: gets the data from the HTML file
-Raw: Make sure to get the content in the exact form, unedited, and unmodified.
After getting the contents in HTML (the placeholders), I assigned the various system metrics data to each placeholder. After replacing the values. I exported the HTML file to the output file.
Syntax:
$html | Out-File "reportFile" -Encoding utf8
reportFile: is the output file that renders the script in a web browser.
Styling with CSS
I created a separate CSS file and linked it to the HTML file using this syntax:
<link rel="stylesheet" href="style.css"
In the CSS file, I styled the page to my preference. I animated the background and gave it a dark-blue futuristic theme.
Automation with Task Scheduler
In my task scheduler, under the actions section in the top right panel. I chose “Create Basic Task”
In the “Create Basic Task” menu, I gave the script I want to automate a name.
Now in the “Trigger” menu, I was asked when I want to start the automation. I chose daily to always get real-time and updated data. Since I chose daily, I set the time to when the automation should start.
The “Action” menu is what you want the task to do, I chose to “start a program” since we are dealing with a script here.
In the “Start a Program” menu, I entered PowerShell as the script I want to run. In the “Add arguments” text bar, I wrote a script to bypass or ignore every restriction to be able to run the script successfully.
Syntax:
`-ExcecutionPolicy Bypass -File "path to HTML file"
The final part is the summary menu which shows you want you have done so far. I was okay with it and clicked on “Finish”
In my task creation, I wasn't given an option to set a time interval for the task to be repeated. So I after creating the task, I located the file and navigated to the Trigger section on the top panel. In the Trigger menu, I clicked on Edit. It opened a menu as shown in the image below:
I checked “Repeat task every” and set it to 15 minutes. This means my script will run every 15 mins.
Testing
Now to see if the task I created was working successfully, I had to manually run the task.
I located my file and clicked “Run” in the actions panel on the right side.
My script ran successfully as expected!!
FINAL RESULT
What I learnt
Through this project, I have strengthened my skills in PowerShell scripting, automation, and web design, while gaining practical experience in system monitoring and creating a user-friendly dashboard.
Conclusion
This project demonstrates how combining scripting and web technologies can create effective, real-time system monitoring tools. I welcome your feedback and encourage you to explore the repo!
Top comments (0)