WEBKT

Kibana 插件开发进阶：React UI 组件与服务 API 的深度定制

3 0 0 0

为什么要定制 Kibana 插件？

开发前的准备：环境搭建与基础知识

环境搭建步骤

React UI 组件开发：构建用户友好的界面

1. 组件结构和文件组织

2. 导入 Kibana UI 组件库

3. 使用 EUI 组件构建界面

4. 数据可视化：使用 EuiChart

5. 状态管理：使用 React Hooks 或 Redux

6. 与 Kibana 核心交互：使用 core 对象

服务端 API 开发：提供数据和服务

1. 定义 API 路由

2. 实现 API 逻辑

3. 注册 API 路由

4. 客户端调用 API

插件配置与用户交互

1. 插件配置

2. 插件的入口

3. 添加菜单和导航

深入：高级技巧与最佳实践

1. 性能优化

2. 错误处理与日志

3. 测试

4. 安全性

总结：打造你的专属 Kibana 插件

你好，我是老码农，一个热衷于探索技术边界的家伙。今天，我们来聊聊 Kibana 插件开发，特别是如何利用 React 构建酷炫的 UI 组件，以及设计和实现强大的服务 API。这不仅仅是基础入门，而是要带你深入 Kibana 的核心，定制出真正属于自己的图表和数据源。

为什么要定制 Kibana 插件？

Kibana 本身已经很强大了，但很多时候，我们面对的是特定的业务场景和独特的数据分析需求。这时候，Kibana 提供的默认可视化和数据源可能无法满足你的需求。想象一下，你想要展示一些特殊的指标，比如用户行为轨迹、服务器负载的实时变化，或者基于机器学习模型的预测结果。这些都需要定制的插件来实现。

定制 Kibana 插件，可以让你：

  • 实现个性化可视化： 创建独特的图表类型，比如桑基图、热力图、甚至是 3D 交互图。
  • 扩展数据源： 连接到各种数据源，不仅仅是 Elasticsearch，还可以是 MySQL、PostgreSQL、甚至是云服务 API。
  • 增强用户体验： 打造更友好的界面，提供更智能的交互方式，让用户更高效地分析数据。
  • 满足特定业务需求： 针对特定业务场景，开发定制的分析工具，比如电商行业的销售数据分析、金融行业的风险监控。

开发前的准备：环境搭建与基础知识

在开始之前，你需要准备好以下环境和知识：

  • Node.js 和 npm/yarn： Kibana 插件开发依赖于 Node.js 和 npm/yarn 包管理工具。确保你已经安装了它们，并且版本符合 Kibana 的要求。
  • Elasticsearch 和 Kibana： 你需要安装 Elasticsearch 和 Kibana，并确保它们可以正常运行。Kibana 的版本需要与你开发的插件兼容。
  • React 基础： 你需要对 React 有一定的了解，包括组件、JSX、状态管理、生命周期等。如果你不熟悉 React，建议先学习一些 React 的基础知识。
  • JavaScript 和 TypeScript： 虽然 Kibana 插件可以使用 JavaScript 开发，但推荐使用 TypeScript，它可以提供更好的类型检查和代码提示，提高开发效率。
  • Kibana 插件开发文档： 熟悉 Kibana 的插件开发文档，了解 Kibana 提供的 API 和开发规范。

环境搭建步骤

  1. 安装 Node.js 和 npm/yarn： 可以从 Node.js 官网下载安装包，或者使用包管理工具安装。

  2. 安装 Elasticsearch 和 Kibana： 可以从 Elasticsearch 和 Kibana 官网下载安装包，或者使用 Docker 镜像安装。

  3. 创建一个 Kibana 插件项目： 使用 Kibana 提供的 kbn 命令创建一个新的插件项目。例如：

    		cd <kibana-path>
    		./bin/kbn bootstrap
    		./bin/kbn create plugin my_custom_plugin
    		cd plugins/my_custom_plugin

    这个命令会创建一个名为 my_custom_plugin 的插件目录，并生成一些初始文件。

React UI 组件开发：构建用户友好的界面

Kibana 使用 React 作为前端框架，因此你可以使用 React 组件来构建插件的 UI。下面是一些关键的步骤和技巧：

1. 组件结构和文件组织

在你的插件目录下，你可以创建一个 public/ 目录来存放静态资源，比如 CSS、图片等。src/ 目录存放你的 React 组件和相关代码。通常，我会这样组织我的组件：

