Skip to main content

Module: plugin/registry

Enumerations​

Classes​

Interfaces​

Type aliases​

AppBarActionProcessorType​

Ƭ AppBarActionProcessorType: (info: AppBarActionsProcessorArgs) => AppBarAction[]

Type declaration​

▸ (info): AppBarAction[]

Parameters​
NameType
infoAppBarActionsProcessorArgs
Returns​

AppBarAction[]

Defined in​

redux/actionButtonsSlice.ts:59

AppLogoType​

Ƭ AppLogoType: React.ComponentType<AppLogoProps> | ReactElement | typeof React.Component | null

Defined in​

components/App/AppLogo.tsx:25

ClusterChooserType​

Ƭ ClusterChooserType: React.ComponentType<ClusterChooserProps> | ReactElement | null

Defined in​

components/cluster/ClusterChooser.tsx:10

DetailsViewHeaderActionType​

Ƭ DetailsViewHeaderActionType: HeaderActionType

Defined in​

plugin/registry.tsx:114

DetailsViewHeaderActionsProcessor​

Ƭ DetailsViewHeaderActionsProcessor: HeaderActionsProcessor

Defined in​

plugin/registry.tsx:115

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​
NameType
dataHeadlampEvent
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​

plugin/pluginsSlice.ts:24

sectionFunc​

Ƭ sectionFunc: (resource: KubeObject) => SectionFuncProps | null | undefined

Type declaration​

▸ (resource): SectionFuncProps | null | undefined

deprecated please used DetailsViewSectionType and registerDetailViewSection

Parameters​
NameType
resourceKubeObject
Returns​

SectionFuncProps | null | undefined

Defined in​

plugin/registry.tsx:106

Variables​

DefaultHeadlampEvents​

• DefaultHeadlampEvents: typeof HeadlampEventType = HeadlampEventType

Defined in​

plugin/registry.tsx:100

DetailsViewDefaultHeaderActions​

• DetailsViewDefaultHeaderActions: typeof DefaultHeaderAction = DefaultHeaderAction

Defined in​

plugin/registry.tsx:101

Functions​

getHeadlampAPIHeaders​

▸ getHeadlampAPIHeaders(): Object

Returns headers for making API calls to the headlamp-server backend.

Returns​

Object

Defined in​

helpers/index.ts:368

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​

NameTypeDescription
headerActionAppBarAction | AppBarActionsProcessor | AppBarActionProcessorType | AppBarActionTypeThe action (link) to put in the app bar.

Returns​

void

Defined in​

plugin/registry.tsx:446

▸ 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:

see Change Logo Example

Parameters​

NameTypeDescription
logoAppLogoTypeis 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​

plugin/registry.tsx:546

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>
  );
});

see Cluster Chooser example

Parameters​

NameTypeDescription
chooserClusterChooserTypeis 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​

plugin/registry.tsx:569

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​

NameTypeDescription
headerActionHeaderActionTypeThe action (link) to put in the app bar.

Returns​

void

Defined in​

plugin/registry.tsx:350

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​

NameTypeDescription
processorHeaderActionsProcessor | HeaderActionFuncTypeThe 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

registerDetailsViewSection​

▸ registerDetailsViewSection(viewSection): void

Append a component to the details view for a given resource.

example

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​

NameTypeDescription
viewSectionDetailsViewSectionTypeThe section to add on different view screens.

Returns​

void

Defined in​

plugin/registry.tsx:480

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​

NameTypeDescription
processorDetailsViewSectionsProcessor | DetailsViewSectionProcessorTypeThe 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​

plugin/registry.tsx:518

registerGetTokenFunction​

▸ registerGetTokenFunction(override): void

Override headlamp getToken method

example

registerGetTokenFunction(() => {
  // set token logic here
});

Parameters​

NameTypeDescription
override(cluster: string) => undefined | stringThe getToken override method to use.

Returns​

void

Defined in​

plugin/registry.tsx:603

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​

NameTypeDescription
callbackHeadlampEventCallbackThe callback to add.

Returns​

void

Defined in​

plugin/registry.tsx:629

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:

see Change Logo Example

Parameters​

NameTypeDefault valueDescription
namestringundefinedThe name of the plugin.
componentPluginSettingsComponentTypeundefinedThe component to use for the settings.
displaySaveButtonbooleanfalseWhether to display the save button.

Returns​

void

void

Defined in​

plugin/registry.tsx:675

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",
      getValue: (pod: Pod) => {
        return pod.spec.initContainers.length;
      },
    });
  }

  return columns;
});

Parameters​

NameTypeDescription
processorTableColumnsProcessor | (args: { columns: (ResourceTableColumn | ColumnType)[] ; id: string }) => (ResourceTableColumn | ColumnType)[]The processor ID and function. See #TableColumnsProcessor.

Returns​

void

Defined in​

plugin/registry.tsx:404

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​

NameTypeDescription
routeSpecRoutedetails of URL, highlighted sidebar and component to use.

Returns​

void

Defined in​

plugin/registry.tsx:322

registerRouteFilter​

▸ registerRouteFilter(filterFunc): void

Remove routes.

example

import { registerRouteFilter } from "@kinvolk/headlamp-plugin/lib";

registerRouteFilter((route) => (route.path === "/workloads" ? null : route));

Parameters​

NameTypeDescription
filterFunc(entry: Route) => null | Routea function for filtering routes.

Returns​

void

Defined in​

plugin/registry.tsx:295

registerSetTokenFunction​

▸ registerSetTokenFunction(override): void

Override headlamp setToken method

example

registerSetTokenFunction((cluster: string, token: string | null) => {
  // set token logic here
});

Parameters​

NameTypeDescription
override(cluster: string, token: null | string) => voidThe setToken override method to use.

Returns​

void

Defined in​

plugin/registry.tsx:585

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​

NameType
__namedParametersSidebarEntryProps

Returns​

void

Defined in​

plugin/registry.tsx:241

registerSidebarEntryFilter​

▸ registerSidebarEntryFilter(filterFunc): void

Remove sidebar menu items.

example

import { registerSidebarEntryFilter } from "@kinvolk/headlamp-plugin/lib";

registerSidebarEntryFilter((entry) =>
  entry.name === "workloads" ? null : entry
);

Parameters​

NameTypeDescription
filterFunc(entry: SidebarEntryProps) => null | SidebarEntryPropsa function for filtering sidebar entries.

Returns​

void

Defined in​

plugin/registry.tsx:276

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​

NameTypeDescription
command"minikube" | "az"The command to run.
argsstring[]An array of arguments to pass to the command.
optionsObject-

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.

NameType
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

Defined in​

components/App/runCommand.ts:27