4장. 동적 플러그인
4.1. 동적 플러그인 개요
4.1.1. 동적 플러그인 정보
동적 플러그인은 런타임 시 원격 소스에서 로드되고 해석됩니다. 동적 플러그인을 콘솔에 제공하고 노출하는 한 가지 방법은 OLM Operator를 사용하는 것입니다. Operator는 HTTP 서버와 함께 플랫폼에 배포를 생성하여 플러그인을 호스팅하고 Kubernetes 서비스를 사용하여 노출합니다.
동적 플러그인을 사용하면 런타임 시 콘솔 사용자 인터페이스에 사용자 정의 페이지 및 기타 확장을 추가할 수 있습니다. ConsolePlugin
사용자 정의 리소스는 콘솔에 플러그인을 등록하고 클러스터 관리자는 콘솔 Operator 구성에서 플러그인을 활성화합니다.
4.1.2. 주요 기능
동적 플러그인을 사용하면 OpenShift Dedicated 환경에 다음과 같은 사용자 지정을 수행할 수 있습니다.
- 사용자 지정 페이지를 추가합니다.
- 관리자 및 개발자 이외의 화면을 추가합니다.
- 검색 항목을 추가합니다.
- 탭과 작업을 리소스 페이지에 추가합니다.
4.1.3. 일반 지침
플러그인을 생성할 때 다음 일반 지침을 따르십시오.
-
Node.js
및yarn
은 플러그인을 빌드하고 실행하는 데 필요합니다. -
충돌을 방지하려면 CSS 클래스 이름을 플러그인 이름으로 접두사로 지정합니다. 예를 들면
my-plugin__heading
및my-plugin_\_icon
입니다. - 다른 콘솔 페이지에서 일관된 모양, 느낌 및 동작을 유지합니다.
플러그인을 생성할 때 react-i18next 현지화 지침을 따르십시오. 다음 예제에서와 같이
useTranslation
후크를 사용할 수 있습니다.conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
- 요소 선택기와 같은 플러그인 구성 요소 외부의 DestinationRule에 영향을 줄 수 있는 선택기를 사용하지 마십시오. 이는 API가 아니며 변경될 수 있습니다. 이를 사용하면 플러그인이 손상될 수 있습니다. 플러그인 구성 요소 외부에서 4.6.1에 영향을 줄 수 있는 요소 선택기와 같은 선택기를 사용하지 마십시오.
-
플러그인 웹 서버에서 제공하는 모든 자산에 대해
Content-Type
응답 헤더를 사용하여 유효한 JavaScript Multipurpose Internet Mail Extension(MIME) 유형을 제공합니다. 각 플러그인 배포에는 지정된 플러그인의 생성된 자산을 호스팅하는 웹 서버가 포함되어야 합니다. - Webpack 버전 5 이상을 사용하여 Webpack 플러그인을 빌드해야 합니다.
-
충돌을 방지하려면 CSS 클래스 이름 앞에 플러그인 이름을 붙여야 합니다. 예를 들면
my-plugin__heading
및my-plugin_\_icon
입니다. - 다른 콘솔 페이지와 일관된 모양, 느낌 및 동작을 유지해야 합니다.
- 요소 선택기와 같이 플러그인 구성 요소 외부의 태그에 영향을 줄 수 있는 선택기를 피해야 합니다. 이는 API가 아니며 변경될 수 있습니다.
-
플러그인 웹 서버에서 제공하는 모든 자산에 대해
Content-Type
응답 헤더를 사용하여 유효한 JavaScript Multipurpose Internet Mail Extension(MIME) 유형을 제공해야 합니다. 각 플러그인 배포에는 지정된 플러그인의 생성된 자산을 호스팅하는 웹 서버가 포함되어야 합니다.
PatternFly 지침
플러그인을 생성할 때 PatternFly 사용에 대한 다음 지침을 따르십시오.
PatternFly 구성 요소 및 PatternFly CSS 변수를 사용합니다. 핵심 PatternFly 구성 요소는 SDK를 통해 사용할 수 있습니다. PatternFly 구성 요소 및 변수를 사용하면 플러그인이 향후 콘솔 버전에서 일관성을 유지하는 데 도움이 됩니다.
- OpenShift Dedicated 버전 4.14 및 이전 버전을 사용하는 경우 Patternfly 4.x를 사용하십시오.
- OpenShift Dedicated 4.15 이상을 사용하는 경우 Patternfly 5.x를 사용하십시오.
- PatternFly의 접근성 기본 사항에 따라 플러그인에 액세스할 수 있도록 합니다.
-
Bootstrap 또는 Tailwind와 같은 다른 CSS 라이브러리는 사용하지 마십시오. PatternFly와 충돌할 수 있으며 콘솔의 나머지 부분과 일치하지 않을 수 있습니다. 플러그인은 기본 PatternFly 스타일에서 평가할 사용자 인터페이스에 고유한 스타일만 포함해야 합니다. 플러그인의
@patternfly/react-styles/*/.css
또는 모든 스타일에서@patternfly/patternfly
패키지와 같은 스타일을 가져오지 마십시오. - 콘솔 애플리케이션은 지원되는 모든 PatternFly 버전에 대한 기본 스타일을 로드합니다.
4.1.3.1. react-i18 next로 메시지 번역
플러그인 템플릿 은 react-i18 next 를 사용하여 메시지를 변환하는 방법을 보여줍니다.
사전 요구 사항
- 플러그인 템플릿이 로컬에 복제되어 있어야 합니다.
- 선택 사항: 플러그인을 로컬에서 테스트하려면 컨테이너에서 OpenShift Dedicated 웹 콘솔을 실행합니다. Docker 또는 Podman 3.2.0 이상을 사용할 수 있습니다.
프로세스
이름 충돌을 방지하려면 name에
plugin__
접두사를 추가합니다. 플러그인 템플릿은 기본적으로plugin__console-plugin-template
네임스페이스를 사용하며,plugin__my-plugin
과 같은 플러그인 이름을 바꿀 때 업데이트해야 합니다.useTranslation
후크를 사용할 수 있습니다. 예를 들면 다음과 같습니다.conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
중요i18n
네임스페이스와ConsolePlugin
리소스 이름을 일치시켜야 합니다.필요한 동작을 기반으로
spec.i18n.loadType
필드를 설정합니다.예 4.1.
plugin__console-demo-plugin
spec: backend: service: basePath: / name: console-demo-plugin namespace: console-demo-plugin port: 9001 type: Service displayName: OpenShift Console Demo Plugin i18n: loadType: Preload 1
- 1
- 로드 중 동적 플러그인 후
i18n
네임스페이스에서 모든 플러그인의 현지화 리소스를 로드합니다.
console-extensions.json
의 라벨에%plugin__console-plugin-template~My Label%
형식을 사용합니다. 콘솔은plugin__console-plugin-template
네임스페이스에서 현재 언어의 메시지로 값을 대체합니다. 예를 들면 다음과 같습니다.{ "type": "console.navigation/section", "properties": { "id": "admin-demo-section", "perspective": "admin", "name": "%plugin__console-plugin-template~Plugin Template%" } }
i18next-parser 의 TypeScript 파일에 주석을 포함하여
console-extensions.json
의 메시지를 메시지 카탈로그에 추가합니다. 예를 들면 다음과 같습니다.// t('plugin__console-demo-plugin~Demo Plugin')
메시지를 추가하거나 변경할 때 플러그인 템플릿의
locales
폴더에 있는 JSON 파일을 업데이트하려면 다음 명령을 실행합니다.$ yarn i18n