How to Refresh data in New-UdGrid after change

Is there a way to call the refresh button using Powershell in the New-UdGrid?

Ideally, I would like to call it after a user presses one of the “Stop/Start” buttons.

Currently, my solution is to get the users to press the refresh button, but this invites user error and requires training if they are very new.

I was hoping that -AutoRefresh would detect an update when the"Stop/Start" button was pressed but that doesn’t look like the case unless I missed something.

Sync-udelement -ID “YourGridsID” should do the trick.
It might require the -broadcast parameter depending on where you call it from.

Hi PorreKaj,

It looks like I wasn’t using the -ArgumentList after I that Sync-UDElement works correctly.

Thank you for your help

New-UDButton -Text "RELOAD TABLE" -BackgroundColor red -FontColor yellow -OnClick (New-UDEndpoint -Endpoint { 
Show-UDToast -Message "Reload"
Sync-UDElement -Id DIV
}

New-UdGrid -Id DIV -Title "test" -PageSize 50 -DefaultSortColumn date  -RefreshInterval 60 -ArgumentList $Query,$Service,$Placeholder-Endpoint {
            $NewudGrid = "InNewudGrid"
            $Query = $ArgumentList[0]
            $Service= $ArgumentList[1]
            $Placeholder = $ArgumentList[2]
1 Like

Hi there @maylife

I am curently trying to set up my self a service page like yours and i have a hard time figuring it out.

Would you share your code with me ? it would be much appreciated :slight_smile:

Thank you in advance !

1 Like

Hi @FarcasR

I can do you one better; here are my examples/play/testing Dashboard.
I have made examples of Dashboards in case I need to look over what I and others have done.

Please make sure you pass on what you learn from this project to the others here, and we are all learning together.
The kind people on these forums have been so helpful the below Dashboard has been a group effect.

Enjoy,
Maylife

$Service = Get-Service
#Stop-UDDashboard -port 1001



$page0 = New-UDPage -name "Current" -Endpoint {

New-UDCard -Content {
    New-UDParagraph -text "This was made by Maylife"
    New-UDParagraph -text "This one just works"
    New-UDParagraph -text 'Other pages contain my testing and other examples'
    }

New-UdGrid -Title "Service" -PageSize 20 -AutoRefresh  -RefreshInterval 60 -Id "Grid1" -Endpoint {
    Get-Service | select Name, DisplayName, Status | ForEach-Object {
        $button_name = $_.Name
        Switch ($_.Status) {
            'Stopped' { 
                $button_text = "Start"
                $button_colour = "Green"
            }
            'Running' { 
                $button_text = "Stop"
                $button_colour = "Red"
            }
            Default { 
                $button_text = "ERROR"
                $button_colour = "black"
        }
    }
    [PSCustomObject] @{
        "Name" = $_.Name
        "Display Name" = $_.DisplayName
        "Status" = Switch ($_.Status) {
            'Stopped' { New-UDParagraph -Text $_ -Color red }
            'Running' { New-UDParagraph -Text $_ -Color green }
             Default  { New-UDParagraph -Text $_ }
        }
        'Start/Stop' = Switch ($_.Status) {
            'Stopped' { 
                New-UDButton -Text "Start" -BackgroundColor Green -OnClick (New-UDEndpoint -Endpoint {       
                    Start-Service $button_name;
                    Sync-UDElement -Id "Grid1"
                    Show-UDToast -Message "Started $button_name" -Duration 5000 -CloseOnClick
                  })
              }
            'Running' {
                New-UDButton -Text "Stop" -BackgroundColor Red -OnClick (New-UDEndpoint -Endpoint {       
                   stop-Service $button_name;                      
                   Sync-UDElement -Id "Grid1"
                   Show-UDToast -Message "Stopped $button_name" -Duration 5000 -CloseOnClick
                 })
            }
            Default  { 
               New-UDButton -Text "ERROR" -BackgroundColor BLACK -OnClick (New-UDEndpoint -Endpoint {       
                    get-Service $button_name;
                    Sync-UDElement -Id "Grid1"            
                    Show-UDToast -Message "error $button_name" -Duration 5000 -CloseOnClick
                    })
                }
            }
        }
    } | Out-UDGridData 
}
}

$page1 = New-udpage  -name "Dympage" -Content {

New-UDCard -Content {
    New-UDParagraph -text "This was made by Maylife"
    New-UDParagraph -text "Its very buggy so I have moved away from cards"
    New-UDParagraph -text 'See $Page[0] and Page[4]'
    }

New-UDHeading -Text "Here is a list of Services Running on your computer" -Size 5
New-UDElement -Tag div -Id "Div1" -Endpoint {
New-UDLayout   -Columns 6 -Content {  
   
    ForEach ($S in $Service) {
        New-UDCard  -Content {
            New-UDParagraph -Text ('Name: '+ $S.name) 
            New-UDParagraph -Text ('DisplayName: ' + $S.DisplayName)
            
            Switch ((Get-Service ($S.name)).Status) {
                'Stopped' { New-UDParagraph -Text ('Status: ' + (Get-Service (($S).name)).Status) -Color red }
                'Running' { New-UDParagraph -Text ('Status: ' + (Get-Service (($S).name)).Status) -Color green }
                 Default  { New-UDParagraph -Text ('Status: ' + (Get-Service (($S).name)).Status) }
            }

            New-UDInput -Title "Stop-Service" -SubmitText 'Stop' -Endpoint {
                stop-Service $S.name
                New-UDInputAction -Toast (Get-Service $S.name).Status
                New-UDInputAction -Content {Sync-UDElement -Id "Div1"}
                sleep -Seconds 5
                New-UDInputAction -RedirectUrl "Dympage"
            }

            New-UDInput -Title "Start-Service" -SubmitText 'Start'  -Endpoint {
                Start-Service $S.name
                New-UDInputAction -Toast (Get-Service $S.name).Status
                New-UDInputAction -Content { Sync-UDElement -Id "Div1"}
                sleep -Seconds 5
                New-UDInputAction -RedirectUrl "Dympage"
                }
            } 
        }

        
    }
}
}

$page2 = New-UDPage -Name "Windows-Service-Dashboard" -Icon home -Content  {

New-UDCard -Content {
    New-UDParagraph -text "This was made by cadayton"
    New-UDParagraph -text "URL of post https://forums.universaldashboard.io/t/refresh-content-in-new-udparagraph-after-a-new-udinput-event/1311/7"
    New-UDParagraph -text "Press the button, then press the refresh on the table"
    }

New-UDGrid -Title "Windows-Service-Report" -Endpoint {
$servicesDB = Get-Service;
[int]$psIdx = $servicesDB.Count - 1;
if ($psIdx -gt 0) {
  $PSreports = 0 .. $psIdx | ForEach-Object {
    [PSCustomObject] @{Status = 'data1'; Name = 'data2'; DisplayName = 'data3'; Action = 'data4';}
  }
} else {
  $PSreports = [PSCustomObject] @{Status = 'data1'; Name = 'data2'; DisplayName = 'data3'; Action = 'data4';}
}
$psIdx = 0;
$servicesDB | ForEach-Object {
    $PSreports[$psIdx].Name = $_.Name
    $PSreports[$psIdx].DisplayName = $_.DisplayName
    if ($_.Status -eq "Running") {
      $PSreports[$psIdx].Status = "Running";
      $PSreports[$psIdx].Action = New-UDButton -Text "Stop" -BackgroundColor Red -OnClick (New-UDEndpoint -Endpoint {
        Stop-Service $_.Name;
        New-UDElement -
        Show-UDToast -Message "Stopped $_.Name" -CloseOnClick
        
      })
    } else {
      $PSreports[$psIdx].Status = "Stopped";
      $PSreports[$psIdx].Action = New-UDButton -Text "Start" -BackgroundColor Green -OnClick (New-UDEndpoint -Endpoint {
        Start-Service $_.Name;
        
        Show-UDToast -Message "Started $_.Name" -CloseOnClick

        
      })
    }
    $psIdx++;
}

$PSreports  | Select-Object Status,Name,DisplayName,Action  | Out-UDGridData

  }
}

$Page3 = New-UDPage -name "Server Performance Dashboard"  -Content {

New-UDCard -Content {
    New-UDParagraph -text "This was made by Ironman Software LLC"
    New-UDParagraph -text "The URL for this is https://www.powershellgallery.com/packages/server-performance-dashboard/1.0/Content/server-performance-dashboard.ps1"
    New-UDParagraph -text 'I added a services and converted it to a $page'
    New-UDParagraph -text "I have left all of my test buttons on this page aswell"
    }

New-UdRow {
    New-UdColumn -Size 6 -Content {
        New-UdRow {
            New-UdColumn -Size 12 -Content {
                New-UdTable -Title "Server Information" -Headers @(" ", " ") -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 " }
                    }.GetEnumerator() | Out-UDTableData -Property @("Name", "Value")
                }
            }
        }
        New-UdRow {
            New-UdColumn -Size 3 -Content {
                New-UdChart -Title "Memory by Process" -Type Doughnut -RefreshInterval 30 -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 30 -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 Count by Process" -Type Doughnut -RefreshInterval 30 -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 30 -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"
                    )
                }
            }
            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
                }
            }
        }
    }
    New-UdColumn -Size 6 -Content {
        New-UdRow {
            New-UdColumn -Size 6 -Content {
                New-UdMonitor -Title "CPU (% processor time)" -Type Line -DataPointHistory 20 -RefreshInterval 30 -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 30 -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 30 -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 30 -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 12 {
            New-UdGrid -Title "Service" -PageSize 20 -AutoRefresh  -RefreshInterval 60 -Endpoint {
                Get-Service | select Name, DisplayName, Status | ForEach-Object {
                    $button_text = "ERROR"
                    $button_colour = "Black"
                    $button_name = $_.Name
                   
                    Switch ($_.Status) {
                        'Stopped' { 
                            $button_text = "Start"
                            $button_colour = "Green"
                        }
                        'Running' { 
                            $button_text = "Stop"
                            $button_colour = "Red"
                        }
                        Default { 
                            $button_text = "ERROR"
                            $button_colour = "black"
                        }
                    }
                    [PSCustomObject] @{
                        "Name" = $_.Name
                        "Display Name" = $_.DisplayName
                        "Status" = [string]$_.Status
                        "Status2" = Switch ($_.Status) {
                            'Stopped' { New-UDParagraph -Text $_ -Color red }
                            'Running' { New-UDParagraph -Text $_ -Color green }
                             Default  { New-UDParagraph -Text $_ }
                        }
                        "Status3" = Switch ($_.Status) {
                            'Stopped' { 
                                New-UDButton -Text "Start" -BackgroundColor Green -OnClick (New-UDEndpoint -Endpoint {       
                                    Start-Service $button_name;            
                                    Show-UDToast -Message "Started $button_name" -CloseOnClick
                                  })
                              }
                            'Running' {
                                 New-UDButton -Text "Stop" -BackgroundColor Red -OnClick (New-UDEndpoint -Endpoint {       
                                    stop-Service $button_name;            
                                    Show-UDToast -Message "stopped $button_name" -CloseOnClick
                                  })
                              }
                             Default  { 
                                New-UDButton -Text "ERROR" -BackgroundColor BLACK -OnClick (New-UDEndpoint -Endpoint {       
                                    get-Service $button_name;            
                                    Show-UDToast -Message "error $button_name" -CloseOnClick
                                  })
                              }
                        }
                        "Status4" = New-UDButton -Text $button_text -BackgroundColor $button_colour -OnClick (New-UDEndpoint -Endpoint {
                            Switch ($_.Status) {
                                'Stopped' { Start-Service $button_name
                                    Show-UDToast -Message "Started $button_name" -CloseOnClick
                                 }
                                'Running' { Stop-Service $button_name 
                                    Show-UDToast -Message "stopped $button_name" -CloseOnClick
                                 }
                                 Default  { Get-Service $button_name }
                            }
                        })
                    }
                } | Out-UDGridData 
            }
        }
    }
}
} 




