Menu

Virtual Geek

Tales from real IT system administrators world and non-production environment

Create an interactive HTML report with PowerShell data

Basically I wrote this project as an fun/poc, but it went very well. I wanted to show the HTML + PowerShell capabilities to my (Asset collection team) colleagues as there are endless possibilities what you can build using HTML + Powershell. After launching the html file in the chromium browser the webpage looks like below. Records are pulled from JSON file format. The information is all shown about server hardware information, when you hover over information it shows additional detailed information. In the additional details, it shows the low level hardware information like Model and Part numbers, speed it is useful when replacing hardware parts, you dont need to open system and check the information.

The purpose of this script is, we had few Microsoft Windows Hyper-V host where we wanted to show complete hardware information on the web page (Asset Collection Team was doing this task manually) with server name search.

Microsoft Powershell Javascript HTML CSS programming interactive web page website url webserver browser html file button navigation bar.png

If you see inside the folder there are 3 main files and these 3 files need to be in the same directory.

  1. PowerShell ServerAssetInventory.ps1, which pulls the Computer names from Active Directory, connect to the servers over winrm protocol to CIM (The “Common Information Model” (CIM) is an open-source standard for accessing and displaying information about a computer.). And starts Collecting the hardware information, You can run the script using Task Scheduler to daily update the data.
  2. Once information is collected by PowerShell script, it is stored in JSON format under data.js file. 
  3. Once database is generated, Open the Index.html file in the browser, and your inventory website is working, it doesn't require web server.

I have already put some demo data inside the data.js file for your testing purpose.

powershell interactive website html javascript css script ps1 json file databse format collected data html report nice good.png

This is the work flow how to setup the script and inventory website in the scheduler and access the index.html file from either web server or file server.

Related Articles:
Install and Configure IIS Web Server on Windows Server 
Install an SSL-TLS Certificate In Microsoft IIS web server
 

Microsoft Powershell html javascript css portal web server file server task scheduler data json index.html browser file server powershell to html converter button

This is the small video in the action of web page.

Download this complete HTML reporting script here or it is also available on github.com.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
100
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

#Created By: http://vcloud-lab.com
#Date of creation: 27/08/2021
#Tested Environment:
#		PowerShell 5.1
#		Browser: Microsoft Edge, Google Chrome
 
 Import-Module -Name ActiveDirectory
