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

Динамический плагин позволяет добавлять пользовательские страницы и другие расширения в веб интерфейс во время выполнения. Пользовательский ресурс 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 console работает в контейнере, подключенном к кластеру, в который осуществлен вход.

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

Предварительные условия для разработки динамического плагина:

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

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

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

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

Процедура#

Процедура разработки динамического плагина

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

   yarn install
   

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

   yarn run start
   

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

   kubectl 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
   

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

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

Процедура#

Чтобы развернуть плагин в кластере, установите 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 параметра.

1. Необязательно: укажите дополнительные параметры, используя набор дополнительных параметров в файле 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:e00000f00e0cca0000e00cb0ff000000e0bd00000ea00d000000a0a0ae000003"
      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.

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

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

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

В 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 во время выполнения.

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

Console.action/filter#

ActionFilter можно использовать для фильтрации действия.

Console.action/group#

ActionGroup добавляет группу действий, которая также может быть подменю.

Console.action/provider#

ActionProvider предоставляет перехватчик, который возвращает список действий для определенного контекста.

Console.action/resource-provider#

ResourceActionProvider предоставляет перехватчик, который возвращает список действий для конкретной модели ресурса.

Console.alert-action#

Это расширение можно использовать для запуска определенного действия, когда OKD console наблюдает определенное предупреждение Prometheus на основе его значения rule.name.

Console.catalog/item-filter#

Это расширение можно использовать для плагинов, чтобы добавить обработчик, который может фильтровать определенные элементы каталога. Например, плагин может предоставить фильтр, который фильтрует диаграммы управления от конкретного поставщика.

Console.catalog/item-metadata#

Это расширение можно использовать для предоставления поставщика, который добавляет дополнительные метаданные к определенным элементам каталога.

Console.catalog/item-provider#

Это расширение позволяет плагинам добавлять поставщика для типа элемента каталога. Например, плагин Helm может добавить поставщика, который извлекает все диаграммы Helm. Это расширение также может использоваться другими плагинами для добавления дополнительных элементов к определенному типу элементов каталога.

Console.catalog/item-type#

Это расширение позволяет плагинам добавлять новый тип элемента каталога. Например, плагин Helm может определить новый тип элемента каталога как HelmCharts.

Console.catalog/item-type-metadata#

Это расширение позволяет плагинам предоставлять дополнительные метаданные, такие как пользовательские фильтры или группировки для любого типа элементов каталога. Например, плагин может прикрепить собственный фильтр для HelmCharts, который может фильтровать данные на основе поставщика диаграмм.

Console.cluster-overview/inventory-item#

Добавляет новый элемент на страницу Overview кластера.

Console.cluster-overview/multiline-utilization-item#

Добавляет новый многострочный элемент обзора кластера.

Console.cluster-overview/utilization-item#

Добавляет новый элемент обзора использования кластера.

Console.context-provider#

Добавляет нового поставщика контекста React в корень приложения веб-консоли.

Console.dashboards/card#

Добавляет новую карточку информационной панели.

Console.dashboards/custom/overview/detail/item#

Добавляет элемент на карточку сведений на обзорной панели.

Console.dashboards/overview/activity/resource#

Добавляет действие в карточку активности обзорной панели, где запуск действия основан на просмотре ресурса Kubernetes.

Console.dashboards/overview/health/operator#

Добавляет подсистему работоспособности в карточку состояния панели мониторинга Overview, где источник статуса API REST Kubernetes.

Console.dashboards/overview/health/prometheus#

Добавляет подсистему работоспособности в карточку состояния информационной панели Overview, где источник статуса Prometheus.

Console.dashboards/overview/health/resource#

Добавляет подсистему работоспособности на карточку состояния панели «Overview», где источник состояния ресурс Kubernetes.

Console.dashboards/overview/health/url#

Добавляет подсистему работоспособности в карточку состояния панели мониторинга «Overview», где источник статуса API REST Kubernetes.

