7.4. 动态插件示例

在操作示例前,请按照动态插件开发中的步骤来验证插件是否正常工作。

7.4.1. 在 Pod 页面中添加标签页

您可以对 OpenShift Container Platform Web 控制台进行不同的自定义配置。设置您的环境以编写新的 OpenShift 控制台动态插件,并在 Pod 详情页面中添加标签页作为插件的一个示例扩展。

注意

OpenShift Container Platform Web 控制台在一个连接到您登录的集群的容器中运行。有关在创建自己的前测试插件的信息,请参阅"动态插件开发"。

先决条件

流程

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

    重要

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

  2. Use this templateCreate 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": "/*"
      }
    }
    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>
        );
    }
  9. 使用以下命令,将带有插件名称的 Helm chart 作为 Helm 发行版本名称安装到由 -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
    注意

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

验证

  • 访问 Pod 页面查看添加的选项卡。