Plugins Functionality
Headlamp’s plugins exist for changing or adding functionality related to the user interface and experience.
Plugins Lib
The @kinvolk/headlamp-plugin
module ships a library
(@kinvolk/headlamp-plugin/lib
) where all the Headlamp-related development
modules can be found.
The main ones are:
- K8s: Kubernetes related functionality
- Headlamp: To register plugins
- CommonComponents: React components commonly used in the Headlamp UI
- Notification: This module contains two exported members one is Notification, a class which can be used to prepare notifications that are accepted by headlamp and the other one is setNotificationsInStore it is a dispatcher function which accepts a notification object prepared from the Notification class and when called it brings the notifications from plugin land to headlamp ecosystem so that headlamp can parse the notification and display it.
- Router: To get or generate routes
Shared Modules
Headlamp ships many of the common npm modules that should be shared by both the plugins and Headlamp itself, and includes the config files for editors like VS Code to find them.
These are:
- react
- @iconify-react
- react-redux
- @material-ui/core
- @material-ui/styles
- lodash
- notistack
- recharts
Thus, plugins only need to install dependencies that are not yet provided by Headlamp.
Yet, if any dependencies already covered by Headlamp are installed by the plugins, you
just need to make sure they are the same version that Headlamp supports, as these will
not be bundled when
building the plugin
.
Particularly, the mentioned modules will be replaced by their version that’s included
in a global objects called pluginLib
.
Older plugin development guides still asked developers to use e.g. React in the following
way const React = window.pluginLib.React
, but this is no longer needed.
Functionality
The plugin registers makes functionality available to plugins in an easy way.
The idea is to make more and more functionality available to plugins. Here is what we have so far:
App Bar Action
Show a component in the app bar (in the top right) with registerAppBarAction .
- Example plugin shows How To Register an App Bar Action
- API reference for registerAppBarAction
App Logo
Change the logo (at the top left) with registerAppLogo .
- Example plugin shows How To Change The Logo
- API reference for registerAppLogo
App Menus
Add menus when Headlamp is running as an app. Headlamp.setAppMenu
- Example plugin shows How To Add App Menus
- API reference for Headlamp.setAppMenu
Cluster Chooser
Change the Cluster Chooser button (in the middle top of the Headlamp app bar) with registerClusterChooser .
- Example plugin shows How To Register Cluster Chooser button
- API reference for registerClusterChooser
Details View Header Action
Show a component to the top right area of a detail view (in the area of the screenshot below that’s highlighted as yellow) registerDetailsViewHeaderAction .
- Example plugin shows How To set a Details View Header Action
- API reference for registerDetailsViewHeaderAction
Details View Section
Change sections in cluster resources' details views with registerDetailsViewSectionsProcessor . This allows you to remove, add, update, or shuffle sections within details views, including the back link.
Or simply append a component at the bottom of different details views with registerDetailsViewSection .
- Example plugin shows How To set a Details View Section
- API reference for registerDetailsViewSection
Dynamic Clusters
Set a cluster dynamically, rather than have the backend read it from configuration files. Headlamp.setCluster .
- Example plugin shows How To Dynamically Set a Cluster
- API reference for Headlamp.setCluster
Route
Show a component (in Headlamps main area) at a given URL with registerRoute .
- Example plugin shows How To Register a Route , and how to remove a route.
- API reference for registerRoute
- API reference for registerRouteFilter
Sidebar Item
Add sidebar items (menu on the left) with registerSidebarEntry . Remove sidebar items with registerSidebarEntryFilter .
- Example plugin shows How To add items to the sidebar , and also how to remove sidebar items.
- API reference for registerSidebarEntry
- API reference for registerSidebarEntryFilter
Tables
Change what tables across Headlamp show with registerResourceTableColumnsProcessor . This allows you to remove, add, update, or shuffle table columns.
- Example plugin shows How to add a context menu to each row in the pods list table .
- API reference for registerResourceTableColumnsProcessor