fix:
--CHANGED VIEW ALL TABLES UI --CHANGED NODES UI
This commit is contained in:
george committed
1 parent
abbfdf66f4
commit
45d9e22ae2
3 files changed
+207
-18
No files matched your search
+187
@@ -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%;
|
||||
}
|
||||
+1
-1
@@ -646,7 +646,7 @@ function Workspace({ page: activePage }: { page: PageId | 'node-details' | 'larg
|
||||
</section>
|
||||
)}
|
||||
{activePage === 'dead-tuples' && clusterDetails && (
|
||||
<section className="content-panel">
|
||||
<section className="content-panel all-tables-page">
|
||||
{nodeId && clusterDetails.nodes.some((node) => node.uuid === nodeId) ? (
|
||||
<NodeDeadTuples
|
||||
key={`dead-tuples-page/${clusterId}/${nodeId}`}
|
||||
|
||||
+19
-17
@@ -139,7 +139,7 @@ export default function NodeDeadTuples({ nodeId, nodeName, clusterId, detailed =
|
||||
const visibleTables = data?.tables.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE) ?? []
|
||||
|
||||
return (
|
||||
<section className="database-connections" aria-labelledby="dead-tuples-heading">
|
||||
<section className={`database-connections${detailed ? ' all-tables-detail' : ''}`} aria-labelledby="dead-tuples-heading">
|
||||
<div className="page-header">
|
||||
<div>
|
||||
{detailed
|
||||
@@ -160,23 +160,25 @@ export default function NodeDeadTuples({ nodeId, nodeName, clusterId, detailed =
|
||||
</div>
|
||||
{loading && <p role="status">{status}</p>}
|
||||
{error && <p className="status-message error" role="alert">{error}</p>}
|
||||
<div className="database-connection-metric">
|
||||
<h3>{detailed ? 'Total dead tuples' : 'Total tables'}</h3>
|
||||
<strong>{data ? (detailed ? data.total_dead_tuples : data.table_count).toLocaleString() : '—'}</strong>
|
||||
{!detailed && <Link to={`${nodePath}/dead-tuples`}>View all tables</Link>}
|
||||
</div>
|
||||
{detailed && data && (
|
||||
<div className="database-connection-metrics">
|
||||
<div className="database-connection-metric">
|
||||
<h3>Total table size (MB)</h3>
|
||||
<strong>{formatMb(data.total_table_size_mb)}</strong>
|
||||
</div>
|
||||
<div className="database-connection-metric">
|
||||
<h3>Total table size (bytes)</h3>
|
||||
<strong>{data.total_table_size_bytes.toLocaleString()}</strong>
|
||||
</div>
|
||||
<div className={detailed ? 'database-connection-metrics' : undefined}>
|
||||
<div className="database-connection-metric">
|
||||
<h3>{detailed ? 'Total dead tuples' : 'Total tables'}</h3>
|
||||
<strong>{data ? (detailed ? data.total_dead_tuples : data.table_count).toLocaleString() : '—'}</strong>
|
||||
{!detailed && <Link to={`${nodePath}/dead-tuples`}>View all tables</Link>}
|
||||
</div>
|
||||
)}
|
||||
{detailed && data && (
|
||||
<>
|
||||
<div className="database-connection-metric">
|
||||
<h3>Total table size (MB)</h3>
|
||||
<strong>{formatMb(data.total_table_size_mb)}</strong>
|
||||
</div>
|
||||
<div className="database-connection-metric">
|
||||
<h3>Total table size (bytes)</h3>
|
||||
<strong>{data.total_table_size_bytes.toLocaleString()}</strong>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{detailed && data && (data.tables.length === 0 ? <p>No tables found.</p> : (
|
||||
<>
|
||||
<div className="nodes-table-wrap">
|
||||
|
||||
Reference in new issue
Block a user