Chapter 7. Dynamic plugins

7.1. Overview of dynamic plugins
Copy link

7.1.1. About dynamic plugins
Copy link

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

Important

Creating a dynamic plugin 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 Technology Preview Features Support Scope.

7.1.2. Key features
Copy link

A dynamic plugin allows you to make the following customizations to the OpenShift Container Platform experience:

Add custom pages.
Add perspectives beyond administrator and developer.
Add navigation items.
Add tabs and actions to resource pages.

7.1.3. General guidelines
Copy link

When creating your plugin, follow these general guidelines:

Node.js and yarn are required to build and run your plugin.
Prefix your CSS class names with your plugin 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 plugin. 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>;
};

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

Copy to Clipboard

Toggle word wrap

Avoid selectors that could affect markup outside of your plugin’s components, such as element selectors. These are not APIs and are subject to change. Using them might break your plugin.

PatternFly 4 guidelines

When creating your plugin, 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 help your plugin look consistent in future console versions.
Make your plugin accessible by following PatternFly’s accessibility fundamentals.
Avoid using other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.

7.2. Getting started with dynamic plugins
Copy link

To get started using the dynamic plugin, you must set up your environment to write a new OpenShift Container Platform dynamic plugin. For an example of how to write a new plugin, see Adding a tab to the pods page.

7.2.1. Dynamic plugin development
Copy link

You can run the plugin using a local development environment. The OpenShift Container Platform web console runs in a container connected to the cluster you have logged into.

Prerequisites

You must have an OpenShift cluster running.
You must have the OpenShift CLI (oc) installed.
You must have yarn installed.
You must have Docker v3.2.0 or newer or Podman installed and running.

Procedure

In your terminal, run the following command to install the dependencies for your plugin using Yarn.
```
yarn install
```
```
$ yarn install
```
Copy to Clipboard Toggle word wrap
After installing, run the following command to start Yarn.
```
yarn run start
```
```
$ yarn run start
```
Copy to Clipboard Toggle word wrap
In another terminal window, login to the OpenShift Container Platform through the CLI.
```
oc login
```
```
$ oc login
```
Copy to Clipboard Toggle word wrap
Run the OpenShift Container Platform web console in a container connected to the cluster you have logged into by running the following command:
```
yarn run start-console
```
```
$ yarn run start-console
```
Copy to Clipboard Toggle word wrap

Verification

Visit localhost:9000 to view the running plugin. Inspect the value of window.SERVER_FLAGS.consolePlugins to see the list of plugins that load at runtime.

7.3. Deploy your plugin on a cluster
Copy link

You can deploy the plugin to a OpenShift Container Platform cluster.

7.3.1. Build an image with Docker
Copy link

To deploy your plugin 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 .

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

Copy to Clipboard

Toggle word wrap

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

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

Copy to Clipboard

Toggle word wrap

Push the image by running the following command:

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

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

Copy to Clipboard

Toggle word wrap

7.3.2. Deploy your plugin on a cluster
Copy link

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

Procedure

Install a Helm chart with the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the -n command-line option. Provide the location of the image within the plugin.image parameter by using the following command:
```
helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
```
$ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
Copy to Clipboard Toggle word wrap
Where:
n <my-plugin-namespace>
Specifies an existing namespace to deploy your plugin into.
--create-namespace
Optional: If deploying to a new namespace, use this parameter.
--set plugin.image=my-plugin-image-location
Specifies the location of the image within the plugin.image parameter.
Optional: You can specify any additional parameters by using the set of supported parameters in the charts/openshift-console-plugin/values.yaml file.

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.redhat.io/openshift4/ose-tools-rhel8@sha256:e44074f21e0cca6464e50cb6ff934747e0bd11162ea01d522433a1a1ae116103"
      podSecurityContext:
        enabled: true
        runAsNonRoot: true
        seccompProfile:
          type: RuntimeDefault
      containerSecurityContext:
        enabled: true
        allowPrivilegeEscalation: false
        capabilities:
          drop:
            - ALL
      resources:
        requests:
          cpu: 10m
          memory: 50Mi

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.redhat.io/openshift4/ose-tools-rhel8@sha256:e44074f21e0cca6464e50cb6ff934747e0bd11162ea01d522433a1a1ae116103"
      podSecurityContext:
        enabled: true
        runAsNonRoot: true
        seccompProfile:
          type: RuntimeDefault
      containerSecurityContext:
        enabled: true
        allowPrivilegeEscalation: false
        capabilities:
          drop:
            - ALL
      resources:
        requests:
          cpu: 10m
          memory: 50Mi

