Thanks to visit codestin.com
Credit goes to github.com

Skip to content

After submitting workspace create, give an indication of status/progress #2020

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

Closed
ketang opened this issue Jun 3, 2022 · 13 comments · Fixed by #3133
Closed

After submitting workspace create, give an indication of status/progress #2020

ketang opened this issue Jun 3, 2022 · 13 comments · Fixed by #3133
Assignees
Labels
needs decision Needs a higher-level decision to be unblocked. site Area: frontend dashboard

Comments

@ketang
Copy link
Contributor

ketang commented Jun 3, 2022

Problem Statement

Currently after you initiate build of a workspace, you are taken to the /workspaces/<uuid> view. On the former, there's no indication that anything is happening other than a tiny status indicator.

Why do you want this feature?

Less effort to see what's going on.

Are there any workarounds to get this functionality today?

Laboriously clicking on the row in the timeline corresponding to my current build.

Definition of Done

Two alternatives (maybe more)

- You should instead be taken to the /builds/<uuid> view.
- Some kind of progress or status indicator (that works) to show the user progress is happening

As per discussion below:
Implement the following design:
Screen Shot 2022-07-22 at 2 51 39 PM

AC

  • When clicked in the action button like "Start" the button should go into a loading state.
  • During the loading state, we should display a cancel button, which is an icon with a tooltip.
  • For accessibility, this cancel button should be aria-labeled.
  • During the canceling state, we should display the loading state for it without the cancel button.
  • Try to refactor our loading button to achieve this new design
  • Use existing tooltip component
  • Use existing loading spinner
@presleyp
Copy link
Contributor

presleyp commented Jun 3, 2022

I think this needs discussion about whether this is desired (it takes you away from the page with the links you'll use when the build is done) so I'm adding the needs-decision label.

@presleyp presleyp added the needs decision Needs a higher-level decision to be unblocked. label Jun 3, 2022
@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jun 3, 2022

As a user, I would like to be sent to the workspace page and not to the log one 🤔. What we could do is make the status more explicit, but redirecting to the build log does not look "best" IMO.

@ketang
Copy link
Contributor Author

ketang commented Jun 3, 2022

It doesn't have to be the build log page, but it's confusing to me that you initiate an action and are then just...? How about a progress bar or the build log in a modal then?

@ketang
Copy link
Contributor Author

ketang commented Jun 4, 2022

Or maybe a tiny build log that just shows the last n lines of the build log in the timeline view (where n is small, like 5). Maybe it's open by default for any still-active jobs and closed for any completed jobs. In both cases it could still take you to the complete log with a click. Maybe also the timeline view should have some "last activity" or something indicating the last time there was output from the job (definitely wandering some from the original idea here).

@f0ssel f0ssel added the site Area: frontend dashboard label Jun 6, 2022
@kylecarbs kylecarbs changed the title Feat: after create workspace go to build log After create workspace go to build log Jun 7, 2022
@misskniss
Copy link

Am I correct that if we abstract out the prescriptive approach here that we want:

A visual indication in the UI of what is happening with the build for the workspace being created.

This may not need to be a full page redirect. We should discuss further.

@ketang
Copy link
Contributor Author

ketang commented Jun 7, 2022

Yeah, I think the most important thing is to show things are happening and progressing. The actual view and level of detail are less important as long as they successfully communicate that.

@tjcran tjcran changed the title After create workspace go to build log After submitting workspace create, give an indication of status/progress Jun 9, 2022
@misskniss misskniss mentioned this issue Jul 19, 2022
20 tasks
@Kira-Pilot
Copy link
Member

@ketang @misskniss is this a duplicate of #2020?

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

erm... this IS #2020, so... yes and no?

@Kira-Pilot
Copy link
Member

Kira-Pilot commented Jul 20, 2022

Sorry, I'm tired! Is this a duplicate of #3025? I'd love to move forward with the designs @BrunoQuaresma proposed in that ticket.

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

I don't think it's quite the same. My intention here was not to indicate what the workplace status was but to let the user know that a change to the workspace is happening and progressing. Showing a "Starting" or similar label helps a little bit, but doesn't communicate that progress is being made as opposed to something being stuck or broken.

@BrunoQuaresma
Copy link
Collaborator

IMO what looks best:

  • When clicked in the action button like "Start" the button should go into a loading state.
  • During the loading state, we should display a cancel button. To keep it visually clean, I think an icon button + tooltip is enough but I'm not against having a label too.
  • During the canceling state, we should display the loading state for it without the cancel button.

Screen Shot 2022-07-21 at 10 48 37

Implementation considerations:

  • The regular loading button only shows the spinner but I think in this case, the text would be very helpful as well. So we may need a new component or refactor the one we have.
  • The tooltip style is just a mock thing, we should use the existing one. The same for the spinner and colors.

@Kira-Pilot
Copy link
Member

@BrunoQuaresma wow, thanks for looking at that so quickly! I would be fine with using just an icon without a label given this is a compound button. I can make sure we aria-label appropriately.

@ketang What do you think? Would implementation of the above design resolve this ticket?

@ketang
Copy link
Contributor Author

ketang commented Jul 22, 2022

I think this will work well for indicating business more visibly. In the happiest world, the state of the progress indicator would be derived from the actual progress of the job, but that's a very first world kind of improvement, and I don't think that level of fanciness is justified right now.

@BrunoQuaresma what have you thought about with respect to using color?

@misskniss misskniss removed this from the Enterprise MVP milestone Jul 22, 2022
Kira-Pilot added a commit that referenced this issue Jul 22, 2022
Kira-Pilot added a commit that referenced this issue Jul 25, 2022
* show progress indicator within workspace dropdown

resolves #2020

* wrote tests

* fix loading button

* PR feedback

* added stories for dropdown content

* PR feedbac
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs decision Needs a higher-level decision to be unblocked. site Area: frontend dashboard
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants