Создание динамических плагинов#

Динамический плагин позволяет добавлять пользовательские страницы и другие расширения в веб интерфейс во время выполнения. Пользовательский ресурс ConsolePlugin регистрирует плагины в консоли, а администратор кластера включает плагины в конфигурации console-operator.

Динамический плагин позволяет добавить следующие элементы в интерфейс OKD Console:

  • пользовательские страницы;

  • права и роли помимо администратора и разработчика;

  • элементы навигации;

  • вкладки и действия на страницы ресурсов.

Общие рекомендации#

При создании плагина следуйте рекомендациям:

  • установите Node.js и yarn для сборки и запуска плагина;

  • используйте префикс имен классов CSS с именем вашего плагина. Например, my-plugin__heading и my-plugin_\_icon;

  • поддерживайте единообразный внешний вид, поведение и навигацию с другими страницами консоли;

  • следуйте рекомендациям по локализации response-i18next при создании плагина. Используйте Webhook useTranslation, как в следующем примере:

    conster Header: React.FC = () => {
  const { t } = useTranslation('plugin__console-demo-plugin');
  return <h1>{t('Hello, World!')}</h1>;
};

Рекомендации по использованию PatternFly 4#

При создании плагина следуйте этим рекомендациям по использованию PatternFly:

  • Используйте компоненты PatternFly4 и переменные CSS PatternFly. Основные компоненты PatternFly доступны через SDK. Использование компонентов и переменных PatternFly поможет вашему плагину выглядеть единообразным в будущих версиях консоли.

  • Сделайте свой плагин доступным, следуя основам доступности PatternFly.

  • Избегайте использования других библиотек Bootstrap или Tailwind. Они могут конфликтовать с PatternFly и не соответствовать внешнему виду консоли.

Начало работы с динамическими плагинами#

Чтобы начать использовать динамический плагин, необходимо настроить свою среду для написания нового динамического плагина OKD. Пример написания нового плагина см. в разделе Добавление вкладки на страницу модулей.

Разработка динамического плагина#

Запустите плагин используя локальную среду разработки. OKD web console работает в контейнере, подключенном к кластеру, в который осуществлен вход.

Предварительные условия#

  • запущен кластер DropApp Plus;

  • установлен CLI;

  • установлен yarn (менеджер пакетов с открытым исходным кодом, используемый для управления зависимостями в проектах JavaScript);

  • установлен Docker v3.2.0 или новее или Podman.

Процедура#

  1. В терминале выполните следующую команду для установки зависимостей плагина:

    yarn install

  2. После установки выполните следующую команду, чтобы запустить менеджер пакетов:

    yarn run start

  3. В другом окне терминала войдите через CLI:

    oc login

  4. Запустите OKD Console в контейнере, выполнив команду:

    yarn run start-console

Проверка#

Посетите страницу localhost:9000, чтобы просмотреть работающий плагин. Проверьте значение window.SERVER_FLAGS.consolePlugins, чтобы увидеть список плагинов, которые загружаются во время выполнения.

Развертывание плагина в кластере#

Создание образов в Docker#

Создайте образ и отправьте его в реестр образов, чтобы развернуть плагин в кластере.

Процедура#

  1. Создайте образ с помощью следующей команды:

    docker build -t quay.io/my-repositroy/my-plugin:latest

  2. Необязательно: для тестирования образа запустите следующую команду:

    docker push quay.io/my-repository/my-plugin:latest

  3. Отправьте образ, выполнив следующую команду:

    docker push quay.io/my-repository/my-plugin:latest

Развертывание плагина в кластере#

Выполнение сценария развертывания возможно после отправки образа с изменениями в репозиторий.

