Lack of progress indication of container image download

[gbraad]

When downloading a container image, you are only informed about the success. There is no intermediate progress indication. This is essential for our usecase where the podman console view is used on a desktop.

Originally posted by @gbraad in crc-org/tray-electron#135 (comment)

[gbraad]

This is related to containers/podman#12341

[jelly]

With the new compatMode flag we now get:

build podman

go build ./cmd/podman
./podman --log-level=info system service -t 0

[jelle@t14s][~/projects/cockpit-podman]%curl -X POST --unix-socket /run/user/1000/podman/podman.sock 'http://nothing/v1.12/libpod/images/pull?compatMode=true&reference=ghcr.io%2Fjelly%2Farchlinux-testing%3Alatest'
{"status":"Pulling fs layer","progressDetail":{},"id":"f3b338fc3939"}
{"status":"Download complete","progressDetail":{},"id":"f3b338fc3939"}
{"status":"Pulling fs layer","progressDetail":{},"id":"7fe39ea01966"}
{"status":"Pulling fs layer","progressDetail":{},"id":"7d09c204e3fa"}
{"status":"Download complete","progressDetail":{},"id":"7d09c204e3fa"}
{"status":"Pulling fs layer","progressDetail":{},"id":"c7f166852091"}
{"status":"Download complete","progressDetail":{},"id":"c7f166852091"}
{"status":"Pulling fs layer","progressDetail":{},"id":"5f5c4ebabbcc"}
{"status":"Download complete","progressDetail":{},"id":"5f5c4ebabbcc"}
{"status":"Pulling fs layer","progressDetail":{},"id":"5b3b92bf92c6"}
{"status":"Pulling fs layer","progressDetail":{},"id":"fb44a21e5e50"}
{"status":"Download complete","progressDetail":{},"id":"fb44a21e5e50"}
{"status":"Pulling fs layer","progressDetail":{},"id":"a9bf854c480d"}
{"status":"Download complete","progressDetail":{},"id":"a9bf854c480d"}
{"status":"Pulling fs layer","progressDetail":{},"id":"1d247c3418df"}
{"status":"Download complete","progressDetail":{},"id":"1d247c3418df"}
{"status":"Pulling fs layer","progressDetail":{},"id":"e856cf663ca5"}
{"status":"Pulling fs layer","progressDetail":{},"id":"ac2271e5082c"}
{"status":"Pulling fs layer","progressDetail":{},"id":"88ef2220d00e"}
{"status":"Download complete","progressDetail":{},"id":"e856cf663ca5"}
{"status":"Downloading","progressDetail":{"current":52988319,"total":264518435},"progress":"[==========\u003e                                        ]  52.99MB/264.5MB","id":"7fe39ea01966"}
{"status":"Downloading","progressDetail":{"current":44448776,"total":139513803},"progress":"[===============\u003e                                   ]  44.45MB/139.5MB","id":"5b3b92bf92c6"}
{"status":"Downloading","progressDetail":{"current":6031789,"total":13877160},"progress":"[=====================\u003e                             ]  6.032MB/13.88MB","id":"ac2271e5082c"}
{"status":"Downloading","progressDetail":{"current":27134372,"total":62286415},"progress":"[=====================\u003e                             ]  27.13MB/62.29MB","id":"88ef2220d00e"}
{"status":"Downloading","progressDetail":{"current":100977055,"total":264518435},"progress":"[===================\u003e                               ]    101MB/264.5MB","id":"7fe39ea01966"}
{"status":"Downloading","progressDetail":{"current":69024776,"total":139513803},"progress":"[========================\u003e                          ]  69.02MB/139.5MB","id":"5b3b92bf92c6"}
{"status":"Downloading","progressDetail":{"current":13306285,"total":13877160},"progress":"[===============================================\u003e   ]  13.31MB/13.88MB","id":"ac2271e5082c"}
{"status":"Download complete","progressDetail":{},"id":"ac2271e5082c"}
{"status":"Downloading","progressDetail":{"current":61917604,"total":62286415},"progress":"[=================================================\u003e ]  61.92MB/62.29MB","id":"88ef2220d00e"}
{"status":"Download complete","progressDetail":{},"id":"88ef2220d00e"}
{"status":"Downloading","progressDetail":{"current":153176479,"total":264518435},"progress":"[============================\u003e                      ]  153.2MB/264.5MB","id":"7fe39ea01966"}
{"status":"Downloading","progressDetail":{"current":109198344,"total":139513803},"progress":"[=======================================\u003e           ]  109.2MB/139.5MB","id":"5b3b92bf92c6"}
{"status":"Download complete","progressDetail":{},"id":"5b3b92bf92c6"}
{"status":"Downloading","progressDetail":{"current":211143071,"total":264518435},"progress":"[=======================================\u003e           ]  211.1MB/264.5MB","id":"7fe39ea01966"}
{"status":"Download complete","progressDetail":{},"id":"7fe39ea01966"}
{"status":"Pulling fs layer","progressDetail":{},"id":"4d579b560a66"}
{"status":"Download complete","progressDetail":{},"id":"4d579b560a66"}
{"status":"Download complete","progressDetail":{},"id":"4d579b560a66"}

Instead of:

