From 45d9e22ae24b47ba705fb38ec4ea06f1ef1ed74a Mon Sep 17 00:00:00 2001 From: George Date: Tue, 29 Sep 2026 17:06:21 +0530 Subject: [PATCH] fix: --CHANGED VIEW ALL TABLES UI --CHANGED NODES UI --- src/App.css | 187 +++++++++++++++++++++++++++++++++++++++++ src/App.tsx | 2 +- src/NodeDeadTuples.tsx | 36 ++++---- 3 files changed, 207 insertions(+), 18 deletions(-) diff --git a/src/App.css b/src/App.css index a404137..2343246 100644 --- a/src/App.css +++ b/src/App.css @@ -1111,3 +1111,190 @@ grid-column: auto; } } + +/* Keep the all-tables view aligned with the compact node dashboard. */ +.main-content:has(.all-tables-page) { + padding: 0.6%; +} + +.all-tables-page { + width: 100%; + max-width: none; + container-type: inline-size; + font-size: 75%; +} + +.all-tables-detail .page-header { + flex-wrap: wrap; + gap: 0 0.6%; + margin-bottom: 0.5%; +} + +.all-tables-detail .page-header > div:first-child { + min-width: 0; + overflow-wrap: anywhere; +} + +.all-tables-detail h1 { + font-size: clamp(1.25rem, 2.2cqw, 1.75rem); +} + +.all-tables-detail .database-connection-metrics { + grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); + gap: 0 0.6%; + margin-bottom: 0.4%; +} + +.all-tables-detail .database-connection-metric { + min-width: 0; + gap: 0; + padding: 1.5% 2%; + margin-bottom: 1%; + overflow-wrap: anywhere; +} + +.all-tables-detail .database-connection-metric h3 { + font-size: clamp(0.625rem, 0.8cqw, 0.7rem); + line-height: 1.25; +} + +.all-tables-detail .database-connection-metric strong { + font-size: clamp(0.9rem, 1.3cqw, 1.15rem); + line-height: 1.2; + font-variant-numeric: tabular-nums; +} + +.all-tables-detail .secondary-button { + min-height: 2.2em; + padding: 1% 3%; + font-size: clamp(0.65rem, 0.9cqw, 0.75rem); +} + +.all-tables-detail .nodes-table th, +.all-tables-detail .nodes-table td { + padding: 0.35% 0.6%; +} + +.all-tables-detail .nodes-table caption { + padding: 0.35% 0.6%; + text-align: left; +} + +.all-tables-detail nav.page-actions { + align-items: center; + margin-top: 0.5%; +} + +.all-tables-detail { + margin-bottom: 0; +} + +.all-tables-detail .page-actions { + gap: 0 2%; +} + +.all-tables-detail .page-header > .page-actions { + flex: 0 0 auto; + width: max-content; + max-width: 100%; + flex-wrap: nowrap; +} + +.all-tables-detail .secondary-button { + white-space: nowrap; +} + +.all-tables-detail .database-connection-metric h3 { + margin-bottom: 0.75%; +} + +.all-tables-detail .status-message { + margin-bottom: 0.5%; + padding: 0.35% 0.6%; +} + +/* Compact Nodes overview and registration form. */ +.main-content:has(.nodes-page) { + padding: 0.6%; +} + +.nodes-page { + width: 100%; + container-type: inline-size; + font-size: 75%; +} + +.nodes-page .page-header { + flex-wrap: wrap; + gap: 0 0.6%; + margin-bottom: 0.5%; +} + +.nodes-page h1 { + font-size: clamp(1.25rem, 2.2cqw, 1.75rem); +} + +.nodes-page .page-actions { + flex: 0 1 40%; + gap: 0 2%; +} + +.nodes-page .primary-button, +.nodes-page .secondary-button, +.nodes-page .danger-button { + min-height: 2.2em; + padding: 1% 3%; + font-size: clamp(0.65rem, 0.9cqw, 0.75rem); + white-space: nowrap; +} + +.nodes-page .nodes-table th, +.nodes-page .nodes-table td { + padding: 0.35% 0.6%; +} + +.nodes-page .nodes-table .danger-button { + padding: 1% 6%; +} + +.nodes-page .register-form { + margin-bottom: 0.5%; + padding: 0.8%; +} + +.nodes-page .form-grid { + gap: 0 1%; +} + +.nodes-page .form-field { + min-width: 0; + gap: 0; + margin-bottom: 1.5%; +} + +.nodes-page .form-field span { + margin-bottom: 0.5%; + font-size: clamp(0.65rem, 0.9cqw, 0.75rem); +} + +.nodes-page .form-field input { + min-width: 0; + min-height: 2.2em; + padding: 0.5% 1.5%; + font-size: clamp(0.75rem, 1cqw, 0.85rem); +} + +.nodes-page .form-actions { + gap: 0 1%; + margin-top: 0.5%; +} + +.nodes-page .status-message, +.nodes-page .table-state { + padding: 0.35% 0.6%; + font-size: inherit; +} + +.nodes-page .status-message { + margin-bottom: 0.5%; +} diff --git a/src/App.tsx b/src/App.tsx index 8f7f84d..04c91ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -646,7 +646,7 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' | 'larg )} {activePage === 'dead-tuples' && clusterDetails && ( -
+
{nodeId && clusterDetails.nodes.some((node) => node.uuid === nodeId) ? ( +
{detailed @@ -160,23 +160,25 @@ export default function NodeDeadTuples({ nodeId, nodeName, clusterId, detailed =
{loading &&

{status}

} {error &&

{error}

} -
-

{detailed ? 'Total dead tuples' : 'Total tables'}

- {data ? (detailed ? data.total_dead_tuples : data.table_count).toLocaleString() : '—'} - {!detailed && View all tables} -
- {detailed && data && ( -
-
-

Total table size (MB)

- {formatMb(data.total_table_size_mb)} -
-
-

Total table size (bytes)

- {data.total_table_size_bytes.toLocaleString()} -
+
+
+

{detailed ? 'Total dead tuples' : 'Total tables'}

+ {data ? (detailed ? data.total_dead_tuples : data.table_count).toLocaleString() : '—'} + {!detailed && View all tables}
- )} + {detailed && data && ( + <> +
+

Total table size (MB)

+ {formatMb(data.total_table_size_mb)} +
+
+

Total table size (bytes)

+ {data.total_table_size_bytes.toLocaleString()} +
+ + )} +
{detailed && data && (data.tables.length === 0 ?

No tables found.

: ( <>