Add progress bar when exporting Applications

[torchiaf]

Fixes #223
Fixes #254

Blocked by #294

Technical Notes

• Latest jszip version 3.10.1 significantly speed ups zip files generation and then download process.
• Feedbacks about the UI implementation are welcome.

Layout

[richard-cox]

I couldn't quite get this to work

• The values and chart bars complete almost straight away
• the images chart
  • remains on zero for a long time
    • We should have some status text before showing the progress bar. that can be replaced when we get the first chunk through
  • when we start getting download progress notifications it moves up to 1/3 or a 1/2 then stops
  • the network request eventually completes (possibly times out at 2mins)
  • nothing else happens (no file download, progress bar stuck

[torchiaf]

I couldn't quite get this to work

• The values and chart bars complete almost straight away

• the images chart

  • remains on zero for a long time

    • We should have some status text before showing the progress bar. that can be replaced when we get the first chunk through

  • when we start getting download progress notifications it moves up to 1/3 or a 1/2 then stops

  • the network request eventually completes (possibly times out at 2mins)

  • nothing else happens (no file download, progress bar stuck

• Values and Charts downloads are instant, so progress bar disappears before showing any progress. We could mock the progress bar here or merge the 3 bars into one and assign a weight to each part of the final final zip file.
• I'm sure it worked at the time this PR was open, so I guess there is some back-end issue. I'll update the backend in the test environment and check again. It was a regression caused by coping all headers in the backend code: Copy response headers through proxied requests ui-backend#35.
  the last commit has fixed the bug.

[torchiaf]

I've merged the progress bars into one, showing also the parts being downloading and the compression phase.

[richard-cox]

click away
cancel should cancel requerst
message for compressing files

Things we should capture in another issue / PR

• modal should be block... so if the user accidentally clicks outside of modal they don't lose the last x minutes of progress
• minor want, clicking cancel will cancel the http request to fetch the image. not sure if this is possible though

[richard-cox]

not sure i picked up on this before, these should be primary colour.

[torchiaf]

primary is gray in the PercentageBar.

[richard-cox]

the issue is that the bar is green when in progress, when it should be the primary colour. once complete we could change it to success / green, though it might be jarring as it'll flash up on screen. if the progress bar shows grey for --primary we should find another colour to show

[torchiaf]

I'll try to change the PercentageBar component

[torchiaf]

I did a couple of adjustments changing the name of content-length header from proxied request.
The x-content-length was removed by be team, this is probably the cause of the issues during your last test @richard-cox .

[richard-cox]

I still don't see the progress bar changing during the image download, only at the end once the request has completed. This matches the state in the backend. We'll go over this in the sync up

As discussed, lets test this in production. Can you create an issue?

It could be that the dev world ui-backend-->epinio instance request takes a long time (far away from each other) ... and client-->ui-backend takes a short time (close to each other). In prod this will be the opposite. We've seen that the progress indicator moves incrementally for the client --> ui-backend, so we might be alright.

[torchiaf]

Thanks @richard-cox , I fixed trhe bar color. I think the last open point is to test the behavior (speed) of downloads,