kibana/examples/embeddable_examples/public/plugin.ts
Hannah Mudge 27dda79627
[Portable Dashboards] Add portable dashboard example plugin (#148997)
Closes https://github.com/elastic/kibana/issues/145427

## Summary

This PR adds an example plugin that demonstrates a few uses of the new
portable dashboards. It includes the following examples:
1. A by-value dashboard with controls

![Feb-07-2023
11-41-13](https://user-images.githubusercontent.com/8698078/217336429-d4bbd7be-a453-45f1-a008-6046d58874b6.gif)

2. A by-value empty dashboard that allows panels (both by-value and
by-reference) to be added where the state can be saved to local storage

![Feb-07-2023
11-43-37](https://user-images.githubusercontent.com/8698078/217336922-48348617-1fdf-445a-851a-3507c6920805.gif)

3. Two side-by-side by-value empty dashboards with independent redux
states

![Feb-07-2023
11-45-57](https://user-images.githubusercontent.com/8698078/217337433-8e00b24f-3363-4ff0-a2bd-5fa15c736d08.gif)

4. A static, by-reference dashboard


![StaticByRefernece](https://user-images.githubusercontent.com/8698078/217340227-5b8ac1ab-0cdc-4ff4-8fb8-2b2792fa3959.png)

5. A static, by-value dashboard


![StaticByValue](https://user-images.githubusercontent.com/8698078/217339782-c4ab2a4c-6c62-4045-a823-648befc6959f.png)


As part of this, I created a new demo embeddable type - the
`FilterDebuggerEmbeddable` which, when added to a dashboard, will
display the filters + query that it is receiving as an input. You can
see how this embeddable works in the GIF for the first example above.

### Checklist

- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-02-10 13:21:53 -07:00

200 lines
7.5 KiB
TypeScript

/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import {
EmbeddableSetup,
EmbeddableStart,
CONTEXT_MENU_TRIGGER,
} from '@kbn/embeddable-plugin/public';
import { Plugin, CoreSetup, CoreStart, SavedObjectsClientContract } from '@kbn/core/public';
import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
import {
HelloWorldEmbeddableFactory,
HELLO_WORLD_EMBEDDABLE,
HelloWorldEmbeddableFactoryDefinition,
} from './hello_world';
import { TODO_EMBEDDABLE, TodoEmbeddableFactory, TodoEmbeddableFactoryDefinition } from './todo';
import {
MULTI_TASK_TODO_EMBEDDABLE,
MultiTaskTodoEmbeddableFactory,
MultiTaskTodoEmbeddableFactoryDefinition,
} from './multi_task_todo';
import {
SEARCHABLE_LIST_CONTAINER,
SearchableListContainerFactoryDefinition,
SearchableListContainerFactory,
} from './searchable_list_container';
import {
LIST_CONTAINER,
ListContainerFactoryDefinition,
ListContainerFactory,
} from './list_container';
import { createSampleData } from './create_sample_data';
import { TODO_REF_EMBEDDABLE } from './todo/todo_ref_embeddable';
import {
TodoRefEmbeddableFactory,
TodoRefEmbeddableFactoryDefinition,
} from './todo/todo_ref_embeddable_factory';
import { createEditBookActionDefinition } from './book/edit_book_action';
import { BOOK_EMBEDDABLE } from './book/book_embeddable';
import {
BookEmbeddableFactory,
BookEmbeddableFactoryDefinition,
} from './book/book_embeddable_factory';
import { createAddBookToLibraryActionDefinition } from './book/add_book_to_library_action';
import { createUnlinkBookFromLibraryActionDefinition } from './book/unlink_book_from_library_action';
import {
SIMPLE_EMBEDDABLE,
SimpleEmbeddableFactory,
SimpleEmbeddableFactoryDefinition,
} from './migrations';
import {
FILTER_DEBUGGER_EMBEDDABLE,
FilterDebuggerEmbeddableFactory,
FilterDebuggerEmbeddableFactoryDefinition,
} from './filter_debugger';
export interface EmbeddableExamplesSetupDependencies {
embeddable: EmbeddableSetup;
uiActions: UiActionsStart;
}
export interface EmbeddableExamplesStartDependencies {
embeddable: EmbeddableStart;
savedObjectsClient: SavedObjectsClientContract;
}
interface ExampleEmbeddableFactories {
getHelloWorldEmbeddableFactory: () => HelloWorldEmbeddableFactory;
getMultiTaskTodoEmbeddableFactory: () => MultiTaskTodoEmbeddableFactory;
getSearchableListContainerEmbeddableFactory: () => SearchableListContainerFactory;
getListContainerEmbeddableFactory: () => ListContainerFactory;
getTodoEmbeddableFactory: () => TodoEmbeddableFactory;
getTodoRefEmbeddableFactory: () => TodoRefEmbeddableFactory;
getBookEmbeddableFactory: () => BookEmbeddableFactory;
getMigrationsEmbeddableFactory: () => SimpleEmbeddableFactory;
getFilterDebuggerEmbeddableFactory: () => FilterDebuggerEmbeddableFactory;
}
export interface EmbeddableExamplesStart {
createSampleData: () => Promise<void>;
factories: ExampleEmbeddableFactories;
}
export class EmbeddableExamplesPlugin
implements
Plugin<
void,
EmbeddableExamplesStart,
EmbeddableExamplesSetupDependencies,
EmbeddableExamplesStartDependencies
>
{
private exampleEmbeddableFactories: Partial<ExampleEmbeddableFactories> = {};
public setup(
core: CoreSetup<EmbeddableExamplesStartDependencies>,
deps: EmbeddableExamplesSetupDependencies
) {
this.exampleEmbeddableFactories.getHelloWorldEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
HELLO_WORLD_EMBEDDABLE,
new HelloWorldEmbeddableFactoryDefinition()
);
this.exampleEmbeddableFactories.getMigrationsEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
SIMPLE_EMBEDDABLE,
new SimpleEmbeddableFactoryDefinition()
);
this.exampleEmbeddableFactories.getMultiTaskTodoEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
MULTI_TASK_TODO_EMBEDDABLE,
new MultiTaskTodoEmbeddableFactoryDefinition()
);
this.exampleEmbeddableFactories.getSearchableListContainerEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
SEARCHABLE_LIST_CONTAINER,
new SearchableListContainerFactoryDefinition(async () => ({
embeddableServices: (await core.getStartServices())[1].embeddable,
}))
);
this.exampleEmbeddableFactories.getListContainerEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
LIST_CONTAINER,
new ListContainerFactoryDefinition(async () => ({
embeddableServices: (await core.getStartServices())[1].embeddable,
}))
);
this.exampleEmbeddableFactories.getTodoEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
TODO_EMBEDDABLE,
new TodoEmbeddableFactoryDefinition(async () => ({
openModal: (await core.getStartServices())[0].overlays.openModal,
}))
);
this.exampleEmbeddableFactories.getTodoRefEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
TODO_REF_EMBEDDABLE,
new TodoRefEmbeddableFactoryDefinition(async () => ({
savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
getEmbeddableFactory: (await core.getStartServices())[1].embeddable.getEmbeddableFactory,
}))
);
this.exampleEmbeddableFactories.getBookEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
BOOK_EMBEDDABLE,
new BookEmbeddableFactoryDefinition(async () => ({
getAttributeService: (await core.getStartServices())[1].embeddable.getAttributeService,
openModal: (await core.getStartServices())[0].overlays.openModal,
savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
overlays: (await core.getStartServices())[0].overlays,
}))
);
this.exampleEmbeddableFactories.getFilterDebuggerEmbeddableFactory =
deps.embeddable.registerEmbeddableFactory(
FILTER_DEBUGGER_EMBEDDABLE,
new FilterDebuggerEmbeddableFactoryDefinition()
);
const editBookAction = createEditBookActionDefinition(async () => ({
getAttributeService: (await core.getStartServices())[1].embeddable.getAttributeService,
openModal: (await core.getStartServices())[0].overlays.openModal,
savedObjectsClient: (await core.getStartServices())[0].savedObjects.client,
}));
deps.uiActions.registerAction(editBookAction);
deps.uiActions.attachAction(CONTEXT_MENU_TRIGGER, editBookAction.id);
const addBookToLibraryAction = createAddBookToLibraryActionDefinition();
deps.uiActions.registerAction(addBookToLibraryAction);
deps.uiActions.attachAction(CONTEXT_MENU_TRIGGER, addBookToLibraryAction.id);
const unlinkBookFromLibraryAction = createUnlinkBookFromLibraryActionDefinition();
deps.uiActions.registerAction(unlinkBookFromLibraryAction);
deps.uiActions.attachAction(CONTEXT_MENU_TRIGGER, unlinkBookFromLibraryAction.id);
}
public start(
core: CoreStart,
deps: EmbeddableExamplesStartDependencies
): EmbeddableExamplesStart {
return {
createSampleData: () => createSampleData(core.savedObjects.client),
factories: this.exampleEmbeddableFactories as ExampleEmbeddableFactories,
};
}
public stop() {}
}