GitLab Release Stage, 20 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Release Management - Environment Redesign #1

Description

Jackie Meshell, Sr. Product Manager, and Rayana Verissimo, Sr. Product Designer discuss improvements and redesign ideas for Environments.

- Improving Environments epic https://gitlab.com/groups/gitlab-org/-/epics/3293
- Environments: Redesign Bugs and Features https://gitlab.com/groups/gitlab-org/-/epics/3295
- Environments: Bugs to Fix https://gitlab.com/groups/gitlab-org/-/epics/3294
- Environments: New Features https://gitlab.com/groups/gitlab-org/-/epics/3296

A

Okay, so we have this environments, redesign bugs and features epic. A big focus of this will be two aspects: the environments list and the environments dashboard, just just a quick overview. We have several different user insights that are related to an environment list, how it exists today and what they're hoping to accomplish from this view.

A

So, typically, a user will end up on the environments list page after they've had a pipeline failure or deployment, and they want to view the related activity of that commit to that environment or they're coming to it from the environments dashboard, if they're using the environments dashboard. So when users land on the available page, they know that they have an environment name that they've named it in their animal file. They've either created this environment in the UI or from the mo file and a job and they're.

A

Looking at the last latest deployment there also, if they have Prometheus integrated they'll, be looking at how that environments performing. They also have the option to redeploy to an environment. So let's say that this is a failed pipeline commit and they want to redeploy and then the idea of a stopped environment is one that's no longer active that they want to not deploy to or be be available for deployment in our redesign.

A

We have a couple of items related to when a deployment is in progress indicating that on the environments list we also have a couple of other timers and buttons that are indicated as wanting to be added in the environment view, and then there's this interesting issue around environment, displayname and understanding the various names that are tied to an environment displayed inside the environment view. This seems like a very specific use case in that the name of the environment is not readable for that customer.

A

So they're wanting a way to have both of those names specified inside of the environment list.

A

Some of the insights that I have learned from customers is that available environments is a little confusing, given that this environment is actually active. It currently has a deployment on it and, although it's available to be deployed to people could still redeploy to a stocked environment, meaning that that could also be available if you read a play, so this idea of staff perks is available is not a not a very useful paradigm or binary for them.

A

They also made some commentary around how obvious this delete button is and how it's like really screaming at them to delete this environment. And that's: ok! That's that's just there like it's, it's a really big call to action, whereas it might make more sense to have that be an outlined box.

A

The new environment button is really useful and people do like being able to create an environment from this, but this green state here I think also is tied to I lost. My issue.

A

B

A

B

There, it is sorry.

A

Lost my effect there, and they want to be able to write here so button. Deploy too should also be manual job. This is a another feedback component. They want to be able to.

A

You know know what the difference is like that's kind of a convoluted concept, yeah.

C

You have like manual okay, understood now, because only the tooltip is the cue right, but the button.

A

Is the same right exactly there, it indicates like the same action, but if they're, two different things.

A

In this view than the new environment view, this people want to oftentimes select variables. This might also be a view that we would want to extend access to so, for example, do we want this to be a group environment? What other projects should be able to access this environment and having a pick menu that allows maintainer x' to select the availability of this environment from this view, so that goes back to our sharing or supporting group environments? That would be this view that we'd want to update. Is this useful? Yes, okay,.

A

And as we look at like this is a little a little cool indicator here, once it's expanded and you can also go from the environments view into an environment view page, which is about the production ID right here, like the environment, ID. And then you have all these different jobs that are related to this production environment. And it's not very clear as to from a user's perspective.

A

They can roll back or redeploy from this view because you see it's the same icon but reversed and they have to hover over it to roll back and then Jacob.

B

C

Chris company for years, I've never maybe notice that these buttons, where different, is Rebecca. Okay, so.

A

You have you have to hover over it and, if you're doing this from mobile mm-hmm it's impossible. So we need to make this a little bit more usable. From this view, we also had some other feedback on wanting to to make the logs a little bit more discoverable from that view. So here it gives you a job and it's hyperlinked, but where does it go right? Hey do people know that they can click on that to see the logs it might be more beneficial to have.

A

You know that this is a job, log or understanding like what that's linking to, because if you click the success button and the production link, it takes you to the same log mm-hmm. So it's kind of confusing us to like. Why are both of them linked.

A

Okay, so going back to the breadcrumbs mm-hmm.

B

A

