ui: show correct zone config

[nkodali]

Previously on the table detail page in DB Console,
the default zone config for the db was shown, rather
than any table level settings. Additionally,
constraints and lease preferences were not being
serialized properly, displaying as
"...Object object..." This fixes both of those bugs.

The display for the zone configuration statement is
additionally updated to show the actual SQL statement
to replicate the zone config in the SQL shell.
Previously an invalid statement "CONFIGURE ZONE USING..."
was displayed.

Resolves #57896.
See also: https://github.com/cockroachlabs/support/issues/737.
See also: https://github.com/cockroachlabs/support/issues/727.

Release note (bug fix): Fixed a bug introduced in v20.1 in
DB Console where incorrect zone configuration values were
shown on the table details page and constraints and lease
preferences were not displayed.

Release note (ui change): Updates the table details page
to show table specific zone configuration values when set,
show constraints and lease preferences, and display
a valid statement to re-configure zone configuration
for that table.

[cockroach-teamcity]

This change is 

[dhartunian]

Thank you for making this fix! I tested with the other support issue we had and it does fix it as well! Just added a note to also fix some of the zone config serialization while you're at it.

Run eslint and make sure Goland is configured to autoformat w/ it.

I'd add a second release note for db console. My understanding is that it's fine to have multiple release note entries if your PR covers multiple categories.

Reviewed 1 of 3 files at r1.
Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @nkodali)

---

pkg/ui/src/views/shared/components/sql/highlight.tsx, line 65 at r1 (raw file):

        <br />
        <span className="hljs-label">constraints = ['</span>
        <span className="hljs-built_in">{String(zoneConfig.constraints)}</span>

Could we update this to print the proper constraints instead of constraints = ['[object Object],[object Object]'],. There are only two fields here and it should look like:

demo@127.0.0.1:26257/movr> SHOW ZONE CONFIGURATION FOR TABLE users;
    target    |                           raw_config_sql
--------------+---------------------------------------------------------------------
  TABLE users | ALTER TABLE users CONFIGURE ZONE USING
              |     range_min_bytes = 16777216,
              |     range_max_bytes = 67108864,
              |     gc.ttlseconds = 9000,
              |     num_replicas = 3,
              |     constraints = '{+region=us-east1: 1, +region=us-west1: 1}',
              |     lease_preferences = '[[+region=us-east1], [+region=us-west1]]'
(1 row)

---

pkg/ui/src/views/shared/components/sql/highlight.tsx, line 70 at r1 (raw file):

        <span className="hljs-label">lease_preferences = [['</span>
        <span className="hljs-built_in">
          {String(zoneConfig.lease_preferences)}

Same comment here as above, would be nice to get the serialization bug out of the way as well here. Example up above.

[dhartunian]

thanks for doing this!

Reviewed 6 of 8 files at r2.
Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @dhartunian and @nkodali)

---

pkg/server/admin.go, line 612 at r2 (raw file):

		const rawConfigSqlColName = "raw_config_sql"
		if len(rows) != 1 {
			return nil, s.serverErrorf("show zone configuration not available.")

Is it possible that we could have a perfectly valid table with an empty zone config?

[nkodali]

TFTR. Updated to more gracefully handle empty zone config.

Reviewable status: complete! 0 of 0 LGTMs obtained (and 1 stale) (waiting on @dhartunian)

---

pkg/server/admin.go, line 612 at r2 (raw file):

Previously, dhartunian (David Hartunian) wrote…

Is it possible that we could have a perfectly valid table with an empty zone config?

My limited understanding of zone configs is that there is always a default. Despite that, I think it's safer to return empty string in the case this query gives no results, rather than a server error. Updated to do that.

---

pkg/ui/src/views/shared/components/sql/highlight.tsx, line 65 at r1 (raw file):

Previously, dhartunian (David Hartunian) wrote…

Could we update this to print the proper constraints instead of constraints = ['[object Object],[object Object]'],. There are only two fields here and it should look like:

demo@127.0.0.1:26257/movr> SHOW ZONE CONFIGURATION FOR TABLE users;
    target    |                           raw_config_sql
--------------+---------------------------------------------------------------------
  TABLE users | ALTER TABLE users CONFIGURE ZONE USING
              |     range_min_bytes = 16777216,
              |     range_max_bytes = 67108864,
              |     gc.ttlseconds = 9000,
              |     num_replicas = 3,
              |     constraints = '{+region=us-east1: 1, +region=us-west1: 1}',
              |     lease_preferences = '[[+region=us-east1], [+region=us-west1]]'
(1 row)

Done.

---

pkg/ui/src/views/shared/components/sql/highlight.tsx, line 70 at r1 (raw file):

Previously, dhartunian (David Hartunian) wrote…

Same comment here as above, would be nice to get the serialization bug out of the way as well here. Example up above.

Done.

[dhartunian]

You've got a frontend TS error:

16:07:00
    src/views/databases/containers/databaseTables/databaseTables.fixtures.ts(47,3): error TS2322: Type '{ detailsAndStatsLoaded: () => true; name: string; id: number; numColumns: number; numIndices: number; rangeCount: number; createStatement: string; grants: { user: string; privileges: string[]; }[]; numReplicas: number; mvccSize: { ...; }; physicalSize: number; }[]' is not assignable to type 'TableInfo[]'.
16:07:00
      Property 'configureZoneStatement' is missing in type '{ detailsAndStatsLoaded: () => true; name: string; id: number; numColumns: number; numIndices: number; rangeCount: number; createStatement: string; grants: { user: string; privileges: string[]; }[]; numReplicas: number; mvccSize: { ...; }; physicalSize: number; }' but required in type 'TableInfo'.

[nkodali]

bors r=dhartunian

[craig]

Build failed:

• GitHub CI (Cockroach)

[nkodali]

bors r=dhartunian

[craig]

Build succeeded:

• GitHub CI (Cockroach)