Help understanding Pages


#1

Help me understand the New-UDPage a liltle better

I have a dashboard that starts

$Dashboard = New-UDDashboard -Title "CD-LAB-VC1 Stats" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {  

How do I go about creating a dedicated page just for this

can I use

$Page1 = New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }

$Dashboard = New-UDDashboard -Pages $page1 -Title "CD-LAB-VC1 Stats" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {

the above only shows me the default PowerShell Universal dashboard example page


#2

You can use “-Pages” OR “-Content”:

$Page1 = New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
New-UDDashboard -Pages $page1

or

New-UDDashboard -Content {
New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
}

For multiple pages i use this:

$pages = @()
$pages += New-UDPage -Name "Cluster1" -Icon cloud -Content { New-UDCard }
$pages += New-UDPage -Name "Cluster2" -Icon cloud -Content { New-UDCard }
New-UDDashboard -Pages $pages

#3

thanks @psott

So I’ve used

$pages += New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
$pages += New-UDPage -Name "VCSA" -Icon server -Content { New-UDCard }

$Initialization = New-UDEndpointInitialization  -variable "$session","$pages"

$Dashboard = New-UDDashboard -Pages $pages

but I get the following error running my script

New-UDDashboard : Parameter set cannot be resolved using the specified named parameters.
At C:\scripts\VMUG\BSOL-VMUG.ps1:51 char:14
+ ... Dashboard = New-UDDashboard -Pages $pages -Title "CD-LAB-VC1 Stats" - ...
+                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidArgument: (:) [New-UDDashboard], ParameterBindingException
    + FullyQualifiedErrorId : AmbiguousParameterSet,UniversalDashboard.Cmdlets.NewDashboardCommand 

#4

You don’t need to feed “$pages” to EndpointInitialization.
This is a basic version with your two pages:

Get-UDDashboard | Stop-UDDashboard

$pages = @()
$pages += New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
$pages += New-UDPage -Name "VCSA" -Icon server -Content { New-UDCard }

$Dashboard = New-UDDashboard -Pages $pages

Start-UDDashboard -Dashboard $Dashboard -Port 1111

New-UDEndpointInitialization is only used to initialize ever endpoint that UD will generate with specifiv variables or modules that you need.


#5

yeah the basic version works no problem. but I just cannot seem to incorporate it into my code, it’s the same error

New-UDDashboard : Parameter set cannot be resolved using the specified named parameters.
At C:\scripts\VMUG\BSOL-VMUG.ps1:51 char:14specified named parameters.
+ ... Dashboard = New-UDDashboard -Pages $pages  -NavBarColor "#FF252525" - ...

Here’s the dashboard code

$pages = @()
$pages += New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
$pages += New-UDPage -Name "VCSA" -Icon server -Content { New-UDCard }

$Dashboard = New-UDDashboard -Pages $pages  -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {
    New-UdRow {
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Hosts" -TextSize Medium -TextAlignment center -Icon cloud -AutoRefresh -RefreshInterval 60 -BackgroundColor "#1d6ef2" -FontColor "#cbd9ef" -Endpoint {
                $hosts = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/host" -Method GET -Headers $session).value.count
                $hosts
            } 
        }    
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Datastores" -TextSize Medium -TextAlignment center -Icon bitbucket -AutoRefresh -RefreshInterval 60 -BackgroundColor "#ad1fc4" -FontColor "#cbd9ef" -Endpoint {
                $datastores = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore" -Method GET -Headers $session).value.count 
                $datastores
            }

        }
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Total VM count" -TextSize Medium -TextAlignment center -AutoRefresh -Icon server -RefreshInterval 60 -BackgroundColor "#1cc941" -FontColor "#cbd9ef" -Endpoint {
                $vms = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/vm" -Method GET -Headers $session).value.count
                $vms
            }
        }

        New-UdColumn -Size 6  -Content {
            New-UDGrid -Title "VCSA Info" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("product", "version", "build") -Properties @("product", "version", "build") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/system/version").value | Out-UDGridData
            }
        }
    }

    New-UdRow {
        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-327").value.name -Type Pie -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-327").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-327").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }

        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-347").value.name -Type Doughnut -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef" -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-347").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free GB "; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-347").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }

        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-348").value.name  -Type Doughnut -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef" -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-348").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-348").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }   
    }

    New-UDRow {
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "VM Inventory" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Name", "Memory", "CPU", "State") -Properties @("name", "memory_size_MiB", "cpu_count", "power_state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/vm").value | Out-UDGridData
            }
        }
        
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "Networks" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Name", "type") -Properties @("name", "type") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/network").value | Out-UDGridData
            }
        }
    }
        
    New-UDRow {
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "Startup", "State", "Health") -Properties @("key", "value.startup_type", "value.state", "value.health") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | Out-UDGridData
            }
        }
    } 
                
} -EndpointInitialization $Initialization


