cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add CSV export to audit log

Browse Source
This commit is contained in:
hsiegeln
2026-04-09 18:43:46 +02:00
parent 2ede06f32a
commit 605c8ad270
8 changed files with 130 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/pages/Admin/AppConfigDetailPage.tsx
View File

@@ -160,7 +160,7 @@ export default function AppConfigDetailPage() {
}
},
onError: () => {
toast({ title: 'Save failed', description: 'Could not update configuration', variant: 'error', duration: 86_400_000 });
toast({ title: 'Failed to save configuration', description: 'Could not update configuration', variant: 'error', duration: 86_400_000 });
},
});
}

21
ui/src/pages/Admin/AuditLogPage.tsx
View File

@@ -1,8 +1,9 @@
import { useState, useMemo, useCallback } from 'react';
import {
Badge, DateRangePicker, Input, Select, MonoText, CodeBlock, DataTable,
Badge, Button, DateRangePicker, Input, Select, MonoText, CodeBlock, DataTable,
} from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { Download } from 'lucide-react';
import { useAuditLog, type AuditEvent } from '../../api/queries/admin/audit';
import styles from './AuditLogPage.module.css';
import tableStyles from '../../styles/table-section.module.css';
@@ -17,6 +18,21 @@ const CATEGORIES = [
{ value: 'AGENT', label: 'AGENT' },
];
function exportCsv(events: AuditEvent[]) {
const headers = ['Timestamp', 'User', 'Category', 'Action', 'Target', 'Result', 'Details'];
const rows = events.map(e => [
e.timestamp, e.username, e.category, e.action, e.target, e.result, e.details ?? '',
]);
const csv = [headers, ...rows].map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `cameleer-audit-${new Date().toISOString().slice(0, 16).replace(':', '-')}.csv`;
a.click();
URL.revokeObjectURL(url);
}
function formatTimestamp(iso: string): string {
return new Date(iso).toLocaleString('en-GB', {
year: 'numeric', month: '2-digit', day: '2-digit',
@@ -126,6 +142,9 @@ export default function AuditLogPage() {
{totalCount} events
</span>
<Badge label="AUTO" color="success" />
<Button variant="ghost" size="sm" onClick={() => exportCsv(data?.items ?? [])}>
<Download size={14} /> Export CSV
</Button>
</div>
</div>
<DataTable

4
ui/src/pages/Admin/EnvironmentsPage.tsx
View File

@@ -12,7 +12,6 @@ import {
ConfirmDialog,
SplitPane,
EntityList,
Spinner,
useToast,
} from '@cameleer/design-system';
import {
@@ -24,6 +23,7 @@ import {
useUpdateJarRetention,
} from '../../api/queries/admin/environments';
import type { Environment } from '../../api/queries/admin/environments';
import { PageLoader } from '../../components/PageLoader';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
@@ -157,7 +157,7 @@ export default function EnvironmentsPage() {
}
}
if (isLoading) return <Spinner size="md" />;
if (isLoading) return <PageLoader />;
return (
<>

3
ui/src/pages/Admin/GroupsTab.tsx
View File

@@ -31,6 +31,7 @@ import {
useRoles,
} from '../../api/queries/admin/rbac';
import type { GroupDetail } from '../../api/queries/admin/rbac';
import { PageLoader } from '../../components/PageLoader';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
@@ -225,7 +226,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
}
}
if (groupsLoading) return <Spinner size="md" />;
if (groupsLoading) return <PageLoader />;
return (
<>

158
ui/src/pages/Admin/OidcConfigPage.tsx
View File

@@ -1,8 +1,9 @@
import { useEffect, useState } from 'react';
import {
Button, Input, Toggle, FormField, SectionHeader, Tag, ConfirmDialog, Alert,
Button, Input, Toggle, FormField, SectionHeader, Tag, ConfirmDialog,
} from '@cameleer/design-system';
import { useToast } from '@cameleer/design-system';
import { PageLoader } from '../../components/PageLoader';
import { adminFetch } from '../../api/queries/admin/admin-api';
import styles from './OidcConfigPage.module.css';
import sectionStyles from '../../styles/section-card.module.css';
@@ -37,11 +38,12 @@ const EMPTY_CONFIG: OidcFormData = {
export default function OidcConfigPage() {
const [form, setForm] = useState<OidcFormData | null>(null);
const [editing, setEditing] = useState(false);
const [formDraft, setFormDraft] = useState<OidcFormData | null>(null);
const [newRole, setNewRole] = useState('');
const [deleteOpen, setDeleteOpen] = useState(false);
const [saving, setSaving] = useState(false);
const [testing, setTesting] = useState(false);
const [error, setError] = useState<string | null>(null);
const { toast } = useToast();
useEffect(() => {
@@ -62,34 +64,49 @@ export default function OidcConfigPage() {
.catch(() => setForm(EMPTY_CONFIG));
}, []);
function update<K extends keyof OidcFormData>(key: K, value: OidcFormData[K]) {
setForm((prev) => prev ? { ...prev, [key]: value } : prev);
// The display values come from formDraft when editing, form otherwise
const current = editing ? formDraft : form;
function startEditing() {
setFormDraft(form ? { ...form } : null);
setEditing(true);
}
function cancelEditing() {
setFormDraft(null);
setEditing(false);
setNewRole('');
}
function updateDraft<K extends keyof OidcFormData>(key: K, value: OidcFormData[K]) {
setFormDraft((prev) => prev ? { ...prev, [key]: value } : prev);
}
function addRole() {
if (!form) return;
if (!current) return;
const role = newRole.trim().toUpperCase();
if (role && !(form.defaultRoles || []).includes(role)) {
update('defaultRoles', [...(form.defaultRoles || []), role]);
if (role && !(current.defaultRoles || []).includes(role)) {
updateDraft('defaultRoles', [...(current.defaultRoles || []), role]);
setNewRole('');
}
}
function removeRole(role: string) {
if (!form) return;
update('defaultRoles', (form.defaultRoles || []).filter((r) => r !== role));
if (!current) return;
updateDraft('defaultRoles', (current.defaultRoles || []).filter((r) => r !== role));
}
async function handleSave() {
if (!form) return;
if (!formDraft) return;
setSaving(true);
setError(null);
try {
await adminFetch('/oidc', { method: 'PUT', body: JSON.stringify(form) });
await adminFetch('/oidc', { method: 'PUT', body: JSON.stringify(formDraft) });
setForm({ ...formDraft });
setFormDraft(null);
setEditing(false);
toast({ title: 'Settings saved', description: 'OIDC configuration updated successfully.', variant: 'success' });
} catch (e: any) {
setError(e.message);
toast({ title: 'Save failed', description: e.message, variant: 'error', duration: 86_400_000 });
toast({ title: 'Failed to save OIDC configuration', description: e.message, variant: 'error', duration: 86_400_000 });
} finally {
setSaving(false);
}
@@ -98,12 +115,10 @@ export default function OidcConfigPage() {
async function handleTest() {
if (!form) return;
setTesting(true);
setError(null);
try {
const result = await adminFetch<{ status: string; authorizationEndpoint?: string }>('/oidc/test', { method: 'POST' });
toast({ title: 'Connection test', description: `OIDC provider responded: ${result.status}`, variant: 'success' });
} catch (e: any) {
setError(e.message);
toast({ title: 'Connection test failed', description: e.message, variant: 'error', duration: 86_400_000 });
} finally {
setTesting(false);
@@ -112,46 +127,53 @@ export default function OidcConfigPage() {
async function handleDelete() {
setDeleteOpen(false);
setError(null);
try {
await adminFetch('/oidc', { method: 'DELETE' });
setForm(EMPTY_CONFIG);
setFormDraft(null);
setEditing(false);
toast({ title: 'Configuration deleted', description: 'OIDC configuration has been removed.', variant: 'warning' });
} catch (e: any) {
setError(e.message);
toast({ title: 'Delete failed', description: e.message, variant: 'error', duration: 86_400_000 });
toast({ title: 'Failed to delete OIDC configuration', description: e.message, variant: 'error', duration: 86_400_000 });
}
}
if (!form) return null;
if (!form) return <PageLoader />;
return (
<div className={styles.page}>
<div className={styles.toolbar}>
<Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri || testing}>
{testing ? 'Testing...' : 'Test Connection'}
</Button>
<Button size="sm" variant="primary" onClick={handleSave} disabled={saving}>
{saving ? 'Saving...' : 'Save'}
</Button>
{editing ? (
<>
<Button size="sm" variant="ghost" onClick={cancelEditing}>Cancel</Button>
<Button size="sm" variant="primary" onClick={handleSave} loading={saving}>Save</Button>
</>
) : (
<>
<Button size="sm" variant="secondary" onClick={handleTest} disabled={!form.issuerUri || testing}>
{testing ? 'Testing...' : 'Test Connection'}
</Button>
<Button size="sm" variant="secondary" onClick={startEditing}>Edit</Button>
</>
)}
</div>
{error && <div style={{ marginBottom: 16 }}><Alert variant="error">{error}</Alert></div>}
<section className={sectionStyles.section}>
<SectionHeader>Behavior</SectionHeader>
<div className={styles.toggleRow}>
<Toggle
label="Enabled"
checked={form.enabled}
onChange={(e) => update('enabled', e.target.checked)}
checked={current?.enabled ?? false}
onChange={(e) => updateDraft('enabled', e.target.checked)}
disabled={!editing}
/>
</div>
<div className={styles.toggleRow}>
<Toggle
label="Auto Sign-Up"
checked={form.autoSignup}
onChange={(e) => update('autoSignup', e.target.checked)}
checked={current?.autoSignup ?? true}
onChange={(e) => updateDraft('autoSignup', e.target.checked)}
disabled={!editing}
/>
<span className={styles.hint}>Automatically create accounts for new OIDC users</span>
</div>
@@ -164,39 +186,44 @@ export default function OidcConfigPage() {
id="issuer"
type="url"
placeholder="https://idp.example.com/realms/my-realm"
value={form.issuerUri}
onChange={(e) => update('issuerUri', e.target.value)}
value={current?.issuerUri ?? ''}
onChange={(e) => updateDraft('issuerUri', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="Client ID" htmlFor="client-id">
<Input
id="client-id"
value={form.clientId}
onChange={(e) => update('clientId', e.target.value)}
value={current?.clientId ?? ''}
onChange={(e) => updateDraft('clientId', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="Client Secret" htmlFor="client-secret">
<Input
id="client-secret"
type="password"
value={form.clientSecret}
onChange={(e) => update('clientSecret', e.target.value)}
value={current?.clientSecret ?? ''}
onChange={(e) => updateDraft('clientSecret', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="Audience / API Resource" htmlFor="audience" hint="RFC 8707 resource indicator sent in the authorization request">
<Input
id="audience"
placeholder="https://api.example.com"
value={form.audience}
onChange={(e) => update('audience', e.target.value)}
value={current?.audience ?? ''}
onChange={(e) => updateDraft('audience', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="Additional Scopes" htmlFor="additional-scopes" hint="Extra scopes to request beyond openid email profile (comma-separated)">
<Input
id="additional-scopes"
placeholder="urn:scope:organizations, urn:scope:roles"
value={(form.additionalScopes || []).join(', ')}
onChange={(e) => update('additionalScopes', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
value={(current?.additionalScopes || []).join(', ')}
onChange={(e) => updateDraft('additionalScopes', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
disabled={!editing}
/>
</FormField>
</section>
@@ -206,22 +233,25 @@ export default function OidcConfigPage() {
<FormField label="Roles Claim" htmlFor="roles-claim" hint="JSON path to roles in the access token or ID token">
<Input
id="roles-claim"
value={form.rolesClaim}
onChange={(e) => update('rolesClaim', e.target.value)}
value={current?.rolesClaim ?? ''}
onChange={(e) => updateDraft('rolesClaim', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="User ID Claim" htmlFor="userid-claim" hint="Claim used as unique user identifier (default: sub)">
<Input
id="userid-claim"
value={form.userIdClaim}
onChange={(e) => update('userIdClaim', e.target.value)}
value={current?.userIdClaim ?? ''}
onChange={(e) => updateDraft('userIdClaim', e.target.value)}
disabled={!editing}
/>
</FormField>
<FormField label="Display Name Claim" htmlFor="name-claim" hint="Claim used for user display name">
<Input
id="name-claim"
value={form.displayNameClaim}
onChange={(e) => update('displayNameClaim', e.target.value)}
value={current?.displayNameClaim ?? ''}
onChange={(e) => updateDraft('displayNameClaim', e.target.value)}
disabled={!editing}
/>
</FormField>
</section>
@@ -229,25 +259,27 @@ export default function OidcConfigPage() {
<section className={sectionStyles.section}>
<SectionHeader>Default Roles</SectionHeader>
<div className={styles.tagList}>
{(form.defaultRoles || []).map((role) => (
<Tag key={role} label={role} color="primary" onRemove={() => removeRole(role)} />
{(current?.defaultRoles || []).map((role) => (
<Tag key={role} label={role} color="primary" onRemove={editing ? () => removeRole(role) : undefined} />
))}
{(form.defaultRoles || []).length === 0 && (
{(current?.defaultRoles || []).length === 0 && (
<span className={styles.noRoles}>No default roles configured</span>
)}
</div>
<div className={styles.addRoleRow}>
<Input
placeholder="Add role..."
value={newRole}
onChange={(e) => setNewRole(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addRole(); } }}
className={styles.roleInput}
/>
<Button size="sm" variant="secondary" onClick={addRole} disabled={!newRole.trim()}>
Add
</Button>
</div>
{editing && (
<div className={styles.addRoleRow}>
<Input
placeholder="Add role..."
value={newRole}
onChange={(e) => setNewRole(e.target.value)}
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addRole(); } }}
className={styles.roleInput}
/>
<Button size="sm" variant="secondary" onClick={addRole} disabled={!newRole.trim()}>
Add
</Button>
</div>
)}
</section>
<section className={sectionStyles.section}>

3
ui/src/pages/Admin/RolesTab.tsx
View File

@@ -20,6 +20,7 @@ import {
useDeleteRole,
} from '../../api/queries/admin/rbac';
import type { RoleDetail } from '../../api/queries/admin/rbac';
import { PageLoader } from '../../components/PageLoader';
import styles from './UserManagement.module.css';
export default function RolesTab({ highlightId, onHighlightConsumed }: { highlightId?: string | null; onHighlightConsumed?: () => void }) {
@@ -115,7 +116,7 @@ export default function RolesTab({ highlightId, onHighlightConsumed }: { highlig
);
}
if (isLoading) return <Spinner size="md" />;
if (isLoading) return <PageLoader />;
return (
<>

4
ui/src/pages/Admin/UsersTab.tsx
View File

@@ -16,7 +16,6 @@ import {
AlertDialog,
SplitPane,
EntityList,
Spinner,
useToast,
} from '@cameleer/design-system';
import {
@@ -34,6 +33,7 @@ import {
} from '../../api/queries/admin/rbac';
import type { UserDetail } from '../../api/queries/admin/rbac';
import { useAuthStore } from '../../auth/auth-store';
import { PageLoader } from '../../components/PageLoader';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
@@ -200,7 +200,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
return user.directGroups.map((g) => g.name).join(', ');
}
if (isLoading) return <Spinner size="md" />;
if (isLoading) return <PageLoader />;
return (
<>

12
ui/src/pages/AppsTab/AppsTab.tsx
View File

@@ -10,7 +10,6 @@ import {
MonoText,
SectionHeader,
Select,
Spinner,
StatusDot,
Tabs,
Toggle,
@@ -40,6 +39,7 @@ import type { CatalogApp, CatalogRoute } from '../../api/queries/catalog';
import { DeploymentProgress } from '../../components/DeploymentProgress';
import { timeAgo } from '../../utils/format-utils';
import { applyTracedProcessorUpdate, applyRouteRecordingUpdate } from '../../utils/config-draft-utils';
import { PageLoader } from '../../components/PageLoader';
import styles from './AppsTab.module.css';
import sectionStyles from '../../styles/section-card.module.css';
import tableStyles from '../../styles/table-section.module.css';
@@ -117,7 +117,7 @@ function AppListView({ selectedEnv, environments }: { selectedEnv: string | unde
},
], [selectedEnv]);
if (isLoading) return <Spinner size="md" />;
if (isLoading) return <PageLoader />;
return (
<div className={styles.container}>
@@ -512,7 +512,7 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
const envMap = useMemo(() => new Map(environments.map((e) => [e.id, e])), [environments]);
const sortedVersions = useMemo(() => [...versions].sort((a, b) => b.version - a.version), [versions]);
if (!app) return <Spinner size="md" />;
if (!app) return <PageLoader />;
const env = envMap.get(app.environmentId);
@@ -522,7 +522,7 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
try {
const v = await uploadJar.mutateAsync({ appId: appSlug, file });
toast({ title: `Version ${v.version} uploaded`, description: file.name, variant: 'success' });
} catch { toast({ title: 'Upload failed', variant: 'error', duration: 86_400_000 }); }
} catch { toast({ title: 'Failed to upload JAR', variant: 'error', duration: 86_400_000 }); }
if (fileInputRef.current) fileInputRef.current.value = '';
}
@@ -530,7 +530,7 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
try {
await createDeployment.mutateAsync({ appId: appSlug, appVersionId: versionId, environmentId });
toast({ title: 'Deployment started', variant: 'success' });
} catch { toast({ title: 'Deploy failed', variant: 'error', duration: 86_400_000 }); }
} catch { toast({ title: 'Failed to deploy application', variant: 'error', duration: 86_400_000 }); }
}
function handleStop(deploymentId: string) {
@@ -542,7 +542,7 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
try {
await stopDeployment.mutateAsync({ appId: appSlug, deploymentId: stopTarget.id });
toast({ title: 'Deployment stopped', variant: 'warning' });
} catch { toast({ title: 'Stop failed', variant: 'error', duration: 86_400_000 }); }
} catch { toast({ title: 'Failed to stop deployment', variant: 'error', duration: 86_400_000 }); }
setStopTarget(null);
}