openshift-docs/modules/dynamic-plugin-sdk-extensions.adoc

// Module is included in the following assemblies:
//
// * web_console/dynamic-plugin/dynamic-plugins-reference.adoc

:_mod-docs-content-type: CONCEPT
[id="dynamic-plugin-sdk-extensions_{context}"]
= Dynamic plugin extension types


== `console.action/filter`

`ActionFilter` can be used to filter an action.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`contextId` |`string` |no |The context ID helps to narrow the scope of
contributed actions to a particular area of the application. Examples include `topology` and `helm`.

|`filter` |`CodeRef<(scope: any, action: Action) => boolean>` |no |A
function that will filter actions based on some conditions.

`scope`: The scope
in which actions should be provided for. A hook might be required if you want to
remove the `ModifyCount` action from a deployment with a horizontal pod
autoscaler (HPA).
|===


== `console.action/group`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`catalogId` |`string` \| `string[]` |no |The unique identifier for the
catalog this provider contributes to.

|`type` |`string` |no |Type ID for the catalog item type.

|`title` |`string` |no |Title for the catalog item provider

|`provider`
|`CodeRef<ExtensionHook<CatalogItem<any>[], CatalogExtensionHookOptions>>`
|no |Fetch items and normalize it for the catalog. Value is a react
effect hook.

|`priority` |`number` |yes |Priority for this provider. Defaults to `0`.
Higher priority providers may override catalog items provided by other
providers.
|===


== `console.catalog/item-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.

[cols=",,,",options="header",]
|===
|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`

This extension allows plugins to contribute extra metadata like 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.

[cols=",,,",options="header",]
|===
|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`

Adds a new inventory item into cluster overview page.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`component` |`CodeRef<React.ComponentType<{}>>` |no |The component to
be rendered.
|===


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

Adds a new cluster overview multi-line utilization item.

[cols=",,,",options="header",]
|===
|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`

Adds a new cluster overview utilization item.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`provider` |`CodeRef<Provider<T>>` |no |Context Provider component.
|`useValueHook` |`CodeRef<() => T>` |no |Hook for the Context value.
|===

== `console.dashboards/card`

Adds a new dashboard card.

[cols=",,,",options="header",]
|===
|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`

Adds an item to the Details card of Overview Dashboard.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`k8sResource` |`CodeRef<FirehoseResource & { isList: true; }>` |no |The
utilization item to be replaced.

|`component` |`CodeRef<React.ComponentType<K8sActivityProps<T>>>` |no
|The action component.

|`isActivity` |`CodeRef<(resource: T) => boolean>` |yes |Function which
determines if the given resource represents the action. If not defined,
every resource represents activity.

|`getTimestamp` |`CodeRef<(resource: T) => Date>` |yes |Time stamp for
the given action, which will be used for ordering.
|===


== `console.dashboards/overview/health/operator`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`title` |`string` |no |Title of Operators section in the pop-up menu.

|`resources` |`CodeRef<FirehoseResource[]>` |no |Kubernetes resources
which will be fetched and passed to `healthHandler`.

|`getOperatorsWithStatuses` |`CodeRef<GetOperatorsWithStatuses<T>>` |yes
|Resolves status for the Operators.

|`operatorRowLoader`
|`CodeRef<React.ComponentType<OperatorRowProps<T>>>` |yes |Loader for
pop-up row component.

|`viewAllLink` |`string` |yes |Links to all resources page. If not
provided, then a list page of the first resource from resources prop is
used.
|===


== `console.dashboards/overview/health/prometheus`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`title` |`string` |no |The display name of the subsystem.

|`queries` |`string[]` |no |The Prometheus queries.

|`healthHandler` |`CodeRef<PrometheusHealthHandler>` |no |Resolve the
subsystem's health.

|`additionalResource` |`CodeRef<FirehoseResource>` |yes |Additional
resource which will be fetched and passed to `healthHandler`.

|`popupComponent`
|`CodeRef<React.ComponentType<PrometheusHealthPopupProps>>` |yes |Loader
for pop-up menu content. If defined, a health item is represented as a
link, which opens a pop-up menu with the given content.

|`popupTitle` |`string` |yes |The title of the popover.

|`disallowedControlPlaneTopology` |`string[]` |yes |Control plane
topology for which the subsystem should be hidden.
|===


== `console.dashboards/overview/health/resource`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`title` |`string` |no |The display name of the subsystem.

|`resources` |`CodeRef<WatchK8sResources<T>>` |no |Kubernetes resources
that will be fetched and passed to `healthHandler`.

|`healthHandler` |`CodeRef<ResourceHealthHandler<T>>` |no |Resolve the
subsystem's health.

|`popupComponent` |`CodeRef<WatchK8sResults<T>>` |yes |Loader for pop-up menu content. If defined, a health item is represented as a link, which
opens a pop-up menu with the given content.

|`popupTitle` |`string` |yes |The title of the popover.
|===


== `console.dashboards/overview/health/url`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`title` |`string` |no |The display name of the subsystem.

|`url` |`string` |no |The URL to fetch data from. It will be prefixed
with base Kubernetes URL.

|`healthHandler`|`CodeRef<URLHealthHandler<T, K8sResourceCommon \| K8sResourceCommon[]>>`|no |Resolve the subsystem's health.

|`additionalResource` |`CodeRef<FirehoseResource>` |yes |Additional
resource which will be fetched and passed to `healthHandler`.

|`popupComponent`|`CodeRef<React.ComponentType<{ healthResult?: T; healthResultError?: any; k8sResult?: FirehoseResult<R>; }>>`|yes |Loader for popup content. If defined, a health item will be
represented as a link which opens popup with given content.

|`popupTitle` |`string` |yes |The title of the popover.
|===


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

Adds a resource tile to the overview inventory card.

[cols=",,,",options="header",]
|===
|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`