Copy to Clipboard

Toggle word wrap

Verification

You can see the list of the enabled plugins on the Overview page or by navigating from Administration Cluster Settings Configuration Console operator.openshift.io Console plugins.

Note

It can take a few minutes for the new plugin configuration to appear. If you do not see your plugin, you might need to refresh your browser if the plugin was recently enabled. If you receive any errors at runtime, check the JS console in browser developer tools to look for any errors in your plugin code.

7.3.3. Disabling your plugin in the browser
Copy link

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

Procedure

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

Note

Cluster administrators can disable plugins in the Cluster Settings page of the web console

7.4. Dynamic plugin example
Copy link

Before working through the example, verify that the plugin is working by following the steps in Dynamic plugin development.

7.4.1. Adding a tab to the pods page
Copy link

There are different customizations you can make to the OpenShift Container Platform web console. Set up your environment to write a new OpenShift Console dynamic plugin, and add a tab to the Pod details page as an example extension to your plugin.

Note

The OpenShift Container Platform web console runs in a container connected to the cluster you have logged into. See "Dynamic plugin development" for information to test the plugin before creating your own.

Prerequisites

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

Procedure

In a new tab, open the console-plugin-template repository, which contains a template for creating plugins in a new tab.
Important
Custom plugin code is not supported by Red Hat. Only Cooperative community support is available for your plugin.
Create a GitHub repository for the template by clicking Use this template Create new repository.
Rename the new repository with the name of your plugin.
Clone the new repository to your local machine so you can edit the code.

Edit the package.json file by adding your plugin’s metadata to the consolePlugin declaration. For example:

"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": "/*"
  }
}

"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": "/*"
  }
}

Copy to Clipboard

Toggle word wrap

1: Update the name of your plugin.
2: Update the version.
3: Update the display name for your plugin.
4: Update the description with a synopsis about your plugin.

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" }
  }
}

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

Copy to Clipboard

Toggle word wrap

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

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

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

Copy to Clipboard

Toggle word wrap

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 plugin.</p>
    );
}

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

Copy to Clipboard

Toggle word wrap

Install a Helm chart with the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the -n command-line option and provide the location of the image within the plugin.image parameter to deploy your plugin on a cluster by using the following command:
```
helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
```
$ helm upgrade -i  my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
```
Copy to Clipboard Toggle word wrap
Note
For more information on deploying your plugin on a cluster, see "Deploy your plugin on a cluster".

Verification

Visit the Pod page to view the added tab.

7.5. Dynamic plugin reference
Copy link

You can add extensions that allow you to customize your plugin. Those extensions are then loaded to the console at runtime.

7.5.1. Dynamic plugin extension types
Copy link

7.5.1.1. console.action/filter
Copy link

7.5.1.1.1. Summary
Copy link

ActionFilter can be used to filter an action.

7.5.1.1.2. Properties
Copy link

Expand

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. Examples include `topology` and `helm`.
`filter`	`CodeRef<(scope: any, action: Action) ⇒ boolean>`	no	A function that will filter actions based on some conditions. `scope`: The scope in which actions should be provided for. A hook might be required if you want to remove the `ModifyCount` action from a deployment with a horizontal pod autoscaler (HPA).

7.5.1.2. console.action/group
Copy link

7.5.1.2.1. Summary
Copy link

ActionGroup contributes an action group that can also be a submenu.

7.5.1.2.2. Properties
Copy link

Expand

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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `string[]`	yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. The `insertBefore` value takes precedence.

7.5.1.3. console.action/provider
Copy link

7.5.1.3.1. Summary
Copy link

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

7.5.1.3.2. Properties
Copy link

Expand

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. Examples include `topology` and `helm`.
`provider`	`CodeRef<ExtensionHook<Action[], any>>`	no	A React hook that returns actions for the given scope. If `contextId` = `resource`, then the scope will always be a Kubernetes resource object.

7.5.1.4. console.action/resource-provider
Copy link

7.5.1.4.1. Summary
Copy link

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

7.5.1.4.2. Properties
Copy link

Expand

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

7.5.1.5. console.alert-action
Copy link

7.5.1.5.1. Summary
Copy link

(not available)

7.5.1.5.2. Properties
Copy link

Expand

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

7.5.1.6. console.catalog/item-filter
Copy link

7.5.1.6.1. Summary
Copy link

(not available)

7.5.1.6.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`catalogId`	`string` \| `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	Filters items of a specific type. Value is a function that takes `CatalogItem[]` and returns a subset based on the filter criteria.

7.5.1.7. console.catalog/item-metadata
Copy link

7.5.1.7.1. Summary
Copy link

