352 lines
13 KiB
Plaintext
352 lines
13 KiB
Plaintext
package adminview
|
|
|
|
import (
|
|
"fmt"
|
|
"git.haelnorr.com/h/oslstats/internal/db"
|
|
"time"
|
|
)
|
|
|
|
templ AuditLogsList(logs *db.List[db.AuditLog], users []*db.User, actions []string, resourceTypes []string) {
|
|
<div class="space-y-4">
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-center mb-6 px-4">
|
|
<h1 class="text-2xl font-bold text-text">Audit Logs</h1>
|
|
</div>
|
|
<!-- Filters -->
|
|
<div class="bg-surface0 border border-surface1 rounded-lg p-4 mb-6">
|
|
<form
|
|
id="audit-filters-form"
|
|
hx-post="/admin/audit/filter"
|
|
hx-target="#audit-results-container"
|
|
hx-trigger="submit"
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
|
>
|
|
<!-- User Filter (Custom Multi-select Dropdown) -->
|
|
@multiSelectDropdown("user_id", "Users", userOptions(users))
|
|
<!-- Action Filter (Custom Multi-select Dropdown) -->
|
|
@multiSelectDropdown("action", "Actions", stringOptions(actions))
|
|
<!-- Resource Type Filter (Custom Multi-select Dropdown) -->
|
|
@multiSelectDropdown("resource_type", "Resource Types", stringOptions(resourceTypes))
|
|
<!-- Result Filter (Custom Multi-select Dropdown) -->
|
|
@multiSelectDropdown("result", "Results", []selectOption{
|
|
{Value: "success", Label: "Success"},
|
|
{Value: "denied", Label: "Denied"},
|
|
{Value: "error", Label: "Error"},
|
|
})
|
|
<!-- Start Date Filter (Flatpickr) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-subtext0 mb-1">Start Date</label>
|
|
<input
|
|
type="text"
|
|
name="start_date"
|
|
class="flatpickr-date w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
|
|
placeholder="DD/MM/YYYY"
|
|
onchange="this.form.requestSubmit()"
|
|
/>
|
|
</div>
|
|
<!-- End Date Filter (Flatpickr) -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-subtext0 mb-1">End Date</label>
|
|
<input
|
|
type="text"
|
|
name="end_date"
|
|
class="flatpickr-date w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text focus:outline-none focus:border-blue"
|
|
placeholder="DD/MM/YYYY"
|
|
onchange="this.form.requestSubmit()"
|
|
/>
|
|
</div>
|
|
<!-- Clear Filters Button -->
|
|
<div class="md:col-span-2 lg:col-span-3 flex gap-2">
|
|
<button
|
|
type="button"
|
|
onclick="clearAuditFilters()"
|
|
class="px-4 py-2 bg-surface1 hover:bg-surface2 text-text rounded font-medium transition hover:cursor-pointer"
|
|
>
|
|
Clear Filters
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- Results container - this gets replaced by HTMX -->
|
|
<div id="audit-results-container">
|
|
@AuditLogsResults(logs)
|
|
</div>
|
|
<!-- Modal container for detail view -->
|
|
<div id="modal-container"></div>
|
|
</div>
|
|
}
|
|
|
|
templ AuditLogsResults(logs *db.List[db.AuditLog]) {
|
|
<div
|
|
x-data={ fmt.Sprintf("{ page: %d, perPage: %d, order: '%s', orderBy: '%s' }",
|
|
logs.PageOpts.Page,
|
|
logs.PageOpts.PerPage,
|
|
logs.PageOpts.Order,
|
|
logs.PageOpts.OrderBy) }
|
|
>
|
|
<!-- Results section -->
|
|
if len(logs.Items) == 0 {
|
|
<div class="bg-mantle border border-surface1 rounded-lg p-8 text-center">
|
|
<p class="text-subtext0 text-lg">No audit logs found</p>
|
|
</div>
|
|
} else {
|
|
<div class="bg-surface0 border border-surface1 rounded-lg overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-mantle border-b border-surface1">
|
|
<tr>
|
|
@auditTableHeader("created_at", "Timestamp", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
@auditTableHeader("user_id", "User", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
@auditTableHeader("action", "Action", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
@auditTableHeader("resource_type", "Resource", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
@auditTableHeader("resource_id", "Resource ID", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
@auditTableHeader("result", "Result", logs.PageOpts.OrderBy, string(logs.PageOpts.Order))
|
|
<th class="px-4 py-3 text-left text-sm font-semibold text-text">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-surface1">
|
|
for _, log := range logs.Items {
|
|
<tr class="hover:bg-surface1 transition-colors">
|
|
<td class="px-4 py-3 text-sm text-subtext0 whitespace-nowrap">
|
|
{ formatFullTimestamp(log.CreatedAt) }
|
|
</td>
|
|
<td class="px-4 py-3 text-sm font-medium text-text">
|
|
if log.User != nil {
|
|
{ log.User.Username }
|
|
} else {
|
|
<span class="text-subtext1 italic">Unknown</span>
|
|
}
|
|
</td>
|
|
<td class="px-4 py-3 text-xs text-subtext0 font-mono">
|
|
{ log.Action }
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-subtext0">
|
|
{ log.ResourceType }
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-subtext0 font-mono">
|
|
if log.ResourceID != nil {
|
|
{ *log.ResourceID }
|
|
} else {
|
|
<span class="text-subtext1 italic">—</span>
|
|
}
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
@resultBadge(log.Result)
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<button
|
|
hx-get={ fmt.Sprintf("/admin/audit/%d", log.ID) }
|
|
hx-target="#modal-container"
|
|
class="px-3 py-1 bg-blue hover:bg-blue/80 text-mantle rounded text-xs font-medium transition hover:cursor-pointer"
|
|
>
|
|
Details
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination controls -->
|
|
<div class="mt-6 flex flex-col gap-4">
|
|
<!-- Page info and per-page selector -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-subtext0">
|
|
<div>
|
|
if logs.Total > 0 {
|
|
Showing { fmt.Sprintf("%d", logs.PageOpts.StartItem()) } - { fmt.Sprintf("%d", logs.PageOpts.EndItem(logs.Total)) } of { fmt.Sprintf("%d", logs.Total) } results
|
|
} else {
|
|
No results
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<label for="per-page-select">Per page:</label>
|
|
<select
|
|
id="per-page-select"
|
|
class="py-1 px-2 rounded-lg bg-surface0 border border-surface1 text-text focus:border-blue outline-none"
|
|
x-model.number="perPage"
|
|
@change="submitAuditFilter(page, perPage, order, orderBy)"
|
|
>
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- Pagination buttons -->
|
|
if logs.Total > 0 && logs.PageOpts.TotalPages(logs.Total) > 1 {
|
|
<div class="flex flex-wrap justify-center items-center gap-2">
|
|
<!-- First button -->
|
|
<button
|
|
type="button"
|
|
@click="submitAuditFilter(1, perPage, order, orderBy)"
|
|
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
|
|
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) }
|
|
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) +
|
|
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
|
|
>
|
|
<span class="hidden sm:inline">First</span>
|
|
<span class="sm:hidden"><<</span>
|
|
</button>
|
|
<!-- Previous button -->
|
|
<button
|
|
type="button"
|
|
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.Page-1) }
|
|
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
|
|
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) }
|
|
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasPrevPage()) +
|
|
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
|
|
>
|
|
<span class="hidden sm:inline">Previous</span>
|
|
<span class="sm:hidden"><</span>
|
|
</button>
|
|
<!-- Page numbers -->
|
|
for _, pageNum := range logs.PageOpts.GetPageRange(logs.Total, 7) {
|
|
<button
|
|
type="button"
|
|
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", pageNum) }
|
|
class={ "px-3 py-2 rounded-lg border transition",
|
|
templ.KV("bg-blue border-blue text-mantle font-bold", pageNum == logs.PageOpts.Page),
|
|
templ.KV("bg-mantle border-surface1 text-text hover:bg-surface0 hover:border-blue cursor-pointer", pageNum != logs.PageOpts.Page) }
|
|
>
|
|
{ fmt.Sprintf("%d", pageNum) }
|
|
</button>
|
|
}
|
|
<!-- Next button -->
|
|
<button
|
|
type="button"
|
|
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.Page+1) }
|
|
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
|
|
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) }
|
|
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) +
|
|
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
|
|
>
|
|
<span class="hidden sm:inline">Next</span>
|
|
<span class="sm:hidden">></span>
|
|
</button>
|
|
<!-- Last button -->
|
|
<button
|
|
type="button"
|
|
@click={ fmt.Sprintf("submitAuditFilter(%d, perPage, order, orderBy)", logs.PageOpts.TotalPages(logs.Total)) }
|
|
class="px-3 py-2 rounded-lg border transition border-surface1 text-text bg-mantle"
|
|
:disabled={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) }
|
|
:class={ fmt.Sprintf("%t", !logs.PageOpts.HasNextPage(logs.Total)) +
|
|
" ? 'text-subtext0 cursor-not-allowed opacity-50' : 'hover:bg-surface0 hover:border-blue cursor-pointer'" }
|
|
>
|
|
<span class="hidden sm:inline">Last</span>
|
|
<span class="sm:hidden">>></span>
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ auditTableHeader(field string, label string, currentField string, currentOrder string) {
|
|
{{
|
|
isActive := currentField == field
|
|
baseClasses := "px-4 py-3 text-left text-sm font-semibold text-text cursor-pointer select-none hover:text-blue transition-colors"
|
|
arrow := ""
|
|
if isActive {
|
|
if currentOrder == "ASC" {
|
|
arrow = " ↑"
|
|
} else {
|
|
arrow = " ↓"
|
|
}
|
|
}
|
|
}}
|
|
<th class={ baseClasses } @click={ fmt.Sprintf("sortAuditColumn('%s', order, orderBy)", field) }>
|
|
{ label }
|
|
if arrow != "" {
|
|
<span class="text-blue">{ arrow }</span>
|
|
}
|
|
</th>
|
|
}
|
|
|
|
type selectOption struct {
|
|
Value string
|
|
Label string
|
|
}
|
|
|
|
func userOptions(users []*db.User) []selectOption {
|
|
opts := make([]selectOption, len(users))
|
|
for i, u := range users {
|
|
opts[i] = selectOption{Value: fmt.Sprintf("%d", u.ID), Label: u.Username}
|
|
}
|
|
return opts
|
|
}
|
|
|
|
func stringOptions(strs []string) []selectOption {
|
|
opts := make([]selectOption, len(strs))
|
|
for i, s := range strs {
|
|
opts[i] = selectOption{Value: s, Label: s}
|
|
}
|
|
return opts
|
|
}
|
|
|
|
templ multiSelectDropdown(name string, label string, options []selectOption) {
|
|
{{ containerId := name + "-container" }}
|
|
<div>
|
|
<label class="block text-sm font-medium text-subtext0 mb-1">{ label }</label>
|
|
<div
|
|
id={ containerId }
|
|
class="multi-select-container relative"
|
|
>
|
|
<!-- Hidden input to store values -->
|
|
<input type="hidden" name={ name } value=""/>
|
|
<!-- Trigger button -->
|
|
<button
|
|
type="button"
|
|
onclick={ templ.JSUnsafeFuncCall(fmt.Sprintf("toggleMultiSelect('%s')", containerId)) }
|
|
class="multi-select-trigger w-full bg-mantle border border-surface1 rounded px-3 py-2 text-text text-left flex justify-between items-center hover:border-surface2 focus:outline-none focus:border-blue"
|
|
>
|
|
<span class="multi-select-selected">
|
|
<span class="text-subtext1">Select...</span>
|
|
</span>
|
|
<svg class="w-4 h-4 text-subtext0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown -->
|
|
<div
|
|
id={ containerId + "-dropdown" }
|
|
class="multi-select-dropdown hidden absolute z-50 w-full mt-1 bg-mantle border border-surface1 rounded shadow-lg max-h-60 overflow-y-auto"
|
|
>
|
|
for _, opt := range options {
|
|
<div
|
|
data-value={ opt.Value }
|
|
class="multi-select-option px-3 py-2 text-sm text-text cursor-pointer hover:bg-surface1 transition-colors"
|
|
onclick={ templ.JSUnsafeFuncCall(fmt.Sprintf("toggleMultiSelectOption('%s', '%s', '%s')", containerId, opt.Value, opt.Label)) }
|
|
>
|
|
{ opt.Label }
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
templ resultBadge(result string) {
|
|
{{
|
|
var classes string
|
|
switch result {
|
|
case "success":
|
|
classes = "px-2 py-0.5 bg-green/20 text-green rounded text-xs font-medium"
|
|
case "denied":
|
|
classes = "px-2 py-0.5 bg-yellow/20 text-yellow rounded text-xs font-medium"
|
|
case "error":
|
|
classes = "px-2 py-0.5 bg-red/20 text-red rounded text-xs font-medium"
|
|
default:
|
|
classes = "px-2 py-0.5 bg-surface1 text-subtext0 rounded text-xs font-medium"
|
|
}
|
|
}}
|
|
<span class={ classes }>{ result }</span>
|
|
}
|
|
|
|
func formatFullTimestamp(unixTime int64) string {
|
|
t := time.Unix(unixTime, 0)
|
|
return t.Format("Jan 2, 2006 15:04:05")
|
|
}
|