Project: Headlamp (Observability and Analysis / Observability)
File: plugin_registry.md

title: "Module: plugin/registry" linkTitle: "plugin/registry" slug: "plugin_registry" AppBarActionProcessorType: (`info`: `AppBarActionsProcessorArgs`) => `AppBarAction`[] (`info`): `AppBarAction`[] | Name | Type | | : | : | | `info` | `AppBarActionsProcessorArgs` | `AppBarAction`[] _ AppLogoType: `React.ComponentType`<\> \| `ReactElement` \| typeof `React.Component` \| ``null`` _ ClusterChooserType: `React.ComponentType`<\> \| `ReactElement` \| ``null`` _ DetailsViewHeaderActionType: `HeaderActionType` _ DetailsViewHeaderActionsProcessor: `HeaderActionsProcessor` _ DetailsViewSectionType: (...`args`: `any`[]) => `JSX.Element` \| ``null`` \| `ReactNode` \| ``null`` \| `ReactElement` \| `ReactNode` _ HeadlampEventCallback: (`data`: ) => `void` (`data`): `void` | Name | Type | | : | : | | `data` | | `void` _ PluginSettingsComponentType: `React.ComponentType`<\> \| `ReactElement` \| ``null`` PluginSettingsComponentType is the type of the component associated with the plugin's settings. _ sectionFunc: (`resource`: ) => \| ``null`` \| `undefined` (`resource`): \| ``null`` \| `undefined` `deprecated` please used DetailsViewSectionType and registerDetailViewSection | Name | Type | | : | : | | `resource` | | \| ``null`` \| `undefined` DefaultHeadlampEvents: typeof `HeadlampEventType` = `HeadlampEventType` _ DetailsViewDefaultHeaderActions: typeof `DefaultHeaderAction` = `DefaultHeaderAction` getHeadlampAPIHeaders(): `Object` Returns headers for making API calls to the headlamp-server backend. `Object` _ registerAppBarAction(`headerAction`): `void` Add a component into the app bar (at the top of the app). `example` ```tsx import { registerAppBarAction } from '@kinvolk/headlamp-plugin/lib'; import { Button } from '@mui/material'; function ConsoleLogger() { return ( <Button onClick={() => { console.log('Hello from ConsoleLogger!') }} > Print Log </Button> ); } registerAppBarAction(ConsoleLogger); ``` | Name | Type | Description | | : | : | : | | `headerAction` | `AppBarAction` \| `AppBarActionsProcessor` \| \| `AppBarActionType` | The action (link) to put in the app bar. | `void` _ registerAppLogo(`logo`): `void` Add a logo for Headlamp to use instead of the default one. `example` ```tsx import { registerAppLogo } from '@kinvolk/headlamp-plugin/lib'; registerAppLogo(<p>my logo</p>) ``` More complete logo example in plugins/examples/change-logo: `see` | Name | Type | Description | | : | : | : | | `logo` | | is a React Component that takes two required props `logoType` which is a constant string literal that accepts either of the two values `small` or `large` depending on whether the sidebar is in shrink or expanded state so that you can change your logo from small to large and the other optional prop is the `themeName` which is a string with two values 'light' and 'dark' base on which theme is selected. | `void` _ registerClusterChooser(`chooser`): `void` Use a custom cluster chooser button `example` ```tsx import { ClusterChooserProps, registerClusterChooser } from '@kinvolk/headlamp-plugin/lib'; registerClusterChooser(({ clickHandler, cluster }: ClusterChooserProps) => { return <button onClick={clickHandler}>my chooser Current cluster: {cluster}</button>; }) ``` `see` | Name | Type | Description | | : | : | : | | `chooser` | | is a React Component that takes one required props ```clickHandler``` which is the action handler that happens when the custom chooser button component click event occurs | `void` _ registerDetailsViewHeaderAction(`headerAction`): `void` Add a component into the details view header. `example` ```tsx import { ActionButton } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; import { registerDetailsViewHeaderAction } from '@kinvolk/headlamp-plugin/lib'; function IconAction() { return ( <ActionButton description="Launch" icon="mdi:comment-quote" onClick={() => console.log('Hello from IconAction!')} /> ) } registerDetailsViewHeaderAction(IconAction); ``` | Name | Type | Description | | : | : | : | | `headerAction` | `HeaderActionType` | The action (link) to put in the app bar. | `void` _ registerDetailsViewHeaderActionsProcessor(`processor`): `void` Add a processor for the details view header actions. Allowing the modification of header actions. `example` ```tsx import { registerDetailsViewHeaderActionsProcessor, DetailsViewDefaultHeaderActions } from '@kinvolk/headlamp-plugin/lib'; // Processor that removes the default edit action. registerDetailsViewHeaderActionsProcessor((resource, headerActions) => { return headerActions.filter(action => action.name !==

}); More complete detail view example in plugins/examples/details-view: @see | Name | Type | Description | | : | : | : | | `processor` | `HeaderActionsProcessor` \| `HeaderActionFuncType` | The processor to add. Receives a resource (for which we are processing the header actions) and the current header actions and returns the new header actions. Return an empty array to remove all header actions. | `void` _ registerDetailsViewSection(`viewSection`): `void` Append a component to the details view for a given resource. `example` ```tsx import { registerDetailsViewSection, DetailsViewSectionProps } from '@kinvolk/headlamp-plugin/lib'; registerDetailsViewSection(({ resource }: DetailsViewSectionProps) => { if (resource.kind === 'Pod') { return ( <SectionBox title="A very fine section title"> The body of our Section for {resource.kind} </SectionBox> ); } return null; }); ``` | Name | Type | Description | | : | : | : | | `viewSection` | | The section to add on different view screens. | `void` _ registerDetailsViewSectionsProcessor(`processor`): `void` Add a processor for the details view sections. Allowing the modification of what sections are shown. `example` ```tsx import { registerDetailsViewSectionsProcessor } from '@kinvolk/headlamp-plugin/lib'; registerDetailsViewSectionsProcessor(function addTopSection( resource, sections ) { // Ignore if there is no resource. if (!resource) { return sections; } // Check if we already have added our custom section (this function may be called multiple times). const customSectionId = 'my-custom-section'; if (sections.findIndex(section => section.id === customSectionId) !== -1) { return sections; } return [ { id: 'my-custom-section', section: ( <SectionBox title="I'm the top of the world!" /> ), }, ...sections, ]; }); ``` | Name | Type | Description | | : | : | : | | `processor` | `DetailsViewSectionsProcessor` \| `DetailsViewSectionProcessorType` | The processor to add. Receives a resource (for which we are processing the sections) and the current sections and returns the new sections. Return an empty array to remove all sections. | `void` _ registerGetTokenFunction(`override`): `void` Override headlamp getToken method `example` ```ts registerGetTokenFunction(() => { // set token logic here }); ``` | Name | Type | Description | | : | : | : | | `override` | (`cluster`: `string`) => `undefined` \| `string` | The getToken override method to use. | `void` _ registerHeadlampEventCallback(`callback`): `void` Add a callback for headlamp events. `example` ```ts import { DefaultHeadlampEvents, registerHeadlampEventCallback, HeadlampEvent, } from '@kinvolk/headlamp-plugin/lib'; registerHeadlampEventCallback((event: HeadlampEvent) => { if (event.type === DefaultHeadlampEvents.ERROR_BOUNDARY) { console.error('Error:', event.data); } else { console.log(`Headlamp event of type ${event.type}: ${event.data}`) } }); ``` | Name | Type | Description | | : | : | : | | `callback` | | The callback to add. | `void` _ registerPluginSettings(`name`, `component`, `displaySaveButton?`): `void` Register a plugin settings component. `example` ```tsx import { registerPluginSettings } from '@kinvolk/headlamp-plugin/lib'; import { TextField } from '@mui/material'; function MyPluginSettingsComponent(props: PluginSettingsDetailsProps) { const { data, onDataChange } = props; function onChange(value: string) { if (onDataChange) { onDataChange({ works: value }); } } return ( <TextField value={data?.works || ''} onChange={e => onChange(e.target.value)} label="Normal Input" variant="outlined" fullWidth /> ); } const displaySaveButton = true; // Register a plugin settings component. registerPluginSettings('my-plugin', MyPluginSettingsComponent, displaySaveButton); ``` More complete plugin settings example in plugins/examples/change-logo: `see` | Name | Type | Default value | Description | | : | : | : | : | | `name` | `string` | `undefined` | The name of the plugin. | | `component` | | `undefined` | The component to use for the settings. | | `displaySaveButton` | `boolean` | `false` | Whether to display the save button. | `void` void _ registerResourceTableColumnsProcessor(`processor`): `void` Add a processor for the resource table columns. Allowing the modification of what tables

