[Embeddable] Dashboard by reference embeddable

stacey-gammon commented 4 years ago

Current dashboard embeddable is "by value" only, meaning it does not take in a saved object id that determines the data it loads, which is how visualizations and saved searches work right now.

It'd be nice to provide this. The SIEM team would use this because they want editable dashboards embedded in their application, right now they'd have to implement the logic of connecting the saved object to raw input themselves.

Part of https://github.com/elastic/kibana/issues/71857

elasticmachine commented 4 years ago

Pinging @elastic/kibana-app-arch (Team:AppArch)

andrew-goldstein commented 4 years ago

Goal

The SIEM team aims to proffer users the ability to select from a list of pre-populated and user-generated Kibana dashboards (stored as saved objects), and render them via the embeddable dashboard component.

Ideally, the embeddable dashboard component would also allow changes made to the dashboard in edit mode, (e.g. resizing a widget) to be persisted back to the saved dashboard if the user explicitly invokes a save action.

Limitations in the current implementation

Reads

Today, all apps that wish to populate an embedded dashboard with the contents of a saved Kibana dashboard must develop their own implementation of the code that performs the IO to retrieve the saved object via the Saved Objects API, and transform it in-memory to the DashboardContainerInput, shown in the references section below.

Alternatives to the current implementation for reads might include:

Passing the saved object ID of a Kibana dashboard as a prop to the embeddable dashboard, such that the embeddable dashboard component handles the IO for retrieving the saved object, and transforming it for rendering
Deferring the IO for perstiting the saved object to the app, but providing a utility function that converts from the saved object format to the DashboardContainerInput format

Writes

When users (for example) change the layout of a dashboard in edit mode, it's not possible (today) to persist those layout changes to the saved object representation of the dashboard.

Potential enhancements to the embeddable dashboard to support writes might include:

Passing the saved object ID of a Kibana dashboard as a prop to the embeddable dashboard, and enhancing the embeddable dashboard component to provide a UI action that, when clicked, persists the new layout to the saved object
Deferring the IO for persisting the mutated layout to the app, but providing a hook or callback that will be invoked when the user mutates the dashboard, and provide a utility function that converts from the in-memory representation of the dashboard to the saved object format

Reference

`DashboardContainerInput`

export interface DashboardContainerInput extends ContainerInput {
  viewMode: ViewMode;
  filters: esFilters.Filter[];
  query: Query;
  timeRange: TimeRange;
  refreshConfig?: RefreshInterval;
  expandedPanelId?: string;
  useMargins: boolean;
  title: string;
  description?: string;
  isFullScreenMode: boolean;
  panels: {
    [panelId: string]: DashboardPanelState;
  };
}

Sample DashboardContainerInput

export const dashboardInput: DashboardContainerInput = {
  panels: {
    '1': {
      gridData: {
        w: 24,
        h: 15,
        x: 0,
        y: 15,
        i: '1',
      },
      type: HELLO_WORLD_EMBEDDABLE_TYPE,
      explicitInput: {
        id: '1',
      },
    },
    '822cd0f0-ce7c-419d-aeaa-1171cf452745': {
      gridData: {
        w: 24,
        h: 15,
        x: 0,
        y: 0,
        i: '822cd0f0-ce7c-419d-aeaa-1171cf452745',
      },
      type: 'lens',
      explicitInput: {
        id: '822cd0f0-ce7c-419d-aeaa-1171cf452745',
      },
      savedObjectId: 'b48b6e50-1ab9-11ea-8600-07452c786434',
    },
    '66f0a265-7b06-4974-accd-d05f74f7aa82': {
      gridData: {
        w: 24,
        h: 15,
        x: 24,
        y: 0,
        i: '66f0a265-7b06-4974-accd-d05f74f7aa82',
      },
      type: 'visualization',
      explicitInput: {
        id: '66f0a265-7b06-4974-accd-d05f74f7aa82',
      },
      savedObjectId: '38f7ac20-1ac0-11ea-8600-07452c786434',
    },
  },
  isFullScreenMode: false,
  filters: [],
  useMargins: true,
  id: '',
  hidePanelTitles: false,
  query: {
    query: '',
    language: 'kuery',
  },
  timeRange: {
    from: '2017-10-01T20:20:36.275Z',
    to: '2019-02-04T21:20:55.548Z',
  },
  refreshConfig: {
    value: 0,
    pause: true,
  },
  viewMode: ViewMode.EDIT,
  lastReloadRequestTime: 1556569306103,
  title: 'Embedded Dashboard',
  description: '',
};

ppisljar commented 4 years ago

@andrew-goldstein is this still relevant and whats the priority of it ?

andrew-goldstein commented 4 years ago

Hi @ppisljar! Yes, this is still relevant, as it's one of the issues we're tracking as a prerequisite to using embeddables on the SIEM overview page.

@MikePaquette, would you be willing to reply to @ppisljar re: priority?

stacey-gammon commented 4 years ago

Working on embeddable examples that would show how embeddable authors can support these use cases more.

Removing the special casing of savedObjectId and introducing an "embeddable by reference" example in examples directory: https://github.com/elastic/kibana/pull/61692
[WIP]: Adding an example of an embeddable that can both be "by value" and "by reference": https://github.com/elastic/kibana/pull/62698

A next step to make this usable for SIEM would be to either:

Create a new DashboardRefEmbeddable type, or
Support a single embeddable that can be both "by value" and "by reference"

elastic / kibana