Kibana 插件开发进阶：自定义可视化图表、React 组件与 API 设计

你好，我是你们的“赛博朋克”向导——“极客老铁”。今天咱们来聊聊 Kibana 插件开发，特别是如何构建自定义的可视化图表，以及 React 组件和 API 设计在其中的应用。相信不少小伙伴在使用 Kibana 的过程中，都曾想过：“要是能按照自己的想法定制图表就好了！” 别急，今天老铁就带你一步步实现这个愿望！

为什么需要自定义 Kibana 插件？

Kibana 默认提供了一系列强大的可视化工具，但有时候，面对特定的业务需求和数据格式，这些默认工具可能就显得力不从心了。这时候，就需要我们亲自动手，打造符合自己需求的 Kibana 插件。

自定义插件的优势：

• 定制化程度高： 你可以完全按照自己的想法设计图表样式、交互方式和数据处理逻辑。
• 数据源灵活： 不仅限于 Elasticsearch，你可以对接各种数据源，比如 MySQL、PostgreSQL、甚至是外部 API。
• 功能强大： 除了可视化，你还可以添加自定义的功能模块，比如数据导出、告警、权限控制等等。

Kibana 插件架构概览

在动手之前，我们需要先了解一下 Kibana 插件的架构。Kibana 插件主要分为两种类型：

1. 应用插件 (App Plugin)： 提供完整的独立页面，拥有自己的路由和导航。比如 Timelion、Visualize、Dashboard 都属于应用插件。
2. 扩展插件 (Extension Plugin)： 扩展现有应用的功能。比如自定义的可视化类型、新的字段格式化器等等。

我们今天要开发的自定义可视化图表，属于扩展插件。

Kibana 插件的目录结构通常如下：

my_plugin/
├── common/ # 插件的公共逻辑和类型定义
├── server/ # 服务端代码，用于与 Elasticsearch 或其他数据源交互
│   ├── index.ts
│   └── routes/ # 服务端路由
│       └── my_route.ts
├── public/ # 客户端代码，主要包含 UI 组件和逻辑
│   ├── components/ # React 组件
│   │   └── my_visualization.tsx
│   ├── index.tsx
│   └── plugin.ts # 插件入口文件
├── translations/ # 国际化文件
└── kibana.json # 插件配置文件

动手开发：构建自定义可视化图表

接下来，我们就以创建一个简单的“词云”图表为例，一步步讲解如何开发 Kibana 插件。

1. 创建插件骨架

首先，我们需要创建一个插件骨架。Kibana 官方提供了一个插件生成器，可以帮助我们快速生成插件的基本结构。

node scripts/generate_plugin my_wordcloud_visualization

执行完这个命令后，就会在 plugins/ 目录下生成一个名为 my_wordcloud_visualization 的插件目录。

2. 定义插件配置

打开 kibana.json 文件，配置插件的基本信息。

{
  "id": "myWordcloudVisualization",
  "version": "1.0.0",
  "kibanaVersion": "kibana", // 兼容的 Kibana 版本
  "name": "My Wordcloud Visualization",
  "owner": {
    "name": "极客老铁",
    "github": "your_github_account"
  },
  "requiredPlugins": ["visualizations", "data"], // 依赖的插件
  "optionalPlugins": [],
  "ui": true // 是否包含 UI
}

3. 编写服务端代码 (server/index.ts)

服务端代码主要负责与 Elasticsearch 或其他数据源交互，获取数据并进行处理。

// server/index.ts
import { PluginInitializerContext } from 'kibana/server';
import { MyWordcloudPlugin } from './plugin';
 
export function plugin(initializerContext: PluginInitializerContext) {
  return new MyWordcloudPlugin(initializerContext);
}

// server/plugin.ts
import { Plugin, CoreSetup, CoreStart } from 'kibana/server';
 
export class MyWordcloudPlugin implements Plugin {
  constructor(private readonly initializerContext: PluginInitializerContext) {}
 
  public setup(core: CoreSetup) {
     // 注册服务端路由，用于处理客户端请求
     core.http.createRouter().get(
        {
            path: '/api/my_wordcloud_visualization/example',
            validate: false,
        },
        async (context, request, response) => {
            // 这里可以编写与 Elasticsearch 交互的代码，获取数据
            // 假设我们从 Elasticsearch 获取到以下数据
            const data = [
              { word: 'Kibana', count: 100 },
              { word: 'Elasticsearch', count: 80 },
              { word: '插件', count: 60 },
              { word: '开发', count: 40 },
              { word: '可视化', count: 20 },
            ];
            return response.ok({ body: data });
        }
    );
  }
 
  public start(core: CoreStart) {}
}

4. 编写客户端代码 (public/plugin.ts)

客户端代码主要负责 UI 的展示和交互。

