---
title: Dynamic plugin reference
---

# Dynamic plugin reference {#dynamic-plugins-reference_{context}}

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

## Dynamic plugin extension types {#dynamic-plugin-sdk-extensions_dynamic-plugins-reference}

### `console.action/filter` {#_consoleactionfilter}

`ActionFilter` can be used to filter an action.

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

### `console.action/group` {#_consoleactiongroup}

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

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

### `console.action/provider` {#_consoleactionprovider}

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

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

### `console.action/resource-provider` {#_consoleactionresource-provider}

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

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

### `console.alert-action` {#_consolealert-action}

This extension can be used to trigger a specific action when a specific Prometheus alert is observed by the Console based on its `rule.name` value.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `alert` | `string` | no | Alert name as defined by `alert.rule.name` property |
| `text` | `string` | no |  |
| `action` | `CodeRef<(alert: any) => void>` | no | Function to perform side effect |

### `console.catalog/item-filter` {#_consolecatalogitem-filter}

This extension can be used for plugins to contribute a handler that can filter specific catalog items. For example, the plugin can contribute a filter that filters helm charts from specific provider.

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

### `console.catalog/item-metadata` {#_consolecatalogitem-metadata}

This extension can be used to contribute a provider that adds extra metadata to specific catalog items.

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

### `console.catalog/item-provider` {#_consolecatalogitem-provider}

This extension allows plugins to contribute a provider for a catalog item type. For example, a Helm Plugin can add a provider that fetches all the Helm Charts. This extension can also be used by other plugins to add more items to a specific catalog item type.

|  |  |  |  |
| --- | --- | --- | --- |
| 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 can override catalog items provided by other providers. |

### `console.catalog/item-type` {#_consolecatalogitem-type}

This extension allows plugins to contribute a new type of catalog item. For example, a Helm plugin can define a new catalog item type as HelmCharts that it wants to contribute to the Developer Catalog.

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

### `console.catalog/item-type-metadata` {#_consolecatalogitem-type-metadata}

This extension allows plugins to contribute extra metadata such as custom filters or groupings for any catalog item type. For example, a plugin can attach a custom filter for HelmCharts that can filter based on chart provider.

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

### `console.cluster-overview/inventory-item` {#_consolecluster-overviewinventory-item}

Adds a new inventory item into cluster overview page.

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

### `console.cluster-overview/multiline-utilization-item` {#_consolecluster-overviewmultiline-utilization-item}

Adds a new cluster overview multi-line utilization item.

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

### `console.cluster-overview/utilization-item` {#_consolecluster-overviewutilization-item}

Adds a new cluster overview utilization item.

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

### `console.context-provider` {#_consolecontext-provider}

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

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

### `console.create-project-modal` {#_consolecreate-project-modal}

This extension can be used to pass a component that will be rendered in place of the standard create project modal.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `component` | `CodeRef<ModalComponent<CreateProjectModalProps>>` | no | A component to render in place of the create project modal. |

### `console.dashboards/card` {#_consoledashboardscard}

Adds a new dashboard card.

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

### `console.dashboards/custom/overview/detail/item` {#_consoledashboardscustomoverviewdetailitem}

Adds an item to the Details card of Overview Dashboard.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `title` | `string` | no | Details card title |
| `component` | `CodeRef<React.ComponentType<{}>>` | no | The value, rendered by the OverviewDetailItem component |
| `valueClassName` | `string` | yes | Value for a className |
| `isLoading` | `CodeRef<() => boolean>` | yes | Function returning the loading state of the component |
| `error` | `CodeRef<() => string>` | yes | Function returning errors to be displayed by the component |

### `console.dashboards/overview/activity/resource` {#_consoledashboardsoverviewactivityresource}

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

|  |  |  |  |
| --- | --- | --- | --- |
| 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 that determines whether the given resource represents the action. If not defined, every resource represents activity. |
| `getTimestamp` | `CodeRef<(resource: T) => Date>` | yes | Timestamp for the given action, which will be used for ordering. |

### `console.dashboards/overview/health/operator` {#_consoledashboardsoverviewhealthoperator}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `title` | `string` | no | Title of Operators section in the menu. |
| `resources` | `CodeRef<FirehoseResource[]>` | no | Kubernetes resources that 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. |

### `console.dashboards/overview/health/prometheus` {#_consoledashboardsoverviewhealthprometheus}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `title` | `string` | no | The display name of the subsystem. |
| `queries` | `string[]` | no | The Prometheus queries. |
| `healthHandler` | `CodeRef<PrometheusHealthHandler>` | no | Resolves the subsystem’s health. |
| `additionalResource` | `CodeRef<FirehoseResource>` | yes | Additional resource that will be fetched and passed to `healthHandler`. |
| `popupComponent` | `CodeRef<React.ComponentType<PrometheusHealthPopupProps>>` | yes | Loader for menu content. If defined, a health item is represented as a link, which opens a 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. |

### `console.dashboards/overview/health/resource` {#_consoledashboardsoverviewhealthresource}

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

|  |  |  |  |
| --- | --- | --- | --- |
| 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 | Resolves the subsystem’s health. |
| `popupComponent` | `CodeRef<WatchK8sResults<T>>` | yes | Loader for menu content. If defined, a health item is represented as a link, which opens a menu with the given content. |
| `popupTitle` | `string` | yes | The title of the popover. |

### `console.dashboards/overview/health/url` {#_consoledashboardsoverviewhealthurl}

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

|  |  |  |  |
| --- | --- | --- | --- |
| 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 | Resolves the subsystem’s health. |
| `additionalResource` | `CodeRef<FirehoseResource>` | yes | Additional resource that will be fetched and passed to `healthHandler`. |
| `popupComponent` | `CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: FirehoseResult<R>; }>>` | yes | Loader for pop-up content. If defined, a health item will be represented as a link which opens a pop-up with given content. |
| `popupTitle` | `string` | yes | The title of the popover. |

### `console.dashboards/overview/inventory/item` {#_consoledashboardsoverviewinventoryitem}

Adds a resource tile to the overview inventory card.

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

### `console.dashboards/overview/inventory/item/group` {#_consoledashboardsoverviewinventoryitemgroup}

Adds an inventory status group.

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

### `console.dashboards/overview/inventory/item/replacement` {#_consoledashboardsoverviewinventoryitemreplacement}

Replaces an overview inventory card.

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

### `console.dashboards/overview/prometheus/activity/resource` {#_consoledashboardsoverviewprometheusactivityresource}

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

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

### `console.dashboards/project/overview/item` {#_consoledashboardsprojectoverviewitem}

Adds a resource tile to the project overview inventory card.

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

