7.4. 동적 플러그인 예

절차

1. 새 탭에서 플러그인을 생성하는 템플릿이 포함된 console-plugin-template 리포지터리를 방문하십시오.

   중요

   Red Hat에서는 사용자 정의 플러그인 코드를 지원하지 않습니다. 해당 플러그인에 대해 협업 커뮤니티 지원 만 사용할 수 있습니다.

2. Use this template 드롭다운 버튼을 선택하고 드롭다운 목록에서 Create new repository 를 선택하여 GitHub 리포지토리를 생성합니다.
3. 새 리포지토리의 이름을 플러그인 이름으로 다시 지정합니다.
4. 복사한 리포지토리를 로컬 시스템에 복제하여 코드를 편집할 수 있습니다.

5. package.json 의 consolePlugin 선언에서 플러그인 메타데이터를 편집합니다.

   "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

   플러그인 이름을 업데이트합니다.

   2

   버전을 업데이트합니다.

   3

   플러그인의 표시 이름을 업데이트합니다.

   4

   플러그인에 대한 synopsis로 설명을 업데이트합니다.

6. 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. package.json 파일을 편집하여 다음 변경 사항을 포함합니다.

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

8. 새 파일 src/components/ExampleTab.tsx 를 생성하고 다음 스크립트를 추가하여 Pod 페이지의 새 사용자 지정 탭에 표시할 메시지를 작성합니다.

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