$Navigation = New-UDSideNav -Content {
New-UDSideNavItem -Text "Current" -PageName "$($page0.name)" -Icon car
New-UDSideNavItem -Text "Dympage" -PageName "$($page1.name)" -Icon house_damage
New-UDSideNavItem -Text "Windows-Service-Dashboard" -PageName "$($page2.name)" -Icon _try
New-UDSideNavItem -Text "Server Performance Dashboard" -PageName "$($page3.name)" -Icon address_book
New-UDSideNavItem -Text "Google" -Url 'https://www.google.com.au' -Icon google
}




$Dashboard = New-UDDashboard -Pages @($page0,$Page1,$page2,$page3) -Navigation $Navigation
Start-UDDashboard -Dashboard $Dashboard -Port 1001 -force

$Page2 was made by @cadayton
Link to the post:


$page3 Link: https://www.powershellgallery.com/packages/server-performance-dashboard/1.0/Content/server-performance-dashboard.ps1

2 Likes

Ran the Dashboard and it worked fine for me. For $Page2, I never did make the button function properly it is getting an error. It appears it wants a computer name in the command being execute.

I made the following adjustments to the code.

Commented out this line.

#Stop-UDDashboard -port 1001

Added the ‘-force’ parameter to the last line of code

Start-UDDashboard -Dashboard $Dashboard -Port 1001 -Force

