4.4. 动态插件示例

流程

1. 访问 console-plugin-template 存储库，其中包含用于在新标签页中创建插件的模板。

   重要

   红帽不支持自定义插件代码。对于插件，只有合作社区支持。

2. 点 Use this template Create new repository，为模板创建一个 GitHub 存储库。
3. 使用插件的名称替换新存储库。
4. 将新存储库克隆到本地机器，以便您可以编辑代码。

5. 编辑 package.json 文件，将插件的元数据添加到 consolePlugin 声明中。例如：

   "consolePlugin": {
     "name": "my-plugin", 

   1

   
     "version": "0.0.1", 

   2

   
     "displayName": "My Plugin", 

   3

   
     "description": "Enjoy this shiny, new console plugin!", 

   4

   
     "exposedModules": {
       "ExamplePage": "./components/ExamplePage"
     },
     "dependencies": {
       "@console/pluginAPI": "/*"
     }
   }

   Copy to Clipboard Toggle word wrap

   1

   更新插件的名称。

   2

   更新版本。

   3

   更新插件的显示名称。

   4

   使用有关插件的同步更新描述。

6. 在 console-extensions.json 文件中添加以下内容：

   {
     "type": "console.tab/horizontalNav",
     "properties": {
       "page": {
         "name": "Example Tab",
         "href": "example"
       },
       "model": {
         "group": "core",
         "version": "v1",
         "kind": "Pod"
       },
       "component": { "$codeRef": "ExampleTab" }
     }
   }

   Copy to Clipboard Toggle word wrap

7. 编辑 package.json 文件以包括以下更改：

           "exposedModules": {
               "ExamplePage": "./components/ExamplePage",
               "ExampleTab": "./components/ExampleTab"
           }

   Copy to Clipboard Toggle word wrap

8. 通过创建新文件 src/components/ExampleTab.tsx 并添加以下脚本，在 Pod 页面上的一个新自定义标签页中写入信息：

   import * as React from 'react';
   
   export default function ExampleTab() {
       return (
           <p>This is a custom tab added to a resource using a dynamic plugin.</p>
       );
   }

   Copy to Clipboard Toggle word wrap

9. 使用插件名称作为 Helm 发行版本名称安装 Helm Chart，或由 -n 命令行选项指定的现有命名空间，以便在集群中部署插件。使用以下命令，提供 plugin.image 参数中镜像的位置：

   $ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location

   Copy to Clipboard Toggle word wrap
   注意

   有关在集群中部署插件的更多信息，请参阅"在集群中部署插件"。