### `console.dashboards/tab` {#_consoledashboardstab}

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

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

### `console.file-upload` {#_consolefile-upload}

This extension can be used to provide a handler for the file drop action on specific file extensions.

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

### `console.flag` {#_consoleflag}

Gives full control over the web console feature flags.

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

### `console.flag/hookProvider` {#_consoleflaghookprovider}

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

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

### `console.flag/model` {#_consoleflagmodel}

Adds a new web console feature flag driven by the presence of a `CustomResourceDefinition` (CRD) object on the cluster.

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

### `console.global-config` {#_consoleglobal-config}

This extension identifies a resource used to manage the configuration of the cluster. A link to the resource will be added to the **Administration** → **Cluster Settings** → **Configuration** page.

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

### `console.model-metadata` {#_consolemodel-metadata}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `model` | `ExtensionK8sGroupModel` | no | The model to customize. Can 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. |

### `console.navigation/href` {#_consolenavigationhref}

This extension can be used to contribute a navigation item that points to a specific link in the UI.

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

### `console.navigation/resource-cluster` {#_consolenavigationresource-cluster}

This extension can be used to contribute a navigation item that points to a cluster resource details page. The K8s model of that resource can be used to define the navigation item.

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

### `console.navigation/resource-ns` {#_consolenavigationresource-ns}

This extension can be used to contribute a navigation item that points to a namespaced resource details page. The K8s model of that resource can be used to define the navigation item.

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

### `console.navigation/section` {#_consolenavigationsection}

This extension can be used to define a new section of navigation items in the navigation tab.

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

### `console.navigation/separator` {#_consolenavigationseparator}

This extension can be used to add a separator between navigation items in the navigation.

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

### `console.page/resource/details` {#_consolepageresourcedetails}

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

### `console.page/resource/list` {#_consolepageresourcelist}

Adds new resource list page to Console router.

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

### `console.page/route` {#_consolepageroute}

Adds a new page to the web console router. For more information, see React Router, linked in Additional resources.

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

### `console.page/route/standalone` {#_consolepageroutestandalone}

Adds a new standalone page, rendered outside the common page layout, to the web console router. For more information, see React Router, linked in Additional resources.

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

### `console.perspective` {#_consoleperspective}

This extension contributes a new perspective to the console, which enables customization of the navigation menu.

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

### `console.project-overview/inventory-item` {#_consoleproject-overviewinventory-item}

Adds a new inventory item into the **Project Overview** page.

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

### `console.project-overview/utilization-item` {#_consoleproject-overviewutilization-item}

Adds a new project overview utilization item.

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

### `console.pvc/alert` {#_consolepvcalert}

This extension can be used to contribute custom alerts on the PVC details page.

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

### `console.pvc/create-prop` {#_consolepvccreate-prop}

This extension can be used to specify additional properties that will be used when creating PVC resources on the PVC list page.

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

### `console.pvc/delete` {#_consolepvcdelete}

This extension allows hooking into deleting PVC resources. It can provide an alert with additional information and custom PVC delete logic.

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

### `console.pvc/status` {#_consolepvcstatus}

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

### `console.redux-reducer` {#_consoleredux-reducer}

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

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

### `console.resource/create` {#_consoleresourcecreate}

This extension allows plugins to provide a custom component (i.e., wizard or form) for specific resources, which will be rendered, when users try to create a new resource instance.

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

### `console.resource/details-item` {#_consoleresourcedetails-item}

Adds a new details item to the default resource summary on the details page.

<table>
<thead>
<tr>
  <th>Name</th>
  <th>Value Type</th>
  <th>Optional</th>
  <th>Description</th>
</tr>
</thead>
<tbody>
<tr>
  <td><code>model</code></td>
  <td><code>ExtensionK8sModel</code></td>
  <td>no</td>
  <td>The subject resource's API group, version, and kind.</td>
</tr>
<tr>
  <td><code>id</code></td>
  <td><code>string</code></td>
  <td>no</td>
  <td>A unique identifier.</td>
</tr>
<tr>
  <td><code>column</code></td>
  <td><code>DetailsItemColumn</code></td>
  <td>no</td>
  <td>Determines if the item will appear in the 'left' or 'right' column of the resource summary on the details page. Default: 'right'</td>
</tr>
<tr>
  <td><code>title</code></td>
  <td><code>string</code></td>
  <td>no</td>
  <td>The details item title.</td>
</tr>
<tr>
  <td><code>path</code></td>
  <td><code>string</code></td>
  <td>yes</td>
  <td>An optional, fully-qualified path to a resource property to used as the details item value. You can directly render only primitive type values, linked in Additional resources. Use the component property to handle other data types.</td>
</tr>
<tr>
  <td><code>component</code></td>
  <td><code>CodeRef&lt;React.ComponentType&lt;DetailsItem ComponentProps&lt;K8sResourceCommon, any>>></code> |yes</td>
  <td>An optional React component that will render the details item value.</td>
  <td><code>sortWeight</code></td>
</tr>
<tr>
  <td><code>number</code></td>
  <td>yes</td>
  <td>An optional sort weight, relative to all other details items in the same column. You can represent it by using any valid JavaScript Number, linked in Additional resources. Items in each column are sorted independently, lowest to highest. Items without sort weights are sorted after items with sort weights.</td>
</tr>
</tbody>
</table>

### `console.storage-class/provisioner` {#_consolestorage-classprovisioner}

Adds a new storage class provisioner as an option during storage class creation.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `CSI` | `ProvisionerDetails` | yes | Container Storage Interface provisioner type |
| `OTHERS` | `ProvisionerDetails` | yes | Other provisioner type |

### `console.storage-provider` {#_consolestorage-provider}

This extension can be used to contribute a new storage provider to select, when attaching storage and a provider specific component.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `name` | `string` | no | Displayed name of the provider. |
| `Component` | `CodeRef<React.ComponentType<Partial<RouteComponentProps<{}, StaticContext, any>>>>` | no | Provider specific component to render. |

### `console.tab` {#_consoletab}

Adds a tab to a horizontal nav matching the `contextId`.

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `contextId` | `string` | no | Context ID assigned to the horizontal nav in which the tab will be injected. Possible values: `dev-console-observe` |
| `name` | `string` | no | The display label of the tab |
| `href` | `string` | no | The `href` appended to the existing URL |
| `component` | `CodeRef<React.ComponentType<PageComponentProps<K8sResourceCommon>>>` | no | Tab content component. |

### `console.tab/horizontalNav` {#_consoletabhorizontalnav}

This extension can be used to add a tab on the resource details page.

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

### `console.telemetry/listener` {#_consoletelemetrylistener}

