Custom Plugin that extends Status History

Grafana Plugin Development
1

Hi everyone

I would like to customize the existing Status History visualization panel.

Since it is a built-in panel I am not sure how to proceed since i can’t just fork the repository.

Do you have any suggestions on if this is possible?

I’ve tried:

  1. Create base plugin with grafana plugin tool
  2. Clone the grafana repo and copy the status-history plugin into my barebone plugin

There are just so many imports from @grafana/ui that are missing that i can’t get things to run. I assume these components are probably not meant to be imported by plugin devs

2

Hi there, when you say you want to customize it - what is it you need the panel to do?

3

So right now the panel shows a square with a certain color that represents a status at a given time.
I need the possibility to represent multiple statuses in a single square.

For example:
For 00:00 query A has status OK - Green
For 00:00 query B has status BAD - Red
This would split the square in 2, half green and half red

If we had 4 queries we would have 4 colored squares per timestamp.

In our team we still use an old grafana 7.3 client because we developed a custom multistatus map plugin (in angular js) which is a fork of the flant/grafana-statusmap plugin.
That plugin was archived and their developers recommend using this new status-history plugin, that is why i was looking to see if i could adapt it to “multistatus-history”

Another option would be to rewrite the angular plugin we have now into react to see if we could use it in new grafana versions

4

what would it look like if you had only 3 queries

5

Something like this?
In our current plugin we have circles instead of a square and it splits for max 4 status at once

tooltips

1 Like
6

might want to look at Business Text plugin as a possible option

image
image1504×777 79.3 KB

7

It would still need to be a dynamic timeline with a tooltip like the status history though, not just a static card

8

that’s what that is dynamic based on the data fetched

is the toolip on the side or appears on hover

9

On hover, it is basically exactly the same visualization behaviour as the status-history

10

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.