* Updating the Licenses, except for applying eslint, building * Applying ESLint rules,building @kbn/pm, regenerating api docs |
||
---|---|---|
.. | ||
public | ||
.eslintrc.json | ||
kibana.json | ||
package.json | ||
README.md | ||
tsconfig.json |
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);
}
}