GitLab Release Group, 9 Feb 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: 2023-02-09 Release Group pair programming

Description

Andrew Fontain and Andrei Zubov from the release team were going through some first steps of implementing a feature for the new environment details page: https://gitlab.com/gitlab-org/gitlab/-/issues/388384

This video highlights the initial set-up, managing feature toggles for local dev environment, using GraphQL api and addressing EnterpriseEdition specific features in development.

A

Hello, everyone. uh This is yet another pair programming session from the release group and today it's uh Andrew Fontaine and me Andrew, zubov, uh the front-end developers and we are going to dive a little bit deeper into the implementation of the following picture. uh It is implementation of deployment, approval action for the environment Details page, uh so we are currently uh implementing the or rather moving the implementation of the existing page from the Ruby unrails Hamel implementation to ugs implementation of the same page, and the page in question is uh the following ones.

A

So, in the deployment environment, if you click on any of those environments, you end up on the environment Details page.

A

So uh this is the uh old version of the page, and you will see over the course of our session tonight uh the new version of the page and also how to work with feature toggles and so on.

A

B

C

A

C

Yes, let's, um let's turn the flag on.

A

But before we do that, uh maybe you could also help me a little bit to set up the test data right, so I would like to actually see somewhere in the environments the the button that we are going to implement. So we make through that we get the right thing right.

A

um So, according to this documentation that anyone can also see in the docs gitlab or protected environments, uh we should be able to set it up through settings in and the ICD. This feature is only available for Enterprise, Edition and I. Have it set up locally, and we also have the instruction in the developing gate light, how to do it locally for your development setup.

A

So the environment, the Enterprise Edition, is on- and we have this practice protected environments block over here in DCI citizen.

A

ah So we can expand it and uh yeah I actually assigned the protected environment or production over here, but I'm not sure. If I need to do anything else,.

C

uh Yeah, you just need to set the required approvals to anything greater than zero.

A

C

C

Now we just need to run a new pipeline.

C

Okay, the the approvals themselves are actually tied to Big deployments, so your historical deployments won't have any approval options because they didn't need approval. Only only new ones will.

A

All right that makes sense, oh, so, in order to run it, what we need to do is say.

C

Yes, we go to cicd, oh actually, that's not. There's there's one more thing: we have to do actually you're right. We have to go to the uh um yeah mobile file or I. Have this set the the job to uh have a manual period.

A

B

A

Think I only have the staging set to manual.

C

Yeah, so it just add that when manual the to your deploy, prod job.

A

C

And then, when you go to commit this, just do it straight to master remains the point no point doing the MRI workflow.

C

Oh, no, that's! Okay! It should be pretty for them right.

C

I think the the yaml file is uh simple, so it'll create um it would create the job anyways. So now, if we go to the main environments page and we extend production, there should be a line waiting, Forest excellent and if we could yeah the deployments page or the environment Details page, uh this is the pipelines page very similar. Looking I know.

B

C

um Also see yes, there's one from the MR and from the merge perfect. They have the little thumbs up at our right.

A

Cool, so this is the button that we are talking about right.

B

A

Amazing, uh then, what uh shall we turn the feature flag on to see the new version of the page and start our implementation yeah? Let's do it great so uh in order to turn the feature flag on, uh and we also have it documented, but to save you some time uh you just use the rails console which you can access with this rails here and then it's basically as simple as feature enable, and then you put the name of the feature flag. You are interested in. In our case, it's no Iron Man.

A

Details view and you have like how to complete something.

A

So that is enabled so very soon you should actually see yeah. This is the new version of the page, and these are our new tool, uh deployment pipelines which are in this waiting status.

A

Amazing, so uh I guess we need to fetch the data for this guy to even understand that this environment has some approval spending right.

B

A

So for that we have detail.

A

So this data is fetched with the graphical and we use uh we use this query over here, which is called environment details query.

A

It is pretty long with a lot of stuff there, which we probably later will split in some fragments, but right now it's like that. uh uh So how do we get the approval information.

C

uh Let's see here as part of the deployments, I have I have a graphical, open and another tab here.

A

Oh actually, we can also check it over here. I also have the one.

C

So, on the in um yes, the approval summary. Yes, we want to fetch the approval summary.

A

Of this one right.

C

Yeah uh and we'll watch we'll want a status we'll want the total pending approval, count and we'll want the total required approvals.

