14eb4535a9
* refactor: 💡 remove switch statement * feat: 🎸 improve <ListManageDrilldowns> stories * refactor: 💡 remove <FlyoutListManageDrilldowns> component * refactor: 💡 simplify <FlyoutDrilldownWizard> component * feat: 🎸 introduce React context for drilldowns flyout * refactor: 💡 rename drilldown manager component * refactor: 💡 rename drilldown manager in example plugin * refactor: 💡 rename folder to "containers" * feat: 🎸 use drilldown context to store UI state * chore: 🤖 fix linter errors * refactor: 💡 move Drilldown Manager into its own folder * feat: 🎸 add drilldown state management * feat: 🎸 add <PresentablePicker> component * chore: 🤖 clean up component props * feat: 🎸 add <ActionFactoryPicker> component * feat: 🎸 connect action factory picker component * chore: 🤖 cleanup * feat: 🎸 start work on <DrilldownForm> * feat: 🎸 add <TriggerPicker> component * test: 💍 add <TriggerPicker> stories * feat: 🎸 add <DrilldownForm> component * refactor: 💡 remove ActionFactory from <DrilldownForm> * feat: 🎸 connect <DrilldownForm> component * feat: 🎸 improve new drilldown connected form * fix: 🐛 correct TypeScript types * feat: 🎸 show trigger intersection in the UI * feat: 🎸 add <ActionFactory> component * feat: 🎸 show connected <ActionFactoryView> component * feat: 🎸 use a single action factory control * fix: 🐛 remove unused props * refactor: 💡 improve create drilldown form * fix: 🐛 correct hello bar close callback * feat: 🎸 connect welcome message state to local storage * fix: 🐛 correct TypeScript errors * fix: 🐛 hide correctly hello bar * feat: 🎸 add drilldown creation logic * feat: 🎸 connect event list state * fix: 🐛 correct story props * fix: 🐛 correct typescript errors * feat: 🎸 navigate to list view when drilldown is created * feat: 🎸 add EUI tabs * feat: 🎸 connect route state to tabs * refactor: 💡 move flyout content into a separate component * refactor: 💡 move manager tabs into a separate component * chore: 🤖 delete unused variables * feat: 🎸 make drilldowns title dynamic * docs: ✏️ update README * feat: 🎸 add <DrilldownManagerTitle> component * feat: 🎸 make flyout footer dynamic * refactor: 💡 make action factory state depend on the route * feat: 🎸 create standalone new drilldown form * fix: 🐛 support i18n in new drilldown form * feat: 🎸 add space between action factory picker * refactor: 💡 simplify <DrilldownManagerContent> * feat: 🎸 add back chevron button to drilldown flyout * chore: 🤖 remove unused translations * chore: 🤖 delete unused translation file * feat: 🎸 add <DrilldownManagerFooter> and improve title comp * feat: 🎸 improve <CreateDrilldownForm> * refactor: 💡 improve variable name * feat: 🎸 add isValid() to drilldown state * refactor: 💡 move drilldown hello bar into a seprate component * feat: 🎸 show drilldown list on "Manage" tab * refactor: 💡 improve drilldown list component * feat: 🎸 connect drill list comp to delete and edit functional * feat: 🎸 support form disabling when drill creation in progress * feat: 🎸 connect drilldown edit form * feat: 🎸 use /manage route for editing drilldowns * fix: 🐛 render constant action factory in edit mode * refactor: 💡 move drilldown footer submit button in a sep comp * feat: 🎸 connect editing to drilldown edit form * feat: 🎸 disable edit buttons when list has selection * chore: 🤖 remove unused code * feat: 🎸 show error if delete fails * chore: 🤖 remove legacy code * feat: 🎸 improve drilldown table component * fix: 🐛 fix "Trigger" translation * fix: 🐛 import correct drilldown table item * feat: 🎸 handle empty name errors * feat: 🎸 track config error in drilldown state * feat: 🎸 track drilldown state trigger errors * fix: 🐛 pre-select trigger if only one trigger is available * feat: 🎸 add drilldown template interface * feat: 🎸 progress on drilldown cloning list * feat: 🎸 use table view to display drilldown cloning templates * feat: 🎸 generate drilldown templates from embeddable siblings * feat: 🎸 improve drilldown template generation logic * feat: 🎸 improve drilldown template preview * feat: 🎸 improve start from template table view * feat: 🎸 show number of items to be cloned * feat: 🎸 add ID to drilldown templates * feat: 🎸 implement basic cloning functionality * feat: 🎸 add ability to create drilldown from existing one * feat: 🎸 improve cloning behaviour * feat: 🎸 improve icon of templates * feat: 🎸 remove "Start from template" accordion * feat: 🎸 improve cloning table view * feat: 🎸 add "Triggers" column * feat: 🎸 enable drilldown actions in "edit" mode * fix: 🐛 reset drilldown state cache by factory on new creation * refactor: 💡 use in-memory table for drilldown template list * feat: 🎸 add search box to drilldown template in-memory table * feat: 🎸 show back chevron on no steps back, to close flyout * feat: 🎸 show notification when drilldown was just cloned * feat: 🎸 add i18n to cloning notification, and move to sep comp * feat: 🎸 add support for plural and singular in translation * feat: 🎸 make new drilldown names unique with (copy x) at end * feat: 🎸 rename cloning to copying * feat: 🎸 show incompatible trigger warning in template list * refactor: 💡 craete text with icon component * feat: 🎸 show trigger warning in manage view * refactor: 💡 use <TextWithIcon> in drilldown table view * feat: 🎸 add <TriggerLineItem> component * feat: 🎸 show tooltip on incompatible icon hover * feat: 🎸 unify tooltips in <TextWithIcon> component * feat: 🎸 enable sorting in drilldown tables * fix: 🐛 correct ui actions x-pack typescript errors * fix: 🐛 correct ui actions example plugin errors * docs: ✏️ update autogenerated docs * chore: 🤖 remove unused translations * test: 💍 remove implementation from todo placeholders * test: 💍 fix dashboard drilldown functional test * chore: 🤖 remove unused constants * test: 💍 fix url drilldown functional test * test: 💍 add drilldown manager state tests * feat: 🎸 dont show back button when no more steps back * feat: 🎸 pre-fill in drilldown name * feat: 🎸 add copy suffix when creating new drilldown * feat: 🎸 close flyout if opened in create mode * feat: 🎸 dont close flyout if user navigated to "manage" tab * feat: 🎸 show smaller notification message on cloning * feat: 🎸 add "(copy X)" text when cloning/copying drilldowns * feat: 🎸 make copy prefixes start from "(copy)" * feat: 🎸 add link to dismiss notification * feat: 🎸 rename "Clone (x)" button to "Copy (x)" * feat: 🎸 rename tempalte table last column copy button * feat: 🎸 use "copied" terminology in notification * feat: 🎸 add "Copy existing drilldown" label to template picker * feat: 🎸 use "auto" layout on drilldown template picker table * test: 💍 add drilldown manager tests * feat: 🎸 swap label for title |
||
---|---|---|
.. | ||
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);
}
}