markus/next-ory
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 1 Packages Wiki Activity Actions

NORY-14: add status display to dashboard root page

Browse source
This commit is contained in:
Markus Thielker 2024-12-01 16:31:00 +01:00
parent 9ee7da3a6c
commit fb50c55e4a
No known key found for this signature in database
2 changed files with 81 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
dashboard/src/app/page.tsx
View file

@ -1,3 +1,81 @@
import { getHydraMetadataApi, getKratosMetadataApi } from '@/ory/sdk/server';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
export default async function RootPage() {
return <></>;
const kratosMetadataApi = await getKratosMetadataApi();
const kratosVersion = await kratosMetadataApi
.getVersion()
.then(res => res.data.version)
.catch(() => '');
const kratosStatusData = await fetch(process.env.ORY_KRATOS_ADMIN_URL + '/health/alive');
const kratosStatus = await kratosStatusData.json() as { status: string };
const kratosDBStatusData = await fetch(process.env.ORY_KRATOS_ADMIN_URL + '/health/ready');
const kratosDBStatus = await kratosDBStatusData.json() as { status: string };
const hydraMetadataApi = await getHydraMetadataApi();
const hydraVersion = await hydraMetadataApi
.getVersion()
.then(res => res.data.version)
.catch(() => '');
const hydraStatusData = await fetch(process.env.ORY_KRATOS_ADMIN_URL + '/health/alive');
const hydraStatus = await hydraStatusData.json() as { status: string };
const hydraDBStatusData = await fetch(process.env.ORY_KRATOS_ADMIN_URL + '/health/ready');
const hydraDBStatus = await hydraDBStatusData.json() as { status: string };
return (
<div className="flex flex-col space-y-4">
<div>
<p className="text-3xl font-bold leading-tight tracking-tight">Software Stack</p>
<p className="text-lg font-light">See the list of all applications in your stack</p>
</div>
<div className="flex flex-row space-x-4">
<Card className="flex-1">
<CardHeader>
<CardTitle>
Ory Kratos
</CardTitle>
<CardDescription>
Version {kratosVersion}
</CardDescription>
</CardHeader>
<CardContent className="space-x-1">
<Badge variant={kratosStatus.status === 'ok' ? 'success' : 'destructive'}>
Kratos {kratosStatus.status.toUpperCase()}
</Badge>
<Badge variant={kratosStatus.status === 'ok' ? 'success' : 'destructive'}>
Database {kratosDBStatus.status.toUpperCase()}
</Badge>
</CardContent>
</Card>
<Card className="flex-1">
<CardHeader>
<CardTitle>
Ory Hydra
</CardTitle>
<CardDescription>
Version {hydraVersion}
</CardDescription>
</CardHeader>
<CardContent className="space-x-1">
<Badge variant={kratosStatus.status === 'ok' ? 'success' : 'destructive'}>
Hydra {hydraStatus.status.toUpperCase()}
</Badge>
<Badge variant={kratosStatus.status === 'ok' ? 'success' : 'destructive'}>
Database {hydraDBStatus.status.toUpperCase()}
</Badge>
</CardContent>
</Card>
<div className="flex-1"></div>
<div className="flex-1"></div>
</div>
</div>
);
}

2
dashboard/src/components/ui/badge.tsx
View file

@ -14,6 +14,8 @@ const badgeVariants = cva(
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
success:
'border-transparent bg-emerald-600 text-white hover:bg-emerald-600/80',
outline: 'text-foreground',
},
},