A

Little pending approval counts, total required approvals like that right.

C

A

A

A

A purple summary field can be requested only for one deployment at a time.

A

And that I guess is a bummer.

C

B

A

This guy actually prevented all the other approvals from going or like deployments now. If I just um commented out, then oh no, ah no, but this is from user permissions.

A

This is something else that we also don't use at the moment.

A

So actually, approval summary is not affected.

A

What is affecting the output is the user permission stuff, okay for Approved deployments, but that we need in order to be in order to really understand whether we should even show the buttons or not right? Yes,.

A

C

I wonder why you can't fetch it for every.

C

um This week, the permissions thing the permissions is good. It's strange, yeah.

A

Actually, I always keep bumping into something like that uh for this query in various cases had to work around it, for example like or pagination I couldn't request.

A

The second query at the same time, because it was always erroring, uh uh but it was per environment. So here I guess we have the restriction on error deployment basis for user permissions.

B

A

B

It's also like maybe.

A

We could just check it in a completely separate query, because.

B

A

User permissions are per user right and that's not gonna change.

B

A

Maybe we can even send it from from the back end.

C

It's not necessarily true again, because the approvals are tied to the particular deployments. Theoretically, different deployments can have different rules associated with them all right um for now. Let's not worry about it and then discuss this issue with our lovely back end team, good.

A

A

Let's have this approval summary of it to our.

A

A

All right, so we have this which looks over here like status and total pending. What do we have.

C

I think, if you alter your query, they just fetch the pending the pending deployments and it'll probably be.

A

Is it like uh probably blocked.

C

B

C

Created I'm going to go with created.

C

No, it's open up on the side, there's no there's no waiting.

A

A

A

Doesn't return anything anymore.

A

Yeah, okay, so that definitely is a culprit.

C

C

A

With this should be in order, I guess.

A

So this one is but I don't know. This is the different environments.

A

Rookie mistake.

A

ah So, okay, it is blocked, it is improved.

C

That's interesting uh because those numbers don't make sense.

B

A

What about the.

C

A

And here it doesn't even have the approved.

C

um I think there might be there might be something else we can. We can try and fetch on the approval status, summaries.

A

Let's see what we have here right.

B

C

Maybe try fetching the rules.

A

Rules and here what do we.

B

C

I tried pending approval, count.

C

There's no rules there.

A

A

So we use already this graph column Point anyway, anywhere by the way.

C

A

C

C

We are in an interesting.

A

Will count, but there is no nothing, no rules anyway, anywhere.

B

C

In an interesting uh point, right now in the life of deployment approvals, where we are kind of trying to transition how it works from.

C

All right, it's hard to think um just having like a global set versus having um many rules and I wonder if that's kind of what's going on.

C

C

Summary see, let's see what these resolvers are doing, see Google summary.

A

So, where should I navigate so other people and.

C

Me uh so if you open up, um that's not it resolvers resolvers approval, no just.

C

I don't know I'm still I'm still looking yeah the fuel pump, resolvers uh deployment, resolvers deployment, resolver.

C

um Basically, it just fetches all the deployments for a given. Yes, no environments.

C

So if we open up the deployment model, I guess uh the ee version of the deployment model. That should be specific awesome and we look around for approvals. It says, as many approvals delegate means approval too yeah.

C

Because I think the original, so the the way, the if we look at environment, approval dot to you.

A

Okay, so, where.

B

C

C

We open up environment approval, Dot View, which is our our button. Our button and modal combo.

B

A

You mean this the view component.

C

C

There is a gradual query already that fetches this now and now that we're here I'm beginning to remember what happened. Basically, the graphql API that was created only works for the new version of deployment approvals. For some reason.

A

C

Which means a little bit more configuration.

B

C

To at least get this working, and perhaps another I know, there's something to discuss with the back end team um yep, but we do have a. We do, have a query. For this part at least we just kind of fun. So if you go to um yeah, this is the like fetch all the approval, summary and everything you need for.

C

What's termed multiple approval rules, uh what we configured is called undefiers called the unified approval rules, the idea being that uh anybody who's allowed to deploy to an environment can also approve that deployment. Aside from the Creator uh multiple approval rules, Works more like how Mr approval approvals work, uh where uh you can, you can set uh a required approvals from different groups and maintainers and specific users, and that kind of thing.

C

