vibecarbon 0.1.0

package/carbon/src/client/components/admin/ServicesStatus.tsx

@@ -0,0 +1,296 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Activity, AlertCircle, CheckCircle2, Loader2, Power, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { getAuthHeaders } from '@/lib/api';
+import { cn } from '@/lib/utils';
+
+const APP_VERSION = import.meta.env.VITE_APP_VERSION || '0.1.0';
+// VITE_ENVIRONMENT is set during deployment (qa, staging, prod, etc.)
+// Falls back to Vite's MODE for local development
+const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT || import.meta.env.MODE || 'development';
+
+interface ServiceStatus {
+  name: string;
+  container: string;
+  status: 'healthy' | 'unhealthy' | 'unknown';
+  latencyMs?: number;
+  error?: string;
+}
+
+interface ServicesStatusResponse {
+  summary: {
+    healthy: number;
+    unhealthy: number;
+    total: number;
+  };
+  services: ServiceStatus[];
+  timestamp: string;
+}
+
+async function fetchServicesStatus(): Promise<ServicesStatusResponse> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/_internal/services/status', { headers });
+  if (!response.ok) {
+    throw new Error('Failed to fetch services status');
+  }
+  return response.json();
+}
+
+async function restartService(container: string): Promise<{ success: boolean; error?: string }> {
+  const headers = await getAuthHeaders();
+  const response = await fetch(`/api/_internal/services/status/restart/${container}`, {
+    method: 'POST',
+    headers,
+  });
+  return response.json();
+}
+
+async function restartAllServices(): Promise<{ success: boolean }> {
+  const headers = await getAuthHeaders();
+  const response = await fetch('/api/_internal/services/status/restart', {
+    method: 'POST',
+    headers,
+  });
+  return response.json();
+}
+
+function StatusIcon({ status }: { status: ServiceStatus['status'] }) {
+  switch (status) {
+    case 'healthy':
+      return <CheckCircle2 className="size-4 text-success" />;
+    case 'unhealthy':
+      return <AlertCircle className="size-4 text-destructive" />;
+    default:
+      return <Activity className="size-4 text-warning" />;
+  }
+}
+
+function StatusBadge({ status }: { status: ServiceStatus['status'] }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+        status === 'healthy' && 'bg-success/10 text-success',
+        status === 'unhealthy' && 'bg-destructive/10 text-destructive',
+        status === 'unknown' && 'bg-warning/10 text-warning'
+      )}
+    >
+      {status}
+    </span>
+  );
+}
+
+export function ServicesStatus() {
+  const queryClient = useQueryClient();
+  const [restartingContainers, setRestartingContainers] = useState<Set<string>>(new Set());
+
+  const { data, isLoading, isFetching, error, refetch } = useQuery({
+    queryKey: ['services-status'],
+    queryFn: fetchServicesStatus,
+    refetchInterval: 30000, // Refresh every 30 seconds
+    staleTime: 10000,
+  });
+
+  // Track if we're refreshing with a minimum display time
+  // This ensures the spinner is visible even for very fast responses
+  const [showRefreshing, setShowRefreshing] = useState(false);
+  const isActuallyRefreshing = isFetching && !isLoading;
+
+  useEffect(() => {
+    if (isActuallyRefreshing) {
+      setShowRefreshing(true);
+    } else if (showRefreshing) {
+      // Keep showing for minimum 500ms after fetch completes
+      const timer = setTimeout(() => setShowRefreshing(false), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isActuallyRefreshing, showRefreshing]);
+
+  const isRefreshing = showRefreshing;
+
+  const restartMutation = useMutation({
+    mutationFn: restartService,
+    onMutate: (container) => {
+      setRestartingContainers((prev) => new Set(prev).add(container));
+    },
+    onSettled: (_, __, container) => {
+      setRestartingContainers((prev) => {
+        const next = new Set(prev);
+        next.delete(container);
+        return next;
+      });
+      // Refetch status after restart
+      queryClient.invalidateQueries({ queryKey: ['services-status'] });
+    },
+  });
+
+  const restartAllMutation = useMutation({
+    mutationFn: restartAllServices,
+    onMutate: () => {
+      if (data?.services) {
+        setRestartingContainers(new Set(data.services.map((s) => s.container)));
+      }
+    },
+    onSettled: () => {
+      setRestartingContainers(new Set());
+      // Refetch status after restart
+      queryClient.invalidateQueries({ queryKey: ['services-status'] });
+    },
+  });
+
+  const handleRestart = (container: string) => {
+    restartMutation.mutate(container);
+  };
+
+  const handleRestartAll = () => {
+    restartAllMutation.mutate();
+  };
+
+  const isAnyRestarting = restartingContainers.size > 0 || restartAllMutation.isPending;
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="size-5" />
+            Services Status
+          </CardTitle>
+          <CardDescription>Loading service status...</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center py-8">
+            <RefreshCw className="size-6 animate-spin text-muted-foreground" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Activity className="size-5" />
+            Services Status
+          </CardTitle>
+          <CardDescription>Unable to fetch service status</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center gap-4 py-4 text-center">
+            <AlertCircle className="size-8 text-destructive" />
+            <p className="text-sm text-muted-foreground">
+              Could not connect to the services status endpoint.
+            </p>
+            <Button variant="outline" size="sm" onClick={() => refetch()}>
+              <RefreshCw className="mr-2 size-4" />
+              Retry
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { summary, services } = data;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Activity className="size-5" />
+              Services Status
+            </CardTitle>
+            <CardDescription className="flex items-center gap-2">
+              {summary.healthy} of {summary.total} services healthy
+              {isRefreshing && (
+                <span className="inline-flex items-center gap-1 text-muted-foreground">
+                  <Loader2 className="size-3 animate-spin" />
+                  Refreshing...
+                </span>
+              )}
+            </CardDescription>
+          </div>
+          <div className="text-right text-sm">
+            <p className="font-medium">{ENVIRONMENT}</p>
+            <p className="text-muted-foreground">v{APP_VERSION}</p>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {services.map((service) => {
+            const isRestarting = restartingContainers.has(service.container);
+            return (
+              <div
+                key={service.container}
+                className="flex items-center justify-between rounded-lg border px-3 py-2"
+              >
+                <div className="flex items-center gap-3">
+                  {isRestarting ? (
+                    <RefreshCw className="size-4 animate-spin text-muted-foreground" />
+                  ) : (
+                    <StatusIcon status={service.status} />
+                  )}
+                  <div>
+                    <p className="text-sm font-medium">{service.name}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  {isRestarting ? (
+                    <span className="text-xs text-muted-foreground">Restarting...</span>
+                  ) : isRefreshing ? (
+                    <Loader2 className="size-3 animate-spin text-muted-foreground" />
+                  ) : service.latencyMs !== undefined && service.status === 'healthy' ? (
+                    <span className="text-xs text-muted-foreground">{service.latencyMs}ms</span>
+                  ) : service.error ? (
+                    <span className="text-xs text-destructive">{service.error}</span>
+                  ) : null}
+                  {isRestarting ? null : <StatusBadge status={service.status} />}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-7"
+                    onClick={() => handleRestart(service.container)}
+                    disabled={isAnyRestarting}
+                    title={`Restart ${service.name}`}
+                  >
+                    <Power className="size-3.5" />
+                  </Button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+      <CardFooter className="border-t pt-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleRestartAll}
+          disabled={isAnyRestarting}
+          className="w-full"
+        >
+          {restartAllMutation.isPending ? (
+            <Loader2 className="mr-2 size-4 animate-spin" />
+          ) : (
+            <Power className="mr-2 size-4" />
+          )}
+          {restartAllMutation.isPending ? 'Restarting All Services...' : 'Restart All Services'}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}