Go to jobs, I I'm at the pipeline view, yeah I go back to environments and I click into my production. Environment. I can see this link right here and, if I open that link. It brings me to the the job, but the breadcrumbs are not the same. It doesn't take you back to the environments, it takes you back to a job log and that's very challenging to grasp, because here you're expecting to know all about the production jobs, but this doesn't even show like this is that this is the name production environments.

A

This isn't this isn't descriptive of these are the jobs related to the prescriptive production, and in addition to that, you click this link. It takes you to the exact same logs as the success button and.

B

C

One is status and John yeah.

B

C

I think the this can be challenging.

C

A

I think that this is just more like indicating that this is production jobs. You know, and this is jobs related to production on this page and creating the same, like you know, like the same little banner that shows like this is a job inside the production environment would be useful.

A

And then we have to commit here and the commit brings you to and like the change that was added and a merge request here. So I wonder if it makes sense to incorporate the merge request, a link here as well more to bridge that experience a little bit better yeah.

C

Now something that we seen us so often when we were about a day to have some sort of users that they really go into every single UI elements to understand why this pipeline, why this merge request is job is different. Well, I think it's also a challenge, because we have so much information that is super relevant in the UI and very limited space, so maybe I'm looking at this view, specifically I, know that this is not a new component yet so maybe you can already have conversations with the front-end to maybe improve this view.

C

Not just add one element there, but impossibly. We think if this list view is the best way to yeah.

A

And I also wonder if there's an opportunity for us to connect something like release. Tags to this environment view that people are able to go to their deploy job and to the release. Tag that contains that deployment, because.

C

In this view, since it's everything related to production, do they still want to see all the logs or is it like? The I don't know the five.

B

C

How to say pipelines and things have passed there- yes, I'm feeling like dental search in this page. There's no filter, no sorting anything like that. So is there a way you know that where users can come to like a limited amount of information so that we can layer on the view I just made for me here know.

A

That that I feel like that makes a lot of sense. I am I, am always I'm perplexed at what action are we expecting users to take from this view versus this view like?

A

What are we trying to make them do because they say virtue the same thing, but one of them is the jobs within the environment, and the other is just the environments, and this imagine, if you have over a hundred environments, yeah like this pay is rendered also unusable, and then how do we reconcile the purpose of the environments dashboard with the environments view here like what is our? What are the purposes that we're trying to render yeah.

C

Because we call these a dashboard right, it's testing the question of.

A

Environments, page all.

C

The blackboards so I wonder if it's I know it's useful, but if it's really the right place, because I figure out who a department is dashboard, you can have the information about your your part and the instance is everything there.

C

A

Does it does you're actually right like and really maybe this should be renamed deploy boards.

B

A

Of environments page because it's it this this environment list isn't different than the environments dashboard. It's the same exact information, repackaged, yeah,.

A

And then okay, let's go back to our so we talked about people wanting to see different attributes.

A

And I'm here, I'm reading a bunch of like the build page. Is this page? So it's the job page that people are referring to as the build page which I didn't know until like right now.

A

So this makes a lot of sense as to like okay I want to see this I want to see my deployment a link to my deployment.

A

Okay, make that that's like five cloves right there hockey mushrooms, just to be able to see my deployment from the job logs. Like that's a.

B

A

Of clicks, okay,.

B

A

No deployments yet filling environment lists and pipeline when using manual deployments, and this.

C

C

Yeah, it's a when you don't have deployment, it just shows nothing and these revelations who add the empty state. Okay,.

A

Alrighty, let's see what other thoughts.

A

Are there on this I guess we can navigate up to the improving environments and look at just the general bugs that people have have submitted in relationship to environments.

A

We have 31 issues in here, and this is there's lots of lots of different things, including why wild card environment variables exist, supporting existing deployments, multiple jobs for same environment. So again it's reconciling things like the Jobs page with the environment when there's multiple jobs being run. So, for example, production is your environment, but this page is the jobs of that production environment, but there these are all different jobs right.

A

So how do we? How do we? How is this usable you.

C

Ready to be a master and get lab, and we didn't know what every white element means and where to find the.

B

Faithful information.

C

Totally into future, that's what that's a thing: I'm, still perplexed, that the most music and a filter in search because would help a lot.

C

A

A

Some of this stuff is just like you, xstat to like loading spinner has low contrast, red green buttons, I.

A

Know some of them are environment variables too.

A

C

Yeah, I reproduce this error the other day.

C

Oh God Oh Jackie. These hasn't been opened 11 months ago, I.

C

Mean I think, maybe because they only have one item there, you can really notice because I never noticed and every time I close, this page I actually am having AIDS I.

A

Just don't know how people are managing like this.

B

C

Is where I know release.

A

Registration is so bad.

B