// public/plugin.ts
import { Plugin, CoreSetup, CoreStart } from 'kibana/public';
import { MyWordcloudVisualization } from './components/my_visualization';
import { VisualizationsSetup } from 'src/plugins/visualizations/public';
 
export class MyWordcloudPlugin implements Plugin {
  constructor(private readonly initializerContext: PluginInitializerContext) {}
 
  public setup(core: CoreSetup, { visualizations }: { visualizations: VisualizationsSetup }) {
    // 注册自定义的可视化类型
    visualizations.createBaseVisualization({
      name: 'my_wordcloud_visualization',
      title: 'My Wordcloud',
      icon: 'wordcloudApp',
      description: 'A beautiful wordcloud visualization.',
      visConfig: {
        component: MyWordcloudVisualization,
        defaults: {
          // 默认配置
          fontSize: 14,
          fontFamily: 'Impact',
        },
      },
      editorConfig: {
          // 编辑器配置，可以自定义参数
          optionsTemplate: `<div>
            <div>
              <label>字体大小:</label>
              <input type="number" ng-model="vis.params.fontSize" />
            </div>
            <div>
              <label>字体:</label>
              <input type="text" ng-model="vis.params.fontFamily" />
            </div>
          </div>`,
      },
      requestHandler: async ({ params, timeRange, filters, query }) => {
         // 处理请求，从服务端获取数据
        const response = await core.http.get('/api/my_wordcloud_visualization/example');
        return response;
      },
      responseHandler: (response) => {
        // 处理服务端返回的数据
        return response;
      },
    });
  }
 
  public start(core: CoreStart) {}
}

5. 编写 React 组件 (public/components/my_visualization.tsx)

// public/components/my_visualization.tsx
import React from 'react';
import ReactWordcloud from 'react-wordcloud';
 
interface Props {
  visParams: {
    fontSize: number;
    fontFamily: string;
  };
  visData: Array<{ word: string; count: number }>;
}
 
export const MyWordcloudVisualization: React.FC<Props> = ({ visParams, visData }) => {
  if (!visData) {
    return <div>No data</div>;
  }
 
  const words = visData.map((item) => ({
    text: item.word,
    value: item.count,
  }));
 
  const options = {
    fontSizes: [visParams.fontSize, visParams.fontSize * 3],
    fontFamily: visParams.fontFamily,
  };
 
  return (
    <div style={{ width: '100%', height: '400px' }}>
      <ReactWordcloud words={words} options={options} />
    </div>
  );
};

在这个例子中，我们使用了 react-wordcloud 这个库来渲染词云。你可以根据自己的需求选择合适的图表库。

6. 运行插件

完成以上步骤后，就可以运行插件了。在 Kibana 目录下执行以下命令：

yarn start

然后在 Kibana 的 Visualize 页面，就可以看到我们自定义的“My Wordcloud”可视化类型了。

React 组件在 Kibana 插件中的应用

从上面的例子可以看出，React 组件在 Kibana 插件开发中扮演着非常重要的角色。Kibana 的 UI 框架就是基于 React 构建的，因此我们可以充分利用 React 的特性来构建复杂的交互组件。

• 组件化： 将 UI 拆分成独立的组件，提高代码复用性和可维护性。
• 状态管理： 使用 React 的 state 和 props 管理组件状态，实现数据的动态更新。
• 生命周期： 利用 React 的生命周期方法，控制组件的渲染和更新。
• Eui 组件库： Kibana 提供了一套名为 Eui (Elastic UI) 的 React 组件库，包含丰富的 UI 组件，可以帮助我们快速构建美观、一致的界面。

API 设计：支持插件功能

除了 UI 组件，API 设计也是 Kibana 插件开发中重要的一环。我们需要设计合理的 API，来支持插件与 Elasticsearch 或其他数据源的交互，以及插件内部不同模块之间的通信。

• RESTful API： Kibana 插件通常使用 RESTful API 与服务端进行通信。我们可以使用 Kibana 提供的 core.http 服务来发送 HTTP 请求。
• GraphQL API： 对于复杂的数据查询，可以考虑使用 GraphQL API。Kibana 本身也支持 GraphQL。
• 插件内部 API： 对于复杂的插件，我们可以定义内部 API，来解耦不同模块之间的依赖。

总结

今天，老铁带你深入了解了 Kibana 插件的开发，从插件架构、自定义可视化图表、React 组件到 API 设计，相信你已经对 Kibana 插件开发有了更全面的认识。下次再遇到 Kibana 默认功能无法满足的需求时，不妨试试自己动手，打造一个专属的 Kibana 插件！

记住，Kibana 插件开发是一个不断探索和学习的过程，希望你在实践中不断积累经验，成为一名真正的 Kibana 插件开发高手！