GitLab Pipeline Authoring group, 23 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 2023-05-23 Pipeline Authoring team - Design discussions

Description

- Catalog design: Showing a pipeline status on the detail page
- Pipeline details: How we deal with the GraphQL limitations showing the jobs
- Pipeline tables: Better representing the downstream pipeline details
- UI polish ideas

A

First, so hello, everyone um today is May 23rd and we are going to discuss some design relevant topics around pipeline, offering thanks for joining and so I put the first item around terminology. I wish muscle could join the call, but maybe it's too late for him um and regarding the terminology discussion that we did last month, it was last month and was about like.

A

Are we keeping using CA catalog or is it CI, CD, catalog and then I was involved in a couple of threats in the marketing and then the product discussion and it seems like we'll keep using cicd catalog. So I just also want to make sure that we are using the right, terminologies and also I'm using the right terminology on my design, because I found some inconsistency here and there so I'm.

A

Whenever I found it I'm going to update it, and the other thing is like I I was a bit confused about this, like chewy, capitalize, catalog or not so I. Think in the current implementation in the breadcrumb we use cicd and started with Big C and then in the title section we use the small Z in the Mr and I think that came from originally came from my design. So sorry for the confusion and I so tube and I discussed briefly and then maybe it's better to use the Big C for this.

A

But maybe we can get the extra confirmation from a cell and then, if we all agreed and we use the same terminology in the blog in the in the product and also in the I, don't know in the future terminal Maybe.

B

Yeah um Marcel has actually corrected that in a couple of my Mrs so I'm, assuming that he's team capitalized, okay.

A

That sounds good.

A

And the next topic around catalog, so there is a small issue that I'm waiting for all of your review and I think this idea came once in our design activity, so I I kept in mind that, like at some point, we need to show this pipeline relevant status for the tech which is released on our catalog and I. Remember that one of your design, you reuse this data dispatch, so that was the reason why I started to look into the stocks and probably already post the comments and feedback.

A

Thanks for that and I think we used this approach in the project View and we allow user to add dispatch in the project description if they want, or maybe also in the markdown. That was my understanding, probably I'm wrong, but Towers minders. You can use Patches at the project and then the group level, and then we have pipeline status badge and the test coverage and then the last release, patch and I really also like custom patch I. Don't know what that means, though,.

B

Are you referring to the project information um button in the navigation.

A

um um Yes, so I can quickly share my screen. I. Think it's easier for me to just walk you through um sodas, I I saw a couple of projects is using this patch, so this is just an example, but I also saw other other project. So I was thinking like if we could get this information, then I think it's good, but my concern is like. Are we fetching this pipeline data like? Is it fetching the latest pipeline or the pipeline that are trying to merging into the master like?

A

Is it working well like with the tech and release approach that we're going to do so? That was the reason why I post the visibility relevant question because I wasn't sure, but if it is visible idea, I I think we can definitely reuse this. Where.

B

Did you uh I'll look into where that a follow-up um in the in the issue after this and I'll go find where this status badge is used? But um where was your question.

A

um So does so: oh.

C

A

Yeah yeah, so I wasn't sure like so if it is doable, I'm happy that we moved this forward with this version, but I wasn't sure because, like if we just fetching the data from pipeline running so which is the latest pipeline, because it could be anything like you, we can tag anything so I, don't know like I'm, not so sure how the branching and the pipeline status and then the target release works together. So that was the reason why I just want to make sure if it is a really uh visible idea.

B

Yes, it is so the the the pipeline status will be tied to the version or the uh because a version or a tag is tied to a commit. So we can get that pipeline status based on the commit sha. So those two that pipeline status that you've put in the in the title here under the yes under the version um it'll be tied directly to that version. So.

A

It's version, which means Tech, that user chose and yes, which already released yes.

B

A

B

We can say we can say, release.

A

B

A

Okay then sounds like it's it's doable and then we can just just consider like where should we put this but based on your comment, like you, think it's better to sit here.

B

