New

The executive guide to generative AI

Read more
About usPartnersSupport|Login
IMPORTANT: No additional bug fixes or documentation updates will be released for this version. For the latest information, see the current release documentation.
« Kibana Core API Configuration service »
Elastic Docs ›Kibana Guide [7.13] ›Developer guide ›Architecture

Application service

edit

Application service

edit

Kibana has migrated to be a Single Page Application. Plugins should use Application service API to instruct Kibana that an application should be loaded and rendered in the UI in response to user interactions. The service also provides utilities for controlling the navigation link state, seamlessly integrating routing between applications, and loading async chunks on demand.

The Application service is only available client side.

import { AppMountParameters, CoreSetup, Plugin, DEFAULT_APP_CATEGORIES } from 'kibana/public';

export class MyPlugin implements Plugin {
  public setup(core: CoreSetup) {
    core.application.register({ 
      category: DEFAULT_APP_CATEGORIES.kibana,
      id: 'my-plugin',
      title: 'my plugin title',
      euiIconType: '/path/to/some.svg',
      order: 100,
      appRoute: '/app/my_plugin', 
      async mount(params: AppMountParameters) { 
        // Load application bundle
        const { renderApp } = await import('./application');
        // Get start services
        const [coreStart, depsStart] = await core.getStartServices(); 
        // Render the application
        return renderApp(coreStart, depsStart, params); 
      },
    });
  }
}

See application.register interface

Application specific URL.

mount callback is invoked when a user navigates to the application-specific URL.

core.getStartServices method provides API available during start lifecycle.

mount method must return a function that will be called to unmount the application, which is called when Kibana unmounts the application. You can put a clean-up logic there.

you are free to use any UI library to render a plugin application in DOM. However, we recommend using React and EUI for all your basic UI components to create a consistent UI experience.

« Kibana Core API Configuration service »
Was this helpful?
Feedback