OpenShift 文档正在迁移，很快将只能在 docs.redhat.com（所有 Red Hat 产品文档的所在地）访问。立即体验 新的文档体验。
  1. 文档
    2. history bug_report picture_as_pdf
×

动态插件概述

关于动态插件

动态插件在运行时从远程资源加载和解释。向控制台交付和公开动态插件的一种方法是通过 OLM 运算符。运算符在平台上创建一个带有 HTTP 服务器的部署以托管插件，并使用 Kubernetes 服务公开它。

动态插件允许您在运行时向控制台用户界面添加自定义页面和其他扩展。ConsolePlugin 自定义资源向控制台注册插件，集群管理员在控制台运算符配置中启用插件。

主要功能

动态插件允许您对 OpenShift Container Platform 体验进行以下自定义

  • 添加自定义页面。

  • 添加管理员和开发者以外的视角。

  • 添加导航项。

  • 向资源页面添加选项卡和操作。

一般指南

创建插件时，请遵循以下一般指南

  • 需要 Node.js 和 yarn 来构建和运行您的插件。

  • 使用插件名称作为 CSS 类名的前缀，以避免冲突。例如，my-plugin__heading 和 my-plugin_\_icon。

  • 保持与其他控制台页面的外观、感觉和行为一致。

  • 创建插件时，请遵循 react-i18next 本地化指南。您可以像以下示例中一样使用 `useTranslation` hook

    conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};

  • 避免可能影响插件组件之外标记的选择器，例如元素选择器。这些不是 API，可能会更改。使用它们可能会破坏您的插件。避免可能影响插件组件之外标记的选择器，例如元素选择器。

  • 为插件 Web 服务器提供的所有资产，使用 `Content-Type` 响应头提供有效的 JavaScript 多用途互联网邮件扩展 (MIME) 类型。每个插件部署都应包含一个托管给定插件的生成资产的 Web 服务器。

  • 必须使用 Webpack 版本 5 及更高版本使用 Webpack 构建插件。

  • 应使用插件名称作为 CSS 类名的前缀，以避免冲突。例如，my-plugin__heading 和 my-plugin_\_icon。

  • 应保持与其他控制台页面的外观、感觉和行为一致。

  • 应避免可能影响插件组件之外标记的选择器，例如元素选择器。这些不是 API，可能会更改。

  • 必须使用 `Content-Type` 响应头提供有效的 JavaScript 多用途互联网邮件扩展 (MIME) 类型，用于插件 Web 服务器提供的所有资产。每个插件部署都应包含一个托管给定插件的生成资产的 Web 服务器。

PatternFly 指南

创建插件时，请遵循这些使用 PatternFly 的指南

  • 使用PatternFly组件和PatternFly CSS变量。核心PatternFly组件可通过SDK获得。使用PatternFly组件和变量有助于您的插件在未来的控制台版本中保持一致的外观。

    • 如果您使用的是OpenShift Container Platform 4.14及更早版本，请使用Patternfly 4.x。

    • 如果您使用的是OpenShift Container Platform 4.15或更高版本，请使用Patternfly 5.x。

  • 请遵循PatternFly的可访问性基础知识，使您的插件易于访问。

  • 避免使用其他CSS库，例如Bootstrap或Tailwind。它们可能会与PatternFly冲突，并且与控制台的其余部分不匹配。插件应仅包含特定于其用户界面的样式，以便在基本的PatternFly样式之上进行评估。避免导入样式，例如@patternfly/react-styles/*/.css或插件中@patternfly/patternfly包中的任何样式。

  • 控制台应用程序负责加载所有受支持PatternFly版本的基础样式。

使用react-i18next翻译消息

该插件模板演示了如何使用react-i18next翻译消息。

先决条件

  • 您必须在本地克隆插件模板。

  • 可选：要在本地测试您的插件，请在容器中运行OpenShift Container Platform Web控制台。您可以使用Docker或Podman 3.2.0或更高版本。

步骤

  1. 在名称前加上plugin__前缀以避免任何命名冲突。插件模板默认使用plugin__console-plugin-template命名空间，当您重命名插件时（例如，plugin__my-plugin）必须进行更新。您可以使用useTranslation钩子，例如

    conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};

    您必须使i18n命名空间与ConsolePlugin资源的名称匹配。

  2. 根据需要设置spec.i18n.loadType字段。

    示例1. plugin__console-demo-plugin
    spec:
  backend:
    service:
      basePath: /
      name: console-demo-plugin
      namespace: console-demo-plugin
      port: 9001
    type: Service
  displayName: OpenShift Console Demo Plugin
  i18n:
    loadType: Preload (1)
    1 在动态插件加载后，从i18n命名空间加载插件的所有本地化资源。

  3. 在console-extensions.json中使用%plugin__console-plugin-template~My Label%格式的标签。控制台将该值替换为来自plugin__console-plugin-template命名空间的当前语言的消息。例如

      {
    "type": "console.navigation/section",
    "properties": {
      "id": "admin-demo-section",
      "perspective": "admin",
      "name": "%plugin__console-plugin-template~Plugin Template%"
    }
  }

  4. 在TypeScript文件中包含一个注释，用于i18next-parser将消息从console-extensions.json添加到您的消息目录。例如

    // t('plugin__console-demo-plugin~Demo Plugin')

  5. 要在添加或更改消息时更新插件模板locales文件夹中的JSON文件，请运行以下命令

    $ yarn i18n