So I I was just thinking that so you had you had it here and then you also had it under the um they're not called tagged uh under the keywords: yeah yeah I I uh I liked the idea of having it above the keywords, because it is very very closely coupled with that or with that release. So that's why I was wondering like oh well, even if we had a pipeline status badge, you know what I'm talking about like right beside the version: um oh yeah but yeah, the closer it is to the version. I.

B

Think the better in.

A

B

A

Got you because, like I got this idea like from the project View- and you can obviously see here because I thought it's more tied to the description But like after I hearing, like your explanation, I think it's it's better so that near around like wherever. Maybe it could be next to here, but yeah I, think below here closest to the Virgin patch. Is the right place. So yeah I agree with you.

B

Yeah is there, um have you explored the I? Have you explored the idea of putting the keywords under the description? Oh.

A

That'll work, you know what, let's just do it now: okay,.

B

I'm just wondering, because now we have a bunch of stuff bunched around.

A

The title- yes, you, you think like a designer because, like okay, so this is more correct if I think of the meaning, because this is this pipeline, passed status bar- is linked to the Virgin badge. But my concern is like we're sticking too many things like okay. Is it really like visually pleasing sure?

A

um You know what.

A

What do you think I think? Actually this is way better.

B

um I was just thinking because when you read the description, the keywords are kind of like a like. Paraphrasing the description, like all of these keywords, apply to the description that you just read. Maybe so yeah I don't know could work well.

C

With those skills from.

A

um So this is just a future idea, so we won't get the keywords in the NBC, but maybe in the ga like we can have a keyword or category so I just want to like Mark some space for this. But what do you think, though? But I think this is way better yeah I.

C

Agree, but it's much cleaner I mean.

A

I love it cool, so I'll just push this design um later on and I'll also readjust the placement here. But you know what I I think we can just proceed with this like if there's no visibility issue like yeah.

B

We have the we had the endpoint. We have the information to get this um so I. Think we'll be fine if you could link me um where else like you said the project view, um if you could send me that link this one, okay uh pipeline status, badges.

A

I think I linked in my comment here so yeah. You can just check the link perfect. Thank you. No problem, so I'll stop sharing, so that was a really short but very patient care design. So I'll update the design after this call um and do you have any other questions?

A

um No okay sounds good, so I'll move on to the next topic, um so this is unrelated to the catalog. But so probably you already know that if there are more than a hundred jobs in one stage, it's not showing everything in the pipeline Details page- and there are some related issues like oh like we didn't know that and I consider this as a ux box. So and I really appreciate like, though like coming and like okay, this is our first situation. We have to inform user that like no. No.

A

This is not everything that you can see here, which is very uh a smaller efforts compared to the other options that we could have and Dove and I also discussed about the second iteration like if it is doable, I think it's doable. So we can make this configurable only for the self-managed customer and then they can kind of reset this graphql limit by themselves. If they want and then they can just do it because, like for me like showing this Banner is okay as an intermediate step, but it's not a perfect user experience.

A

I would say so we finished visible, then we can proceed with the iteration too, and then I think. This is also closely linked to the threads idea that PO said while ago about the showing the the summary and then the failed job in in one place like a dashboard style, would also mitigate some of the pain points that that came from our customers and users and I wanted to hear your thoughts or any feedback on this from the front-end perspective from the U.S perspective as well.

B

I think I think you know my first thought was: why can't we filter and show like filter by name or something or job ID, but I do think that it is. uh It makes way more sense that if you are looking for a particular job to go to the job page, so I think this is and it's an easy fix, uh so I think it's a great start.

B

No um specific I might I might come up with something right after this call, of course, but.

A

Yeah, of course, we can always have time and then, through this situation, one idea at the state is just I'm waiting for the UI text review. You know, like normally my my first rep is really not that great, so I'm waiting for myself magic again and once he come up to it way better approach and then I'll update a UI text, and then that's that's it for me, it's the small fix from the ux person.

C

The limitation so I'm not mistaking I, think the limitation is the first 100 job per stage.

C

I think we should read this carefully. I create the original issue, but I think it's not like 100 another job, total I think it's per stage. I think yeah.

A

C

So if it's, if this is the case, so we need to change the text.

A

C

Says only the first 100 jobs are listed. You know.

A

