Adding a dynamic plug-in to the OKD web console

Adding a dynamic plug-in to the OKD web console

You can create and deploy a dynamic plug-in on your cluster that is loaded at run-time.

Creating a dynamic plug-in is a Technology Preview feature only. Technology Preview features are not supported with Red Hat production service level agreements (SLAs) and might not be functionally complete. Red Hat does not recommend using them in production. These features provide early access to upcoming product features, enabling customers to test functionality and provide feedback during the development process.

For more information about the support scope of Red Hat Technology Preview features, see https://access.redhat.com/support/offerings/techpreview/.

About dynamic plug-ins

A dynamic plug-in allows you to add custom pages and other extensions to your interface at runtime. The ConsolePlugin custom resource registers plug-ins with the console, and a cluster administrator enables plug-ins in the console-operator configuration.

Key features

A dynamic plug-in allows you to make the following customizations to the OKD experience:

Add custom pages.
Add perspectives and update navigation items.
Add tabs and actions to resource pages.

PatternFly 4 guidelines

When creating your plug-in, follow these guidelines for using PatternFly:

Use PatternFly4 components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables will help your plug-in look consistent in future console versions.
Make your plug-in accessible by following PatternFly’s accessibility fundamentals.
Do not use other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.

General guidelines

When creating your plug-in, follow these general guidelines:

Prefix your CSS class names with your plug-in name to avoid collisions. For example, my-plugin__heading and my-plugin_\_icon.
Maintain a consistent look, feel, and behavior with other console pages.

Follow react-i18next localization guidelines when creating your plug-in. You can use the useTranslation hook like the one in the following example:

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

Do not use console CSS classes in your markup or override console CSS classes. These are not APIs and are subject to change. Using them might break your plug-in. Avoid selectors like element selectors that could affect markup outside of your plug-in’s components.

Enable dynamic plug-ins in the web console

Cluster administrators can enable plug-ins in the web console browser. Dynamic plug-ins are disabled by default. In order to enable, a cluster administrator will need to enable them in the console-operator configuration.

Procedure

In the Administration → Cluster Settings page of the web console, click the Configuration tab.
Click the Console operator.openshift.io configuration resource.
From there, click the Console plugins tab to view the dynamic plug-ins running.
In the Status column, click Enable console plugin in the pop-over menu, which will launch the Console plugin enablement modal.
Click Enable and Save.

Verification

Refresh the browser to view the enabled plug-in.

Getting started with dynamic plug-ins

To get started using the dynamic plug-in, you must set up your environment to write a new OpenShift Console dynamic plug-in.

Prerequisites

Ensure you have Node.js installed.
Ensure you have yarn installed.

Procedure

Edit the plug-in metadata in the consolePlugin declaration of package.json.

"consolePlugin": {
  "name": "my-plugin", (1)
  "version": "0.0.1", (2)
  "displayName": "My Plugin", (3)
  "description": "Enjoy this shiny, new console plugin!", (4)
  "exposedModules": {
    "ExamplePage": "./components/ExamplePage"
  },
  "dependencies": {
    "@console/pluginAPI": "*"
  }
}

1	Update the name of your plug-in.
2	Update the version.
3	Update the display name for your plug-in.
4	Update the description with a synopsis about your plug-in.

Running your dynamic plug-in

You can run the plug-in using a local development environment. The OKD web console runs in a container connected to the cluster you have logged into.

Prerequisites

You must have the OpenShift CLI (oc) installed.
You must have an OpenShift cluster running.
You must have Docker or at least v3.2.0 of Podman installed.

Procedure

Build a plug-in and generate the output to the dist directory by running
```
$ yarn build
```
Start an HTTP server by running
```
$ yarn http-server
```

The HTTP server, which runs on port 9001, generates the following assets with caching disabled and CORS enabled.

Starting up http-server, serving ./dist
Available on:
  http://127.0.0.1:9001
  http://192.168.1.190:9001
  http://10.40.192.80:9001
Hit CTRL-C to stop the server

Optional: Add additional server options to the script by running
```
$ yarn http-server -a <server name>
```
Direct bridge to proxy requests to your local plug-in asset server by running
```
$ ./bin/bridge -plugins console-demo-plugin=http://localhost:9001/
```

Verification

Visit local host to view the running plug-in. Inspect the value of window.SERVER_FLAGS.consolePlugins to see the list of plug-ins which load at runtime.

Adding a new extension to your plug-in

You can add extensions that allow you to customize your plug-in. Those extensions are then loaded to the console at run-time.

Edit the console-extensions.json file:

