Coloring Elements in a Table based on a property

#1

This is an example of how to create a table of services in UD and add a column with a cell that is colored based on the status of the service.

 New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        Get-Service | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.Status -ne 'Running') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject]@{
                Name = $_.DisplayName
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.Status.ToString() }
            }
        } | Out-UDTableData -Property @("Name", "Status")
    }

6 Likes

#2

could I apply this to a New-UDGrid ?

0 Likes

#3

Yep. This should work the same way in a UDGrid.

0 Likes

#4

ok, that’s the next task …busy busy busy

0 Likes

#5

me again

so my script is this

New-UDPage -Name 'VCSA' -Icon cloud -Content {

    New-UDRow {
            New-UDColumn -Size 6 -Content {
                New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "State") -Properties @("key","value.state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                    (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value |  ForEach-Object {

                        $BgColor = 'green'
                        $FontColor = 'white'
                        if ($_.Status -ne 'Started') {
                            $BgColor = 'red'
                            $FontColor = 'white'
                        }

                        [PSCustomObject]@{
                            Name = $_.key
                            Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }


                    }
                    
                    
                    
                }
            } | Out-UDGridData

I’m make REST API calls for the grid data, is there any special format I need to consider when using the PScustomObject?

The output of the REST call is similar to

{
  "value": [
    {
      "value": {
        "name_key": "cis.analytics.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [],
        "health": "HEALTHY",
        "description_key": "cis.analytics.ServiceDescription",
        "state": "STARTED"
      },
      "key": "analytics"
    },
    {
      "value": {
        "name_key": "cis.applmgmt.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [],
        "health": "HEALTHY",
        "description_key": "cis.applmgmt.ServiceDescription",
        "state": "STARTED"
      },
      "key": "applmgmt"
    },
    {
      "value": {
        "name_key": "cis.cis-license.ServiceName",
        "startup_type": "AUTOMATIC",
        "health_messages": [
          {
            "args": [],
            "default_message": "The License Service is operational.",
            "id": "cis.license.health.ok"
          }
        ],
        "health": "HEALTHY",
        "description_key": "cis.cis-license.ServiceDescription",
        "state": "STARTED"
      },
      "key": "cis-license"
    }

So i want just the name of the service (key) and the state , then put them into conditional formatting as per the example above ,i…e Green for started , Red for Stopped

0 Likes

#6

Yeah that looks like it should work. I noticed that you are using status instead of state:

 $BgColor = 'green'
                        $FontColor = 'white'
                        if ($_.State -ne 'Started') {
                            $BgColor = 'red'
                            $FontColor = 'white'
                        }

And are you looking to use name_key or just key?

0 Likes

#7

so I’ve cleaned up the code with what I think is the right values, but now I’m getting a malformed grid

Code is now

New-UDRow {
        New-UDColumn -Size 6 -Content { New-UDGrid -Title "vMon services" -FontColor "#cbd9ef" -BackgroundColor "#303235" -Headers @("Key", "State") -Properties @("key", "value.state") -AutoRefresh -RefreshInterval 60 -Endpoint {
                (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value |  ForEach-Object {

                    $BgColor = 'green'
                    $FontColor = 'white'
                    if ($_.State -ne 'STARTED') {
                        $BgColor = 'red'
                        $FontColor = 'white'
                    }

                    [PSCustomObject]@{
                        Name   = $_.key
                        Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
                    }   
                }
            } | Out-UDGridData
        }
    }

and the resultant grid is asa follows (highlighted in red)

0 Likes

#8

is the issue maybe the ForEach-object with the RESP API call ??

0 Likes

#9

no it isn’t that … the search goes on

0 Likes

#10
-Properties @("key", "value.state")

and

[PSCustomObject]@{
Name   = $_.key
Status = New-U...
 }

ist not matching, it should also “Name,Status” as in the PSCustomObject

0 Likes

#11

so I tried switching it to a New -UDTable …getting slightly further and I did pick up that mistake.

0 Likes

#12

have tried to isolate the table into a stand alone dashboard, now I just get a blank screen, no content

$dashboard = New-UDDashboard -Title "Test" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {


    New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.value.state -ne 'STARTED') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject] @{
                Name   = $_value.key
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
            }
        }
    } | Out-UDTableData -Property @("Name", "Status")
}


Start-UDDashboard -Dashboard $Dashboard -name test -Port 8888 -AutoReload

aaaaargh

0 Likes

#13

I just noticed that you’re missing the dot operator in your code here (not sure if that’s the only issue, I didn’t test).

0 Likes

#14

I also noticed that you piped the Objects to Out-TableData outside of the Endpoint scriptblock. I believe you should move it up one level to to be piped directly from the ForEach-Object scriptblock. For example:

$dashboard = New-UDDashboard -Title "Test" -NavBarColor "#FF252525" -NavBarFontColor "#cbd9ef" -BackgroundColor "#303235" -FontColor "#cbd9ef"  -Content {


    New-UDTable -Title "Service Status" -Headers @('Name', 'Status') -Endpoint {
        (Invoke-RestMethod -headers $session -method GET -uri "https://cd-lab-vc1.cragdoo.co.uk/rest/appliance/vmon/service").value | ForEach-Object {

            $BgColor = 'green'
            $FontColor = 'white'
            if ($_.value.state -ne 'STARTED') {
                $BgColor = 'red'
                $FontColor = 'white'
            }

            [PSCustomObject] @{
                Name   = $_.value.key
                Status = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.value.state.ToString() }
            }
        } | Out-UDTableData -Property @("Name", "Status")
    } 
}


Start-UDDashboard -Dashboard $Dashboard -name test -Port 8888 -AutoReload
0 Likes

#15

good spot …was getting lost in {} :slight_smile: …nearly working , just need to figure out why i get “unauthorized” on my API call …but that’s another forum :slight_smile: thanks

0 Likes

#16

Yaaaas …got it. Thanks for your patience guys

2 Likes

#17

Do UDGRid dont have colour options or is there any other way to do it ,i have tried the exact same way for UDGRID but in turn i got these error
t.hasOwnProperty is not a function

0 Likes

#18

Same here, UD looked really promising to me but formatting the output isn’t straight forward at all. Spending lots of time and wondering if it is worth the effort.

0 Likes

#19

@manoj2994 @stevenbaert as far as I am aware, you can only apply color formatting to data in UDTable but not UDGrid. So you have to decide if you want to control the look of the output with custom code using UDTable or the benefits of pagination and filters in UDGrid.

0 Likes

#20

Nice examples to try

0 Likes