Yes, you're right, so cool, that's a good catch, so it's not on my Chrome, so I'm just fixing it now yeah thanks for letting me know. So you know that's that's my first scrap of UI text so that I need your review.

A

So only the first one in the drafts first stage, so I updated things. If you don't have any other feedback, I'll just gives them more time to myself to review it and I'll just add the candidate label, pretty small something more than enough for this muscle to the next milestone.

B

um Yeah I think that's good for now and I think that I think the pipeline summary view will definitely help with that mm-hmm. He he had. He created a proof of concept a while ago. What did that get pushed or.

A

um I think we were waiting for the designers or photo solution, validation, so.

B

That's right, yeah and.

A

Then we got I I got pause because, like I need to also deliver the catalog products design first and then that was the reason why I couldn't work on it anymore, but depending on the priority of course, I always want to go back and pick this issue up.

B

Cool yeah I remembered when we were working on that and I was like. Oh, that was a really cool like it looked really neat so I'm sure that'll help us a lot as well. Yeah.

A

But also, at the same time, it requires a lot of like work from the ux perspective, because it requires that it's it's a radical change. So, yes,.

B

A

Some design, some Design feedbackground Within the team and then also a lot of work, hold front and implementation. So yeah.

B

Maybe after this huge project that we're working on yes, cool.

C

Do you believe this is mainly like a fondant walk or or when you don't know.

B

With the are you talking about the pipeline summary page, yes, um uh I think it probably involves uh it's mostly front end and it will have a little bit of back end because we're gonna we're probably going to be um wanting to manipulate the queries a bit but yeah I think I well, I think it's mostly. It is mostly senjung and then uh mostly front end after that for sure.

A

A

um If you don't have any other question- and this is just a FYI I I- don't know like how how I found this issue today, I I was just looking around something else, but I found this issue or about the ux papercuts team.

A

So do you know what this team does within the ux team.

B

I have no idea. Oh.

A

This is the first time.

B

Seeing this oh.

A

Okay, so this is the new team after the reorg and then they have two designers on the team who have some strong background in front-end implementation and then they're like mostly working on the UI polish. So if you think of the recent change in the Epic and related issue, that widget, like the colors and borders and styling, has been changed, it's done by this Helix paper cuts theme and then I I got this issue like what like is it related to to my work and then I think it's for plan 416.2.

A

So maybe it's a very new issue for them, but I I could start like communicating with Annabelle and zashia. Who is on this team that like, if you have any idea like oh yeah, like we want to, we wanted to do this UI polish, but we couldn't do because of the time like do you have any suggestion for this thing.

C

How I mean how how deep can they go? What is the that's.

B

It yeah that's my question too: they have uh I think a month or two ago, I did see um a couple of people coming into the code and saying this is relative to a UI polish like a couple of people that were not um verified people, so I guess it'd be good to hear some communication around specifically what their goals are, and you know, because there's a difference between re like polishing or redesigning the gitlab UI components, and that would just update you know on our Pages versus.

A

B

Our stuff completely so um I.

C

Guess I'd also.

B

Like to know, yeah.

C

Are you in contact with them.

A

um No, not yet I I just discovered this issue today morning, so I was going to talk to them, but before I started this conversation I wanted to hear from you first so that you're online. So there is.

C

One issue I've been there, you can ask if they can, if they, if they can solve that problem. If it's gonna have a huge effect on our users, I can can.

A

C

A

C

So so they they added this thing here.

C

C

Here's the T-shirt okay, so they they actually had this like pipeline table is one I would say pretty major problem on this page and I'll. Show you I'll try to find the real world example.

C

C

Look at one of the pipelines: I showed you in the past, but I wonder if you can bounce that idea to them and see if they can do okay, so Whenever there is a downstream pipeline okay. So you see that, like all the all the Upstream pipelines when.

A

C

On them, I'll be able to see this like each each circle here represent the stage when clicking on the stage and I can see all the related jobs. Okay same here same here, okay, but when there is a downstream pipeline. Okay and that's the thing because it's it's a whole new pipeline. Oh.

A

C

