How to create a status page with infinity data source

Grafana Dashboards
1

Hi all

I have a few infinity data sources that call out to external API’s. One of the calls returns a list of servers, and if they are Up or Down with a boolean value.
I am displaying that data in a table right now, but I would like a more colorful representation.
I grabbed the Status Panel visualization, but cannot figure out how to represent my data.
I could just use overrides with a basic table, but I feel like there should be a nicer way to do this.

Does grafana have a way to display a status page? Perhaps with a traffic light style, or just a series of Red or Green squares with the server name as the text?
I feel like this should be a very common thing to show, but I dont see any examples out there!

Thanks!

2

welcome @bretthowells to forum

please share a sample of the json data coming back from the API

3 
{
  "count": 2,
  "results": [  
    {
      "pk": 4103359,
      "name": "Service: Routes",
      "created_at": "2024-10-03T13:37:03.503988Z",
      "modified_at": "2024-12-10T19:10:30.783209Z",
      "is_under_maintenance": true,
      "state_is_up": true
    },
	{
      "pk": 4103358,
      "name": "Service: Api",
      "created_at": "2024-10-03T13:37:03.503988Z",
      "modified_at": "2024-12-10T19:10:30.783209Z",
      "is_under_maintenance": true,
      "state_is_up": true
    },
  ]
}
4

from this data which fields do you want to see in plugin, not sure what you mean by Status page

image
image1512×627 50.4 KB

5

I wanted to display the data like this status page :

Basically the test name on one side, and a Red/Green box or image or whatever to represent up/down. The idea is that anyone can look at this with a glance and know that everything is up as quick as possible.

6

close enough (using emojis for the :check_mark: and X) ? otherwise you will need to use some other plugin that does the layout you want

image
image1878×614 102 KB

7

That looks pretty good!
I’ve tried a bunch of plugins, but nothing seems to do what I want. Ideas welcome!

8

business text with html and maybe using bootstrap or a simple css
loop over your data and your basic html stuff

image
image1321×782 63.7 KB

1 Like
9

Can you post that HTML for me please?

10

So here is my query and the output from just grabbing the JSON :

image
image1825×959 91.6 KB

If I try and input some HTML there:

image
image315×260 3.64 KB

I get a blank list with no data.
Just to test that the #each works, I tried :

image
image315×260 3.05 KB

And that shows :

image
image318×386 9.08 KB

I am thinking there is something up with how I am parsing out the fields.

11

Looks like you might not have read the docu