4장. 동적 플러그인


4.1. 동적 플러그인 개요

4.1.1. 동적 플러그인 정보

동적 플러그인은 런타임 시 원격 소스에서 로드되고 해석됩니다. 동적 플러그인을 콘솔에 제공하고 노출하는 한 가지 방법은 OLM Operator를 사용하는 것입니다. Operator는 HTTP 서버와 함께 플랫폼에 배포를 생성하여 플러그인을 호스팅하고 Kubernetes 서비스를 사용하여 노출합니다.

동적 플러그인을 사용하면 런타임 시 콘솔 사용자 인터페이스에 사용자 정의 페이지 및 기타 확장을 추가할 수 있습니다. ConsolePlugin 사용자 정의 리소스는 콘솔에 플러그인을 등록하고 클러스터 관리자는 콘솔 Operator 구성에서 플러그인을 활성화합니다.

4.1.2. 주요 기능

동적 플러그인을 사용하면 AWS 환경에서 Red Hat OpenShift Service에 다음과 같은 사용자 지정을 수행할 수 있습니다.

  • 사용자 지정 페이지를 추가합니다.
  • 관리자 및 개발자 이외의 화면을 추가합니다.
  • 검색 항목을 추가합니다.
  • 탭과 작업을 리소스 페이지에 추가합니다.

4.1.3. 일반 지침

플러그인을 생성할 때 다음 일반 지침을 따르십시오.

  • Node.jsyarn 은 플러그인을 빌드하고 실행하는 데 필요합니다.
  • 충돌을 방지하려면 CSS 클래스 이름을 플러그인 이름으로 접두사로 지정합니다. 예를 들면 my-plugin__headingmy-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__headingmy-plugin_\_icon 입니다.
  • 다른 콘솔 페이지와 일관된 모양, 느낌 및 동작을 유지해야 합니다.
  • 요소 선택기와 같이 플러그인 구성 요소 외부의 태그에 영향을 줄 수 있는 선택기를 피해야 합니다. 이는 API가 아니며 변경될 수 있습니다.
  • 플러그인 웹 서버에서 제공하는 모든 자산에 대해 Content-Type 응답 헤더를 사용하여 유효한 JavaScript Multipurpose Internet Mail Extension(MIME) 유형을 제공해야 합니다. 각 플러그인 배포에는 지정된 플러그인의 생성된 자산을 호스팅하는 웹 서버가 포함되어야 합니다.

PatternFly 지침

플러그인을 생성할 때 PatternFly 사용에 대한 다음 지침을 따르십시오.

  • PatternFly 구성 요소 및 PatternFly CSS 변수를 사용합니다. 핵심 PatternFly 구성 요소는 SDK를 통해 사용할 수 있습니다. PatternFly 구성 요소 및 변수를 사용하면 플러그인이 향후 콘솔 버전에서 일관성을 유지하는 데 도움이 됩니다.

    • AWS 버전 4.14 및 이전 버전에서 Red Hat OpenShift Service를 사용하는 경우 Patternfly 4.x를 사용하십시오.
    • AWS 4.15 이상에서 Red Hat OpenShift Service를 사용하는 경우 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 를 사용하여 메시지를 변환하는 방법을 보여줍니다.

사전 요구 사항

  • 플러그인 템플릿이 로컬에 복제되어 있어야 합니다.
  • 선택 사항: 플러그인을 로컬에서 테스트하려면 컨테이너에서 AWS 웹 콘솔에서 Red Hat OpenShift Service를 실행합니다. Docker 또는 Podman 3.2.0 이상을 사용할 수 있습니다.

프로세스

  1. 이름 충돌을 방지하려면 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 리소스 이름을 일치시켜야 합니다.

  2. 필요한 동작을 기반으로 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 네임스페이스에서 모든 플러그인의 현지화 리소스를 로드합니다.
  3. 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%"
        }
      }
  4. i18next-parser 의 TypeScript 파일에 주석을 포함하여 console-extensions.json 의 메시지를 메시지 카탈로그에 추가합니다. 예를 들면 다음과 같습니다.

    // t('plugin__console-demo-plugin~Demo Plugin')
  5. 메시지를 추가하거나 변경할 때 플러그인 템플릿의 locales 폴더에 있는 JSON 파일을 업데이트하려면 다음 명령을 실행합니다.

    $ yarn i18n
Red Hat logoGithubRedditYoutubeTwitter

자세한 정보

평가판, 구매 및 판매

커뮤니티

Red Hat 문서 정보

Red Hat을 사용하는 고객은 신뢰할 수 있는 콘텐츠가 포함된 제품과 서비스를 통해 혁신하고 목표를 달성할 수 있습니다.

보다 포괄적 수용을 위한 오픈 소스 용어 교체

Red Hat은 코드, 문서, 웹 속성에서 문제가 있는 언어를 교체하기 위해 최선을 다하고 있습니다. 자세한 내용은 다음을 참조하세요.Red Hat 블로그.

Red Hat 소개

Red Hat은 기업이 핵심 데이터 센터에서 네트워크 에지에 이르기까지 플랫폼과 환경 전반에서 더 쉽게 작업할 수 있도록 강화된 솔루션을 제공합니다.

© 2024 Red Hat, Inc.