There's no way for me to look at the job, because if I'll click on that I'll get redirected to the downstream pipeline, okay- and it does reply pipeline has, as you can see, it has like stages. It has jobs, so I wonder if we could have the same I guess I guess in terms of the design, because the problem here is that each circle here represents a stage here. Each circle actually represents a.

B

Entire pipeline yeah.

C

Entire pipeline, so I wonder if you click on that, maybe you have something like that and you have like the stage and then job and you scroll down and you have like another stage and then more jobs and another stage and more jobs when you have a downstream pipeline. That's like that's a it's kind of like a small thing, but it goes a long way for our customers, because usually the customers are viewing this mini graph, and you know in in the mail request, widget and they'll. You know they're looking at the jobs.

C

Now they can. They can they're looking at like multiple jobs and multiple statuses and then, when you, when they have like many many Downstream pipeline, they have here and it's very hard for them to navigate back and forth so just clicking on them and having that available. So I'm not sure if this is, for instance, something we can do, I guess we have the data like we.

C

We do have this data okay, because when I'm clicking on the downstream pipeline, I can see the the stage I can see the the job name and the status yeah. So.

B

C

Have this data yeah.

B

Done in this code right now, actually, okay.

C

B

Yeah right, um I know what you're saying, especially like, even even from a ux perspective, Sun Jun, to me it's kind of weird that they are all the same control, but some of them are.

C

B

And some of them are links.

B

um I do think that we can get uh uh I, definitely think that we can get stage information like complete pipeline information and come up with a way, or we can work together to come up with a way to display that, on this page, as opposed to navigating to a completely different pipeline that might be in a completely different project and at the very least for now I can put I can make it open in a different tab. Instead of redirecting you.

C

That could be like a good yeah that could be like a good at least, but I mean open it in a new tablet and just like this I can click I can right click and yeah open a new tab. It's publicly the same right. What uh yeah? What our users really want, is that to have like a similar experience. Okay,.

A

So I think for this case it's a more like a feature enhancement. So if that's the case that falls under me and then for the ux paper cuts them, it's more like they're filling the gaps between the design guideline, and is it like really following our guidelines? Well, okay or not, so it's more like more smaller scope of UI polish changes, I'd say so for this one I I think it's that those are something that we could do.

A

Something like my immediate just idea is like maybe having a Brewer but uh am I, adding more complicated layer on this complicated view. Like I, don't know.

C

Yeah we need, we need to think about it because, like this, this, this mini this meaning of appears in many pages. This is not the only page. It appears appears in the pipeline page and the message request s.

B

In five different pages, yeah.

C

Something like that in the python editor, there are like multiple places, so, okay, I think just just at least this is just unifying the experiences you know clicking and seemed like a small like basically the same same experience.

C

Yeah, maybe I'll just create an issue. We can think about like a design.

B

A

B

Even just another to throw another wrench into it, the pipelines on um you know in in the git lab project, for example, that the pipeline mini graph is just like out of control with how many stages we have in the main pipeline. So we have an upstream.

B

We have the pipeline, our current pipelines, and then we have downstreams if each circle on downstreams is representing one pipeline, I wonder if we should just have one Circle to represent our current Pipeline and represent the multiple stages the same way, but maybe that's say that's immediately. That's probably too much information, but my point is the circles in the main pipeline seem to be getting out of control.

A

um I agree: I mean like this. This looks like a small design problem like to me, like my God feeling, is more like no, no, it just take some time. Yeah.

B

The first thing I did when I started here, was like 10 different issues, just refining this component and because it doesn't scale very well um yeah.

C

I, remember: yeah I think we tried to make like make a unified. You know, take a unified approach for the.

B

C

A super useful feature for users, yeah.

B

It is the it is the exact same component everywhere, so it will appear the exact same everywhere now, but I'm I'm, currently in the process of consolidating like five different endpoints down to two endpoints, um because they all behave differently um so visually though they're the same we'll see. uh Maybe we can make an issue for to explore the downstreams and start from there.

A

Yeah like starting from a shoe, sounds good to me, because I also need to grab a screenshot and then making it like customizable for me on pikma and then like. We can do some brainstorming sessions for this so like. If anyone could open an issue, it would be a good idea for me, um and so I I have one idea, because I just copy and paste this screenshot, like on our digma design, Library designer use this version with more more um less lines, but with more filled. Color tail like this.

