kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(phase-22): add import services for Sigma, LOLBAS, GTFOBins, CALDERA, Elastic and data sources panel (T-203 to T-207)

Browse Source
This commit is contained in:
Kitos
2026-02-09 16:19:44 +01:00
parent 022c4f2886
commit f4c8cbf768
11 changed files with 2039 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.tsx
View File

@@ -11,6 +11,7 @@ import ReportsPage from "./pages/ReportsPage";
import SystemPage from "./pages/SystemPage";
import UsersPage from "./pages/UsersPage";
import AuditLogPage from "./pages/AuditLogPage";
import DataSourcesPage from "./pages/DataSourcesPage";
import Layout from "./components/Layout";
import ProtectedRoute from "./components/ProtectedRoute";
@@ -61,6 +62,14 @@ export default function App() {
</ProtectedRoute>
}
/>
<Route
path="/data-sources"
element={
<ProtectedRoute roles={["admin"]}>
<DataSourcesPage />
</ProtectedRoute>
}
/>
</Route>
{/* Catch-all → dashboard */}

79
frontend/src/api/data-sources.ts Normal file
View File

@@ -0,0 +1,79 @@
import client from "./client";
export interface DataSource {
id: string;
name: string;
display_name: string;
type: string;
url: string | null;
description: string | null;
is_enabled: boolean;
last_sync_at: string | null;
last_sync_status: string | null;
last_sync_stats: Record<string, unknown> | null;
sync_frequency: string | null;
config: Record<string, unknown> | null;
created_at: string | null;
}
export interface SyncResult {
message: string;
source: string;
stats: Record<string, unknown>;
}
export interface SyncAllResult {
message: string;
results: Array<{
source: string;
status: string;
stats?: Record<string, unknown>;
detail?: string;
}>;
}
export interface DataSourceStats {
id: string;
name: string;
display_name: string;
type: string;
is_enabled: boolean;
last_sync_at: string | null;
last_sync_status: string | null;
last_sync_stats: Record<string, unknown> | null;
total_templates: number;
total_rules: number;
}
/** List all data sources. */
export async function getDataSources(): Promise<DataSource[]> {
const { data } = await client.get<DataSource[]>("/data-sources");
return data;
}
/** Update a data source (enable/disable, config). */
export async function updateDataSource(
id: string,
body: Partial<{ is_enabled: boolean; sync_frequency: string; config: Record<string, unknown> }>
): Promise<{ message: string; id: string }> {
const { data } = await client.patch(`/data-sources/${id}`, body);
return data;
}
/** Trigger sync for a specific data source. */
export async function syncDataSource(id: string): Promise<SyncResult> {
const { data } = await client.post<SyncResult>(`/data-sources/${id}/sync`);
return data;
}
/** Trigger sync for all enabled data sources. */
export async function syncAllDataSources(): Promise<SyncAllResult> {
const { data } = await client.post<SyncAllResult>("/data-sources/sync-all");
return data;
}
/** Get stats for a specific data source. */
export async function getDataSourceStats(id: string): Promise<DataSourceStats> {
const { data } = await client.get<DataSourceStats>(`/data-sources/${id}/stats`);
return data;
}

2
frontend/src/components/Sidebar.tsx
View File

@@ -12,6 +12,7 @@ import {
ChevronDown,
ListChecks,
ClipboardList,
Database,
} from "lucide-react";
import { useAuth } from "../context/AuthContext";
@@ -41,6 +42,7 @@ const mainLinks: NavItem[] = [
const adminLinks: NavItem[] = [
{ to: "/users", label: "Users", icon: Users },
{ to: "/audit", label: "Audit Log", icon: FileText },
{ to: "/data-sources", label: "Data Sources", icon: Database },
{ to: "/system", label: "System", icon: Settings },
];

375
frontend/src/pages/DataSourcesPage.tsx Normal file
View File

@@ -0,0 +1,375 @@
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>
);
}