[
 {
    "type": "console.flag", (1)
    "properties": {
      "handler": { "$codeRef": "barUtils.testHandler" } (2)
    }
  },
  {
    "type": "console.flag/model",
    "properties": {
      "flag": "EXAMPLE",
      "model": {
        "group": "kubevirt.io",
        "version": "v1alpha3",
        "kind": "ExampleModel"
      }
    }
  }
]

1	Add the extension type(s) you want to include with this plug-in. You can include multiple extensions separated with a comma.
2	The `$codeRef` value should be formatted as either `moduleName.exportName` for a named export or `moduleName` for the default export. Only the plug-in’s exported modules can be used in code references.

Dynamic plug-in extension types

`console.action/filter`

Summary

ActionFilter can be used to filter an action

Properties

Name	Value Type	Optional	Description
`contextId`	`string`	no	The context ID helps to narrow the scope of contributed actions to a particular area of the application. Ex - topology, helm
`filter`	`CodeRef<(scope: any, action: Action) ⇒ boolean>`	no	A function which will filter actions based on some conditions.scope: The scope in which actions should be provided for.Note: hook may be required if we want to remove the ModifyCount action from a deployment with HPA

`console.action/group`

Summary

ActionGroup contributes an action group that can also be a submenu

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	ID used to identify the action section.
`label`	`string`	yes	The label to display in the UI.Required for submenus.
`submenu`	`boolean`	yes	Whether this group should be displayed as submenu
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here.For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`

`console.action/provider`

Summary

ActionProvider contributes a hook that returns list of actions for specific context

Properties

Name	Value Type	Optional	Description
`contextId`	`string`	no	The context ID helps to narrow the scope of contributed actions to a particular area of the application. Ex - topology, helm
`provider`	`CodeRef<ExtensionHook<Action[], any>>`	no	A react hook which returns actions for the given scope.If contextId = `resource` then the scope will always be a K8s resource object

`console.action/resource-provider`

Summary

ResourceActionProvider contributes a hook that returns list of actions for specific resource model

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sKindVersionModel`	no	The model for which this provider provides actions for.
`provider`	`CodeRef<ExtensionHook<Action[], any>>`	no	A react hook which returns actions for the given resource model

`console.alert-action`

Summary

(not available)

Properties

Name	Value Type	Optional
`alert`	`string`	no
`text`	`string`	no
`action`	`CodeRef<(alert: any) ⇒ void>`	no

`console.catalog/item-filter`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`catalogId`	`string</p></td><td><p>string[]`	no
The unique identifier for the catalog this provider contributes to.	`type`	`string`	no
Type ID for the catalog item type.	`filter`	`CodeRef<(item: CatalogItem) ⇒ boolean>`	no

`console.catalog/item-metadata`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`catalogId`	`string</p></td><td><p>string[]`	no
The unique identifier for the catalog this provider contributes to.	`type`	`string`	no
Type ID for the catalog item type.	`provider`	`CodeRef<ExtensionHook<CatalogItemMetadataProviderFunction, CatalogExtensionHookOptions>>`	no

`console.catalog/item-provider`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`catalogId`	`string</p></td><td><p>string[]`	no
The unique identifier for the catalog this provider contributes to.	`type`	`string`	no
Type ID for the catalog item type.	`title`	`string`	no
Title for the catalog item provider	`provider`	`CodeRef<ExtensionHook<CatalogItem<any>[], CatalogExtensionHookOptions>>`	no
Fetch items and normalize it for the catalog. Value is a react effect hook.	`priority`	`number`	yes

`console.catalog/item-type`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`type`	`string`	no	Type for the catalog item.
`title`	`string`	no	Title for the catalog item.
`catalogDescription`	`string</p></td><td><p>CodeRef<React.ReactNode>`	yes
Description for the type specific catalog.	`typeDescription`	`string`	yes
Description for the catalog item type.	`filters`	`CatalogItemAttribute[]`	yes
Custom filters specific to the catalog item.	`groupings`	`CatalogItemAttribute[]`	yes

`console.catalog/item-type-metadata`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`type`	`string`	no	Type for the catalog item.
`filters`	`CatalogItemAttribute[]`	yes	Custom filters specific to the catalog item.
`groupings`	`CatalogItemAttribute[]`	yes	Custom groupings specific to the catalog item.

`console.cluster-overview/inventory-item`

Summary

Adds a new inventory item into cluster overview page.

