copilot-swe-agent[bot]
fdff970e59
Replace all hardcoded English text in credentials.html and audit_logs.html
with {{ _("key") }} translation function calls.
New keys added:
credentials.*: page_title, title, subtitle, total_credentials, configured,
not_configured, legend_title, legend_db, legend_env_before, legend_env_after,
legend_missing, legend_restart, col_credential, col_source, col_action,
table_for, restart_title, status_missing, source_db_title, source_env_title,
edit_in_settings, manage_settings, raw_json
audit.*: page_title, title, subtitle, siem_enabled_title, siem_off,
siem_disabled_title, refresh_label, filter_action, filter_all_actions,
filter_user, filter_all_users, filter_severity, filter_resource_type,
filter_resource_placeholder, filters_section_label, col_timestamp,
col_resource, col_ip, table_label, no_events, no_events_hint,
pagination_label, prev_label, prev, next_label, next, critical
Reused existing keys: common.description, common.status, common.actions,
common.edit, common.all, common.info, common.warning, common.error,
common.refresh, common.details, common.loading
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
223 lines
12 KiB
HTML
223 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ _("audit.page_title") }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div x-data="auditLogs()" x-init="fetchLogs()" class="container mx-auto px-4 py-8 max-w-7xl">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
|
<i class="fas fa-shield-halved mr-2 text-indigo-600" aria-hidden="true"></i>{{ _("audit.title") }}
|
|
</h1>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
{{ _("audit.subtitle") }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-3 md:mt-0 flex items-center gap-3">
|
|
{% if siem_enabled %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100"
|
|
title="{{ _('audit.siem_enabled_title') ~ (siem_transport|upper) }}">
|
|
<i class="fas fa-tower-broadcast mr-1" aria-hidden="true"></i>SIEM: {{ siem_transport|upper }}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
|
|
title="{{ _('audit.siem_disabled_title') }}">
|
|
<i class="fas fa-tower-broadcast mr-1" aria-hidden="true"></i>{{ _("audit.siem_off") }}
|
|
</span>
|
|
{% endif %}
|
|
<button @click="fetchLogs()" class="inline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 min-h-[44px] min-w-[44px]"
|
|
aria-label="{{ _('audit.refresh_label') }}">
|
|
<i class="fas fa-arrows-rotate mr-1" aria-hidden="true"></i>{{ _("common.refresh") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6" aria-label="{{ _('audit.filters_section_label') }}">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div>
|
|
<label for="filter-action" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_action") }}</label>
|
|
<select id="filter-action" x-model="filters.action" @change="fetchLogs()"
|
|
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
|
<option value="">{{ _("audit.filter_all_actions") }}</option>
|
|
<template x-for="a in distinctActions" :key="a">
|
|
<option :value="a" x-text="a"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="filter-user" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_user") }}</label>
|
|
<select id="filter-user" x-model="filters.user" @change="fetchLogs()"
|
|
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
|
<option value="">{{ _("audit.filter_all_users") }}</option>
|
|
<template x-for="u in distinctUsers" :key="u">
|
|
<option :value="u" x-text="u"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="filter-severity" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_severity") }}</label>
|
|
<select id="filter-severity" x-model="filters.severity" @change="fetchLogs()"
|
|
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm">
|
|
<option value="">{{ _("common.all") }}</option>
|
|
<option value="info">{{ _("common.info") }}</option>
|
|
<option value="warning">{{ _("common.warning") }}</option>
|
|
<option value="error">{{ _("common.error") }}</option>
|
|
<option value="critical">{{ _("audit.critical") }}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="filter-resource" class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("audit.filter_resource_type") }}</label>
|
|
<input id="filter-resource" type="text" x-model.debounce.300ms="filters.resource_type" @input="fetchLogs()"
|
|
placeholder="{{ _('audit.filter_resource_placeholder') }}"
|
|
class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm min-h-[44px]">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results summary -->
|
|
<div class="flex items-center justify-between mb-3 text-sm text-gray-500 dark:text-gray-400" aria-live="polite">
|
|
<span x-show="!loading" x-text="total + ' event' + (total !== 1 ? 's' : '') + ' found'"></span>
|
|
<span x-show="loading"><i class="fas fa-spinner fa-spin mr-1" aria-hidden="true"></i>{{ _("common.loading") }}</span>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700" aria-label="{{ _('audit.table_label') }}">
|
|
<thead class="bg-gray-50 dark:bg-gray-700">
|
|
<tr>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_timestamp") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_severity") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_user") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.filter_action") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_resource") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("audit.col_ip") }}</th>
|
|
<th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ _("common.details") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<template x-for="e in entries" :key="e.id">
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-300" x-text="formatTs(e.timestamp)"></td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs">
|
|
<span :class="severityClass(e.severity)" class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" x-text="e.severity"></span>
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-700 dark:text-gray-200" x-text="e.user"></td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs font-mono text-indigo-700 dark:text-indigo-300" x-text="e.action"></td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-300">
|
|
<span x-text="e.resource_type || '—'"></span>
|
|
<span x-show="e.resource_id" class="text-gray-400" x-text="' #' + e.resource_id"></span>
|
|
</td>
|
|
<td class="px-4 py-2 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400" x-text="e.ip_address || '—'"></td>
|
|
<td class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 max-w-xs truncate" :title="e.details ? JSON.stringify(e.details) : ''" x-text="e.details ? JSON.stringify(e.details) : '—'"></td>
|
|
</tr>
|
|
</template>
|
|
<tr x-show="!loading && entries.length === 0">
|
|
<td colspan="7" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
|
|
<i class="fas fa-inbox text-3xl mb-2" aria-hidden="true"></i>
|
|
<p class="text-lg">{{ _("audit.no_events") }}</p>
|
|
<p class="text-sm mt-1">{{ _("audit.no_events_hint") }}</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav class="flex items-center justify-between mt-4" aria-label="{{ _('audit.pagination_label') }}" x-show="total > filters.limit">
|
|
<button @click="prevPage()" :disabled="filters.offset === 0"
|
|
class="px-3 py-1.5 rounded-md text-sm border border-gray-300 dark:border-gray-600 disabled:opacity-50 min-h-[44px] min-w-[44px]"
|
|
aria-label="{{ _('audit.prev_label') }}">
|
|
<i class="fas fa-chevron-left mr-1" aria-hidden="true"></i>{{ _("audit.prev") }}
|
|
</button>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400" x-text="'Page ' + currentPage + ' of ' + totalPages"></span>
|
|
<button @click="nextPage()" :disabled="filters.offset + filters.limit >= total"
|
|
class="px-3 py-1.5 rounded-md text-sm border border-gray-300 dark:border-gray-600 disabled:opacity-50 min-h-[44px] min-w-[44px]"
|
|
aria-label="{{ _('audit.next_label') }}">
|
|
{{ _("audit.next") }}<i class="fas fa-chevron-right ml-1" aria-hidden="true"></i>
|
|
</button>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function auditLogs() {
|
|
return {
|
|
entries: [],
|
|
total: 0,
|
|
loading: false,
|
|
distinctActions: [],
|
|
distinctUsers: [],
|
|
filters: {
|
|
action: '',
|
|
user: '',
|
|
severity: '',
|
|
resource_type: '',
|
|
limit: 50,
|
|
offset: 0,
|
|
},
|
|
get currentPage() { return Math.floor(this.filters.offset / this.filters.limit) + 1; },
|
|
get totalPages() { return Math.max(1, Math.ceil(this.total / this.filters.limit)); },
|
|
|
|
async fetchLogs() {
|
|
this.loading = true;
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (this.filters.action) params.set('action', this.filters.action);
|
|
if (this.filters.user) params.set('user', this.filters.user);
|
|
if (this.filters.severity) params.set('severity', this.filters.severity);
|
|
if (this.filters.resource_type) params.set('resource_type', this.filters.resource_type);
|
|
params.set('limit', this.filters.limit);
|
|
params.set('offset', this.filters.offset);
|
|
|
|
const [logsResp, actionsResp, usersResp] = await Promise.all([
|
|
fetch('/api/audit-logs?' + params.toString()),
|
|
fetch('/api/audit-logs/actions'),
|
|
fetch('/api/audit-logs/users'),
|
|
]);
|
|
if (logsResp.ok) {
|
|
const data = await logsResp.json();
|
|
this.entries = data.items;
|
|
this.total = data.total;
|
|
}
|
|
if (actionsResp.ok) this.distinctActions = await actionsResp.json();
|
|
if (usersResp.ok) this.distinctUsers = await usersResp.json();
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
prevPage() {
|
|
if (this.filters.offset > 0) {
|
|
this.filters.offset = Math.max(0, this.filters.offset - this.filters.limit);
|
|
this.fetchLogs();
|
|
}
|
|
},
|
|
nextPage() {
|
|
if (this.filters.offset + this.filters.limit < this.total) {
|
|
this.filters.offset += this.filters.limit;
|
|
this.fetchLogs();
|
|
}
|
|
},
|
|
formatTs(iso) {
|
|
if (!iso) return '—';
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
},
|
|
severityClass(sev) {
|
|
const map = {
|
|
info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
|
|
warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
|
|
error: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
|
|
critical: 'bg-red-200 text-red-900 dark:bg-red-800 dark:text-red-100',
|
|
};
|
|
return map[sev] || 'bg-gray-100 text-gray-800';
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|