Module: plugin/registry
Enumerations
Classes
Interfaces
- AppLogoProps
- ClusterChooserProps
- CreateResourceEvent
- DeleteResourceEvent
- DetailsViewSectionProps
- EditResourceEvent
- ErrorBoundaryEvent
- EventListEvent
- HeadlampEvent
- LogsEvent
- PluginLoadingErrorEvent
- PluginSettingsDetailsProps
- PluginsLoadedEvent
- PodAttachEvent
- ResourceDetailsViewLoadedEvent
- ResourceListViewLoadedEvent
- RestartResourceEvent
- ScaleResourceEvent
- SectionFuncProps
- SidebarEntryProps
- TerminalEvent
Type aliases
AppBarActionProcessorType
Ƭ AppBarActionProcessorType: (info
: AppBarActionsProcessorArgs
) => AppBarAction
[]
Type declaration
▸ (info
): AppBarAction
[]
Parameters
Name | Type |
---|---|
info |
AppBarActionsProcessorArgs |
Returns
AppBarAction
[]
Defined in
redux/actionButtonsSlice.ts:59
AppLogoType
Ƭ AppLogoType: React.ComponentType
<
AppLogoProps
> | ReactElement
| typeof React.Component
| null
Defined in
ClusterChooserType
Ƭ ClusterChooserType: React.ComponentType
<
ClusterChooserProps
> | ReactElement
| null
Defined in
components/cluster/ClusterChooser.tsx:10
DetailsViewHeaderActionType
Ƭ DetailsViewHeaderActionType: HeaderActionType
Defined in
DetailsViewHeaderActionsProcessor
Ƭ DetailsViewHeaderActionsProcessor: HeaderActionsProcessor
Defined in
DetailsViewSectionType
Ƭ DetailsViewSectionType: (…args
: any
[]) => JSX.Element
| null
| ReactNode
| null
| ReactElement
| ReactNode
Defined in
components/DetailsViewSection/DetailsViewSection.tsx:10
HeadlampEventCallback
Ƭ HeadlampEventCallback: (data
:
HeadlampEvent
) => void
Type declaration
▸ (data
): void
Parameters
Name | Type |
---|---|
data |
HeadlampEvent
|
Returns
void
Defined in
redux/headlampEventSlice.ts:278
PluginSettingsComponentType
Ƭ PluginSettingsComponentType: React.ComponentType
<
PluginSettingsDetailsProps
> | ReactElement
| null
PluginSettingsComponentType is the type of the component associated with the plugin’s settings.
Defined in
sectionFunc
Ƭ sectionFunc: (resource
:
KubeObject
) =>
SectionFuncProps
| null
| undefined
Type declaration
▸ (resource
):
SectionFuncProps
| null
| undefined
deprecated
please used DetailsViewSectionType and registerDetailViewSection
Parameters
Name | Type |
---|---|
resource |
KubeObject
|
Returns
SectionFuncProps
| null
| undefined
Defined in
Variables
DefaultHeadlampEvents
• DefaultHeadlampEvents: typeof HeadlampEventType
= HeadlampEventType
Defined in
DetailsViewDefaultHeaderActions
• DetailsViewDefaultHeaderActions: typeof DefaultHeaderAction
= DefaultHeaderAction
Defined in
Functions
getHeadlampAPIHeaders
▸ getHeadlampAPIHeaders(): Object
Returns headers for making API calls to the headlamp-server backend.
Returns
Object
Defined in
registerAppBarAction
▸ registerAppBarAction(headerAction
): void
Add a component into the app bar (at the top of the app).
example
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);
Parameters
Name | Type | Description |
---|---|---|
headerAction |
AppBarAction | AppBarActionsProcessor |
AppBarActionProcessorType
| AppBarActionType |
The action (link) to put in the app bar. |
Returns
void
Defined in
registerAppLogo
▸ registerAppLogo(logo
): void
Add a logo for Headlamp to use instead of the default one.
example
import { registerAppLogo } from '@kinvolk/headlamp-plugin/lib';
registerAppLogo(<p>my logo</p>)
More complete logo example in plugins/examples/change-logo:
Parameters
Name | Type | Description |
---|---|---|
logo |
AppLogoType
|
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. |
Returns
void
Defined in
registerClusterChooser
▸ registerClusterChooser(chooser
): void
Use a custom cluster chooser button
example
import { ClusterChooserProps, registerClusterChooser } from '@kinvolk/headlamp-plugin/lib';
registerClusterChooser(({ clickHandler, cluster }: ClusterChooserProps) => {
return <button onClick={clickHandler}>my chooser Current cluster: {cluster}</button>;
})
Parameters
Name | Type | Description |
---|---|---|
chooser |
ClusterChooserType
|
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 |
Returns
void
Defined in
registerDetailsViewHeaderAction
▸ registerDetailsViewHeaderAction(headerAction
): void
Add a component into the details view header.
example
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);
Parameters
Name | Type | Description |
---|---|---|
headerAction |
HeaderActionType |
The action (link) to put in the app bar. |
Returns
void
Defined in
registerDetailsViewHeaderActionsProcessor
▸ registerDetailsViewHeaderActionsProcessor(processor
): void
Add a processor for the details view header actions. Allowing the modification of header actions.
example
import { registerDetailsViewHeaderActionsProcessor, DetailsViewDefaultHeaderActions } from '@kinvolk/headlamp-plugin/lib';
// Processor that removes the default edit action.
registerDetailsViewHeaderActionsProcessor((resource, headerActions) => {
return headerActions.filter(action => action.name !== DetailsViewDefaultHeaderActions.EDIT);
});
More complete detail view example in plugins/examples/details-view:
@see [Detail View Example](http://github.com/kinvolk/headlamp/plugins/examples/details-view/)
#### Parameters
| 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. |
#### Returns
`void`
#### Defined in
[plugin/registry.tsx:373](https://github.com/headlamp-k8s/headlamp/blob/2ce94491/frontend/src/plugin/registry.tsx#L373)
___
### registerDetailsViewSection
▸ **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;
});
Parameters
Name | Type | Description |
---|---|---|
viewSection |
DetailsViewSectionType
|
The section to add on different view screens. |
Returns
void
Defined in
registerDetailsViewSectionsProcessor
▸ registerDetailsViewSectionsProcessor(processor
): void
Add a processor for the details view sections. Allowing the modification of what sections are shown.
example
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,
];
});
Parameters
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. |
Returns
void
Defined in
registerGetTokenFunction
▸ registerGetTokenFunction(override
): void
Override headlamp getToken method
example
registerGetTokenFunction(() => {
// set token logic here
});
Parameters
Name | Type | Description |
---|---|---|
override |
(cluster : string ) => undefined | string |
The getToken override method to use. |
Returns
void
Defined in
registerHeadlampEventCallback
▸ registerHeadlampEventCallback(callback
): void
Add a callback for headlamp events.
example
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}`)
}
});
Parameters
Name | Type | Description |
---|---|---|
callback |
HeadlampEventCallback
|
The callback to add. |
Returns
void
Defined in
registerPluginSettings
▸ registerPluginSettings(name
, component
, displaySaveButton?
): void
Register a plugin settings component.
example
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:
Parameters
Name | Type | Default value | Description |
---|---|---|---|
name |
string |
undefined |
The name of the plugin. |
component |
PluginSettingsComponentType
|
undefined |
The component to use for the settings. |
displaySaveButton |
boolean |
false |
Whether to display the save button. |
Returns
void
void
Defined in
registerResourceTableColumnsProcessor
▸ registerResourceTableColumnsProcessor(processor
): void
Add a processor for the resource table columns. Allowing the modification of what tables show.
example
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',
getter: (pod: Pod) => {
return pod.spec.initContainers.length;
},
});
}
return columns;
});
Parameters
Name | Type | Description |
---|---|---|
processor |
TableColumnsProcessor | (args : { columns : (ResourceTableColumn | ColumnType )[] ; id : string }) => (ResourceTableColumn | ColumnType )[] |
The processor ID and function. See #TableColumnsProcessor. |
Returns
void
Defined in
registerRoute
▸ registerRoute(routeSpec
): void
Add a Route for a component.
example
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
Route examples
see
Sidebar Example
Parameters
Name | Type | Description |
---|---|---|
routeSpec |
Route
|
details of URL, highlighted sidebar and component to use. |
Returns
void
Defined in
registerRouteFilter
▸ registerRouteFilter(filterFunc
): void
Remove routes.
example
import { registerRouteFilter } from '@kinvolk/headlamp-plugin/lib';
registerRouteFilter(route => (route.path === '/workloads' ? null : route));
Parameters
Name | Type | Description |
---|---|---|
filterFunc |
(entry :
Route
) => null |
Route
|
a function for filtering routes. |
Returns
void
Defined in
registerSetTokenFunction
▸ registerSetTokenFunction(override
): void
Override headlamp setToken method
example
registerSetTokenFunction((cluster: string, token: string | null) => {
// set token logic here
});
Parameters
Name | Type | Description |
---|---|---|
override |
(cluster : string , token : null | string ) => void |
The setToken override method to use. |
Returns
void
Defined in
registerSidebarEntry
▸ registerSidebarEntry(__namedParameters
): void
Add a Sidebar Entry to the menu (on the left side of Headlamp).
example
import { registerSidebarEntry } from '@kinvolk/headlamp-plugin/lib';
registerSidebarEntry({ parent: 'cluster', name: 'traces', label: 'Traces', url: '/traces' });
see
Sidebar Example
Parameters
Name | Type |
---|---|
__namedParameters |
SidebarEntryProps
|
Returns
void
Defined in
registerSidebarEntryFilter
▸ registerSidebarEntryFilter(filterFunc
): void
Remove sidebar menu items.
example
import { registerSidebarEntryFilter } from '@kinvolk/headlamp-plugin/lib';
registerSidebarEntryFilter(entry => (entry.name === 'workloads' ? null : entry));
Parameters
Name | Type | Description |
---|---|---|
filterFunc |
(entry :
SidebarEntryProps
) => null |
SidebarEntryProps
|
a function for filtering sidebar entries. |
Returns
void
Defined in
runCommand
▸ 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
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);
});
Parameters
Name | Type | Description |
---|---|---|
command |
"minikube" | "az" |
The command to run. |
args |
string [] |
An array of arguments to pass to the command. |
options |
Object |
- |
Returns
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 ) => void } |
stdout.on |
[object Object] |
on |
(event : string , listener : (code : null | number ) => void ) => void |