Properties

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<{}>>`	no	The component to be rendered.

`console.cluster-overview/multiline-utilization-item`

Summary

Adds a new cluster overview multiline utilization item.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The title of the utilization item.
`getUtilizationQueries`	`CodeRef<GetMultilineQueries>`	no	Prometheus utilization query.
`humanize`	`CodeRef<Humanize>`	no	Convert prometheus data to human readable form.
`TopConsumerPopovers`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>[]>`	yes	Shows Top consumer popover instead of plain value

`console.cluster-overview/utilization-item`

Summary

Adds a new cluster overview utilization item.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The title of the utilization item.
`getUtilizationQuery`	`CodeRef<GetQuery>`	no	Prometheus utilization query.
`humanize`	`CodeRef<Humanize>`	no	Convert prometheus data to human readable form.
`getTotalQuery`	`CodeRef<GetQuery>`	yes	Prometheus total query.
`getRequestQuery`	`CodeRef<GetQuery>`	yes	Prometheus request query.
`getLimitQuery`	`CodeRef<GetQuery>`	yes	Prometheus limit query.
`TopConsumerPopover`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>>`	yes	Shows Top consumer popover instead of plain value

`console.context-provider`

Summary

Adds new React context provider to Console application root.

Properties

Name	Value Type	Optional	Description
`provider`	`CodeRef<Provider<T>>`	no	Context Provider component.
`useValueHook`	`CodeRef<() ⇒ T>`	no	Hook for the Context value.

`console.dashboards/card`

Summary

Adds a new dashboard card.

Properties

Name	Value Type	Optional	Description
`tab`	`string`	no	The id of the dashboard tab to which the card will be added.
`position`	’LEFT’	‘RIGHT’	‘MAIN’`
no	The grid position of the card on the dashboard.	`component`	`CodeRef<React.ComponentType<{}>>`
no	Dashboard card component.	`span`	`OverviewCardSpan`

`console.dashboards/overview/activity/resource`

Summary

Adds an activity to the Activity Card of Overview Dashboard where the triggering of activity is based on watching a K8s resource.

Properties

Name	Value Type	Optional	Description
`k8sResource`	`CodeRef<FirehoseResource & { isList: true; }>`	no	The utilization item to be replaced.
`component`	`CodeRef<React.ComponentType<K8sActivityProps<T>>>`	no	The action component.
`isActivity`	`CodeRef<(resource: T) ⇒ boolean>`	yes	Function which determines if the given resource represents the action. If not defined, every resource represents activity.
`getTimestamp`	`CodeRef<(resource: T) ⇒ Date>`	yes	Timestamp for the given action, which will be used for ordering.

`console.dashboards/overview/detail/item`

Summary

Adds an item to the Details card of Overview Dashboard

