feat: Add volume usage progress bar by khatibomar · Pull Request #423 · unikraft-cloud/cli

khatibomar · 2026-07-18T15:12:54Z

Fixes #373
Closes #373

craciunoiuc

Some comments

craciunoiuc · 2026-07-20T15:13:07Z

+	emptyColor := ansi.NewStyle().ForegroundColor(ansi.IndexedColor(238)).String()
+	reset := ansi.NewStyle().ForegroundColor(nil).String()
+
+	dots := []rune{'⣀', '⣄', '⣤', '⣦', '⣶', '⣷', '⣿'}


I wonder if this format can be found somewhere in bubbletea or smth else? I've seen it before

All these vars should also be defined as const / private internal var.

Copilot

Pull request overview

Adds colored volume-usage sparklines to volume listings.

Changes:

Introduces a generic sparkline usage type.
Derives volume usage from size and free capacity.
Updates volume output and help golden files.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
`internal/types/quota.go`	Implements usage ratio and sparkline rendering.
`internal/cmd/volumes.go`	Adds and populates the volume usage field.
`internal/cmd/testdata/TestOutput/volumes`	Updates expected volume output.
`cmd/unikraft/testdata/TestHelp/volumes`	Adds usage to documented fields.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

khatibomar · 2026-07-24T11:23:52Z

Added a custom compare for custom types like sparkling line.

It would be nice to support >,<,>=,<= operators but I seen that it already have an issue

#374

Signed-off-by: ayn <ayn.khatib@gmail.com>

craciunoiuc · 2026-07-24T14:41:52Z

@khatibomar can you close the copilot comments that you resolved/ignored so they don't get in the way 🙏

craciunoiuc

Some sanity comments my side. Feel free to comment or ignore

I think it looks fine already 🙏

I think after we can get @jedevc also in here for a final opinion

craciunoiuc · 2026-07-24T14:43:55Z

+	case ratio <= 0.5:
+		color = ansi.NewStyle().ForegroundColor(colors.Success).String()
+	case ratio <= 0.8:
+		color = ansi.NewStyle().ForegroundColor(colors.Warning).String()
+	default:
+		color = ansi.NewStyle().ForegroundColor(colors.Error).String()
+	}


Just checking, did you compare these colors with the quota bars in the quota command? Same for the percentages where these change

I think the quota have only a blue bar, it doesn't have a color based on percentage.

Ah sorry, it means we removed that in the end, all good I think, but I'll tag maybe also @jedevc

Do we want percentage colouring or do we remove colors here also?

Hm, we should have quotas coloring 🎉