This component can be used to register a listener function receiving telemetry events. These events include user identification, page navigation, and other application specific events. The listener can use this data for reporting and analytics purposes.

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

### `console.topology/adapter/build` {#_consoletopologyadapterbuild}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `adapt` | `CodeRef<(element: GraphElement) => AdapterDataType<BuildConfigData> \| undefined>` | no | Adapter to adapt element to data that can be used by Build component. |

### `console.topology/adapter/network` {#_consoletopologyadapternetwork}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `adapt` | `CodeRef<(element: GraphElement) => NetworkAdapterType \| undefined>` | no | Adapter to adapt element to data that can be used by Networking component. |

### `console.topology/adapter/pod` {#_consoletopologyadapterpod}

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

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `adapt` | `CodeRef<(element: GraphElement) => AdapterDataType<PodsAdapterDataType> \| undefined>` | no | Adapter to adapt element to data that can be used by Pod component. |

### `console.topology/component/factory` {#_consoletopologycomponentfactory}

Getter for a `ViewComponentFactory`.

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

### `console.topology/create/connector` {#_consoletopologycreateconnector}

Getter for the create connector function.

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

### `console.topology/data/factory` {#_consoletopologydatafactory}

Topology Data Model Factory Extension

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

### `console.topology/decorator/provider` {#_consoletopologydecoratorprovider}

Topology Decorator Provider Extension

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `id` | `string` | no | ID for topology decorator specific to the extension |
| `priority` | `number` | no | Priority for topology decorator specific to the extension |
| `quadrant` | `TopologyQuadrant` | no | Quadrant for topology decorator specific to the extension |
| `decorator` | `CodeRef<TopologyDecoratorGetter>` | no | Decorator specific to the extension |

### `console.topology/details/resource-alert` {#_consoletopologydetailsresource-alert}

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

|  |  |  |  |
| --- | --- | --- | --- |
| 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 | Hook to return the contents of the alert. |

### `console.topology/details/resource-link` {#_consoletopologydetailsresource-link}

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

|  |  |  |  |
| --- | --- | --- | --- |
| 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 | A higher priority factory will get the first chance to create the link. |

### `console.topology/details/tab` {#_consoletopologydetailstab}

`DetailsTab` contributes a tab for the topology details panel.

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

### `console.topology/details/tab-section` {#_consoletopologydetailstab-section}

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

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

### `console.topology/display/filters` {#_consoletopologydisplayfilters}

Topology Display Filters Extension

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `getTopologyFilters` | `CodeRef<() => TopologyDisplayOption[]>` | no | Getter for topology filters specific to the extension |
| `applyDisplayOptions` | `CodeRef<TopologyApplyDisplayOptions>` | no | Function to apply filters to the model |

### `console.topology/relationship/provider` {#_consoletopologyrelationshipprovider}

Topology relationship provider connector extension

|  |  |  |  |
| --- | --- | --- | --- |
| Name | Value Type | Optional | Description |
| `provides` | `CodeRef<RelationshipProviderProvides>` | no | Use to determine if a connection can be created between the source and target node |
| `tooltip` | `string` | no | A tooltip to show when connector operation is hovering over the drop target, for example, "Create a Visual Connector" |
| `create` | `CodeRef<RelationshipProviderCreate>` | no | A callback that creates a connection when a connector is dropped onto the target node |
| `priority` | `number` | no | Priority for relationship, higher will be preferred in case of multiple |

### `console.user-preference/group` {#_consoleuser-preferencegroup}

This extension can be used to add a group on the console user-preferences page. It will appear as a vertical tab option on the console user-preferences page.

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

### `console.user-preference/item` {#_consoleuser-preferenceitem}

This extension can be used to add an item to the user preferences group on the console user preferences page.

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

### `console.yaml-template` {#_consoleyaml-template}

YAML templates for editing resources via the YAML editor.

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

### `dev-console.add/action` {#_dev-consoleaddaction}

This extension allows plugins to contribute an add action item to the add page of developer perspective. For example, a Serverless plugin can add a new action item for adding serverless functions to the add page of developer console.

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

### `dev-console.add/action-group` {#_dev-consoleaddaction-group}

This extension allows plugins to contribute a group in the add page of developer console. Groups can be referenced by actions, which will be grouped together in the add action page based on their extension definition. For example, a Serverless plugin can contribute a Serverless group and together with multiple add actions.

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

### `dev-console.import/environment` {#_dev-consoleimportenvironment}

This extension can be used to specify extra build environment variable fields under the builder image selector in the developer console git import form. When set, the fields will override environment variables of the same name in the build section.

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

### `console.dashboards/overview/detail/item` {#_consoledashboardsoverviewdetailitem}

Deprecated: use `CustomOverviewDetailItem` type instead.

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

### `console.page/resource/tab` {#_consolepageresourcetab}

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

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

**Additional resources**
{._additional-resources}

