Skip to content

Commit 75a2358

Browse files
izadoesdevizadoesdev
committed
feat: better databases page
1 parent 4b18b9e commit 75a2358

File tree

11 files changed

+1629
-1597
lines changed

11 files changed

+1629
-1597
lines changed

‎apps/dashboard/app/(main)/observability/database/[id]/online-advisor/page.tsx‎

Lines changed: 520 additions & 492 deletions
Large diffs are not rendered by default.

‎apps/dashboard/app/(main)/observability/database/[id]/page.tsx‎

Lines changed: 148 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { ColumnDef } from '@tanstack/react-table';
1212
import { use } from 'react';
1313
import { DataTable } from '@/components/analytics/data-table';
1414
import { Badge } from '@/components/ui/badge';
15-
import { Card, CardContent } from '@/components/ui/card';
15+
import { Card } from '@/components/ui/card';
1616
import { useDbConnection } from '@/hooks/use-db-connections';
1717
import { trpc } from '@/lib/trpc';
1818

@@ -333,130 +333,192 @@ export default function DatabasePage({ params }: DatabasePageProps) {
333333

334334
if (isLoadingConnection) {
335335
return (
336-
<Card className="rounded">
337-
<CardContent className="flex items-center justify-center py-12">
336+
<div className="flex h-full flex-col">
337+
<div className="border-b bg-gradient-to-r from-background to-muted/20 px-6 py-6">
338+
<div className="flex items-center gap-4">
339+
<div className="rounded border border-primary/20 bg-primary/10 p-3">
340+
<DatabaseIcon className="h-6 w-6 text-primary" weight="duotone" />
341+
</div>
342+
<div>
343+
<div className="h-8 w-64 animate-pulse rounded bg-muted" />
344+
<div className="mt-2 h-4 w-96 animate-pulse rounded bg-muted" />
345+
</div>
346+
</div>
347+
</div>
348+
<div className="flex min-h-0 flex-1 flex-col items-center justify-center p-6">
338349
<div className="flex items-center gap-2 text-muted-foreground">
339350
<SpinnerIcon className="h-4 w-4 animate-spin" />
340351
<span>Loading database connection...</span>
341352
</div>
342-
</CardContent>
343-
</Card>
353+
</div>
354+
</div>
344355
);
345356
}
346357

347358
if (connectionError) {
348359
return (
349-
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
350-
<CardContent className="pt-6">
351-
<div className="flex items-center gap-3 text-red-600">
352-
<DatabaseIcon className="h-5 w-5" weight="duotone" />
353-
<p className="font-medium">Failed to load database connection</p>
360+
<div className="flex h-full flex-col">
361+
<div className="border-b bg-gradient-to-r from-background to-muted/20 px-6 py-6">
362+
<div className="flex items-center gap-4">
363+
<div className="rounded border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-950">
364+
<DatabaseIcon className="h-6 w-6 text-red-600" weight="duotone" />
365+
</div>
366+
<div>
367+
<h1 className="font-bold text-2xl tracking-tight">
368+
Database Connection
369+
</h1>
370+
<p className="text-muted-foreground text-sm">
371+
Failed to load connection
372+
</p>
373+
</div>
354374
</div>
355-
<p className="mt-2 text-red-600/80 text-sm">
356-
{connectionError.message}
357-
</p>
358-
</CardContent>
359-
</Card>
375+
</div>
376+
<div className="flex min-h-0 flex-1 flex-col items-center justify-center p-6">
377+
<div className="text-center">
378+
<div className="flex items-center gap-3 text-red-600">
379+
<DatabaseIcon className="h-5 w-5" weight="duotone" />
380+
<p className="font-medium">Failed to load database connection</p>
381+
</div>
382+
<p className="mt-2 text-red-600/80 text-sm">
383+
{connectionError.message}
384+
</p>
385+
</div>
386+
</div>
387+
</div>
360388
);
361389
}
362390

363391
if (!connection) {
364392
return (
365-
<Card className="rounded">
366-
<CardContent className="pt-6">
393+
<div className="flex h-full flex-col">
394+
<div className="border-b bg-gradient-to-r from-background to-muted/20 px-6 py-6">
395+
<div className="flex items-center gap-4">
396+
<div className="rounded border border-primary/20 bg-primary/10 p-3">
397+
<DatabaseIcon className="h-6 w-6 text-primary" weight="duotone" />
398+
</div>
399+
<div>
400+
<h1 className="font-bold text-2xl tracking-tight">
401+
Database Connection
402+
</h1>
403+
<p className="text-muted-foreground text-sm">
404+
Connection not found
405+
</p>
406+
</div>
407+
</div>
408+
</div>
409+
<div className="flex min-h-0 flex-1 flex-col items-center justify-center p-6">
367410
<div className="text-center text-muted-foreground">
368411
<DatabaseIcon className="mx-auto mb-4 h-12 w-12" weight="duotone" />
369412
<p className="font-medium">Database connection not found</p>
370413
</div>
371-
</CardContent>
372-
</Card>
414+
</div>
415+
</div>
373416
);
374417
}
375418

376419
return (
377-
<>
378-
{/* Database Stats */}
379-
<div className="space-y-4">
380-
<div className="flex items-center gap-2">
381-
<DatabaseIcon
382-
className="h-5 w-5 text-muted-foreground"
383-
weight="duotone"
384-
/>
385-
<h2 className="font-semibold text-lg">Database Overview</h2>
420+
<div className="flex h-full flex-col">
421+
<div className="border-b bg-gradient-to-r from-background to-muted/20 px-6 py-6">
422+
<div className="flex items-center gap-4">
423+
<div className="rounded-xl border border-primary/20 bg-primary/10 p-3">
424+
<DatabaseIcon className="h-6 w-6 text-primary" weight="duotone" />
425+
</div>
426+
<div>
427+
<h1 className="font-bold text-2xl tracking-tight">
428+
{connection.name}
429+
</h1>
430+
<p className="text-muted-foreground text-sm">
431+
Database connection overview and statistics
432+
</p>
433+
</div>
386434
</div>
387-
388-
<DatabaseStatsOverview
389-
databaseStats={databaseStats}
390-
error={statsError}
391-
isLoading={isLoadingStats}
392-
/>
393435
</div>
394436

395-
{/* Table Stats */}
396-
<div className="space-y-4">
397-
<div className="flex items-center justify-between">
437+
<div className="flex min-h-0 flex-1 flex-col space-y-6 p-6">
438+
{/* Database Stats */}
439+
<div className="space-y-4">
398440
<div className="flex items-center gap-2">
399-
<TableIcon
441+
<DatabaseIcon
400442
className="h-5 w-5 text-muted-foreground"
401443
weight="duotone"
402444
/>
403-
<h2 className="font-semibold text-lg">Table Statistics</h2>
445+
<h2 className="font-semibold text-lg">Database Overview</h2>
404446
</div>
405-
{tableStats && tableStats.length > 0 && (
406-
<Badge className="rounded" variant="secondary">
407-
{tableStats.length} {tableStats.length === 1 ? 'table' : 'tables'}
408-
</Badge>
409-
)}
447+
448+
<DatabaseStatsOverview
449+
databaseStats={databaseStats}
450+
error={statsError}
451+
isLoading={isLoadingStats}
452+
/>
410453
</div>
411454

412-
{isLoadingTables ? (
413-
<div className="rounded border bg-background p-8">
414-
<div className="flex items-center justify-center">
415-
<div className="flex items-center gap-2 text-muted-foreground">
416-
<SpinnerIcon className="h-4 w-4 animate-spin" />
417-
<span>Loading table statistics...</span>
418-
</div>
455+
{/* Table Stats */}
456+
<div className="space-y-4">
457+
<div className="flex items-center justify-between">
458+
<div className="flex items-center gap-2">
459+
<TableIcon
460+
className="h-5 w-5 text-muted-foreground"
461+
weight="duotone"
462+
/>
463+
<h2 className="font-semibold text-lg">Table Statistics</h2>
419464
</div>
465+
{tableStats && tableStats.length > 0 && (
466+
<Badge className="rounded" variant="secondary">
467+
{tableStats.length}{' '}
468+
{tableStats.length === 1 ? 'table' : 'tables'}
469+
</Badge>
470+
)}
420471
</div>
421-
) : tablesError ? (
422-
<div className="rounded border bg-background p-8">
423-
<div className="text-center">
424-
<p className="font-medium text-destructive">
425-
Failed to load table stats
472+
473+
{isLoadingTables ? (
474+
<div className="rounded border bg-background p-8">
475+
<div className="flex items-center justify-center">
476+
<div className="flex items-center gap-2 text-muted-foreground">
477+
<SpinnerIcon className="h-4 w-4 animate-spin" />
478+
<span>Loading table statistics...</span>
479+
</div>
480+
</div>
481+
</div>
482+
) : tablesError ? (
483+
<div className="rounded border bg-background p-8">
484+
<div className="text-center">
485+
<p className="font-medium text-destructive">
486+
Failed to load table stats
487+
</p>
488+
<p className="mt-1 text-muted-foreground text-sm">
489+
{tablesError.message}
490+
</p>
491+
</div>
492+
</div>
493+
) : tableStats && tableStats.length > 0 ? (
494+
<DataTable
495+
columns={tableStatsColumns}
496+
data={tableStats.map((table) => ({
497+
...table,
498+
name: table.tableName, // Required by DataTable
499+
}))}
500+
description={`${tableStats.length} tables found in this database`}
501+
emptyMessage="No tables found in this database"
502+
minHeight={400}
503+
showSearch={true}
504+
title="Database Tables"
505+
/>
506+
) : (
507+
<div className="rounded border bg-background p-12 text-center">
508+
<TableIcon
509+
className="mx-auto mb-4 h-12 w-12 text-muted-foreground"
510+
weight="duotone"
511+
/>
512+
<p className="font-medium text-muted-foreground">
513+
No table statistics available
426514
</p>
427515
<p className="mt-1 text-muted-foreground text-sm">
428-
{tablesError.message}
516+
There are no tables to display for this database connection.
429517
</p>
430518
</div>
431-
</div>
432-
) : tableStats && tableStats.length > 0 ? (
433-
<DataTable
434-
columns={tableStatsColumns}
435-
data={tableStats.map((table) => ({
436-
...table,
437-
name: table.tableName, // Required by DataTable
438-
}))}
439-
description={`${tableStats.length} tables found in this database`}
440-
emptyMessage="No tables found in this database"
441-
minHeight={400}
442-
showSearch={true}
443-
title="Database Tables"
444-
/>
445-
) : (
446-
<div className="rounded border bg-background p-12 text-center">
447-
<TableIcon
448-
className="mx-auto mb-4 h-12 w-12 text-muted-foreground"
449-
weight="duotone"
450-
/>
451-
<p className="font-medium text-muted-foreground">
452-
No table statistics available
453-
</p>
454-
<p className="mt-1 text-muted-foreground text-sm">
455-
There are no tables to display for this database connection.
456-
</p>
457-
</div>
458-
)}
519+
)}
520+
</div>
459521
</div>
460-
</>
522+
</div>
461523
);
462524
}

‎apps/dashboard/app/(main)/observability/database/[id]/performance/_components/performance-charts.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const ResourceConsumptionChart = ({
5454
}));
5555

5656
return (
57-
<div className="rounded-xl border bg-card shadow-sm">
57+
<div className="rounded border bg-card shadow-sm">
5858
<div className="border-b px-6 py-4">
5959
<h3 className="font-semibold text-lg">Resource Consumption</h3>
6060
<p className="text-muted-foreground text-sm">
@@ -125,7 +125,7 @@ export const ResponseTimeChart = ({
125125
}));
126126

127127
return (
128-
<div className="rounded-xl border bg-card shadow-sm">
128+
<div className="rounded border bg-card shadow-sm">
129129
<div className="border-b px-6 py-4">
130130
<h3 className="font-semibold text-lg">Response Times</h3>
131131
<p className="text-muted-foreground text-sm">

0 commit comments

Comments
 (0)