var ( emptyColor = // slate safeColor = // green warningColor = // amber > 60% dangerColor = // red-rose > 80%

Also note light-dark theme variations, e.g.: https://github.com/unikraft/cli/blob/prod-staging/internal/tui/selector/colors.go#L15-L17

craciunoiuc · 2026-07-24T14:46:16Z

+	const width = 10
+


could the width be easily made variable? Aka, min 5, max 10 width, like the quotas

if you mean metro_quotas.go they are set to be depending on the screen size, I think same thing can be done in here and limited between [5,10] range

Yes exactly, I'm thinking if it would make sense here also to make it variable, so smaller terminals also work

jedevc · 2026-07-27T10:44:33Z

 state:        available
 size:         50MiB
 free:         10MiB
+usage:        ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB


nit: I wonder if maybe we should show the number first, then the number first?

Suggested change

usage: ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB

usage: 40MiB/50MiB ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀

Or maybe even as a percentage?

Suggested change

usage: ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB

usage: 80% ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀

hmmm prefer other way - since the bar is fixed width and looks more aligned in a table

Fair point. We could always " " pad it if it was a percentage.

I think I more care about the percentage than the side it's on, though I would argue that having the most significant info (the number) first is useful.

That works, i think separating % and actual usage with the bar in the middle makes it easier to read:

METRO NAME STATE FREE USAGE CREATED fra my-volume1 available 10MiB 50% ⣿⣿⣿⣿⣿⣀⣀⣀⣀⣀ 50MiB/100MiB just now fra my-volume2 available 10MiB 100% ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100MiB/100MiB just now

in contrast together feels noisy:

METRO NAME STATE FREE USAGE CREATED fra my-volume1 available 10MiB ⣿⣿⣿⣿⣿⣀⣀⣀⣀⣀ 50% 50MiB/100MiB just now fra my-volume2 available 10MiB ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100% 100MiB/100MiB just now

Edit: would argue we can reduce it further by removing duplicate MiB and removing the FREE column:

METRO NAME STATE USAGE CREATED fra my-volume1 available 50% ⣿⣿⣿⣿⣿⣀⣀⣀⣀⣀ 50/100MiB just now fra my-volume2 available 100% ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100/100MiB just now

imo, i would keep usage as just percent + bar. while the free + size appear as columns after it. makes it more obvious that they can be selected.

that empty space in FREE kinda when disk full annoys me a bit

Oh that is super odd. Is that because IsEmpty is applying…? We should fix that. We should display 0 here.

But yes, that is generally correct and what I was hoping for!

Let's hope that none of the users relying on output of this CLI column shape/ordering, their scripts will 🍳

Yeah, that's okay 🙂 users who care about this should be using -ojson.

jedevc · 2026-07-27T10:45:29Z

 state:        available
 size:         50MiB
 free:         10MiB
+usage:        ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB


❯ unikraft volume inspect foo -oquiet -f usage ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 0B/10MiB

Quiet mode should show the direct underlying value, ideally as a percentage, see above.

jedevc · 2026-07-27T10:52:13Z

+// Comparer is an interface for types that provide a custom comparable value.
+type Comparer interface {
+	CompareValue() any
+}


I don't think we should do this interface. Things should implement cmp.Compare to do the comparison.

Somewhere else I had the idea that we should have a custom Render implementation for rendering to the screen, but for filtering, we would just use .String() or .MarshalText or whatever instead of doing the weird post-ASCII filtering.

cmp.Compare doesn't have an interface unfortunately it's func Compare[T Ordered](x, y T) int where Ordered is

type Ordered interface { ~int | ~int8 | ~int16 | ~int32 | ~int64 | ~uint | ~uint8 | ~uint16 | ~uint32 | ~uint64 | ~uintptr | ~float32 | ~float64 | ~string }

Altho, I did implemente compare-like method on sparkline and it did work!

I believe part of the reflection code catches this method and use it for sorting.

Well it's actually just sorting as string, it just happen to be true, as soon I added percentage at first it broke XD

jedevc · 2026-07-27T10:53:34Z

+func (u SparklineUsage[T]) String() string {
+	if u.Total == 0 {
+		return "N/A"
+	}


Essentially, as mention above, this method would just become Render, while String would be implemented to be just the raw percentage.

This would be a bit of a refactor in a few other places, but the code would then feel much neater I think 🎉

jedevc · 2026-07-27T10:54:03Z

+	case ratio <= 0.5:
+		color = ansi.NewStyle().ForegroundColor(colors.Success).String()
+	case ratio <= 0.8:
+		color = ansi.NewStyle().ForegroundColor(colors.Warning).String()
+	default:
+		color = ansi.NewStyle().ForegroundColor(colors.Error).String()
+	}


Hm, we should have quotas coloring 🎉

craciunoiuc · 2026-07-27T12:56:08Z

What do you mean quotas coloring you told me to remove the colors some time ago 😭 😭 😭 😭

jedevc · 2026-07-27T13:01:28Z

What do you mean quotas coloring you told me to remove the colors some time ago 😭 😭 😭 😭

I seem to remember suggesting making the color bars have reasonable boundaries, there were some very magic numbers in there as I remember it 🤔 #337 (comment)

I don't remember suggesting removing them entirely, but maybe I did - if so, woops.

craciunoiuc · 2026-07-27T16:09:04Z

Ah, maybe I got it wrong, eh too late now :D

nderjung · 2026-07-27T20:12:08Z

+	}
+
+	emptyColor := ansi.NewStyle().ForegroundColor(colors.Slate500).String()
+	reset := ansi.NewStyle().ForegroundColor(nil).String()


when using lipgloss we should not need to do any resets if strings are correctly wrapped (Rendered) since it handles it for us.

Aha one would think so. I think there's a reason to not do this though - lipgloss sends resets for everything, not just the styles you set. I seem to remember that this does super annoying things in combo with the diff viewer when doing edits for example.

I am not sure that I understand this one, I haven't worked on bubbletea before, I think I have to toy around with it.