Console.dashboards/overview/inventory/item#

Добавляет плитку ресурса в карточку состояния панели мониторинга «Overview».

Console.dashboards/overview/inventory/item/group#

Добавляет группу статуса запасов.

Console.dashboards/overview/inventory/item/replacement#

Заменяет карточку состояния панели мониторинга «Overview».

Console.dashboards/overview/prometheus/activity/resource#

Добавляет действие в карточку активности панели Prometheus, где запуск действия основан на просмотре ресурса Kubernetes.

Console.dashboards/project/overview/item#

Добавляет плитку ресурса в инвентарную карточку обзора проекта.

Console.dashboards/tab#

Добавляет новую вкладку панели мониторинга, расположенную после вкладки Overview.

Console.file-upload#

Это расширение можно использовать для предоставления обработчика действия по удалению файла для определенных расширений файлов.

Console.flag#

Предоставляет полный контроль над флагами функций веб-консоли.

Console.flag/hookProvider#

Предоставляет полный контроль над флагами функций веб-консоли с помощью обработчиков перехватчиков.

Console.flag/model#

Добавляет новый флаг функции веб-консоли, зависящий от наличия объекта CustomResourceDefinition(CRD) в кластере.

Console.global-config#

Это расширение идентифицирует ресурс, используемый для управления конфигурацией кластера. Ссылка на ресурс будет добавлена на страницу Administration → Cluster Settings → Configuration.

Console.model-metadata#

Настраивает отображение моделей, переопределяя значения, полученные и сгенерированные посредством обнаружения API.

Console.navigation/href#

Это расширение можно использовать для добавления элемента навигации, указывающего на определенную ссылку в пользовательском интерфейсе.

Console.navigation/resource-cluster#

Это расширение можно использовать для добавления элемента навигации, указывающего на страницу сведений о ресурсе кластера. Модель K8s этого ресурса можно использовать для определения элемента навигации.

Console.navigation/resource-ns#

Это расширение можно использовать для добавления элемента навигации, указывающего на страницу сведений о ресурсе в namespace. Модель этого ресурса можно использовать для определения элемента навигации.

Console.navigation/section#

Это расширение можно использовать для определения нового раздела элементов навигации на вкладке навигации.

Console.navigation/separator#

Это расширение можно использовать для добавления разделителя между элементами навигации в навигации.

Console.page/resource/details#

Console.page/resource/list#

Добавляет новую страницу списка ресурсов в консольный маршрутизатор.

Console.page/route#

Добавляет новую страницу в маршрутизатор веб-консоли. См. React Router .

Console.page/route/standalone#

Добавляет новую автономную страницу, отображаемую вне общего макета страницы.

Console.perspective#

Это расширение позволяет настраивать меню навигации.

Console.project-overview/inventory-item#

Добавляет новый элемент на страницу Project Overview.

Console.project-overview/utilization-item#

Добавляет новый элемент использования.

Console.pvc/alert#

Это расширение можно использовать для добавления пользовательских оповещений на странице сведений о PVC.

Console.pvc/create-prop#

Это расширение можно использовать для указания дополнительных свойств, которые будут использоваться при создании ресурсов PVC на странице списка PVC.

Console.pvc/delete#

Это расширение позволяет подключиться к удалению ресурсов PVC. Он может предоставлять оповещения с дополнительной информацией и настраиваемой логикой удаления PVC.

Console.pvc/status#

Console.redux-reducer#

Добавляет новый редуктор в хранилище Console Redux, который работает с состоянием plugins.<scope>.

Console.resource/create#

Это расширение позволяет плагинам предоставлять пользовательский компонент (например, мастер или форму) для определенных ресурсов, который будет отображаться, когда пользователи попытаются создать новый экземпляр ресурса.

Console.storage-class/provisioner#

Добавляет новый поставщик классов хранения в качестве опции при создании класса хранения.

Console.storage-provider#

Это расширение можно использовать для выбора нового поставщика хранилища при подключении хранилища и компонента, специфичного для поставщика.