-Force kills the prior process using port 1001 so there is no need to do a Stop-UDDashboard.

‐‐‐‐‐‐‐ Original Message ‐‐‐‐‐‐‐

That’s awesome, I will make the edit

Hi @maylife I had a quick look and added refreshinterval parameter and it is able to reflect service state change. Make sure not to give small refreshinterval like 1 second, it will not work properly (atleast in my case) as service start\stop can take few seconds to minutes depending type of service you are dealing with. I choose 5 seconds as it gave me clean result and is not to long or short.

However as @PorreKaj suggested Sync-Element can also do the trick.

@cadayton I checked the page 2 and error points to the insufficient rights to perform operation as I started UD without admin. I run my dashboard with admin rights and it worked.

I did some tweak to work for remote servers.
Note: I have used -Force parameter with Stop-Service. It will allow me to stop dependent services as well. It is not necessarily to use it is as per requirement. Without -Force you will get error if you are trying to stop any service which has dependent service. However it doesn’t work with Start-Service. When starting you have to start all dependent service manually.

In order to work for remote server I had to pass Start\Stop-Service in pipeline with Get-Service as Get-Service allow me to pass ComputerName.

$Service = Get-Service
#Stop-UDDashboard -port 1001
Import-Module UniversalDashboard.Community

$HomePage = New-UDPage -Name "HomePage" -Title "HomePage" -Icon home -Content { 
    New-UDHeading -Text "HomePage" -Size 4
}

