Table visualization in a custom plugin

Elastic Stack Kibana
1

Hi All,

I am trying to bring the following dashboard into the custom plugin that I am working on.

Screen Shot 2024-01-30 at 1.58.02 PM
Screen Shot 2024-01-30 at 1.58.02 PM1652×783 102 KB

This dashboard is for displaying a set of posts in table format. Below is the saved_object structure for this particular dashboard.

  {
        "saved_object": {
            "id": "ca0c3150-5887-11ee-9c08-7f9316df5503",
            "type": "dashboard",
            "migrationVersion": {
                "dashboard": "8.7.0"
            },
            "coreMigrationVersion": "8.8.0",
            "typeMigrationVersion": "8.7.0",
            "updated_at": "2024-01-09T17:40:08.411Z",
            "created_at": "2024-01-09T17:40:08.411Z",
            "version": "WzY5Mzc1LDE3XQ==",
            "attributes": {
                "kibanaSavedObjectMeta": {
                    "searchSourceJSON": "{\"query\":{\"query\":\"\",\"language\":\"kuery\"},\"filter\":[]}"
                },
                "description": "Posts",
                "timeRestore": false,
                "optionsJSON": "{\"useMargins\":false,\"syncColors\":true,\"syncCursor\":true,\"syncTooltips\":true,\"hidePanelTitles\":false}",
                "panelsJSON": "[{\"version\":\"8.8.0\",\"type\":\"search\",\"gridData\":{\"x\":0,\"y\":0,\"w\":48,\"h\":32,\"i\":\"00925a22-3e3a-444c-82a3-8dfce37e6f7a\"},\"panelIndex\":\"00925a22-3e3a-444c-82a3-8dfce37e6f7a\",\"embeddableConfig\":{\"rowsPerPage\":10,\"sort\":[[\"score\",\"desc\"],[\"@timestamp\",\"desc\"]],\"enhancements\":{}},\"panelRefName\":\"panel_00925a22-3e3a-444c-82a3-8dfce37e6f7a\"}]",
                "title": "Posts",
                "version": 1
            },
            "references": [
                {
                    "name": "00925a22-3e3a-444c-82a3-8dfce37e6f7a:panel_00925a22-3e3a-444c-82a3-8dfce37e6f7a",
                    "type": "search",
                    "id": "16ab8011-ef8b-4c87-9d0a-1f6c14b7959d"
                },
                {
                    "type": "tag",
                    "id": "2cd6fac0-5c8b-11ee-8d8c-a1eb6f96ce1e",
                    "name": "tag-ref-2cd6fac0-5c8b-11ee-8d8c-a1eb6f96ce1e"
                },
                {
                    "type": "tag",
                    "id": "d9258c90-5887-11ee-9c08-7f9316df5503",
                    "name": "tag-ref-d9258c90-5887-11ee-9c08-7f9316df5503"
                }
            ],
            "managed": false
        },
        "outcome": "exactMatch"
    },

For our visualizations that are of the lens type we are currently using the lens.EmbeddableComponent x-pack plugin to display them in our plugin. Is there a similar embeddable component that we can use to bring this view into our plugin? Or alternatively, what would be the best way to bring this data into the plugin so that it can be used in a custom designed table?

2

Hi @JSFern83! It's great that you're looking to render a Dashboard in a custom plugin. Yes we do have a component for that! It's the DashboardRenderer which you can see the definition of in src/plugins/dashboard/public/dashboard_container/external_api/dashboard_renderer.tsx.

This allows you to either render the JSON above directly by translating it into Dashboard Input, or you can pass a saved object ID and the Dashboard renderer will automatically load the Dashboard from a saved object.

Keep in mind, that you can put anything you want in this Dashboard. Even multiple Lens visualizations.

3

Thanks @devon.thomson follow up question. Is it only lens types that can be embedded on their own and all other types like search and visualization / vega charts need to be in a dashboard 1st to be embedded?

4

@Dallas_Toth yes that is true for the time being.

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.