my_custom_plugin/
├── public/
│   └── ...
├── src/
│   ├── components/
│   │   ├── MyChart.tsx       # 图表组件
│   │   ├── MyForm.tsx        # 表单组件
│   │   └── ...
│   ├── services/
│   │   └── api.ts            # API 服务
│   ├── index.tsx          # 入口组件
│   └── ...
├── package.json
├── kibana.json
└── ...

2. 导入 Kibana UI 组件库

Kibana 提供了自己的 UI 组件库，你可以直接导入使用。这些组件已经经过了优化，可以与 Kibana 的整体风格保持一致。在你的组件中，使用 import 语句导入所需的组件：

import React from 'react';
import { EuiButton, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
 
const MyFormComponent: React.FC = () => {
  return (
    <EuiForm>
      <EuiFormRow label="字段 1">
        <EuiFieldText />
      </EuiFormRow>
      <EuiFormRow label="字段 2">
        <EuiFieldText />
      </EuiFormRow>
      <EuiButton type="submit">提交</EuiButton>
    </EuiForm>
  );
};
 
export default MyFormComponent;

3. 使用 EUI 组件构建界面

EUI (Elastic UI) 是 Kibana 提供的 UI 组件库，它提供了丰富的组件，可以满足你大部分的 UI 需求。例如：

  • 布局组件： EuiFlexGroup、EuiFlexItem、EuiPanel 等，用于控制组件的布局。
  • 表单组件： EuiForm、EuiFormRow、EuiFieldText、EuiSelect 等，用于创建表单。
  • 按钮组件： EuiButton，用于创建按钮。
  • 数据展示组件： EuiTable、EuiChart 等，用于展示数据。

你可以根据你的需求，选择合适的 EUI 组件来构建你的界面。例如，创建一个简单的表单：

import React, { useState } from 'react';
import { EuiForm, EuiFormRow, EuiFieldText, EuiButton } from '@elastic/eui';
 
const MyFormComponent: React.FC = () => {
  const [inputValue, setInputValue] = useState('');
 
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log('提交的值：', inputValue);
    // 这里可以调用 API 发送数据
  };
 
  return (
    <EuiForm onSubmit={handleSubmit}>
      <EuiFormRow label="输入框">
        <EuiFieldText value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
      </EuiFormRow>
      <EuiButton type="submit">提交</EuiButton>
    </EuiForm>
  );
};
 
export default MyFormComponent;

4. 数据可视化：使用 EuiChart

如果你的插件需要展示数据，可以使用 EuiChart 组件。EuiChart 支持多种图表类型，比如线图、柱状图、饼图等。你需要提供图表的数据，并配置图表的样式。

import React from 'react';
import { EuiChart, EuiLineSeries, EuiAxis, EuiBarSeries, EuiLegend, EuiChartLineSeries, EuiScale, EuiTheme, EuiMarkSeries } from '@elastic/eui';
 
const MyChartComponent: React.FC = () => {
  const lineData = [
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 15 },
    { x: 3, y: 25 },
    { x: 4, y: 20 },
  ];
 
  const barData = [
    { x: 0, y: 5 },
    { x: 1, y: 10 },
    { x: 2, y: 8 },
    { x: 3, y: 12 },
    { x: 4, y: 10 },
  ];
 
  return (
    <EuiChart>
      <EuiScale
        x={{
          position: 'bottom',
          tickFormat: (x: any) => `Step ${x}`,
          tickValues: [0, 1, 2, 3, 4],
        }}
        y={{ position: 'left', tickFormat: (y: any) => `${y}` }}
      />
      <EuiLineSeries name="Line" data={lineData} color="#007bff" />
      <EuiBarSeries name="Bar" data={barData} color="#28a745" />
    </EuiChart>
  );
};
 
export default MyChartComponent;

5. 状态管理：使用 React Hooks 或 Redux

对于复杂的插件，你需要管理组件的状态。你可以使用 React Hooks (如 useState、useEffect、useContext) 来管理组件内部的状态。对于更复杂的应用，可以考虑使用 Redux 或其他状态管理库。Kibana 内部也使用了状态管理库，你可以参考 Kibana 的代码。

6. 与 Kibana 核心交互：使用 core 对象

Kibana 提供了 core 对象，你可以通过它访问 Kibana 的核心功能，比如：

  • 导航： 你可以使用 core.application.navigateTo 方法导航到其他页面。
  • 配置： 你可以使用 core.uiSettings 获取和设置 Kibana 的配置。
  • 数据： 你可以使用 core.http 发送 HTTP 请求，获取数据。

例如，获取 Kibana 的配置：

import React, { useState, useEffect } from 'react';
import { useKibana } from '@kbn/i18n/react'; // 注意导入方式
 