Start-UDDashboard -Dashboard $Dashboard -name BMGM1 -Port 10001 -AutoReload

It doe run the code, but only shows me the exampl dashboard, not my dashboard


#6

You can’t use -Content with -Pages. Try taking your -Content and put it into a new page.


#7

so I have to use ‘-Pages’ instead of ‘-Content’ , see this is where I’m confused. Can’t I put my existing -Content'into the defined page???


#8

Something like this

$pages = @()
$pages += New-UDPage -Name "Home" -Content {
    New-UdRow {
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Hosts" -TextSize Medium -TextAlignment center -Icon cloud -AutoRefresh -RefreshInterval 60 -BackgroundColor "#1d6ef2" -FontColor "#cbd9ef" -Endpoint {
                $hosts = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/host" -Method GET -Headers $session).value.count
                $hosts
            } 
        }    
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Datastores" -TextSize Medium -TextAlignment center -Icon bitbucket -AutoRefresh -RefreshInterval 60 -BackgroundColor "#ad1fc4" -FontColor "#cbd9ef" -Endpoint {
                $datastores = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore" -Method GET -Headers $session).value.count 
                $datastores
            }

        }
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Total VM count" -TextSize Medium -TextAlignment center -AutoRefresh -Icon server -RefreshInterval 60 -BackgroundColor "#1cc941" -FontColor "#cbd9ef" -Endpoint {
                $vms = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/vm" -Method GET -Headers $session).value.count
                $vms
            }
        }

        New-UdColumn -Size 6  -Content {
            New-UDGrid -Title "VCSA Info" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("product", "version", "build") -Properties @("product", "version", "build") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/system/version").value | Out-UDGridData
            }
        }
    }

    New-UdRow {
        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-327").value.name -Type Pie -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-327").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-327").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }

        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-347").value.name -Type Doughnut -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef" -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity GB"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-347").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free GB "; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-347").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }

        New-UDColumn -Size 4 -Content {
            New-UDChart -Title (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore/datastore-348").value.name  -Type Doughnut -AutoRefresh -RefreshInterval 60 -BackgroundColor "#303235" -FontColor "#cbd9ef" -Endpoint {
                $Repo = @();
                $Repo += [PSCustomObject] @{ "Space" = "Capacity"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-348").value.Capacity) / 1073741824), 0)}
                $Repo += [PSCustomObject] @{ "Space" = "Free"; "Count" = [Math]::round((((Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore?filter.datastores=datastore-348").value.free_space) / 1073741824), 0)}
                $Repo | Out-UDChartData -LabelProperty Space -Dataset @(New-UDChartDataset -DataProperty Count -Label "GB" -BackgroundColor @("#24ad1d", "#4085ed") -HoverBackgroundColor @("#24ad1d", "#4085ed"))
            } -Options @{cutoutPercentage = 50}
        }   
    }

    New-UDRow {
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "VM Inventory" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Name", "Memory", "CPU", "State") -Properties @("name", "memory_size_MiB", "cpu_count", "power_state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/vm").value | Out-UDGridData
            }
        }
        
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "Networks" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Name", "type") -Properties @("name", "type") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/network").value | Out-UDGridData
            }
        }
    }
        
    New-UDRow {
        New-UDColumn -Size 6 -Content {
            New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "Startup", "State", "Health") -Properties @("key", "value.startup_type", "value.state", "value.health") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | Out-UDGridData
            }
        }
    } 
                
} -EndpointInitialization $Initialization

