376 lines
15 KiB
TypeScript
376 lines
15 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Loader2,
|
|
RefreshCw,
|
|
Database,
|
|
CheckCircle,
|
|
XCircle,
|
|
AlertCircle,
|
|
Clock,
|
|
ToggleLeft,
|
|
ToggleRight,
|
|
Play,
|
|
ExternalLink,
|
|
Shield,
|
|
Search,
|
|
Swords,
|
|
Bug,
|
|
} from "lucide-react";
|
|
import {
|
|
getDataSources,
|
|
updateDataSource,
|
|
syncDataSource,
|
|
syncAllDataSources,
|
|
type DataSource,
|
|
type SyncAllResult,
|
|
} from "../api/data-sources";
|
|
|
|
/** Map source type to visual props. */
|
|
function typeProps(type: string) {
|
|
switch (type) {
|
|
case "attack_procedure":
|
|
return { label: "Attack Procedure", color: "text-red-400 bg-red-900/50 border-red-500/30", icon: Swords };
|
|
case "detection_rule":
|
|
return { label: "Detection Rule", color: "text-blue-400 bg-blue-900/50 border-blue-500/30", icon: Shield };
|
|
case "threat_intel":
|
|
return { label: "Threat Intel", color: "text-purple-400 bg-purple-900/50 border-purple-500/30", icon: Search };
|
|
case "defensive_technique":
|
|
return { label: "Defensive", color: "text-green-400 bg-green-900/50 border-green-500/30", icon: Shield };
|
|
default:
|
|
return { label: type, color: "text-gray-400 bg-gray-800/50 border-gray-600/30", icon: Bug };
|
|
}
|
|
}
|
|
|
|
function statusBadge(status: string | null) {
|
|
if (!status) return null;
|
|
switch (status) {
|
|
case "success":
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-green-500/30 bg-green-900/50 px-2 py-0.5 text-xs font-medium text-green-400">
|
|
<CheckCircle className="h-3 w-3" /> Success
|
|
</span>
|
|
);
|
|
case "error":
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-red-500/30 bg-red-900/50 px-2 py-0.5 text-xs font-medium text-red-400">
|
|
<XCircle className="h-3 w-3" /> Error
|
|
</span>
|
|
);
|
|
case "in_progress":
|
|
return (
|
|
<span className="inline-flex items-center gap-1 rounded-full border border-yellow-500/30 bg-yellow-900/50 px-2 py-0.5 text-xs font-medium text-yellow-400">
|
|
<Loader2 className="h-3 w-3 animate-spin" /> In Progress
|
|
</span>
|
|
);
|
|
default:
|
|
return (
|
|
<span className="inline-flex rounded-full border border-gray-600/30 bg-gray-800/50 px-2 py-0.5 text-xs text-gray-400">
|
|
{status}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default function DataSourcesPage() {
|
|
const queryClient = useQueryClient();
|
|
const [syncingId, setSyncingId] = useState<string | null>(null);
|
|
const [syncAllResult, setSyncAllResult] = useState<SyncAllResult | null>(null);
|
|
|
|
// ── Queries ─────────────────────────────────────────────────────
|
|
const {
|
|
data: sources,
|
|
isLoading,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ["data-sources"],
|
|
queryFn: getDataSources,
|
|
});
|
|
|
|
// ── Toggle enable/disable ───────────────────────────────────────
|
|
const toggleMutation = useMutation({
|
|
mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) =>
|
|
updateDataSource(id, { is_enabled: enabled }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["data-sources"] });
|
|
},
|
|
});
|
|
|
|
// ── Sync individual source ──────────────────────────────────────
|
|
const syncMutation = useMutation({
|
|
mutationFn: (id: string) => syncDataSource(id),
|
|
onSuccess: () => {
|
|
setSyncingId(null);
|
|
queryClient.invalidateQueries({ queryKey: ["data-sources"] });
|
|
},
|
|
onError: () => {
|
|
setSyncingId(null);
|
|
queryClient.invalidateQueries({ queryKey: ["data-sources"] });
|
|
},
|
|
});
|
|
|
|
// ── Sync all ────────────────────────────────────────────────────
|
|
const syncAllMutation = useMutation({
|
|
mutationFn: syncAllDataSources,
|
|
onSuccess: (data) => {
|
|
setSyncAllResult(data);
|
|
queryClient.invalidateQueries({ queryKey: ["data-sources"] });
|
|
},
|
|
});
|
|
|
|
const handleSync = (id: string) => {
|
|
setSyncingId(id);
|
|
syncMutation.mutate(id);
|
|
};
|
|
|
|
const formatDate = (dateStr: string | null) => {
|
|
if (!dateStr) return "Never";
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short" });
|
|
};
|
|
|
|
const formatStats = (stats: Record<string, unknown> | null) => {
|
|
if (!stats) return null;
|
|
return Object.entries(stats)
|
|
.filter(([k]) => k !== "error")
|
|
.map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`)
|
|
.join(" | ");
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Data Sources</h1>
|
|
<p className="mt-1 text-sm text-gray-400">
|
|
Manage external data sources for test templates and detection rules
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => syncAllMutation.mutate()}
|
|
disabled={syncAllMutation.isPending}
|
|
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50 transition-colors"
|
|
>
|
|
{syncAllMutation.isPending ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<RefreshCw className="h-4 w-4" />
|
|
)}
|
|
{syncAllMutation.isPending ? "Syncing All..." : "Sync All"}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sync All Result */}
|
|
{syncAllResult && (
|
|
<div className="rounded-xl border border-cyan-500/30 bg-gray-900 p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-semibold text-white">Sync All Results</h3>
|
|
<button
|
|
onClick={() => setSyncAllResult(null)}
|
|
className="text-gray-400 hover:text-white text-xs"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{syncAllResult.results.map((r, i) => (
|
|
<div key={i} className="flex items-center gap-3 text-sm">
|
|
{r.status === "success" ? (
|
|
<CheckCircle className="h-4 w-4 text-green-400 shrink-0" />
|
|
) : r.status === "error" ? (
|
|
<XCircle className="h-4 w-4 text-red-400 shrink-0" />
|
|
) : (
|
|
<AlertCircle className="h-4 w-4 text-yellow-400 shrink-0" />
|
|
)}
|
|
<span className="text-gray-300 font-medium">{r.source}</span>
|
|
{r.stats && (
|
|
<span className="text-gray-500 text-xs">
|
|
{formatStats(r.stats as Record<string, unknown>)}
|
|
</span>
|
|
)}
|
|
{r.detail && (
|
|
<span className="text-gray-500 text-xs">{r.detail}</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Loading */}
|
|
{isLoading && (
|
|
<div className="flex items-center justify-center py-16">
|
|
<Loader2 className="h-8 w-8 animate-spin text-cyan-400" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="rounded-xl border border-red-500/30 bg-red-900/20 p-6 text-center">
|
|
<AlertCircle className="mx-auto h-8 w-8 text-red-400" />
|
|
<p className="mt-2 text-sm text-red-400">
|
|
Failed to load data sources: {(error as Error)?.message}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Data Sources Table */}
|
|
{sources && sources.length > 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-800 bg-gray-900/50">
|
|
<th className="px-4 py-3 font-medium text-gray-400">Source</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Type</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Status</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Last Sync</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Stats</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Enabled</th>
|
|
<th className="px-4 py-3 font-medium text-gray-400">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sources.map((src: DataSource) => {
|
|
const tp = typeProps(src.type);
|
|
const TypeIcon = tp.icon;
|
|
const isSyncing = syncingId === src.id;
|
|
|
|
return (
|
|
<tr
|
|
key={src.id}
|
|
className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
|
|
>
|
|
{/* Source */}
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className="rounded-lg bg-gray-800 p-2">
|
|
<Database className="h-4 w-4 text-cyan-400" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-gray-200">{src.display_name}</p>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-gray-500 font-mono">{src.name}</span>
|
|
{src.url && (
|
|
<a
|
|
href={src.url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-gray-500 hover:text-cyan-400"
|
|
>
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Type */}
|
|
<td className="px-4 py-3">
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${tp.color}`}
|
|
>
|
|
<TypeIcon className="h-3 w-3" />
|
|
{tp.label}
|
|
</span>
|
|
</td>
|
|
|
|
{/* Sync Status */}
|
|
<td className="px-4 py-3">
|
|
{isSyncing ? statusBadge("in_progress") : statusBadge(src.last_sync_status)}
|
|
</td>
|
|
|
|
{/* Last Sync */}
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1.5 text-xs text-gray-400">
|
|
<Clock className="h-3.5 w-3.5" />
|
|
{formatDate(src.last_sync_at)}
|
|
</div>
|
|
{src.sync_frequency && (
|
|
<span className="text-[10px] text-gray-600">
|
|
Frequency: {src.sync_frequency}
|
|
</span>
|
|
)}
|
|
</td>
|
|
|
|
{/* Stats */}
|
|
<td className="px-4 py-3">
|
|
{src.last_sync_stats ? (
|
|
<span className="text-xs text-gray-400">
|
|
{formatStats(src.last_sync_stats)}
|
|
</span>
|
|
) : (
|
|
<span className="text-xs text-gray-600">-</span>
|
|
)}
|
|
</td>
|
|
|
|
{/* Toggle */}
|
|
<td className="px-4 py-3">
|
|
<button
|
|
onClick={() =>
|
|
toggleMutation.mutate({
|
|
id: src.id,
|
|
enabled: !src.is_enabled,
|
|
})
|
|
}
|
|
disabled={toggleMutation.isPending}
|
|
className={`flex items-center gap-1 text-xs font-medium transition-colors ${
|
|
src.is_enabled
|
|
? "text-green-400 hover:text-green-300"
|
|
: "text-gray-500 hover:text-gray-400"
|
|
}`}
|
|
>
|
|
{src.is_enabled ? (
|
|
<>
|
|
<ToggleRight className="h-5 w-5" />
|
|
On
|
|
</>
|
|
) : (
|
|
<>
|
|
<ToggleLeft className="h-5 w-5" />
|
|
Off
|
|
</>
|
|
)}
|
|
</button>
|
|
</td>
|
|
|
|
{/* Actions */}
|
|
<td className="px-4 py-3">
|
|
<button
|
|
onClick={() => handleSync(src.id)}
|
|
disabled={isSyncing || !src.is_enabled}
|
|
className="flex items-center gap-1.5 rounded-lg bg-gray-800 border border-gray-700 px-3 py-1.5 text-xs font-medium text-gray-300 hover:bg-gray-700 hover:text-white disabled:opacity-40 transition-colors"
|
|
>
|
|
{isSyncing ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Play className="h-3.5 w-3.5" />
|
|
)}
|
|
{isSyncing ? "Syncing..." : "Sync"}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{sources && sources.length === 0 && (
|
|
<div className="rounded-xl border border-gray-800 bg-gray-900 p-12 text-center">
|
|
<Database className="mx-auto h-12 w-12 text-gray-600" />
|
|
<h3 className="mt-4 text-lg font-medium text-gray-300">No Data Sources</h3>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Run the data sources seed script to register initial sources.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|