We were doing your job.

C

No it tried to scroll outside the containers like.

A

Okay, we should fix this, but I also wonder: is there a better way for that functionality to work there.

B

A

This little daily here should this: should this not be a little play, icon, I? Guess it has to be stopped there? Should this not be a play icon, because it's only in stopped environments, I guess.

A

So, even in even in his even in this view, it's a dynamic review.

B

A

He is looking at the review deployment right here, which is your job and he is looking to redeploy from that job yeah. So he is in this. He in a.

C

Is available? You know.

A

Least from this, for you, it's just for some reason. This doesn't show because it's not a dynamic environment, I guess.

C

C

A

So, for some reason, let me see if I can reproduce that okay.

A

Alright, so I'm here I clicked to the review, yeah and then I go. That's not right, go to stop and then come back.

C

Today, because of review, it's yeah I have you, but it's like it's like all these really. You know disappear in your, not review, but you don't have as a folder anymore. It's the first one. What happened.

A

There, but it's not right, is it like it shouldn't work that way. Okay,.

B

A

That's strange, but either way that first bug that we had the first thing that we reviewed, which says this little icon here, looks like it's a manual job, but then we're giving people the option to deploy to other available environments. From this view from this little icon. So I wonder if there's something different that we should be doing here.

C

That's not a training theme. That's unlike to understand what are the options within this drop down for us. You know using a drop out component because now I just have sup review, but is it even necessary I know, that's the number use cases. We have a bunch of options, but they seem very contextual right.

A

Okay, that's helpful. Let's look at.

A

So the way I was thinking for the bugs that I had added to the environments bugs to fix epic. These are all bugs that are.

A

Valid one, but then there are also in areas that we haven't changed so, for example, like this one here case, you'll see that the CI.

C

Environment status, yeah.

B

A

This is an endpoint problem, so it's a bug, that's in the backend, so that's the kind of stuff that I'm like okay, this one is fine too.

A

To keep in the bugs, because it's not going to matter where we, what we do to read no redesign, is gonna fix that because it's an endpoint issue.

A

This is also an endpoint issue and then mainly renaming environments breaks future deployments yeah. It's weird, and it's also crazy- that this is still out there.

C

This was retouched anything it breaks, but then this is a result is something V Y and if so, do we want to I know I know it's a buzzword in case ya, know.

A

This is a good question.

C

Because now it's just happening, but let's say that there's an use case where it's part of the workflow. How are you people right.

A

Now it says that each respective pipeline step shows the message this job is an out-of-date deployment to and deleting the old renamed environment does not fix the issue. So.

C

It's really like people, don't know where to get home. Yeah.

A

And the progressive delivery Wade this one I guess cuz I wonder if this is a bug that or eat flagged I don't know, but either way it looks like you, I won't be impacted by it. I just wonder.

A

If we should support in our redesign the ability to rename from the UI and.

A

Have that still work right, I, don't know if the bug fix will address this. You.

C

Know because it's fine, if you have the possibility to say yeah, something's, broken here's how to fix it, and then you go to the doc. So you can fix that in the comment line. But if it's something that's it's already like, like Barnum.

B

C

Into you, I was worried even in the environments. Why not? Allowing users is like what you're saying goes to name it tastes, the former. It exists right.

A

Okay, I guess Ori might be planning to deliver that issue, though so that might be I fix. That she'll render.

A

I guess this should actually go to our environments. Dashboards I think you guys had some error. Message' complete.

A

Potential future broken.

B

Let me redesign and.

A

Go to the epic and add.

B

This puppy in there.

A

A

So I think we've kind of exhausted the three main things I feel like it's wrong with the environments for you right now, the first one being you launch into the jobs for you once you click into the production environment, without knowing that's where you go, the jobs view once you click into it, it's unclear from redeployment to rolling back and then also the duplicative nature of the job link and the status link should get fixed.

A

Looking at the environments dashboard, we are calling out the exact same things on the dashboard, as we are on the environments view. So, even if we allow pagination of this view, how is it different from the environments list and the deploy board view? I know that customers like to see the buckets of staging and production. We like the visual here right and they like being able to see the apps like right from that same place, but you could do that today in the environments list right.

A

So some things that we can do here is add a couple of charts that probably indicate, like you know: performance of environments like number of active environments or available environments and we're stopped environments.

A

You know that's one options to make this a little bit more usable or different from the environments list, or we deprecate the environments list and just have job lists. From this view,.

C

I'ma see if it would be also useful to have both the environment so dashboard anywhere. Under this view, as like, like let's say that you you can switch, you can change views right, same abilities, udinese's counter fee or whatever. If you want to look at the list view you can and if you want more detail, I.

