feat: add dashboard page with tenant overview and KPI stats
Replaces placeholder DashboardPage with a full implementation: tenant name + tier badge, KPI strip (environments, total apps, running, stopped), environment list with per-env app counts, and a recent deployments placeholder. Uses EnvApps helper component to fetch per-environment app data without violating hook rules. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -1,3 +1,221 @@
|
||||
export function DashboardPage() {
|
||||
return <div>Dashboard</div>;
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
EmptyState,
|
||||
KpiStrip,
|
||||
Spinner,
|
||||
} from '@cameleer/design-system';
|
||||
import { useAuthStore } from '../auth/auth-store';
|
||||
import { useTenant, useEnvironments, useApps } from '../api/hooks';
|
||||
import { RequirePermission } from '../components/RequirePermission';
|
||||
import type { EnvironmentResponse, AppResponse } from '../types/api';
|
||||
|
||||
// Helper: fetches apps for one environment and reports data upward via effect
|
||||
function EnvApps({
|
||||
environment,
|
||||
onData,
|
||||
}: {
|
||||
environment: EnvironmentResponse;
|
||||
onData: (envId: string, apps: AppResponse[]) => void;
|
||||
}) {
|
||||
const { data } = useApps(environment.id);
|
||||
useEffect(() => {
|
||||
if (data) {
|
||||
onData(environment.id, data);
|
||||
}
|
||||
}, [data, environment.id, onData]);
|
||||
return null;
|
||||
}
|
||||
|
||||
function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
|
||||
switch (tier?.toLowerCase()) {
|
||||
case 'enterprise': return 'success';
|
||||
case 'pro': return 'primary';
|
||||
case 'starter': return 'warning';
|
||||
default: return 'primary';
|
||||
}
|
||||
}
|
||||
|
||||
export function DashboardPage() {
|
||||
const navigate = useNavigate();
|
||||
const tenantId = useAuthStore((s) => s.tenantId);
|
||||
|
||||
const { data: tenant, isLoading: tenantLoading } = useTenant(tenantId ?? '');
|
||||
const { data: environments, isLoading: envsLoading } = useEnvironments(tenantId ?? '');
|
||||
|
||||
// Collect apps per environment using a ref-like approach via state + callback
|
||||
const [appsByEnv, setAppsByEnv] = useState<Record<string, AppResponse[]>>({});
|
||||
|
||||
const handleAppsData = useCallback((envId: string, apps: AppResponse[]) => {
|
||||
setAppsByEnv((prev) => {
|
||||
if (prev[envId] === apps) return prev; // stable reference, no update
|
||||
return { ...prev, [envId]: apps };
|
||||
});
|
||||
}, []);
|
||||
|
||||
const allApps = Object.values(appsByEnv).flat();
|
||||
const runningApps = allApps.filter((a) => a.currentDeploymentId !== null);
|
||||
// "Failed" is apps that have a previous deployment but no current (stopped) — approximate heuristic
|
||||
const failedApps = allApps.filter(
|
||||
(a) => a.currentDeploymentId === null && a.previousDeploymentId !== null,
|
||||
);
|
||||
|
||||
const isLoading = tenantLoading || envsLoading;
|
||||
|
||||
const kpiItems = [
|
||||
{
|
||||
label: 'Environments',
|
||||
value: environments?.length ?? 0,
|
||||
subtitle: 'isolated runtime contexts',
|
||||
},
|
||||
{
|
||||
label: 'Total Apps',
|
||||
value: allApps.length,
|
||||
subtitle: 'across all environments',
|
||||
},
|
||||
{
|
||||
label: 'Running',
|
||||
value: runningApps.length,
|
||||
trend: {
|
||||
label: 'active deployments',
|
||||
variant: 'success' as const,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Stopped',
|
||||
value: failedApps.length,
|
||||
trend: failedApps.length > 0
|
||||
? { label: 'need attention', variant: 'warning' as const }
|
||||
: { label: 'none', variant: 'muted' as const },
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!tenantId) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="No tenant associated"
|
||||
description="Your account is not linked to a tenant. Please contact your administrator."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 p-6">
|
||||
{/* Tenant Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-2xl font-semibold text-white">
|
||||
{tenant?.name ?? tenantId}
|
||||
</h1>
|
||||
{tenant?.tier && (
|
||||
<Badge
|
||||
label={tenant.tier.toUpperCase()}
|
||||
color={tierColor(tenant.tier)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RequirePermission permission="apps:manage">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => navigate('/environments/new')}
|
||||
>
|
||||
New Environment
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => navigate('/dashboard')}
|
||||
>
|
||||
View Observability Dashboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Strip */}
|
||||
<KpiStrip items={kpiItems} />
|
||||
|
||||
{/* Environments overview */}
|
||||
{environments && environments.length > 0 ? (
|
||||
<Card title="Environments">
|
||||
{/* Render hidden data-fetchers for each environment */}
|
||||
{environments.map((env) => (
|
||||
<EnvApps key={env.id} environment={env} onData={handleAppsData} />
|
||||
))}
|
||||
<div className="divide-y divide-white/10">
|
||||
{environments.map((env) => {
|
||||
const envApps = appsByEnv[env.id] ?? [];
|
||||
const envRunning = envApps.filter((a) => a.currentDeploymentId !== null).length;
|
||||
return (
|
||||
<div
|
||||
key={env.id}
|
||||
className="flex items-center justify-between py-3 first:pt-0 last:pb-0 cursor-pointer hover:bg-white/5 px-2 rounded"
|
||||
onClick={() => navigate(`/environments/${env.id}`)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-white">
|
||||
{env.displayName}
|
||||
</span>
|
||||
<Badge
|
||||
label={env.slug}
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-white/60">
|
||||
<span>{envApps.length} apps</span>
|
||||
<span className="text-green-400">{envRunning} running</span>
|
||||
<Badge
|
||||
label={env.status}
|
||||
color={env.status === 'ACTIVE' ? 'success' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<EmptyState
|
||||
title="No environments yet"
|
||||
description="Create your first environment to get started deploying Camel applications."
|
||||
action={
|
||||
<RequirePermission permission="apps:manage">
|
||||
<Button variant="primary" onClick={() => navigate('/environments/new')}>
|
||||
Create Environment
|
||||
</Button>
|
||||
</RequirePermission>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Recent deployments placeholder */}
|
||||
<Card title="Recent Deployments">
|
||||
{allApps.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No deployments yet"
|
||||
description="Deploy your first app to see deployment history here."
|
||||
/>
|
||||
) : (
|
||||
<p className="text-sm text-white/60">
|
||||
Select an app from an environment to view its deployment history.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user