7.4. 动态插件示例

流程

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

   重要

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

2. 选择 Use this template 下拉菜单按钮，然后从下拉列表中选择 Create new repository 来创建 GitHub 存储库。
3. 使用插件的名称替换新存储库。
4. 将复制的仓库克隆到本地机器中，以便您可以编辑代码。

5. 编辑 consolePlugin 声明中的插件元数据： package.json。

   "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": "/*"
     }
   }

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

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

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

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>
       );
   }