C

A

That so taking this environments dashboard, we would probably work to move. Let me pull up Kenny's app again.

A

We could move this page, the environments page out of the project, invest it in the environments view right here.

B

A

And that would allow two things really well off the top of my head. Once we support environment at the group level that is way more easy to navigate because they're already shared assets across projects, so it doesn't really make sense to have the environments nested under the operations view.

A

The only thing that we may want to retain is the deploy board for the project, so it might just be that we carve out the deploy board section.

B

A

Keep that in the project and call this environment instead of environments deployed word. Yes, I didn't know that this was the deploy board right.

B

C

Was a bit surprised when I had to work with some redesign of this? These my clothes and I was real. Looking for a dashboard.

B

C

Will be when you expend your environment, email disputes, though, if that's relevant to users, and they want to know, consume that data into specific.

C

A

So I love that idea. Iona moving the environments list into the environments, dashboard section I think that that's a really great first step and maybe the MVC there is that we duplicate the view. And then we remove view of the project.

C

You can see.

C

A

So then, if we were to move this view, this environments list view into the environments dashboard section, we could have multiple tabs, I guess the first tab that would allow people to flip back and forth between the Viet list view and the TAT and the dashboard view.

A

The the next problem would be sorting and filtering and then I suppose.

A

Sticky filters you that people could bookmarks views that they want to only see yeah.

C

Like highlight remark, some of the projects are the environments, because, right now you add, this is still linked with the operations dashboard. So, if you delete something here is the mother needs also from the operations, dashboards and I know I think Andy. He designed his design designed cups where you would have when you're adding a project, or in our case you could search from your favorite projects or the projects that you have.

C

But it called recent deployment or whatever.

C

Because we already want to let what you say you guys on a group level to show them or environments right there and used across.

C

Maybe there's a different use case and kind of swapping change.

C

A

I think that there's probably a third view, which is like a heat map for your environments. That is like how are your environments performing? Are they red green? You know like all of them in a color graphic, you know, because that's what people who are managing hundreds of environments need to see it. A quick glance like we're a thing at right, mm-hm, so I think that that might be a way to triage there. You're slow. It's like the top of this is a heat map that shows all of their environments on a red to green.

A

You know scale it's kind of like the deploy board. You know, but I have that be for environments.

C

Imagination- let's not forget that.

B

C

Imagination but I wonder what the engineers are. Gonna say about performance and.

A

Jake he's looking into that I think this milestone he's like I, don't know how we're gonna.

A

And so I think, like, though it'd be kind of cool to see if we could do a proof-of-concept.

A

Like with Nathan or something of adding a heatmap chart to the top of this dashboard that pulls in aesthetic, it just pulls in all of the group's environments and it uses you know, it's either failed or passed, and it's either green or red. Based off of the last pipeline to that environment.

A

Based off of like the last pipeline, so just like how these are red and green red I think because it's failed like we would use the same logic. That's populating these colors to populate the heat map on the environment, dashboard. It would just be all the environments in that chart and their last pipeline status mm-hmm just to give them a glance like that gonna be right.

A

C

We have anything former competitors, I.

A

Think Jenkins.

B

C

B

C

Is really this is actually.

C

There wasn't issue and.

A

This is how I'm used to seeing it like when I was when I was doing this for my job. What I was getting paid to.

B

Do departments.

A

Its these are like really this. Is it like? This is a very common way. You want to see your things right, like you, have your project theme and you have your environments and they're color-coded, okay,.

C

So this is similar to what the environments dashboard used to the initial NBC four years ago. They want to just have like TV, be one TV news right.

B

C

If I implement this, none of this is what we have enough for the emergence escort no, but it's not.

C

So the physical, but it just Col, must have have like a viewer. They could just. The teams, could just put on TV I'm a large design and see the status of their latest Atlanta deployment so fast. Whatever, though, there's a bunch of screenshots in the comments yeah.

A

This is exactly, though, like what we need. This is what this is, what they want to see, what they being our users, so I, wonder, wonder why we couldn't implement this I. Think.

C

This book was just too large in by the time that was like II when I when I joined it luggage was maybe one of my second big tasks, big issues, and this is.

C

We just wanted to share with you why the end points that we already already have reusing the existing operational dashboards and then that was it.

A

Okay, so I like I, like the I, think that the only thing I wanting on top of this existing view is. This is.

A

