Show progress status for oras commands

[qweeah]

Problem

As is pointed out in #940 and #893, oras commands might halt when processing data transfer tasks without any user feedback.

Solution

If ORAS user is using a terminal to run the command, we can compose an UI in the terminal and display progress status of the execution.

Goals

• Support progress status output for the following commands
  • oras push
  • oras attach
  • oras pull
  • oras cp
  • oras blob fetch
  • oras blob push
  • oras manifest fetch
  • oras manifest push
• Introduce only necessary and stable (>=1.0.0) dependencies
• Display key information to reflect the progress (TBD: what to display & how to display)
  • Total size
  • Transferred size
  • Percentage
  • Time taken
  • Task status: running or done
  • Progress bar
  • Others: please comment

Non-goals

• Improve output readability: the status format should be similar to v1.0.0
• Provide interactable UI: the output should be read-only. User cannot interact via clicking mouse or hovering over an area
• Support terminal with width less than 80 characters (width of vt100)
• Support non-ANSI characters, e.g. emoji

PoC

I had an implementation in my own fork based on below MVC design:

flowchart LR
subgraph "oras CLI"
    subgraph root
        direction LR
        C[console]
        A[ANSI control]
    end
    
    subgraph progress
        S["Status(model)"]--rendered by-->M["Manager(view)"]
        M-->A
        M-->C
    end
    
    subgraph "tracker(controller)"
        T[Target]--manipulates-->S
        R[Reader]--manipulates-->S
    end
    
    subgraph commands
        push-->T
        attach-->T
        pull-->T
        cp-->T
        bf[blob fetch]-->R
        mf[manifest fetch]-->R
        bp[blob push]-->R
        mp[manifest push]-->R
    end
end

Loading

I cut three releases with different UI:

• spinner: https://github.com/qweeah/oras/releases/tag/v1.2.0-spinner
  

• progress bar: https://github.com/qweeah/oras/releases/tag/v1.2.0-bar
  

• two-line output with progress bar: https://github.com/qweeah/oras/releases/tag/v1.2.0-2line-bar
  (This implementation breaks current output style and split output of one blob into 2 lines)
  

To try out more commands, you may installed via below command

# example for linux/amd64
VERSION="1.2.0-spinner" # 1.2.0-2line or 1.2.0-bar
OSTYPE="linux"
ARCH="amd64"
curl -LO "https://github.com/qweeah/oras/releases/download/v${VERSION}/oras_${VERSION}_${OSTYPE}_${ARCH}.tar.gz"
mkdir -p oras-install/
tar -zxf oras_${VERSION}_*.tar.gz -C oras-install/
sudo mv oras-install/oras /usr/local/bin/oras-spinner
rm -rf oras_${VERSION}_*.tar.gz oras-install/

[TerryHowe]

If we had to choose one, I think I'd slightly prefer spinner

[qweeah]

Can you help elaborate more on why the barred output looks less preferrable?

Also, what would be a good UI in your mind?

[sajayantony]

I think the spinner is more subtle. If the bar were less dense like docker progress bar then maybe it might appeal.

[qweeah]

Docker progress bar requires more horizontal space than oras CLI can offer. If we can create a new line to display the progress bar below the status, then it's doable. I can add another implementation to demo that.

[TerryHowe]

I like the way you minimized the space with the bar and it is more informative, but I like the spinner because you know you have progress without being overwhelmed.

[qweeah]

It's hard to choose a right background color for the progress bar because I don't find any suitable package to deal with terminal theming, so I just use the foreground color, which doesn't look good.

[qweeah]

Added a new implementation which separated the output of progress bar into a newline @sajayantony @TerryHowe any feedback?

[qweeah]

Added another implementation to show NPM-like progress bar

[TerryHowe]

Even though it uses more vertical space, I like that implementation better than the tighter one. I like the npm style one less, but I just haven't done a lot of javascripting!

[FeynmanZhou]

It might be helpful to display the time usage for uploading/downloading each blob in the progress bar.

[qweeah]

Added, please check the demo in below:

[shizhMSFT]

The two-line one LGTM. It would be better if the cells for progress in size, %, and time are aligned.

[qweeah]

Added a new implementation to align the output with instant speed indication.