- [React Router](https://v5.reactrouter.com/)
- [Primitive type](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)
- [JavaScript Number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type)

## Dynamic plugin API {#dynamic-plugin-api_dynamic-plugins-reference}

### `useActivePerspective` {#_useactiveperspective}

Hook that provides the currently active perspective and a callback for setting the active perspective. It returns a tuple containing the current active perspective and setter callback.

**Example**

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

### `GreenCheckCircleIcon` {#_greencheckcircleicon}

Component for displaying a checkmark circle icon.

**Example**

```tsx
<GreenCheckCircleIcon title="Healthy" />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `className` | (optional) additional class name for the component |
| `title` | (optional) icon title |
| `size` | (optional) icon size: (`sm`, `md`, `lg`, `xl`) |

### `RedExclamationCircleIcon` {#_redexclamationcircleicon}

Component for displaying an exclamation mark circle icon.

**Example**

```tsx
<RedExclamationCircleIcon title="Failed" />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `className` | (optional) additional class name for the component |
| `title` | (optional) icon title |
| `size` | (optional) icon size: (`sm`, `md`, `lg`, `xl`) |

### `YellowExclamationTriangleIcon` {#_yellowexclamationtriangleicon}

Component for displaying a triangle exclamation icon.

**Example**

```tsx
<YellowExclamationTriangleIcon title="Warning" />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `className` | (optional) additional class name for the component |
| `title` | (optional) icon title |
| `size` | (optional) icon size: (`sm`, `md`, `lg`, `xl`) |

### `BlueInfoCircleIcon` {#_blueinfocircleicon}

Component for displaying the `BlueInfoCircleIcon` info icon.

**Example**

```tsx
<BlueInfoCircleIcon title="Info" />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `className` | (optional) additional class name for the component |
| `title` | (optional) icon title |
| `size` | (optional) icon size: ('sm', 'md', 'lg', 'xl') |

### `ErrorStatus` {#_errorstatus}

Component for displaying an error status popover.

**Example**

```tsx
<ErrorStatus title={errorMsg} />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `title` | (optional) status text |
| `iconOnly` | (optional) if true, only displays icon |
| `noTooltip` | (optional) if true, tooltip is not displayed |
| `className` | (optional) additional class name for the component |
| `popoverTitle` | (optional) title for popover |

### `InfoStatus` {#_infostatus}

Component for displaying an information status popover.

**Example**

```tsx
<InfoStatus title={infoMsg} />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `title` | (optional) status text |
| `iconOnly` | (optional) if true, only displays icon |
| `noTooltip` | (optional) if true, tooltip is not displayed |
| `className` | (optional) additional class name for the component |
| `popoverTitle` | (optional) title for popover |

### `ProgressStatus` {#_progressstatus}

Component for displaying a progressing status popover.

**Example**

```tsx
<ProgressStatus title={progressMsg} />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `title` | (optional) status text |
| `iconOnly` | (optional) if true, only displays icon |
| `noTooltip` | (optional) if true, tooltip is not displayed |
| `className` | (optional) additional class name for the component |
| `popoverTitle` | (optional) title for popover |

### `SuccessStatus` {#_successstatus}

Component for displaying a success status popover.

**Example**

```tsx
<SuccessStatus title={successMsg} />
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `title` | (optional) status text |
| `iconOnly` | (optional) if true, only displays icon |
| `noTooltip` | (optional) if true, tooltip is not displayed |
| `className` | (optional) additional class name for the component |
| `popoverTitle` | (optional) title for popover |

### `checkAccess` {#_checkaccess}

Provides information about user access to a given resource. It returns an object with resource access information.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resourceAttributes` | resource attributes for access review |
| `impersonate` | impersonation details |

### `useAccessReview` {#_useaccessreview}

Hook that provides information about user access to a given resource. It returns an array with `isAllowed` and `loading` values.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resourceAttributes` | resource attributes for access review |
| `impersonate` | impersonation details |

### `useResolvedExtensions` {#_useresolvedextensions}

React hook for consuming Console extensions with resolved `CodeRef` properties. This hook accepts the same argument(s) as `useExtensions` hook and returns an adapted list of extension instances, resolving all code references within each extension’s properties.

Initially, the hook returns an empty array. After the resolution is complete, the React component is re-rendered with the hook returning an adapted list of extensions. When the list of matching extensions changes, the resolution is restarted. The hook continues to return the previous result until the resolution completes.

The hook’s result elements are guaranteed to be referentially stable across re-renders. It returns a tuple containing a list of adapted extension instances with resolved code references, a boolean flag indicating whether the resolution is complete, and a list of errors detected during the resolution.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `typeGuards` | A list of callbacks that each accept a dynamic plugin extension as an argument and return a boolean flag indicating whether or not the extension meets required type constraints |

### `HorizontalNav` {#_horizontalnav}

A component that creates a Navigation bar for a page. Routing is handled as part of the component. `console.tab/horizontalNav` can be used to add additional content to any horizontal navigation.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | The resource associated with this Navigation, an object of K8sResourceCommon type |
| `pages` | An array of page objects |
| `match` | match object provided by React Router |

### `TableData` {#_tabledata}

Component for displaying table data within a table row.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `id` | unique ID for table |
| `activeColumnIDs` | active columns |
| `className` | (optional) option class name for styling |

### `useActiveColumns` {#_useactivecolumns}

A hook that provides a list of user-selected active TableColumns.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as a key-value map |
| `\{TableColumn[]} options.columns` | An array of all available TableColumns |
| `{boolean} [options.showNamespaceOverride]` | (optional) If true, a namespace column is included, regardless of column management selections |
| `{string} [options.columnManagementID]` | (optional) A unique ID used to persist and retrieve column management selections to and from user settings. Usually a group/version/kind (GVK) string for a resource. |

A tuple containing the current user selected active columns (a subset of options.columns), and a boolean flag indicating whether user settings have been loaded.

### `ListPageHeader` {#_listpageheader}

Component for generating a page header.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `title` | heading title |
| `helpText` | (optional) help section as react node |
| `badge` | (optional) badge icon as react node |

### `ListPageCreate` {#_listpagecreate}

Component for adding a create button for a specific resource kind that automatically generates a link to the create YAML for this resource.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `groupVersionKind` | the resource group/version/kind to represent |

### `ListPageCreateLink` {#_listpagecreatelink}

Component for creating a stylized link.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `to` | string location where link should direct |
| `createAccessReview` | (optional) object with namespace and kind used to determine access |
| `children` | (optional) children for the component |

### `ListPageCreateButton` {#_listpagecreatebutton}

Component for creating button.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `createAccessReview` | (optional) object with namespace and kind used to determine access |
| `pfButtonProps` | (optional) Patternfly Button props |

### `ListPageCreateDropdown` {#_listpagecreatedropdown}

Component for creating a dropdown wrapped with permissions check.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `items` | key:ReactNode pairs of items to display in dropdown component |
| `onClick` | callback function for clicking dropdown items |
| `createAccessReview` | (optional) object with namespace and kind used to determine access |
| `children` | (optional) children for the dropdown toggle |

### `ResourceLink` {#_resourcelink}

Component that creates a link to a specific resource type with an icon badge.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `kind` | (optional) the kind of resource i.e. Pod, Deployment, Namespace |
| `groupVersionKind` | (optional) object with group, version, and kind |
| `className` | (optional) class style for component |
| `displayName` | (optional) display name for component, overwrites the resource name if set |
| `inline` | (optional) flag to create icon badge and name inline with children |
| `linkTo` | (optional) flag to create a Link object - defaults to true |
| `name` | (optional) name of resource |
| `namespace` | (optional) specific namespace for the kind resource to link to |
| `hideIcon` | (optional) flag to hide the icon badge |
| `title` | (optional) title for the link object (not displayed) |
| `dataTest` | (optional) identifier for testing |
| `onClick` | (optional) callback function for when component is clicked |
| `truncate` | (optional) flag to truncate the link if too long |

### `ResourceIcon` {#_resourceicon}

Component that creates an icon badge for a specific resource type.

**Example**

```tsx
<ResourceIcon kind="Pod"/>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `kind` | (optional) the kind of resource i.e. Pod, Deployment, Namespace |
| `groupVersionKind` | (optional) object with group, version, and kind |
| `className` | (optional) class style for component |

### `useK8sModel` {#_usek8smodel}

Hook that retrieves the k8s model for provided K8sGroupVersionKind from redux. It returns an array with the first item as k8s model and second item as `inFlight` status.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `groupVersionKind` | group, version, kind of k8s resource K8sGroupVersionKind is preferred alternatively can pass reference for group, version, kind which is deprecated, i.e, group/version/kind (GVK) K8sResourceKindReference. |

### `useK8sModels` {#_usek8smodels}

Hook that retrieves all current k8s models from redux. It returns an array with the first item as the list of k8s model and second item as `inFlight` status.

**Example**

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

### `useK8sWatchResource` {#_usek8swatchresource}

Hook that retrieves the k8s resource along with status for loaded and error. It returns an array with first item as resource(s), second item as loaded status and third item as error state if any.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `initResource` | options needed to watch for resource. |

### `useK8sWatchResources` {#_usek8swatchresources}

Hook that retrieves the k8s resources along with their respective status for loaded and error. It returns a map where keys are as provided in initResources and value has three properties data, loaded and error.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `initResources` | Resources must be watched as key-value pair, wherein key is unique to resource and value is options needed to watch for that resource. |

### `consoleFetch` {#_consolefetch}

A custom wrapper around `fetch` that adds console specific headers and allows for retries and timeouts. It also validates the response status code and throws appropriate error or logs out the user if required. It returns a promise that resolves to the response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `url` | The URL to fetch |
| `options` | The options to pass to fetch |
| `timeout` | The timeout in milliseconds |

### `consoleFetchJSON` {#_consolefetchjson}

A custom wrapper around `fetch` that adds console specific headers and allows for retries and timeouts. It also validates the response status code and throws appropriate error or logs out the user if required. It returns the response as a JSON object. Uses `consoleFetch` internally. It returns a promise that resolves to the response as JSON object.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `url` | The URL to fetch |
| `method` | The HTTP method to use. Defaults to GET |
| `options` | The options to pass to fetch |
| `timeout` | The timeout in milliseconds |
| `cluster` | The name of the cluster to make the request to. Defaults to the active cluster the user has selected |

### `consoleFetchText` {#_consolefetchtext}

A custom wrapper around `fetch` that adds console specific headers and allows for retries and timeouts. It also validates the response status code and throws appropriate error or logs out the user if required. It returns the response as a text. Uses `consoleFetch` internally. It returns a promise that resolves to the response as text.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `url` | The URL to fetch |
| `options` | The options to pass to fetch |
| `timeout` | The timeout in milliseconds |
| `cluster` | The name of the cluster to make the request to. Defaults to the active cluster the user has selected |

### `getConsoleRequestHeaders` {#_getconsolerequestheaders}

A function that creates impersonation and multicluster related headers for API requests by using current redux state. It returns an object containing the appropriate impersonation and cluster request headers, based on redux state.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `targetCluster` | Override the current active cluster with the provided targetCluster |

### `k8sGetResource` {#_k8sgetresource}

It fetches a resource from the cluster, based on the provided options. If the name is provided it returns one resource, otherwise it returns all the resources matching the model. It returns a promise that resolves to the response as JSON object with a resource if the name is provided, otherwise it returns all the resources matching the model. In case of failure, the promise gets rejected with HTTP error response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pairs in the map |
| `options.model` | k8s model |
| `options.name` | The name of the resource, if not provided then it looks for all the resources matching the model. |
| `options.ns` | The namespace to look into, should not be specified for cluster-scoped resources. |
| `options.path` | Appends as subpath if provided |
| `options.queryParams` | The query parameters to be included in the URL. |
| `options.requestInit` | The fetch init object to use. This can have request headers, method, redirect, and so on. |

### `k8sCreateResource` {#_k8screateresource}

It creates a resource in the cluster, based on the provided options. It returns a promise that resolves to the response of the resource created. In case of failure promise gets rejected with HTTP error response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pairs in the map |
| `options.model` | k8s model |
| `options.data` | Payload for the resource to be created |
| `options.path` | Appends as subpath if provided |
| `options.queryParams` | The query parameters to be included in the URL. |

### `k8sUpdateResource` {#_k8supdateresource}

It updates the entire resource in the cluster, based on provided options. When a client needs to replace an existing resource entirely, they can use k8sUpdate. Alternatively can use k8sPatch to perform the partial update. It returns a promise that resolves to the response of the resource updated. In case of failure promise gets rejected with HTTP error response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pair in the map |
| `options.model` | k8s model |
| `options.data` | Payload for the k8s resource to be updated |
| `options.ns` | Namespace to look into, it should not be specified for cluster-scoped resources. |
| `options.name` | Resource name to be updated. |
| `options.path` | Appends as subpath if provided |
| `options.queryParams` | The query parameters to be included in the URL. |

### `k8sPatchResource` {#_k8spatchresource}

It patches any resource in the cluster, based on provided options. When a client needs to perform the partial update, they can use k8sPatch. Alternatively can use k8sUpdate to replace an existing resource entirely. See [Data Tracker](https://datatracker.ietf.org/doc/html/rfc6902) for more. It returns a promise that resolves to the response of the resource patched. In case of failure promise gets rejected with HTTP error response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pairs in the map. |
| `options.model` | k8s model |
| `options.resource` | The resource to be patched. |
| `options.data` | Only the data to be patched on existing resource with the operation, path, and value. |
| `options.path` | Appends as subpath if provided. |
| `options.queryParams` | The query parameters to be included in the URL. |

### `k8sDeleteResource` {#_k8sdeleteresource}

It deletes resources from the cluster, based on the provided model, resource. The garbage collection works based on `Foreground`|`Background` can be configured with propagationPolicy property in provided model or passed in json. It returns a promise that resolves to the response of kind Status. In case of failure promise gets rejected with HTTP error response.

**Example** `kind: 'DeleteOptions', apiVersion: 'v1', propagationPolicy`

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pair in the map. |
| `options.model` | k8s model |
| `options.resource` | The resource to be deleted. |
| `options.path` | Appends as subpath if provided |
| `options.queryParams` | The query parameters to be included in the URL. |
| `options.requestInit` | The fetch init object to use. This can have request headers, method, redirect, and so on. See [Interface RequestInit](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html) for more. |
| `options.json` | Can control garbage collection of resources explicitly if provided or else it defaults to the model’s "propagationPolicy". |

### `k8sListResource` {#_k8slistresource}

Lists the resources as an array in the cluster, based on provided options. It returns a promise that resolves to the response.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `options` | Which are passed as key-value pairs in the map |
| `options.model` | k8s model |
| `options.queryParams` | The query parameters to be included in the URL and can pass label selector’s as well with key "labelSelector". |
| `options.requestInit` | The fetch init object to use. This can have request headers, method, redirect, and so on. See [Interface RequestInit](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html) for more. |

### `k8sListResourceItems` {#_k8slistresourceitems}

Same interface as k8sListResource but returns the sub items. It returns the apiVersion for the model, i.e., `group/version`.

### `getAPIVersionForModel` {#_getapiversionformodel}

Provides apiVersion for a k8s model.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `model` | k8s model |

### `getGroupVersionKindForResource` {#_getgroupversionkindforresource}

Provides a group, version, and kind for a resource. It returns the group, version, kind for the provided resource. If the resource does not have an API group, group "core" is returned. If the resource has an invalid apiVersion, then it throws an Error.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | k8s resource |

### `getGroupVersionKindForModel` {#_getgroupversionkindformodel}

Provides a group, version, and kind for a k8s model. This returns the group, version, kind for the provided model. If the model does not have an apiGroup, group "core" is returned.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `model` | k8s model |

### `StatusPopupSection` {#_statuspopupsection}

Component that shows the status in a pop-up. Helpful component for building `console.dashboards/overview/health/resource` extensions.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `firstColumn` | values for first column of pop-up |
| `secondColumn` | (optional) values for second column of pop-up |
| `children` | (optional) children for the pop-up |

### `StatusPopupItem` {#_statuspopupitem}

Status element used in status pop-up; used in `StatusPopupSection`.

**Example**

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `value` | (optional) text value to display |
| `icon` | (optional) icon to display |
| `children` | child elements |

### `Overview` {#_overview}

Creates a wrapper component for a dashboard.

```text {title="Example"}
    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `className` | (optional) style class for div |
| `children` | (optional) elements of the dashboard |

### `OverviewGrid` {#_overviewgrid}

Creates a grid of card elements for a dashboard; used within `Overview`.

```text {title="Example"}
    <Overview>
      <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} />
    </Overview>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `mainCards` | cards for grid |
| `leftCards` | (optional) cards for left side of grid |
| `rightCards` | (optional) cards for right side of grid |

### `InventoryItem` {#_inventoryitem}

Creates an inventory card item.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `children` | elements to render inside the item |

### `InventoryItemTitle` {#_inventoryitemtitle}

Creates a title for an inventory card item; used within `InventoryItem`.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `children` | elements to render inside the title |

### `InventoryItemBody` {#_inventoryitembody}

Creates the body of an inventory card; used within `InventoryCard` and can be used with `InventoryTitle`.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `children` | elements to render inside the Inventory Card or title |
| `error` | elements of the div |

### `InventoryItemStatus` {#_inventoryitemstatus}

Creates a count and icon for an inventory card with optional link address; used within `InventoryItemBody`

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `count` | count for display |
| `icon` | icon for display |
| `linkTo` | (optional) link address |

### `InventoryItemLoading` {#_inventoryitemloading}

Creates a skeleton container for when an inventory card is loading; used with `InventoryItem` and related components

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

### `useFlag` {#_useflag}

Hook that returns the given feature flag from FLAGS redux state. It returns the boolean value of the requested feature flag or undefined.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `flag` | The feature flag to return |

### `CodeEditor` {#_codeeditor}

A basic lazy loaded Code editor with hover help and completion.

```text {title="Example"}
<React.Suspense fallback={<LoadingBox />}>
  <CodeEditor
    value={code}
    language="yaml"
  />
</React.Suspense>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `value` | String representing the YAML code to render. |
| `language` | String representing the language of the editor. |
| `options` | Monaco editor options. For more details, see [Interface IStandAloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html). |
| `minHeight` | Minimum editor height in valid CSS height values. |
| `showShortcuts` | Boolean to show shortcuts on top of the editor. |
| `toolbarLinks` | Array of ReactNode rendered on the toolbar links section on top of the editor. |
| `onChange` | Callback for on code change event. |
| `onSave` | Callback called when the command CTRL / CMD + S is triggered. |
| `ref` | React reference to `{ editor?: IStandaloneCodeEditor }`. Using the `editor` property, you are able to access to all methods to control the editor. For more information, visit [Interface IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html). |

### `ResourceYAMLEditor` {#_resourceyamleditor}

A lazy loaded YAML editor for Kubernetes resources with hover help and completion. The component use the YAMLEditor and add on top of it more functionality such as resource update handling, alerts, save, cancel and reload buttons, accessibility and more. Unless `onSave` callback is provided, the resource update is automatically handled. It should be wrapped in a `React.Suspense` component.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `initialResource` | YAML/Object representing a resource to be shown by the editor. This prop is used only during the initial render |
| `header` | Add a header on top of the YAML editor |
| `onSave` | Callback for the Save button. Passing it overrides the default update performed on the resource by the editor |

### `ResourceEventStream` {#_resourceeventstream}

A component to show events related to a particular resource.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | An object whose related events should be shown. |

### `usePrometheusPoll` {#_useprometheuspoll}

Sets up a poll to Prometheus for a single query. It returns a tuple containing the query response, a boolean flag indicating whether the response has completed, and any errors encountered during the request or post-processing of the request.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `{PrometheusEndpoint} props.endpoint` | one of the PrometheusEndpoint (label, query, range, rules, targets) |
| `{string} [props.query]` | (optional) Prometheus query string. If empty or undefined, polling is not started. |
| `{number} [props.delay]` | (optional) polling delay interval (ms) |
| `{number} [props.endTime]` | (optional) for QUERY_RANGE endpoint, end of the query range |
| `{number} [props.samples]` | (optional) for QUERY_RANGE endpoint |
| `{number} [options.timespan]` | (optional) for QUERY_RANGE endpoint |
| `{string} [options.namespace]` | (optional) a search param to append |
| `{string} [options.timeout]` | (optional) a search param to append |

### `Timestamp` {#_timestamp}

A component to render timestamp. The timestamps are synchronized between individual instances of the Timestamp component. The provided timestamp is formatted according to user locale.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `timestamp` | the timestamp to render. Format is expected to be ISO 8601 (used by Kubernetes), epoch timestamp, or an instance of a Date. |
| `simple` | render simple version of the component omitting icon and tooltip. |
| `omitSuffix` | formats the date omitting the suffix. |
| `className` | additional class name for the component. |

### `useOverlay` {#_useoverlay}

The `useOverlay` hook inserts a component directly to the DOM outside the web console’s page structure. This allows the component to be freely styled and positioning with CSS. For example, to float the overlay in the top right corner of the UI: `style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }}`. It is possible to add multiple overlays by calling `useOverlay` multiple times. A `closeOverlay` function is passed to the overlay component. Calling it removes the component from the DOM without affecting any other overlays that might have been added with `useOverlay`. Additional props can be passed to `useOverlay` and they will be passed through to the overlay component.

```tsx {title="Example"}
const OverlayComponent = ({ closeOverlay, heading }) => {
  return (
    <div style={{ position: 'absolute', right: '2rem', top: '2rem', zIndex: 999 }}>
      <h2>{heading}</h2>
      <Button onClick={closeOverlay}>Close</Button>
    </div>
  );
};

const ModalComponent = ({ body, closeOverlay, title }) => (
  <Modal isOpen onClose={closeOverlay}>
    <ModalHeader title={title} />
    <ModalBody>{body}</ModalBody>
  </Modal>
);

const AppPage: React.FC = () => {
  const launchOverlay = useOverlay();
  const onClickOverlay = () => {
    launchOverlay(OverlayComponent, { heading: 'Test overlay' });
  };
  const onClickModal = () => {
    launchOverlay(ModalComponent, { body: 'Test modal', title: 'Overlay modal' });
  };
  return (
    <Button onClick={onClickOverlay}>Launch an Overlay</Button>
    <Button onClick={onClickModal}>Launch a Modal</Button>
  )
}
```

### `ActionServiceProvider` {#_actionserviceprovider}

Component that allows to receive contributions from other plugins for the `console.action/provider` extension type.

```text {title="Example"}
   const context: ActionContext = { 'a-context-id': { dataFromDynamicPlugin } };

   ...

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `context` | Object with contextId and optional plugin data |

### `NamespaceBar` {#_namespacebar}

A component that renders a horizontal toolbar with a namespace dropdown menu in the leftmost position. Additional components can be passed in as children and is rendered to the right of the namespace dropdown. This component is designed to be used at the top of the page. It should be used on pages where the user needs to be able to change the active namespace, such as on pages with k8s resources.

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

   ...

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

     ...
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `onNamespaceChange` | (optional) A function that is executed when a namespace option is selected. It accepts the new namespace in the form of a string as its only argument. The active namespace is updated automatically when an option is selected, but additional logic can be applied via this function. When the namespace is changed, the namespace parameter in the URL is changed from the previous namespace to the newly selected namespace. |
| `isDisabled` | (optional) A boolean flag that disables the namespace dropdown if set to true. This option only applies to the namespace dropdown and has no effect on child components. |
| `children` | (optional) Additional elements to be rendered inside the toolbar to the right of the namespace dropdown. |

### `ErrorBoundaryFallbackPage` {#_errorboundaryfallbackpage}

Creates full page ErrorBoundaryFallbackPage component to display the "Oh no! Something went wrong." message along with the stack trace and other helpful debugging information. This is to be used in conjunction with an component.

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

   return this.props.children;
)
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `errorMessage` | text description of the error message |
| `componentStack` | component trace of the exception |
| `stack` | stack trace of the exception |
| `title` | title to render as the header of the error boundary page |

### `QueryBrowser` {#_querybrowser}

A component that renders a graph of the results from a Prometheus PromQL query along with controls for interacting with the graph.

```tsx {title="Example"}
<QueryBrowser
  defaultTimespan={15 * 60 * 1000}
  namespace={namespace}
  pollInterval={30 * 1000}
  queries={[
    'process_resident_memory_bytes{job="console"}',
    'sum(irate(container_network_receive_bytes_total[6h:5m])) by (pod)',
  ]}
/>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `customDataSource` | (optional) Base URL of an API endpoint that handles PromQL queries. If provided, this is used instead of the default API for fetching data. |
| `defaultSamples` | (optional) The default number of data samples plotted for each data series. If there are many data series, QueryBrowser might automatically pick a lower number of data samples than specified here. |
| `defaultTimespan` | (optional) The default timespan for the graph in milliseconds - defaults to 1,800,000 (30 minutes). |
| `disabledSeries` | (optional) Disable (do not display) data series with these exact label / value pairs. |
| `disableZoom` | (optional) Flag to disable the graph zoom controls. |
| `filterLabels` | (optional) Optionally filter the returned data series to only those that match these label / value pairs. |
| `fixedEndTime` | (optional) Set the end time for the displayed time range rather than showing data up to the current time. |
| `formatSeriesTitle` | (optional) Function that returns a string to use as the title for a single data series. |
| `GraphLink` | (optional) Component for rendering a link to another page (for example getting more information about this query). |
| `hideControls` | (optional) Flag to hide the graph controls for changing the graph timespan, and so on. |
| `isStack` | (optional) Flag to display a stacked graph instead of a line graph. If showStackedControl is set, it is still possible for the user to switch to a line graph. |
| `namespace` | (optional) If provided, data is only returned for this namespace (only series that have this namespace label). |
| `onZoom` | (optional) Callback called when the graph is zoomed. |
| `pollInterval` | (optional) If set, determines how often the graph is updated to show the latest data (in milliseconds). |
| `queries` | Array of PromQL queries to run and display the results in the graph. |
| `showLegend` | (optional) Flag to enable displaying a legend below the graph. |
| `showStackedControl` | Flag to enable displaying a graph control for switching between stacked graph mode and line graph mode. |
| `timespan` | (optional) The timespan that should be covered by the graph in milliseconds. |
| `units` | (optional) Units to display on the Y-axis and in the tooltip. |

### `useAnnotationsModal` {#_useannotationsmodal}

A hook that provides a callback to launch a modal for editing Kubernetes resource annotations.

```tsx {title="Example"}
const PodAnnotationsButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod);
  return <button onClick={launchAnnotationsModal}>{t('Edit Pod Annotations')}</button>
}
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | The resource to edit annotations for an object of K8sResourceCommon type. |

**Returns** A function which launches a modal for editing a resource’s annotations.

### `useDeleteModal` {#_usedeletemodal}

A hook that provides a callback to launch a modal for deleting a resource.

```tsx {title="Example"}
const DeletePodButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchDeleteModal = useDeleteModal<PodKind>(pod);
  return <button onClick={launchDeleteModal}>{t('Delete Pod')}</button>
}
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | The resource to delete. |
| `redirectTo` | (optional) A location to redirect to after deleting the resource. |
| `message` | (optional) A message to display in the modal. |
| `btnText` | (optional) The text to display on the delete button. |
| `deleteAllResources` | (optional) A function to delete all resources of the same kind. |

