I deployed Prometheus-Alertmanager-Grafana on Kubernetes using the kube-prometheus-stack helm chart file.
My kube-prometheus-stack helm chart version is 56.6.2.
My Grafana version is 10.3.1.
I have prepared a dashboard on Grafana to show the total number of users. As the Data Source for the dashboard, I defined PostgreSQL and made the necessary configurations.
By entering the required queries, I can now see the total number of users on the Grafana Dashboard.
Additionally, I am working on creating a separate Web Dashboard using a React Template. I have deployed a simple version of the React Dashboard I created on Kubernetes.
In this context, instead of fetching the total number of users from the backend with a service, I want to use the data available on the Grafana Dashboard.
That is, I plan to regularly transfer the total number of users from the Grafana Dashboard to my Web Page Dashboard created with React.
I have thoroughly examined the Grafana Documentation. However, although I can fetch the Dashboard using the Service Account Token and DashboardUid information with a JavaScript fetch, I cannot access the data within.
In other words, I cannot fetch the total user information (i.e., the actual total number) that I can see on the Dashboard.
Is there a way to fetch this data (the total number of users) from the Dashboard?
Is it possible to extract data from a Grafana Dashboard and use it on another web page (such as a React Dashboard)?
Hey @ermeydancoder welcome to the forum.
I’m not sure of what you are asking… Grafana does not have data itself: it’s only a “tool” to display data that are storage somewhere else. In your case I guess in your PostgreSQL base?
If you just want to display data on another web page, you can fetch this data directly from your base…
Maybe I’m misunderstanding your requirement.
Regards
To clarify, I can directly see this data on the Grafana Dashboard by defining PostgreSQL as a datasource.
The backend already has a direct connection to the PostgreSQL database, and I could fetch this data through the backend as well.
However, I prefer not to put in additional effort.
Since I can already see this data on the Grafana Dashboard, is there a possibility for me to directly retrieve the visible data from the Grafana Dashboard using JavaScript and use it on my React Dashboard Web Page?
2 Likes
@ermeydancoder this blog post describes all of the options for reusing Grafana visualizations, with their pros and cons
3 Likes
Thank you, @davidallen5, for your response. I thoroughly read the blog post you shared. It covered features of the Grafana Dashboard that I am already familiar with.
However, what I aim to achieve is different and requires a clearer solution. To be frank, my current Grafana URL can only be accessed privately via VPN. I cannot and do not wish to make my Grafana URL public.
My goal is to fetch information like the total number of users and total number of devices found in the Grafana Dashboard into the charts I have created on a Web Dashboard developed with React, which is accessible through a URL like status.alfa.io for our B2B customers.
As I mentioned, I can fetch the Dashboard onto this web Dashboard with JavaScript. But, to integrate daily data from my Grafana Dashboard (like total number of users and devices) into my React-developed web dashboard, I need to be able to fetch this data.
As I’ve expressed before, I do not wish to define any service/endpoint on the backend side.
To be clear, my question is: Just as I can fetch the Dashboard using the Grafana Service Account Token, is it possible to fetch the data within it (like total number of users and devices) into my React-developed web Dashboard?
Thank you in advance for your answer and your attention.
To the best of my knowledge, you can’t do this directly. Essentially when you have a dashboard you’ve done a whole stack of computations within Grafana and then rendered that as some dashboard panel (which are essentially React components under the hood). The question you are asking is similar to wanting to inspect the internal state of those react components, it sounds like.
The Grafana Scenes API is intended as a way to extend the observability platform, so this might be something to consider. Under this alterative approach you’d build an app running on top of Grafana - it would have access to all of those primitives, and then if you wanted access to the data which would appear on a dashboard, you would need to use those primitives, and then somehow “republish” this data (e.g. onto a kafka queue).
Another possible approach (depending very much on what kind of data you need) would be to transform metrics/logs/traces and then create simply more metrics/logs/traces that correspond to whatever data you want to export, and then use your downstream application to query the underlying databases for the extra stuff you produce just as Grafana does.
