conster Header: React.FC = () => {
const { t } = useTranslation('plugin__console-demo-plugin');
return <h1>{t('Hello, World!')}</h1>;
};
You can create and deploy a dynamic plugin on your cluster that is loaded at run-time.
Creating a dynamic plugin is a Technology Preview feature only. Technology Preview features are not supported with Red Hat production service level agreements (SLAs) and might not be functionally complete. Red Hat does not recommend using them in production. These features provide early access to upcoming product features, enabling customers to test functionality and provide feedback during the development process. For more information about the support scope of Red Hat Technology Preview features, see https://access.redhat.com/support/offerings/techpreview/. |
A dynamic plugin allows you to add custom pages and other extensions to your interface at runtime. The ConsolePlugin
custom resource registers plugins with the console, and a cluster administrator enables plugins in the console-operator
configuration.
A dynamic plugin allows you to make the following customizations to the OpenShift Container Platform experience:
Add custom pages.
Add perspectives and update navigation items.
Add tabs and actions to resource pages.
When creating your plugin, follow these guidelines for using PatternFly:
Use PatternFly4 components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables will help your plugin look consistent in future console versions.
Make your plugin accessible by following PatternFly’s accessibility fundamentals.
Do not use other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.
When creating your plugin, follow these general guidelines:
Prefix your CSS class names with your plugin name to avoid collisions. For example, my-plugin__heading
and my-plugin_\_icon
.
Maintain a consistent look, feel, and behavior with other console pages.
Follow react-i18next localization guidelines when creating your plugin. You can use the useTranslation
hook like the one in the following example:
conster Header: React.FC = () => {
const { t } = useTranslation('plugin__console-demo-plugin');
return <h1>{t('Hello, World!')}</h1>;
};
Do not use console CSS classes in your markup or override console CSS classes. 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 plugin’s components.
Cluster administrators can enable plugins in the web console browser. Dynamic plugins are disabled by default. In order to enable, a cluster administrator will need to enable them in the console-operator
configuration.
In the Administration → Cluster Settings page of the web console, click the Configuration tab.
Click the Console
operator.openshift.io
configuration resource.
From there, click the Console plugins tab to view the dynamic plugins running.
In the Status
column, click Enable console plugin
in the pop-over menu, which will launch the Console plugin enablement
modal.
Click Enable
and Save
.
Refresh the browser to view the enabled plugin.
To get started using the dynamic plugin, you must set up your environment to write a new OpenShift Console dynamic plugin.
Edit the plugin metadata in the consolePlugin
declaration of package.json
.
"consolePlugin": {
"name": "my-plugin", (1)
"version": "0.0.1", (2)
"displayName": "My Plugin", (3)
"description": "Enjoy this shiny, new console plugin!", (4)
"exposedModules": {
"ExamplePage": "./components/ExamplePage"
},
"dependencies": {
"@console/pluginAPI": "*"
}
}
1 | Update the name of your plugin. |
2 | Update the version. |
3 | Update the display name for your plugin. |
4 | Update the description with a synopsis about your plugin. |
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.
Build a plugin and generate the output to the dist
directory by running
$ yarn build
Start an HTTP server by running
$ yarn http-server
The HTTP server, which runs on port 9001, generates the following assets with caching
disabled and CORS
enabled.
Starting up http-server, serving ./dist
Available on:
http://127.0.0.1:9001
http://192.168.1.190:9001
http://10.40.192.80:9001
Hit CTRL-C to stop the server
Optional: Add additional server options to the script by running
$ yarn http-server -a <server name>
Direct bridge
to proxy requests to your local plugin asset server by running
$ ./bin/bridge -plugins console-demo-plugin=http://localhost:9001/
Visit local host to view the running plugin. Inspect the value of window.SERVER_FLAGS.consolePlugins
to see the list of plugins which load at runtime.
You can add extensions that allow you to customize your plugin. Those extensions are then loaded to the console at run-time.
Edit the console-extensions.json
file:
[
{
"type": "console.flag", (1)
"properties": {
"handler": { "$codeRef": "barUtils.testHandler" } (2)
}
},
{
"type": "console.flag/model",
"properties": {
"flag": "EXAMPLE",
"model": {
"group": "kubevirt.io",
"version": "v1alpha3",
"kind": "ExampleModel"
}
}
}
]
1 | Add the extension type(s) you want to include with this plugin. You can include multiple extensions separated with a comma. |
2 | The $codeRef value should be formatted as either moduleName.exportName for a named export or moduleName for the default export. Only the plugin’s exported modules can be used in code references. |
console.action/filter
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
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
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