$credential = Get-Credential -message "connect Active directory"
 $servers = Get-AdComputer -Filter {DNSHostName -like '*'} -Server 192.168.34.11 -Credential $credential
  
 #$servers = 'localhost', $env:COMPUTERNAME, '127.0.0.1', 'nullserver', '192.168.34.107'
 $result = @()
 $credential = Get-Credential -message "connect Remote server"
 $cimSessionOption = New-CimSessionOption -Protocol Default
 foreach ($computerName in $servers) {
 $hostName = $computerName.Name
 if (Test-Connection $computerName.DNSHostName -Quiet -Count 2)
 {
 try
 {
 $cimsession = New-CimSession -ComputerName $computerName.DNSHostName -SessionOption $cimSessionOption -Credential $credential -ErrorAction Stop
 Write-Host "Working on Server $($computerName.DNSHostName)" -BackgroundColor DarkGreen
 #Machine
 $computerSystem = Get-CimInstance -Class CIM_ComputerSystem -CimSession $cimsession -ErrorAction Stop | Select-Object Manufacturer, Model -ErrorAction Stop #Win32_ComputerSystem
 #serial Number
 $bios = Get-CimInstance -Class Win32_BIOS -CimSession $cimsession -ErrorAction Stop | Select-Object SerialNumber, SMBIOSBIOSVersion -ErrorAction Stop
 #Motherboad
 $baseBoard = Get-CimInstance -Class win32_baseboard -CimSession $cimsession -ErrorAction Stop | Select-Object Manufacturer, Product, SerialNumber, Version -ErrorAction Stop
 #Operating System:
 $operatingSystem = Get-CimInstance -Class CIM_OperatingSystem -CimSession $cimsession -ErrorAction Stop | select-Object Caption, OSArchitecture -ErrorAction Stop #win32_OperatingSystem
 #Processor:
 $processor = Get-CimInstance -Class CIM_Processor -CimSession $cimsession -ErrorAction Stop | select-Object Name, OSArchitecture, NumberOfCores, NumberOfEnabledCore, NumberOfLogicalProcessors, ProcessorId, PartNumber -ErrorAction Stop #Win32_Processor
 #Memory
 $physicalMemory = Get-CimInstance -Class CIM_PhysicalMemory -CimSession $cimsession -ErrorAction Stop | Select-Object DeviceLocator, SerialNumber, Capacity, @{N= "Speed";Expression = {if (($_.speed -ge '1000000000')) {"$($_.Speed / 1000000000) Gb/s"} Elseif ($_.Speed -gt 0) {"$($_.Speed / 1000000) Mb/s"}}},
 PartNumber, Manufacturer -ErrorAction Stop
 #Video Card
 $videoController = Get-CimInstance -Class win32_VideoController -CimSession $cimsession -ErrorAction Stop | Select-Object Name, VideoProcessor -ErrorAction Stop
 #Monitor
 $monitor = Get-CimInstance -Class WmiMonitorID -Namespace root\wmi -CimSession $cimsession -ErrorAction SilentlyContinue | Select-Object @{Label='ManufacturerName'; Expression={($_.ManufacturerName | Foreach-Object {[char]$_}) -join ""}},
 @{Label='ProductCodeID'; Expression={($_.ProductCodeID | Foreach-Object {[char]$_}) -join ""}},
 @{Label='UserFriendlyName'; Expression={($_.UserFriendlyName | Foreach-Object {[char]$_}) -join ""}},
 @{Label='SerialNumberID'; Expression={($_.SerialNumberID | Foreach-Object {[char]$_}) -join ""}},
 YearOfManufacture, WeekOfManufacture -ErrorAction Stop
 #https://www.lansweeper.com/knowledgebase/list-of-3-letter-monitor-manufacturer-codes/
 #Disk
 $diskDrive = Get-CimInstance -ClassName Win32_DiskDrive -CimSession $cimsession -ErrorAction Stop | Select-Object Model, SerialNumber, Size, FirmwareRevision, InterfaceType, Index -ErrorAction Stop
 #Network Adapter
 $networkAdapter = Get-CimInstance -ClassName Win32_NetworkAdapter -CimSession $cimsession -ErrorAction Stop | Where-Object {$_.PhysicalAdapter -eq $true} | Select-Object Name, ProductName, DeviceID, Speed, AdapterType, InterfaceIndex, MACAddress -ErrorAction Stop
 $objInv = New-Object psobject
 $objInv | Add-Member -Name ComputerName -MemberType NoteProperty -Value $hostName
 $objInv | Add-Member -Name computerSystem -MemberType NoteProperty -Value $computerSystem
 $objInv | Add-Member -Name bios -MemberType NoteProperty -Value $bios
 $objInv | Add-Member -Name baseBoard -MemberType NoteProperty -Value $baseBoard
 $objInv | Add-Member -Name operatingSystem -MemberType NoteProperty -Value $operatingSystem
 $objInv | Add-Member -Name processor -MemberType NoteProperty -Value $processor
 $objInv | Add-Member -Name physicalMemory -MemberType NoteProperty -Value $physicalMemory
 $objInv | Add-Member -Name videoController -MemberType NoteProperty -Value $videoController
 $objInv | Add-Member -Name monitor -MemberType NoteProperty -Value $monitor
 $objInv | Add-Member -Name diskDrive -MemberType NoteProperty -Value $diskDrive
 $objInv | Add-Member -Name networkAdapter -MemberType NoteProperty -Value $networkAdapter
 $result += $objInv
  
 } #try
 catch
 {
 Write-Host "Connection to server $hostName failed" -BackgroundColor DarkRed
 } #catch
 } #if (Test-Connection $computerName -Quiet -Count 2)
 else
 {
 Write-Host "server $computerName notreachable" -BackgroundColor DarkRed
 }
 } #foreach ($computerName in $servers) {
 $rawJson = (($result | ConvertTo-Json -Depth 3).replace('\u0000', '')) -split "`r`n"
 if ($rawJson[0] -eq '[')
 {
 $formatedJson = .{
 'var data = ['
 $rawJson | Select-Object -Skip 1
 } #replace first Line
 $formatedJson[-1] = '];' #replace last Line
 }
 else
 {
 $formatedJson = .{
 'var data = {'
 $rawJson | Select-Object -Skip 1
 } #replace first Line
 $formatedJson[-1] = '};' #replace last Line
 }
  
 $formatedJson | Out-File $PSScriptRoot\data.js -Force

Useful Articles
CREATE AND CONFIGURE SYMBOLIC LINK (MKLINK) ON WINDOWS SERVER
Powershell remote registry editorPart 1: Powershell: Get registry value data from remote computer
Part 1.1: Microsoft Powershell: Export remote registry information to excel
Part 2: Microsoft Powershell: remotely write, edit, modify new registry key and data value
Part 3: Microsoft Powershell: Delete registry key or values on remote computer
Get the List of installed softwares on remote computers with PowerShell

Go Back

 Posted in Powershell
  Tags powershell html website reports


Comment

Blog Search

Page Views

11954899

Archive

Comments

Follow me on Blogarama