So to do that, we need to bust out uh the API. uh Do you have Postman or.

A

C

Something something like that set up yep! Oh! This is fancy okay, um so you're gonna post! uh Well, we have to first we'll go back to the we'll go back to this. No I think we can post this while at next. Actually so you're gonna put to.

B

C

um Projects, ID um protected environments, protected underscore environments.

C

Slash production, which is our product, our environment, name,.

A

um Production: okay,.

C

And then in the body we basically just need to send. uh We need to set the required approval count to zero, but I'm going to pull up the API documentation here.

C

Yeah, so uh oh it's all. It's all um snake case. No awesome.

A

B

C

Right, let's make sure then I think you have to put the name as production in there as well. I'm, not sure if it if having it in the URL is enough.

A

Like here, name yeah,.

B

C

Then we're going to create an array of approval rules.

C

That's um basically approval underscore rules, okay, uh and we only need to put in one entry and that one entry will be our root user. So it's just an object with the user underscore ID set to zero.

B

C

Then, if you uh copy your token over and or that office should.

A

B

C

A

C

No I think it's pretty flexible.

A

C

Does um does this add-on have a way of like sharing requests between people yeah.

A

I I'm pretty sure.

C

A

Like pretty on fire with features with um Postman, oh.

C

B

C

Emacs emacs as like a rest, client mode that I use and you basically it's kind of interesting. You kind of write out the Raw HTTP request, and then it just sends it away.

A

Oh I have this one.

C

B

A

Don't know how.

C

To get that one.

B

C

It must be somewhere right because, like it's created when the GDK spins up these days, but just API is sufficient.

A

C

You probably all want to expire this token afterwards, just in case.

A

But that's my local right yeah.

A

It can go wrong.

C

Okay, it did not work.

B

C

So, as you can see in this response, we get our predicted environment. You can see. We have our deployment rules, which is AC also just sent to the administrator. Okay, oh and it's user, id1, 00, okay, so try user ID one! It's click, zero.

C

There we go so now we have set the required approval, count to zero, which disables the unified approval rules and have created instead, one of potentially many multiple approval rules uh that requires that the user has to approve any deployments. So now we have to run another pipeline, so we can get deployments that use these rules, but that's easy. We just go to cicd Pipelines.

C

This isn't complicated at all, and we just uh no you just click run pipeline.

C

Kick anyone off.

C

What do you think simple so far or.

A

Yeah very straightforwards, like not wasted at all.

C

We're only we're only 40 minutes into an hour-long stream and have yet to do any any paired programming.

C

Oh my God, this is the this is what I've been working on for ever. It feels like now is uh moving that settings form over to the uh approval things I guess. Maybe you could have turned that slide on and use the horn, but all right. So now, if we go back to graphic though- and we run our, we run our lovely query again, we see we have an approval summary with stuff.

A

Amazing, oh my God, but what it does mean, though correct me if I'm wrong, that, if a user sets it up over the interface, they won't get any data and one thing you're like approvals functionality list not in the environment, Details page.

C

Yeah, so that is a note, is that we should go back to the back end team to give us some sort of access to uh the unified approval rules. All.

A

Right yep I'll create the issue for that yeah.

C

We've been throwing around the idea of phasing them out completely, but I, don't think that'll happen. If, if we do make that decision, I don't think it'll happen until 2024 anyways, so that would be like a whole year.

C

A

A

C

C

So now, for the other fun EE ish bits of um coding, we in order to import the approval component into your into the non-ee portion of code.

A

C

A

One or is it something else by the way yeah, it's.

C

This one, this is the okay cool, the the way in which I usually try and do these is. Is that like it might make more sense for this component to be a little bit more deconstructed, but at the same time you want kind of one entry points into the Enterprise. Only so I couldn't just an effort to keep like the mess in the community, Edition small.

C

C

um For this yeah for this week, we import um the file as normal, but instead of the till that we use ee underscore component.

C

um Ee underscore component is a path helper. That's set up in it's like a webpack Alias that we have set up uh that if we're not running in Enterprise, only mode or Enterprise, Edition mode, that'll be ee, slash, environments, slash components, slash environment, underscore approval.ly, um the same idea um yeah, but it wants. It should be ee underscore component. Actually, sorry I think. Let me check.

A

But still environments right.

C

Yeah uh yeah, so the.

A

B

A

It's complaining so.

C