Properties

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<{}>>`	no	The value, based on the DetailItem component

`console.dashboards/overview/health/operator`

Summary

Adds a health subsystem to the status card of Overview dashboard where the source of status is a K8s REST API.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	Title of operators section in the popup.
`resources`	`CodeRef<FirehoseResource[]>`	no	Kubernetes resources which will be fetched and passed to `healthHandler`.
`getOperatorsWithStatuses`	`CodeRef<GetOperatorsWithStatuses<T>>`	yes	Resolves status for the operators.
`operatorRowLoader`	`CodeRef<React.ComponentType<OperatorRowProps<T>>>`	yes	Loader for popup row component.
`viewAllLink`	`string`	yes	Links to all resources page. If not provided then a list page of the first resource from resources prop is used.

`console.dashboards/overview/health/prometheus`

Summary

Adds a health subsystem to the status card of Overview dashboard where the source of status is Prometheus.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The display name of the subsystem.
`queries`	`string[]`	no	The Prometheus queries
`healthHandler`	`CodeRef<PrometheusHealthHandler>`	no	Resolve the subsystem’s health.
`additionalResource`	`CodeRef<FirehoseResource>`	yes	Additional resource which will be fetched and passed to `healthHandler`.
`popupComponent`	`CodeRef<React.ComponentType<PrometheusHealthPopupProps>>`	yes	Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content.
`popupTitle`	`string`	yes	The title of the popover.
`disallowedControlPlaneTopology`	`string[]`	yes	Control plane topology for which the subsystem should be hidden.

`console.dashboards/overview/health/resource`

Summary

Adds a health subsystem to the status card of Overview dashboard where the source of status is a K8s Resource.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The display name of the subsystem.
`resources`	`CodeRef<WatchK8sResources<T>>`	no	Kubernetes resources which will be fetched and passed to `healthHandler`.
`healthHandler`	`CodeRef<ResourceHealthHandler<T>>`	no	Resolve the subsystem’s health.
`popupComponent`	`CodeRef<WatchK8sResults<T>>`	yes	Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content.
`popupTitle`	`string`	yes	The title of the popover.

`console.dashboards/overview/health/url`

Summary

Adds a health subsystem to the status card of Overview dashboard where the source of status is a K8s REST API.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The display name of the subsystem.
`url`	`string`	no	The URL to fetch data from. It will be prefixed with base k8s URL.
`healthHandler`	`CodeRef<URLHealthHandler<T, K8sResourceCommon</p></td><td><p>K8sResourceCommon[]>>`	no
Resolve the subsystem’s health.	`additionalResource`	`CodeRef<FirehoseResource>`	yes
Additional resource which will be fetched and passed to `healthHandler`.	`popupComponent`	`CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: FirehoseResult<R>; }>>`	yes
Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content.	`popupTitle`	`string`	yes

`console.dashboards/overview/inventory/item`

Summary

Adds a resource tile to the overview inventory card.

Properties

Name	Value Type	Optional	Description
`model`	`CodeRef<T>`	no	The model for `resource` which will be fetched. Used to get the model’s `label` or `abbr`.
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	yes	Function which maps various statuses to groups.
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	yes	Additional resources which will be fetched and passed to the `mapper` function.

`console.dashboards/overview/inventory/item/group`

Summary

Adds an inventory status group.

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	The id of the status group.
`icon`	`CodeRef<React.ReactElement<any, string</p></td><td><p>React.JSXElementConstructor<any>>>`	no

`console.dashboards/overview/inventory/item/replacement`

Summary

Replaces an overview inventory card.

Properties

Name	Value Type	Optional	Description
`model`	`CodeRef<T>`	no	The model for `resource` which will be fetched. Used to get the model’s `label` or `abbr`.
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	yes	Function which maps various statuses to groups.
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	yes	Additional resources which will be fetched and passed to the `mapper` function.

`console.dashboards/overview/prometheus/activity/resource`

Summary

Adds an activity to the Activity Card of Prometheus Overview Dashboard where the triggering of activity is based on watching a K8s resource.

Properties

Name	Value Type	Optional	Description
`queries`	`string[]`	no	Queries to watch
`component`	`CodeRef<React.ComponentType<PrometheusActivityProps>>`	no	The action component.
`isActivity`	`CodeRef<(results: PrometheusResponse[]) ⇒ boolean>`	yes	Function which determines if the given resource represents the action. If not defined, every resource represents activity.

`console.dashboards/project/overview/item`

Summary

Adds a resource tile to the project overview inventory card.

Properties

Name	Value Type	Optional	Description
`model`	`CodeRef<T>`	no	The model for `resource` which will be fetched. Used to get the model’s `label` or `abbr`.
`mapper`	`CodeRef<StatusGroupMapper<T, R>>`	yes	Function which maps various statuses to groups.
`additionalResources`	`CodeRef<WatchK8sResources<R>>`	yes	Additional resources which will be fetched and passed to the `mapper` function.

`console.dashboards/tab`

Summary

Adds a new dashboard tab, placed after the Overview tab.

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique tab identifier, used as tab link `href` and when adding cards to this tab.
`navSection`	’home’	‘storage’`	no
NavSection to which the tab belongs to	`title`	`string`	no

`console.file-upload`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`fileExtensions`	`string[]`	no	Supported file extensions.
`handler`	`CodeRef<FileUploadHandler>`	no	Function which handles the file drop action.

`console.flag`

Summary

Gives full control over Console feature flags.

Properties

Name	Value Type	Optional	Description
`handler`	`CodeRef<FeatureFlagHandler>`	no	Used to set/unset arbitrary feature flags.

`console.flag/hookProvider`

Summary

Gives full control over Console feature flags with hook handlers.

Properties

Name	Value Type	Optional	Description
`handler`	`CodeRef<FeatureFlagHandler>`	no	Used to set/unset arbitrary feature flags.

`console.flag/model`

Summary

Adds new Console feature flag driven by the presence of a CRD on the cluster.

Properties

Name	Value Type	Optional	Description
`flag`	`string`	no	The name of the flag to set once the CRD is detected.
`model`	`ExtensionK8sModel`	no	The model which refers to a `CustomResourceDefinition`.

`console.global-config`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	Unique identifier for the cluster config resource instance.
`name`	`string`	no	The name of the cluster config resource instance.
`model`	`ExtensionK8sModel`	no	The model which refers to a cluster config resource.
`namespace`	`string`	no	The namespace of the cluster config resource instance.

`console.model-metadata`

Summary