**Returns** A function which launches a modal for deleting a resource.

### `useLabelsModel` {#_uselabelsmodel}

A hook that provides a callback to launch a modal for editing Kubernetes resource labels.

```tsx {title="Example"}
const PodLabelsButton = ({ pod }) => {
  const { t } = useTranslation();
  const launchLabelsModal = useLabelsModal<PodKind>(pod);
  return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
}
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resource` | The resource to edit labels for, an object of K8sResourceCommon type. |

**Returns** A function which launches a modal for editing a resource’s labels.

### `useActiveNamespace` {#_useactivenamespace}

Hook that provides the currently active namespace and a callback for setting the active namespace.

```tsx {title="Example"}
const Component: React.FC = (props) => {
   const [activeNamespace, setActiveNamespace] = useActiveNamespace();
   return <select
     value={activeNamespace}
     onChange={(e) => setActiveNamespace(e.target.value)}
   >
     {
       // ...namespace options
     }
   </select>
}
```

**Returns** A tuple containing the current active namespace and setter callback.

### `useUserSettings` {#_useusersettings}

Hook that provides a user setting value and a callback for setting the user setting value.

```tsx {title="Example"}
const Component: React.FC = (props) => {
   const [state, setState, loaded] = useUserSettings(
     'devconsole.addPage.showDetails',
     true,
     true,
   );
   return loaded ? (
      <WrappedComponent {...props} userSettingState={state} setUserSettingState={setState} />
    ) : null;
};
```