`example` ```tsx import { registerResourceTableColumnsProcessor } from '@kinvolk/headlamp-plugin/lib'; // Processor that adds a column to show how many init containers pods have (in the default pods' list table). registerResourceTableColumnsProcessor(function ageRemover({ id, columns }) { if (id === 'headlamp-pods') { columns.push({ label: 'Init Containers', getValue: (pod: Pod) => { return pod.spec.initContainers.length; }, }); } return columns; }); ``` | Name | Type | Description | | : | : | : | | `processor` | `TableColumnsProcessor` \| (`args`: { `columns`: (`ResourceTableColumn` \| `ColumnType`)[] ; `id`: `string` }) => (`ResourceTableColumn` \| `ColumnType`)[] | The processor ID and function. See #TableColumnsProcessor. | `void` _ registerRoute(`routeSpec`): `void` Add a Route for a component. `example` ```tsx import { registerRoute } from '@kinvolk/headlamp-plugin/lib'; // Add a route that will display the given component and select // the "traces" sidebar item. registerRoute({ path: '/traces', sidebar: 'traces', component: () => <TraceList /> }); ``` `see` `see` | Name | Type | Description | | : | : | : | | `routeSpec` | | details of URL, highlighted sidebar and component to use. | `void` _ registerRouteFilter(`filterFunc`): `void` Remove routes. `example` ```tsx import { registerRouteFilter } from '@kinvolk/headlamp-plugin/lib'; registerRouteFilter(route => (route.path === '/workloads' ? null : route)); ``` | Name | Type | Description | | : | : | : | | `filterFunc` | (`entry`: ) => ``null`` \| | a function for filtering routes. | `void` _ registerSetTokenFunction(`override`): `void` Override headlamp setToken method `example` ```ts registerSetTokenFunction((cluster: string, token: string | null) => { // set token logic here }); ``` | Name | Type | Description | | : | : | : | | `override` | (`cluster`: `string`, `token`: ``null`` \| `string`) => `void` | The setToken override method to use. | `void` _ registerSidebarEntry(`namedParameters`): `void` Add a Sidebar Entry to the menu (on the left side of Headlamp). `example` ```tsx import { registerSidebarEntry } from '@kinvolk/headlamp-plugin/lib'; registerSidebarEntry({ parent: 'cluster', name: 'traces', label: 'Traces', url: '/traces' }); ``` `see` | Name | Type | | : | : | | `namedParameters` | | `void` _ registerSidebarEntryFilter(`filterFunc`): `void` Remove sidebar menu items. `example` ```tsx import { registerSidebarEntryFilter } from '@kinvolk/headlamp-plugin/lib'; registerSidebarEntryFilter(entry => (entry.name === 'workloads' ? null : entry)); ``` | Name | Type | Description | | : | : | : | | `filterFunc` | (`entry`: ) => ``null`` \| | a function for filtering sidebar entries. | `void` _ runCommand(`command`, `args`, `options`): `Object` Runs a shell command and returns an object that mimics the interface of a ChildProcess object returned by Node's spawn function. This function is intended to be used only when Headlamp is in app mode. `see` handleRunCommand in app/electron/main.ts This function uses the desktopApi.send and desktopApi.receive methods to communicate with the main process. `example` ```ts const minikube = runCommand('minikube', ['status']); minikube.stdout.on('data', (data) => { console.log('stdout:', data); }); minikube.stderr.on('data', (data) => { console.log('stderr:', data); }); minikube.on('exit', (code) => { console.log('exit code:', code); }); ``` | Name | Type | Description | | : | : | : | | `command` | ``"minikube"`` \| ``"az"`` | The command to run. | | `args` | `string`[] | An array of arguments to pass to the command. | | `options` | `Object` | - | `Object` An object with `stdout`, `stderr`, and `on` properties. You can listen for 'data' events on `stdout` and `stderr`, and 'exit' events with `on`. | Name | Type | | : | : | | `stderr` | { `on`: (`event`: `string`, `listener`: (`chunk`: `any`) => `void`) => `void` } | | `stderr.on` | [object Object] | | `stdout` | { `on`: (`event`: `string`, `listener`: (`chunk`: `any`) => `void`) =>