第 4 章 wagon 附加组件

流程

1. 从 OpenShift Container Platform Web 控制台中的 Developer 视角，点 ConfigMaps > Create ConfigMap。
2. 在 Create ConfigMap 页面中，在 Configure via 字段中选择 YAML view 选项。

3. 在新创建的 ConfigMap 中，添加默认的 backstage-plugin- swig-module-addons-contrib 软件包配置。例如：

   kind: ConfigMap
   apiVersion: v1
   metadata:
     name: dynamic-plugins-rhdh
   data:
     dynamic-plugins.yaml: |
       includes:
         - dynamic-plugins.default.yaml
       plugins:
         - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
           disabled: false
           pluginConfig:
             dynamicPlugins:
               frontend:
                 backstage.plugin-techdocs-module-addons-contrib:
                   techdocsAddons:
                     - importName: ReportIssue

   Copy to Clipboard Toggle word wrap

4. 在 ConfigMap 的 HEKETIAddons 部分中，为您要从指定插件软件包添加的每个外部 TechDocs 附加组件添加 importName: <external_techdocs_add-on>。例如：

   kind: ConfigMap
   apiVersion: v1
   metadata:
     name: dynamic-plugins-rhdh
   data:
     dynamic-plugins.yaml: |
       includes:
         - dynamic-plugins.default.yaml
       plugins:
         - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
           disabled: false
           pluginConfig:
             dynamicPlugins:
               frontend:
                 backstage.plugin-techdocs-module-addons-contrib:
                   techdocsAddons:
                     - importName: ReportIssue
                     - importName: <external_techdocs_add-on>

   Copy to Clipboard Toggle word wrap

   其中：

   <external_techdocs_add-on>

   指定要安装的外部 TechDocs 附加组件，如 TextSize 或 LightBox。

5. 点 Create。
6. 在 Web 控制台导航菜单中，单击 Topology。
7. 点您要使用的 Red Hat Developer Hub 实例的溢出菜单，然后选择 Edit Backstage 以加载 Red Hat Developer Hub 实例的 YAML 视图。

8. 在 Backstage CR 中，添加 dynamicPluginsConfigMapName: & lt;dynamic_plugins_configmap > 键值对。例如：

   apiVersion: rhdh.redhat.com/v1alpha3
   kind: Backstage
   metadata:
     name: my-rhdh
   spec:
     application:
   # ...
       dynamicPluginsConfigMapName: _<dynamic_plugins_configmap>_
   # ...

   Copy to Clipboard Toggle word wrap

   其中：

   <dynamic_plugins_configmap>

   为您的 Red Hat Developer Hub 实例指定动态插件 ConfigMap 的名称，如 dynamic-plugins-rhdh。

9. 点击 Save。
10. 在 Web 控制台导航菜单中，点 Topology 并等待 Red Hat Developer Hub pod 启动。
11. 点 Open URL 图标以使用 Red Hat Developer Hub 平台以及新的配置更改。

流程

1. 在 Helm Chart 中，添加安装动态插件所需的 global.dynamic 参数，如使用 Helm Chart 安装动态插件 所示

   注意

   默认配置包含 dynamic-plugins.default.yaml 文件，其中包含所有动态插件，包括 TechDocs 附加组件，这些插件已在 Red Hat Developer Hub 中预安装，无论是默认启用还是禁用。

2. 在 Helm Chart 中，添加默认的 backstage-plugin-5-4-module-addons-contrib 软件包配置。例如：

   global:
     dynamic:
       plugins:
         - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
           disabled: false
           pluginConfig:
             dynamicPlugins:
               frontend:
                 backstage.plugin-techdocs-module-addons-contrib:
                   techdocsAddons:
                     - importName: ReportIssue

   Copy to Clipboard Toggle word wrap

3. 在 Helm Chart 的 HEKETI Addons 部分中，为您要从指定插件软件包添加的每个外部 TechDocs 附加组件添加 importName: <external_techdocs_add-on>。例如：

   global:
     dynamic:
       plugins:
         - package: ./dynamic-plugins/dist/backstage-plugin-techdocs-module-addons-contrib
           disabled: false
           pluginConfig:
             dynamicPlugins:
               frontend:
                 backstage.plugin-techdocs-module-addons-contrib:
                   techdocsAddons:
                     - importName: ReportIssue
                     - importName: <external_techdocs_add-on>

   Copy to Clipboard Toggle word wrap

   其中：

   <external_techdocs_add-on>

   指定要安装的外部 TechDocs 附加组件，如 TextSize 或 LightBox。

流程

1. 输入以下命令安装您要用来导入第三方附加组件的第三方插件：

   yarn install

   Copy to Clipboard Toggle word wrap
2. 获取您要使用的第三方 TechDocs 附加组件的源代码。

3. 使用以下命令将 TechDocs 附加组件导出为动态插件：

   npx @red-hat-developer-hub/cli@latest plugin export

   Copy to Clipboard Toggle word wrap
   注意

   @latest 标签拉取 @red-hat-developer-hub/cli 软件包的最新版本，该软件包与最新的功能和修复程序兼容。使用与 Red Hat Developer Hub 版本兼容的版本。

4. 要将第三方 TechDocs 附加组件打包为动态插件，请导航到存储插件的根目录（而不是 dist-dynamic 目录），并使用-- tag 选项运行 npx 命令以指定镜像名称和标签。例如：

   npx @red-hat-developer-hub/cli@latest plugin package --tag quay.io/<user_name>/<techdocs_add-on_image>:latest

   Copy to Clipboard Toggle word wrap
   注意

   package-dynamic-plugins 命令的输出提供了插件的文件路径，以便在 dynamic-plugin-config.yaml 文件中使用。

5. 要将第三方 TechDocs 附加组件发布到 Quay 存储库，请使用以下其中一个命令将镜像推送到 registry，具体取决于您的虚拟化工具：

   • 要使用 podman，请输入以下命令：

     podman push quay.io/<user_name>/<techdocs_add-on_image>:latest

     Copy to Clipboard Toggle word wrap

   • 要使用 docker，请输入以下命令：

     docker push quay.io/<user_name>/<techdocs_add-on_image>:latest

     Copy to Clipboard Toggle word wrap

6. 打开您的 dynamic-plugins.yaml 文件，以查看或修改第三方 TechDocs 附加组件的配置。例如：

   plugins:
         - package: oci://quay.io/<user_name>/<techdocs_add-on_image>:latest!<techdocs_add-on_package>
           disabled: false
           pluginConfig:
             dynamicPlugins:
               frontend:
                <techdocs_add-on_package>
                   techdocsAddons:
                     - importName: <third-party_add-on_name>
                      config:
                         props:
                          <techdocs_add-on_property_key>: <techdocs_add-on_property_value>

   Copy to Clipboard Toggle word wrap

   其中

   <user_name>

   指定您的 Quay 用户名或机构名称。

   <techdocs_add-on_image>

   指定要使用的第三方附加组件的镜像名称，例如 mermaid。

   <techdocs_add-on_package>

   指定，例如 backstage-plugin-5-4-addon-mermaid。

   <third-party_add-on_name>

   指定您要使用的第三方附加组件的名称，例如 Mermaid。

   <techdocs_add-on_property_key>

   指定可传递给第三方附加组件的自定义属性名称，例如，me Variables。属性特定于每个附加组件。您可以列出附加组件的多个属性。

   <techdocs_add-on_property_value>

   指定第三方附加组件的 property 键的值，例如 lineColor: #000000。