New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix(visual start) Make tasks in starting stage to appear parallel. #2705
Fix(visual start) Make tasks in starting stage to appear parallel. #2705
Conversation
16c87ae
to
ba0ecf9
Compare
ba0ecf9
to
6729b14
Compare
6729b14
to
219d6d5
Compare
219d6d5
to
93ec7f3
Compare
@abhinandan13jan was verifying the changes, one observation does task name should be part of the tooltip as it used to be earlier? Before Fix: After Fix: Task name Blank tooltip may as well appear as below NOTE: Before fix screenshots are from cluster directly and after fix is from this PR. Tooltip doesn't seem changed in this PR but wanted to highlight it. |
@invincibleJai I cant really figure out why you see changes in the tooltip area but that isn't something this PR should affect |
@abhinandan13jan yes you are right and sorry I got confused same I mentioned in note. Wanted to highlight tooltip behavior not sure if as per ask from UXD or an issue.
|
@abhinandan13jan rebase with master and push again |
There are some UI work still needed here. Maybe even some UX (cc @serenamarie125). Parallel tasks are shown stacking vertically, but they seem to also implicitly expect there to be a node to the left and right. This is not the case for the Note: We are likely seeing the lack of the horizontal line leaving the "hello-world-1" node because it originates from the following node - of which is not in this example. Should we be looking at just the pills stacking without lines for this example? Please check with UX @abhinandan13jan |
Hey guys, this particular fix deals with changing the data structure only. If there are requirements to change the visual part/css stuff, we will have to look into it in a separate PR. I rebased the branch with master. |
@abhinandan13jan please target this PR to 4.3 and rebase as needed. UX has suggested we go with no unnecessary lines when showing parallel tasks. So if no tasks are preceding, then no lines going in from the left; likewise, no tasks following up means no lines either. AKA only lines between pills and no orphaned lines or pills. We should have 3 example states to test the style changes:
|
@serenamarie125 feel free to add anything else if I omitted something or if you have follow-up comments. |
97f18f8
to
fd146f2
Compare
right: 0; | ||
transform: translateX(100%); | ||
//connect each task | ||
&:not(:first-child) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Next three blocks of code are duplicated on top of the file as well, we could avoid this using extends
@abhinandan13jan when there is series of parallel tasks each grouped based on common "afterTask" identifiers, the desired UX would be to change the connectors a bit to include more space - similar to columns 2 & 3 in the mock below: |
fd146f2
to
901281b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great - just one small css thing.
} | ||
|
||
&__stage { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You close and then re-open &__stage
- recommend just removing these lines.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated
@@ -10,9 +10,8 @@ import { mockPipelinesJSON } from './pipeline-test-data'; | |||
describe('pipeline-utils ', () => { | |||
it('For first pipeline there should be 2 stages of length [0:[1],1:[2]]', () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noticed one other thing - the test name should change as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated
901281b
to
2d61b3c
Compare
/retest |
@abhinandan13jan The connectors are slightly off, apart from that code changes looks good to me |
2d61b3c
to
0a41c27
Compare
@karthikjeeyar Updated |
/lgtm |
/approve |
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: abhinandan13jan, andrewballantyne, christianvogt The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
/retest |
/retest Please review the full test history for this PR and help us cut down flakes. |
/retest |
/retest Please review the full test history for this PR and help us cut down flakes. |
Fixes: https://jira.coreos.com/browse/ODC-1844
before fix:
post fix: