Chapter 7. Dynamic plugins 7.1. Overview of dynamic plugins 7.1.1. About dynamic plugins 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 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 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>; }; 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 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 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. USD yarn install After installing, run the following command to start Yarn. USD yarn run start In another terminal window, login to the OpenShift Container Platform through the CLI. USD oc login Run the OpenShift Container Platform web console in a container connected to the cluster you have logged into by running the following command: USD yarn run start-console 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 You can deploy the plugin to a OpenShift Container Platform cluster. 7.3.1. Build an image with Docker 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: USD docker build -t quay.io/my-repositroy/my-plugin:latest . Optional: If you want to test your image, run the following command: USD docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest Push the image by running the following command: USD docker push quay.io/my-repository/my-plugin:latest 7.3.2. Deploy your plugin on a cluster 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: USD helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location 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 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 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 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 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", 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 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": { "USDcodeRef": "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 plugin.</p> ); } 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: USD helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location 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 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 7.5.1.1. console.action/filter 7.5.1.1.1. Summary ActionFilter can be used to filter an action. 7.5.1.1.2. 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. 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 7.5.1.2.1. Summary ActionGroup contributes an action group that can also be a submenu. 7.5.1.2.2. 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 | 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 7.5.1.3.1. Summary ActionProvider contributes a hook that returns list of actions for specific context. 7.5.1.3.2. 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. 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 7.5.1.4.1. Summary ResourceActionProvider contributes a hook that returns list of actions for specific resource model. 7.5.1.4.2. 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 7.5.1.5. console.alert-action 7.5.1.5.1. Summary (not available) 7.5.1.5.2. Properties Name Value Type Optional Description alert string no text string no action CodeRef<(alert: any) ⇒ void> no 7.5.1.6. console.catalog/item-filter 7.5.1.6.1. Summary (not available) 7.5.1.6.2. Properties 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 7.5.1.7.1. Summary (not available) 7.5.1.7.2. Properties 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 7.5.1.8.1. Summary (not available) 7.5.1.8.2. Properties 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 7.5.1.9.1. Summary (not available) 7.5.1.9.2. Properties 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 7.5.1.10.1. Summary (not available) 7.5.1.10.2. 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. 7.5.1.11. console.cluster-overview/inventory-item 7.5.1.11.1. Summary Adds a new inventory item into cluster overview page. 7.5.1.11.2. Properties 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 7.5.1.12.1. Summary Adds a new cluster overview multi-line utilization item. 7.5.1.12.2. 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 7.5.1.13. console.cluster-overview/utilization-item 7.5.1.13.1. Summary Adds a new cluster overview utilization item. 7.5.1.13.2. 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 7.5.1.14. console.context-provider 7.5.1.14.1. Summary Adds a new React context provider to the web console application root. 7.5.1.14.2. Properties 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 7.5.1.15.1. Summary Adds a new dashboard card. 7.5.1.15.2. 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 yes Card's vertical span in the column. Ignored for small screens; defaults to 12 . 7.5.1.16. console.dashboards/overview/activity/resource 7.5.1.16.1. Summary 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 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 7.5.1.17.1. Summary Adds an item to the Details card of Overview dashboard 7.5.1.17.2. Properties 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 7.5.1.18.1. Summary 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 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 7.5.1.19.1. Summary Adds a health subsystem to the status card of Overview dashboard where the source of status is Prometheus. 7.5.1.19.2. 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 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 7.5.1.20.1. Summary 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 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 7.5.1.21.1. Summary 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 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 7.5.1.22.1. Summary Adds a resource tile to the overview inventory card. 7.5.1.22.2. 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. 7.5.1.23. console.dashboards/overview/inventory/item/group 7.5.1.23.1. Summary Adds an inventory status group. 7.5.1.23.2. Properties 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 7.5.1.24.1. Summary Replaces an overview inventory card. 7.5.1.24.2. 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. 7.5.1.25. console.dashboards/overview/prometheus/activity/resource 7.5.1.25.1. Summary 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 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 7.5.1.26.1. Summary Adds a resource tile to the project overview inventory card. 7.5.1.26.2. 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. 7.5.1.27. console.dashboards/tab 7.5.1.27.1. Summary Adds a new dashboard tab, placed after the Overview tab. 7.5.1.27.2. 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 Navigation section to which the tab belongs to. title string no The title of the tab. 7.5.1.28. console.file-upload 7.5.1.28.1. Summary (not available) 7.5.1.28.2. Properties 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 7.5.1.29.1. Summary Gives full control over the web console feature flags. 7.5.1.29.2. Properties Name Value Type Optional Description handler CodeRef<FeatureFlagHandler> no Used to set or unset arbitrary feature flags. 7.5.1.30. console.flag/hookProvider 7.5.1.30.1. Summary Gives full control over the web console feature flags with hook handlers. 7.5.1.30.2. Properties Name Value Type Optional Description handler CodeRef<FeatureFlagHandler> no Used to set or unset arbitrary feature flags. 7.5.1.31. console.flag/model 7.5.1.31.1. Summary Adds a new web console feature flag driven by the presence of a CRD on the cluster. 7.5.1.31.2. 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 . 7.5.1.32. console.global-config 7.5.1.32.1. Summary (not available) 7.5.1.32.2. 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. 7.5.1.33. console.model-metadata 7.5.1.33.1. Summary Customize the display of models by overriding values retrieved and generated through API discovery. 7.5.1.33.2. 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 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 7.5.1.34.1. Summary (not available) 7.5.1.34.2. 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 | 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 7.5.1.35.1. Summary (not available) 7.5.1.35.2. Properties 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 7.5.1.36.1. Summary (not available) 7.5.1.36.2. Properties 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 7.5.1.37.1. Summary (not available) 7.5.1.37.2. 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 | 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 7.5.1.38.1. Summary (not available) 7.5.1.38.2. 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 | 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 7.5.1.39.1. Summary Adds a new resource details page to the web console router. 7.5.1.39.2. 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. 7.5.1.40. console.page/resource/list 7.5.1.40.1. Summary Adds new resource list page to Console router. 7.5.1.40.2. 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. 7.5.1.41. console.page/route 7.5.1.41.1. Summary Adds a new page to the web console router. See React Router . 7.5.1.41.2. 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 | 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 7.5.1.42.1. Summary 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 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 7.5.1.43.1. Summary (not available) 7.5.1.43.2. 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 7.5.1.44. console.project-overview/inventory-item 7.5.1.44.1. Summary Adds a new inventory item into the Project Overview page. 7.5.1.44.2. Properties 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 7.5.1.45.1. Summary Adds a new project overview utilization item. 7.5.1.45.2. 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 the top consumer popover instead of plain value. 7.5.1.46. console.pvc/alert 7.5.1.46.1. Summary (not available) 7.5.1.46.2. Properties Name Value Type Optional Description alert CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>> no The alert component. 7.5.1.47. console.pvc/create-prop 7.5.1.47.1. Summary (not available) 7.5.1.47.2. Properties 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 7.5.1.48.1. Summary (not available) 7.5.1.48.2. 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. 7.5.1.49. console.pvc/status 7.5.1.49.1. Summary (not available) 7.5.1.49.2. Properties 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 7.5.1.50.1. Summary Adds new reducer to Console Redux store which operates on plugins.<scope> substate. 7.5.1.50.2. 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. 7.5.1.51. console.resource/create 7.5.1.51.1. Summary (not available) 7.5.1.51.2. 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 7.5.1.52. console.storage-provider 7.5.1.52.1. Summary (not available) 7.5.1.52.2. Properties Name Value Type Optional Description name string no Component CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>> no 7.5.1.53. console.tab/horizontalNav 7.5.1.53.1. Summary (not available) 7.5.1.53.2. 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. 7.5.1.54. console.telemetry/listener 7.5.1.54.1. Summary (not available) 7.5.1.54.2. Properties Name Value Type Optional Description listener CodeRef<TelemetryEventListener> no Listen for telemetry events 7.5.1.55. console.topology/adapter/build 7.5.1.55.1. Summary BuildAdapter contributes an adapter to adapt element to data that can be used by the Build component. 7.5.1.55.2. Properties Name Value Type Optional Description adapt `CodeRef<(element: GraphElement) ⇒ AdapterDataType<BuildConfigData> undefined>` no 7.5.1.56. console.topology/adapter/network 7.5.1.56.1. Summary NetworkAdapater contributes an adapter to adapt element to data that can be used by the Networking component. 7.5.1.56.2. Properties Name Value Type Optional Description adapt `CodeRef<(element: GraphElement) ⇒ NetworkAdapterType undefined>` no 7.5.1.57. console.topology/adapter/pod 7.5.1.57.1. Summary PodAdapter contributes an adapter to adapt element to data that can be used by the Pod component. 7.5.1.57.2. Properties Name Value Type Optional Description adapt `CodeRef<(element: GraphElement) ⇒ AdapterDataType<PodsAdapterDataType> undefined>` no 7.5.1.58. console.topology/component/factory 7.5.1.58.1. Summary Getter for a ViewComponentFactory . 7.5.1.58.2. Properties Name Value Type Optional Description getFactory CodeRef<ViewComponentFactory> no Getter for a ViewComponentFactory . 7.5.1.59. console.topology/create/connector 7.5.1.59.1. Summary Getter for the create connector function. 7.5.1.59.2. Properties Name Value Type Optional Description getCreateConnector CodeRef<CreateConnectionGetter> no Getter for the create connector function. 7.5.1.60. console.topology/data/factory 7.5.1.60.1. Summary Topology Data Model Factory Extension 7.5.1.60.2. 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. 7.5.1.61. console.topology/decorator/provider 7.5.1.61.1. Summary Topology Decorator Provider Extension 7.5.1.61.2. Properties Name Value Type Optional Description id string no priority number no quadrant TopologyQuadrant no decorator CodeRef<TopologyDecoratorGetter> no 7.5.1.62. console.topology/details/resource-alert 7.5.1.62.1. Summary DetailsResourceAlert contributes an alert for specific topology context or graph element. 7.5.1.62.2. Properties 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 7.5.1.63.1. Summary DetailsResourceLink contributes a link for specific topology context or graph element. 7.5.1.63.2. Properties 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 7.5.1.64.1. Summary DetailsTab contributes a tab for the topology details panel. 7.5.1.64.2. 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 | 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 7.5.1.65.1. Summary DetailsTabSection contributes a section for a specific tab in the topology details panel. 7.5.1.65.2. 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 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 7.5.1.66.1. Summary Topology Display Filters Extension 7.5.1.66.2. Properties Name Value Type Optional Description getTopologyFilters CodeRef<() ⇒ TopologyDisplayOption[]> no applyDisplayOptions CodeRef<TopologyApplyDisplayOptions> no 7.5.1.67. console.topology/relationship/provider 7.5.1.67.1. Summary Topology relationship provider connector extension 7.5.1.67.2. Properties Name Value Type Optional Description provides CodeRef<RelationshipProviderProvides> no tooltip string no create CodeRef<RelationshipProviderCreate> no priority number no 7.5.1.68. console.user-preference/group 7.5.1.68.1. Summary (not available) 7.5.1.68.2. 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 7.5.1.69. console.user-preference/item 7.5.1.69.1. Summary (not available) 7.5.1.69.2. 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 7.5.1.70. console.yaml-template 7.5.1.70.1. Summary YAML templates for editing resources via the yaml editor. 7.5.1.70.2. 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. 7.5.1.71. dev-console.add/action 7.5.1.71.1. Summary (not available) 7.5.1.71.2. 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 the visibility or enablement of the action. 7.5.1.72. dev-console.add/action-group 7.5.1.72.1. Summary (not available) 7.5.1.72.2. 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 7.5.1.73. dev-console.import/environment 7.5.1.73.1. Summary (not available) 7.5.1.73.2. 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 7.5.1.74. console.page/resource/tab 7.5.1.74.1. Summary [DEPRECATED] Deprecated. Use console.tab/horizontalNav instead. Adds a new resource tab page to Console router. 7.5.1.74.2. 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. 7.5.2. Troubleshooting your dynamic plugin 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: USD oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}' 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. Additional resources Understanding service serving certificates

Commands:
conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
yarn install
yarn run start
oc login
yarn run start-console
docker build -t quay.io/my-repositroy/my-plugin:latest .
docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest
docker push quay.io/my-repository/my-plugin:latest
helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
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
"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": "/*" } }
{ "type": "console.tab/horizontalNav", "properties": { "page": { "name": "Example Tab", "href": "example" }, "model": { "group": "core", "version": "v1", "kind": "Pod" }, "component": { "USDcodeRef": "ExampleTab" } } }
"exposedModules": { "ExamplePage": "./components/ExamplePage", "ExampleTab": "./components/ExampleTab" }
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> ); }
helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'