* feat: 🎸 add telemetry for in-chart "Explore underlying data" * feat: 🎸 add telemetry for in-chart "Explore underlying data" * refactor: 💡 move all drilldowns into a sub-folder * feat: 🎸 setup example app section for ui_actions_enhanced * feat: 🎸 set up Drilldown Manager section * feat: 🎸 open drilldown manager from example plugin * refactor: 💡 rename supportedTriggers -> triggers prop * feat: 🎸 show dev warning if triggers prop is empty * refactor: 💡 rename "supportedTriggers" -> "triggers" props * feat: 🎸 open and close drilldown manager from example plugin * feat: 🎸 add sample ML job trigger * feat: 🎸 add sample ML URL drilldown * refactor: 💡 move KibanaURL to share plugin * refactor: 💡 add index file to ml drilldown * feat: 🎸 add AbstractDashboardDrilldown * refactor: 💡 make dashboard drilldown use abstract drilldown * refactor: 💡 rename dashboard drilldown to embeddable drilldown * feat: 🎸 add Dashboard drilldown to sample plugin * feat: 🎸 open dashboard drilldown in list view * feat: 🎸 add drilldown execute button * refactor: 💡 move drilldown React hooks into /hooks folder * test: 💍 fix tests after renaming triggers * chore: 🤖 populate "requireBundles" * fix: 🐛 fix TypeScript errors * fix: 🐛 fix Kibana plugin dependency * chore: 🤖 remoe unused import * feat: 🎸 persist drilldown manager state across app navigations * refactor: 💡 move no-embeddable example into a seprate file * feat: 🎸 set up example with embeddable * feat: 🎸 improve embeddable example * refactor: 💡 rename without embeddable example * feat: 🎸 set up no-embeddable single click example * feat: 🎸 add dashboard drilldown to single button example * fix: 🐛 remove unused margin * fix: 🐛 make "Get more actions" translation static * chore: 🤖 remove old dashboard drilldown definition * refactor: 💡 rename samples to generic names * refactor: 💡 make app 1 example drilldown "hello world" * chore: 🤖 remove unused required bundle * chore: 🤖 add dashboardEnhanced back * [kbn/optimizer] only build xpack examples when building xpack plugins * move alerting_example into x-pack/examples * remove filter for alertingExample plugin in oss plugins CI step * revert unrelated change * fix: 🐛 use correct prop name * test: 💍 fix embeddable-to-dashboard drilldown mock * test: 💍 fix a test after refactor * chore: 🤖 remove unused import * chore: 🤖 add dashboard_enahcned to example plugin * chore: 🤖 address review comments * feat: 🎸 add description to UI Actions Enhanced examples * docs: ✏️ improve docs of example plugin Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> |
||
---|---|---|
.. | ||
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);
}
}