Skip to content

Commit bed48fd

Browse files
izadoesdevizadoesdev
committed
fix: UI and spacing
1 parent 6f75f3b commit bed48fd

File tree

5 files changed

+25
-145
lines changed

5 files changed

+25
-145
lines changed

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ export default function DatabasePage({ params }: DatabasePageProps) {
336336
// Show loading state while connection is loading
337337
if (isLoadingConnection) {
338338
return (
339-
<div className="mx-auto max-w-[1600px] space-y-4 p-3 sm:p-4 lg:p-6">
339+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
340340
<Card className="rounded">
341341
<CardContent className="flex items-center justify-center py-12">
342342
<div className="flex items-center gap-2 text-muted-foreground">
@@ -351,14 +351,14 @@ export default function DatabasePage({ params }: DatabasePageProps) {
351351

352352
if (connectionError) {
353353
return (
354-
<div className="mx-auto max-w-[1600px] space-y-4 p-3 sm:p-4 lg:p-6">
355-
<Card className="rounded">
354+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
355+
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
356356
<CardContent className="pt-6">
357-
<div className="flex items-center gap-3 text-destructive">
357+
<div className="flex items-center gap-3 text-red-600">
358358
<DatabaseIcon className="h-5 w-5" weight="duotone" />
359359
<p className="font-medium">Failed to load database connection</p>
360360
</div>
361-
<p className="mt-2 text-muted-foreground text-sm">
361+
<p className="mt-2 text-red-600/80 text-sm">
362362
{connectionError.message}
363363
</p>
364364
</CardContent>
@@ -369,7 +369,7 @@ export default function DatabasePage({ params }: DatabasePageProps) {
369369

370370
if (!connection) {
371371
return (
372-
<div className="mx-auto max-w-[1600px] space-y-4 p-3 sm:p-4 lg:p-6">
372+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
373373
<Card className="rounded">
374374
<CardContent className="pt-6">
375375
<div className="text-center text-muted-foreground">
@@ -386,7 +386,7 @@ export default function DatabasePage({ params }: DatabasePageProps) {
386386
}
387387

388388
return (
389-
<div className="mx-auto max-w-[1600px] space-y-6 p-3 sm:p-4 lg:p-6">
389+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
390390
{/* Database Stats */}
391391
<div className="space-y-4">
392392
<div className="flex items-center gap-2">

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const CHART_COLORS = [
6565

6666
function LoadingState() {
6767
return (
68-
<div className="space-y-6">
68+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
6969
<div className="space-y-2">
7070
<Skeleton className="h-8 w-64" />
7171
<Skeleton className="h-4 w-96" />
@@ -98,7 +98,7 @@ function LoadingState() {
9898

9999
function ExtensionNotEnabledState({ connectionId }: { connectionId: string }) {
100100
return (
101-
<div className="space-y-6">
101+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
102102
<div className="space-y-2">
103103
<div className="flex items-center gap-2">
104104
<ChartLineIcon
@@ -533,17 +533,19 @@ export default function PerformancePage({ params }: PerformancePageProps) {
533533

534534
if (!metrics) {
535535
return (
536-
<Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
537-
<WarningIcon className="h-4 w-4 text-red-600" />
538-
<AlertDescription className="text-red-800 dark:text-red-200">
539-
Failed to load performance metrics. Please try again.
540-
</AlertDescription>
541-
</Alert>
536+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
537+
<Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
538+
<WarningIcon className="h-4 w-4 text-red-600" />
539+
<AlertDescription className="text-red-800 dark:text-red-200">
540+
Failed to load performance metrics. Please try again.
541+
</AlertDescription>
542+
</Alert>
543+
</div>
542544
);
543545
}
544546

545547
return (
546-
<div className="space-y-6 p-3 sm:p-4 lg:p-6">
548+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
547549
{/* Header */}
548550
<div className="flex items-center justify-between">
549551
<div>

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

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ interface ExtensionsPageProps {
4545

4646
function LoadingState() {
4747
return (
48-
<div className="mx-auto max-w-6xl space-y-6 p-6">
48+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
4949
<Skeleton className="h-8 w-64" />
5050
<div className="grid gap-4 md:grid-cols-4">
5151
{Array.from({ length: 4 }).map((_, i) => (
@@ -846,7 +846,6 @@ export default function ExtensionsPage({ params }: ExtensionsPageProps) {
846846
installed: extensions.length,
847847
available: availableExtensions.length,
848848
updates: extensions.filter((ext) => ext.needsUpdate).length,
849-
restart: extensions.filter((ext) => ext.requiresRestart).length,
850849
};
851850

852851
const handleInstall = (name: string, schema?: string) => {
@@ -866,7 +865,7 @@ export default function ExtensionsPage({ params }: ExtensionsPageProps) {
866865
};
867866

868867
return (
869-
<div className="mx-auto max-w-6xl space-y-6 p-6">
868+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
870869
{/* Header */}
871870
<div className="space-y-2">
872871
<div className="flex items-center gap-2">
@@ -932,11 +931,6 @@ export default function ExtensionsPage({ params }: ExtensionsPageProps) {
932931
title="Updates"
933932
value={stats.updates}
934933
/>
935-
<StatsCard
936-
icon={<WarningIcon className="h-5 w-5 text-red-600" />}
937-
title="Need Restart"
938-
value={stats.restart}
939-
/>
940934
</div>
941935

942936
{/* Search and Actions */}

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

Lines changed: 3 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ interface ConnectionSettingsPageProps {
4141

4242
function LoadingState() {
4343
return (
44-
<div className="mx-auto max-w-4xl space-y-6 p-6">
44+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
4545
<div className="space-y-2">
4646
<div className="h-8 w-64 animate-pulse rounded bg-muted" />
4747
<div className="h-4 w-96 animate-pulse rounded bg-muted" />
@@ -314,7 +314,6 @@ export default function ConnectionSettingsPage({
314314
const [upgradeDialog, setUpgradeDialog] = useState(false);
315315
const [deleteDialog, setDeleteDialog] = useState(false);
316316
const [success, setSuccess] = useState<string | null>(null);
317-
const [debugUsers, setDebugUsers] = useState<string[]>([]);
318317

319318
const resolvedParams = use(params);
320319
const connectionId = resolvedParams.id;
@@ -331,43 +330,7 @@ export default function ConnectionSettingsPage({
331330
setTimeout(() => setSuccess(null), 5000);
332331
};
333332

334-
// Debug functionality
335-
const cleanupUsersMutation =
336-
trpc.dbConnections.cleanupOrphanedUsers.useMutation({
337-
onSuccess: (data) => {
338-
handleSuccess(data.summary);
339-
// Refresh the user list after cleanup
340-
handleListUsers();
341-
},
342-
onError: (error) => {
343-
console.error('Failed to cleanup users:', error);
344-
},
345-
});
346-
347-
const grantPermissionMutation =
348-
trpc.dbConnections.grantReadAllStatsPermission.useMutation({
349-
onSuccess: (data) => {
350-
handleSuccess(data.message);
351-
},
352-
onError: (error) => {
353-
console.error('Failed to grant permission:', error);
354-
},
355-
});
356-
357-
const handleListUsers = async () => {
358-
try {
359-
const result = await utils.dbConnections.listDatabuddyUsers.fetch({
360-
id: connectionId,
361-
});
362-
setDebugUsers(result.users);
363-
handleSuccess(`Found ${result.users.length} databuddy users`);
364-
} catch (error) {
365-
console.error('Failed to list users:', error);
366-
}
367-
};
368-
369333
const handleDeleteSuccess = () => {
370-
// Redirect to connections list after deletion
371334
window.location.href = '/observability/database';
372335
};
373336

@@ -377,7 +340,7 @@ export default function ConnectionSettingsPage({
377340

378341
if (!connection) {
379342
return (
380-
<div className="mx-auto max-w-4xl p-6">
343+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
381344
<Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
382345
<WarningIcon className="h-4 w-4 text-red-600" />
383346
<AlertDescription className="text-red-800 dark:text-red-200">
@@ -391,7 +354,7 @@ export default function ConnectionSettingsPage({
391354
const isAdmin = connection.permissionLevel === 'admin';
392355

393356
return (
394-
<div className="mx-auto max-w-4xl space-y-6 p-6">
357+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
395358
{/* Header */}
396359
<div className="space-y-2">
397360
<div className="flex items-center gap-2">
@@ -656,85 +619,6 @@ export default function ConnectionSettingsPage({
656619

657620
<Separator />
658621

659-
{/* Debug Section - Only show for admin connections */}
660-
{isAdmin && (
661-
<>
662-
<Card>
663-
<CardHeader>
664-
<CardTitle className="flex items-center gap-2">
665-
<GearIcon className="h-5 w-5" />
666-
Database User Management
667-
</CardTitle>
668-
<CardDescription>
669-
Debug and manage database users created by Databuddy
670-
</CardDescription>
671-
</CardHeader>
672-
<CardContent className="space-y-4">
673-
<div className="flex gap-2">
674-
<Button onClick={handleListUsers} size="sm" variant="outline">
675-
List Users
676-
</Button>
677-
<Button
678-
disabled={cleanupUsersMutation.isPending}
679-
onClick={() =>
680-
cleanupUsersMutation.mutate({ id: connectionId })
681-
}
682-
size="sm"
683-
variant="outline"
684-
>
685-
{cleanupUsersMutation.isPending
686-
? 'Cleaning...'
687-
: 'Cleanup Orphaned Users'}
688-
</Button>
689-
</div>
690-
691-
{debugUsers.length > 0 && (
692-
<div className="rounded border p-3">
693-
<h4 className="mb-2 font-medium text-sm">
694-
Databuddy Users ({debugUsers.length})
695-
</h4>
696-
<div className="space-y-2">
697-
{debugUsers.map((username) => (
698-
<div
699-
className="flex items-center justify-between rounded border p-2 text-sm"
700-
key={username}
701-
>
702-
<div className="flex items-center gap-2">
703-
<code className="rounded bg-muted px-2 py-1 text-xs">
704-
{username}
705-
</code>
706-
<Badge className="text-xs" variant="secondary">
707-
{username.includes('admin') ? 'Admin' : 'Readonly'}
708-
</Badge>
709-
</div>
710-
<Button
711-
className="text-xs"
712-
disabled={grantPermissionMutation.isPending}
713-
onClick={() =>
714-
grantPermissionMutation.mutate({
715-
id: connectionId,
716-
username,
717-
})
718-
}
719-
size="sm"
720-
variant="outline"
721-
>
722-
{grantPermissionMutation.isPending
723-
? 'Granting...'
724-
: 'Grant pg_read_all_stats'}
725-
</Button>
726-
</div>
727-
))}
728-
</div>
729-
</div>
730-
)}
731-
</CardContent>
732-
</Card>
733-
734-
<Separator />
735-
</>
736-
)}
737-
738622
{/* Danger Zone */}
739623
<Card className="border-red-200 dark:border-red-800">
740624
<CardHeader>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export default function DatabasePage() {
168168

169169
if (error) {
170170
return (
171-
<div className="mx-auto max-w-[1600px] p-3 sm:p-4 lg:p-6">
171+
<div className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8">
172172
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
173173
<CardContent className="pt-6">
174174
<div className="flex items-center gap-2">
@@ -190,7 +190,7 @@ export default function DatabasePage() {
190190

191191
return (
192192
<div
193-
className="mx-auto mt-6 max-w-[1600px] space-y-4 p-3 sm:p-4 lg:p-6"
193+
className="mx-auto max-w-[1600px] space-y-6 p-4 sm:p-6 lg:p-8"
194194
ref={pageRef}
195195
>
196196
<DatabasePageHeader

0 commit comments

Comments
 (0)