Add new pipelines UI with promotion information #3510

joshri · 2023-10-17T17:29:07Z

Closes #3312
Closes #3313
Closes #3324

Figma link: https://www.figma.com/file/IVHnM9iyeFWpd11evtY8ux/Weave-GitOps?node-id=19656%3A13129&mode=dev

Faked Manual Pull Request Approval:

Example Video:

PipeUi.mov

How to test locally:

WEGO_EE_PROXY_HOST=https://pipelines.wge.dev.weave.works yarn start with demo01 cluster login

This PR gets the Pipelines UI about as close to the new designs as I can get it with pending backend changes on the way.
Expected remaining work:

flesh out promotion information box (needs error instructions supplied by backend)
add promotion indicators in between environments with dashed lines
add progressive delivery dropdown in targets with canaries
change approve button icon

jpellizzari

Looking good, no major things.

ui/src/components/Pipelines/PipelineDetails/PromotionInfo.tsx

jpellizzari · 2023-10-18T16:15:55Z

ui/src/components/Pipelines/PipelineDetails/Target.tsx

+    ? `${target?.clusterRef?.namespace || 'default'}/${
+        target?.clusterRef?.name
+      }`
+    : configResponse?.data?.managementClusterName || 'undefined';


Do we want the word undefined to appear for the cluster name?

This is some of the old code, I'm very confused by the useGetListConfig stuff in general but I assumed that this literally meant that there's no management cluster. Same as your previous comment though - if it IS somehow a false value we probs shouldn't display any links or anything. @yiannistri do you think showing something like unavailable or cluster not found would be appropriate here?

ui/src/components/Pipelines/PipelineDetails/Target.tsx

jpellizzari · 2023-10-18T16:20:02Z

ui/src/components/Pipelines/PipelineDetails/Target.tsx

+                  : 'alertOriginal'
+              }
+            >
+              LAST APPLIED VERSION: {'V' + workload.lastAppliedRevision || '-'}


Do we want a little v here?

The design has a big V but I'm certainly not against a little v since that's how versions are typically written @mmoulian

Let's apply lower-case v cc @mmoulian

jpellizzari · 2023-10-18T16:25:06Z

ui/src/components/Pipelines/PipelineDetails/Workloads.tsx

+                    <Text bold>Branch:</Text>
+                    <Text> {branch}</Text>
+                    <Text bold>URL:</Text>
+                    <Link to={url}>{url.split('.com/')[1]}</Link>


I am worried this will only work for a narrow subset of git providers. Assuming we are trying to show the word github or gitlab, do we have any code that detects a git provider from a URL?

I actually wanted to split the provider off of the url but we certainly don't have to. The main thing was that there is not a lot of space for the url, and I was hoping to get as close to the repo name as possible.

The main thing was that there is not a lot of space for the url

Let's raise this with our designers and let them know the URL field needs to support like 50 characters or something in that range. We can get creative with ellipses if it overflows.

cc @mmoulian please see previous comment ^^

The main thing was that there is not a lot of space for the url

Let's raise this with our designers and let them know the URL field needs to support like 50 characters or something in that range. We can get creative with ellipses if it overflows.

