SimplePanel: React.FC<Props>

Grafana Plugin Development
1

Hello.

Working with a simple-react-panel (https://github.com/grafana/simple-react-panel) template.

The file “SimplePanel.tsx” has lines:

import React from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { css, cx } from 'emotion';
import { stylesFactory, useTheme } from '@grafana/ui';

interface Props extends PanelProps<SimpleOptions> {}

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
const theme = useTheme();
const styles = getStyles();
...
}

What does “…SimplePanel: React.FC < Props >…” mean?
Is it TypeScript or React?

Help me understand it out, please.

2

The colon, :, after SimplePanel is TypeScript syntax for defining the type of what’s on the right side of the equals sign. React.FC<T> is the definition for a functional React component, where the T, or Props in this case, is a type that defines what properties are available to the React component.

In this case, the component property type needs to extends the PanelProps to let Grafana send the data, options and other things to your component.

Hope that cleared up some of your questions. Let me know if I can explain it better!

2 Likes
3

Yes, I`m got it.
Thank you so much.

I`m reading the book about TS and I begun to understund some things better.

Correctly I understand, that React in Grafana allows to add some elements dynamically?

4

Depends on what you mean by “dynamic”. But yes, you can for example dynamically add and remove HTML elements from a panel, or a query editor for data source plugins.

5

It`s very good. Thanks.

A question is how this to do, But Im understand, that its do not explain in a nutshell…

I`m reading “Mastering TypeScript 3” - Nathan Rozentals now. It describes setting up and creating a project with React. But I haven’t figured it out yet.

Do you know where I can read about it more?

6

Read more about TypeScript, React, or how to use them together?

Any of these maybe?

https://fettblog.eu/typescript-react/


7

I`m doing plugin now. I need to use Grafana and Zabbix (on Linux). And I will need to send commands API into ROS (Mikrotik). Do you now how to do it? Where is I may read about it?
Desirable with JS, TS, etc…

I have seen examples on Pyton. But I would like without it.

8

Ok, thanks. I`ll study.

9

I’m not aware of ROS/Mikrotic. Are you looking to send commands from Grafana? Grafana is mainly used to read data from other services so it might be difficult (albeit possible) to write data back to the database.

Also, since you mentioned Zabbix, have you seen the Zabbix plugin?

10

I have not studied Zabbix myself. My friend dealt with it.

Yes, I need to do something so that I can update devices or change something from the grafana plugin.

The plugin shows data from network devices that provide uninterrupted internet access. According to the specification, it should be possible to manage them from here (from the plugin).

In theory, this can be done somehow…

11

You might want to look at the example in this thread for how to writing data back to the data source:

12

Ok, thanks.
I found node-routeros and routeros-client for work with Mikrotik.
But I think it will be needed too.

1 Like