kibana/examples/portable_dashboards_example/public/plugin.tsx
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

63 lines
2 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* 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 {
AppMountParameters,
AppNavLinkStatus,
CoreSetup,
CoreStart,
Plugin,
} from '@kbn/core/public';
import type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
import { DashboardStart } from '@kbn/dashboard-plugin/public';
import img from './portable_dashboard_image.png';
import { PLUGIN_ID } from './constants';
interface SetupDeps {
developerExamples: DeveloperExamplesSetup;
}
export interface PortableDashboardsExampleStartDeps {
dashboard: DashboardStart;
data: DataPublicPluginStart;
navigation: NavigationPublicPluginStart;
}
export class PortableDashboardsExamplePlugin
implements Plugin<void, void, SetupDeps, PortableDashboardsExampleStartDeps>
{
public setup(
core: CoreSetup<PortableDashboardsExampleStartDeps>,
{ developerExamples }: SetupDeps
) {
core.application.register({
id: PLUGIN_ID,
title: 'Portable dashboard examples',
navLinkStatus: AppNavLinkStatus.hidden,
async mount(params: AppMountParameters) {
const [, depsStart] = await core.getStartServices();
const { renderApp } = await import('./app');
return renderApp(depsStart, params);
},
});
developerExamples.register({
appId: PLUGIN_ID,
title: 'Portable Dashboards',
description: `Showcases different ways to embed a dashboard into your app`,
image: img,
});
}
public async start(core: CoreStart, { dashboard }: PortableDashboardsExampleStartDeps) {}
public stop() {}
}