NORY-14: add status display to dashboard root page

dashboard/src/app/page.tsx

@@ -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>
+    );
 }

dashboard/src/components/ui/badge.tsx

@@ -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',
             },
         },