(not available)

7.5.1.7.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`catalogId`	`string` \| `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	A hook which returns a function that will be used to provide metadata to catalog items of a specific type.

7.5.1.8. console.catalog/item-provider
Copy link

7.5.1.8.1. Summary
Copy link

(not available)

7.5.1.8.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`catalogId`	`string` \| `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	Priority for this provider. Defaults to `0`. Higher priority providers may override catalog items provided by other providers.

7.5.1.9. console.catalog/item-type
Copy link

7.5.1.9.1. Summary
Copy link

(not available)

7.5.1.9.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`type`	`string`	no	Type for the catalog item.
`title`	`string`	no	Title for the catalog item.
`catalogDescription`	`string` \| `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	Custom groupings specific to the catalog item.

7.5.1.10. console.catalog/item-type-metadata
Copy link

7.5.1.10.1. Summary
Copy link

(not available)

7.5.1.10.2. Properties
Copy link

Expand

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.

7.5.1.11. console.cluster-overview/inventory-item
Copy link

7.5.1.11.1. Summary
Copy link

Adds a new inventory item into cluster overview page.

7.5.1.11.2. Properties
Copy link

Expand

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

7.5.1.12. console.cluster-overview/multiline-utilization-item
Copy link

7.5.1.12.1. Summary
Copy link

Adds a new cluster overview multi-line utilization item.

7.5.1.12.2. Properties
Copy link

Expand

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

7.5.1.13. console.cluster-overview/utilization-item
Copy link

7.5.1.13.1. Summary
Copy link

Adds a new cluster overview utilization item.

7.5.1.13.2. Properties
Copy link

Expand

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

7.5.1.14. console.context-provider
Copy link

7.5.1.14.1. Summary
Copy link

Adds a new React context provider to the web console application root.

7.5.1.14.2. Properties
Copy link

Expand

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

7.5.1.15. console.dashboards/card
Copy link

7.5.1.15.1. Summary
Copy link

Adds a new dashboard card.

7.5.1.15.2. Properties
Copy link

Expand

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`	yes	Card’s vertical span in the column. Ignored for small screens; defaults to `12`.

7.5.1.16. console.dashboards/overview/activity/resource
Copy link

7.5.1.16.1. Summary
Copy link

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

7.5.1.16.2. Properties
Copy link

Expand

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	Time stamp for the given action, which will be used for ordering.

7.5.1.17. console.dashboards/overview/detail/item
Copy link

7.5.1.17.1. Summary
Copy link

Adds an item to the Details card of Overview dashboard

7.5.1.17.2. Properties
Copy link

Expand

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

7.5.1.18. console.dashboards/overview/health/operator
Copy link

7.5.1.18.1. Summary
Copy link

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

7.5.1.18.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`title`	`string`	no	Title of Operators section in the pop-up menu.
`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 pop-up 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.

7.5.1.19. console.dashboards/overview/health/prometheus
Copy link

7.5.1.19.1. Summary
Copy link

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

7.5.1.19.2. Properties
Copy link

Expand

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 pop-up menu content. If defined, a health item is represented as a link, which opens a pop-up menu with the given content.
`popupTitle`	`string`	yes	The title of the popover.
`disallowedControlPlaneTopology`	`string[]`	yes	Control plane topology for which the subsystem should be hidden.

7.5.1.20. console.dashboards/overview/health/resource
Copy link

7.5.1.20.1. Summary
Copy link

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

7.5.1.20.2. Properties
Copy link

Expand

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

7.5.1.21. console.dashboards/overview/health/url
Copy link

7.5.1.21.1. Summary
Copy link

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

7.5.1.21.2. Properties
Copy link

Expand

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 Kubernetes URL.
`healthHandler`	`CodeRef<URLHealthHandler<T, K8sResourceCommon	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

7.5.1.22. console.dashboards/overview/inventory/item
Copy link

7.5.1.22.1. Summary
Copy link

Adds a resource tile to the overview inventory card.

7.5.1.22.2. Properties
Copy link

Expand

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.

7.5.1.23. console.dashboards/overview/inventory/item/group
Copy link

7.5.1.23.1. Summary
Copy link

Adds an inventory status group.

7.5.1.23.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`id`	`string`	no	The id of the status group.
`icon`	`CodeRef<React.ReactElement<any, string` \| `React.JSXElementConstructor<any>>>`	no	React component representing the status group icon.

7.5.1.24. console.dashboards/overview/inventory/item/replacement
Copy link

7.5.1.24.1. Summary
Copy link

Replaces an overview inventory card.

7.5.1.24.2. Properties
Copy link

Expand

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.

7.5.1.25. console.dashboards/overview/prometheus/activity/resource
Copy link

7.5.1.25.1. Summary
Copy link

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

7.5.1.25.2. Properties
Copy link

Expand

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.

7.5.1.26. console.dashboards/project/overview/item
Copy link

7.5.1.26.1. Summary
Copy link

Adds a resource tile to the project overview inventory card.

7.5.1.26.2. Properties
Copy link

Expand

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.

7.5.1.27. console.dashboards/tab
Copy link

7.5.1.27.1. Summary
Copy link

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

7.5.1.27.2. Properties
Copy link

Expand

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	Navigation section to which the tab belongs to.
`title`	`string`	no	The title of the tab.

7.5.1.28. console.file-upload
Copy link

7.5.1.28.1. Summary
Copy link

(not available)

7.5.1.28.2. Properties
Copy link

Expand

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

7.5.1.29. console.flag
Copy link

7.5.1.29.1. Summary
Copy link

Gives full control over the web console feature flags.

7.5.1.29.2. Properties
Copy link

Expand

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

7.5.1.30. console.flag/hookProvider
Copy link

7.5.1.30.1. Summary
Copy link

Gives full control over the web console feature flags with hook handlers.

7.5.1.30.2. Properties
Copy link

Expand

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

7.5.1.31. console.flag/model
Copy link

7.5.1.31.1. Summary
Copy link

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

7.5.1.31.2. Properties
Copy link

Expand

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`.

7.5.1.32. console.global-config
Copy link

7.5.1.32.1. Summary
Copy link

(not available)

7.5.1.32.2. Properties
Copy link

Expand

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.

7.5.1.33. console.model-metadata
Copy link

7.5.1.33.1. Summary
Copy link

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

7.5.1.33.2. Properties
Copy link

Expand

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 Technology Preview or Developer 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 characters in `kind`, up to 4 characters long. Requires that `kind` is provided.

7.5.1.34. console.navigation/href
Copy link

7.5.1.34.1. Summary
Copy link

(not available)

7.5.1.34.2. Properties
Copy link

Expand

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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `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`	yes	If `true`, adds `/k8s/ns/active-namespace` to the beginning

7.5.1.35. console.navigation/resource-cluster
Copy link

7.5.1.35.1. Summary
Copy link

(not available)

7.5.1.35.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`model`	`ExtensionK8sModel`	no	The model for which this navigation 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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `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`	yes	Overrides the default name. If not supplied the name of the link will equal the plural value of the model.

7.5.1.36. console.navigation/resource-ns
Copy link

7.5.1.36.1. Summary
Copy link

(not available)

7.5.1.36.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`id`	`string`	no	A unique identifier for this item.
`model`	`ExtensionK8sModel`	no	The model for which this navigation 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 \| string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `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`	yes	Overrides the default name. If not supplied the name of the link will equal the plural value of the model.

7.5.1.37. console.navigation/section
Copy link

7.5.1.37.1. Summary
Copy link

(not available)

7.5.1.37.2. Properties
Copy link

Expand

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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `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`	yes	Name of this section. If not supplied, only a separator will be shown above the section.

7.5.1.38. console.navigation/separator
Copy link

7.5.1.38.1. Summary
Copy link

(not available)

7.5.1.38.2. Properties
Copy link

Expand

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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `string[]`	yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. `insertBefore` takes precedence.

7.5.1.39. console.page/resource/details
Copy link

7.5.1.39.1. Summary
Copy link

Adds a new resource details page to the web console router.

7.5.1.39.2. Properties
Copy link

Expand

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.

7.5.1.40. console.page/resource/list
Copy link

7.5.1.40.1. Summary
Copy link

Adds new resource list page to Console router.

7.5.1.40.2. Properties
Copy link

Expand

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.

7.5.1.41. console.page/route
Copy link

7.5.1.41.1. Summary
Copy link

Adds a new page to the web console router. See React Router.

7.5.1.41.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	no	The component to be rendered when the route matches.
`path`	`string` \| `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	When true, will only match if the path matches the `location.pathname` exactly.

7.5.1.42. console.page/route/standalone
Copy link

7.5.1.42.1. Summary
Copy link

Adds a new standalone page, rendered outside the common page layout, to the web console router. See React Router.

7.5.1.42.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`component`	`CodeRef<React.ComponentType<RouteComponentProps<{}, StaticContext, any>>>`	no	The component to be rendered when the route matches.
`path`	`string` \| `string[]`	no	Valid URL path or array of paths that `path-to-regexp@^1.7.0` understands.
`exact`	`boolean`	yes	When true, will only match if the path matches the `location.pathname` exactly.