$pages += New-UDPage -Name "Cluster" -Icon cloud -Content { New-UDCard }
$pages += New-UDPage -Name "VCSA" -Icon server -Content { New-UDCard }

$Dashboard = New-UDDashboard -Pages $pages  -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef" 

Start-UDDashboard -Dashboard $Dashboard -name BMGM1 -Port 10001 -AutoReload

#9

Hey @Cragdoo,

I hope this may help. For my own sanity and to avoid confusion, I split my pages into separate .ps1 files. The entire script for each page is wrapped into a New-UDPage -Content block. Based on your example (shortened for brevity), your first page would be something like:

New-UDPage -Name 'Home' -Icon cloud -Content {
    New-UdRow {
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Hosts" -TextSize Medium -TextAlignment center -Icon cloud -AutoRefresh -RefreshInterval 60 -BackgroundColor "#1d6ef2" -FontColor "#cbd9ef" -Endpoint {
                $hosts = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/host" -Method GET -Headers $session).value.count
                $hosts
            } 
        }    
        New-UdColumn -Size 2 -Content {
            New-UDCounter -Title "Number of Datastores" -TextSize Medium -TextAlignment center -Icon bitbucket -AutoRefresh -RefreshInterval 60 -BackgroundColor "#ad1fc4" -FontColor "#cbd9ef" -Endpoint {
                $datastores = (Invoke-RestMethod -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/vcenter/datastore" -Method GET -Headers $session).value.count 
                $datastores
            }

        }
}

Then you would do the same for your “Cluster” and “VCSA” pages in separate .ps1 files.
Then you would have a separate dashboard script that sources the pages, (assuming you keep ,ps1 page scripts in a subdir called “Pages” ) for example:

$Home           = . (Join-Path $PSScriptRoot "Pages\Home.ps1")
$Cluster           = . (Join-Path $PSScriptRoot "Pages\Cluster.ps1")
$VCSA             = . (Join-Path $PSScriptRoot "Pages\VCSA.ps1")

Get-UDDashboard | Where-Object {$_.Port -eq 1111} | Stop-UDDashboard

Start-UDDashboard -Content { 
    New-UDDashboard -Title "CD-LAB-VC1 Stats" -NavBarColor $ElementColor -NavBarFontColor $NavBarFontColor -BackgroundColor $BackgroundColor -FontColor $FontColor -Pages @(
        $Home,
        $Cluster,
        $VCSA
    )
} -Port 1111 -AutoReload

I find it easier to work on pages in separate files so I don’t break anything on a page that I know works.


#10

thanks for the tip, will look to implement this


#11

I second @Jim recommendation of putting each page in their own .ps1 file. I created a sub-folder named Pages and use a loop to load the pages. It makes it much more manageable.

#region Loading dashboard pages
Get-ChildItem -Path $PagesPath -Recurse -Filter *.ps1 |
    ForEach-Object {
    $Pages += . $_.FullName
}
#endregion

#12

I like the dynamic nature of looping over the page scripts in the Pages folder, but once I started creating and publishing multiple dashboards, I wanted to cherry pick which pages made it into which dashboards without maintaining multiple copies of my page scripts. For example, I have a “Prod” dashboard on port 10000 and a “Test” Dashboard on port 10001. As I develop a new page, I only add it the test dashboard until it’s ready to use. Then I add it to Prod. And if I want to change an existing page, I make a temp copy, update it, then when finished, replace it. Both dashboards draw from the same pool of pages, but I get to pick who sees what pages.


#13

many thanks for all the tips guys, really helping this noob :slight_smile:

I have all these great ideas, but sadly not the coding skills to go with it !!


#14

This is the way I choose to build my dashboards. It allows you to break it down into individual files and I find that easier to manager as the dashboards grow.

Glad to see someone else doing this!


#15

To be honest, I adopted the approach from @adam from his github samples! :grinning:


#16

Sorry to bring this post back from the dead, but can you show how you were able to get the ‘Filter’ line to work for your tables?


#17

I think that would be from the UDGrid, not UDTable objects? Not positive though.