Customize the display of models by overriding values retrieved and generated through API discovery.

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sGroupModel`	no	The model to customize. May specify only a group, or optional version and kind.
`badge`	`ModelBadge`	yes	Whether to consider this model reference as tech preview or dev preview.
`color`	`string`	yes	The color to associate to this model.
`label`	`string`	yes	Override the label. Requires `kind` be provided.
`labelPlural`	`string`	yes	Override the plural label. Requires `kind` be provided.
`abbr`	`string`	yes	Customize the abbreviation. Defaults to All uppercase chars in the kind up to 4 characters long. Requires `kind` be provided.

`console.navigation/href`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`name`	`string`	no	The name of this item.
`href`	`string`	no	The link href value.
`perspective`	`string`	yes	The perspective ID to which this item belongs to. If not specified, contributes to the default perspective.
`section`	`string`	yes	Navigation section to which this item belongs to. If not specified, render this item as a top level link.
`dataAttributes`	`{ [key: string]: string; }`	yes	Adds data attributes to the DOM.
`startsWith`	`string[]`	yes	Mark this item as active when the URL starts with one of these paths.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here. For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`
yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. `insertBefore` takes precedence.	`namespaced`	`boolean`
yes	if true, adds /ns/active-namespace to the end	`prefixNamespaced`	`boolean`

`console.navigation/resource-cluster`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`model`	`ExtensionK8sModel`	no	The model for which this nav item links to.
`perspective`	`string`	yes	The perspective ID to which this item belongs to. If not specified, contributes to the default perspective.
`section`	`string`	yes	Navigation section to which this item belongs to. If not specified, render this item as a top level link.
`dataAttributes`	`{ [key: string]: string; }`	yes	Adds data attributes to the DOM.
`startsWith`	`string[]`	yes	Mark this item as active when the URL starts with one of these paths.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here. For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`
yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. `insertBefore` takes precedence.	`name`	`string`

`console.navigation/resource-ns`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`model`	`ExtensionK8sModel`	no	The model for which this nav item links to.
`perspective`	`string`	yes	The perspective ID to which this item belongs to. If not specified, contributes to the default perspective.
`section`	`string`	yes	Navigation section to which this item belongs to. If not specified, render this item as a top level link.
`dataAttributes`	`{ [key: string]: string; }`	yes	Adds data attributes to the DOM.
`startsWith`	`string[]`	yes	Mark this item as active when the URL starts with one of these paths.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here. For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`
yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. `insertBefore` takes precedence.	`name`	`string`

`console.navigation/section`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`perspective`	`string`	yes	The perspective ID to which this item belongs to. If not specified, contributes to the default perspective.
`dataAttributes`	`{ [key: string]: string; }`	yes	Adds data attributes to the DOM.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here. For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`
yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. `insertBefore` takes precedence.	`name`	`string`

`console.navigation/separator`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`perspective`	`string`	yes	The perspective ID to which this item belongs to. If not specified, contributes to the default perspective.
`section`	`string`	yes	Navigation section to which this item belongs to. If not specified, render this item as a top level link.
`dataAttributes`	`{ [key: string]: string; }`	yes	Adds data attributes to the DOM.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here. For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`

`console.page/resource/details`

Summary

Adds new resource details page to Console router.

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sGroupKindModel`	no	The model for which this resource page links to.
`component`	`CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>`	no	The component to be rendered when the route matches.

`console.page/resource/list`

Summary

Adds new resource list page to Console router.

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sGroupKindModel`	no	The model for which this resource page links to.
`component`	`CodeRef<React.ComponentType<{ match: match<{}>; namespace: string; model: ExtensionK8sModel; }>>`	no	The component to be rendered when the route matches.

`console.page/route`

Summary

Adds new page to Console router.Under the hood we use React Router.See https://v5.reactrouter.com/

Properties

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	no	The component to be rendered when the route matches.
`path`	`string</p></td><td><p>string[]`	no
Valid URL path or array of paths that `path-to-regexp@^1.7.0` understands.	`perspective`	`string`	yes
The perspective to which this page belongs to. If not specified, contributes to all perspectives.	`exact`	`boolean`	yes

`console.page/route/standalone`

Summary

Adds new standalone page (rendered outside the common page layout) to Console router.Under the hood we use React Router.See https://v5.reactrouter.com/

Properties

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	no	The component to be rendered when the route matches.
`path`	`string</p></td><td><p>string[]`	no
Valid URL path or array of paths that `path-to-regexp@^1.7.0` understands.	`exact`	`boolean`	yes

