在这篇博文中，我们将介绍如何使用Grafana创建插件ReactJS．这假设你有一些在React中编写组件的基本知识。
(本文中使用的示例的完整代码可以找到在这里）.
在Grafana 6.0中，我们开始迁移到在Grafana中使用React。这允许你使用React而不是AngularJS来编写插件。我们正在通过发布一个新的Grafana组件库来简化React插件的编写@grafana / uinpm包。新的npm包仍处于Alpha阶段，我们正在对react插件框架进行突破性的修改。但我们希望鼓励人们进行测试，并尽早给予我们反馈。
让我们来看看如何使用React和TypeScript构建自己的插件。
设置
在编写新插件时，有几件事需要考虑。对于Grafana 6.0，我们需要将插件目录移到Grafana项目目录之外。请随意将你的插件目录放在你电脑上通常存放代码的地方。接下来，我们需要告诉Grafana应该在哪里寻找插件。Grafana带有一个defaults.ini文件中grafana / conf /，我们可以通过创建和修改custom.ini．所以把你自己放在grafana / conf目录和Cp defaults.ini custom.ini．
开放custom.ini用你选择的文件编辑器搜索这个短语:
grafana将自动扫描和查找插件的目录
将下面的行修改为:
Plugins = <您的Plugins目录>的路径
在此之后重新启动您的grafana服务器。
现在我们准备继续前进!
结构
在你的插件中，Grafana需要一些基本的项目结构。格拉夫娜会找一个plugin.json位于src目录中。的plugin.json应该包含一些关于插件的信息;你可以阅读更多相关内容在这里．
同样在src我们需要一个module.tsx文件。在这个文件中，我们将介绍我们新发布的第一个魔法@grafana / ui包中。
import {PanelPlugin} from '@grafana/ui';import {RssPanel} from './components/RssPanel';import {RssPanelEditor} from './components/RssPanelEditor';import {defaults, RssOptions} from './types';export const reactPanel = new PanelPlugin(RssPanel);reactPanel.setEditor (RssPanelEditor);reactPanel.setDefaults(默认值); 让我们来看看这个文件是做什么的:
首先，我们要创建一个新的实例
ReactPanelPlugin，这是从@grafana/ui导入的类。我们发送的是我们的选项类型(在本例中是RssOptions，后面会讲到)。接下来，我们将为插件设置编辑器组件
setEditor ()函数。最后，我们将设置可能拥有的任何默认选项。
就是这样!
该小组
现在我们到了有趣的部分。这是你可以发挥创造力的地方。在这个例子中，我们正在构建一个rss面板，我们需要的是某种表来显示我们的结果。我们将使用由导出的接口@grafana / ui被称为PanelProps．这将为我们提供我们需要的道具，如高度和宽度。我不会详细介绍编写React组件的细节，但我会强调一些让我们用React编写的面板工作的事情。
面板类的基本设置:
interface Props extends PanelProps {} interface State {} export class RssPanel extends PureComponent {} 使用React的生命周期方法来确保你的组件在道具改变时更新是很重要的。我们通过调用来做到这一点componentDidUpdate在我们的rss面板例子中。因此，当用户将url更新到rss提要时，我们将更新面板以从新的url获取rss提要。在本例中，我们使用一个名为rss-to-json获取RSS提要并将其转换为javascript对象。
面板编辑器
为了给插件添加选项，我们使用了一个叫做编辑器的概念。在本例中，我们将创建一个名为< RssPanelEditor / >．我们为编辑器提供了一个界面@grafana / ui同样，叫做PanelEditorProps．如果向该接口提供选项类型，则会有onChange方法可用于在更改选项时更新面板。
导出类RssPanelEditor extends PureComponent {onUpdatePanel = () => this.props。onChange({……this.props。options, feedUrl: '这个新的rss提要url'});｝ 类型
我们强烈建议您在面板中使用类型。这使得您和其他人更容易发现潜在的错误。在这个例子中，我们添加了一些类型RssFeed，RssFeedItem,RssOptions．它们位于src / types.ts．
建筑
为了能够加载插件，Grafana希望代码是纯JavaScript的。在rss插件的例子中，我们在构建步骤中使用webpack将TypeScript编译为JavaScript。
测试
再次启动您的grafana-server，并确保您的插件已注册。
注册插件记录器=插件名称="Rss面板"
向仪表板添加一个新面板，并在可视化选择器中定位新面板。