Процедура#

  1. Чтобы развернуть плагин в кластере, установите Helm с именем плагина в качестве имени выпуска Helm в новое namespace или существующее namespace, как указано в параметре командной строки -n. Укажите расположение изображения внутри параметра plugin.image, используя следующую команду:

    helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location

    Где:

    • n <my-plugin-namespace> - указывает существующее namespace для развертывания плагина;

    • --create-namespace необязательно: при развертывании в новом namespace используйте этот параметр;

    • --set plugin.image=my-plugin-image-location - указывает расположение изображения внутри plugin.image параметра.

  2. Необязательно: укажите дополнительные параметры, используя набор дополнительных параметров в файле charts/openshift-console-plugin/values.yaml:

    plugin:
  name: ""
  description: ""
  image: ""
  imagePullPolicy: IfNotPresent
  replicas: 2
  port: 9443
  securityContext:
    enabled: true
  podSecurityContext:
    enabled: true
    runAsNonRoot: true
    seccompProfile:
      type: RuntimeDefault
  containerSecurityContext:
    enabled: true
    allowPrivilegeEscalation: false
    capabilities:
      drop:
        - ALL
  resources:
    requests:
      cpu: 10m
      memory: 50Mi
  basePath: /
  certificateSecretName: ""
  serviceAccount:
    create: true
    annotations: {}
    name: ""
  patcherServiceAccount:
    create: true
    annotations: {}
    name: ""
  jobs:
    patchConsoles:
      enabled: true
      image: "registry.ххххххххх.io/openshift4/ose-tools-rhel8@sha256:<image-sha-hash>"
      podSecurityContext:
        enabled: true
        runAsNonRoot: true
        seccompProfile:
          type: RuntimeDefault
      containerSecurityContext:
        enabled: true
        allowPrivilegeEscalation: false
        capabilities:
          drop:
            - ALL
      resources:
        requests:
          cpu: 10m
          memory: 50Mi

Проверка#

Просмотрите список включенных плагинов, перейдя в Administration → Cluster Settings → Configuration → Console → Console plugins или посетив страницу Owerview.

Отключение плагина в браузере#

Операторы OKD Console могут использовать параметр запроса disable-plugins, чтобы отключить определенные или все динамические плагины, которые обычно загружаются во время выполнения.

Процедура#

Процедура отключения плагина:

  • отключите определенный плагин: удалите плагин, который необходимо отключить, из списка имен плагинов, разделенных запятыми;

  • отключите все плагины: оставьте пустую строку в параметре запроса disable-plugins.

Примечание

Администраторы кластера могут отключать плагины на странице Cluster Settings OKD console.

Пример динамического плагина#

Прежде чем приступить к работе с примером, убедитесь, что плагин работает, выполнив действия, описанные в разделе «Разработка динамического плагина».

Добавление вкладки на страницу модулей#

В OKD console можно внести различные настройки. Сценарий добавляет вкладку на страницу сведений о модуле в качестве примера расширения плагина.

Примечание

OKD console работает в контейнере, подключенном к кластеру, в который осуществлен вход, см. раздел «Разработка динамического плагина» для получения информации о тестировании плагина.

Процедура#

Процедура Добавление вкладки на страницу модулей:

  1. Откройте репозиторий console-plugin-template, содержащий шаблон для создания плагинов в новой вкладке.

  2. Создайте репозиторий для шаблона, нажав Use this template → Create new repository.

  3. Переименуйте новый репозиторий, указав имя плагина.

  4. Клонируйте новый репозиторий на локальный компьютер, чтобы иметь возможность редактировать код.

  5. Отредактируйте файл package.json, добавив в объявление метаданные плагина consolePlugin, например:

    "consolePlugin": {
  "name": "my-plugin", # Введите имя плагина
  "version": "0.0.1", # Добавьте версию плагина
  "displayName": "My Plugin", # Введите отображаемое имя плагина
  "description": "Enjoy this shiny, new console plugin!", # Добавьте описание или краткий обзор плагина
  "exposedModules": {
    "ExamplePage": "./components/ExamplePage"
  },
  "dependencies": {
    "@console/pluginAPI": "/*"
  }
}

  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 и добавив следующий скрипт:

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

  9. Установите Helm-чарт с именем плагина в качестве имени выпуска Helm в новое namespace или существующее namespace, как указано в параметре -n командной строки, чтобы развернуть плагин в кластере. Укажите расположение образа внутри параметра plugin.image, используя следующую команду:

    helm upgrade -i  my-plugin charts openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin image=my-plugin-image-location

  10. Посетите страницу Pod чтобы просмотреть добавленную вкладку.

Справочник по настройкам динамического плагина#

В данном разделе представлены расширения, которые позволяют настроить динамический плагин под задачи оператора. Эти расширения затем загружаются в OKD Console во время выполнения.

Типы расширений динамических плагинов с кратким описанием выполняемых действий и синтаксисом представлены в разделе Динамические плагины.