Skip to content
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

Progress indicators in Argo CD UI #4227

Closed
alexmt opened this issue Sep 1, 2020 · 9 comments
Closed

Progress indicators in Argo CD UI #4227

alexmt opened this issue Sep 1, 2020 · 9 comments
Labels
enhancement New feature or request
Milestone

Comments

@alexmt
Copy link
Collaborator

alexmt commented Sep 1, 2020

Summary

Argo CD UI provides the ability to edit/sync application, change project settings, generate token etc. In a real-life environment, each operation might take 1~2 seconds.

Motivation

The UI should show a progress indicator to provide visual feedback that the operation is in progress.

Proposal

Sync button that triggers app synchronization already has good progress icon:

Screen Shot 2020-09-01 at 12 48 30 PM

Buttons that require progress indicator:

  • Enable/disable auto-sync buttons:

image

  • Save button of EditablePanel component (used in multiple places).

image

@alexmt alexmt added the enhancement New feature or request label Sep 1, 2020
@jessesuen jessesuen added this to the v1.8 milestone Sep 16, 2020
@keithchong
Copy link
Contributor

keithchong commented Sep 17, 2020

Hi Alex/Jesse, where do you want to see the progress indicator? Currently the sliding panel disappears after the sync button is pressed.

@alexmt
Copy link
Collaborator Author

alexmt commented Sep 21, 2020

Hello @keithchong ,

Probably the description is confusing. The progress indicator should be shown while PATCH/PUT API request is in progress.

The Synchronize button click on sync panel triggers /api/v1/applications/apps/sync that starts sync operation. The sync panel is closed after /api/v1/applications/apps/sync is completed. If Argo CD has a lot of applications then the request might take 1~2 seconds. Due to this delay we need to provide some visual feedback. Please see attached video recoding. Screen Recording 2020-09-21 at 1.27.10 PM.zip

Adding list of Argo CD pages that has the same issue and requires progress indicator.

@keithchong , does it make sense?

@keithchong
Copy link
Contributor

Hi @alexmt , yes, it makes sense. I'm also going to add the spinner to the Add Repo connection sliding panel.

ConnectToRepoUsingSSH

@keithchong
Copy link
Contributor

Yeah, I was looking at the code for the sync operation. If that sync panel did not disappear (I made it so it did not hide), then the spinner on the synchronize button could potentially cause confusion because it could imply it's for the whole sync operation, and it would stop, whereas the sync spinner on the application page was still spinning. I realized they are for two different things.

@keithchong
Copy link
Contributor

Demo of enable/disable auto sync

enableDisableAutoSync.zip

@keithchong
Copy link
Contributor

Demo of save

saveAppChanges.zip

@keithchong
Copy link
Contributor

Demo of connecting repo using HTTPS

connectRepoUsingHttps.zip

@alexmt
Copy link
Collaborator Author

alexmt commented Sep 22, 2020

All three changes look great! Thank you @keithchong . Looking forward to the PR

@keithchong
Copy link
Contributor

Hi @alexmt , could you assign this to me? I created the PR. Let me know if there could be other places you want a progress indicator. (I also looked at implementing a progress bar)

keithchong added a commit to keithchong/argo-cd that referenced this issue Sep 24, 2020
Signed-off-by: Keith Chong <kykchong@redhat.com>
alexmt pushed a commit that referenced this issue Sep 24, 2020
Signed-off-by: Keith Chong <kykchong@redhat.com>
@alexmt alexmt closed this as completed Oct 9, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants