kibana/x-pack/examples/ui_actions_enhanced_examples

Ui actions enhanced examples

To run this example plugin, use the command yarn start --run-examples.

Drilldown examples

This plugin holds few examples on how to add drilldown types to dashboard. See ./public/drilldowns/ folder.

To play with drilldowns, open any dashboard, click "Edit" to put it in edit mode. Now when opening context menu of dashboard panels you should see "Create drilldown" option.

Once you click "Create drilldown" you should be able to see drilldowns added by this sample plugin.

dashboard_hello_world_drilldown

dashboard_hello_world_drilldown is the most basic "hello world" example showing how a drilldown can be built, all in one file.

dashboard_to_url_drilldown

dashboard_to_url_drilldown is a good starting point for build a drilldown that navigates somewhere externally.

One can see how middle-click or Ctrl + click behavior could be supported using getHref field.

dashboard_to_discover_drilldown

dashboard_to_discover_drilldown shows how a real-world drilldown could look like.

Drilldown Manager examples

Drilldown Manager is a collectio of code and React components that allows you to add drilldowns to any app. To see examples of how drilldows can be added to your app, run Kibana with --run-examples flag:

yarn start --run-examples

Then go to "Developer examples" and "UI Actions Enhanced", where you can see examples where Drilldown Manager is used outside of the Dashboard app:

These examples show how you can create your custom UI Actions triggers and add drilldowns to them, or use an embeddable in your app and add drilldows to it.

Trigger examples

The /public/triggers folder shows how you can create custom triggers for your app. Triggers are things that trigger some action in UI, like "user click".

Once you have defined your triggers, you need to register them in your plugin:

export class MyPlugin implements Plugin {
  public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) {
    uiActions.registerTrigger(myTrigger);
  }
}

app1_hello_world_drilldown

app1_hello_world_drilldown is a basic example that shows how you can add the most basic drilldown to your custom trigger.

appx_to_dashboard_drilldown

app1_to_dashboard_drilldown and app2_to_dashboard_drilldown show how the Dashboard drilldown can be used in other apps, outside of Dashboard.

Basically you define it:

type Trigger = typeof MY_TRIGGER_TRIGGER;
type Context = MyAppClickContext;

export class App1ToDashboardDrilldown extends AbstractDashboardDrilldown<Trigger> {
  public readonly supportedTriggers = () => [MY_TRIGGER] as Trigger[];

  protected async getURL(config: Config, context: Context): Promise<KibanaURL> {
    return 'https://...';
  }
}

and then you register it in your plugin:

export class MyPlugin implements Plugin {
  public setup(core, { uiActionsEnhanced: uiActions }: SetupDependencies) {
    const drilldown = new App2ToDashboardDrilldown(/* You can pass in dependencies here. */);
    uiActions.registerDrilldown(drilldown);
  }
}