**Returns** A tuple containing the user setting value, a setter callback, and a loaded boolean.

### `useQuickStartContext` {#_usequickstartcontext}

Hook that provides the current quick start context values. This allows plugins to interoperate with console quick start functionality.

```tsx {title="Example"}
const OpenQuickStartButton = ({ quickStartId }) => {
   const { setActiveQuickStart } = useQuickStartContext();
   const onClick = React.useCallback(() => {
       setActiveQuickStart(quickStartId);
   }, [quickStartId]);
   return <button onClick={onClick}>{t('Open Quick Start')}</button>
};
```

**Returns** Quick start context values object.

### `PerspectiveContext` {#_perspectivecontext}

Deprecated: Use the provided `usePerspectiveContext` instead. Creates the perspective context.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `PerspectiveContextType` | object with active perspective and setter |

### `useAccessReviewAllowed` {#_useaccessreviewallowed}

Deprecated: Use `useAccessReview` from `@console/dynamic-plugin-sdk` instead. Hook that provides allowed status about user access to a given resource. It returns the `isAllowed` boolean value.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `resourceAttributes` | resource attributes for access review |
| `impersonate` | impersonation details |

### `useSafetyFirst` {#_usesafetyfirst}

Deprecated: This hook is not related to console functionality. Hook that ensures a safe asynchronous setting of React state in case a given component could be unmounted. It returns an array with a pair of state value and its set function.

