动态插件概述 - 动态插件 | Web 控制台 | OpenShift Dedicated

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

关于动态插件

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

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

主要功能

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

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

一般准则

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

构建和运行插件需要 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` 响应标头为插件 Web 服务器提供的所有资产提供有效的 JavaScript 多用途互联网邮件扩展 (MIME) 类型。每个插件部署都应包含一个托管给定插件的生成资产的 Web 服务器。

PatternFly 指南

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

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

使用 react-i18next 翻译消息

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

先决条件

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

步骤

在名称前添加前缀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资源的名称匹配。

根据需要设置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~我的标签%来标记。控制台会将该值替换为来自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
```