And I even I, even most misspoke a little bit. We actually want to use the import functions so yeah. So in our components section we will.

A

uh Something like this.

C

Yeah, so in our component section we'll we name our component like in the in the little block, is down below, where you declare other components.

C

We'll name our component environment approval as usual, uh but instead of being able to use shorthand the uh set it to a a Lambda that or an arrow function that calls the import code.

B

C

uh I, don't get it yeah so like Colin.

C

Like that, no no, a colon like great, like you're, studying an object, property right and then an arrow function. Oh okay got it calls in board.

A

C

My best, we usually just just in line that that part.

A

C

But uh environment approval component isn't a function right. It's just the import call.

B

C

So you can get rid of the the parentheses at the end of that line, and then the Alias we want to use is an ee. It's ee underscore component.

A

C

Yeah, there's a in the in sorry in the import screen all right. uh The difference.

A

C

uh No, no s on component. Okay,.

A

Now it actually.

C

Works yeah the uh this one, if we're not in Enterprise Zone, for not in the Enterprise Edition it like returns an empty component, basically.

B

A

So now, if I put it here,.

C

Well, it'll probably blow up.

A

Oh yeah, it does oh, but with something unexpected actually.

B

C

Resolve, oh there's, a sorry there's a component in that in that path, so it's environments and opponents environment.

A

Enormous components: yeah right.

A

C

No, so now we should have some log errors where it's missing, props and all those fun things right.

A

A bunch of those foreign, but it does work it renders something. So we need to provide some props in here right.

C

Yeah- and this is kind of maybe where we want to start changing things, but at the same time there are some some props that we need to make the model look nice.

C

um We need the environment name.

C

Yeah, basically yeah so like I said we just take the whole environment and then it gets us. It gets us out of the Community Edition code as quickly as possible and then what's the additions start looking for like properties that should be there in ee mode. That won't be there normally.

B

A

But the thing is so: this environment object is basically the environment, object that we use for environments page right, and it probably does have lots of data that or does it actually, what data does it yeah, which needs.

A

Required approval count.

C

So if we actually, if we go to the the best way to do this, because I I basically hodgepodge this together for the ammo Pages, if we go to the environments, Mount show file which I'm sure, but the ee version.

B

C

This one, you can yeah, we can see this const environment. Oh.

A

C

Is basically the bare minimum that we need for data to get this modal to work?.

A

Okay, cool then I just put here as a reference as well, um something like.

A

And that is our I, don't know.

A

I also not super happy to call it environment, but.

A

C

Damn it I think the only tricky one to get is approval rules, but we can just set that to right. Yes, it isn't true, but like has approval, rules is the like switch, is the Boolean that decides whether or not we have multiple approval rules, um and if it's true it does a graphql query to fetch the approval summary and if it's false, it relies on the required approval. Count to be there.

B

A

So then, uh but let's adjust I guess are queried, so we we definitely have at least most of those right and then try to pass it in.

C

Yeah so in this case, the upcoming deployment is actually the deployment row that we're on.

C

Like this, this whole thing, the thing about this component is that it was all built for the shape of the data that we receive on the main environments page.

C

C

Like there's, there's some opportunity for some refactoring here, probably and some better naming and things, um but at the same time.

C

We've always been in this like weird we're, not quite we don't. We haven't quite ever finished approvals yet because we teach we keep shifting like what approvals look like so.

A

B

A

Okay, so this we should be able to get from the deployment, and this is the environment name, environment, Tire- and this is the recorded rule, count also of an environment right, yeah yeah. Yes,.

C

But is it which is weird, but it's like the unified approval rules required approval, count.

A

My and this already written a little bit.

C

Yes, I would for now I would set that to zero until we can like get it in a query.

A

Okay, so let me so, let's start with the query right. So what are we missing? We're missing Tire right.

A

Can we just get it from here from the environment.

C

A

Oh, yes, you can.

C

A

There we go here.

C

B

A

Oh yeah, that's something else.

A

um Then so this one you suggest to Heart coat or.

A

It's not there.

C

C

B

C

All right still doesn't have a requirement anyways, so it doesn't matter.

A

Also for the deployment do we have? What is this Deployable.

C

So the Deployable is the CI job.

C

It might have a.

A

Slightly so so this you mean right.

C

Yeah yeah: okay, because because API only deployments don't have approval functionalities right.

C

