7.4. Exemple de plugin dynamique

Procédure

1. Visitez le dépôt console-plugin-template qui contient un modèle pour créer des plugins dans un nouvel onglet.

   Important

   Le code des plugins personnalisés n'est pas pris en charge par Red Hat. Seul le support de la communauté Cooperative est disponible pour votre plugin.

2. Sélectionnez le bouton déroulant Use this template et sélectionnez Create new repository dans la liste déroulante pour créer un dépôt GitHub.
3. Renommez le nouveau dépôt avec le nom de votre plugin.
4. Clonez votre dépôt copié sur votre machine locale afin de pouvoir éditer le code.

5. Modifiez les métadonnées du plugin dans la déclaration consolePlugin de 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

   Mettez à jour le nom de votre plugin.

   2

   Mettre à jour la version.

   3

   Mettez à jour le nom d'affichage de votre plugin.

   4

   Mettez à jour la description avec un résumé de 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" }
     }
   }

7. Modifiez le fichier package.json pour y inclure les changements suivants :

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

8. Écrivez un message à afficher dans un nouvel onglet personnalisé sur la page Pods en créant un nouveau fichier src/components/ExampleTab.tsx et en y 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>
       );
   }