Console.tab#

Добавляет вкладку в горизонтальную навигацию, соответствующую contextId.

Console.tab/horizontalNav#

Это расширение можно использовать для добавления вкладки на страницу сведений о ресурсе.

Console.telemetry/listener#

Этот компонент можно использовать для регистрации функции, получающей события телеметрии. Эти события включают идентификацию пользователя, навигацию по страницам и другие события, специфичные для приложения. Слушатель может использовать эти данные для целей отчетности и анализа.

Console.topology/adapter/build#

BuildAdapter предоставляет адаптирует элемент к данным, которые могут использоваться компонентом сборки.

Console.topology/adapter/network#

NetworkAdapater предоставляет адаптер для адаптации элемента к данным, которые могут использоваться компонентом Networking.

Console.topology/adapter/pod#

PodAdapter предоставляет адаптация элемента к данным, которые могут использоваться компонентом Pod.

Console.topology/component/factory#

Getter для ViewComponentFactory.

Console.topology/create/connector#

Getter для функции создания соединителя.

Console.topology/data/factory#

Расширение фабрики топологической модели данных

Console.topology/decorator/provider#

Расширение поставщика декоратора топологии

Console.topology/details/resource-alert#

DetailsResourceAlert выдает предупреждение для конкретного контекста топологии или элемента графа.

Console.topology/details/resource-link#

DetailsResourceLink предоставляет ссылку на конкретный контекст топологии или элемент графа.

Console.topology/details/tab#

DetailsTab добавляет вкладку для панели сведений о топологии.

Console.topology/details/tab-section#

DetailsTabSection добавляет раздел для определенной вкладки на панели сведений о топологии.

Console.topology/display/filters#

Расширение фильтров отображения топологии

Console.topology/relationship/provider#

Расширение соединителя поставщика взаимосвязей топологии

Console.user-preference/group#

Это расширение можно использовать для добавления группы на странице пользовательских настроек консоли. Он появится в виде вертикальной вкладки на странице пользовательских настроек консоли.

Console.user-preference/item#

Это расширение можно использовать для добавления элемента в группу пользовательских настроек на странице пользовательских настроек консоли.

Console.yaml-template#

Шаблоны YAML для редактирования ресурсов через редактор yaml.

dev-Console.add/action#

Это расширение позволяет плагинам добавлять элемент действия Add на страницу с ролью разработчика. Например, бессерверный плагин может создать новый элемент действия для добавления бессерверных функций на страницу консоли разработчика.

dev-console.add/action-group#

Это расширение позволяет плагинам добавлять группу на странице консоли разработчика. На группы могут ссылаться действия, которые будут объединены на странице добавления действий на основе определения их расширения. Например, плагин Serverless может добавить группу Serverless вместе с несколькими добавленными действиями.

dev-console.import/environment#

Это расширение можно использовать для указания дополнительных полей переменных среды сборки под селектором образа компоновщика в форме импорта git консоли разработчика. Если этот параметр установлен, поля будут переопределять одноименные переменные среды в разделе сборки.

useActivePerspective#

Webhook, который предоставляет текущую активную перспективу и обратный вызов для установки активной перспективы. Он возвращает ответ, содержащий текущую активную роль и обратный вызов установщика.

Пример:

const Component: React.FC = (props) => {
   const [activePerspective, setActivePerspective] = useActivePerspective();
   return <select
     value={activePerspective}
     onChange={(e) => setActivePerspective(e.target.value)}
   >
     {
       // ...perspective options
     }
   </select>
}

GreenCheckCircleIcon#

Компонент, отображающий знак успешного исполнения - зеленую галочку.

Пример:

<GreenCheckCircleIcon title="Healthy" />

RedExclamationCircleIcon#

Компонент для отображения значка в виде красного восклицательного знака.

Пример:

<RedExclamationCircleIcon title="Failed" />

YellowExclamationTriangleIcon#