We assume that, if you're using the API to create your deployments that you you're kind of on your own for your approval task.

C

Is experience that.

B

C

I, don't know if we're like moving away from the Deployable name, but it's definitely.

C

And then pending approval count is in our approval, summary.

C

Right now, I think um so is approvals.

C

Or actually, no, how do we get the approvals.

C

It works somehow, uh then, what's more important. I think is that if you pass in has approval, if, as long as has approval, rules is true.

C

Oh, that's right. The pending approval account and the approvals section are for the old rules: uh-huh, okay, so.

A

So let me just tell some Market not available.

A

A

This one as well right.

B

C

And then foreign.

C

I, actually don't I think deployments as long as you have, or the deployments approval status.

C

And it's trucy or the approval summary should give us whether or not we have approval rules. I. Think some combination of those parameters in existence.

C

Right, we can look up. We can probably look up how it's defined on the back end.

A

C

If we go to, if you look for deployment entity.rb and you open the ee version.

A

C

Oh no, this is the this is the model. Sorry, the entity is like the API representation of the model, so it's literally deployment underscore entity all.

B

C

Yeah, the second one there uh so you can see we Define has approval rules as deployment environment. That has approval rules, that's helpful. So if we open up the environment model.

C

uh The ee version, of course this is the second one there I know this is the entity. We need the model.

C

So environment.rb no s ense.

C

Yeah- and we we look for we looked in here- for has approval rules.

C

Associated approval rules.

B

A

Yeah, this is done.

C

Oh, my goodness, okay.

C

So basically we can do this in the front. End too, because I saw there's a connection by a protected environments, but it's probably just easier to look at the approval summary and.

C

um If we look at the approval summary query like if we look at the graphical results, okay, we can probably see if, like total, pending approval, count and total required approvals is greater than zero or something interesting or yeah. Because we can't say we can't check the status because the status defaults to approve- and we want to be able to show the history.

C

So if we scroll down to a for a deployment that doesn't have rules, what does it say.

A

B

For those it's just.

A

The approval summary is now.

C

A

All right well, so then I guess you would need to do it or we could try to do it front end.

A

But last time we checked also.

C

Yeah, the other kind of tricky thing here is that we wanna not query for the approval summary if you're in the, if you don't have a license for it. Okay, thank you.

C

So maybe what we can do is we're already we're already querying for this in the approval component.

A

So the component itself does the query: I mean.

C

I'm here it's on your right, so we there's the. Where are you Apollo yeah? So we execute the query, but we just we just see if it has the approval rules and then, if it doesn't, then we don't execute the queen, we can probably execute. We could probably change this logic slightly to query for it anyways and then uh be a little smarter about showing unified versus multiple versus nothing at all. That's correct, thank you and then you don't need that parameter at all.

B

A

A

A

And what is also kind of bothering me a little bit is, if I put this back.

A

Then we don't get any results anymore.

C

Yeah, that is weird.

A

Oh, this is the fetch different and it responds with a bunch of errors.

A

Rule summary field can requested.

A

Only foreign, oh man, why just it just worked over here? What are you talking about.

A

I, don't get it.

C

You still have the do. You have the like permissions in there secretly somewhere.

A

Let me alternate because.

A

Copy the whole thing over here, maybe I, have some other.

A

Oh, it does work.

B

A

A

Okay, until you work, then.

C

Maybe comment out the deployment block in the or the query and the other component in the in the app Google component.

B

A

Okay, here you mean, um can I just comment. The whole thing.

C

A

It's not working anyways.

C

Like it just it complains, it doesn't have an environment, so it explodes.

A

Yeah actually yeah, if it queried, then there was a kind of very batching happening right here is actually the request.

A

No, there wasn't any mention.

B

A

Unfortunately, I think we have to kind of leave it at the Cliffhanger, because they're running out of time.

B

C

And it sounds like we have many things to discuss with everything yeah.

A

Cool, uh so everyone, as you can see, some features are really hard to even start developing. uh That's what we have to deal with uh now and then, but nevertheless uh it is fun and once we get it working, it's gonna be even more awesome.

A

uh The other thing is I. Think I will attach this video to an issue that basically prompts for creating some default setup for environments and deployments uh seating kind of to illustrate that we definitely need it, because we spent literally like 30 minutes to setting up the environments cool so guys uh have a great time and join us later on some other air programming sessions.