This whole idea of like a higher level, to like, say that we split this screen and we draw like a horizontal line right here and the top thing right under the environments. Dashboard is just the static heat map that shows red, green squares for all the environments in your project and then there's another horizontal line that gives you this interaction per project per tile here.

A

So then you're getting your global view and then your drill down view in the same screen, and you don't even need to interact with this heat map up here, because you have these little tiles to interact with this. Just gives you like a are 50% of my environment screen are 50% of them in progress, are pretty pertinent and fail. Like gives me a glance to.

C

See that I only know.

C

The purpose of the environments dashboard.

C

Remember that I wanted to do problem.

B

C

C

A

Now nobody kneeling.

C

It's a great learning for us because very misty no more than later, and we knew for the beginning, so I.

A

Know exactly so I would love to see I'm gonna talk, maybe with Nathan I'll, create an issue and I think that the BC of, if we can it just ingest from the environments for you all of the environments lists inside of that group and populate a chart with it, that'll solve a lot of our customers pains on navigating across the list, because the list is it's so hard to navigate. Today, yeah I mean when you have more than one environment like this is really clean.

A

This is easy to use and navigate, but when you, when you aren't using kubernetes and when you have hundreds of environments, there's no way to be actionable from this view, okay and then I agree, I would love to remove this view. This environments view and put them in the environments dashboard as a tab to toggle between I.

C

Think they'll be interesting, because not only we can connect things, but also make them distant. Workflow, a bit more easier would make more sense and the UI polish deeper administer. For example, this button the red button, delete its legacy. It isn't supposed to be like that and if you want to eat it meantime tackle those small UI changes. Improvements I think we do gesture yeah what would happen and tackle them.

C

A

Let me pull up one of the ethics I do want to make like progress on our.

A

On our owner on our bugs here and I'm, not I think that the user story mapping might be really useful to group these by. But I also feel like things like this show. When the deploy is underway on the environments list.

A

I think you have that, though, on the environments dashboard, because it's like running: what's that sorry showing a deploy, is underway on environment list I, think we change this.

C

You propose Oh indicate on the environments basement of my plan using progress, no.

A

I see it's a difference between.

A

Between this view- and this view, yeah, okay.

C

Please, like the latest pipeline yeah, but.

A

If we combine environments page like this page, this this view with the environments dashboard, then we're in shape. We solve that problem yeah because you can toggle between the views, but.

C

If your toggle, you see wanna, see the status because, on the environment on the dashboard, you have the latest deploy the latest environments right. So you know that from the the list view you don't have to see. Ui element: okay, yeah. If you're using the list view the most, you don't get the same type of information, yeah.

A

I am curious, though, that once they're in the same place, if they need to have the same exact information.

C

In the future, we can even allow people to customize what they want to see there yeah that's a good.

B

C

But I think from also from just standard just to make things standardized in the UI mark. Polished I would expect to see the same. The semi-firm issues, okay,.

A

A

From this view, updated, probably is.

A

This should probably be changed to the status indicator.

C

C

They did as he won the last, the last appointment, less employment all deployed and they should be sufficient. I, don't yeah.

A

I, like should be deployed, and then I think that that will help bridge the last time that it was yeah.

B

C

Now this is very similar to what really we did for the bring Jesus page. If you have the chance to look at this more realistically and then look at the workflow make UI updates and break it down into multiple issues. We're gonna be able to fix this there's more consistencies. This pages are so old that even bleeding heavy ones were running different.

A

I know for sure sure, okay, so next steps I, will create those issues for grouping these bugs or experience problems by user story or really I'm gonna create issues for user stories and goals that we want to accomplish with the environments page, and then we can relate the specific issues and scope so that we can make sure that we're, including all of the relevant acceptance criteria, I, think what I'm struggling with right now is being comprehensive in our solutions while being proactive for our design.

A

You know it's like if there, if Jake and Nathan are in the code fixing something in the front end from a bug perspective, it might be easy to just you know, button up.

C

B

Like yes, I know, I know because because.

C

I know that the more changes were making the directly in the front. End kind of I've kind of feel like I, lose the the overview of what the capabilities because then yeah it doesn't happen that often, but we might be start jacking. Sorry, everyone watching this, it's it's like no I get it that I'm, just just unknown like what the product is anymore. I'm.

B

C

That's happening another progressive delivery issues abilities, but as long as we discuss it, I'm fine, let's just do it in the front end, but you know just making sure that yeah. We know this okay.

A

I love it all right. I know that we're like 15 minutes over. Thank you for listening to me and my blabbering I appreciate you, okay, perfect, so I'll scrape these issues, I'll pin you on them and we'll start creating scope for how we want to fix these pages.