GitLab Monitor Demos, 1 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Miguel from Monitor APM explains the chart builder POC

Description

Please add comments and ideas at the merge request:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35727

Related issue:
https://gitlab.com/gitlab-org/gitlab/-/issues/219641

A

Hi I am Miguel by a member of the API monitoring team. Today, I want to talk about our chart builder, which is a feature we're exploring during this iteration.

A

Normally, when we create dashboards, we'd have to do it in a very static way by editing demo files or by creating metrics through a form. Today, I want to show my concept for a new chart builder that is dynamic, and we we expect will help our users build their dashboards more easily.

A

The spike that I'm referring to is going to be exploiting this milestone. We don't have any UX for it yet, and we only have a very basic concept so today, I want to show what is my idea to build it and what are the things we should do in order to create it. So, first of all small refresher, when we want to create a new dashboard panel, we want to do it through a camel file that defines a few data or or features that we're using in the panel.

A

This is an example of one panel that is going to become an area that is going to be displayed as an area chart.

A

It's a title and data importantly, it has the query: I will use to fetch a matrix from Prometheus, and this data can be a bit more complex or a bit more simple, depending on the panel type that you want, but in general I think it's not necessarily evident how to write new memos or had to create new demo files that are using this format, so I think enabling users to create a more easily is a powerful way to get them going with more.

A

You know dashboards, so my concept is new, a new page, which we would say it's called a builder. The page has basically three elements as place where we consider a few parameters for it. In this case, I define the time so that we can can be visualized at any time range they want.

A

The actual panel will be displayed data and that it will actually look like a real panel of dashboard and then some Yaman input that is going to be dependent that they we create the panel or the chart, in this case I'm using a JSON format, because it's easier to transform in the front-end but in moving forward and as we build, is to actually do a original input here. I have added the panel information I'm, not using the query range that we sent primitive spots.

A

We have the range already here in this this key and I'm, going to submit it to for materials. This is actually going to Prometheus. That's why it takes a few seconds to load, and here we see the actual data, and this is a real charmer.

A

We used to preview the actual output. Let me see so. If the user wants to change the input, they will be able to change it. Let's see here, just a 1 and I'm going to submit it again and then they will immediately see the real panel that they will see with the Witter changes. The more interesting area starts when we can change the type and for the same data, I'm able to go to uncreate ER or show a single stats, which is another type of visualization.

A

Let's wait a few seconds for it to load yep. Here we have the actual start with the title that we chose and the ideas that users will be able to constantly update or editor pergamo input advanced and then, when they click Submit, they will be able to see an uptick. Of course, this form could evolve to having more fields to make it a little bit more easier, so that people are not anything that Yemen directly, but a list of fields that they want.

A

It could be more simpler, more advanced, but I think this is a very good first iteration.

A

Interestingly, these are the code to build. This new feature is not much. It takes a few pieces here and there from the rest of the code, and it defines any page which will be submitted in on tomorrow, but these attach next to this video.

A

So we have. We have things like services that allow us to communicate with Prometheans directly here, I mark a few things: I'm a back-end parsing. The demo I also propose that we then use just this single page component, but that we also create other components inside so that as they get more complex, we can keep our code more simple, and this is.

A

This is just a simple concept, so it doesn't have any localization I'm already test, but it is a Piercy that I think would be useful for users to understand and for our team to understand how the panel is, there can be created thanks a lot for watching and I hope. You can take a look at the amar.

A