So bubbletea's colors are different from using ansi - we do want to actually use ansi directly. lipgloss also has colors, but the way it does colors interacts badly with our custom diff view that shows on edit. You can give it a go, and see what happens 🙂

nderjung · 2026-07-27T20:12:52Z

+// SparklineUsage represents a used/total pair for quotas, rendered as a colored sparkline.
+type SparklineUsage[T numeric] struct {
+	Used  T `field:",long"`
+	Total T `field:",long"`
+}


Suggested internal package internal/tui/sparkline -> can then be used in other places?

Also actually this is technically not a sparkline (my mistake for calling this in the original issue - sparklines are timeseries data), better to call it "meter" or "guage" or "usagebar" ?

Signed-off-by: ayn <ayn.khatib@gmail.com>

khatibomar · 2026-07-30T16:20:11Z

@jedevc I addressed the comments, I think it's ready for re-review.

craciunoiuc · 2026-07-31T14:07:19Z

I mean, I like it, so unless someone has an objection, I think we should merge? 👀

jedevc · 2026-07-31T15:17:43Z

Will review again on Monday - but yes, we can aim to merge soon.

khatibomar force-pushed the feat/volume-usage-progress branch from f799cd3 to 4be53be Compare July 18, 2026 15:19

craciunoiuc requested review from Copilot, craciunoiuc and jedevc July 20, 2026 15:10

Copilot started reviewing on behalf of craciunoiuc July 20, 2026 15:11 View session

craciunoiuc reviewed Jul 20, 2026

View reviewed changes

Copilot AI reviewed Jul 20, 2026

View reviewed changes

Comment thread internal/types/quota.go Outdated

Comment thread internal/types/quota.go Outdated

Comment thread internal/types/quota.go Outdated

Comment thread internal/cmd/volumes.go

khatibomar force-pushed the feat/volume-usage-progress branch 2 times, most recently from 1b17f34 to da055c5 Compare July 24, 2026 11:51

feat: Add volume usage progress bar

00346ab

Signed-off-by: ayn <ayn.khatib@gmail.com>

khatibomar force-pushed the feat/volume-usage-progress branch from a729717 to 00346ab Compare July 24, 2026 14:07

craciunoiuc reviewed Jul 24, 2026

View reviewed changes

jedevc reviewed Jul 27, 2026

View reviewed changes

nderjung reviewed Jul 27, 2026

View reviewed changes

khatibomar added 10 commits July 30, 2026 15:45

refactor: Use Compare-like method on sparkline

8df589c

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Introduce new env var to control sparkline width

5f2ba55

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Hide free field on short view

3788588

Signed-off-by: ayn <ayn.khatib@gmail.com>

feat: Add percentage in usage

8b5d5e8

Signed-off-by: ayn <ayn.khatib@gmail.com>

fix: Sorting bar is done string wise instead on int value

1955189

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Rename Sparkline into meter and move into tui pkg

b188c56

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Remove dead code

a76ed80

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Move free/size into standalone columns

e67f697

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Pull variables into package private fields

d004118

Signed-off-by: ayn <ayn.khatib@gmail.com>

refactor: Move private fields to the top of pkg

9fb759a

Signed-off-by: ayn <ayn.khatib@gmail.com>

fix: Display meaningful 0 value

a05caf1

Signed-off-by: ayn <ayn.khatib@gmail.com>

jedevc self-requested a review July 30, 2026 22:30

	usage: ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB
	usage: 40MiB/50MiB ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀

	usage: ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ 40MiB/50MiB
	usage: 80% ⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀

Uh oh!

Conversation

khatibomar commented Jul 18, 2026 • edited by nderjung Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

craciunoiuc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nderjung Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

khatibomar commented Jul 24, 2026

Uh oh!

craciunoiuc commented Jul 24, 2026

Uh oh!

craciunoiuc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jedevc Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nderjung Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khatibomar Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khatibomar Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

khatibomar commented Jul 18, 2026 •

edited by nderjung

Loading

nderjung Jul 27, 2026 •

edited

Loading

jedevc Jul 27, 2026 •

edited

Loading

nderjung Jul 27, 2026 •

edited

Loading

khatibomar Jul 30, 2026 •

edited

Loading

khatibomar Jul 30, 2026 •

edited

Loading

nderjung Jul 27, 2026 •

edited

Loading

nderjung Jul 27, 2026 •

edited

Loading

khatibomar commented Jul 30, 2026 •

edited

Loading