mirror of
https://github.com/openshift/openshift-docs.git
synced 2026-02-05 12:46:18 +01:00
122 lines
3.5 KiB
Plaintext
122 lines
3.5 KiB
Plaintext
// Module included in the following assemblies:
|
|
//
|
|
// * web_console/dynamic-plugin/dynamic-plugin-example.adoc
|
|
|
|
:_mod-docs-content-type: PROCEDURE
|
|
[id="adding-tab-to-pods-page_{context}"]
|
|
= Adding a tab to the pods page
|
|
|
|
[role="_abstract"]
|
|
There are different customizations you can make to the {product-title} web console. The following procedure adds a tab to the *Pod details* page as an example extension to your plugin.
|
|
|
|
[NOTE]
|
|
====
|
|
The {product-title} 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 link:https://github.com/openshift/console-plugin-template[`console-plugin-template`] repository containing a template for creating plugins in a new tab.
|
|
+
|
|
[IMPORTANT]
|
|
====
|
|
Custom plugin code is not supported by Red Hat. Only link:https://access.redhat.com/solutions/5893251[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 the `consolePlugin` declaration. For example:
|
|
+
|
|
[source,json]
|
|
|
|
----
|
|
"consolePlugin": {
|
|
"name": "my-plugin",
|
|
"version": "0.0.1",
|
|
"displayName": "My Plugin",
|
|
"description": "Enjoy this shiny, new console plugin!",
|
|
"exposedModules": {
|
|
"ExamplePage": "./components/ExamplePage"
|
|
},
|
|
"dependencies": {
|
|
"@console/pluginAPI": "/*"
|
|
}
|
|
}
|
|
----
|
|
+
|
|
--
|
|
where:
|
|
|
|
`consolePlugin.name.my-plugin`:: Update the name of your plugin.
|
|
`consolePlugin.version.0.0.1`:: Update the version.
|
|
`consolePlugin.displayName.My Plugin`:: Update the display name for your plugin.
|
|
`consolePlugin.description.Enjoy this shiny, new console plugin!`:: Update the description with a synopsis about your plugin.
|
|
--
|
|
|
|
. Add the following to the `console-extensions.json` file:
|
|
+
|
|
[source,json]
|
|
|
|
----
|
|
{
|
|
"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:
|
|
+
|
|
[source,json]
|
|
|
|
----
|
|
"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:
|
|
+
|
|
[source,tsx]
|
|
|
|
----
|
|
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 the `plugin.image` parameter by using the following command:
|
|
|
|
+
|
|
[source,terminal]
|
|
----
|
|
$ helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
|
|
----
|
|
+
|
|
[NOTE]
|
|
====
|
|
For more information on deploying your plugin on a cluster, see "Deploy your plugin on a cluster".
|
|
====
|
|
|
|
.Verification
|
|
* Visit a *Pod* page to view the added tab.
|