π‘ PSWriteHTML β Diagram Events
One of the new features I've worked on was connecting Diagrams with Tables. Someone suggested, and I thought it would be cool to be able to click on the Diagram node and find more details about it in a table next to it. But then I thought it would be even cooler if you could have multiple tables linked to one Diagram. For example, below, I've created two tables with Users and Computers and populated Diagram with that data.
I've also added Calendar (oh right, did I mention it's available now?) to be able to show some events on it if needed.
$Computers = Get-ADComputer -Filter * -Properties OperatingSystem, OperatingSystemVersion, PasswordLastSet | Select-Object -Property DNSHostName, Name, Enabled, OperatingSystem, OperatingSystemVersion, PasswordLastSet
$Users = Get-ADUser -Filter * -Properties SamAccountName, Name, Title, Surname, PasswordNeverExpires, WhenCreated, WhenChanged | Select-Object UserPrincipalName, SamAccountName, Name, Title, Surname, PasswordNeverExpires, WhenCreated, WhenChanged #-First 17
New-HTML -TitleText 'My Title' -UseCssLinks:$true -UseJavaScriptLinks:$true -FilePath $PSScriptRoot\Example30-LinkedTable.html -ShowHTML {
#New-HTMLLogo
New-HTMLTabOptions -SelectorColor Grey
New-HTMLTab -TabName 'Test' -IconSolid dice {
New-HTMLContent -HeaderText 'Active Directory Computers & Diagram' -HeaderBackGroundColor Grey {
New-HTMLPanel {
New-HTMLTable -DataTable $Computers -DataTableID 'OtherTable'
}
New-HTMLPanel {
New-HTMLDiagram {
New-DiagramNode -Label 'Domain' -To 'AD Computers', 'AD Users' -IconBrands delicious
New-DiagramNode -Label 'AD Computers' -IconBrands apple
New-DiagramNode -Label 'AD Users' -IconBrands instagram
New-DiagramEvent -ID 'SpecialID123' -ColumnID 1 #5-FadeSearch
New-DiagramEvent -ID 'OtherTable' -ColumnID 1
foreach ($_ in $Computers) {
if ($_.OperatingSystem -like '*Server*') {
New-DiagramNode -Label $_.Name -IconSolid server -To 'AD Computers'
} else {
New-DiagramNode -Label $_.Name -IconSolid desktop -To 'AD Computers'
}
}
foreach ($_ in $Users) {
New-DiagramNode -Label $_.SamAccountName -To 'AD Users' -IconRegular user-circle
}
}
}
}
New-HTMLSection -HeaderText 'Active Directory Users' -HeaderBackGroundColor Grey {
New-HTMLPanel {
New-HTMLTable -DataTable $Users -DataTableID 'SpecialID123' #-DisablePaging
}
New-HTMLPanel {
New-HTMLCalendar {
foreach ($_ in $Users) {
New-CalendarEvent -StartDate $_.WhenCreated -Title "User: $($_.SamAccountName)" -Description "User $($_.Name) created on $($_.WhenCreated)"
New-CalendarEvent -StartDate $_.WhenChanged -Title "User: $($_.SamAccountName)" -Description "User $($_.Name) modified on $($_.WhenChanged)"
}
foreach ($_ in $Computers) {
New-CalendarEvent -StartDate $_.PasswordLastSet -Title "Computer $($_.SamAccountName)" -Description "Computer $($_.DNSHostName) password last set $($_.PasswordLastSet)"
}
}
}
}
}
}
While the example above may be a tad complicated, and you may think linking Tables to Diagram is hard, it isn't. Linking two tables on ColumnID is just a matter of two simple lines.
New-DiagramEvent -ID $DataTableIDUsers -ColumnID 1
New-DiagramEvent -ID $DataTableIDComputers -ColumnID 1
As you see above, there are two parameters. One is called ID and one ColumnID. The ID is related to table ID, and ColumnID is just a column index. Table ID in standard usage is automatically generated, and you usually shouldn't care about it. But for linking Diagram with Table, it's necessary to be able to tell which table is related to a Diagram as there may be multiple Diagrams and multiple Tables. This means when you define New-HTMLTable, you need to set random DataTableID that you then pass to the New-DiagramEvent ID parameter.
$DataTableIDComputers = Get-Random -Minimum 100000 -Maximum 2000000
New-HTMLTable -DataTable $Computers -DataTableID $DataTableIDComputers
To give you a bit simpler example β this one should show how it works without all the complicated stuff.
$Processes = Get-Process | Select-Object -First 10
$TableID = 'RandomID'
New-HTML -TitleText 'My Title' -UseCssLinks -UseJavaScriptLinks -FilePath $PSScriptRoot\Example30-LinkedProcesses.html -ShowHTML {
New-HTMLSection -Invisible {
New-HTMLPanel {
New-HTMLTable -DataTable $Processes -DataTableID $TableID
}
New-HTMLPanel {
New-HTMLDiagram -Height '1000px' {
New-DiagramEvent -ID $TableID -ColumnID 1
New-DiagramNode -Label 'Processes' -IconBrands delicious
foreach ($_ in $Processes) {
New-DiagramNode -Label $_.ProcessName -Id $_.Id -To 'Processes'
}
}
}
}
}
Anytime you click on a node, the table on the left will trigger a match and show your choice.