动态插件概述 - 动态插件 | Web 控制台 | Red Hat OpenShift Service on AWS

编辑

关于动态插件
主要功能
一般准则
- 使用 react-i18next 翻译消息

编辑

关于动态插件

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

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

主要功能

动态插件允许您对在 AWS 上的 Red Hat OpenShift 服务体验进行以下自定义

添加自定义页面。
添加除管理员和开发人员之外的其他视角。
添加导航项目。
向资源页面添加选项卡和操作。

一般准则

创建插件时，请遵循以下一般准则

构建和运行插件需要 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 多用途 Internet 邮件扩展 (MIME) 类型。每个插件部署都应包含一个托管给定插件的生成资产的 Web 服务器。
必须使用 Webpack 5 及更高版本使用 Webpack 构建您的插件。
应为 CSS 类名添加插件名称前缀，以避免冲突。例如，my-plugin__heading 和 my-plugin_\_icon。
应保持与其他控制台页面一致的外观、感觉和行为。
应避免可能影响插件组件外部标记的选择器，例如元素选择器。这些不是 API，可能会发生变化。
必须使用 Content-Type 响应标头为插件 Web 服务器提供的所有资产提供有效的 JavaScript 多用途 Internet 邮件扩展 (MIME) 类型。每个插件部署都应包含一个托管给定插件的生成资产的 Web 服务器。

PatternFly 指南

创建插件时，请遵循以下使用 PatternFly 的指南

使用 PatternFly 组件和 PatternFly CSS 变量。核心 PatternFly 组件可通过 SDK 获得。使用 PatternFly 组件和变量有助于您的插件在未来的控制台版本中保持一致。
- 如果您使用的是 AWS 上的 Red Hat OpenShift 服务 4.14 或更早版本，请使用 Patternfly 4.x。
- 如果您使用的是 AWS 上的 Red Hat OpenShift 服务 4.15 或更高版本，请使用 Patternfly 5.x。
通过遵循 PatternFly 的辅助功能基础知识来使您的插件可访问。
避免使用其他 CSS 库，例如 Bootstrap 或 Tailwind。它们可能会与 PatternFly 冲突，并且与控制台的其余部分不匹配。插件应仅包含特定于其用户界面的样式，以便在基本 PatternFly 样式之上进行评估。避免导入样式，例如 @patternfly/react-styles/*/.css 或插件中 @patternfly/patternfly 包中的任何样式。
控制台应用程序负责加载所有受支持 PatternFly 版本的基本样式。

编辑

使用 react-i18next 翻译消息

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

先决条件

您必须在本地克隆插件模板。
可选：要在本地测试您的插件，请在容器中运行 AWS 上的 Red Hat OpenShift 服务 Web 控制台。您可以使用 Docker 或 Podman 3.2.0 或更高版本。

步骤

以 plugin__ 为名称添加前缀，以避免任何命名冲突。插件模板默认使用 plugin__console-plugin-template 命名空间，在重命名插件时必须更新，例如 plugin__my-plugin。您可以使用 useTranslation hook，例如
```
conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};
```
必须将 i18n 命名空间与 ConsolePlugin 资源的名称匹配。

根据需要设置 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` 命名空间的插件的所有本地化资源。

在 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%"
    }
  }

在 TypeScript 文件中包含 i18next-parser 的注释，以将消息从 console-extensions.json 添加到您的消息目录。例如
```
// t('plugin__console-demo-plugin~Demo Plugin')
```
在添加或更改消息时，要更新插件模板 locales 文件夹中的 JSON 文件，请运行以下命令
```
$ yarn i18n
```