Make reusable Vega-Lite components?

Elastic Stack Kibana
1

Greetings all

As a Vega n00b I'm faced with the task of creating a dashboard with a number of boxes, each listing some data for a given server (up/down, number of containers, name etc.). Alle the data is based on metricbeat/heartbeat queries.

What I would like to accomplish is to have a generic component and to be able to enter the server id when adding the component to a dashboard. Maybe through settings when adding it?

What I'm unable to figure out is if this is possible and how to add an input variable to my Vega Lite json spec.

I'm limited to using Kibana and Vega Lite hence cannot (or don't know how) to create e.g. Elastic Javascript Client components.

If anything above makes sence I hope someone is able to point me in the right direction.

Thanks

2

Hi @cjessing

is Lens not an option?
Anyway, the solution I'm going to propose works for both Lens or Vega(-lite or not) and it's based on Control panels: that would help to dynamically apply a filter to the entire dashboard, as in your case the server id.

In the Lens panels, everything is just applied transparently.
In Vega panels, you need to use the %context%: true directive in the spec as described here: Vega | Kibana Guide [8.15] | Elastic

3

Thanks for getting back!

I think I know what the %context% parameter does but in my case, I don't need all elements to update based on a single common input parameter. I have some "must" conditions that must be met for each box (eg. hostname) and it's these condidtions that I'd like to specify for each box placed on my dashboard.

The main reason is to avoid duplicated json and to avoid generating a gigantic json file.

I'm sorry I don't know what you mean by "Control panels"?

I'll have a look at Lens again even though my colleague dismissed it at an earlier stage.

4

image
This is basically what I'm trying to achieve. And this is just a small piece of the entire Canvas. The Canvas we're trying to move away from. Each arrow is a query of its own and each box consists of five queries. So the Canvas page is extremely heavy to load.

We're trying to break it down and it just seems weird to have to write 9 x 7 queries to produce the content shown in the picture. It would be more elegant to create a single component to render a single box with arrows and then pass an id to the component to have it render.

5

It is possible to generate small multiples with Vega, as represented here: Example Gallery | Vega-Lite

I would suggest that route for that specific example.

1 Like
6

That looks interesting! Thanks!

Ah! Unfortunately [term] query does not support [repeat] :cry: