manage/frontend/src/pages/service-tabs/JobsTab.tsx

/**
 * JobsTab — operational content for the backups service page.
 *
 * Lifted from the old top-level `components/BackupsPage.tsx`. The three
 * sub-tables (Jobs / Runs / Alerts) and their hooks are preserved verbatim.
 *
 * NOTE: the backup hooks currently query globally (no service_id filter).
 * The backend gained `service_id` attribution in Slice 3, but the hooks don't
 * yet accept a serviceId param. This tab shows ALL backups data for now;
 * per-instance scoping by `instance.id` is a follow-up once the hooks gain the
 * parameter.
 */
import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
	useAcknowledgeAlert,
	useBackupAlerts,
	useBackupJobs,
	useBackupRuns,
} from "../../hooks/useBackups";
import BackupAlertsTable from "../../components/BackupAlertsTable";
import BackupJobsTable from "../../components/BackupJobsTable";
import BackupRunsTable from "../../components/BackupRunsTable";
import type { ServiceInstance } from "../../types";

export function JobsTab({ instance }: { instance: ServiceInstance }) {
	// instance.id is not yet used — backup hooks query globally (see file
	// docstring). Per-instance scoping is a follow-up.
	void instance;
	const [tab, setTab] = useState("jobs");
	const { data: jobsData, isLoading: jobsLoading } = useBackupJobs();
	const { data: runsData, isLoading: runsLoading } = useBackupRuns();
	const { data: alertsData, isLoading: alertsLoading } = useBackupAlerts(
		undefined,
		false,
	);
	const acknowledgeMutation = useAcknowledgeAlert();

	// Build a map of latest runs per job
	const latestRuns = new Map();
	if (runsData) {
		for (const run of runsData) {
			const existing = latestRuns.get(run.job_id);
			if (!existing || run.started_at > existing.started_at) {
				latestRuns.set(run.job_id, run);
			}
		}
	}

	const alertsLabel = alertsData ? `Alerts (${alertsData.length})` : "Alerts";

	return (
		<div className="space-y-4">
			<Tabs value={tab} onValueChange={setTab}>
				<TabsList>
					<TabsTrigger value="jobs">Jobs</TabsTrigger>
					<TabsTrigger value="runs">Runs</TabsTrigger>
					<TabsTrigger value="alerts">{alertsLabel}</TabsTrigger>
				</TabsList>
				<TabsContent value="jobs">
					{jobsLoading ? (
						<p className="text-sm text-muted-foreground">Loading jobs…</p>
					) : (
						<BackupJobsTable jobs={jobsData ?? []} latestRuns={latestRuns} />
					)}
				</TabsContent>
				<TabsContent value="runs">
					{runsLoading ? (
						<p className="text-sm text-muted-foreground">Loading runs…</p>
					) : (
						<BackupRunsTable runs={runsData ?? []} />
					)}
				</TabsContent>
				<TabsContent value="alerts">
					{alertsLoading ? (
						<p className="text-sm text-muted-foreground">Loading alerts…</p>
					) : (
						<BackupAlertsTable
							alerts={alertsData ?? []}
							onAcknowledge={(id) => acknowledgeMutation.mutate(id)}
						/>
					)}
				</TabsContent>
			</Tabs>
		</div>
	);
}