1. Documentation
×

Dynamic plugin example

Before working through the example, verify that the plugin is working by following the steps in Dynamic plugin development.

Adding a tab to the pods page

There are different customizations you can make to the OKD web console. Set up your environment to write a new OpenShift Console dynamic plugin, and add a tab to the Pod details page as an example extension to your plugin.

The OKD web console runs in a container connected to the cluster you have logged into. See "Dynamic plugin development" for information to test the plugin before creating your own.
Prerequisites

  • Ensure you have Node.js installed.

  • Ensure you have yarn installed.

Procedure

  1. In a new tab, open the console-plugin-template repository, which contains a template for creating plugins in a new tab.

    Custom plugin code is not supported by Red Hat. Only Cooperative community support is available for your plugin.

  2. Create a GitHub repository for the template by clicking Use this template → Create new repository.

  3. Rename the new repository with the name of your plugin.

  4. Clone the new repository to your local machine so you can edit the code.

  5. Edit the package.json file by adding your plugin’s metadata to the consolePlugin declaration. For example:

    "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 Update the name of your plugin.
    2 Update the version.
    3 Update the display name for your plugin.
    4 Update the description with a synopsis about your plugin.

  6. Add the following to the console-extensions.json file:

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

  7. Edit the package.json file to include the following changes:

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

  8. Write a message to display on a new custom tab on the Pods page by creating a new file src/components/ExampleTab.tsx and adding the following script:

    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. Install a Helm chart with the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the -n command-line option and provide the location of the image within the plugin.image parameter to deploy your plugin on a cluster by using the following command:

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

    For more information on deploying your plugin on a cluster, see "Deploy your plugin on a cluster".
Verification

  • Visit the Pod page to view the added tab.