Компонент для отображения значка восклицательного знака желтого треугольника.

Пример:

<YellowExclamationTriangleIcon title="Warning" />

BlueInfoCircleIcon#

Компонент для отображения синего информационного круга.

Пример:

<BlueInfoCircleIcon title="Info" />

ErrorStatus#

Компонент для отображения всплывающего сообщения о статусе ошибки.

Пример:

<ErrorStatus title={errorMsg} />

InfoStatus#

Компонент для отображения всплывающего окна с информацией о статусе.

Пример:

<InfoStatus title={infoMsg} />

ProgressStatus#

Компонент для отображения всплывающего окна о прогрессе статуса.

Пример:

<ProgressStatus title={progressMsg} />

SuccessStatus#

Компонент для отображения всплывающего окна о статусе успеха.

Пример:

<SuccessStatus title={successMsg} />

checkAccess#

Предоставляет информацию о доступе пользователя к данному ресурсу. Он возвращает объект с информацией о доступе к ресурсу.

useAccessReview#

Webhook, предоставляющий информацию о доступе пользователя к данному ресурсу. Он возвращает массив со значениями isAllowed и loading.

useResolvedExtensions#

Перехватчик React для использования расширений консоли с разрешенными CodeRef свойствами. Этот Webhook принимает тот же аргумент(ы), что и useExtensions Webhook, и возвращает адаптированный список экземпляров расширения, разрешая все ссылки на код в свойствах каждого расширения.

Первоначально Webhook возвращает пустой массив. После завершения разрешения компонент React повторно отображается с помощью Webhook, возвращающего адаптированный список расширений. При изменении списка соответствующих расширений разрешение перезапускается. Webhook будет продолжать возвращать предыдущий результат до тех пор, пока разрешение не завершится.

Элементы результата Webhook гарантированно будут повторяться при повторной визуализации. Webhook возвращает ответ, содержащий список адаптированных экземпляров расширения с разрешенными ссылками на код, логический флаг, указывающий, завершено ли разрешение, и список ошибок, обнаруженных во время разрешения.

Пример:

const [navItemExtensions, navItemsResolved] = useResolvedExtensions<NavItem>(isNavItem);
// process adapted extensions and render your component

HorizontalNav#

Компонент, создающий панель навигации для страницы. Маршрутизация обрабатывается как часть компонента. Console.tab/horizontalNav может использоваться для добавления дополнительного контента к любой горизонтальной навигации.

Пример:

const HomePage: React.FC = (props) => {
    const page = {
      href: '/home',
      name: 'Home',
      component: () => <>Home</>
    }
    return <HorizontalNav match={props.match} pages={[page]} />
}

VirtualizedTable#

Компонент для создания виртуализированных таблиц.

Пример:

const MachineList: React.FC<MachineListProps> = (props) => {
  return (
    <VirtualizedTable<MachineKind>
     {...props}
     aria-label='Machines'
     columns={getMachineColumns}
     Row={getMachineTableRow}
    />
  );
}

TableData#

Компонент для отображения данных таблицы внутри строки таблицы.

Пример:

const PodRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
  return (
    <>
      <TableData id={columns[0].id} activeColumnIDs={activeColumnIDs}>
        <ResourceLink kind="Pod" name={obj.metadata.name} namespace={obj.metadata.namespace} />
      </TableData>
      <TableData id={columns[1].id} activeColumnIDs={activeColumnIDs}>
        <ResourceLink kind="Namespace" name={obj.metadata.namespace} />
      </TableData>
    </>
  );
};

useActiveColumns#

Перехватчик, который предоставляет список выбранных пользователем активных TableColumns.

Пример:

// See implementation for more details on TableColumn type
  const [activeColumns, userSettingsLoaded] = useActiveColumns({
    columns,
    showNamespaceOverride: false,
    columnManagementID,
  });
  return userSettingsAreLoaded ? <VirtualizedTable columns={activeColumns} {...otherProps} /> : null

