Storage Redesign Summary/Storage Dashboard Mockup

[dszidi]

PREFACE

Greetings TrueNAS users! The UI team at iX Systems would like to share some new designs centered around the main Storage section of the UI. We'd love to get some constructive community feedback on our ideas and thought Github Discussions would be a great place to do it. Before I post any images, I need to provide a little background information so you can better understand what you're looking at.

Our main goal with this redesign effort, is to make things more useful and more intuitive. To accomplish this, we needed to reevaluate how functionality is organized. We took stock of the current functionality, and tried to sort the tasks into categories. We found that almost all the storage management related tasks can be organized into two main categories.

1. Data Management (Datasets, ZFS Encryption, Snapshots etc),
2. Device Management (Pools, VDEVs, Disks etc).

These categories are the basis for our new proposed architecture. Essentially we're proposing replacing the storage and status pages with these pages

• Storage Dashboard
• Datasets Page
• Devices Page

STORAGE DASHBOARD

The purpose of this dashboard is to give users a quick glance into their storage situation so users can quickly determine if something requires their attention.

Unused Resources

We start with an "Unused Resources" section at the top. This is where the system shows any unassigned disks. The user can click on the "Add to Storage" button to begin adding those devices to their system. When clicked, a modal enumerates their disk inventory and the user can decide to either create a new pool or add disks to an existing pool. The button then forwards the user to the appropriate form where they can make their disk selections and complete their changes.

Pools

Next is a section for each pool on the system. The design shows TANK which is in a good state, and TANK2 which has some problems. Each pool section starts with a header containing the pool name on the left, and pool actions on the right. Below the header are four cards.

• Topology
• Usage
• ZFS Health
• Disk Health

While most of these are self explanatory, note that the Topology card describes each VDEV type using a string. If the user is following best practices, then this string sufficiently describes the configuration. If we look at TANK2's Topology card, we can see an example of what a suboptimal configuration looks like. If the configuration involves cases of mixed disk sizes or mixed VDEV capacities, the UI provides a message describing what is suboptimal about the configuration. At this point the user can click "Manage Devices" to get to the Devices page and make changes. We feel this is a better alternative to trying to describe a potentially complex configuration.

With all this said, we're not perfect and we've tried our best to cover all the bases. If you feel there is anything that can be improved with this Storage Dashboard design, please leave your constructive feedback by responding to this thread. Thank you!

PS. Don't forget to also check out the discussion threads for the other two pages

• Datasets Page Discussion
• Devices Page Discussion

[stavros-k]

This looks BEAUTIFUL!
They only thing that I'm not so fan, is the bright RED. If it would change to something easier (like orange, or not so bright red anyway), that would be awesome!

[PrivatePuffin]

Slightly darker tone would be best...
And going from blue -> orange -> red as well...

[Qouo]

Wow, looks great. The redesign will really give TrueNAS the extra nudge of modern!

Thanks for putting this out guys!

[dszidi]

Thanks for the feedback! We're taking notes.

I also want to remind everybody that there are also two more threads for the Datasets page and Devices page mockups.
Please review those at the links below

• Datasets Page Mockup
• Devices Page Mockup

[dak180]

I would be interested to see how this UI deals with reflowing due to horizontal space constraints.

[denysbutenko]

Hi @dak180. There are some demos from recent PR on how it looks at this stage. It may be changed in the future. If you have suggestions, please let us know.

Kapture.2022-06-13.at.14.57.37.mp4

Kapture.2022-06-13.at.15.16.15.mp4

[dak180]

@denysbutenko that looks usable on a computer but I am unsure how well that would work on a phone.

[PrivatePuffin]

@dak180 There are a lot of issues with phone compatibility as is.
I personally consider the TrueNAS GUI "Phone Incompatible" because of it...

[AlexHunterCodes]

Some parts of the UI are responsive, but so many screens just assume you're using a large 16:9 monitor horizontally, and don't even work if you vertically split your screen to look at docs or something.

Despite all the work that went into rebuilding the GUI in Angular, it's so disappointing that it doesn't work well even on a small desktop display at times, let alone a a large tablet or a phone. The ACLs screen springs to mind.

I'd really hope this screen hides and collapses things more intelligently than just flowing the columns under each other. There is so much empty space on that screen, yet the dataset list scrolls horizontally? Why not make the tree list indent responsive to container width?

Do you really expect users on 1080p monitors or larger to zoom out their browser just to see the full width of the dataset table? Really?

[frznfngrs]

Looks nice. Though I feel the snapshots UI needs some real help. Especially with the now constant automatic snapshot creation from "Apps"

[PrivatePuffin]

Looks nice. Though I feel the snapshots UI needs some real help. Especially with the now constant automatic snapshot creation from "Apps"

That's mostly just a single exception that needs to be added.

[jacobohpea]

This looks awesome!

Is it a rule if Usage is in warning that the status icon should be ❌ instead of a purple ⚠️ with low capacity?
I think it's a bit confusing to think usage has errored or is bad for a warning like you're running out of stuff to use.

[AlexHunterCodes]

The current meanings are a bit confusing, particularly the purple warning triangle meaning "unoptimal".

I'd stick with convention and say red ❌ indicates "error" (pool offline or faulted), amber ⚠️ indicates "warning" (degraded, low capacity, checksum errors, SMART alerts), green ✅ indicates everything is good, and white ℹ️ for "information". These could be coloured circles or something instead of symbols, although shapes/symbols are more colourblind-friendly.

A sub-optimal pool with mixed drive sizes or vdevs with no redundancy could be considered a type of warning or information, and could be amber or white. Hard to say definitively.

[robloh]

Absolutely 100% agree with this. Red immediately screams errors must address now and purple is just hard to see and non-standard. The above color scheme makes way more sense to me. Yellow warning triangles, red X's for errors.

For me the topology is the least interesting thing to look at as it would (or should) rarely change so for me that could be moved to the last column or removed completely (from this page).

[q5sys]

Just some minor points I noticed today. There are some actions which are somewhat counter intuitive.
Example: If you create an encrypted pool and you want to change the encryption options from key to passphrase on the pool... you have to go into dataset even though there aren't any datasets on the pool.
The pool gets listed as a dataset on the datasets page even though its not a dataset, any additional pools made later also get listed as datasets. It took me about 15 minutes to figure out to change the pool encryption you have to open the datasets page.

To edit the compression settings on a pool, you open the dataset page and then edit the "Dataset Details".
Another example is that if you want to add zvols to a pool, you have to do so on the datasets page.

[undsoft]

That's actually correct from technical point of view as far it was explained to me. The confusion now is on the Create Pool step where it says "Pool encryption". I think we used to have pool-level encryption, but now we have encryption on datasets (including root dataset).

[Adrian-at-CrimsonAzure]

Sorry to necro this thread, but it's literally the only thing that comes up when Googling "Mixed VDEV Capacities".

Where exactly does it tell you the source of this error? Nothing happens when hovering and I'm confused why I'm getting it because it's a bog standard 2x9 RAIDZ2 pool with identical drives. Is it because of the odd number of drives in an even parity environment?

[undsoft]

Sorry, this is not the best place to ask this. Please try https://www.truenas.com/community/ or https://discord.com/invite/truenas