Web console
Getting started with the web console in OpenShift Container Platform
Abstract
Chapter 1. Web Console Overview
The Red Hat OpenShift Container Platform web console provides a graphical user interface to visualize your project data and perform administrative, management, and troubleshooting tasks. The web console runs as pods on the control plane nodes in the openshift-console project. It is managed by a console-operator
pod. Both Administrator and Developer perspectives are supported.
Both Administrator and Developer perspectives enable you to create quick start tutorials for OpenShift Container Platform. A quick start is a guided tutorial with user tasks and is useful for getting oriented with an application, Operator, or other product offering.
1.1. About the Administrator perspective in the web console
The Administrator perspective enables you to view the cluster inventory, capacity, general and specific utilization information, and the stream of important events, all of which help you to simplify planning and troubleshooting tasks. Both project administrators and cluster administrators can view the Administrator perspective.
Cluster administrators can also open an embedded command line terminal instance with the web terminal Operator in OpenShift Container Platform 4.7 and later.
The default web console perspective that is shown depends on the role of the user. The Administrator perspective is displayed by default if the user is recognized as an administrator.
The Administrator perspective provides workflows specific to administrator use cases, such as the ability to:
- Manage workload, storage, networking, and cluster settings.
- Install and manage Operators using the Operator Hub.
- Add identity providers that allow users to log in and manage user access through roles and role bindings.
- View and manage a variety of advanced settings such as cluster updates, partial cluster updates, cluster Operators, custom resource definitions (CRDs), role bindings, and resource quotas.
- Access and manage monitoring features such as metrics, alerts, and monitoring dashboards.
- View and manage logging, metrics, and high-status information about the cluster.
- Visually interact with applications, components, and services associated with the Administrator perspective in OpenShift Container Platform.
1.2. About the Developer perspective in the web console
The Developer perspective offers several built-in ways to deploy applications, services, and databases. In the Developer perspective, you can:
- View real-time visualization of rolling and recreating rollouts on the component.
- View the application status, resource utilization, project event streaming, and quota consumption.
- Share your project with others.
- Troubleshoot problems with your applications by running Prometheus Query Language (PromQL) queries on your project and examining the metrics visualized on a plot. The metrics provide information about the state of a cluster and any user-defined workloads that you are monitoring.
Cluster administrators can also open an embedded command line terminal instance in the web console in OpenShift Container Platform 4.7 and later.
The default web console perspective that is shown depends on the role of the user. The Developer perspective is displayed by default if the user is recognised as a developer.
The Developer perspective provides workflows specific to developer use cases, such as the ability to:
- Create and deploy applications on OpenShift Container Platform by importing existing codebases, images, and container files.
- Visually interact with applications, components, and services associated with them within a project and monitor their deployment and build status.
- Group components within an application and connect the components within and across applications.
- Integrate serverless capabilities (Technology Preview).
- Create workspaces to edit your application code using Eclipse Che.
You can use the Topology view to display applications, components, and workloads of your project. If you have no workloads in the project, the Topology view will show some links to create or import them. You can also use the Quick Search to import components directly.
Additional resources
See Viewing application composition using the Topology view for more information on using the Topology view in Developer perspective.
1.3. Accessing the Perspectives
You can access the Administrator and Developer perspective from the web console as follows:
Prerequisites
To access a perspective, ensure that you have logged in to the web console. Your default perspective is automatically determined by the permission of the users. The Administrator perspective is selected for users with access to all projects, while the Developer perspective is selected for users with limited access to their own projects
Additional resources
See Adding User Preferences for more information on changing perspectives.
Procedure
- Use the perspective switcher to switch to the Administrator or Developer perspective.
- Select an existing project from the Project drop-down list. You can also create a new project from this dropdown.
You can use the perspective switcher only as cluster-admin
.
Additional resources
- Learn more about Cluster Administrator
- Overview of the Administrator perspective
- Creating and deploying applications on OpenShift Container Platform using the Developer perspective
- Viewing the applications in your project, verifying their deployment status, and interacting with them in the Topology view
- Viewing cluster information
- Configuring the web console
- Customizing the web console
- About the web console
- Using the web terminal
- Creating quick start tutorials
- Disabling the web console
Chapter 2. Accessing the web console
The OpenShift Container Platform web console is a user interface accessible from a web browser. Developers can use the web console to visualize, browse, and manage the contents of projects.
2.1. Prerequisites
- JavaScript must be enabled to use the web console. For the best experience, use a web browser that supports WebSockets.
- Review the OpenShift Container Platform 4.x Tested Integrations page before you create the supporting infrastructure for your cluster.
2.2. Understanding and accessing the web console
The web console runs as a pod on the control plane node. The static assets required to run the web console are served by the pod.
After you install OpenShift Container Platform using the openshift-install create cluster
command, you can find the web console URL and login credentials for the installed cluster in the CLI output of the installation program. For example:
Example output
INFO Install complete! INFO Run 'export KUBECONFIG=<your working directory>/auth/kubeconfig' to manage the cluster with 'oc', the OpenShift CLI. INFO The cluster is ready when 'oc login -u kubeadmin -p <provided>' succeeds (wait a few minutes). INFO Access the OpenShift web-console here: https://console-openshift-console.apps.demo1.openshift4-beta-abcorp.com INFO Login to the console with user: kubeadmin, password: <provided>
Use those details to log in and access the web console.
For existing clusters that you did not install, you can use oc whoami --show-console
to see the web console URL.
The dir
parameter specifies the assets
directory, which stores the manifest files, the ISO image, and the auth
directory. The auth
directory stores the kubeadmin-password
and kubeconfig
files. As a kubeadmin
user, you can use the kubeconfig
file to access the cluster with the following setting: export KUBECONFIG=<install_directory>/auth/kubeconfig
. The kubeconfig
is specific to the generated ISO image, so if the kubeconfig
is set and the oc
command fails, it is possible that the system did not boot with the generated ISO image. To perform debugging, during the bootstrap process, you can log in to the console as the core
user by using the contents of the kubeadmin-password
file.
Additional resources
Chapter 3. Using the OpenShift Container Platform dashboard to get cluster information
The OpenShift Container Platform web console captures high-level information about the cluster.
3.1. About the OpenShift Container Platform dashboards page
Access the OpenShift Container Platform dashboard, which captures high-level information about the cluster, by navigating to Home → Overview from the OpenShift Container Platform web console.
The OpenShift Container Platform dashboard provides various cluster information, captured in individual dashboard cards.
The OpenShift Container Platform dashboard consists of the following cards:
Details provides a brief overview of informational cluster details.
Status include ok, error, warning, in progress, and unknown. Resources can add custom status names.
- Cluster ID
- Provider
- Version
Cluster Inventory details number of resources and associated statuses. It is helpful when intervention is required to resolve problems, including information about:
- Number of nodes
- Number of pods
- Persistent storage volume claims
- Bare metal hosts in the cluster, listed according to their state (only available in metal3 environment)
- Status helps administrators understand how cluster resources are consumed. Click on a resource to jump to a detailed page listing pods and nodes that consume the largest amount of the specified cluster resource (CPU, memory, or storage).
Cluster Utilization shows the capacity of various resources over a specified period of time, to help administrators understand the scale and frequency of high resource consumption, including information about:
- CPU time
- Memory allocation
- Storage consumed
- Network resources consumed
- Pod count
- Activity lists messages related to recent activity in the cluster, such as pod creation or virtual machine migration to another host.
3.2. Recognizing resource and project limits and quotas
You can view a graphical representation of available resources in the Topology view of the web console Developer perspective.
If a resource has a message about resource limitations or quotas being reached, a yellow border appears around the resource name. Click the resource to open a side panel to see the message. If the Topology view has been zoomed out, a yellow dot indicates that a message is available.
If you are using List View from the View Shortcuts menu, resources appear as a list. The Alerts column indicates if a message is available.
Chapter 4. Adding user preferences
You can change the default preferences for your profile to meet your requirements. You can set your default project, topology view (graph or list), editing medium (form or YAML), language preferences, and resource type.
The changes made to the user preferences are automatically saved.
4.1. Setting user preferences
You can set the default user preferences for your cluster.
Procedure
- Log in to the OpenShift Container Platform web console using your login credentials.
- Use the masthead to access the user preferences under the user profile.
In the General section:
- In the Theme field, you can set the theme that you want to work in. The console defaults to the selected theme each time you log in.
- In the Perspective field, you can set the default perspective you want to be logged in to. You can select the Administrator or the Developer perspective as required. If a perspective is not selected, you are logged into the perspective you last visited.
- In the Project field, select a project you want to work in. The console defaults to the project every time you log in.
- In the Topology field, you can set the topology view to default to the graph or list view. If not selected, the console defaults to the last view you used.
- In the Create/Edit resource method field, you can set a preference for creating or editing a resource. If both the form and YAML options are available, the console defaults to your selection.
- In the Language section, select Default browser language to use the default browser language settings. Otherwise, select the language that you want to use for the console.
- In the Notifications section, you can toggle display notifications created by users for specific projects on the Overview page or notification drawer.
In the Applications section:
- You can view the default Resource type. For example, if the OpenShift Serverless Operator is installed, the default resource type is Serverless Deployment. Otherwise, the default resource type is Deployment.
- You can select another resource type to be the default resource type from the Resource Type field.
Chapter 5. Configuring the web console in OpenShift Container Platform
You can modify the OpenShift Container Platform web console to set a logout redirect URL or disable the quick start tutorials.
5.1. Prerequisites
- Deploy an OpenShift Container Platform cluster.
5.2. Configuring the web console
You can configure the web console settings by editing the console.config.openshift.io
resource.
Edit the
console.config.openshift.io
resource:$ oc edit console.config.openshift.io cluster
The following example displays the sample resource definition for the console:
apiVersion: config.openshift.io/v1 kind: Console metadata: name: cluster spec: authentication: logoutRedirect: "" 1 status: consoleURL: "" 2
- 1
- Specify the URL of the page to load when a user logs out of the web console. If you do not specify a value, the user returns to the login page for the web console. Specifying a
logoutRedirect
URL allows your users to perform single logout (SLO) through the identity provider to destroy their single sign-on session. - 2
- The web console URL. To update this to a custom value, see Customizing the web console URL.
5.3. Disabling quick starts in the web console
You can use the Administrator perspective of the web console to disable one or more quick starts.
Prerequisites
- You have cluster administrator permissions and are logged in to the web console.
Procedure
- In the Administrator perspective, navigate to Administation → Cluster Settings.
- On the Cluster Settings page, click the Configuration tab.
On the Configuration page, click the Console configuration resource with the description operator.openshift.io.
- From the Action drop-down list, select Customize, which opens the Cluster configuration page.
On the General tab, in the Quick starts section, you can select items in either the Enabled or Disabled list, and move them from one list to the other by using the arrow buttons.
- To enable or disable a single quick start, click the quick start, then use the single arrow buttons to move the quick start to the appropriate list.
- To enable or disable multiple quick starts at once, press Ctrl and click the quick starts you want to move. Then, use the single arrow buttons to move the quick starts to the appropriate list.
- To enable or disable all quick starts at once, click the double arrow buttons to move all of the quick starts to the appropriate list.
Chapter 6. Customizing the web console in OpenShift Container Platform
You can customize the OpenShift Container Platform web console to set a custom logo, product name, links, notifications, and command line downloads. This is especially helpful if you need to tailor the web console to meet specific corporate or government requirements.
6.1. Adding a custom logo and product name
You can create custom branding by adding a custom logo or custom product name. You can set both or one without the other, as these settings are independent of each other.
Prerequisites
- You must have administrator privileges.
-
Create a file of the logo that you want to use. The logo can be a file in any common image format, including GIF, JPG, PNG, or SVG, and is constrained to a
max-height
of60px
. Image size must not exceed 1 MB due to constraints on theConfigMap
object size.
Procedure
Import your logo file into a config map in the
openshift-config
namespace:$ oc create configmap console-custom-logo --from-file /path/to/console-custom-logo.png -n openshift-config
TipYou can alternatively apply the following YAML to create the config map:
apiVersion: v1 kind: ConfigMap metadata: name: console-custom-logo namespace: openshift-config binaryData: console-custom-logo.png: <base64-encoded_logo> ... 1
- 1
- Provide a valid base64-encoded logo.
Edit the web console’s Operator configuration to include
customLogoFile
andcustomProductName
:$ oc edit consoles.operator.openshift.io cluster
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster spec: customization: customLogoFile: key: console-custom-logo.png name: console-custom-logo customProductName: My Console
Once the Operator configuration is updated, it will sync the custom logo config map into the console namespace, mount it to the console pod, and redeploy.
Check for success. If there are any issues, the console cluster Operator will report a
Degraded
status, and the console Operator configuration will also report aCustomLogoDegraded
status, but with reasons likeKeyOrFilenameInvalid
orNoImageProvided
.To check the
clusteroperator
, run:$ oc get clusteroperator console -o yaml
To check the console Operator configuration, run:
$ oc get consoles.operator.openshift.io -o yaml
6.2. Creating custom links in the web console
Prerequisites
- You must have administrator privileges.
Procedure
- From Administration → Custom Resource Definitions, click on ConsoleLink.
- Select Instances tab
Click Create Console Link and edit the file:
apiVersion: console.openshift.io/v1 kind: ConsoleLink metadata: name: example spec: href: 'https://www.example.com' location: HelpMenu 1 text: Link 1
- 1
- Valid location settings are
HelpMenu
,UserMenu
,ApplicationMenu
, andNamespaceDashboard
.
To make the custom link appear in all namespaces, follow this example:
apiVersion: console.openshift.io/v1 kind: ConsoleLink metadata: name: namespaced-dashboard-link-for-all-namespaces spec: href: 'https://www.example.com' location: NamespaceDashboard text: This appears in all namespaces
To make the custom link appear in only some namespaces, follow this example:
apiVersion: console.openshift.io/v1 kind: ConsoleLink metadata: name: namespaced-dashboard-for-some-namespaces spec: href: 'https://www.example.com' location: NamespaceDashboard # This text will appear in a box called "Launcher" under "namespace" or "project" in the web console text: Custom Link Text namespaceDashboard: namespaces: # for these specific namespaces - my-namespace - your-namespace - other-namespace
To make the custom link appear in the application menu, follow this example:
apiVersion: console.openshift.io/v1 kind: ConsoleLink metadata: name: application-menu-link-1 spec: href: 'https://www.example.com' location: ApplicationMenu text: Link 1 applicationMenu: section: My New Section # image that is 24x24 in size imageURL: https://via.placeholder.com/24
- Click Save to apply your changes.
6.3. Customizing console routes
For console
and downloads
routes, custom routes functionality uses the ingress
config route configuration API. If the console
custom route is set up in both the ingress
config and console-operator
config, then the new ingress
config custom route configuration takes precedent. The route configuration with the console-operator
config is deprecated.
6.3.1. Customizing the console route
You can customize the console route by setting the custom hostname and TLS certificate in the spec.componentRoutes
field of the cluster Ingress
configuration.
Prerequisites
- You have logged in to the cluster as a user with administrative privileges.
You have created a secret in the
openshift-config
namespace containing the TLS certificate and key. This is required if the domain for the custom hostname suffix does not match the cluster domain suffix. The secret is optional if the suffix matches.TipYou can create a TLS secret by using the
oc create secret tls
command.
Procedure
Edit the cluster
Ingress
configuration:$ oc edit ingress.config.openshift.io cluster
Set the custom hostname and optionally the serving certificate and key:
apiVersion: config.openshift.io/v1 kind: Ingress metadata: name: cluster spec: componentRoutes: - name: console namespace: openshift-console hostname: <custom_hostname> 1 servingCertKeyPairSecret: name: <secret_name> 2
- Save the file to apply the changes.
6.3.2. Customizing the download route
You can customize the download route by setting the custom hostname and TLS certificate in the spec.componentRoutes
field of the cluster Ingress
configuration.
Prerequisites
- You have logged in to the cluster as a user with administrative privileges.
You have created a secret in the
openshift-config
namespace containing the TLS certificate and key. This is required if the domain for the custom hostname suffix does not match the cluster domain suffix. The secret is optional if the suffix matches.TipYou can create a TLS secret by using the
oc create secret tls
command.
Procedure
Edit the cluster
Ingress
configuration:$ oc edit ingress.config.openshift.io cluster
Set the custom hostname and optionally the serving certificate and key:
apiVersion: config.openshift.io/v1 kind: Ingress metadata: name: cluster spec: componentRoutes: - name: downloads namespace: openshift-console hostname: <custom_hostname> 1 servingCertKeyPairSecret: name: <secret_name> 2
- Save the file to apply the changes.
6.4. Customizing the login page
Create Terms of Service information with custom login pages. Custom login pages can also be helpful if you use a third-party login provider, such as GitHub or Google, to show users a branded page that they trust and expect before being redirected to the authentication provider. You can also render custom error pages during the authentication process.
Customizing the error template is limited to identity providers (IDPs) that use redirects, such as request header and OIDC-based IDPs. It does not have an effect on IDPs that use direct password authentication, such as LDAP and htpasswd.
Prerequisites
- You must have administrator privileges.
Procedure
Run the following commands to create templates you can modify:
$ oc adm create-login-template > login.html
$ oc adm create-provider-selection-template > providers.html
$ oc adm create-error-template > errors.html
Create the secrets:
$ oc create secret generic login-template --from-file=login.html -n openshift-config
$ oc create secret generic providers-template --from-file=providers.html -n openshift-config
$ oc create secret generic error-template --from-file=errors.html -n openshift-config
Run:
$ oc edit oauths cluster
Update the specification:
apiVersion: config.openshift.io/v1 kind: OAuth metadata: name: cluster # ... spec: templates: error: name: error-template login: name: login-template providerSelection: name: providers-template
Run
oc explain oauths.spec.templates
to understand the options.
6.5. Defining a template for an external log link
If you are connected to a service that helps you browse your logs, but you need to generate URLs in a particular way, then you can define a template for your link.
Prerequisites
- You must have administrator privileges.
Procedure
- From Administration → Custom Resource Definitions, click on ConsoleExternalLogLink.
- Select Instances tab
Click Create Console External Log Link and edit the file:
apiVersion: console.openshift.io/v1 kind: ConsoleExternalLogLink metadata: name: example spec: hrefTemplate: >- https://example.com/logs?resourceName=${resourceName}&containerName=${containerName}&resourceNamespace=${resourceNamespace}&podLabels=${podLabels} text: Example Logs
6.6. Creating custom notification banners
Prerequisites
- You must have administrator privileges.
Procedure
- From Administration → Custom Resource Definitions, click on ConsoleNotification.
- Select Instances tab
Click Create Console Notification and edit the file:
apiVersion: console.openshift.io/v1 kind: ConsoleNotification metadata: name: example spec: text: This is an example notification message with an optional link. location: BannerTop 1 link: href: 'https://www.example.com' text: Optional link text color: '#fff' backgroundColor: '#0088ce'
- 1
- Valid location settings are
BannerTop
,BannerBottom
, andBannerTopBottom
.
- Click Create to apply your changes.
6.7. Customizing CLI downloads
You can configure links for downloading the CLI with custom link text and URLs, which can point directly to file packages or to an external page that provides the packages.
Prerequisites
- You must have administrator privileges.
Procedure
- Navigate to Administration → Custom Resource Definitions.
- Select ConsoleCLIDownload from the list of Custom Resource Definitions (CRDs).
Click the YAML tab, and then make your edits:
apiVersion: console.openshift.io/v1 kind: ConsoleCLIDownload metadata: name: example-cli-download-links spec: description: | This is an example of download links displayName: example links: - href: 'https://www.example.com/public/example.tar' text: example for linux - href: 'https://www.example.com/public/example.mac.zip' text: example for mac - href: 'https://www.example.com/public/example.win.zip' text: example for windows
- Click the Save button.
6.8. Adding YAML examples to Kubernetes resources
You can dynamically add YAML examples to any Kubernetes resources at any time.
Prerequisites
- You must have cluster administrator privileges.
Procedure
- From Administration → Custom Resource Definitions, click on ConsoleYAMLSample.
Click YAML and edit the file:
apiVersion: console.openshift.io/v1 kind: ConsoleYAMLSample metadata: name: example spec: targetResource: apiVersion: batch/v1 kind: Job title: Example Job description: An example Job YAML sample yaml: | apiVersion: batch/v1 kind: Job metadata: name: countdown spec: template: metadata: name: countdown spec: containers: - name: counter image: centos:7 command: - "bin/bash" - "-c" - "for i in 9 8 7 6 5 4 3 2 1 ; do echo $i ; done" restartPolicy: Never
Use
spec.snippet
to indicate that the YAML sample is not the full YAML resource definition, but a fragment that can be inserted into the existing YAML document at the user’s cursor.- Click Save.
6.9. Customizing user perspectives
The OpenShift Container Platform web console provides two perspectives by default, Administrator and Developer. You might have more perspectives available depending on installed console plugins. As a cluster administrator, you can show or hide a perspective for all users or for a specific user role. Customizing perspectives ensures that users can view only the perspectives that are applicable to their role and tasks. For example, you can hide the Administrator perspective from unprivileged users so that they cannot manage cluster resources, users, and projects. Similarly, you can show the Developer perspective to users with the developer role so that they can create, deploy, and monitor applications.
You can also customize the perspective visibility for users based on role-based access control (RBAC). For example, if you customize a perspective for monitoring purposes, which requires specific permissions, you can define that the perspective is visible only to users with required permissions.
Each perspective includes the following mandatory parameters, which you can edit in the YAML view:
-
id
: Defines the ID of the perspective to show or hide -
visibility
: Defines the state of the perspective along with access review checks, if needed -
state
: Defines whether the perspective is enabled, disabled, or needs an access review check
By default, all perspectives are enabled. When you customize the user perspective, your changes are applicable to the entire cluster.
6.9.1. Customizing a perspective using YAML view
Prerequisites
- You must have administrator privileges.
Procedure
- In the Administrator perspective, navigate to Administration → Cluster Settings.
- Select the Configuration tab and click the Console (operator.openshift.io) resource.
Click the YAML tab and make your customization:
To enable or disable a perspective, insert the snippet for Add user perspectives and edit the YAML code as needed:
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster spec: customization: perspectives: - id: admin visibility: state: Enabled - id: dev visibility: state: Enabled
To hide a perspective based on RBAC permissions, insert the snippet for Hide user perspectives and edit the YAML code as needed:
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster spec: customization: perspectives: - id: admin requiresAccessReview: - group: rbac.authorization.k8s.io resource: clusterroles verb: list - id: dev state: Enabled
To customize a perspective based on your needs, create your own YAML snippet:
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster spec: customization: perspectives: - id: admin visibility: state: AccessReview accessReview: missing: - resource: deployment verb: list required: - resource: namespaces verb: list - id: dev visibility: state: Enabled
- Click Save.
6.9.2. Customizing a perspective using form view
Prerequisites
- You must have administrator privileges.
Procedure
- In the Administrator perspective, navigate to Administration → Cluster Settings.
- Select the Configuration tab and click the Console (operator.openshift.io) resource.
- Click Actions → Customize on the right side of the page.
In the General settings, customize the perspective by selecting one of the following options from the dropdown list:
- Enabled: Enables the perspective for all users
- Only visible for privileged users: Enables the perspective for users who can list all namespaces
- Only visible for unprivileged users: Enables the perspective for users who cannot list all namespaces
Disabled: Disables the perspective for all users
A notification opens to confirm that your changes are saved.
NoteWhen you customize the user perspective, your changes are automatically saved and take effect after a browser refresh.
6.10. Developer catalog and sub-catalog customization
As a cluster administrator, you have the ability to organize and manage the Developer catalog or its sub-catalogs. You can enable or disable the sub-catalog types or disable the entire developer catalog.
The developerCatalog.types
object includes the following parameters that you must define in a snippet to use them in the YAML view:
-
state
: Defines if a list of developer catalog types should be enabled or disabled. -
enabled
: Defines a list of developer catalog types (sub-catalogs) that are visible to users. -
disabled
: Defines a list of developer catalog types (sub-catalogs) that are not visible to users.
You can enable or disable the following developer catalog types (sub-catalogs) using the YAML view or the form view.
-
Builder Images
-
Templates
-
Devfiles
-
Samples
-
Helm Charts
-
Event Sources
-
Event Sinks
-
Operator Backed
6.10.1. Customizing a developer catalog or its sub-catalogs using the YAML view
You can customize a developer catalog by editing the YAML content in the YAML view.
Prerequisites
- An OpenShift web console session with cluster administrator privileges.
Procedure
- In the Administrator perspective of the web console, navigate to Administration → Cluster Settings.
- Select the Configuration tab, click the Console (operator.openshift.io) resource and view the Details page.
Click the YAML tab to open the editor and edit the YAML content as needed.
For example, to disable a developer catalog type, insert the following snippet that defines a list of disabled developer catalog resources:
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster ... spec: customization: developerCatalog: categories: types: state: Disabled disabled: - BuilderImage - Devfile - HelmChart ...
- Click Save.
By default, the developer catalog types are enabled in the Administrator view of the Web Console.
6.10.2. Customizing a developer catalog or its sub-catalogs using the form view
You can customize a developer catalog by using the form view in the Web Console.
Prerequisites
- An OpenShift web console session with cluster administrator privileges.
- The Developer perspective is enabled.
Procedure
- In the Administrator perspective, navigate to Administration → Cluster Settings.
- Select the Configuration tab and click the Console (operator.openshift.io) resource.
- Click Actions → Customize.
Enable or disable items in the Pre-pinned navigation items, Add page, and Developer Catalog sections.
Verification
After you have customized the developer catalog, your changes are automatically saved in the system and take effect in the browser after a refresh.
As an administrator, you can define the navigation items that appear by default for all users. You can also reorder the navigation items.
You can use a similar procedure to customize Web UI items such as Quick starts, Cluster roles, and Actions.
6.10.2.1. Example YAML file changes
You can dynamically add the following snippets in the YAML editor for customizing a developer catalog.
Use the following snippet to display all the sub-catalogs by setting the state type to Enabled.
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster ... spec: customization: developerCatalog: categories: types: state: Enabled
Use the following snippet to disable all sub-catalogs by setting the state type to Disabled:
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster ... spec: customization: developerCatalog: categories: types: state: Disabled
Use the following snippet when a cluster administrator defines a list of sub-catalogs, which are enabled in the Web Console.
apiVersion: operator.openshift.io/v1 kind: Console metadata: name: cluster ... spec: customization: developerCatalog: categories: types: state: Enabled enabled: - BuilderImage - Devfile - HelmChart - ...
Chapter 7. Dynamic plugins
7.1. Overview of dynamic plugins
7.1.1. About dynamic plugins
Dynamic plugins are loaded and interpreted from remote sources at runtime. One way to deliver and expose dynamic plugins to the console is through OLM Operators. The Operator creates a deployment on the platform with an HTTP server to host the plugin and exposes it using a Kubernetes service.
Dynamic plugins allow you to add custom pages and other extensions to your console user interface at runtime. The ConsolePlugin
custom resource registers plugins with the console, and a cluster administrator enables plugins in the console Operator configuration.
7.1.2. Key features
A dynamic plugin allows you to make the following customizations to the OpenShift Container Platform experience:
- Add custom pages.
- Add perspectives beyond administrator and developer.
- Add navigation items.
- Add tabs and actions to resource pages.
7.1.3. General guidelines
When creating your plugin, follow these general guidelines:
-
Node.js
andyarn
are required to build and run your plugin. -
Prefix your CSS class names with your plugin name to avoid collisions. For example,
my-plugin__heading
andmy-plugin_\_icon
. - Maintain a consistent look, feel, and behavior with other console pages.
Follow react-i18next localization guidelines when creating your plugin. You can use the
useTranslation
hook like the one in the following example:conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
- Avoid selectors that could affect markup outside of your plugins components, such as element selectors. These are not APIs and are subject to change. Using them might break your plugin. Avoid selectors like element selectors that could affect markup outside of your plugins components.
-
Provide valid JavaScript Multipurpose Internet Mail Extension (MIME) type using the
Content-Type
response header for all assets served by your plugin web server. Each plugin deployment should include a web server that hosts the generated assets of the given plugin. - You must build your plugin with Webpack using Webpack version 5 and later.
-
You should prefix CSS class names with your plugin name to avoid collisions. For example,
my-plugin__heading
andmy-plugin_\_icon
. - You should maintain a consistent look, feel, and behavior with other console pages.
- You should avoid selectors that could affect markup outside of your plugin components, such as element selectors. These are not APIs and are subject to change.
-
You must provide a valid JavaScript Multipurpose Internet Mail Extension (MIME) type using the
Content-Type
response header for all assets served by your plugin web server. Each plugin deployment should include a web server that hosts the generated assets of the given plugin.
PatternFly guidelines
When creating your plugin, follow these guidelines for using PatternFly:
Use PatternFly components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables help your plugin look consistent in future console versions.
- Use Patternfly 4.x if you are using OpenShift Container Platform versions 4.14 and earlier.
- Use Patternfly 5.x if you are using OpenShift Container Platform 4.15 or later.
- Make your plugin accessible by following PatternFly’s accessibility fundamentals.
-
Avoid using other CSS libraries such as Bootstrap or Tailwind. They might conflict with PatternFly and not match the rest of the console. Plugins should only include styles that are specific to their user interfaces to be evaluated on top of base PatternFly styles. Avoid importing styles such as
@patternfly/react-styles/*/.css
or any styles from the@patternfly/patternfly
package in your plugin. - The console application is responsible for loading base styles for all supported PatternFly version(s).
7.1.3.1. Translating messages with react-i18next
The plugin template demonstrates how you can translate messages with react-i18next.
Prerequisites
- You must have the plugin template cloned locally.
- Optional: To test your plugin locally, run the OpenShift Container Platform web console in a container. You can use either Docker or Podman 3.2.0 or later.
Procedure
Prefix the name with
plugin__
to avoid any naming conflicts. The plugin template uses theplugin__console-plugin-template
namespace by default, and you must update when you rename your plugin for example,plugin__my-plugin
. You can use theuseTranslation
hook, for example:conster Header: React.FC = () => { const { t } = useTranslation('plugin__console-demo-plugin'); return <h1>{t('Hello, World!')}</h1>; };
ImportantYou must match the
i18n
namespace with the name of theConsolePlugin
resource.Set the
spec.i18n.loadType
field based on needed behavior.Example 7.1.
plugin__console-demo-plugin
spec: backend: service: basePath: / name: console-demo-plugin namespace: console-demo-plugin port: 9001 type: Service displayName: OpenShift Console Demo Plugin i18n: loadType: Preload 1
- 1
- Loads all the plugin’s localization resources from the
i18n
namespace after the dynamic plugin during loading.
Use the format
%plugin__console-plugin-template~My Label%
for labels inconsole-extensions.json
. The console replaces the value with the message for the current language from theplugin__console-plugin-template
namespace. For example:{ "type": "console.navigation/section", "properties": { "id": "admin-demo-section", "perspective": "admin", "name": "%plugin__console-plugin-template~Plugin Template%" } }
Include a comment in a TypeScript file for i18next-parser to add the message from
console-extensions.json
to your message catalog. For example:// t('plugin__console-demo-plugin~Demo Plugin')
To update the JSON files in the
locales
folder of the plugin template when adding or changing a message, run the following command:$ yarn i18n
7.2. Getting started with dynamic plugins
To get started using the dynamic plugin, you must set up your environment to write a new OpenShift Container Platform dynamic plugin. For an example of how to write a new plugin, see Adding a tab to the pods page.
7.2.1. Dynamic plugin development
You can run the plugin using a local development environment. The OpenShift Container Platform web console runs in a container connected to the cluster you have logged into.
Prerequisites
You must have cloned the
console-plugin-template
repository, which contains a template for creating plugins.ImportantRed Hat does not support custom plugin code. Only Cooperative community support is available for your plugin.
- You must have an OpenShift Container Platform cluster running.
-
You must have the OpenShift CLI (
oc
) installed. -
You must have
yarn
installed. - You must have Docker v3.2.0 or later or Podman v3.2.0 or later installed and running.
Procedure
- Open two terminal windows.
In one terminal window, run the following command to install the dependencies for your plugin using yarn.
$ yarn install
After installing, run the following command to start yarn.
$ yarn run start
In another terminal window, login to the OpenShift Container Platform through the CLI.
$ oc login
Run the OpenShift Container Platform web console in a container connected to the cluster you have logged into by running the following command:
$ yarn run start-console
NoteThe
yarn run start-console
command runs anamd64
image and might fail when run with Apple Silicon and Podman. You can work around it withqemu-user-static
by running the following commands:$ podman machine ssh $ sudo -i $ rpm-ostree install qemu-user-static $ systemctl reboot
Verification
-
Visit localhost:9000 to view the running plugin. Inspect the value of
window.SERVER_FLAGS.consolePlugins
to see the list of plugins which load at runtime.
7.3. Deploy your plugin on a cluster
You can deploy the plugin to a OpenShift Container Platform cluster.
7.3.1. Build an image with Docker
To deploy your plugin on a cluster, you need to build an image and push it to an image registry first.
Procedure
Build the image with the following command:
$ docker build -t quay.io/my-repositroy/my-plugin:latest .
Optional: If you want to test your image, run the following command:
$ docker run -it --rm -d -p 9001:80 quay.io/my-repository/my-plugin:latest
Push the image by running the following command:
$ docker push quay.io/my-repository/my-plugin:latest
7.3.2. Deploy your plugin on a cluster
After pushing an image with your changes to a registry, you can deploy the plugin to a cluster using a Helm chart.
Prerequisites
You must have the location of the image containing the plugin that was previously pushed.
NoteYou can specify additional parameters based on the needs of your plugin. The
values.yaml
file provides a full set of supported parameters.
Procedure
To deploy your plugin to a cluster, install a Helm chart with the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the
-n
command-line option. Provide the location of the image within theplugin.image
parameter by using the following command:$ helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
Where:
n <my-plugin-namespace>
- Specifies an existing namespace to deploy your plugin into.
--create-namespace
- Optional: If deploying to a new namespace, use this parameter.
--set plugin.image=my-plugin-image-location
-
Specifies the location of the image within the
plugin.image
parameter.
NoteIf you are deploying on OpenShift Container Platform 4.10 and later, it is recommended to exclude configurations related to pod security by adding the parameter
--set plugin.securityContext.enabled=false
.Optional: You can specify any additional parameters by using the set of supported parameters in the
charts/openshift-console-plugin/values.yaml
file.plugin: name: "" description: "" image: "" imagePullPolicy: IfNotPresent replicas: 2 port: 9443 securityContext: enabled: true podSecurityContext: enabled: true runAsNonRoot: true seccompProfile: type: RuntimeDefault containerSecurityContext: enabled: true allowPrivilegeEscalation: false capabilities: drop: - ALL resources: requests: cpu: 10m memory: 50Mi basePath: / certificateSecretName: "" serviceAccount: create: true annotations: {} name: "" patcherServiceAccount: create: true annotations: {} name: "" jobs: patchConsoles: enabled: true image: "registry.redhat.io/openshift4/ose-tools-rhel8@sha256:e44074f21e0cca6464e50cb6ff934747e0bd11162ea01d522433a1a1ae116103" podSecurityContext: enabled: true runAsNonRoot: true seccompProfile: type: RuntimeDefault containerSecurityContext: enabled: true allowPrivilegeEscalation: false capabilities: drop: - ALL resources: requests: cpu: 10m memory: 50Mi
Verification
-
View the list of enabled plugins by navigating from Administration → Cluster Settings → Configuration → Console
operator.openshift.io
→ Console plugins or by visiting the Overview page.
It can take a few minutes for the new plugin configuration to appear. If you do not see your plugin, you might need to refresh your browser if the plugin was recently enabled. If you receive any errors at runtime, check the JS console in browser developer tools to look for any errors in your plugin code.
7.3.3. Plugin service proxy
If you need to make HTTP requests to an in-cluster service from your plugin, you can declare a service proxy in its ConsolePlugin
resource by using the spec.proxy
array field. The console backend exposes the /api/proxy/plugin/<plugin-name>/<proxy-alias>/<request-path>?<optional-query-parameters>
endpoint to proxy the communication between the plugin and the service. A proxied request uses a service CA bundle by default. The service must use HTTPS.
The plugin must use the consolefetch
API to make requests from its JavaScript code or some requests might fail. For more information, see "Dynamic plugin API".
For each entry, you must specify an endpoint and alias of the proxy under the endpoint
and alias
fields. For the Service proxy type, you must set the endpoint type
field to Service
and the service
must include values for the name
, namespace
, and port
fields. For example, /api/proxy/plugin/helm/helm-charts/releases?limit=10
is a proxy request path from the helm
plugin with a helm-charts
service that lists ten helm releases.
Example service proxy
apiVersion: console.openshift.io/v1 kind: ConsolePlugin metadata: name:<plugin-name> spec: proxy: - alias: helm-charts 1 authorization: UserToken 2 caCertificate: '-----BEGIN CERTIFICATE-----\nMIID....'en 3 endpoint: 4 service: name: <service-name> namespace: <service-namespace> port: <service-port> type: Service
- 1
- Alias of the proxy.
- 2
- If the service proxy request must contain the logged-in user’s OpenShift Container Platform access token, you must set the authorization field to
UserToken
.NoteIf the service proxy request does not contain the logged-in user’s OpenShift Container Platform access token, set the authorization field to
None
. - 3
- If the service uses a custom service CA, the
caCertificate
field must contain the certificate bundle. - 4
- Endpoint of the proxy.
7.3.4. Disabling your plugin in the browser
Console users can use the disable-plugins
query parameter to disable specific or all dynamic plugins that would normally get loaded at run-time.
Procedure
- To disable a specific plugin(s), remove the plugin you want to disable from the comma-separated list of plugin names.
-
To disable all plugins, leave an empty string in the
disable-plugins
query parameter.
Cluster administrators can disable plugins in the Cluster Settings page of the web console.
7.3.5. Additional resources
7.4. Dynamic plugin example
Before working through the example, verify that the plugin is working by following the steps in Dynamic plugin development
7.4.1. Adding a tab to the pods page
There are different customizations you can make to the OpenShift Container Platform web console. The following procedure adds a tab to the Pod details page as an example extension to your plugin.
The OpenShift Container Platform web console runs in a container connected to the cluster you have logged into. See "Dynamic plugin development" for information to test the plugin before creating your own.
Procedure
Visit the
console-plugin-template
repository containing a template for creating plugins in a new tab.ImportantCustom plugin code is not supported by Red Hat. Only Cooperative community support is available for your plugin.
- Create a GitHub repository for the template by clicking Use this template → Create new repository.
- Rename the new repository with the name of your plugin.
- Clone the new repository to your local machine so you can edit the code.
Edit the
package.json
file, adding your plugin’s metadata to theconsolePlugin
declaration. For example:"consolePlugin": { "name": "my-plugin", 1 "version": "0.0.1", 2 "displayName": "My Plugin", 3 "description": "Enjoy this shiny, new console plugin!", 4 "exposedModules": { "ExamplePage": "./components/ExamplePage" }, "dependencies": { "@console/pluginAPI": "/*" } }
Add the following to the
console-extensions.json
file:{ "type": "console.tab/horizontalNav", "properties": { "page": { "name": "Example Tab", "href": "example" }, "model": { "group": "core", "version": "v1", "kind": "Pod" }, "component": { "$codeRef": "ExampleTab" } } }
Edit the
package.json
file to include the following changes:"exposedModules": { "ExamplePage": "./components/ExamplePage", "ExampleTab": "./components/ExampleTab" }
Write a message to display on a new custom tab on the Pods page by creating a new file
src/components/ExampleTab.tsx
and adding the following script:import * as React from 'react'; export default function ExampleTab() { return ( <p>This is a custom tab added to a resource using a dynamic plugin.</p> ); }
Install a Helm chart with the name of the plugin as the Helm release name into a new namespace or an existing namespace as specified by the
-n
command-line option to deploy your plugin on a cluster. Provide the location of the image within theplugin.image
parameter by using the following command:$ helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
NoteFor more information on deploying your plugin on a cluster, see "Deploy your plugin on a cluster".
Verification
- Visit a Pod page to view the added tab.
7.5. Dynamic plugin reference
You can add extensions that allow you to customize your plugin. Those extensions are then loaded to the console at run-time.
7.5.1. Dynamic plugin extension types
console.action/filter
ActionFilter
can be used to filter an action.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The context ID helps to narrow the scope of contributed actions to a particular area of the application. Examples include |
|
| no | A function that will filter actions based on some conditions.
|
console.action/group
ActionGroup
contributes an action group that can also be a submenu.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID used to identify the action section. |
|
| yes | The label to display in the UI. Required for submenus. |
|
| yes | Whether this group should be displayed as submenu. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. The |
console.action/provider
ActionProvider
contributes a hook that returns list of actions for specific context.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The context ID helps to narrow the scope of contributed actions to a particular area of the application. Examples include |
|
| no |
A React hook that returns actions for the given scope. If |
console.action/resource-provider
ResourceActionProvider
contributes a hook that returns list of actions for specific resource model.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this provider provides actions for. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
Alert name as defined by |
|
| no | |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The unique identifier for the catalog this provider contributes to. |
|
| no | Type ID for the catalog item type. |
|
| no |
Filters items of a specific type. Value is a function that takes |
console.catalog/item-metadata
This extension can be used to contribute a provider that adds extra metadata to specific catalog items.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The unique identifier for the catalog this provider contributes to. |
|
| no | Type ID for the catalog item type. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The unique identifier for the catalog this provider contributes to. |
|
| no | Type ID for the catalog item type. |
|
| no | Title for the catalog item provider |
|
| no | Fetch items and normalize it for the catalog. Value is a react effect hook. |
|
| yes |
Priority for this provider. Defaults to |
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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Type for the catalog item. |
|
| no | Title for the catalog item. |
|
| yes | Description for the type specific catalog. |
|
| yes | Description for the catalog item type. |
|
| yes | Custom filters specific to the catalog item. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Type for the catalog item. |
|
| yes | Custom filters specific to the catalog item. |
|
| yes | Custom groupings specific to the catalog item. |
console.cluster-overview/inventory-item
Adds a new inventory item into cluster overview page.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The component to be rendered. |
console.cluster-overview/multiline-utilization-item
Adds a new cluster overview multi-line utilization item.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The title of the utilization item. |
|
| no | Prometheus utilization query. |
|
| no | Convert Prometheus data to human-readable form. |
|
| yes | Shows Top consumer popover instead of plain value. |
console.cluster-overview/utilization-item
Adds a new cluster overview utilization item.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The title of the utilization item. |
|
| no | Prometheus utilization query. |
|
| no | Convert Prometheus data to human-readable form. |
|
| yes | Prometheus total query. |
|
| yes | Prometheus request query. |
|
| yes | Prometheus limit query. |
|
| yes | Shows Top consumer popover instead of plain value. |
console.context-provider
Adds a new React context provider to the web console application root.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Context Provider component. |
|
| no | Hook for the Context value. |
console.dashboards/card
Adds a new dashboard card.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The ID of the dashboard tab to which the card will be added. |
|
| no | The grid position of the card on the dashboard. |
|
| no | Dashboard card component. |
|
| yes |
Card’s vertical span in the column. Ignored for small screens; defaults to |
console.dashboards/custom/overview/detail/item
Adds an item to the Details card of Overview Dashboard.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Details card title |
|
| no | The value, rendered by the OverviewDetailItem component |
|
| yes | Value for a className |
|
| yes | Function returning the loading state of the component |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The utilization item to be replaced. |
|
| no | The action component. |
|
| yes | Function which determines if the given resource represents the action. If not defined, every resource represents activity. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Title of Operators section in the pop-up menu. |
|
| no |
Kubernetes resources which will be fetched and passed to |
|
| yes | Resolves status for the Operators. |
|
| yes | Loader for pop-up row component. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The display name of the subsystem. |
|
| no | The Prometheus queries. |
|
| no | Resolve the subsystem’s health. |
|
| yes |
Additional resource which will be fetched and passed to |
|
| 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. |
|
| yes | The title of the popover. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The display name of the subsystem. |
|
| no |
Kubernetes resources that will be fetched and passed to |
|
| no | Resolve the subsystem’s health. |
|
| 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. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The display name of the subsystem. |
|
| no | The URL to fetch data from. It will be prefixed with base Kubernetes URL. |
|
| no | Resolve the subsystem’s health. |
|
| yes |
Additional resource which will be fetched and passed to |
|
| yes | Loader for popup content. If defined, a health item will be represented as a link which opens popup with given content. |
|
| yes | The title of the popover. |
console.dashboards/overview/inventory/item
Adds a resource tile to the overview inventory card.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The model for |
|
| yes | Function which maps various statuses to groups. |
|
| yes |
Additional resources which will be fetched and passed to the |
console.dashboards/overview/inventory/item/group
Adds an inventory status group.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The ID of the status group. |
|
| no | React component representing the status group icon. |
console.dashboards/overview/inventory/item/replacement
Replaces an overview inventory card.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The model for |
|
| yes | Function which maps various statuses to groups. |
|
| yes |
Additional resources which will be fetched and passed to the |
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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Queries to watch. |
|
| no | The action component. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The model for |
|
| yes | Function which maps various statuses to groups. |
|
| yes |
Additional resources which will be fetched and passed to the |
console.dashboards/tab
Adds a new dashboard tab, placed after the Overview tab.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
A unique tab identifier, used as tab link |
|
| no | Navigation section to which the tab belongs to. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Supported file extensions. |
|
| no | Function which handles the file drop action. |
console.flag
Gives full control over the web console feature flags.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Used to set or unset arbitrary feature flags. |
console.flag/hookProvider
Gives full control over the web console feature flags with hook handlers.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The name of the flag to set after the CRD is detected. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Unique identifier for the cluster config resource instance. |
|
| no | The name of the cluster config resource instance. |
|
| no | The model which refers to a cluster config resource. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model to customize. May specify only a group, or optional version and kind. |
|
| yes | Whether to consider this model reference as Technology Preview or Developer Preview. |
|
| yes | The color to associate to this model. |
|
| yes |
Override the label. Requires |
|
| yes |
Override the plural label. Requires |
|
| yes |
Customize the abbreviation. Defaults to all uppercase characters in |
console.navigation/href
This extension can be used to contribute a navigation item that points to a specific link in the UI.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this item. |
|
| no | The name of this item. |
|
| no |
The link |
|
| yes | The perspective ID to which this item belongs to. If not specified, contributes to the default perspective. |
|
| yes | Navigation section to which this item belongs to. If not specified, render this item as a top level link. |
|
| yes | Adds data attributes to the DOM. |
|
| yes | Mark this item as active when the URL starts with one of these paths. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
If |
|
| yes |
If |
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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this item. |
|
| no | The model for which this navigation item links to. |
|
| yes | The perspective ID to which this item belongs to. If not specified, contributes to the default perspective. |
|
| yes | Navigation section to which this item belongs to. If not specified, render this item as a top-level link. |
|
| yes | Adds data attributes to the DOM. |
|
| yes | Mark this item as active when the URL starts with one of these paths. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this item. |
|
| no | The model for which this navigation item links to. |
|
| yes | The perspective ID to which this item belongs to. If not specified, contributes to the default perspective. |
|
| yes | Navigation section to which this item belongs to. If not specified, render this item as a top-level link. |
|
| yes | Adds data attributes to the DOM. |
|
| yes | Mark this item as active when the URL starts with one of these paths. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this item. |
|
| yes | The perspective ID to which this item belongs to. If not specified, contributes to the default perspective. |
|
| yes | Adds data attributes to the DOM. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this item. |
|
| yes | The perspective ID to which this item belongs to. If not specified, contributes to the default perspective. |
|
| yes | Navigation section to which this item belongs to. If not specified, render this item as a top level link. |
|
| yes | Adds data attributes to the DOM. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. |
console.page/resource/details
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this resource page links to. |
|
| no | The component to be rendered when the route matches. |
console.page/resource/list
Adds new resource list page to Console router.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this resource page links to. |
|
| no | The component to be rendered when the route matches. |
console.page/route
Adds a new page to the web console router. See React Router.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The component to be rendered when the route matches. |
|
| no |
Valid URL path or array of paths that |
|
| yes | The perspective to which this page belongs to. If not specified, contributes to all perspectives. |
|
| yes |
When true, will only match if the path matches the |
console.page/route/standalone
Adds a new standalone page, rendered outside the common page layout, to the web console router. See React Router.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The component to be rendered when the route matches. |
|
| no |
Valid URL path or array of paths that |
|
| yes |
When true, will only match if the path matches the |
console.perspective
This extension contributes a new perspective to the console, which enables customization of the navigation menu.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The perspective identifier. |
|
| no | The perspective display name. |
|
| no | The perspective display icon. |
|
| no | The function to get perspective landing page URL. |
|
| no | The function to get redirect URL for import flow. |
|
| yes | Whether the perspective is the default. There can only be one default. |
|
| yes | Default pinned resources on the nav |
|
| yes | The hook to detect default perspective |
console.project-overview/inventory-item
Adds a new inventory item into the Project Overview page.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The component to be rendered. |
console.project-overview/utilization-item
Adds a new project overview utilization item.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The title of the utilization item. |
|
| no | Prometheus utilization query. |
|
| no | Convert Prometheus data to human-readable form. |
|
| yes | Prometheus total query. |
|
| yes | Prometheus request query. |
|
| yes | Prometheus limit query. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Label for the create prop action. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Predicate that tells whether to use the extension or not. |
|
| no | Method for the PVC delete operation. |
|
| no | Alert component to show additional information. |
console.pvc/status
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Priority for the status component. A larger value means higher priority. |
|
| no | The status component. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The key to represent the reducer-managed substate within the Redux state object. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this create resource page will be rendered |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The subject resource’s API group, version, and kind. |
|
| no | A unique identifier. |
|
| no | Determines if the item will appear in the 'left' or 'right' column of the resource summary on the details page. Default: 'right' |
|
| no | The details item title. |
|
| yes | An optional, fully-qualified path to a resource property to used as the details item value. Only primitive type values can be rendered directly. Use the component property to handle other data types. |
|
| yes | An optional React component that will render the details item value. |
|
| yes | An optional sort weight, relative to all other details items in the same column. Represented by any valid 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| yes | Container Storage Interface provisioner type |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Displayed name of the provider. |
|
| no | Provider specific component to render. |
console.tab
Adds a tab to a horizontal nav matching the contextId
.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
Context ID assigned to the horizontal nav in which the tab will be injected. Possible values: |
|
| no | The display label of the tab |
|
| no |
The |
|
| no | Tab content component. |
console.tab/horizontalNav
This extension can be used to add a tab on the resource details page.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this provider show tab. |
|
| no | The page to be show in horizontal tab. It takes tab name as name and href of the tab |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Adapter to adapt element to data that can be used by Pod component. |
console.topology/component/factory
Getter for a ViewComponentFactory
.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
Getter for a |
console.topology/create/connector
Getter for the create connector function.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Getter for the create connector function. |
console.topology/data/factory
Topology Data Model Factory Extension
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Unique ID for the factory. |
|
| no | Priority for the factory |
|
| yes |
Resources to be fetched from |
|
| yes | Keys in resources containing workloads. |
|
| yes | Getter for the data model factory. |
|
| yes | Getter for function to determine if a resource is depicted by this model factory. |
|
| yes | Getter for function to reconcile data model after all extensions' models have loaded. |
console.topology/decorator/provider
Topology Decorator Provider Extension
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID for topology decorator specific to the extension |
|
| no | Priority for topology decorator specific to the extension |
|
| no | Quadrant for topology decorator specific to the extension |
|
| no | Decorator specific to the extension |
console.topology/details/resource-alert
DetailsResourceAlert
contributes an alert for specific topology context or graph element.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The ID of this alert. Used to save state if the alert should not be shown after dismissed. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
Return the resource link if provided, otherwise undefined. Use the |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this details tab. |
|
| no | The tab label to display in the UI. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. The |
console.topology/details/tab-section
DetailsTabSection
contributes a section for a specific tab in the topology details panel.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | A unique identifier for this details tab section. |
|
| no | The parent tab ID that this section should contribute to. |
|
| no |
A hook that returns a component, or if null or undefined, renders in the topology sidebar. SDK component: |
|
| no | Deprecated: Fallback if no provider is defined. renderNull is a no-op already. |
|
| yes | Insert this item before the item referenced here. For arrays, the first one found in order is used. |
|
| yes |
Insert this item after the item referenced here. For arrays, the first one found in order is used. The |
console.topology/display/filters
Topology Display Filters Extension
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Getter for topology filters specific to the extension |
|
| no | Function to apply filters to the model |
console.topology/relationship/provider
Topology relationship provider connector extension
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Use to determine if a connection can be created between the source and target node |
|
| no | Tooltip to show when connector operation is hovering over the drop target, for example, "Create a Visual Connector" |
|
| no | Callback to execute when connector is drop over target node to create a connection |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID used to identify the user preference group. |
|
| no | The label of the user preference group |
|
| yes | ID of user preference group before which this group should be placed |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID used to identify the user preference item and referenced in insertAfter and insertBefore to define the item order |
|
| no | The label of the user preference |
|
| no | The description of the user preference |
|
| no | The input field options used to render the values to set the user preference |
|
| yes | IDs used to identify the user preference groups the item would belong to |
|
| yes | ID of user preference item before which this item should be placed |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Model associated with the template. |
|
| no | The YAML template. |
|
| no |
The name of the template. Use the name |
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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID used to identify the action. |
|
| no | The label of the action. |
|
| no | The description of the action. |
|
| no |
The |
|
| yes | IDs used to identify the action groups the action would belong to. |
|
| yes | The perspective display icon. |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | ID used to identify the action group |
|
| no | The title of the action group |
|
| yes | ID of action group before which this group should be placed |
|
| 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.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | Name of the image stream to provide custom environment variables for |
|
| no | List of supported image stream tags |
|
| no | List of environment variables |
console.dashboards/overview/detail/item
Deprecated. use CustomOverviewDetailItem
type instead
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no |
The value, based on the |
console.page/resource/tab
Deprecated. Use console.tab/horizontalNav
instead. Adds a new resource tab page to Console router.
Name | Value Type | Optional | Description |
---|---|---|---|
|
| no | The model for which this resource page links to. |
|
| no | The component to be rendered when the route matches. |
|
| no | The name of the tab. |
|
| yes |
The optional |
|
| yes |
When true, will only match if the path matches the |
7.5.2. Dynamic plugin API
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
const Component: React.FC = (props) => { const [activePerspective, setActivePerspective] = useActivePerspective(); return <select value={activePerspective} onChange={(e) => setActivePerspective(e.target.value)} > { // ...perspective options } </select> }
GreenCheckCircleIcon
Component for displaying a green check mark circle icon.
Example
<GreenCheckCircleIcon title="Healthy" />
Parameter Name | Description |
---|---|
| (optional) additional class name for the component |
| (optional) icon title |
|
(optional) icon size: ( |
RedExclamationCircleIcon
Component for displaying a red exclamation mark circle icon.
Example
<RedExclamationCircleIcon title="Failed" />
Parameter Name | Description |
---|---|
| (optional) additional class name for the component |
| (optional) icon title |
|
(optional) icon size: ( |
YellowExclamationTriangleIcon
Component for displaying a yellow triangle exclamation icon.
Example
<YellowExclamationTriangleIcon title="Warning" />
Parameter Name | Description |
---|---|
| (optional) additional class name for the component |
| (optional) icon title |
|
(optional) icon size: ( |
BlueInfoCircleIcon
Component for displaying a blue info circle icon.
Example
<BlueInfoCircleIcon title="Info" />
Parameter Name | Description |
---|---|
| (optional) additional class name for the component |
| (optional) icon title |
| (optional) icon size: ('sm', 'md', 'lg', 'xl') |
ErrorStatus
Component for displaying an error status popover.
Example
<ErrorStatus title={errorMsg} />
Parameter Name | Description |
---|---|
| (optional) status text |
| (optional) if true, only displays icon |
| (optional) if true, tooltip is not displayed |
| (optional) additional class name for the component |
| (optional) title for popover |
InfoStatus
Component for displaying an information status popover.
Example
<InfoStatus title={infoMsg} />
Parameter Name | Description |
---|---|
| (optional) status text |
| (optional) if true, only displays icon |
| (optional) if true, tooltip is not displayed |
| (optional) additional class name for the component |
| (optional) title for popover |
ProgressStatus
Component for displaying a progressing status popover.
Example
<ProgressStatus title={progressMsg} />
Parameter Name | Description |
---|---|
| (optional) status text |
| (optional) if true, only displays icon |
| (optional) if true, tooltip is not displayed |
| (optional) additional class name for the component |
| (optional) title for popover |
SuccessStatus
Component for displaying a success status popover.
Example
<SuccessStatus title={successMsg} />
Parameter Name | Description |
---|---|
| (optional) status text |
| (optional) if true, only displays icon |
| (optional) if true, tooltip is not displayed |
| (optional) additional class name for the component |
| (optional) title for popover |
checkAccess
Provides information about user access to a given resource. It returns an object with resource access information.
Parameter Name | Description |
---|---|
| resource attributes for access review |
| impersonation details |
useAccessReview
Hook that provides information about user access to a given resource. It returns an array with isAllowed
and loading
values.
Parameter Name | Description |
---|---|
| resource attributes for access review |
| impersonation details |
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
const [navItemExtensions, navItemsResolved] = useResolvedExtensions<NavItem>(isNavItem); // process adapted extensions and render your component
Parameter Name | Description |
---|---|
| 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 desired type constraints |
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
const HomePage: React.FC = (props) => { const page = { href: '/home', name: 'Home', component: () => <>Home</> } return <HorizontalNav match={props.match} pages={[page]} /> }
Parameter Name | Description |
---|---|
| The resource associated with this Navigation, an object of K8sResourceCommon type |
| An array of page objects |
| match object provided by React Router |
VirtualizedTable
A component for making virtualized tables.
Example
const MachineList: React.FC<MachineListProps> = (props) => { return ( <VirtualizedTable<MachineKind> {...props} aria-label='Machines' columns={getMachineColumns} Row={getMachineTableRow} /> ); }
Parameter Name | Description |
---|---|
| data for table |
| flag indicating data is loaded |
| error object if issue loading data |
| column setup |
| row setup |
| original data without filter |
| (optional) no data empty message component |
| (optional) empty message component |
| (optional) function to handle scroll |
| (optional) label for table |
| (optional) aria label |
| sizing of how to break up grid for responsiveness |
| (optional) function for handling select of table |
| (optional) data specific to row |
TableData
Component for displaying table data within a table row.
Example
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 |
---|---|
| unique ID for table |
| active columns |
| (optional) option class name for styling |
useActiveColumns
A hook that provides a list of user-selected active TableColumns.
Example
// 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 |
---|---|
| Which are passed as a key-value map |
| An array of all available TableColumns |
| (optional) If true, a namespace column is included, regardless of column management selections |
| (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
Component for generating a page header.
Example
const exampleList: React.FC = () => { return ( <> <ListPageHeader title="Example List Page"/> </> ); };
Parameter Name | Description |
---|---|
| heading title |
| (optional) help section as react node |
| (optional) badge icon as react node |
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
const exampleList: React.FC<MyProps> = () => { return ( <> <ListPageHeader title="Example Pod List Page"/> <ListPageCreate groupVersionKind="Pod">Create Pod</ListPageCreate> </ListPageHeader> </> ); };
Parameter Name | Description |
---|---|
| the resource group/version/kind to represent |
ListPageCreateLink
Component for creating a stylized link.
Example
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 |
---|---|
| string location where link should direct |
| (optional) object with namespace and kind used to determine access |
| (optional) children for the component |
ListPageCreateButton
Component for creating button.
Example
const exampleList: React.FC<MyProps> = () => { return ( <> <ListPageHeader title="Example Pod List Page"/> <ListPageCreateButton createAccessReview={access}>Create Pod</ListPageCreateButton> </ListPageHeader> </> ); };
Parameter Name | Description |
---|---|
| (optional) object with namespace and kind used to determine access |
| (optional) Patternfly Button props |
ListPageCreateDropdown
Component for creating a dropdown wrapped with permissions check.
Example
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 |
---|---|
| key:ReactNode pairs of items to display in dropdown component |
| callback function for click on dropdown items |
| (optional) object with namespace and kind used to determine access |
| (optional) children for the dropdown toggle |
ListPageFilter
Component that generates filter for list page.
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 |
---|---|
| An array of data points |
| indicates that data has loaded |
| callback function for when filter is updated |
| (optional) An array of RowFilter elements that define the available filter options |
| (optional) placeholder for name filter |
| (optional) placeholder for label filter |
| (optional) only shows the name filter instead of both name and label filter |
| (optional) hides both name and label filter |
| (optional) column layout object |
| (optional) flag to hide the column management |
useListPageFilter
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.
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 |
---|---|
| An array of data points |
| (optional) An array of RowFilter elements that define the available filter options |
| (optional) An array of FilterValue elements that are statically applied to the data |
ResourceLink
Component that creates a link to a specific resource type with an icon badge.
Example
<ResourceLink kind="Pod" name="testPod" title={metadata.uid} />
Parameter Name | Description |
---|---|
| (optional) the kind of resource i.e. Pod, Deployment, Namespace |
| (optional) object with group, version, and kind |
| (optional) class style for component |
| (optional) display name for component, overwrites the resource name if set |
| (optional) flag to create icon badge and name inline with children |
| (optional) flag to create a Link object - defaults to true |
| (optional) name of resource |
| (optional) specific namespace for the kind resource to link to |
| (optional) flag to hide the icon badge |
| (optional) title for the link object (not displayed) |
| (optional) identifier for testing |
| (optional) callback function for when component is clicked |
| (optional) flag to truncate the link if too long |
ResourceIcon
Component that creates an icon badge for a specific resource type.
Example
<ResourceIcon kind="Pod"/>
Parameter Name | Description |
---|---|
| (optional) the kind of resource i.e. Pod, Deployment, Namespace |
| (optional) object with group, version, and kind |
| (optional) class style for component |
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
const Component: React.FC = () => { const [model, inFlight] = useK8sModel({ group: 'app'; version: 'v1'; kind: 'Deployment' }); return ... }
Parameter Name | Description |
---|---|
| 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
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
const Component: React.FC = () => { const [models, inFlight] = UseK8sModels(); return ... }
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
const Component: React.FC = () => { const watchRes = { ... } const [data, loaded, error] = useK8sWatchResource(watchRes) return ... }
Parameter Name | Description |
---|---|
| options needed to watch for resource. |
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 initResouces and value has three properties data, loaded and error.
Example
const Component: React.FC = () => { const watchResources = { 'deployment': {...}, 'pod': {...} ... } const {deployment, pod} = useK8sWatchResources(watchResources) return ... }
Parameter Name | Description |
---|---|
| Resources must be watched as key-value pair, wherein key is unique to resource and value is options needed to watch for the respective resource. |
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 |
---|---|
| The URL to fetch |
| The options to pass to fetch |
| The timeout in milliseconds |
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 |
---|---|
| The URL to fetch |
| The HTTP method to use. Defaults to GET |
| The options to pass to fetch |
| The timeout in milliseconds |
| The name of the cluster to make the request to. Defaults to the active cluster the user has selected |
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 |
---|---|
| The URL to fetch |
| The options to pass to fetch |
| The timeout in milliseconds |
| The name of the cluster to make the request to. Defaults to the active cluster the user has selected |
getConsoleRequestHeaders
A function that creates impersonation and multicluster related headers for API requests using current redux state. It returns an object containing the appropriate impersonation and clustr requst headers, based on redux state.
Parameter Name | Description |
---|---|
| Override the current active cluster with the provided targetCluster |
k8sGetResource
It fetches a resource from the cluster, based on the provided options. If the name is provided it returns one resource else 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 providedelse it returns all the resources matching the model. In case of failure, the promise gets rejected with HTTP error response.
Parameter Name | Description |
---|---|
| Which are passed as key-value pairs in the map |
| k8s model |
| The name of the resource, if not provided then it looks for all the resources matching the model. |
| The namespace to look into, should not be specified for cluster-scoped resources. |
| Appends as subpath if provided |
| The query parameters to be included in the URL. |
| The fetch init object to use. This can have request headers, method, redirect, etc. See Interface RequestInit for more. |
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 |
---|---|
| Which are passed as key-value pairs in the map |
| k8s model |
| Payload for the resource to be created |
| Appends as subpath if provided |
| The query parameters to be included in the URL. |
k8sUpdateResource
It updates the entire resource in the cluster, based on providedoptions. 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 |
---|---|
| Which are passed as key-value pair in the map |
| k8s model |
| Payload for the k8s resource to be updated |
| Namespace to look into, it should not be specified for cluster-scoped resources. |
| Resource name to be updated. |
| Appends as subpath if provided |
| The query parameters to be included in the URL. |
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 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 |
---|---|
| Which are passed as key-value pairs in the map. |
| k8s model |
| The resource to be patched. |
| Only the data to be patched on existing resource with the operation, path, and value. |
| Appends as subpath if provided. |
| The query parameters to be included in the URL. |
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 |
---|---|
| Which are passed as key-value pair in the map. |
| k8s model |
| The resource to be deleted. |
| Appends as subpath if provided |
| The query parameters to be included in the URL. |
| The fetch init object to use. This can have request headers, method, redirect, etc. See Interface RequestInit for more. |
| Can control garbage collection of resources explicitly if provided or else it defaults to the model’s "propagationPolicy". |
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 |
---|---|
| Which are passed as key-value pairs in the map |
| k8s model |
| The query parameters to be included in the URL and can pass label selector’s as well with key "labelSelector". |
| The fetch init object to use. This can have request headers, method, redirect, etc. See Interface RequestInit for more. |
k8sListResourceItems
Same interface as k8sListResource but returns the sub items. It returns the apiVersion for the model, i.e., group/version
.
getAPIVersionForModel
Provides apiVersion for a k8s model.
Parameter Name | Description |
---|---|
| k8s model |
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 |
---|---|
| k8s resource |
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 |
---|---|
| k8s model |
StatusPopupSection
Component that shows the status in a popup window. Helpful component for building console.dashboards/overview/health/resource
extensions.
Example
<StatusPopupSection firstColumn={ <> <span>{title}</span> <span className="text-secondary"> My Example Item </span> </> } secondColumn='Status' >
Parameter Name | Description |
---|---|
| values for first column of popup |
| (optional) values for second column of popup |
| (optional) children for the popup |
StatusPopupItem
Status element used in status popup; used in StatusPopupSection
.
Example
<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 |
---|---|
| (optional) text value to display |
| (optional) icon to display |
| child elements |
Overview
Creates a wrapper component for a dashboard.
Example
<Overview> <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} /> </Overview>
Parameter Name | Description |
---|---|
| (optional) style class for div |
| (optional) elements of the dashboard |
OverviewGrid
Creates a grid of card elements for a dashboard; used within Overview
.
Example
<Overview> <OverviewGrid mainCards={mainCards} leftCards={leftCards} rightCards={rightCards} /> </Overview>
Parameter Name | Description |
---|---|
| cards for grid |
| (optional) cards for left side of grid |
| (optional) cards for right side of grid |
InventoryItem
Creates an inventory card item.
Example
return ( <InventoryItem> <InventoryItemTitle>{title}</InventoryItemTitle> <InventoryItemBody error={loadError}> {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />} </InventoryItemBody> </InventoryItem> )
Parameter Name | Description |
---|---|
| elements to render inside the item |
InventoryItemTitle
Creates a title for an inventory card item; used within InventoryItem
.
Example
return ( <InventoryItem> <InventoryItemTitle>{title}</InventoryItemTitle> <InventoryItemBody error={loadError}> {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />} </InventoryItemBody> </InventoryItem> )
Parameter Name | Description |
---|---|
| elements to render inside the title |
InventoryItemBody
Creates the body of an inventory card; used within InventoryCard
and can be used with InventoryTitle
.
Example
return ( <InventoryItem> <InventoryItemTitle>{title}</InventoryItemTitle> <InventoryItemBody error={loadError}> {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />} </InventoryItemBody> </InventoryItem> )
Parameter Name | Description |
---|---|
| elements to render inside the Inventory Card or title |
| elements of the div |
InventoryItemStatus
Creates a count and icon for an inventory card with optional link address; used within InventoryItemBody
Example
return ( <InventoryItem> <InventoryItemTitle>{title}</InventoryItemTitle> <InventoryItemBody error={loadError}> {loaded && <InventoryItemStatus count={workerNodes.length} icon={<MonitoringIcon />} />} </InventoryItemBody> </InventoryItem> )
Parameter Name | Description |
---|---|
| count for display |
| icon for display |
| (optional) link address |
InventoryItemLoading
Creates a skeleton container for when an inventory card is loading; used with InventoryItem
and related components
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
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 |
---|---|
| The feature flag to return |
CodeEditor
A basic lazy loaded Code editor with hover help and completion.
Example
<React.Suspense fallback={<LoadingBox />}> <CodeEditor value={code} language="yaml" /> </React.Suspense>
Parameter Name | Description |
---|---|
| String representing the yaml code to render. |
| String representing the language of the editor. |
| Monaco editor options. For more details, please, visit Interface IStandAloneEditorConstructionOptions. |
| Minimum editor height in valid CSS height values. |
| Boolean to show shortcuts on top of the editor. |
| Array of ReactNode rendered on the toolbar links section on top of the editor. |
| Callback for on code change event. |
| Callback called when the command CTRL / CMD + S is triggered. |
|
React reference to |
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 likeresource 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.
Example
<React.Suspense fallback={<LoadingBox />}> <ResourceYAMLEditor initialResource={resource} header="Create resource" onSave={(content) => updateResource(content)} /> </React.Suspense>
Parameter Name | Description |
---|---|
| YAML/Object representing a resource to be shown by the editor. This prop is used only during the initial render |
| Add a header on top of the YAML editor |
| Callback for the Save button. Passing it overrides the default update performed on the resource by the editor |
ResourceEventStream
A component to show events related to a particular resource.
Example
const [resource, loaded, loadError] = useK8sWatchResource(clusterResource); return <ResourceEventStream resource={resource} />
Parameter Name | Description |
---|---|
| An object whose related events should be shown. |
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 |
---|---|
| one of the PrometheusEndpoint (label, query, range, rules, targets) |
| (optional) Prometheus query string. If empty or undefined, polling is not started. |
| (optional) polling delay interval (ms) |
| (optional) for QUERY_RANGE enpoint, end of the query range |
| (optional) for QUERY_RANGE enpoint |
| (optional) for QUERY_RANGE enpoint |
| (optional) a search param to append |
| (optional) a search param to append |
Timestamp
A component to render timestamp. The timestamps are synchronized between invidual instances of the Timestamp component. The provided timestamp is formatted according to user locale.
Parameter Name | Description |
---|---|
| the timestamp to render. Format is expected to be ISO 8601 (used by Kubernetes), epoch timestamp, or an instance of a Date. |
| render simple version of the component omitting icon and tooltip. |
| formats the date ommiting the suffix. |
| additional class name for the component. |
useModal
A hook to launch Modals.
Example
const context: AppPage: React.FC = () => {<br/> const [launchModal] = useModal();<br/> const onClick = () => launchModal(ModalComponent);<br/> return (<br/> <Button onClick={onClick}>Launch a Modal</Button><br/> )<br/>}<br/>`
ActionServiceProvider
Component that allows to receive contributions from other plugins for the console.action/provider
extension type.
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 |
---|---|
| Object with contextId and optional plugin data |
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.
Example
const logNamespaceChange = (namespace) => console.log(`New namespace: ${namespace}`); ... <NamespaceBar onNamespaceChange={logNamespaceChange}> <NamespaceBarApplicationSelector /> </NamespaceBar> <Page> ...
Parameter Name | Description |
---|---|
| (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. |
| (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. |
| (optional) Additional elements to be rendered inside the toolbar to the right of the namespace dropdown. |
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 inconjunction with an component.
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 |
---|---|
| text description of the error message |
| component trace of the exception |
| stack trace of the exception |
| title to render as the header of the error boundary page |
QueryBrowser
A component that renders a graph of the results from a Prometheus PromQL query along with controls for interacting with the graph.
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 |
---|---|
| (optional) Base URL of an API endpoint that handles PromQL queries. If provided, this is used instead of the default API for fetching data. |
| (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. |
| (optional) The default timespan for the graph in milliseconds - defaults to 1,800,000 (30 minutes). |
| (optional) Disable (do not display) data series with these exact label / value pairs. |
| (optional) Flag to disable the graph zoom controls. |
| (optional) Optionally filter the returned data series to only those that match these label / value pairs. |
| (optional) Set the end time for the displayed time range rather than showing data up to the current time. |
| (optional) Function that returns a string to use as the title for a single data series. |
| (optional) Component for rendering a link to another page (for example getting more information about this query). |
| (optional) Flag to hide the graph controls for changing the graph timespan, and so on. |
| (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. |
| (optional) If provided, data is only returned for this namespace (only series that have this namespace label). |
| (optional) Callback called when the graph is zoomed. |
| (optional) If set, determines how often the graph is updated to show the latest data (in milliseconds). |
| Array of PromQL queries to run and display the results in the graph. |
| (optional) Flag to enable displaying a legend below the graph. |
| Flag to enable displaying a graph control for switching between stacked graph mode and line graph mode. |
| (optional) The timespan that should be covered by the graph in milliseconds. |
| (optional) Units to display on the Y-axis and in the tooltip. |
useAnnotationsModal
A hook that provides a callback to launch a modal for editing Kubernetes resource annotations.
Example
const PodAnnotationsButton = ({ pod }) => { const { t } = useTranslation(); const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod); return <button onClick={launchAnnotationsModal}>{t('Edit Pod Annotations')}</button> }
Parameter Name | Description |
---|---|
| 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
A hook that provides a callback to launch a modal for deleting a resource.
Example
const DeletePodButton = ({ pod }) => { const { t } = useTranslation(); const launchDeleteModal = useDeleteModal<PodKind>(pod); return <button onClick={launchDeleteModal}>{t('Delete Pod')}</button> }
Parameter Name | Description |
---|---|
| The resource to delete. |
| (optional) A location to redirect to after deleting the resource. |
| (optional) A message to display in the modal. |
| (optional) The text to display on the delete button. |
| (optional) A function to delete all resources of the same kind. |
Returns
A function which launches a modal for deleting a resource.
useLabelsModel
A hook that provides a callback to launch a modal for editing Kubernetes resource labels.
Example
const PodLabelsButton = ({ pod }) => { const { t } = useTranslation(); const launchLabelsModal = useLabelsModal<PodKind>(pod); return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button> }
Parameter Name | Description |
---|---|
| 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
Hook that provides the currently active namespace and a callback for setting the active namespace.
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
Hook that provides a user setting value and a callback for setting the user setting value.
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 vauel, a setter callback, and a loaded boolean.
useQuickStartContext
Hook that provides the current quick start context values. This allows plugins to interoperate with console quick start functionality.
Example
const OpenQuickStartButton = ({ quickStartId }) => { const { setActiveQuickStart } = useQuickStartContext(); const onClick = React.useCallback(() => { setActiveQuickStart(quickStartId); }, [quickStartId]); return <button onClick={onClick}>{t('Open Quick Start')}</button> };
Reterns
Quick start context values object.
PerspectiveContext
Deprecated: Use the provided usePerspectiveContext
instead. Creates the perspective context.
Parameter Name | Description |
---|---|
| object with active perspective and setter |
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 |
---|---|
| resource attributes for access review |
| impersonation details |
useSafetyFirst
Deprecated: This hook is not related to console functionality. Hook that ensures a safe asynchronnous 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.