第 7 章 在 OpenShift Container Platform Web 控制台中添加动态插件
您可以在运行时载入的集群中创建和部署动态插件。
重要
创建动态插件只是一个技术预览功能。技术预览功能不受红帽产品服务等级协议(SLA)支持,且功能可能并不完整。红帽不推荐在生产环境中使用它们。这些技术预览功能可以使用户提早试用新的功能,并有机会在开发阶段提供反馈意见。
有关红帽技术预览功能支持范围的更多信息,请参阅技术预览功能支持范围。
7.1. 关于动态插件
动态插件允许您在运行时为接口添加自定义页面和其他扩展。ConsolePlugin
自定义资源使用控制台注册插件,集群管理员在 console-operator
配置中启用了插件。
7.1.1. 主要特性
通过动态插件,您可以对 OpenShift Container Platform 体验进行以下自定义:
- 添加自定义页面。
- 增加了除管理员和开发人员之外的其他视角。
- 添加导航项。
- 在资源页面中添加制表符和操作。
7.1.2. 常规指南
在创建插件时,请遵循以下常规准则:
-
构建和运行插件需要
Node.js
和yarn
。 -
为您的 CSS 类名称加上插件名称前缀,以避免冲突。例如,
my-plugin__heading
和my-plugin_\_icon
。 - 与其他控制台页面保持一致的外观、感觉和行为。
在创建插件时遵循 react-i18next 指南。您可以使用类似以下示例中的
useTranslation
hook:const Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
- 避免可能影响插件组件之外的标记的选择器,如元素选择器。这些不是 API,可能随时更改。使用它们可能会破坏插件。
PatternFly 4 指南
在创建插件时,请按照以下使用 PatternFly 的准则进行以下操作:
- 使用 PatternFly4 组件和 PatternFly CSS 变量。SDK 提供了核心 PatternFly 组件。使用 PatternFly 组件和变量可帮助您的插件在将来的控制台版本中保持一致。
- 您可以按照 PatternFly 的可访问性基础,使您的插件能被访问。
- 避免使用其他 CSS 库,如 Bootstrap 或 Tailwind。它们可能会与 PatternFly 冲突,不会与控制台的外观和感觉相匹配。