|  |  |
| --- | --- |
| Parameter Name | Description |
| `initialState` | initial state value |

### `VirtualizedTable` {#_virtualizedtable}

Deprecated: Use PatternFly’s [Data view](https://www.patternfly.org/extensions/data-view/overview/) instead. A component for making virtualized tables.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `data` | data for table |
| `loaded` | flag indicating data is loaded |
| `loadError` | error object if issue loading data |
| `columns` | column setup |
| `Row` | row setup |
| `unfilteredData` | original data without filter |
| `NoDataEmptyMsg` | (optional) no data empty message component |
| `EmptyMsg` | (optional) empty message component |
| `scrollNode` | (optional) function to handle scroll |
| `label` | (optional) label for table |
| `ariaLabel` | (optional) aria label |
| `gridBreakPoint` | sizing of how to break up grid for responsiveness |
| `onSelect` | (optional) function for handling select of table |
| `rowData` | (optional) data specific to row |

### `ListPageFilter` {#_listpagefilter}

Deprecated: Use PatternFly’s [Data view](https://www.patternfly.org/extensions/data-view/overview/) instead. Component that generates filter for list page.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `data` | An array of data points |
| `loaded` | indicates that data has loaded |
| `onFilterChange` | callback function for when filter is updated |
| `rowFilters` | (optional) An array of RowFilter elements that define the available filter options |
| `nameFilterPlaceholder` | (optional) placeholder for name filter |
| `labelFilterPlaceholder` | (optional) placeholder for label filter |
| `hideLabelFilter` | (optional) only shows the name filter instead of both name and label filter |
| `hideNameLabelFilter` | (optional) hides both name and label filter |
| `columnLayout` | (optional) column layout object |
| `hideColumnManagement` | (optional) flag to hide the column management |

### `useListPageFilter` {#_uselistpagefilter}

Deprecated: Use PatternFly’s [Data view](https://www.patternfly.org/extensions/data-view/overview/) instead. A hook that manages filter state for the ListPageFilter component. It returns a tuple containing the data filtered by all static filters, the data filtered by all static and row filters, and a callback that updates rowFilters.

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

|  |  |
| --- | --- |
| Parameter Name | Description |
| `data` | An array of data points |
| `rowFilters` | (optional) An array of RowFilter elements that define the available filter options |
| `staticFilters` | (optional) An array of FilterValue elements that are statically applied to the data |

### `YAMLEditor` {#_yamleditor}

Deprecated: Use `CodeEditor` instead. A basic lazy loaded YAML editor with hover help and completion.

```text {title="Example"}
<React.Suspense fallback={<LoadingBox />}>
  <YAMLEditor
    value={code}
  />
</React.Suspense>
```

|  |  |
| --- | --- |
| Parameter Name | Description |
| `value` | String representing the YAML code to render. |
| `options` | Monaco editor options. |
| `minHeight` | Minimum editor height in valid CSS height values. |
| `showShortcuts` | Boolean to show shortcuts on top of the editor. |
| `toolbarLinks` | Array of ReactNode rendered on the toolbar links section on top of the editor. |
| `onChange` | Callback for on code change event. |
| `onSave` | Callback called when the command CTRL / CMD + S is triggered. |
| `ref` | React reference to `{ editor?: IStandaloneCodeEditor }`. Using the `editor` property, you are able to access to all methods to control the editor. |

### `useModal` {#_usemodal}

Deprecated: Use `useOverlay` from `@console/dynamic-plugin-sdk` instead. A hook to launch Modals.

```tsx {title="Example"}
const AppPage: React.FC = () => {
 const launchModal = useModal();
 const onClick = () => launchModal(ModalComponent);
 return (
   <Button onClick={onClick}>Launch a Modal</Button>
 )
}
```

## Troubleshooting your dynamic plugin {#troubleshooting-dynamic-plugin_dynamic-plugins-reference}

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:

  ```terminal
  $ oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
  ```

  - Verify the enabled plugins on the status card of the **Overview** page. 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.
  - Curl 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 typos in the nav extension perspective or section IDs.

  - Your plugin might be loaded, but nav items 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**
{._additional-resources}

- [Understanding service serving certificates](/openshift-docs-markdown/security/certificates/service-serving-certificate#understanding-service-serving_service-serving-certificate)