Intro to Dynamic Plugins in OpenShift 4.10

As the Product Managers for the OpenShift Console, we get a lot of requests for customizing the UI. These requests come from many different groups; internal teams, partners and  customers. From our many interviews, discussions, and workshops, the previous level of customizations we released were not flexible enough to build the integrations and experiences they were looking for with the OpenShift Platform and EcoSystem.

Now, in OpenShift 4.10, we are proud to release Dynamic Plugins as a Technology Preview. Dynamic plugins enable users to build advanced integrations that are native to the OpenShift Console. Dynamic plugin creators will be able to contribute to the existing console UI like the “Admin” & “Developer” perspectives. Creators have the ability to add navigational items and pages, using provided UI components such as list, details, dashboards, tabs, actions, and much more. In addition to updating existing perspectives, creators will be able to add new perspectives. For example, users can build new persona or job based perspectives ie. SRE, or  DevOps based perspective. 

The Power Behind Dynamic Plugins

• Pluggable code – Native perspectives and task flows delivered into the OpenShift Console
• Independent  delivery – Code delivery is independent of the OpenShift Release Cycle, enabling users to update at your own cadence and as often as you’d like
• Shareable UI – Perspectives and flows can be reused by multiple groups and services
• Group  separation – Enables multiple groups to contribute to the Openshift Console
• UI components - provided by the console, build the custom views in a consistent way:
• 508 enabled
• I18N enabled
• DarkMode enabled (coming in 4.11)

Technical Overview

The OpenShift Console is a React based UI that is built with PatternFly 4 Components. Dynamic plugins extend the OpenShift Console via  webpack federated modules. Please review the Getting Started Docs to start building your Dynamic Plugin.

Breakdown of the composition of Dynamic Plugin:

Dos & Don’ts

• DO: Use PatternFly 4 components
• DON’T: Use other CSS libraries (Bootstrap, Tailwind CSS, etc.)
• DO: Use shared SDK components like list and details components to build your pages
• DON’T: Use internal APIs
• DO: Work to maintain a consistent L&F and experience with other console pages
• DON’T: Override default console pages (e.g., pods)
• DO: Prefix your CSS classes with a unique prefix for your plugin
• DON’T: Override PatternFly or default console styles
• DO: Contribute feedback through openshift/console GitHub
• DO: Connect with the PatternFly community if you have requests for components that are not currently in our library, would like to contribute yourself, or just want to stay up to date on the latest additions at www.patternfly.org/v4/contribute/about

Happy building!

Additional resources

• Console customization plug-in
• Console plug-in SDK README
• Dynamic plug-in enhancement proposal

Don’t forget to connect with us

We’re always growing and evolving our improvements to OpenShift with a customer-first mindset. Be on the lookout for more enhancements in future releases. And don’t forget to sign up to participate in future research opportunities to share your OpenShift experiences.  

Let us know your thoughts. We’d love to connect with users like you. Stay up to speed with the OpenShift design team on our OpenShift Design site, and be sure to catch us on the OpenShift Twitch channel.