[jelle@t14s][~/projects/cockpit-podman]%curl -X POST --unix-socket /run/user/1000/podman/podman.sock 'http://nothing/v1.12/libpod/images/pull?reference=ghcr.io%2Fjelly%2Farchlinux-testing%3Alatest'
{"stream":"Trying to pull ghcr.io/jelly/archlinux-testing:latest...\n"}
{"stream":"Getting image source signatures\n"}
{"stream":"Copying blob sha256:f3b338fc39395d198fe90b549f191a2d99e8c0b0328f81619b921f46a7f3d7d3\n"}
{"stream":"Copying blob sha256:c7f166852091dde35009c8cfda98102a532a95a3c34b06960c5c5d45191cfa0f\n"}
{"stream":"Copying blob sha256:5b3b92bf92c6305a2606b9c8cfe856dd2e1863500bdf118a3a7de6992a28b92b\n"}
{"stream":"Copying blob sha256:7d09c204e3fa555e7a2ef47e7cc1399a2be894ecf2e37b0c65a9b89aaa533f02\n"}
{"stream":"Copying blob sha256:7fe39ea01966944ef4a6e4b3d2881a484167ff8200d10d85243256f0223e2d15\n"}
{"stream":"Copying blob sha256:5f5c4ebabbcc1fa715f69faea38445183baedeafc9e31b25b9eadbd3b8b0f966\n"}
{"stream":"Copying blob sha256:fb44a21e5e500288abb09efa457ea6a2894b51fb6b663b29f9478844f1b45772\n"}
{"stream":"Copying blob sha256:1d247c3418df553c019c233a9713ecf8c6d00b3e3dab44e200af707724688a2c\n"}
{"stream":"Copying blob sha256:a9bf854c480d94c6d4668be2725539a59f86638decea02b5c099a74528546d5f\n"}
{"stream":"Copying blob sha256:e856cf663ca54a12e1c7078980944a84d8a1f00a275e8b8eb4257fcf0f5e72d8\n"}
{"stream":"Copying blob sha256:ac2271e5082cbd336a27d13e4b286ff9faf885af1dbf73835e3f0f165329d45e\n"}
{"stream":"Copying blob sha256:88ef2220d00eed7c82909723c964ef0da582092cb88848fe6af22cf65b4d84dc\n"}
{"stream":"Copying config sha256:4d579b560a6653a487a287862486db7358663bc58ef3bafee3c72909703c92e5\n"}
{"stream":"Writing manifest to image destination\n"}
{"images":["4d579b560a6653a487a287862486db7358663bc58ef3bafee3c72909703c92e5"],"id":"4d579b560a6653a487a287862486db7358663bc58ef3bafee3c72909703c92e5"}

It's still not ideal, but we can give some sort of progress bar / percentage now. @garrett how should this look? According to PF we should have a Progress element, but note that it's a bit murky as after the download complete event podman still does something which takes a few milliseconds here.

Update: going from:

{"status":"Downloading","progressDetail":{"current":259422848,"total":264518435},"progress":"[=================================================\u003e ]  259.4MB/264.5MB","id":"7fe39ea01966"}

To: (last line)

{"status":"Download complete","progressDetail":{},"id":"4d579b560a66"}

Takes about ~ 5 seconds if I just count them by hand. So a progressbar is not something we want to show, it's going to be buggy.

https://www.patternfly.org/design-foundations/usage-and-behavior/#displaying-progress

[garrett]

I made a radial progress spinner last week. This week, I extended it, so we can have it be hollow and also more properly antialiased.

https://codepen.io/garrett/pen/ZEwJPdp

Perhaps we could implement something like this and share it with PatternFly upstream, so we can have a determinate spinner (would be new, with a specific percentage, like my demo) as well as the indeterminate one (like what's there).

Therefore, we could then have it be part of the download button, but it could graphically display a percentage without having to have a typical progress bar.

What do you think?

[gbraad]

Jelle, I'll see what the Podman Desktop team will do. i also raised this issue for them and we have since discussed it a few times. not sure what we settled on anymore. will reference the issue here to confirm their solution.

[jelly]

Jelle, I'll see what the Podman Desktop team will do. i also raised this issue for them and we have since discussed it a few times. not sure what we settled on anymore. will reference the issue here to confirm their solution.
…
On Tue, Nov 14, 2023, 20:56 Garrett LeSage @.> wrote: I made a radial progress spinner last week. This week, I extended it, so we can have it be hollow and also more properly antialiased. https://codepen.io/garrett/pen/ZEwJPdp [image: screenshot of the linked demo] https://user-images.githubusercontent.com/10246/282780604-890f7a59-af33-4d09-a38e-4ac816cdfb69.png Perhaps we could implement something like this and share it with PatternFly upstream, so we can have a determinate spinner (would be new, with a specific percentage, like my demo) as well as the indeterminate one (like what's there). Therefore, we could then have it be part of the download button, but it could graphically display a percentage without having to have a typical progress bar. What do you think? — Reply to this email directly, view it on GitHub <#912 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAAOZXGFOSJZDX6YIPHKO3YENS7BAVCNFSM5N5NNNLKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBRGAYTKNBSG44Q . You are receiving this because you were mentioned.Message ID: @.>

I've contacted the podman team on matrix with my findings there and they are working on a better endpoint. So I've postponed working on this until there is something better.