`console.perspective`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	The perspective identifier.
`name`	`string`	no	The perspective display name.
`icon`	`CodeRef<LazyComponent>`	no	The perspective display icon.
`landingPageURL`	`CodeRef<(flags: { [key: string]: boolean; }, isFirstVisit: boolean) ⇒ string>`	no	The function to get perspective landing page URL.
`importRedirectURL`	`CodeRef<(namespace: string) ⇒ string>`	no	The function to get redirect URL for import flow.
`default`	`boolean`	yes	Whether the perspective is the default. There can only be one default.
`defaultPins`	`ExtensionK8sModel[]`	yes	Default pinned resources on the nav
`usePerspectiveDetection`	`CodeRef<() ⇒ [boolean, boolean]>`	yes	The hook to detect default perspective

`console.project-overview/inventory-item`

Summary

Adds a new inventory item into project overview page.

Properties

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<{ projectName: string; }>>`	no	The component to be rendered.

`console.project-overview/utilization-item`

Summary

Adds a new project overview utilization item.

Properties

Name	Value Type	Optional	Description
`title`	`string`	no	The title of the utilization item.
`getUtilizationQuery`	`CodeRef<GetProjectQuery>`	no	Prometheus utilization query.
`humanize`	`CodeRef<Humanize>`	no	Convert prometheus data to human readable form.
`getTotalQuery`	`CodeRef<GetProjectQuery>`	yes	Prometheus total query.
`getRequestQuery`	`CodeRef<GetProjectQuery>`	yes	Prometheus request query.
`getLimitQuery`	`CodeRef<GetProjectQuery>`	yes	Prometheus limit query.
`TopConsumerPopover`	`CodeRef<React.ComponentType<TopConsumerPopoverProps>>`	yes	Shows Top consumer popover instead of plain value

`console.pvc/alert`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`alert`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	no	The alert component.

`console.pvc/create-prop`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`label`	`string`	no	Label for the create prop action.
`path`	`string`	no	Path for the create prop action.

`console.pvc/delete`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`predicate`	`CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>`	no	Predicate that tells whether to use the extension or not.
`onPVCKill`	`CodeRef<(pvc: K8sResourceCommon) ⇒ Promise<void>>`	no	Method for the PVC delete operation.
`alert`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	no	Alert component to show additional information.

`console.pvc/status`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`priority`	`number`	no	Priority for the status component. Bigger value means higher priority.
`status`	`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`	no	The status component.
`predicate`	`CodeRef<(pvc: K8sResourceCommon) ⇒ boolean>`	no	Predicate that tells whether to render the status component or not.

`console.redux-reducer`

Summary

Adds new reducer to Console Redux store which operates on plugins.<scope> substate.

Properties

Name	Value Type	Optional	Description
`scope`	`string`	no	The key to represent the reducer-managed substate within the Redux state object.
`reducer`	`CodeRef<Reducer<any, AnyAction>>`	no	The reducer function, operating on the reducer-managed substate.

`console.resource/create`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sModel`	no	The model for which this create resource page will be rendered.
`component`	`CodeRef<React.ComponentType<CreateResourceComponentProps>>`	no	The component to be rendered when the model matches

`console.storage-provider`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`name`	`string`	no
`Component`	`CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>>`	no