7.5.1.43. console.perspective
Copy link

7.5.1.43.1. Summary
Copy link

(not available)

7.5.1.43.2. Properties
Copy link

Expand

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

7.5.1.44. console.project-overview/inventory-item
Copy link

7.5.1.44.1. Summary
Copy link

Adds a new inventory item into the Project Overview page.

7.5.1.44.2. Properties
Copy link

Expand

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

7.5.1.45. console.project-overview/utilization-item
Copy link

7.5.1.45.1. Summary
Copy link

Adds a new project overview utilization item.

7.5.1.45.2. Properties
Copy link

Expand

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 the top consumer popover instead of plain value.

7.5.1.46. console.pvc/alert
Copy link

7.5.1.46.1. Summary
Copy link

(not available)

7.5.1.46.2. Properties
Copy link

Expand

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

7.5.1.47. console.pvc/create-prop
Copy link

7.5.1.47.1. Summary
Copy link

(not available)

7.5.1.47.2. Properties
Copy link

Expand

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

7.5.1.48. console.pvc/delete
Copy link

7.5.1.48.1. Summary
Copy link

(not available)

7.5.1.48.2. Properties
Copy link

Expand

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.

7.5.1.49. console.pvc/status
Copy link

7.5.1.49.1. Summary
Copy link

(not available)

7.5.1.49.2. Properties
Copy link

Expand

Name	Value Type	Optional	Description
`priority`	`number`	no	Priority for the status component. A larger 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.

7.5.1.50. console.redux-reducer
Copy link

7.5.1.50.1. Summary
Copy link

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

7.5.1.50.2. Properties
Copy link

Expand

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.

7.5.1.51. console.resource/create
Copy link

7.5.1.51.1. Summary
Copy link

(not available)

7.5.1.51.2. Properties
Copy link

Expand

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

7.5.1.52. console.storage-provider
Copy link

7.5.1.52.1. Summary
Copy link

(not available)

7.5.1.52.2. Properties
Copy link

Expand

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

7.5.1.53. console.tab/horizontalNav
Copy link

7.5.1.53.1. Summary
Copy link

(not available)

7.5.1.53.2. Properties
Copy link

Expand

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.

7.5.1.54. console.telemetry/listener
Copy link

7.5.1.54.1. Summary
Copy link

(not available)

7.5.1.54.2. Properties
Copy link

Expand

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

7.5.1.55. console.topology/adapter/build
Copy link

7.5.1.55.1. Summary
Copy link

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

7.5.1.55.2. Properties
Copy link

Expand

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

7.5.1.56. console.topology/adapter/network
Copy link

7.5.1.56.1. Summary
Copy link

NetworkAdapater contributes an adapter to adapt element to data that can be used by the Networking component.

7.5.1.56.2. Properties
Copy link

Expand

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

7.5.1.57. console.topology/adapter/pod
Copy link

7.5.1.57.1. Summary
Copy link

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

7.5.1.57.2. Properties
Copy link

Expand

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

7.5.1.58. console.topology/component/factory
Copy link

7.5.1.58.1. Summary
Copy link

Getter for a ViewComponentFactory.

7.5.1.58.2. Properties
Copy link

Expand

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

7.5.1.59. console.topology/create/connector
Copy link

7.5.1.59.1. Summary
Copy link

Getter for the create connector function.

7.5.1.59.2. Properties
Copy link

Expand

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

7.5.1.60. console.topology/data/factory
Copy link

7.5.1.60.1. Summary
Copy link

Topology Data Model Factory Extension

7.5.1.60.2. Properties
Copy link

Expand

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.

7.5.1.61. console.topology/decorator/provider
Copy link

7.5.1.61.1. Summary
Copy link

Topology Decorator Provider Extension

7.5.1.61.2. Properties
Copy link

Expand

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

7.5.1.62. console.topology/details/resource-alert
Copy link

7.5.1.62.1. Summary
Copy link

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

7.5.1.62.2. Properties
Copy link

Expand

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

7.5.1.63. console.topology/details/resource-link
Copy link

7.5.1.63.1. Summary
Copy link

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

7.5.1.63.2. Properties
Copy link

Expand

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

7.5.1.64. console.topology/details/tab
Copy link

7.5.1.64.1. Summary
Copy link

DetailsTab contributes a tab for the topology details panel.

7.5.1.64.2. Properties
Copy link

