adding-tab-pods-page.adoc

Adding a tab to the pods page

There are different customizations you can make to the {product-title} web console. The following procedure adds a tab to the Pod details page as an example extension to your plugin.

Note	The {product-title} 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.

Procedure

1. Visit the console-plugin-template repository containing a template for creating plugins in a new tab.

   Important

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

2. Select the Use this template dropdown button and select Create new repository from the dropdown list to create a GitHub repository.

3. Re-name the new repository with the name of your plugin.

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

5. Edit the plugin metadata in the consolePlugin declaration of 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. 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>
       );
   }

Verification

• Visit a Pod page to view the added tab.