Adds an inventory status group.

[cols=",,,",options="header",]
|===
|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`

Replaces an overview inventory card.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

Adds a resource tile to the project overview inventory card.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`fileExtensions` |`string[]` |no |Supported file extensions.

|`handler` |`CodeRef<FileUploadHandler>` |no |Function which handles the
file drop action.
|===


== `console.flag`

Gives full control over the web console feature flags.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`handler` |`CodeRef<FeatureFlagHandler>` |no |Used to set or unset arbitrary feature flags.
|===


== `console.flag/hookProvider`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`handler` |`CodeRef<FeatureFlagHandler>` |no |Used to set or unset arbitrary feature flags.
|===


== `console.flag/model`

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

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`model` |`ExtensionK8sGroupModel` |no |The model to customize. May
specify only a group, or optional version and kind.

|`badge` |`ModelBadge` |yes |Whether to consider this model reference as
Technology Preview or Developer Preview.

|`color` |`string` |yes |The color to associate to this model.

|`label` |`string` |yes |Override the label. Requires `kind` be
provided.

|`labelPlural` |`string` |yes |Override the plural label. Requires
`kind` be provided.

|`abbr` |`string` |yes |Customize the abbreviation. Defaults to all
uppercase characters in `kind`, up to 4 characters long. Requires that `kind` is provided.
|===


== `console.navigation/href`

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

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

[cols=",,,",options="header",]
|===
|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`

Adds new resource list page to Console router.

[cols=",,,",options="header",]
|===
|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`

Adds a new page to the web console router. See link:https://v5.reactrouter.com/[React Router].

[cols=",,,",options="header",]
|===
|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`

Adds a new standalone page, rendered outside the common page layout, to the web console router. See link:https://v5.reactrouter.com/[React Router].

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`component` |`CodeRef<React.ComponentType<{ projectName: string; }>>`
|no |The component to be rendered.
|===


== `console.project-overview/utilization-item`

Adds a new project overview utilization item.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`alert` |`CodeRef<React.ComponentType<{ pvc: K8sResourceCommon; }>>`
|no |The alert component.
|===


== `console.pvc/create-prop`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

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

[cols=".^2,.^3a,.^3a,.^3a",options="header"]
|===
|Name |Value Type |Optional |Description
|`model` |`ExtensionK8sModel` |no |The subject resource's API group, version, and kind.

|`id`
|`string` |no |A unique identifier.

|`column`
|`DetailsItemColumn` |no |Determines if the item will appear in the 'left' or 'right' column of the resource summary on the details page. Default: 'right'

|`title`
|`string` |no |The details item title.

|`path`
|`string` |yes |An optional, fully-qualified path to a resource property to used as the details item value. Only link:https://developer.mozilla.org/en-US/docs/Glossary/Primitive[primitive type] values can be rendered directly. Use the component property to handle other data types.

|`component`
|`CodeRef<React.ComponentType<DetailsItem
ComponentProps<K8sResourceCommon, any>>>` |yes |An optional React component that will render the details item value.

|`sortWeight`
|`number` |yes |An optional sort weight, relative to all other details items in the same column. Represented by any valid link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type[JavaScriptNumber]. Items in each column are sorted independently, lowest to highest. Items without sort weightsare sorted after items with sort weights.

|===


== `console.storage-class/provisioner`

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

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`CSI` |`ProvisionerDetails` |yes | Container Storage Interface provisioner type

|`OTHERS`
|`ProvisionerDetails`
|yes
|Other provisioner type
|===


== `console.storage-provider`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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 may use this data for reporting and analytics purposes.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`listener` |`CodeRef<TelemetryEventListener>` |no |Listen for telemetry
events
|===


== `console.topology/adapter/build`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

Getter for a `ViewComponentFactory`.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`getFactory` |`CodeRef<ViewComponentFactory>` |no |Getter for a `ViewComponentFactory`.
|===


== `console.topology/create/connector`

Getter for the create connector function.

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`getCreateConnector` |`CodeRef<CreateConnectionGetter>` |no |Getter for
the create connector function.
|===


== `console.topology/data/factory`

Topology Data Model Factory Extension

[cols=",,,",options="header",]
|===
|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`

Topology Decorator Provider Extension

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

Topology Display Filters Extension

[cols=",,,",options="header",]
|===
|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`

Topology relationship provider connector extension

[cols=",,,",options="header",]
|===
|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 |Tooltip to show when connector operation is hovering over the drop target, for example, "Create a Visual Connector"
|`create` |`CodeRef<RelationshipProviderCreate>` |no |Callback to execute when connector is drop over target node to create a connection
|`priority` |`number` |no |Priority for relationship, higher will be preferred in case of multiple
|===


== `console.user-preference/group`

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.

[cols=",,,",options="header",]
|===
|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`

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

[cols=",,,",options="header",]
|===
|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`

YAML templates for editing resources via the yaml editor.

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

This extension allows plugins to contibute 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.

[cols=",,,",options="header",]
|===
|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`

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.

[cols=",,,",options="header",]
|===
|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`

Deprecated. use `CustomOverviewDetailItem` type instead

[cols=",,,",options="header",]
|===
|Name |Value Type |Optional |Description
|`component` |`CodeRef<React.ComponentType<{}>>` |no |The value, based
on the `DetailItem` component
|===


== `console.page/resource/tab`

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

[cols=",,,",options="header",]
|===
|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.
|===