5.4. Exemple de plugin dynamique

Procédure

1. Consultez le référentiel console-plugin-template contenant un modèle pour créer des plugins dans un nouvel onglet.

   Important

   Le code de plugin personnalisé n’est pas pris en charge par Red Hat. Le support communautaire coopératif est uniquement disponible pour votre plugin.

2. Créez un référentiel GitHub pour le modèle en cliquant sur Utilisez ce modèle Créer un nouveau référentiel.
3. Faites renommer le nouveau référentiel avec le nom de votre plugin.
4. Clonez le nouveau référentiel sur votre machine locale afin que vous puissiez modifier le code.

5. Éditez le fichier package.json, en ajoutant les métadonnées de votre plugin à la déclaration consolePlugin. À titre d’exemple:

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

   Copy to Clipboard Toggle word wrap

   1

   Actualisez le nom de votre plugin.

   2

   Actualisez la version.

   3

   Actualisez le nom d’affichage de votre plugin.

   4

   Actualisez la description avec un synopsis sur votre plugin.

6. Ajoutez ce qui suit au fichier console-extensions.json:

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

   Copy to Clipboard Toggle word wrap

7. Modifiez le fichier package.json pour inclure les modifications suivantes:

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

   Copy to Clipboard Toggle word wrap

8. Écrivez un message à afficher sur un nouvel onglet personnalisé sur la page Pods en créant un nouveau fichier src/composents/ExampleTab.tsx et en ajoutant le script suivant:

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

   Copy to Clipboard Toggle word wrap

9. Installez un graphique Helm avec le nom du plugin comme nom de libération Helm dans un nouvel espace de noms ou un espace de noms existant tel que spécifié par l’option ligne de commande -n pour déployer votre plugin sur un cluster. Fournissez l’emplacement de l’image dans le paramètre plugin.image en utilisant la commande suivante:

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

   Copy to Clipboard Toggle word wrap
   Note

   En savoir plus sur le déploiement de votre plugin sur un cluster, voir « Déployez votre plugin sur un cluster ».