Elastic/Kibana插件开发入门：构建Hello World应用

Elastic/Kibana插件开发入门：构建Hello World应用

kibana Your window into the Elastic Stack 项目地址: https://gitcode.com/gh_mirrors/ki/kibana

前言

在Kibana生态系统中，插件开发是扩展平台功能的核心方式。本文将手把手教你如何开发一个最简单的Kibana插件，实现一个显示"Hello World"的基础应用。通过这个教程，你将掌握Kibana插件开发的基本流程和核心概念。

开发环境准备

在开始插件开发前，需要确保你的开发环境已经正确配置：

1. 安装Node.js（建议使用LTS版本）
2. 安装Yarn包管理工具
3. 获取Kibana源代码并完成依赖安装

确保你已经完成了yarn kbn bootstrap命令来初始化开发环境。

手动创建Hello World插件

第一步：创建插件目录结构

在Kibana项目中，插件可以存放在几个不同的位置：

• src/plugins：存放核心功能插件
• x-pack/plugins：存放商业功能插件
• examples：存放示例插件（不会包含在发行版中）

对于我们的Hello World示例，建议放在examples目录下：

cd examples
mkdir hello_world
cd hello_world

第二步：创建插件清单文件

每个Kibana插件都需要一个kibana.json清单文件来描述插件的基本信息：

{
  "id": "helloWorld",
  "version": "1.0.0",
  "kibanaVersion": "kibana",
  "owner": {
    "name": "开发者名称",
    "githubTeam": "团队名称"
  },
  "ui": true
}

关键字段说明：

• id：插件的唯一标识符
• version：插件版本
• kibanaVersion：兼容的Kibana版本
• ui：是否包含UI部分

第三步：配置TypeScript编译

创建tsconfig.json文件来配置TypeScript编译选项：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./target/types",
  },
  "include": [
    "index.ts",
    "common/**/*.ts",
    "public/**/*.ts",
    "public/**/*.tsx",
    "server/**/*.ts",
    "../../typings/**/*"
  ],
  "exclude": [],
  "references": [
    { "path": "../../src/core/tsconfig.json" }
  ]
}

第四步：实现插件核心逻辑

在public/plugin.tsx中实现插件的主要逻辑：

import React from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';

export class HelloWorldPlugin implements Plugin {
  public setup(core: CoreSetup) {
    // 注册应用到侧边导航菜单
    core.application.register({
      id: 'helloWorld',
      title: 'Hello World',
      async mount({ element }: AppMountParameters) {
        ReactDOM.render(<div>Hello World!</div>, element);
        return () => ReactDOM.unmountComponentAtNode(element);
      },
    });
  }
  
  public start(core: CoreStart) {
    return {};
  }
  
  public stop() {}
}

关键点说明：

• setup方法：在Kibana启动时调用，用于注册应用
• start方法：在插件启动时调用
• stop方法：在插件停止时调用

第五步：创建插件入口文件

创建public/index.ts作为插件入口：

import { HelloWorldPlugin } from './plugin';

export function plugin() {
  return new HelloWorldPlugin();
}

使用插件生成器快速创建

Kibana提供了便捷的插件生成器工具，可以快速创建插件骨架：

node scripts/generate_plugin hello_world

按照提示选择：

• 插件名称：helloWorld
• 是否为Kibana仓库的一部分：是
• 插件类型：Kibana示例
• 是否生成UI插件：是
• 是否生成服务端插件：否

生成器会自动创建完整的插件结构，包括必要的配置文件和示例代码。

构建和运行插件

1. 启动Elasticsearch：

yarn es snapshot --license trial

2. 启动Kibana并包含示例插件：

yarn start --run-examples

启动完成后，你可以在Kibana的导航菜单底部找到你的Hello World应用。

插件开发核心概念

1. 生命周期管理：Kibana插件遵循setup/start/stop的生命周期模型
2. UI注册：通过core.application.register方法注册UI应用
3. 依赖管理：插件可以声明对其他插件的依赖关系
4. 配置管理：插件可以通过Kibana的配置系统获取配置项

进阶建议

完成Hello World插件后，你可以尝试：

1. 添加服务端逻辑
2. 实现更复杂的UI组件
3. 添加国际化支持
4. 集成Kibana的数据查询功能
5. 开发自定义可视化组件

总结

通过本教程，你已经掌握了Kibana插件开发的基础流程。从最简单的Hello World开始，你可以逐步探索Kibana插件开发的更多可能性，构建功能丰富的扩展应用。记住，Kibana插件架构的核心是模块化和可扩展性，理解这些基础概念将为你的插件开发之路打下坚实基础。

kibana Your window into the Elastic Stack 项目地址: https://gitcode.com/gh_mirrors/ki/kibana