Кортеж, содержащий активные столбцы, выбранные текущим пользователем (подмножество options.columns), и логический флаг, указывающий, загружены ли пользовательские настройки.

ListPageHeader#

Компонент для генерации шапки страницы.

Пример:

const exampleList: React.FC = () => {
  return (
    <>
      <ListPageHeader title="Example List Page"/>
    </>
  );
};

ListPageCreate#

Компонент для добавления кнопки создания для определенного типа ресурса, который автоматически генерирует ссылку на YAML-файл создания для этого ресурса.

const exampleList: React.FC<MyProps> = () => {
  return (
    <>
      <ListPageHeader title="Example Pod List Page"/>
        <ListPageCreate groupVersionKind="Pod">Create Pod</ListPageCreate>
      </ListPageHeader>
    </>
  );
};

ListPageCreateLink#

Компонент для создания стилизованной ссылки.

Пример:

const exampleList: React.FC<MyProps> = () => {
 return (
  <>
   <ListPageHeader title="Example Pod List Page"/>
      <ListPageCreateLink to={'/link/to/my/page'}>Create Item</ListPageCreateLink>
   </ListPageHeader>
  </>
 );
};

ListPageCreateButton#

Компонент для создания кнопки.

Пример:

const exampleList: React.FC<MyProps> = () => {
  return (
    <>
      <ListPageHeader title="Example Pod List Page"/>
        <ListPageCreateButton createAccessReview={access}>Create Pod</ListPageCreateButton>
      </ListPageHeader>
    </>
  );
};

ListPageCreateDropdown#

Компонент для создания раскрывающегося списка с проверкой разрешений.

const exampleList: React.FC<MyProps> = () => {
  const items = {
    SAVE: 'Save',
    DELETE: 'Delete',
  }
  return (
    <>
     <ListPageHeader title="Example Pod List Page"/>
       <ListPageCreateDropdown createAccessReview={access} items={items}>Actions</ListPageCreateDropdown>
     </ListPageHeader>
    </>
  );
};

ListPageFilter#

Компонент, который генерирует фильтр для страницы списка.

Пример:

  // See implementation for more details on RowFilter and FilterValue types
  const [staticData, filteredData, onFilterChange] = useListPageFilter(
    data,
    rowFilters,
    staticFilters,
  );
  // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
  return (
    <>
      <ListPageHeader .../>
      <ListPagBody>
        <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
        <List data={filteredData} />
      </ListPageBody>
    </>
  )

useListPageFilter#

Перехватчик, который управляет состоянием фильтра для компонента ListPageFilter. Он возвращает сообщение, содержащее данные, отфильтрованные всеми статическими фильтрами и/или данные, пропущенные через фильтр строк, а также обратный вызов, обновляющий rowFilters.

Пример:

  // See implementation for more details on RowFilter and FilterValue types
  const [staticData, filteredData, onFilterChange] = useListPageFilter(
    data,
    rowFilters,
    staticFilters,
  );
  // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
  return (
    <>
      <ListPageHeader .../>
      <ListPagBody>
        <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
        <List data={filteredData} />
      </ListPageBody>
    </>
  )

ResourceLink#

Компонент, который создает ссылку на определенный тип ресурса со значком.

Пример:

  <ResourceLink
      kind="Pod"
      name="testPod"
      title={metadata.uid}
  />

ResourceIcon#

Компонент, создающий знак для определенного типа ресурса.

Пример:

<ResourceIcon kind="Pod"/>

useK8sModel#

Webhook, который извлекает модель k8s для предоставленного K8sGroupVersionKind из redux. Он возвращает массив, в котором первый элемент — модель k8s, а второй элемент — inFlight статус.

Пример:

const Component: React.FC = () => {
  const [model, inFlight] = useK8sModel({ group: 'app'; version: 'v1'; kind: 'Deployment' });
  return ...
}

useK8sModels#

Webhook, который извлекает все текущие модели k8s из redux. Он возвращает массив, в котором первый элемент — это список моделей k8s, а второй элемент — inFlight статус.

Пример:

const Component: React.FC = () => {
  const [models, inFlight] = UseK8sModels();
  return ...
}

useK8sWatchResource#

Перехватчик, который извлекает ресурс k8s вместе со статусом загрузки и ошибкой. Он возвращает массив с первым элементом в качестве ресурса(ов), вторым элементом в качестве статуса загрузки и третьим элементом в качестве состояния ошибки, если таковая имеется.

Пример:

const Component: React.FC = () => {
  const watchRes = {
        ...
      }
  const [data, loaded, error] = useK8sWatchResource(watchRes)
  return ...
}

useK8sWatchResources#

Перехватчик, который извлекает ресурсы k8s вместе с их соответствующим статусом загрузки и ошибки. Он возвращает карту, где ключи указаны в initResouces, а значение имеет три свойства: данные загружены и ошибка.

Пример:

const Component: React.FC = () => {
  const watchResources = {
        'deployment': {...},
        'pod': {...}
        ...
      }
  const {deployment, pod} = useK8sWatchResources(watchResources)
  return ...
}

ConsoleFetch#

Пользовательская оболочка, fetch которая добавляет заголовки, специфичные для консоли, и допускает повторные попытки и тайм-ауты. Она также проверяет код состояния ответа и выдает соответствующую ошибку или выводит пользователя из системы, если это необходимо. Она возвращает обещание, которое разрешается в ответ.

ConsoleFetchJSON#

Пользовательская оболочка fetch, которая добавляет заголовки, специфичные для консоли, и допускает повторные попытки и таймауты. Оболочка также проверяет код состояния ответа и выдает соответствующую ошибку или при необходимости осуществляет выход пользователя из системы. Она возвращает ответ в виде объекта JSON. Использует consoleFetch. Ответ преобразуется в объект JSON.

ConsoleFetchText#

Пользовательская оболочка fetch, которая добавляет заголовки, специфичные для консоли, и допускает повторные попытки и таймауты. Оболочка также проверяет код состояния ответа и выдает соответствующую ошибку или при необходимости осуществляет выход пользователя из системы. Она возвращает ответ в виде текста. Использует console Fetch.

getConsoleRequestHeaders#

Функция, которая создает заголовки, связанные с олицетворением и мультикластером, для запросов API, используя текущее состояние редукции. Она возвращает объект, содержащий соответствующие заголовки олицетворения и запроса кластера, на основе состояния редукции.

k8sGetResource#

Инструмент извлекает ресурс из кластера на основе предоставленных параметров. Если указано имя, k8sGetResource возвращает один соответствующий ему ресурс, в противном случае — возвращаются все ресурсы, соответствующие модели. Он возвращает сообщение с объектом JSON, содержащим ресурс. Если не указано имя ресурса - буду выведены все ресурсы соответствующие модели. В случае неудачи вызов отклоняется с ответом об ошибке HTTP.

k8sCreateResource#

k8sCreateResource создает ресурс в кластере на основе предоставленных параметров. Он создает запрос, который разрешается при успешном создании ресурса. В случае неудачи запрос отклоняется с ответом об ошибке HTTP.

k8sUpdateResource#

Инструмент k8sUpdateResource обновляет весь ресурс в кластере на основе предоставленных параметров. Когда клиенту необходимо полностью заменить существующий ресурс, он может использовать k8sUpdate. Альтернативно можно использовать k8sPatch для выполнения частичного обновления. Он возвращает запрос, который соответствует ответу обновленного ресурса. В случае неудачи запрос отклоняется с ответом об ошибке HTTP.

k8sPatchResource#

k8sPatchResource исправляет любой ресурс в кластере на основе предоставленных параметров. Применяется при частичном обновлении клиента. В качестве альтернативы можно использовать k8sUpdate для полной замены существующего ресурса. Он возвращает запрос, который соответствует ответу исправленного ресурса. В случае неудачи запрос отклоняется с ответом об ошибке HTTP.