We can change the layout and put the URL on another line, anyway my column is 268 px (@joshri I don't know if you use the same measurements) and it only supports 24 CH, therefore we need two lines for 50 CH.

jpellizzari · 2023-10-18T16:29:38Z

ui/src/components/Pipelines/PipelineDetails/styles.tsx

+  height: ${cardHeight};
+  color: black;
+  background: ${props =>
+    //use remainder operator to alternate between items in envColors array


Confused by this. Are we trying to assign colors based on the environment, hoping that someone has selected 3 or less?

The design has three colors for the environments, but it's possible to have more than three environments in a pipeline. I decided to just alternate between those three colors in the order displayed in the design, if that makes sense.

The design needs to take the data model into account. The color model falls apart on more than 3 stages of the pipeline.

cc @mmoulian ^^

The design needs to take the data model into account. The color model falls apart on more than 3 stages of the pipeline.

From my point of view, colors have the role of creating distinction between environments and helping the user to identify them more easily. I think if users can only see three columns at a time, it's not a problem that we only have three colors.

@mmoulian Consulted with Yiannis and Michael on this and we agree that, when it comes to adding color to environments, we should use color only to show the environment where the current change is being deployed and not color in any of the other environment columns.

With accessibility on my mind now, I'm thinking that the light yellow would be best so we can produce a higher contrast.

With accessibility on my mind now, I'm thinking that the light yellow would be best so we can produce a higher contrast.

@LappleApple I will check the contrast of each color and tell you how it works.

Thanks @mmoulian. I've suggested that we standardize our scheme https://weaveworks.slack.com/archives/C2YMKB137/p1697634836928619?thread_ts=1697632447.003429&cid=C2YMKB137

mmoulian · 2023-10-19T14:22:40Z

@joshri Thanks for your great work. Only one comment, I know that we style buttons is 2 pick round corner but I would like to these buttons would be different (they are inside a card). Can we do the corner radius 16px or totally rounded? Also change the color according to the design

joshri · 2023-10-19T14:45:45Z

Also change the color according to the design

@mmoulian do you want the look to change when the button is disabled? Or is the plan to have the icon do the heavy lifting there

mmoulian · 2023-10-19T15:33:38Z

Also change the color according to the design

@mmoulian do you want the look to change when the button is disabled? Or is the plan to have the icon do the heavy lifting there

I understood that when we choose Manual approval Pipeline the button is always enabled (for that reason I created only two states enabled and hoover). When we choose Automated Pipeline we don't have button, so we don't need disabled button. (@LappleApple does it correct?)

LappleApple · 2023-10-19T15:44:42Z

@mmoulian That's correct: https://miro.com/app/board/uXjVMFiEhxc=/?moveToWidget=3458764566498460331&cot=14

mmoulian · 2023-10-19T15:55:27Z

@mmoulian That's correct: https://miro.com/app/board/uXjVMFiEhxc=/?moveToWidget=3458764566498460331&cot=14

@LappleApple I'm thinking now. What about the environments? Can the user approve all at the same time? Or do you need to approve one by one? Does it mean that all environments are active at the same time?

LappleApple · 2023-10-19T15:57:26Z

@mmoulian You approve envs one by one. This is a pipeline so as we go from left to right we promote env by env.

joshri · 2023-10-19T18:03:58Z

@LappleApple @mmoulian The approve button will only appear in the case of manual approvals, but my understanding was that there is a case where the env would not be ready for promotion, and the button should be disabled - in the current structure of environments, it happens if the waitingStatus.revision is empty.

mmoulian · 2023-10-20T14:09:34Z

@LappleApple @mmoulian The approve button will only appear in the case of manual approvals, but my understanding was that there is a case where the env would not be ready for promotion, and the button should be disabled - in the current structure of environments, it happens if the waitingStatus.revision is empty.

@joshri; Thanks for bring it up. @LappleApple I think the button must be enabled only when the env is ready to promotion. For example in this case the Stg env has the button disabled

LappleApple · 2023-10-20T14:16:52Z

@mmoulian @joshri Yes, if the user can't start the approval yet then the way you've shown the button in stg is appropriate. Thanks, both.

joshri · 2023-10-24T16:18:56Z

White backgrounds for now as we work out new color scheme:

joshri added enhancement New feature or request area/ui labels Oct 17, 2023

joshri requested review from jpellizzari and opudrovs October 17, 2023 17:29

joshri force-pushed the 3313-pipeline-summary branch 2 times, most recently from fc60712 to 5bbed22 Compare October 17, 2023 17:40

jpellizzari reviewed Oct 18, 2023

View reviewed changes

joshri force-pushed the 3313-pipeline-summary branch from 5bbed22 to f87fe2b Compare October 19, 2023 14:46

joshri force-pushed the 3313-pipeline-summary branch from f87fe2b to 58e4036 Compare October 23, 2023 17:42

joshri added 11 commits October 24, 2023 12:19

some structure

c6261d1

target and promotion info

d8b47cc

import theme colors from oss

395891d

update tests

cb854b4

workloads background and box sizing

c36e351

add branch and url to pr strategies and test

b6f7d58

lint

8d6fb56

snapshots

7b25081

promo button design

03a80d2

add no targets message

188490e

move url to new line

f54341a

joshri added 3 commits October 24, 2023 12:19

small v

710a5ec

small v in tests

c8ed9b4

white bg for envs

d2d27d7

joshri force-pushed the 3313-pipeline-summary branch from c106bb4 to d2d27d7 Compare October 24, 2023 16:20

order

3a87ac6

joshri requested a review from jpellizzari October 24, 2023 16:23

jpellizzari approved these changes Oct 24, 2023

View reviewed changes

full git url text

18443bf

joshri merged commit 2ccd21a into main Oct 24, 2023
10 checks passed

joshri deleted the 3313-pipeline-summary branch October 24, 2023 17:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new pipelines UI with promotion information #3510

Add new pipelines UI with promotion information #3510

joshri commented Oct 17, 2023 •

edited

Loading

jpellizzari left a comment

jpellizzari Oct 18, 2023

joshri Oct 18, 2023

jpellizzari Oct 18, 2023

joshri Oct 18, 2023

LappleApple Oct 19, 2023

jpellizzari Oct 18, 2023

joshri Oct 18, 2023

jpellizzari Oct 18, 2023

LappleApple Oct 19, 2023

mmoulian Oct 19, 2023

jpellizzari Oct 18, 2023

joshri Oct 18, 2023

jpellizzari Oct 18, 2023 •

edited

Loading

LappleApple Oct 19, 2023

mmoulian Oct 19, 2023

LappleApple Oct 19, 2023

mmoulian Oct 19, 2023

LappleApple Oct 19, 2023

mmoulian commented Oct 19, 2023

joshri commented Oct 19, 2023 •

edited

Loading

mmoulian commented Oct 19, 2023

LappleApple commented Oct 19, 2023

mmoulian commented Oct 19, 2023

LappleApple commented Oct 19, 2023

joshri commented Oct 19, 2023

mmoulian commented Oct 20, 2023

LappleApple commented Oct 20, 2023

joshri commented Oct 24, 2023

Add new pipelines UI with promotion information #3510

Add new pipelines UI with promotion information #3510

Conversation

joshri commented Oct 17, 2023 • edited Loading

jpellizzari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jpellizzari Oct 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmoulian commented Oct 19, 2023

joshri commented Oct 19, 2023 • edited Loading

mmoulian commented Oct 19, 2023

LappleApple commented Oct 19, 2023

mmoulian commented Oct 19, 2023

LappleApple commented Oct 19, 2023

joshri commented Oct 19, 2023

mmoulian commented Oct 20, 2023

LappleApple commented Oct 20, 2023

joshri commented Oct 24, 2023

joshri commented Oct 17, 2023 •

edited

Loading

jpellizzari Oct 18, 2023 •

edited

Loading

joshri commented Oct 19, 2023 •

edited

Loading