A

So if we don't have enough time like, for example like we can ask them to update the status batch, more aligned with this type of new visual, like I, think it it'll work for the ux paper cut team's definition.

A

So, if dope like, if you think it's a good idea, I can also ask them. Of course, I also need to find more like small items like this, but this is something that just pops up.

A

A

B

You're saying in the um in the pipelines table are where specifically.

A

um I think we can start from the pipeline tables or but if we changed it inside the pipeline table, it applies everywhere. So maybe it's too big work for them, but we can ask.

B

Anyway, so, basically, everywhere that we have um in the status column, yes, okay, yeah um I've also been in that code. The only issue is there's. There are I, think a couple of places that are Hammel.

C

B

Just a little bit more tricky because it has like I, don't know I can I can look into it, though, but yeah. If you, if it's too um tricky for them to get into, then we can do that for sure. I do like that. I do like that status label. Better, though.

A

Of course, um I I can quickly share my screen because I was working on like cleaning up my profile, so, for example like like this, so this is how designers use the pipeline batch in armored design Library. So we kind of already updated this insights, our library but I think it doesn't show up on the code base because we didn't change the component or I think it's component. So I think this is more cleaner compared to what we have currently, because it has so many lines.

A

Yeah, so I prefer to have this version. Of course it has more colors, but anyway, less line is better because anyway, gilab has so many HR lines here and there we use a lot of Boulders, so yeah I think it's usually felt slightly better than the the compared to the current one, so I'll also I'll. Stop sharing so I'll also bring this um Hummel things to the team, but there is the possibility to for the team to say like well, that's not our scope, or maybe we wanted to focus on this.

A

So but anyway, we could always ask so.

B

This is uh CI badge link. Do you know what that is? Yep.

B

So if let me see, if is that a gitlab UI component I think so no no, it looks like a view shared component and so for everything. It's used, eight places in jobs, Pipelines terraform, oh.

A

B

Don't know but we've got, uh it seems to be all it seems to be all uh CI stuff, except for this terraform. Okay, States table okay. So if we were to change it just here, um it actually seems pretty straightforward unless the unless they're, specifically the foundations team, is creating um something for this, but I actually don't know why it's in view shared because it seems like it belongs to CI. You know, but uh yeah, that's a very long way of saying It's relatively easy to update. Okay.

A

B

So for your information.

A

Yep sounds good to me, um so so just a stupid question, so the few shared components it's more like the gitlab product in general can use everywhere, but do we also have like Ci shared components inside our front and cool face?

A

B

Currently, let me see yup.

A

B

um We currently do not.

B

We should that uh this is a good point, but like the way that we're structured, we have, um we have the CI and then everything is kind of we also haven't put stuff like jobs in the CF folder, so I think we're gradually like um migrating all this stuff, but we should have a CI shared but uh like there are a couple of things that have ended up in view shared, but.

A

B

They are prepended with uh CI, so we also have CI, icon and I. Don't know if that I mean I. Guess it's not that big of a deal the only issue there, though, is that like? If we decide to change something and then other people have used it in their products, then we will have to point out that we're going to be changing their product so.

B

A

I'm just curious: how would our how our code base like structured and design so I'm just curious too? No.

B

Yeah, so CI icon seems to be used like in a lot of places. There's 24 24 uses, um but mostly it's design. It's it's got a relatively good structure. Overall, um everything is real. You like pretty straightforward, so I think for the most part everything's in the right place, and but but it is, um some of these components are I would say for for verify.

B

Most of our components live inside the feature that they're relative to if they're not get lab, UI and.

C

B

A couple of different things um you that this is a good idea. We absolutely should have uh like a shared components within CI, so yeah.

A

Yeah it'll be a fun project when we have time for this.

B

Yes, it'll be a fun project for 2025.. Yes,.

A

And the small focused here this is: how I see.

B

A

B

A

um Thanks for letting me know, do you have any other questions comments.

B

A

Can I do not um so then I'll start recording thanks everyone if you're watching this have a great day.