Module: plugin/registry

    Enumerations

    Classes

    Interfaces

    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

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

    plugin/pluginsSlice.ts:24


    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

    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

    Name Type Description
    headerAction AppBarAction | AppBarActionsProcessor | AppBarActionProcessorType | AppBarActionType The 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

    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

    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

    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

    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

    Name Type Description
    headerAction HeaderActionType The 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
    
    | 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/45b84205/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

    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

    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

    plugin/registry.tsx:518


    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

    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

    Name Type Description
    callback HeadlampEventCallback The 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

    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

    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

    Name Type Description
    processor TableColumnsProcessor | (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

    Name Type Description
    routeSpec Route details 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

    Name Type Description
    filterFunc (entry: Route ) => null | Route a 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

    Name Type Description
    override (cluster: string, token: null | string) => void The 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

    Name Type
    __namedParameters SidebarEntryProps

    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

    Name Type Description
    filterFunc (entry: SidebarEntryProps ) => null | SidebarEntryProps a 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

    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

    Defined in

    components/App/runCommand.ts:27