Grafana Table插件源码阅读（进阶） - 前端视角

最新推荐文章于 2025-04-08 14:58:36 发布

Candy_home

最新推荐文章于 2025-04-08 14:58:36 发布

阅读量2.8k

点赞数 3

分类专栏： grafana 学习文章标签： grafana grafana plugin grafana 插件 grafana table table 插件

本文链接：https://blog.youkuaiyun.com/Candy_home/article/details/102697203

版权

本文从前端视角深入探讨Grafana Table插件，特别是Table2部分的源码分析，包括TablePanel.tsx和TablePanelEditor.tsx的解读，以及在实际需求中对插件的修改，如调整数据展示顺序和去除编辑功能。同时，分享了在Grafana 6.1.3环境下遇到的兼容问题，以及环境搭建、开发和打包过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

之前已经带大家阅读了 Grafana 入门、安装和命令 (mac) 和 Grafana 插件开发入门 - 前端视角（React）两片文章~

相信大家对于Grafana插件已经有了一个初步的认识，下一步，我们来进阶版，看下 table插件的书写

Table源文件分析

源文件位置：https://github.com/grafana/grafana/tree/master/public/app/plugins/panel，主要分析的就是table 和 table2 文件

Table 和 Table2 的区别

Table 是Angular写的，Table2是react写的。

由于我日常用React比较多，所以选了table2

Table2 源码分析

文件目录分析

TablePanel.tsx （展示内容）

1. 主要使用了 @grafana/ui 中的 PanelProps, ThemeContext，Table

2. const { data, options } = this.props; 看到这句话，打印了一下，发现数据来源是 this.props.data.series[0]

// Libraries
import React, { Component } from 'react';

// Types
import { PanelProps, ThemeContext } from '@grafana/ui';
import { Options } from './types';
import Table from '@grafana/ui/src/components/Table/Table';

interface Props extends PanelProps < Options > {}

export class TablePanel extends Component < Props > {
  constructor(props: Props) {
    super(props);
  }

  render() {
    const { data, options } = this.props;

    if (data.series.length < 1) {
      return <div>No Table Data...</div>;
    }

    return (
      <ThemeContext.Consumer>
        {theme => <Table {...this.props} {...options} theme={theme} data={data.series[0]} />}
      </ThemeContext.Consumer>
    );
  }
}

TablePanelEditor.tsx (可编辑区域)

1.this.props.onOptionsChange 是内部定义的函数

2. showHeader, fixedHeader, rotate, fixedColumns 四个参数也是默认的传值

 Libraries
import _ from 'lodash';
import React, { PureComponent } from 'react';

// Types
import { PanelEditorProps, Switch, FormField } from '@grafana/ui';

export class TablePanelEditor extends PureComponent < PanelEditorProps > {
  onToggleShowHeader = () => {
    this.props.onOptionsChange({ ...this.props.options, showHeader: !this.props.options.showHeader });
  };

  onToggleFixedHeader = () => {
    this.props.onOptionsChan

最低0.47元/天解锁文章