mockups/audit_log.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Audit log — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="cz-header"></div>
<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
<div class="space-y-6">
<nav aria-label="Admin sections" class="flex items-center gap-1 border-b border-border text-sm">
<a href="admin_settings.html" class="px-3 py-2.5 border-b -mb-px border-transparent text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5">Settings</a>
<a href="admin_users.html" class="px-3 py-2.5 border-b -mb-px border-transparent text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5">Users</a>
<a href="audit_log.html" aria-current="page" class="px-3 py-2.5 border-b -mb-px border-foreground text-foreground font-medium inline-flex items-center gap-1.5">Audit log</a>
<a href="sso_settings.html" class="px-3 py-2.5 border-b -mb-px border-transparent text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5">Single sign-on</a>
</nav>
<div class="flex justify-between items-center">
<h1 class="text-2xl font-semibold tracking-tight">Audit log</h1>
<span id="audit-count" class="text-sm text-muted-foreground">126 entries</span>
</div>
<div class="rounded-md border border-border bg-card p-4">
<form id="audit-filter" method="GET" action="audit_log.html" class="flex flex-wrap gap-4 items-end">
<div class="space-y-1.5">
<label for="filter-action" class="block text-xs font-medium text-muted-foreground">Action</label>
<input id="filter-action" type="text" name="action" placeholder="e.g. login, repo.create" class="flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 w-48" />
</div>
<div class="space-y-1.5">
<label for="filter-target-type" class="block text-xs font-medium text-muted-foreground">Target type</label>
<input id="filter-target-type" type="text" name="target_type" placeholder="e.g. repo, user" class="flex h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 w-40" />
</div>
<div class="flex gap-2">
<button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none h-9 px-4 text-sm bg-primary text-primary-foreground hover:bg-primary/90">Filter</button>
<a href="audit_log.html" id="audit-reset" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 text-sm">Reset</a>
</div>
</form>
</div>
<div class="rounded-md border border-border bg-card overflow-hidden">
<table id="audit-table" class="w-full text-sm">
<thead>
<tr class="text-left text-muted-foreground border-b border-border bg-muted">
<th class="px-4 py-3 font-medium">Time</th>
<th class="px-4 py-3 font-medium">Actor</th>
<th class="px-4 py-3 font-medium">Action</th>
<th class="px-4 py-3 font-medium">Target</th>
<th class="px-4 py-3 font-medium">IP address</th>
</tr>
</thead>
<tbody class="divide-y divide-border">
<tr class="hover:bg-muted/40" data-action="admin.user.suspend" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-06T09:41:12Z">Nov 6, 2026 09:41:12</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">malith</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">admin.user.suspend</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
tomas
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">203.0.113.7</td>
</tr>
<tr class="hover:bg-muted/40" data-action="repo.create" data-target-type="repo">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-06T09:38:55Z">Nov 6, 2026 09:38:55</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">daisy</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">repo.create</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">repo</span>
daisy/dotfiles
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">198.51.100.23</td>
</tr>
<tr class="hover:bg-muted/40" data-action="user.token.create" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-06T08:57:03Z">Nov 6, 2026 08:57:03</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">priya</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">user.token.create</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
priya
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">192.0.2.88</td>
</tr>
<tr class="hover:bg-muted/40" data-action="repo.transfer.request" data-target-type="repo">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-05T17:22:40Z">Nov 5, 2026 17:22:40</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">yumi</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">repo.transfer.request</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">repo</span>
yumi/notes
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">198.51.100.41</td>
</tr>
<tr class="hover:bg-muted/40" data-action="admin.user.promote" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-05T16:10:09Z">Nov 5, 2026 16:10:09</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">malith</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">admin.user.promote</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
priya
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">203.0.113.7</td>
</tr>
<tr class="hover:bg-muted/40" data-action="repo.import" data-target-type="repo">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-05T14:02:31Z">Nov 5, 2026 14:02:31</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">rchen</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">repo.import</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">repo</span>
rchen/warehouse-etl
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">192.0.2.14</td>
</tr>
<tr class="hover:bg-muted/40" data-action="user.password.change" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-05T11:47:18Z">Nov 5, 2026 11:47:18</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">daisy</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">user.password.change</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
daisy
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">198.51.100.23</td>
</tr>
<tr class="hover:bg-muted/40" data-action="admin.user.credentials_revoke" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-04T19:30:52Z">Nov 4, 2026 19:30:52</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">malith</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">admin.user.credentials_revoke</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
tomas
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">203.0.113.7</td>
</tr>
<tr class="hover:bg-muted/40" data-action="org.profile.update" data-target-type="org">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-04T15:05:27Z">Nov 4, 2026 15:05:27</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">priya</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">org.profile.update</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">org</span>
acme-corp
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">192.0.2.88</td>
</tr>
<tr class="hover:bg-muted/40" data-action="repo.mirror.create" data-target-type="repo">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-04T10:16:44Z">Nov 4, 2026 10:16:44</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">yumi</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">repo.mirror.create</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">repo</span>
mkappworks/cloudzilla
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">198.51.100.41</td>
</tr>
<tr class="hover:bg-muted/40" data-action="user.sessions.revoke" data-target-type="user">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-03T21:08:13Z">Nov 3, 2026 21:08:13</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">rchen</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">user.sessions.revoke</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">user</span>
rchen
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">192.0.2.14</td>
</tr>
<tr class="hover:bg-muted/40" data-action="admin.org.owner_add" data-target-type="org">
<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
<time datetime="2026-11-03T13:55:00Z">Nov 3, 2026 13:55:00</time>
</td>
<td class="px-4 py-3 font-medium text-foreground">malith</td>
<td class="px-4 py-3">
<code class="text-xs bg-muted border border-border rounded-sm px-1.5 py-0.5 font-mono text-foreground">admin.org.owner_add</code>
</td>
<td class="px-4 py-3 text-foreground">
<span class="text-xs text-muted-foreground mr-1">org</span>
acme-corp
</td>
<td class="px-4 py-3 text-muted-foreground font-mono text-xs">203.0.113.7</td>
</tr>
</tbody>
</table>
<div id="audit-empty" class="hidden text-center py-12 text-muted-foreground">
<p>No audit log entries found.</p>
</div>
</div>
<div id="audit-pager" class="flex justify-between items-center text-sm">
<span class="text-muted-foreground">Page 1 of 3</span>
<div class="flex gap-2">
<a href="#" class="px-3 py-1 bg-muted text-foreground rounded-sm hover:bg-muted transition-colors">Next →</a>
</div>
</div>
</div>
</main>
<div id="cz-footer"></div>
<script>
(function () {
var action = document.getElementById('filter-action');
var type = document.getElementById('filter-target-type');
var rows = document.querySelectorAll('#audit-table tbody tr');
function apply() {
var a = action.value.trim().toLowerCase();
var t = type.value.trim().toLowerCase();
var filtered = !!(a || t);
var shown = 0;
rows.forEach(function (r) {
var ok = (!a || r.dataset.action.indexOf(a) === 0) && (!t || r.dataset.targetType === t);
r.classList.toggle('hidden', !ok);
if (ok) shown++;
});
document.getElementById('audit-table').classList.toggle('hidden', shown === 0);
document.getElementById('audit-empty').classList.toggle('hidden', shown !== 0);
document.getElementById('audit-pager').classList.toggle('hidden', filtered);
var n = filtered ? shown : 126;
document.getElementById('audit-count').textContent = n + (n === 1 ? ' entry' : ' entries');
}
document.getElementById('audit-filter').addEventListener('submit', function (e) { e.preventDefault(); apply(); });
document.getElementById('audit-reset').addEventListener('click', function (e) {
e.preventDefault();
action.value = ''; type.value = '';
apply();
});
})();
</script>
<script src="shell.js"></script>
</body>
</html>