const MyComponent: React.FC = () => {
  const { uiSettings } = useKibana();
  const [dateFormat, setDateFormat] = useState('');
 
  useEffect(() => {
    const fetchData = async () => {
      const format = await uiSettings.get('dateFormat:formats');
      setDateFormat(JSON.stringify(format));
    };
    fetchData();
  }, [uiSettings]);
 
  return (
    <div>
      <p>日期格式：{dateFormat}</p>
    </div>
  );
};
 
export default MyComponent;

服务端 API 开发：提供数据和服务

除了 UI 组件，你还需要开发服务端的 API，为你的插件提供数据和服务。Kibana 使用 Node.js 作为服务端，你可以使用 Express 或 Koa 等框架来构建 API。以下是一些关键步骤：

1. 定义 API 路由

在你的插件的 server/ 目录下，你需要定义 API 路由。例如，创建一个名为 server/routes/index.ts 的文件，定义 API 路由：

import { KibanaRequest, KibanaResponse } from 'kibana/server';
 
export function defineRoutes(router: any) {
  router.get(
    {
      path: '/api/my_custom_plugin/hello',
      validate: false,
    },
    async (context: any, request: KibanaRequest, response: KibanaResponse) => {
      return response.ok({
        body: { message: 'Hello from my custom plugin!' },
      });
    }
  );
}

2. 实现 API 逻辑

在 API 路由中，你需要实现 API 的逻辑，比如查询 Elasticsearch、处理数据、返回结果等。你可以使用 Elasticsearch 的客户端库 (如 @elastic/elasticsearch) 来查询 Elasticsearch。

import { Client } from '@elastic/elasticsearch';
import { KibanaRequest, KibanaResponse } from 'kibana/server';
 
export async function searchData(esClient: Client, index: string, query: any) {
  try {
    const response = await esClient.search({
      index,
      body: query,
    });
    return response.hits.hits.map((hit: any) => hit._source);
  } catch (error) {
    console.error('Elasticsearch 查询错误:', error);
    throw error;
  }
}
 
export function defineRoutes(router: any) {
  router.get(
    {
      path: '/api/my_custom_plugin/search',
      validate: false,
    },
    async (context: any, request: KibanaRequest, response: KibanaResponse) => {
      const esClient = context.core.elasticsearch.client.asCurrentUser;
      const { index, query } = request.query;
 
      try {
        const results = await searchData(esClient, index, JSON.parse(query));
        return response.ok({ body: results });
      } catch (error) {
        return response.customError({
          statusCode: error.statusCode || 500,
          body: {
            message: error.message || '服务器内部错误',
          },
        });
      }
    }
  );
}

3. 注册 API 路由

在插件的 server/plugin.ts 文件中，你需要注册你的 API 路由。

import { PluginInitializerContext } from 'kibana/server';
import { defineRoutes } from './routes';
 
export class MyCustomPlugin {
  constructor(private readonly initializerContext: PluginInitializerContext) {}
 
  public async setup() {
    const router = this.initializerContext.http.createRouter();
    defineRoutes(router);
    return {
      getRouter: () => router,
    };
  }
 
  public async start() {
    return {};
  }
}

4. 客户端调用 API

在你的 React 组件中，你可以使用 fetch 或 Axios 等库来调用你的 API。例如：

import React, { useState, useEffect } from 'react';
import { EuiButton, EuiFieldText } from '@elastic/eui';
 
const MyComponent: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [index, setIndex] = useState('');
  const [query, setQuery] = useState('');
 
  const fetchData = async () => {
    try {
      const response = await fetch(`/api/my_custom_plugin/search?index=${index}&query=${query}`);
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('API 调用错误:', error);
    }
  };
 
  return (
    <div>
      <EuiFieldText placeholder="索引" value={index} onChange={(e) => setIndex(e.target.value)} />
      <EuiFieldText placeholder="查询" value={query} onChange={(e) => setQuery(e.target.value)} />
      <EuiButton onClick={fetchData}>查询</EuiButton>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{JSON.stringify(item)}</li>
        ))}
      </ul>
    </div>
  );
};
 
export default MyComponent;

插件配置与用户交互

1. 插件配置

你可以为你的插件添加配置选项，让用户可以自定义插件的行为。在插件的 kibana.json 文件中，你可以定义插件的配置选项。

{
  "id": "my_custom_plugin",
  "version": "1.0.0",
  "kibanaVersion": "8.x.x",
  "server": true,
  "ui": true,
  "config": {
    "schema": {
      "myOption": {
        "type": "string",
        "defaultValue": "default value",
        "description": "插件的配置选项",
      },
    },
  },
  "requiredPlugins": ["vis_type_timeseries"]
}