Expand

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` \| `string[]`	yes	Insert this item before the item referenced here. For arrays, the first one found in order is used.
`insertAfter`	`string` \| `string[]`	yes	Insert this item after the item referenced here. For arrays, the first one found in order is used. The `insertBefore` value takes precedence.

7.5.1.65. console.topology/details/tab-section
Copy link

7.5.1.65.1. Summary
Copy link

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

7.5.1.65.2. Properties
Copy link

Expand

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 if null or undefined renders in the topology sidebar.SDK component: <Section title=\{}>… padded area
`section`	`CodeRef<(element: GraphElement, renderNull?: () ⇒ null) ⇒ React.Component	undefined>`	no
@deprecated Fallback if no provider is defined. renderNull is a no-op already.	`insertBefore`	`string` \| `string[]`	yes
Insert this item before the item referenced here.For arrays, the first one found in order is used.	`insertAfter`	`string` \| `string[]`	yes

7.5.1.66. console.topology/display/filters
Copy link

7.5.1.66.1. Summary
Copy link

Topology Display Filters Extension

7.5.1.66.2. Properties
Copy link

Expand

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

7.5.1.67. console.topology/relationship/provider
Copy link

7.5.1.67.1. Summary
Copy link

Topology relationship provider connector extension

7.5.1.67.2. Properties
Copy link

Expand

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

7.5.1.68. console.user-preference/group
Copy link

7.5.1.68.1. Summary
Copy link

(not available)

7.5.1.68.2. Properties
Copy link

Expand

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

7.5.1.69. console.user-preference/item
Copy link

7.5.1.69.1. Summary
Copy link

(not available)

7.5.1.69.2. Properties
Copy link

Expand

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

7.5.1.70. console.yaml-template
Copy link

7.5.1.70.1. Summary
Copy link

YAML templates for editing resources via the yaml editor.

7.5.1.70.2. Properties
Copy link

Expand

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.

7.5.1.71. dev-console.add/action
Copy link

7.5.1.71.1. Summary
Copy link

(not available)

7.5.1.71.2. Properties
Copy link

Expand

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 the visibility or enablement of the action.

7.5.1.72. dev-console.add/action-group
Copy link

7.5.1.72.1. Summary
Copy link

(not available)

7.5.1.72.2. Properties
Copy link

Expand

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

7.5.1.73. dev-console.import/environment
Copy link

7.5.1.73.1. Summary
Copy link

(not available)

7.5.1.73.2. Properties
Copy link

Expand

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

7.5.1.74. console.page/resource/tab
Copy link

7.5.1.74.1. Summary [DEPRECATED]
Copy link

Deprecated. Use console.tab/horizontalNav instead. Adds a new resource tab page to Console router.

7.5.1.74.2. Properties
Copy link

Expand

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.

7.5.2. Troubleshooting your dynamic plugin
Copy link

Refer to this list of troubleshooting tips if you run into issues loading your plugin.

Verify that you have enabled your plugin in the console Operator configuration and your plugin name is the output by running the following command:
```
oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
```
```
$ oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
```
Copy to Clipboard Toggle word wrap
- Verify the enabled plugins on the status card of the Overview page in the Administrator perspective. You must refresh your browser if the plugin was recently enabled.
Verify your plugin service is healthy by:
- Verifying your plugin pod status is running and your containers are ready.
- Verifying the service label selector matches the pod and the target port is correct.
- Using the curl command with the plugin-manifest.json from the service in a terminal on the console pod or another pod on the cluster.
Verify your ConsolePlugin resource name (consolePlugin.name) matches the plugin name used in package.json.
Verify your service name, namespace, port, and path are declared correctly in the ConsolePlugin resource.
Verify your plugin service uses HTTPS and service serving certificates.
Verify any certificates or connection errors in the console pod logs.
Verify the feature flag your plugin relies on is not disabled.
Verify your plugin does not have any consolePlugin.dependencies in package.json that are not met.
- This can include console version dependencies or dependencies on other plugins. Filter the JS console in your browser for your plugin’s name to see messages that are logged.
Verify there are no typographical errors in the navigation extension perspective or section IDs.
- Your plugin might be loaded, but navigation items can be missing if IDs are incorrect. Try navigating to a plugin page directly by editing the URL.
Verify there are no network policies that are blocking traffic from the console pod to your plugin service.
- If necessary, adjust network policies to allow console pods in the openshift-console namespace to make requests to your service.
Verify the list of dynamic plugins to be loaded in your browser in the Console tab of the developer tools browser.
- Evaluate window.SERVER_FLAGS.consolePlugins to see the dynamic plugin on the Console front end.

Chapter 7. Dynamic plugins

7.1. Overview of dynamic pluginsCopy linkLink copied to clipboard!

7.1.1. About dynamic pluginsCopy linkLink copied to clipboard!

7.1.2. Key featuresCopy linkLink copied to clipboard!

7.1.3. General guidelinesCopy linkLink copied to clipboard!

PatternFly 4 guidelines

7.2. Getting started with dynamic pluginsCopy linkLink copied to clipboard!

7.2.1. Dynamic plugin developmentCopy linkLink copied to clipboard!

7.3. Deploy your plugin on a clusterCopy linkLink copied to clipboard!

7.3.1. Build an image with DockerCopy linkLink copied to clipboard!

7.3.2. Deploy your plugin on a clusterCopy linkLink copied to clipboard!

7.3.3. Disabling your plugin in the browserCopy linkLink copied to clipboard!

7.4. Dynamic plugin exampleCopy linkLink copied to clipboard!

7.4.1. Adding a tab to the pods pageCopy linkLink copied to clipboard!

7.5. Dynamic plugin referenceCopy linkLink copied to clipboard!

7.5.1. Dynamic plugin extension typesCopy linkLink copied to clipboard!

7.5.1.1. console.action/filterCopy linkLink copied to clipboard!

7.5.1.1.1. SummaryCopy linkLink copied to clipboard!

7.5.1.1.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.2. console.action/groupCopy linkLink copied to clipboard!

7.5.1.2.1. SummaryCopy linkLink copied to clipboard!

7.5.1.2.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.3. console.action/providerCopy linkLink copied to clipboard!

7.5.1.3.1. SummaryCopy linkLink copied to clipboard!

7.5.1.3.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.4. console.action/resource-providerCopy linkLink copied to clipboard!

7.5.1.4.1. SummaryCopy linkLink copied to clipboard!

7.5.1.4.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.5. console.alert-actionCopy linkLink copied to clipboard!

7.5.1.5.1. SummaryCopy linkLink copied to clipboard!

7.5.1.5.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.6. console.catalog/item-filterCopy linkLink copied to clipboard!

7.5.1.6.1. SummaryCopy linkLink copied to clipboard!

7.5.1.6.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.7. console.catalog/item-metadataCopy linkLink copied to clipboard!

7.5.1.7.1. SummaryCopy linkLink copied to clipboard!

7.5.1.7.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.8. console.catalog/item-providerCopy linkLink copied to clipboard!

7.5.1.8.1. SummaryCopy linkLink copied to clipboard!

7.5.1.8.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.9. console.catalog/item-typeCopy linkLink copied to clipboard!

7.5.1.9.1. SummaryCopy linkLink copied to clipboard!

7.5.1.9.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.10. console.catalog/item-type-metadataCopy linkLink copied to clipboard!

7.5.1.10.1. SummaryCopy linkLink copied to clipboard!

7.5.1.10.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.11. console.cluster-overview/inventory-itemCopy linkLink copied to clipboard!

7.5.1.11.1. SummaryCopy linkLink copied to clipboard!

7.5.1.11.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.12. console.cluster-overview/multiline-utilization-itemCopy linkLink copied to clipboard!

7.5.1.12.1. SummaryCopy linkLink copied to clipboard!

7.5.1.12.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.13. console.cluster-overview/utilization-itemCopy linkLink copied to clipboard!

7.5.1.13.1. SummaryCopy linkLink copied to clipboard!

7.5.1.13.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.14. console.context-providerCopy linkLink copied to clipboard!

7.5.1.14.1. SummaryCopy linkLink copied to clipboard!

7.5.1.14.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.15. console.dashboards/cardCopy linkLink copied to clipboard!

7.5.1.15.1. SummaryCopy linkLink copied to clipboard!

7.5.1.15.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.16. console.dashboards/overview/activity/resourceCopy linkLink copied to clipboard!

7.5.1.16.1. SummaryCopy linkLink copied to clipboard!

7.5.1.16.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.17. console.dashboards/overview/detail/itemCopy linkLink copied to clipboard!

7.5.1.17.1. SummaryCopy linkLink copied to clipboard!

7.5.1.17.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.18. console.dashboards/overview/health/operatorCopy linkLink copied to clipboard!

7.5.1.18.1. SummaryCopy linkLink copied to clipboard!

7.5.1.18.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.19. console.dashboards/overview/health/prometheusCopy linkLink copied to clipboard!

7.5.1.19.1. SummaryCopy linkLink copied to clipboard!

7.5.1.19.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.20. console.dashboards/overview/health/resourceCopy linkLink copied to clipboard!

7.5.1.20.1. SummaryCopy linkLink copied to clipboard!

7.5.1.20.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.21. console.dashboards/overview/health/urlCopy linkLink copied to clipboard!

7.5.1.21.1. SummaryCopy linkLink copied to clipboard!

7.5.1.21.2. PropertiesCopy linkLink copied to clipboard!

7.5.1.22. console.dashboards/overview/inventory/itemCopy linkLink copied to clipboard!

7.1. Overview of dynamic plugins
Copy link

7.1.1. About dynamic plugins
Copy link

7.1.2. Key features
Copy link

7.1.3. General guidelines
Copy link

7.2. Getting started with dynamic plugins
Copy link

7.2.1. Dynamic plugin development
Copy link

7.3. Deploy your plugin on a cluster
Copy link

7.3.1. Build an image with Docker
Copy link

7.3.2. Deploy your plugin on a cluster
Copy link

7.3.3. Disabling your plugin in the browser
Copy link

7.4. Dynamic plugin example
Copy link

7.4.1. Adding a tab to the pods page
Copy link

7.5. Dynamic plugin reference
Copy link

7.5.1. Dynamic plugin extension types
Copy link

7.5.1.1. console.action/filter
Copy link

7.5.1.1.1. Summary
Copy link

7.5.1.1.2. Properties
Copy link

7.5.1.2. console.action/group
Copy link

7.5.1.2.1. Summary
Copy link

7.5.1.2.2. Properties
Copy link

7.5.1.3. console.action/provider
Copy link

7.5.1.3.1. Summary
Copy link

7.5.1.3.2. Properties
Copy link

7.5.1.4. console.action/resource-provider
Copy link

7.5.1.4.1. Summary
Copy link

7.5.1.4.2. Properties
Copy link

7.5.1.5. console.alert-action
Copy link

7.5.1.5.1. Summary
Copy link

7.5.1.5.2. Properties
Copy link

7.5.1.6. console.catalog/item-filter
Copy link

7.5.1.6.1. Summary
Copy link

7.5.1.6.2. Properties
Copy link

7.5.1.7. console.catalog/item-metadata
Copy link

7.5.1.7.1. Summary
Copy link

7.5.1.7.2. Properties
Copy link

7.5.1.8. console.catalog/item-provider
Copy link

7.5.1.8.1. Summary
Copy link

7.5.1.8.2. Properties
Copy link

7.5.1.9. console.catalog/item-type
Copy link

7.5.1.9.1. Summary
Copy link

7.5.1.9.2. Properties
Copy link

7.5.1.10. console.catalog/item-type-metadata
Copy link

7.5.1.10.1. Summary
Copy link

7.5.1.10.2. Properties
Copy link

7.5.1.11. console.cluster-overview/inventory-item
Copy link

7.5.1.11.1. Summary
Copy link

7.5.1.11.2. Properties
Copy link

7.5.1.12. console.cluster-overview/multiline-utilization-item
Copy link

7.5.1.12.1. Summary
Copy link

7.5.1.12.2. Properties
Copy link

7.5.1.13. console.cluster-overview/utilization-item
Copy link

7.5.1.13.1. Summary
Copy link

7.5.1.13.2. Properties
Copy link

7.5.1.14. console.context-provider
Copy link

7.5.1.14.1. Summary
Copy link

7.5.1.14.2. Properties
Copy link

7.5.1.15. console.dashboards/card
Copy link

7.5.1.15.1. Summary
Copy link

7.5.1.15.2. Properties
Copy link

7.5.1.16. console.dashboards/overview/activity/resource
Copy link

7.5.1.16.1. Summary
Copy link

7.5.1.16.2. Properties
Copy link

7.5.1.17. console.dashboards/overview/detail/item
Copy link

7.5.1.17.1. Summary
Copy link

7.5.1.17.2. Properties
Copy link

7.5.1.18. console.dashboards/overview/health/operator
Copy link

7.5.1.18.1. Summary
Copy link

7.5.1.18.2. Properties
Copy link

7.5.1.19. console.dashboards/overview/health/prometheus
Copy link

7.5.1.19.1. Summary
Copy link

7.5.1.19.2. Properties
Copy link

7.5.1.20. console.dashboards/overview/health/resource
Copy link

7.5.1.20.1. Summary
Copy link

7.5.1.20.2. Properties
Copy link

7.5.1.21. console.dashboards/overview/health/url
Copy link

7.5.1.21.1. Summary
Copy link

7.5.1.21.2. Properties
Copy link

7.5.1.22. console.dashboards/overview/inventory/item
Copy link

7.5.1.22.1. Summary
Copy link

7.5.1.22.2. Properties
Copy link