mirror of
https://github.com/openshift/openshift-docs.git
synced 2026-02-05 21:46:22 +01:00
Merge pull request #53103 from opayne1/OSDOCS-4073
OSDOCS-4073: Dynamic plug-in doc updates
This commit is contained in:
Olivia Payne
@@ -673,8 +673,19 @@ Topics:
|
||||
File: customizing-the-web-console
|
||||
Distros: openshift-enterprise,openshift-origin
|
||||
- Name: Dynamic plug-ins
|
||||
File: dynamic-plug-ins
|
||||
Dir: dynamic-plug-in
|
||||
Distros: openshift-enterprise,openshift-origin
|
||||
Topics:
|
||||
- Name: Overview of dynamic plug-ins
|
||||
File: dynamic-plug-in
|
||||
- Name: Getting started with dynamic plug-ins
|
||||
File: dynamic-plug-ins-get-started
|
||||
- Name: Deploy your plug-in on a cluster
|
||||
File: deploy-plug-in-cluster
|
||||
- Name: Dynamic plug-in example
|
||||
File: dynamic-plug-in-example
|
||||
- Name: Dynamic plug-in reference
|
||||
File: dynamic-plug-ins-reference
|
||||
- Name: Web terminal
|
||||
File: odc-about-web-terminal
|
||||
Distros: openshift-enterprise,openshift-online
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="adding-new-extension-dynamic-plugin_{context}"]
|
||||
= Adding a new extension to your plug-in
|
||||
You can add extensions that allow you to customize your plug-in. Those extensions are then loaded to the console at run-time.
|
||||
|
||||
. Edit the `console-extensions.json` file:
|
||||
+
|
||||
[source,json]
|
||||
----
|
||||
[
|
||||
{
|
||||
"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 plug-in. 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 plug-in’s exported modules can be used in code references.
|
||||
@@ -1,14 +1,55 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
// * web_console/dynamic-plugin-example.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="adding-tab-to-pods-page_{context}"]
|
||||
= Adding a tab to the pods page
|
||||
The following procedure adds a tab to the *Pod Details* page as an example extension to your plug-in.
|
||||
|
||||
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 plug-in.
|
||||
|
||||
[NOTE]
|
||||
====
|
||||
The {product-title} web console runs in a container connected to the cluster you have logged into. See "Dynamic plug-in development" for information to test the plug-in before creating your own.
|
||||
====
|
||||
|
||||
.Procedure
|
||||
|
||||
. Visit the link:https://github.com/openshift/console-plugin-template[`console-plugin-template`] repository containing a template for creating plug-ins in a new tab.
|
||||
+
|
||||
[IMPORTANT]
|
||||
====
|
||||
Custom plug-in code is not supported by Red Hat. Only link:https://access.redhat.com/solutions/5893251[Cooperative community support] is available for your plug-in.
|
||||
====
|
||||
|
||||
. Select the *Use this template* dropdown button and select *_Create new repository_* from the dropdown list to create a GitHub repository.
|
||||
|
||||
. Re-name the new repository with the name of your plug-in.
|
||||
|
||||
. Clone your copied repositury to your local machine so you can edit the code.
|
||||
|
||||
. Edit the plug-in metadata in the `consolePlugin` declaration of `package.json`.
|
||||
+
|
||||
[source,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 plug-in.
|
||||
<2> Update the version.
|
||||
<3> Update the display name for your plug-in.
|
||||
<4> Update the description with a synopsis about your plug-in.
|
||||
|
||||
. Add the following to the `console-extensions.json` file:
|
||||
+
|
||||
[source,json]
|
||||
@@ -57,4 +98,4 @@ export default function ExampleTab() {
|
||||
----
|
||||
|
||||
.Verification
|
||||
* Visit a *Pod* page to view the added tab.
|
||||
* Visit a *Pod* page to view the added tab.
|
||||
@@ -1,6 +1,6 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
// * web_console/deploy-plug-in-cluster.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="build-image-with-docker_{context}"]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
// * web_console/deploy-plug-in-cluster.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="deploy-on-cluster_{context}"]
|
||||
@@ -10,32 +10,86 @@ After pushing an image with your changes to a registry, you can deploy the plug-
|
||||
|
||||
.Procedure
|
||||
|
||||
. To deploy your plug-in to a cluster, instantiate your plug-in by running the following command:
|
||||
. To deploy your plug-in to a cluster, install a Helm chart with the name of the plug-in 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 the `plugin.image` parameter by using the following command:
|
||||
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ oc process -f template.yaml \
|
||||
-p PLUGIN_NAME=my-plugin \ <1>
|
||||
-p NAMESPACE=my-plugin-namespace \ <2>
|
||||
-p IMAGE=quay.io/my-repository/my-plugin:latest \ <3>
|
||||
| oc create -f -
|
||||
$ helm upgrade -i my-plugin charts/openshift-console-plugin -n my-plugin-namespace --create-namespace --set plugin.image=my-plugin-image-location
|
||||
----
|
||||
<1> Update with the name of your plug-in.
|
||||
<2> Update with the namespace.
|
||||
<3> Update with the name of the image you created.
|
||||
+
|
||||
This command runs a light-weight NGINX HTTP server to serve the assets for your plug-in.
|
||||
|
||||
[IMPORTANT]
|
||||
====
|
||||
`PLUGIN_NAME` must match the plug-in name you used in the `consolePlugin` declaration of `package.json`.
|
||||
====
|
||||
|
||||
[start=2]
|
||||
. Patch the *Console Operator* configuration to enable the plug-in by running the following command:
|
||||
Where:
|
||||
+
|
||||
[source,terminal]
|
||||
--
|
||||
`n <my-plugin-namespace>`:: Specifies an existing namespace to deploy your plug-in 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.
|
||||
--
|
||||
|
||||
. Optional: You can specify any additional parameters by using the set of supported parameters in the `charts/openshift-console-plugin/values.yaml` file.
|
||||
|
||||
[source,yaml]
|
||||
----
|
||||
$ oc patch consoles.operator.openshift.io cluster --patch '{ "spec": { "plugins": ["my-plugin"] } }' --type=merge
|
||||
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
|
||||
You can see the list of the enabled plugins on the *Overview* page or by navigating from *Administration* -> *Cluster Settings* -> *Configuration* -> *Console* `operator.openshift.io` -> *Console plugins*.
|
||||
|
||||
|
||||
[NOTE]
|
||||
====
|
||||
It can take a few minutes for the new plug-in configuration to appear. If you do not see your plug-in, you might need to refresh your browser if the plugin was recently enabled. If you recieve any errors at runtime, check the JS console in browser developer tools to look for any errors in your plugin code.
|
||||
====
|
||||
@@ -1,6 +1,6 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
// * web_console/deploy-plug-in-cluster.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="disabling-your-plug-in-browser_{context}"]
|
||||
|
||||
1470
modules/dynamic-plug-in-api.adoc
Normal file
1470
modules/dynamic-plug-in-api.adoc
Normal file
File diff suppressed because it is too large
Load Diff
50
modules/dynamic-plug-in-development.adoc
Normal file
50
modules/dynamic-plug-in-development.adoc
Normal file
@@ -0,0 +1,50 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins-get-started.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="dynamic-plugin-development_{context}"]
|
||||
= Dynamic plug-in development
|
||||
|
||||
You can run the plug-in using a local development environment. The {product-title} web console runs in a container connected to the cluster you have logged into.
|
||||
|
||||
.Prerequisites
|
||||
* You must have an OpenShift cluster running.
|
||||
* You must have the OpenShift CLI (`oc`) installed.
|
||||
* You must have link:https://yarnpkg.com/[`yarn`] installed.
|
||||
* You must have link:https://www.docker.com/[Docker] v3.2.0 or newer or link:https://podman.io/[Podman] installed and running.
|
||||
|
||||
.Procedure
|
||||
|
||||
. In your terminal, run the following command to install the dependencies for your plug-in using yarn.
|
||||
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ yarn install
|
||||
----
|
||||
|
||||
. After installing, run the following command to start yarn.
|
||||
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ yarn run start
|
||||
----
|
||||
|
||||
. In another terminal window, login to the {product-title} through the CLI.
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ oc login
|
||||
----
|
||||
|
||||
. Run the {product-title} web console in a container connected to the cluster you have logged into by running the following command:
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ yarn run start-console
|
||||
----
|
||||
|
||||
.Verification
|
||||
* Visit link:http://localhost:9000/example[localhost:9000] to view the running plug-in. Inspect the value of `window.SERVER_FLAGS.consolePlugins` to see the list of plug-ins which load at runtime.
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,38 +0,0 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="getting-started-with-dynamic-plugins_{context}"]
|
||||
= Getting started with dynamic plug-ins
|
||||
|
||||
To get started using the dynamic plug-in, you must set up your environment to write a new OpenShift Console dynamic plug-in.
|
||||
|
||||
.Prerequisites
|
||||
* Ensure you have link:https://nodejs.org/en/[`Node.js`] installed.
|
||||
* Ensure you have link:https://yarnpkg.com/[`yarn`] installed.
|
||||
|
||||
.Procedure
|
||||
|
||||
. Edit the plug-in metadata in the `consolePlugin` declaration of `package.json`.
|
||||
+
|
||||
[source,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 plug-in.
|
||||
<2> Update the version.
|
||||
<3> Update the display name for your plug-in.
|
||||
<4> Update the description with a synopsis about your plug-in.
|
||||
@@ -1,58 +0,0 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins.adoc
|
||||
|
||||
:_content-type: PROCEDURE
|
||||
[id="running-your-dynamic-plugin_{context}"]
|
||||
= Running your dynamic plug-in
|
||||
|
||||
You can run the plug-in using a local development environment. The {product-title} web console runs in a container connected to the cluster you have logged into.
|
||||
|
||||
.Prerequisites
|
||||
* You must have the OpenShift CLI (`oc`) installed.
|
||||
* You must have an OpenShift cluster running.
|
||||
* You must have link:https://www.docker.com/[Docker] or at least v3.2.0 of link:https://podman.io/[Podman] installed.
|
||||
|
||||
.Procedure
|
||||
|
||||
. Build a plug-in and generate the output to the `dist` directory by running
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ yarn build
|
||||
----
|
||||
|
||||
. Start an HTTP server by running
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ yarn http-server
|
||||
----
|
||||
|
||||
. The HTTP server, which runs on port 9001, generates the following assets with `caching` disabled and `CORS` enabled.
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
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 plug-in asset server by running
|
||||
+
|
||||
[source,terminal]
|
||||
----
|
||||
$ ./bin/bridge -plugins console-demo-plugin=http://localhost:9001/
|
||||
----
|
||||
|
||||
.Verification
|
||||
* Visit link:http://localhost:9000/example[local host] to view the running plug-in. Inspect the value of `window.SERVER_FLAGS.consolePlugins` to see the list of plug-ins which load at runtime.
|
||||
45
modules/troubleshooting-dynamic-plug-in.adoc
Normal file
45
modules/troubleshooting-dynamic-plug-in.adoc
Normal file
@@ -0,0 +1,45 @@
|
||||
// Module included in the following assemblies:
|
||||
//
|
||||
// * web_console/dynamic-plug-ins-reference.adoc
|
||||
|
||||
:_content-type: REFERENCE
|
||||
[id="troubleshooting-dynamic-plug-in_{context}"]
|
||||
= Troubleshooting your dynamic plug-in
|
||||
|
||||
Refer to this list of troubleshooting tips if you run into issues loading your plug-in.
|
||||
|
||||
* Verify that you have enabled your plug-in in the console Operator configuration and your plug-in name is the output by running the following command:
|
||||
+
|
||||
[source,terminal]
|
||||
====
|
||||
$ oc get console.operator.openshift.io cluster -o jsonpath='{.spec.plugins}'
|
||||
====
|
||||
|
||||
** Verify the enabled plug-ins on the status card of the *Overview* page in the *Administrator perspective*. You will need to refresh your browser if the plug-in was recently enabled.
|
||||
|
||||
* Verify your plug-in service is healthy by:
|
||||
** Verifying your plug-in pod status is running and your containers are ready.
|
||||
** Verifying the service label selector matches the pod and the target port is correct.
|
||||
** Curl the `plugin-manifest.json` from the service in a terminal on the console pod or another pod on the cluster.
|
||||
|
||||
* Verify your `ConsolePlugin` resource name (`consolePlugin.name`) matches the plug-in name used in `package.json`.
|
||||
|
||||
* Verify your service name, namespace, port, and path are declared correctly in the `ConsolePlugin` resource.
|
||||
|
||||
* Verify your plug-in service uses HTTPS and service serving certificates.
|
||||
|
||||
* Verify any certificates or connection errors in the console pod logs.
|
||||
|
||||
* Verify the feature flag your plug-in relys on is not disabled.
|
||||
|
||||
* Verify your plug-in does not have any `consolePlugin.dependencies` in `package.json` that are not met.
|
||||
** This can include console version dependencies or dependencies on other plug-ins. Filter the JS console in your browser for your plug-in's name to see messages that are logged.
|
||||
|
||||
* Verify there are no typos in the nav extension perspective or section IDs.
|
||||
** Your plug-in may be loaded, but nav items missing if IDs are incorrect. Try navigating to a plug-in page directly by editing the URL.
|
||||
|
||||
* Verify there are no network policies that are blocking traffic from the console pod to your plug-in service.
|
||||
** If necessary, adjust network policies to allow console pods in the openshift-console namespace to make requests to your service.
|
||||
|
||||
* Verify the list of dynamic plug-ins to be loaded in your browser in the *Console* tab of the developer tools browser.
|
||||
** Evaluate `window.SERVER_FLAGS.consolePlugins` to see the dynamic plug-in on the Console frontend.
|
||||
1
web_console/dynamic-plug-in/_attributes
Symbolic link
1
web_console/dynamic-plug-in/_attributes
Symbolic link
@@ -0,0 +1 @@
|
||||
../_attributes/
|
||||
16
web_console/dynamic-plug-in/deploy-plug-in-cluster.adoc
Normal file
16
web_console/dynamic-plug-in/deploy-plug-in-cluster.adoc
Normal file
@@ -0,0 +1,16 @@
|
||||
:_content-type: ASSEMBLY
|
||||
[id="deploy-plug-in-cluster_{context}"]
|
||||
= Deploy your plug-in on a cluster
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: deploy-plug-in-cluster
|
||||
|
||||
toc::[]
|
||||
|
||||
You can deploy the plug-in to a {product-title} cluster.
|
||||
|
||||
include::modules/build-image-docker.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/deployment-plug-in-cluster.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/disabling-plug-in-browser.adoc[leveloffset=+1]
|
||||
|
||||
11
web_console/dynamic-plug-in/dynamic-plug-in-example.adoc
Normal file
11
web_console/dynamic-plug-in/dynamic-plug-in-example.adoc
Normal file
@@ -0,0 +1,11 @@
|
||||
:_content-type: ASSEMBLY
|
||||
[id="dynamic-plugin-example_{context}"]
|
||||
= Dynamic plug-in example
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: dynamic-plug-in-example
|
||||
|
||||
toc::[]
|
||||
|
||||
Before working through the example, verify that the plug-in is working by following the steps in xref:../../web_console/dynamic-plug-in/dynamic-plug-ins-get-started.adoc#dynamic-plugin-development_dynamic-plug-ins-get-started[Dynamic plug-in development]
|
||||
|
||||
include::modules/adding-tab-pods-page.adoc[leveloffset=+1]
|
||||
@@ -1,10 +1,13 @@
|
||||
// Module is included in the following assemblies:
|
||||
//
|
||||
// * openshift-docs/web_console/dynamic-plug-ins.adoc
|
||||
:_content-type: ASSEMBLY
|
||||
[id="overview-of-dynamic-plug-ins_{context}"]
|
||||
= Overview of dynamic plug-ins
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: overview-of-dynamic-plug-ins
|
||||
|
||||
:_content-type: CONCEPT
|
||||
[id="about-dynamic-plugins_{context}"]
|
||||
= About dynamic plug-ins
|
||||
toc::[]
|
||||
|
||||
[id="dynamic-plug-in-overview"]
|
||||
== About dynamic plug-ins
|
||||
|
||||
A dynamic plug-in allows you to add custom pages and other extensions to your interface at runtime. The `ConsolePlugin` custom resource registers plug-ins with the console, and a cluster administrator enables plug-ins in the `console-operator` configuration.
|
||||
|
||||
@@ -14,20 +17,15 @@ A dynamic plug-in allows you to add custom pages and other extensions to your in
|
||||
A dynamic plug-in allows you to make the following customizations to the {product-title} experience:
|
||||
|
||||
* Add custom pages.
|
||||
* Add perspectives and update navigation items.
|
||||
* Add perspectives beyond administrator and developer.
|
||||
* Add navigation items.
|
||||
* Add tabs and actions to resource pages.
|
||||
|
||||
== PatternFly 4 guidelines
|
||||
When creating your plug-in, follow these guidelines for using PatternFly:
|
||||
|
||||
* Use link:https://www.patternfly.org/v4/[PatternFly4] components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables will help your plug-in look consistent in future console versions.
|
||||
* Make your plug-in accessible by following link:https://www.patternfly.org/v4/accessibility/accessibility-fundamentals/[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.
|
||||
|
||||
[id="general-plug-in-guidelines"]
|
||||
== General guidelines
|
||||
When creating your plug-in, follow these general guidelines:
|
||||
|
||||
* link:https://nodejs.org/en/[`Node.js`] and link:https://yarnpkg.com/[`yarn`] are required to build and run your plug-in.
|
||||
* Prefix your CSS class names with your plug-in 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 link:https://www.i18next.com/[react-i18next] localization guidelines when creating your plug-in. You can use the `useTranslation` hook like the one in the following example:
|
||||
@@ -40,4 +38,12 @@ conster Header: React.FC = () => {
|
||||
};
|
||||
----
|
||||
|
||||
* _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 plug-in. Avoid selectors like element selectors that could affect markup outside of your plug-in’s components.
|
||||
* Avoid selectors that could affect markup outside of your plug-ins components, such as element selectors. These are not APIs and are subject to change. Using them might break your plug-in. Avoid selectors like element selectors that could affect markup outside of your plug-ins components.
|
||||
|
||||
[discrete]
|
||||
== PatternFly 4 guidelines
|
||||
When creating your plug-in, follow these guidelines for using PatternFly:
|
||||
|
||||
* Use link:https://www.patternfly.org/v4/[PatternFly4] components and PatternFly CSS variables. Core PatternFly components are available through the SDK. Using PatternFly components and variables help your plug-in look consistent in future console versions.
|
||||
* Make your plug-in accessible by following link:https://www.patternfly.org/v4/accessibility/accessibility-fundamentals/[PatternFly's accessibility fundamentals].
|
||||
* Avoid using other CSS libraries such as Bootstrap or Tailwind. They can conflict with PatternFly and will not match the console look and feel.
|
||||
@@ -0,0 +1,11 @@
|
||||
:_content-type: ASSEMBLY
|
||||
[id="getting-started-with-dynamic-plugins_{context}"]
|
||||
= Getting started with dynamic plug-ins
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: dynamic-plug-ins-get-started
|
||||
|
||||
toc::[]
|
||||
|
||||
To get started using the dynamic plug-in, you must set up your environment to write a new {product-title} dynamic plug-in. For an example of how to write a new plug-in, see xref:../../web_console/dynamic-plug-in/dynamic-plug-in-example.html#adding-tab-to-pods-page_dynamic-plug-in-example[Adding a tab to the pods page].
|
||||
|
||||
include::modules/dynamic-plug-in-development.adoc[leveloffset=+1]
|
||||
19
web_console/dynamic-plug-in/dynamic-plug-ins-reference.adoc
Normal file
19
web_console/dynamic-plug-in/dynamic-plug-ins-reference.adoc
Normal file
@@ -0,0 +1,19 @@
|
||||
:_content-type: ASSEMBLY
|
||||
[id="dynamic-plugins-reference_{context}"]
|
||||
= Dynamic plug-in reference
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: dynamic-plug-ins-reference
|
||||
|
||||
toc::[]
|
||||
|
||||
You can add extensions that allow you to customize your plug-in. Those extensions are then loaded to the console at run-time.
|
||||
|
||||
include::modules/dynamic-plug-in-sdk-extensions.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/dynamic-plug-in-api.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/troubleshooting-dynamic-plug-in.adoc[leveloffset=+1]
|
||||
|
||||
[role="_additional-resources"]
|
||||
.Additional resources
|
||||
xref:../../security/certificates/service-serving-certificate.adoc#understanding-service-serving_service-serving-certificate[Understanding service serving certificates]
|
||||
1
web_console/dynamic-plug-in/images
Symbolic link
1
web_console/dynamic-plug-in/images
Symbolic link
@@ -0,0 +1 @@
|
||||
../images/
|
||||
1
web_console/dynamic-plug-in/modules
Symbolic link
1
web_console/dynamic-plug-in/modules
Symbolic link
@@ -0,0 +1 @@
|
||||
../modules/
|
||||
1
web_console/dynamic-plug-in/snippets
Symbolic link
1
web_console/dynamic-plug-in/snippets
Symbolic link
@@ -0,0 +1 @@
|
||||
../snippets
|
||||
@@ -1,33 +0,0 @@
|
||||
:_content-type: ASSEMBLY
|
||||
[id="adding-dynamic-plugin-to-console"]
|
||||
= Adding a dynamic plug-in to the {product-title} web console
|
||||
include::_attributes/common-attributes.adoc[]
|
||||
:context: dynamic-plugins
|
||||
|
||||
toc::[]
|
||||
|
||||
You can create and deploy a dynamic plug-in on your cluster that is loaded at run-time.
|
||||
|
||||
:FeatureName: Creating a dynamic plug-in
|
||||
include::snippets/technology-preview.adoc[leveloffset=+1]
|
||||
//
|
||||
|
||||
include::modules/about-dynamic-plug-ins.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/enabling-plug-in-browser.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/dynamic-plug-ins-get-started.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/running-your-dynamic-plug-in.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/adding-new-extension-dynamic-plug-in.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/dynamic-plug-in-sdk-extensions.adoc[leveloffset=+2]
|
||||
|
||||
include::modules/adding-tab-pods-page.adoc[leveloffset=+2]
|
||||
|
||||
include::modules/build-image-docker.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/deployment-plug-in-cluster.adoc[leveloffset=+1]
|
||||
|
||||
include::modules/disabling-plug-in-browser.adoc[leveloffset=+1]
|
||||
Reference in New Issue
Block a user