Grafana Plugin-ui: Parts And Utilities For Grafana Plugins

In this post I will create a customized plugin in React, which can be utilized in Grafana, so as to present information in a nested tree view. Grafana uses React to energy its open supply platform, leveraging its vast ecosystem, improved efficiency, and neighborhood contributions. The alternative of state management device is dependent upon the group’s downside house. React Hooks have posed challenges but have additionally been a strong tool for builders. The new Scenes library simplifies development and reduces the educational curve.

React support for apps was introduced in Grafana 6.3.three. Datasource query() method can both return Promise or Observable. React components allow you to split the UI into independent, reusable pieces. Together, the accountId and orgId are sufficient to fully authenticate a given request to the Grafana API. These are supplied in the headers (change-able in grafana.ini) X-WEBAUTH-USER and X-Grafana-Org-Id.

Remember after we formatted the info source query as a table? Grafana itself has a giant tent philosophy, supporting as much of the observability ecosystem as potential. This offers our customers with an enormous quantity of flexibility in visualizing their data, no matter the source — a Kubernetes cluster, Raspberry Pi, completely different cloud companies grafana plugin development, and even Google Sheets. At the same time, this will lead to confusion when end customers try to  assemble the best observability resolution for themselves. In this example we’re constructing an Rss-panel, and what we’re going to wish is a few kind of desk to display our end result.

Despite our challenges, React is a robust device to implement and keep complicated frontends. React’s versatility is key, and with it, there is freedom to suppose about a myriad of state management options and choose whichever makes the most sense. In this publish — which was impressed by my current presentation at React Summit 2023 in Amsterdam — we’ll explore why we chose to use React for Grafana, and the benefits and challenges we’ve seen along the greatest way. We’ll additionally share how we are responding to those challenges in our new dashboard runtime, Scenes. In this weblog post we’ll go through how one can create plugins for Grafana using ReactJS.

There might be multiple time-series which will come as completely different lines plotted on the same graph in your knowledge attribute relying in your backend. Width, and top include the precise width and peak of the space allotted to your panel when it’s rendered on Grafana. Creating your individual custom plugin for Grafana is pretty easy with the examples Grafana offers you, as long as you retain it simple too. Grafana has some more superior dashboard features like a panel editor and dashboard variables, I focus on this on this post. I’ve kept it simple in my database, but which means I’ll have to do some frontend transformation of information.

Main Variations Between Angularjs And React Plugins ¶

Each field contained in the fields array consists of knowledge factors for a single axis. We have two axis in our graphs, time (fields[0], x axis) and values (fields[1], y axis). We create ser utilizing knowledge, fields and timeRange in unix values.

do this by invoking componentDidUpdate in our Rss-panel instance. So when our consumer updates the url to the rss feed, we’ll replace the panel to fetch an rss feed from the model new url. In this example we’re utilizing a library known as rss-to-json to fetch and transform the rss feed to javascript objects. Up to this point the setup has been simple and easy.

  • As Grafana is open supply, being primarily based on the most well-liked frontend library has helped facilitate neighborhood contributions to Grafana.
  • In Grafana 6.0 we began the migration to utilizing React in Grafana.
  • React has never claimed to be a framework, not like Angular, so the query of tips on how to manage a posh app state whereas utilizing React has long been open-ended.
  • This permits you to write plugins
  • Exporters rework metrics from specific sources right into a format that could be ingested by Prometheus.

You should add the trail of the folder within the Grafana configuration file. Grafana hundreds up all of the plugins you’ve kept on startup. This blog post discusses React panel plugins for Grafana. Either migrate to Angular 2 from Angular 1 or consider other options.

Final Code For Graphpanel

As Grafana matures, it’s but to be seen if this strategy is sustainable. In general, we really feel that a team should use a state management tool that best fits their problem house. The ambiguity of which resolution to use is a basic downside for versatile, open source libraries and platforms.

who tried to make Grafana plugins on TypeScript. We offered consulting for Grafana Labs where we have been answerable for growing premium plugins. Some at Grafana Labs have expressed frustration with hooks as a outcome of they introduce stale closures and require studying and mastering hook rules. To use a combination of all of them — Redux, RxJS, props, and context. In basic, we really feel that a team should use the state administration device that most closely fits their downside area.

Today, I’m excited to share with you how Grafana leverages React to energy its extensively used open supply platform that enables tens of millions of customers to visualise and analyze their information. This secondary request for the iframe content is called a cross-origin request, as a outcome of the browser is asking for your Grafana dashboard (Let’s say that’s hosted on from portal.o11y.celebration. Those requests have particular safety restrictions that must be mentioned. Grafana supplies a share funcionality for panels out of the field which generates the necessary code to embed them through HTML iframe elements. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React parts describing what ought to appear on the display.


React panels haven’t got direct access to panel.json so you need to specify panel choices you are going to retailer. There is a setExploreLogsQueryField methodology in DataSourcePlugin class for this purpose By making this request to the /login endpoint, we persuade the Grafana backend API to offer a grafana_session cookie that’s tied to that account throughout the specified group.

Faro bundle that allows simpler integration in projects built with React. This is the final working code supporting this article. The Graph Panel may be made by the parts Graph or GraphWithLegend. Grafana React Plugins are written in TypeScript and you want to have basic TypeScript information together with its API in the React ecosystem. Feel free to drop by the Grafana group website, which is one of the best place to seek out other people’s options and ask questions.

We’re going to make use of an interface exported by @grafana/ui referred to as PanelProps. This will provide us with the props we need, corresponding to top and width.

In this file, we will introduce the primary magic from our newly-released @grafana/ui package. I would recommend taking a glance at this video for uses of choices and their fundamentals.


When a tool stops solving the problem we hire it for, we can throw it out and try a brand new one. React does not stay from this, and neither does Grafana. But for now, we are pleased with our decision to change to React, and will proceed to make use of it for so long as it is smart to. If you are thinking about studying extra about Grafana and our new Dashboard Runtime Library themes, please take a look at the upcoming GrafanaCon conference. Embedding simply works higher with un-privileged sources like snapshots and public dashboards.

From this transformation we get a series array which can be passed to Graph element. Make positive to provide a definite index to every item in series (ser_ind here). You can take a look at sort GraphSeriesXY if you want to mess around with other props like colour, etc. Grafana makes use of React to energy its open supply platform, offering benefits like an enormous ecosystem, improved performance, and group contributions. However, React’s state administration has posed challenges, leading Grafana to use a combination of Redux, RxJS, Props, and Context.

To review Grafana Cloud security and compliance details, visit our portal at For including options to Plugins, we’re utilizing a concept known as Editors. We have an interface for Editors in @grafana/ui as nicely, known as PanelEditorProps. If we provide our choices sort to this interface, we could have the onChange technique available for updating our panel when

Leave a Comment

Your email address will not be published. Required fields are marked *