`console.tab/horizontalNav`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sKindVersionModel`	no	The model for which this provider show tab.
`page`	`{ name: string; href: string; }`	no	The page to be show in horizontal tab. It takes tab name as name and href of the tab
`component`	`CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>`	no	The component to be rendered when the route matches.

`console.telemetry/listener`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`listener`	`CodeRef<TelemetryEventListener>`	no	Listen for telemetry events

`console.topology/adapter/build`

Summary

BuildAdapter contributes an adapter to adapt element to data that can be used by Build component

Properties

Name	Value Type	Optional	Description
`adapt`	`CodeRef<(element: GraphElement) ⇒ AdapterDataType<BuildConfigData></p></td><td><p>undefined>`	no

`console.topology/adapter/network`

Summary

NetworkAdpater contributes an adapter to adapt element to data that can be used by Networking component

Properties

Name	Value Type	Optional	Description
`adapt`	`CodeRef<(element: GraphElement) ⇒ NetworkAdapterType</p></td><td><p>undefined>`	no

`console.topology/adapter/pod`

Summary

PodAdapter contributes an adapter to adapt element to data that can be used by Pod component

Properties

Name	Value Type	Optional	Description
`adapt`	`CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType></p></td><td><p>undefined>`	no

`console.topology/component/factory`

Summary

Getter for a ViewComponentFactory

Properties

Name	Value Type	Optional	Description
`getFactory`	`CodeRef<ViewComponentFactory>`	no	Getter for a ViewComponentFactory

`console.topology/create/connector`

Summary

Getter for the create connector function

Properties

Name	Value Type	Optional	Description
`getCreateConnector`	`CodeRef<CreateConnectionGetter>`	no	Getter for the create connector function

`console.topology/data/factory`

Summary

Topology Data Model Factory Extension

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	Unique ID for the factory.
`priority`	`number`	no	Priority for the factory
`resources`	`WatchK8sResourcesGeneric`	yes	Resources to be fetched from useK8sWatchResources hook.
`workloadKeys`	`string[]`	yes	Keys in resources containing workloads.
`getDataModel`	`CodeRef<TopologyDataModelGetter>`	yes	Getter for the data model factory
`isResourceDepicted`	`CodeRef<TopologyDataModelDepicted>`	yes	Getter for function to determine if a resource is depicted by this model factory
`getDataModelReconciler`	`CodeRef<TopologyDataModelReconciler>`	yes	Getter for function to reconcile data model after all extensions’ models have loaded

`console.topology/decorator/provider`

Summary

Topology Decorator Provider Extension

Properties

Name	Value Type	Optional
`id`	`string`	no
`priority`	`number`	no
`quadrant`	`TopologyQuadrant`	no
`decorator`	`CodeRef<TopologyDecoratorGetter>`	no

`console.topology/details/resource-alert`

Summary

DetailsResourceAlert contributes an alert for specific topology context or graph element.

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	The ID of this alert. Used to save state if the alert shouldn’t be shown after dismissed.
`contentProvider`	`CodeRef<(element: GraphElement) ⇒ DetailsResourceAlertContent</p></td><td><p>null>`	no

`console.topology/details/resource-link`

Summary

DetailsResourceLink contributes a link for specific topology context or graph element.

Properties

Name	Value Type	Optional	Description
`link`	`CodeRef<(element: GraphElement) ⇒ React.Component</p></td><td><p>undefined>`	no
Return the resource link if provided, otherwise undefined.Use ResourceIcon and ResourceLink for styles.	`priority`	`number`	yes

`console.topology/details/tab`

Summary

DetailsTab contributes a tab for the topology details panel.

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this details tab.
`label`	`string`	no	The tab label to display in the UI.
`insertBefore`	`string</p></td><td><p>string[]`	yes
Insert this item before the item referenced here.For arrays, the first one found in order is used.	`insertAfter`	`string</p></td><td><p>string[]`

`console.topology/details/tab-section`

Summary

DetailsTabSection contributes a section for a specific tab in topology details panel.

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this details tab section.
`tab`	`string`	no	The parent tab ID that this section should contribute to.
`provider`	`CodeRef<DetailsTabSectionExtensionHook>`	no	A hook that returns a component or null/undefined that will be renderedin the topology sidebar.SDK component: <Section title={}>… padded area
`section`	`CodeRef<(element: GraphElement, renderNull?: () ⇒ null) ⇒ React.Component</p></td><td><p>undefined>`	no
@deprecated Fallback if no provider is defined. renderNull is a no-op already.	`insertBefore`	`string</p></td><td><p>string[]`
yes	Insert this item before the item referenced here.For arrays, the first one found in order is used.	`insertAfter`	`string

`console.topology/display/filters`

Summary

Topology Display Filters Extension

Properties

Name	Value Type	Optional	Description
`getTopologyFilters`	`CodeRef<() ⇒ TopologyDisplayOption[]>`	no
`applyDisplayOptions`	`CodeRef<TopologyApplyDisplayOptions>`	no

`console.topology/relationship/provider`

Summary

Topology relationship provider connector extension

Properties

Name	Value Type	Optional
`provides`	`CodeRef<RelationshipProviderProvides>`	no
`tooltip`	`string`	no
`create`	`CodeRef<RelationshipProviderCreate>`	no
`priority`	`number`	no

`console.user-preference/group`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	ID used to identify the user preference group.
`label`	`string`	no	The label of the user preference group
`insertBefore`	`string`	yes	ID of user preference group before which this group should be placed
`insertAfter`	`string`	yes	ID of user preference group after which this group should be placed

`console.user-preference/item`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	ID used to identify the user preference item and referenced in insertAfter and insertBefore to define the item order.
`label`	`string`	no	The label of the user preference
`description`	`string`	no	The description of the user preference.
`field`	`UserPreferenceField`	no	The input field options used to render the values to set the user preference.
`groupId`	`string`	yes	IDs used to identify the user preference groups the item would belong to.
`insertBefore`	`string`	yes	ID of user preference item before which this item should be placed
`insertAfter`	`string`	yes	ID of user preference item after which this item should be placed

