sql, config: improve cascade zone config ux

[awoods187]

@jseldess and I tested out #30611 today.

It's a bit confusing that you cannot distinguish directly between hard coded entries and entries that cascade from their parent. For example, test2.public.t1 doesn't display a value for num_replicas. If we consider the #replicas chart, we can count that it is six like it's parent test2. We should show something like num_replicas=default or num_replicas=test2 num_replicas or in some way show the user what the value is as well as distinguish for the user that it's a cascaded value and not a hard coded entry.

[awoods187]

Related to #28901

[awoods187]

We should also considering adding a warning denoting that set values won't cascade based upon default

[vilterp]

I've thought a bit about how to show this on the data dist. page (the same ideas can be applied to the CLI as well). This is a similar problem to what frontend devs face when understanding the relationship between their CSS and their HTML. In both, there's:

• A tree (In DB: schema objects. In browser: HTML DOM nodes)
• A set of rules, each of which matches a set of tree nodes and applies properties to it (DB: zone configs. Browser: CSS rules)

The data dist. page currently shows those the tree and the set of rules. What it lacks is an indication of the mapping between them. To explore this mapping, we need a UI which allows the user to answer a few questions:

• For a given node in the schema tree (e.g. a database, a table, a partition):
  • for each property (e.g. num_replicas, gc_ttl)
    • what is the property's value? (e.g. 3 replicas, 24 hours)
    • which zone config assigned it that value?
    • which other zone configs were overridden by that zone config?
• (optionally) For a given zone config:
  • Which nodes does it apply to?
  • Which other nodes override it?

Chrome devtools solves the first set of questions (going from node to set of rules), but not the second. In Chrome devtools, you can click on a node in the DOM inspector, and use the "computed style" pane to see the CSS rule that each property is coming from, and which other ones it overrode. I think something similar would be appropriate here, but it needs design… cc @piyush-singh