然后在你的插件代码中，你可以通过 config 对象访问这些配置选项。

import { useKibana } from '@kbn/i18n/react';
 
const MyComponent: React.FC = () => {
  const { config } = useKibana();
  const myOption = config.get('myOption');
 
  return (
    <div>
      <p>My Option: {myOption}</p>
    </div>
  );
};
 
export default MyComponent;

2. 插件的入口

在插件的 index.ts 文件中，你可以定义插件的入口。这个文件用于注册你的插件，并将你的 UI 组件添加到 Kibana 的界面中。

import { PluginInitializerContext, CoreSetup, CoreStart } from 'kibana/server';
import { MyCustomPlugin } from './server';
 
export function plugin(initializerContext: PluginInitializerContext) {
  return new MyCustomPlugin(initializerContext);
}
 
export async function setup(core: CoreSetup) {
  const router = await plugin(initializerContext).setup();
  core.http.registerRouter(router);
 
  return {
    // ...
  };
}
 
export async function start(core: CoreStart) {
  // ...
}

3. 添加菜单和导航

你可以将你的插件添加到 Kibana 的菜单中，让用户可以方便地访问你的插件。在插件的 index.ts 文件中，你可以使用 core.application.register 方法注册你的插件，并指定插件的名称、图标、和组件。

import { AppMountParameters, CoreSetup, CoreStart, Plugin } from 'kibana/public';
import { i18n } from '@kbn/i18n';
import { MyComponent } from './components/MyComponent';
 
export class MyCustomPlugin implements Plugin<void, void> {
  public setup(core: CoreSetup) {
    core.application.register({
      id: 'my_custom_plugin',
      title: i18n.translate('myCustomPlugin.appName', {
        defaultMessage: 'My Custom Plugin',
      }),
      order: 8000,
      icon: 'visPie',
      async mount(params: AppMountParameters) {
        const { element, ...rest } = params;
        ReactDOM.render(<MyComponent {...rest} />, element);
        return () => ReactDOM.unmountComponentAtNode(element);
      },
    });
    return {};
  }
 
  public start(core: CoreStart) {
    return {};
  }
}

深入：高级技巧与最佳实践

1. 性能优化

  • 代码分割： 使用代码分割，将你的插件代码拆分成多个小块，按需加载，减少初始加载时间。
  • 懒加载： 对于非关键的组件，可以使用懒加载，在用户需要的时候再加载。
  • 避免不必要的渲染： 使用 React.memo、useMemo、useCallback 等技术，避免不必要的组件渲染。
  • 数据缓存： 缓存 API 的数据，避免重复请求。

2. 错误处理与日志

  • try...catch： 在 API 路由和 React 组件中使用 try...catch 块，捕获错误并进行处理。
  • 错误边界： 使用 React 错误边界，捕获子组件的错误，避免整个应用崩溃。
  • 日志： 使用 Kibana 的日志功能，记录插件的错误和调试信息。

3. 测试

  • 单元测试： 对你的 React 组件和 API 逻辑进行单元测试，确保代码的质量。
  • 集成测试： 进行集成测试，测试你的插件与 Kibana 的集成。
  • E2E 测试： 使用 E2E 测试工具，模拟用户操作，测试你的插件的功能。

4. 安全性

  • 输入验证： 对用户输入进行验证，防止 XSS、SQL 注入等安全漏洞。
  • 权限控制： 根据用户的角色和权限，控制插件的访问权限。
  • 数据脱敏： 在展示敏感数据之前，进行脱敏处理。

总结：打造你的专属 Kibana 插件

通过本文，我希望你对 Kibana 插件开发有了更深入的了解。从 React UI 组件的构建，到服务端 API 的设计与实现，再到插件的配置、用户交互和高级技巧，我们一起探索了 Kibana 插件开发的各个方面。现在，你可以开始动手，打造你的专属 Kibana 插件了！

记住，Kibana 插件开发是一个不断学习和探索的过程。随着你的经验积累，你会发现更多有趣的功能和技巧。希望你能在这个过程中，不断提升自己的技能，创造出更强大的数据分析工具。如果你在开发过程中遇到任何问题，欢迎随时与我交流。

最后，我为你准备了一些额外的学习资源：

祝你开发愉快！加油，老铁！

老码农 Kibana插件开发ReactElasticsearch

评论点评

打赏赞助
sponsor

感谢您的支持让我们更好的前行

分享

QRcode

https://www.webkt.com/article/8255