Chapter 7. Adding a dynamic plugin to the OpenShift Container Platform web console

Procedure

1. In a new tab, open the console-plugin-template repository, which contains 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. 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, 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 to deploy your plugin on a cluster. Provide the location of the image within the plugin.image parameter 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

   Note

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

Procedure

1. Build the image with the following command:

   $ docker build -t quay.io/my-repositroy/my-plugin:latest .

2. Optional: If you want to test your image, run the following command:

   $ docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest

3. Push the image by running the following command:

   $ docker push quay.io/my-repository/my-plugin:latest

Procedure

1. To deploy your plugin to a cluster, 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. Provide the location of the image within the plugin.image parameter 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

   Where:

   n <my-plugin-namespace>

   Specifies an existing namespace to deploy your plugin into.

   --create-namespace

   Optional: If deploying to a new namespace, use this parameter.

   --set plugin.image=my-plugin-image-location

   Specifies the location of the image within the plugin.image parameter.

2. Optional: You can specify any additional parameters by using the set of supported parameters in the charts/openshift-console-plugin/values.yaml file.

   plugin:
     name: ""
     description: ""
     image: ""
     imagePullPolicy: IfNotPresent
     replicas: 2
     port: 9443
     securityContext:
       enabled: true
     podSecurityContext:
       enabled: true
       runAsNonRoot: true
       seccompProfile:
         type: RuntimeDefault
     containerSecurityContext:
       enabled: true
       allowPrivilegeEscalation: false
       capabilities:
         drop:
           - ALL
     resources:
       requests:
         cpu: 10m
         memory: 50Mi
     basePath: /
     certificateSecretName: ""
     serviceAccount:
       create: true
       annotations: {}
       name: ""
     patcherServiceAccount:
       create: true
       annotations: {}
       name: ""
     jobs:
       patchConsoles:
         enabled: true
         image: "registry.redhat.io/openshift4/ose-tools-rhel8@sha256:e44074f21e0cca6464e50cb6ff934747e0bd11162ea01d522433a1a1ae116103"
         podSecurityContext:
           enabled: true
           runAsNonRoot: true
           seccompProfile:
             type: RuntimeDefault
         containerSecurityContext:
           enabled: true
           allowPrivilegeEscalation: false
           capabilities:
             drop:
               - ALL
         resources:
           requests:
             cpu: 10m
             memory: 50Mi