$ServiceStatus = New-UDPage -name "Windows-Service-Dashboard" -Content {
    New-UDColumn -SmallSize 6 -MediumSize 6 -LargeSize 6 -Content {
        New-UDCard -Content {
            #New-UDHeading -Color "#01CCFF" -Text "Shows the status of Availability Group Sync status." -Size 6
                New-UDInput -Id "card3" -Title "Enter Server Name" -Content {
                    New-UDInputField -Type 'textbox' -Name 'ServerName' -Placeholder 'Enter Server Name'
                } -Endpoint {
                    param($servername)
                            New-UDInputAction -RedirectUrl "/Windows-Service-Dashboard/$servername"
                }
                New-UDButton -Text "Back" -Icon backward -IconAlignment right -OnClick (
                New-UDEndpoint -Endpoint {
                    Invoke-UDRedirect -Url  "/Homepage"
                }
            )
        }
    }
}

$page2 = New-UDPage -url "/Windows-Service-Dashboard/:servername" -Endpoint {
param($servername)


New-UDGrid -Title "Windows-Service-Report" -AutoRefresh -RefreshInterval 5 -Endpoint {
$servicesDB = Get-Service -computername $servername ;
[int]$psIdx = $servicesDB.Count - 1;
if ($psIdx -gt 0) {
  $PSreports = 0 .. $psIdx | ForEach-Object {
    [PSCustomObject] @{ Name = 'data2'; Status = 'data1'; DisplayName = 'data3'; Action = 'data4';}
  }
} else {
  $PSreports = [PSCustomObject] @{ Name = 'data2';Status = 'data1'; DisplayName = 'data3'; Action = 'data4';}
}
$psIdx = 0;
$servicesDB | ForEach-Object {
    $PSreports[$psIdx].Name = $_.Name
    $PSreports[$psIdx].DisplayName = $_.DisplayName
    if ($_.Status -eq "Running") {
      $PSreports[$psIdx].Status = "Running";
      $PSreports[$psIdx].Action = New-UDButton -Text "Stop" -BackgroundColor Red -FontColor White -OnClick (New-UDEndpoint -Endpoint {
        Get-Service -ComputerName $servername -Name $_.Name | Stop-Service -Force
        
       
      
      })
    } else {
      $PSreports[$psIdx].Status = "Stopped";
      $PSreports[$psIdx].Action = New-UDButton -Text "Start" -BackgroundColor Green -FontColor White -OnClick (New-UDEndpoint -Endpoint {
        Get-Service -ComputerName $servername -Name $_.Name | Start-Service 
        
      

        
      })
    }
    $psIdx++;

}

$PSreports  | Select-Object Status,Name,DisplayName,Action  | Out-UDGridData

  }
}
$Theme =Get-UDTheme DarkRounded
$Dashboard = New-UDDashboard -Title "Test Dashboard" -Pages @($homepage,$ServiceStatus,$Page2) -Theme $Theme
Start-UDDashboard -Name "Test" -Dashboard $Dashboard -Port 1001 -AutoReload
2 Likes

Thanks. Tested code and it’s working for me. I ran into some weird characters getting pasted into VScode. So put the modified code here: https://keybase.pub/cadayton/PSGallery/UD/Test-Dashboard.ps1 and added some navigation links to the code. Perhaps the next step would be to turn this into a module and publish in the Marketplace.
image

1 Like