k8sDeleteResource#

k8sDeleteResource удаляет ресурсы из кластера на основе предоставленной модели ресурса. Сбор мусора работает на основе Foreground | Background можно настроить с помощью свойства propagationPolicy в предоставленной модели или передать в json. Он возвращает сообщение, которое разрешается в ответ типа Status. В случае неудачи сообщение отклоняется с ответом об ошибке HTTP.

Пример:

kind: 'DeleteOptions', apiVersion: 'v1', propagationPolicy

k8sListResource#

Перечисляет ресурсы в виде массива в кластере на основе предоставленных параметров. Он возвращает обещание, которое разрешается в ответ.

k8sListResourceItems#

Тот же интерфейс, что и у k8sListResource, но возвращает элементы. Он возвращает apiVersion для модели, т. е. group/version.

getAPIVersionForModel#

Предоставляет apiVersion для модели k8s.

getGroupVersionKindForResource#

Предоставляет группу, версию и тип ресурса. Он возвращает группу, версию и тип предоставленного ресурса. Если у ресурса нет группы API, будет возвращена группа «core». Если ресурс имеет недопустимую версию apiVersion, он выдаст ошибку.

getGroupVersionKindForModel#

Предоставляет группу, версию и тип модели k8s. Возвращает группу, версию и тип предоставленной модели. Если в модели нет apiGroup, будет возвращена группа «core».

StatusPopupSection#

Компонент, который показывает статус во всплывающем окне. Компонент для создания console.dashboards/overview/health/resource расширений.

  <StatusPopupSection
    firstColumn={
      <>
        <span>{title}</span>
        <span className="text-secondary">
          My Example Item
        </span>
      </>
    }
    secondColumn='Status'
  >

StatusPopupItem#

Элемент статуса, используемый во всплывающем окне статуса; используется в StatusPopupSection.

Пример:

<StatusPopupSection
   firstColumn='Example'
   secondColumn='Status'
>
   <StatusPopupItem icon={healthStateMapping[MCGMetrics.state]?.icon}>
      Complete
   </StatusPopupItem>
   <StatusPopupItem icon={healthStateMapping[RGWMetrics.state]?.icon}>
       Pending
   </StatusPopupItem>
</StatusPopupSection>

Overview#

Создает компонент-оболочку для информационной панели.

Пример:

    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>

OverviewGrid#

Создает сетку элементов карточки для дашборда; используется внутри Overview.

Пример:

    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>

InventoryItem#

Создает элемент карточки инструментария.