`console.yaml-template`

Summary

YAML templates for editing resources via the yaml editor.

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sModel`	no	Model associated with the template.
`template`	`CodeRef<string>`	no	The YAML template.
`name`	`string`	no	The name of the template. Use the name `default` to mark this as the default template.

`dev-console.add/action`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	ID used to identify the action.
`label`	`string`	no	The label of the action
`description`	`string`	no	The description of the action.
`href`	`string`	no	The href to navigate to.
`groupId`	`string`	yes	IDs used to identify the action groups the action would belong to.
`icon`	`CodeRef<React.ReactNode>`	yes	The perspective display icon.
`accessReview`	`AccessReviewResourceAttributes[]`	yes	Optional access review to control visibility / enablement of the action.

`dev-console.add/action-group`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`id`	`string`	no	ID used to identify the action group.
`name`	`string`	no	The title of the action group
`insertBefore`	`string`	yes	ID of action group before which this group should be placed
`insertAfter`	`string`	yes	ID of action group after which this group should be placed

`dev-console.import/environment`

Summary

(not available)

Properties

Name	Value Type	Optional	Description
`imageStreamName`	`string`	no	Name of the image stream to provide custom environment variables for
`imageStreamTags`	`string[]`	no	List of supported image stream tags
`environments`	`ImageEnvironment[]`	no	List of environment variables

`console.page/resource/tab`

Summary [DEPRECATED]

@deprecated - Use console.tab/horizontalNav insteadAdds new resource tab page to Console router.

Properties

Name	Value Type	Optional	Description
`model`	`ExtensionK8sGroupKindModel`	no	The model for which this resource page links to.
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	no	The component to be rendered when the route matches.
`name`	`string`	no	The name of the tab.
`href`	`string`	yes	The optional href for the tab link. If not provided, the first `path` is used.
`exact`	`boolean`	yes	When true, will only match if the path matches the `location.pathname` exactly.

Adding a tab to the pods page

The following procedure adds a tab to the Pod Details page as an example extension to your plug-in.

Procedure

Add the following to the console-extensions.json file:

{
  "type": "console.tab/horizontalNav",
  "properties": {
    "page": {
      "name": "Example Tab",
      "href": "example"
    },
    "model": {
      "group": "core",
      "version": "v1",
      "kind": "Pod"
    },
    "component": { "$codeRef": "ExampleTab" }
}

Edit the package.json file to include the following changes:

        "exposedModules": {
            "ExamplePage": "./components/ExamplePage",
            "ExampleTab": "./components/ExampleTab"
        }

Write a message to display on a new custom tab on the Pods page by creating a new file src/components/ExampleTab.tsx and adding the following script:

import * as React from 'react';
export default function ExampleTab() {
    return (
        <p>This is a custom tab added to a resource using a dynamic plug-in.</p>
    );
}

Verification

Visit a Pod page to view the added tab.

Build an image with Docker

To deploy your plug-in on a cluster, you need to build an image and push it to an image registry.

Procedure

Build the image with the following command:

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

Optional: If you want to test your image, run the following command:

$ docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest

Push the image by running the following command:

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

Deploy your plug-in on a cluster

After pushing an image with your changes to a registry, you can deploy the plug-in to a cluster.

Procedure

To deploy your plug-in to a cluster, instantiate your plug-in by running the following command:
```
$ oc process -f template.yaml \
  -p PLUGIN_NAME=my-plugin \ (1)
  -p NAMESPACE=my-plugin-namespace \ (2)
  -p IMAGE=quay.io/my-repository/my-plugin:latest \ (3)
  | oc create -f -
```
1 Update with the name of your plug-in.
2 Update with the namespace.
3 Update with the name of the image you created.

This command runs a light-weight NGINX HTTP server to serve the assets for your plug-in.

PLUGIN_NAME must match the plug-in name you used in the consolePlugin declaration of package.json.

Patch the Console Operator configuration to enable the plug-in by running the following command:

$ oc patch consoles.operator.openshift.io cluster --patch '{ "spec": { "plugins": ["my-plugin"] } }' --type=merge

Disabling your plug-in in the browser

Console users can use the disable-plugins query parameter to disable specific or all dynamic plug-ins that would normally get loaded at run-time.

Procedure

To disable a specific plug-in(s), remove the plug-in you want to disable from the comma-separated list of plug-in names.
To disable all plug-ins, leave an an empty string in the disable-plugins query parameter.

Cluster administrators can disable plug-ins in the Cluster Settings page of the web console

1	Update with the name of your plug-in.
2	Update with the namespace.
3	Update with the name of the image you created.