第 7 章 动态插件
7.1. 动态插件概述
7.1.1. 关于动态插件
动态插件在运行时从远程源加载并解释。向控制台提供和公开动态插件的一种方法是通过 OLM Operator。Operator 在带有 HTTP 服务器的平台上创建部署，以托管插件并使用 Kubernetes 服务公开它。
动态插件允许您在运行时为控制台用户界面添加自定义页面和其他扩展。ConsolePlugin 自定义资源使用控制台注册插件，集群管理员在 console Operator 配置中启用了插件。
7.1.2. 主要特性
通过动态插件，您可以对 OpenShift Container Platform 体验进行以下自定义：
- 添加自定义页面。
- 增加了除管理员和开发人员之外的其他视角。
- 添加导航项。
- 在资源页面中添加制表符和操作。
7.1.3. 常规指南
在创建插件时，请遵循以下常规准则：
-
构建和运行插件需要
Node.js和yarn。 -
为您的 CSS 类名称加上插件名称前缀，以避免冲突。例如，
my-plugin__heading和my-plugin_\_icon。 - 与其他控制台页面保持一致的外观、感觉和行为。
在创建插件时遵循 react-i18next 指南。您可以使用类似以下示例中的
useTranslationhook: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，可能随时更改。
-
为插件 Web 服务器提供的所有资产，使用
Content-Type响应标头提供有效的 JavaScript 多用途互联网邮件扩展(MIME)类型。每个插件部署都应该包含一个 Web 服务器，用于托管给定插件生成的资产。
PatternFly 指南
在创建插件时，请按照以下使用 PatternFly 的准则进行以下操作：
使用 PatternFly 组件和 PatternFly CSS 变量。SDK 提供了核心 PatternFly 组件。使用 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 版本载入基本风格。
7.1.3.1. 使用 react-i18next 转换消息
插件模板演示了如何使用 react-i18next 转换消息。
先决条件
- 您必须在本地克隆插件模板。
- 可选： 要在本地测试插件，请在容器中运行 OpenShift Container Platform Web 控制台。您可以使用 Docker 或 Podman 3.2.0 或更高版本。
流程
使用
plugin__为名称添加前缀，以避免命名冲突。插件模板默认使用plugin__console-plugin-template命名空间，并在重命名插件时更新，如plugin__my-plugin。您可以使用useTranslationhook，例如：conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };重要您必须使用
ConsolePlugin资源的名称匹配i18n命名空间。根据所需行为设置
spec.i18n.loadType字段。例 7.1.
plugin__console-demo-pluginspec: 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%" } }在 i18next-parser 的 TypeScript 文件中包含一条注释，将来自
console-extensions.json的消息添加到您的消息目录中。例如：// t('plugin__console-demo-plugin~Demo Plugin')要在添加或更改消息时更新插件模板
locales文件夹中的 JSON 文件，请运行以下命令：$ yarn i18n