Пример:

  return (
    <InventoryItem>
      <InventoryItemTitle>{title}</InventoryItemTitle>
      <InventoryItemBody error={loadError}>
        {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
      </InventoryItemBody>
    </InventoryItem>
  )

InventoryItemTitle#

Создает заголовок для элемента карты инструментов; используется внутри InventoryItem.

Пример:

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

InventoryItemBody#

Создает тело инвентарной карточки; используется внутри InventoryCard и может использоваться с InventoryTitle.

Пример:

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

InventoryItemStatus#

Создает счетчик и значок для инвентарной карточки с дополнительным адресом ссылки; используется внутри InventoryItemBody

Пример:

 return (
   <InventoryItem>
     <InventoryItemTitle>{title}</InventoryItemTitle>
     <InventoryItemBody error={loadError}>
       {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />}
     </InventoryItemBody>
   </InventoryItem>
 )

InventoryItemLoading#

Создает скелетный контейнер при загрузке карточки инвентаря; используется с InventoryItem и родственными компонентами.

Пример:

if (loadError) {
   title = <Link to={workerNodesLink}>{t('Worker Nodes')}</Link>;
} else if (!loaded) {
  title = <><InventoryItemLoading /><Link to={workerNodesLink}>{t('Worker Nodes')}</Link></>;
}
return (
  <InventoryItem>
    <InventoryItemTitle>{title}</InventoryItemTitle>
  </InventoryItem>
)

useFlag#

Webhook, который возвращает данный флаг функции из состояния FLAGS redux. Он возвращает логическое значение запрошенного флага функции или неопределенное значение.

YAMLEditor#

Базовый редактор YAML с отложенной загрузкой, поддержкой при наведении и завершении.

Пример:

<React.Suspense fallback={<LoadingBox />}>
  <YAMLEditor
    value={code}
  />
</React.Suspense>

ResourceYAMLEditor#

Редактор YAML с отложенной загрузкой для ресурсов Kubernetes с подсказкой по наведению и завершением. Компонент использует YAMLEditor и добавляет к нему дополнительные функции, такие как обработка обновлений ресурсов, оповещения, кнопки сохранения, отмены и перезагрузки, специальные возможности и многое другое. Если обратный вызов onSave не предусмотрен, обновление ресурса обрабатывается автоматически. ResourceYAMLEditor должен быть включен в компонент React.Suspense.

Пример:

<React.Suspense fallback={<LoadingBox />}>
  <ResourceYAMLEditor
    initialResource={resource}
    header="Create resource"
    onSave={(content) => updateResource(content)}
  />
</React.Suspense>

ResourceEventStream#

Компонент для отображения событий, связанных с конкретным ресурсом.

Пример:

const [resource, loaded, loadError] = useK8sWatchResource(clusterResource);
return <ResourceEventStream resource={resource} />

usePrometheusPoll#

Настраивает запрос в Prometheus. usePrometheusPoll возвращает последовательность, содержащую ответ на запрос, логический флаг, указывающий, завершен ли ответ, а также любые ошибки, обнаруженные во время запроса или последующей обработки запроса.

Timestamp#

Компонент для отображения временной метки. Временные метки синхронизируются между отдельными экземплярами компонента Timestamp. Предоставленная временная метка форматируется в соответствии с языковыми стандартами пользователя.

useModal#

Запуск модальных окон.

Пример:

const context: AppPage: React.FC = () => {<br/> const [launchModal] = useModal();<br/> const onClick = () => launchModal(ModalComponent);<br/> return (<br/>   <Button onClick={onClick}>Launch a Modal</Button><br/> )<br/>}<br/>`

ActionServiceProvider#

Компонент, позволяющий получать вклады от других плагинов для типа расширения console.action/provider.

Пример:

   const context: ActionContext = { 'a-context-id': { dataFromDynamicPlugin } };

   ...

   <ActionServiceProvider context={context}>
       {({ actions, options, loaded }) =>
         loaded && (
           <ActionMenu actions={actions} options={options} variant={ActionMenuVariant.DROPDOWN} />
         )
       }
   </ActionServiceProvider>

NamespaceBar#

Компонент, который отображает горизонтальную панель инструментов с раскрывающимся меню пространства имен в крайнем левом положении. Дополнительные компоненты можно передать как дочерние, и они будут отображаться справа от раскрывающегося списка пространства имен. Этот компонент предназначен для использования в верхней части страницы. Его следует использовать на страницах, где пользователю необходимо иметь возможность изменять активное пространство имен, например на страницах с ресурсами k8s.

Пример:

   const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`);

   ...

   <NamespaceBar onNamespaceChange={logNamespaceChange}>
     <NamespaceBarApplicationSelector />
   </NamespaceBar>
   <Page>

     ...

ErrorBoundaryFallbackPage#

Создает полностраничный компонент ErrorBoundaryFallbackPage для отображения сообщения об ошибке. Сообщение вместе с трассировкой стека и другой полезной информацией для отладки. Его следует использовать вместе с компонентом.

Пример:

//in ErrorBoundary component
 return (
   if (this.state.hasError) {
     return <ErrorBoundaryFallbackPage errorMessage={errorString} componentStack={componentStackString}
      stack={stackTraceString} title={errorString}/>;
   }

   return this.props.children;
)