Hi
I need help in following topics
I could not find any good information related to these. I will be helpful if you could help here as i am new to UD but have fair bit of idea on Powershell
Thanks in advance,
Regards,
Manmeet
The best way to answer all of your questions above is to start building a dashboard that fit your needs and when you start doing that you will be able to find helpful information and examples that solves your current issue you are facing because each component has different use in the dashboard so for example look at below code for UD that uses a grid and button at the same time so end user can use the grid to filter and the button to execute the task they need.
$Schedule1 = New-UDEndpointSchedule -Every 20 -Second
$Services = New-UDEndpoint -Schedule $Schedule1 -Endpoint {
$Cache:Services = (Get-Service -ComputerName "test") | Select-Object Name, Status | Sort-Object Name | ForEach-Object {
$FontColor = 'Green'
if ($_.Status -ne 'Running') {
$FontColor = 'Red'
}
[PSCustomObject]@{
Name = $_.Name
Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ color = $FontColor } } -Content { $_.Status.ToString() }
Select = if ($_.Status -eq 'Stopped') {
New-UDButton -BackgroundColor "Red" -Text "Start" -OnClick {
Get-Service -ComputerName "test" -Name $_.Name | Start-Service
Show-UDToast -Message "Service Started!" -MessageColor Green -Title $_.Name -Position topCenter -Duration 2500
}
}
else {
if ($_.Status -eq 'Running') {
New-UDButton -BackgroundColor "#26a69a" -Text "Stop" -Icon stop_circle -OnClick {
Get-Service -ComputerName "test" -Name $_.Name | Stop-Service
Show-UDToast -Message "Service Stopped!" -MessageColor Red -Title $_.Name -Position topCenter -Duration 2500
}
}
}
}
}
}
$HomePage = New-UDPage -Name "Home" -Icon home -Content {
New-UDCard -Title "Welcome to Dashboard! You can begin by clicking hamburger menu icon above"
New-UdRow {
New-UdColumn -Size 6 -Content {
New-UdRow {
New-UdColumn -Size 12 -Content {
New-UdTable -Title "Server Information" -Headers @(" ", " ") -BackgroundColor "#050f7f" -FontColor "#FFFFFF" -Endpoint {
@{
'Computer Name' = $env:COMPUTERNAME
'Operating System' = (Get-CimInstance -ClassName Win32_OperatingSystem).Caption
'Total Disk Space (C:)' = (Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DeviceID='C:'").Size / 1GB | ForEach-Object { "$([Math]::Round($_, 2)) GBs " }
'Free Disk Space (C:)' = (Get-CimInstance -ClassName Win32_LogicalDisk -Filter "DeviceID='C:'").FreeSpace / 1GB | ForEach-Object { "$([Math]::Round($_, 2)) GBs " }
'Product Version' = "2.8.3"
}.GetEnumerator() | Out-UDTableData -Property @("Name", "Value")
}
}
}
New-UdRow {
New-UdColumn -Size 3 -Content {
New-UdChart -Title "Memory by Process" -Type Doughnut -RefreshInterval 5 -Endpoint {
Get-Process | ForEach-Object { [PSCustomObject]@{ Name = $_.Name; WorkingSet = [Math]::Round($_.WorkingSet / 1MB, 2) } } | Out-UDChartData -DataProperty "WorkingSet" -LabelProperty Name
} -Options @{
legend = @{
display = $false
}
}
}
New-UdColumn -Size 3 -Content {
New-UdChart -Title "CPU by Process" -Type Doughnut -RefreshInterval 5 -Endpoint {
Get-Process | ForEach-Object { [PSCustomObject]@{ Name = $_.Name; CPU = $_.CPU } } | Out-UDChartData -DataProperty "CPU" -LabelProperty Name
} -Options @{
legend = @{
display = $false
}
}
}
New-UdColumn -Size 3 -Content {
New-UdChart -Title "Handle by Process" -Type Doughnut -RefreshInterval 5 -Endpoint {
Get-Process | Out-UDChartData -DataProperty "HandleCount" -LabelProperty Name
} -Options @{
legend = @{
display = $false
}
}
}
New-UdColumn -Size 3 -Content {
New-UdChart -Title "Threads by Process" -Type Doughnut -RefreshInterval 5 -Endpoint {
Get-Process | ForEach-Object { [PSCustomObject]@{ Name = $_.Name; Threads = $_.Threads.Count } } | Out-UDChartData -DataProperty "Threads" -LabelProperty Name
} -Options @{
legend = @{
display = $false
}
}
}
}
New-UdRow {
New-UdColumn -Size 12 -Content {
New-UdChart -Title "Disk Space by Drive" -Type Bar -AutoRefresh -Endpoint {
Get-CimInstance -ClassName Win32_LogicalDisk | ForEach-Object {
[PSCustomObject]@{ DeviceId = $_.DeviceID;
Size = [Math]::Round($_.Size / 1GB, 2);
FreeSpace = [Math]::Round($_.FreeSpace / 1GB, 2);
} } | Out-UDChartData -LabelProperty "DeviceID" -Dataset @(
New-UdChartDataset -DataProperty "Size" -Label "Size" -BackgroundColor "#80962F23" -HoverBackgroundColor "#80962F23"
New-UdChartDataset -DataProperty "FreeSpace" -Label "Free Space" -BackgroundColor "#8014558C" -HoverBackgroundColor "#8014558C"
)
} -Options @{
scales = @{
yAxes = @(@{
min = 0
})
}
}
}
}
}
New-UdColumn -Size 6 -Content {
New-UdRow {
New-UdColumn -Size 6 -Content {
New-UdMonitor -Title "CPU (% processor time)" -Type Line -DataPointHistory 20 -RefreshInterval 5 -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
}
}
}
New-UdColumn -Size 6 -Content {
New-UdMonitor -Title "Memory (% in use)" -Type Line -DataPointHistory 20 -RefreshInterval 5 -ChartBackgroundColor '#8028E842' -ChartBorderColor '#FF28E842' -Endpoint {
try {
Get-Counter '\memory\% committed bytes in use' -ErrorAction SilentlyContinue | Select-Object -ExpandProperty CounterSamples | Select-Object -ExpandProperty CookedValue | Out-UDMonitorData
}
catch {
0 | Out-UDMonitorData
}
}
}
}
New-UdRow {
New-UdColumn -Size 6 -Content {
New-UdMonitor -Title "Network (IO Read Bytes/sec)" -Type Line -DataPointHistory 20 -RefreshInterval 5 -ChartBackgroundColor '#80E8611D' -ChartBorderColor '#FFE8611D' -Endpoint {
try {
Get-Counter '\Process(_Total)\IO Read Bytes/sec' -ErrorAction SilentlyContinue | Select-Object -ExpandProperty CounterSamples | Select-Object -ExpandProperty CookedValue | Out-UDMonitorData
}
catch {
0 | Out-UDMonitorData
}
}
}
New-UdColumn -Size 6 -Content {
New-UdMonitor -Title "Disk (% disk time)" -Type Line -DataPointHistory 20 -RefreshInterval 5 -ChartBackgroundColor '#80E8611D' -ChartBorderColor '#FFE8611D' -Endpoint {
try {
Get-Counter '\physicaldisk(_total)\% disk time' -ErrorAction SilentlyContinue | Select-Object -ExpandProperty CounterSamples | Select-Object -ExpandProperty CookedValue | Out-UDMonitorData
}
catch {
0 | Out-UDMonitorData
}
}
}
New-UdColumn -Size 6 -Content {
New-UdMonitor -Title "SQL Disk (% disk time)" -Type Line -DataPointHistory 20 -RefreshInterval 5 -ChartBackgroundColor '#80E8611D' -ChartBorderColor '#FFE8611D' -Endpoint {
try {
Get-Counter '\physicaldisk(_total)\% disk time' -ComputerName lmsdbstg06 -ErrorAction SilentlyContinue | Select-Object -ExpandProperty CounterSamples | Select-Object -ExpandProperty CookedValue | Out-UDMonitorData
}
catch {
0 | Out-UDMonitorData
}
}
}
}
New-UdRow {
New-UdColumn -Size 12 {
New-UdGrid -Title "Processes" -Headers @("Name", "ID", "Working Set", "CPU") -Properties @("Name", "Id", "WorkingSet", "CPU") -AutoRefresh -RefreshInterval 60 -Endpoint {
Get-Process | Select-Object Name, ID, WorkingSet, CPU | Out-UDGridData
}
}
}
}
}
}
$Page1 = New-UDPage -Name "Services" -Icon server -Content {
New-UDScrollUp
New-UDElement -Id "Services" -Tag div4 -EndPoint {
New-UDGrid -Id "Grid" -Title "Services" -Headers @("Name", "Status", "Select") -Properties @("Name", "Status", "Select") -Endpoint {
$Cache:Services | Out-UDGridData
}
}
}
Start-UDDashboard -Endpoint @($Services) -Content {
New-UDDashboard -Pages @($HomePage, $Page1) -Title "Test Dashboard" -Color '#FF050F7F'
} -Port 1000 -Name Test
if you run this dashboard you will get a hint or an idea about mixing some components together to accomplish your task.
Hello @manmeet27 it did take a good while for me to wrap my head around how UD works and all of the commands available and how to use them. You do have a good few wishes and I mean genies only grant 3 wishes but can try my best…
= https://docs.universaldashboard.io/components/custom-components#custom-components
it also allows you to build basic HTML using the -tag parameter and then the HTML element name
I got an example of using sync-udelement here:- https://github.com/psDevUK/UD-Field and if you search through my github repos you will see more occurances of this.
I also got a blog site that needs updating here:- https://psdevuk.github.io/ud-flix/Custom-Date-Picker/ on this particular blog shows how to use get-udelement
3 Using endpoints…https://psdevuk.github.io/ud-flix/Content-vs-Endpoint/ again various other blogs with the demo files use endpoints, and numerous github examples I got
It’s personal preference. I always prefer the grid https://poshud.com/New-UDGrid as it offers more features compared to the table…I did do my own table component located here:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.GoogleTable which tries to give the best of both worlds
I got a whole dashboard on display here https://github.com/psDevUK/psUniversalDashboard which uses numerous grids and populates the data using the $Cache variable which is documented https://docs.universaldashboard.io/ as well as scheduled endpoints
I believe this now answers all of your questions 