Skip to main content

Plugins Functionality

Headlamp's plugins exist to change or add 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. The first is Notification, a class that can be used to prepare notifications accepted by headlamp. The second is setNotificationsInStore. It's a dispatcher function that accepts a notification object from the Notification class. When called, it brings the notifications from plugin land to the Headlamp ecosystem so that Headlamp can parse the notification and display it.
  • Router: To get or generate routes

Shared Modules​

Headlamp ships many common npm modules 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. If any dependencies already covered by Headlamp are installed by the plugins, ensure that they are the same version that Headlamp supports. 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 object 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.

screenshot of the header showing two actions

Change the logo (at the top left) with registerAppLogo.

screenshot of the logo being changed

App Menus​

Add menus when Headlamp is running as an app. Headlamp.setAppMenu

screenshot of the logo being changed

Cluster Chooser​

Change the Cluster Chooser button (in the middle top of the Headlamp app bar) with registerClusterChooser.

screenshot of the cluster chooser button

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.

screenshot of the header showing two actions

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.

screenshot of the appended Details View Section

Dynamic Clusters​

Set a cluster dynamically, rather than have the backend read it from configuration files. Headlamp.setCluster.

Route​

Show a component (in Headlamps main area) at a given URL with registerRoute.

Add sidebar items (menu on the left) with registerSidebarEntry. Remove sidebar items with registerSidebarEntryFilter.

screenshot of the sidebar being changed

Tables​

Change what tables across Headlamp show with registerResourceTableColumnsProcessor. This allows you to remove, add, update, or shuffle table columns.

screenshot of the pods list with a context menu added by a plugin

Headlamp Events​

Headlamp has the concept of "Headlamp events". Those are fired when something relevant happens in Headlamp.

React to Headlamp events with registerHeadlampEventCallback.

screenshot of a snackbar notification when an event occurred

Plugin Settings​

The plugins can have user-configurable settings that can be used to change the behavior of the plugin. The plugin settings can be created using registerPluginSettings.

screenshot of the plugin settings