audit.go.html

{{/* Copyright (c) ClaceIO, LLC */}}
{{/* SPDX-License-Identifier: Apache-2.0 */}}
{{/* Audit logs page (/audit): filter form, rid trace banner and the events
  table with infinite scroll. HTMX partial: block audit_rows renders the
  next page of rows
*/}}
{{ template "page_open" (dict "Ctx" . "Main" "space-y-4 max-w-6xl") }}
          <!-- Header -->
          <div
            class="page-header flex items-center gap-2 flex-wrap mb-2 md:mb-6">
            {{ template "hamburger" . }}
            <div>
              {{ template "page_title" "Audit Logs" }}
              <p class="page-desc text-sm text-base-content/70">
                HTTP, system and custom audit events
              </p>
            </div>
          </div>

          <!-- Filters -->
          <form
            id="audit-filters"
            class="card bg-base-100 border border-base-300"
            hx-get="{{ .AppPath }}/audit"
            hx-trigger="input changed delay:500ms, change"
            hx-target="#audit-rows"
            hx-swap="innerHTML"
            hx-push-url="true"
            hx-include="closest form"
            hx-indicator="#page-progress"
            onsubmit="return false">
            <div class="card-body p-4 gap-3">
              <div class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-3">
                <div>
                  <label
                    class="block text-xs text-base-content/70 mb-1"
                    for="app_glob"
                    >App</label
                  >
                  {{ $appGlob := .Data.Filters.app_glob }}
                  <select
                    class="select select-sm w-full min-w-0 font-mono"
                    id="app_glob"
                    name="app_glob">
                    <option value="" {{ if not $appGlob }}selected{{ end }}>
                      all apps
                    </option>
                    {{ template "select_options" (dict "Options" .Data.Apps "Current" $appGlob) }}
                  </select>
                </div>

                <div>
                  <label
                    class="block text-xs text-base-content/70 mb-1"
                    for="event_type"
                    >Event type</label
                  >
                  <select
                    class="select select-sm w-full font-mono"
                    id="event_type"
                    name="event_type">
                    <option value="">all</option>
                    {{ range $t := list "http" "system" "action" "mcp" "custom" }}
                      <option
                        value="{{ $t }}"
                        {{ if eq $.Data.Filters.event_type $t }}
                          selected
                        {{ end }}>
                        {{ $t }}
                      </option>
                    {{ end }}
                  </select>
                </div>

                <div>
                  <label
                    class="block text-xs text-base-content/70 mb-1"
                    for="operation"
                    >Operation</label
                  >
                  {{ $op := .Data.Filters.operation }}
                  <select
                    id="operation"
                    name="operation"
                    class="select select-sm w-full min-w-0 font-mono">
                    <option value="" {{ if not $op }}selected{{ end }}>
                      all
                    </option>
                    {{ template "select_options" (dict "Options" .Data.Operations "Current" $op) }}
                  </select>
                </div>

                <div>
                  <label
                    class="block text-xs text-base-content/70 mb-1"
                    for="target"
                    >Target</label
                  >
                  <input
                    type="text"
                    id="target"
                    name="target"
                    value="{{ .Data.Filters.target }}"
                    placeholder="url path, app path…"
                    class="input input-sm w-full font-mono" />
                </div>
              </div>

              <details
                class="collapse collapse-arrow bg-base-200/40 rounded-lg"
                {{ if or .Data.Filters.user_id .Data.Filters.status .Data.Filters.start_date .Data.Filters.end_date }}
                  open
                {{ end }}>
                <summary
                  class="collapse-title min-h-0 py-2 text-xs font-medium text-base-content/70">
                  Advanced filters
                </summary>
                <div class="collapse-content">
                  <div
                    class="grid grid-cols-2 lg:grid-cols-4 gap-x-4 gap-y-3 pt-1">
                    <div>
                      <label
                        class="block text-xs text-base-content/70 mb-1"
                        for="user_id"
                        >User</label
                      >
                      <input
                        type="text"
                        class="input input-sm w-full font-mono"
                        id="user_id"
                        name="user_id"
                        value="{{ .Data.Filters.user_id }}" />
                    </div>

                    <div>
                      <label
                        class="block text-xs text-base-content/70 mb-1"
                        for="status"
                        >Status</label
                      >
                      <select
                        class="select select-sm w-full font-mono"
                        id="status"
                        name="status">
                        <option value="">all</option>
                        {{ range $s := list "Success" "Failed" "200" "400" "401" "403" "404" "500" }}
                          <option
                            value="{{ $s }}"
                            {{ if eq $.Data.Filters.status $s }}
                              selected
                            {{ end }}>
                            {{ $s }}
                          </option>
                        {{ end }}
                      </select>
                    </div>

                    <div>
                      <label
                        class="block text-xs text-base-content/70 mb-1"
                        for="start_date"
                        >From</label
                      >
                      <input
                        type="date"
                        class="input input-sm w-full"
                        id="start_date"
                        name="start_date"
                        value="{{ .Data.Filters.start_date }}" />
                    </div>

                    <div>
                      <label
                        class="block text-xs text-base-content/70 mb-1"
                        for="end_date"
                        >To</label
                      >
                      <input
                        type="date"
                        class="input input-sm w-full"
                        id="end_date"
                        name="end_date"
                        value="{{ .Data.Filters.end_date }}" />
                    </div>
                  </div>
                </div>
              </details>

              {{ block "audit_trace_banner" . }}
                {{/* Trace mode: all events of one request. On HTMX row swaps
                  the audit_rows partial re-renders this block with
                  hx-swap-oob, so entering/leaving trace mode updates the
                  banner without touching the filter inputs; the hidden
                  rid input keeps later filter changes scoped to the
                  trace
                */}}
                <div
                  id="audit-trace-banner"
                  {{ if .IsPartial }}hx-swap-oob="true"{{ end }}>
                  {{ if .Data.Filters.rid }}
                    <div
                      role="alert"
                      class="alert alert-vertical sm:alert-horizontal alert-info alert-soft py-2 text-sm justify-items-start text-start">
                      <span aria-hidden="true">🔍</span>
                      {{/* min-w-0 + break-all: the rid is one unbreakable
                        token, without them it pushes Clear trace off screen
                        on mobile
                      */}}
                      <span class="min-w-0">
                        Showing all events for request
                        <span class="font-mono text-xs break-all"
                          >{{ .Data.Filters.rid }}</span
                        >
                      </span>
                      <button
                        type="button"
                        class="btn btn-xs btn-ghost ml-auto"
                        hx-get="{{ .AppPath }}/audit"
                        hx-include="#audit-filters [name]:not([name=rid])"
                        hx-target="#audit-rows"
                        hx-swap="innerHTML"
                        hx-push-url="true"
                        hx-indicator="#page-progress">
                        Clear trace
                      </button>
                    </div>
                    <input
                      type="hidden"
                      name="rid"
                      value="{{ .Data.Filters.rid }}" />
                  {{ end }}
                </div>
              {{ end }}
            </div>
          </form>

          {{ template "page_progress" }}

          {{ template "error_alert" .Data.FlashError }}


          <!-- Events, infinite scroll -->
          <div class="card bg-base-100 border border-base-300">
            <div class="overflow-x-auto">
              <table class="table table-sm">
                <thead>
                  <tr>
                    <th scope="col" class="w-8">
                      <span class="sr-only">Trace</span>
                    </th>
                    <th scope="col">Time</th>
                    <th scope="col" class="hidden sm:table-cell">Type</th>
                    <th scope="col">Operation</th>
                    <th scope="col">Target</th>
                    <th scope="col" class="hidden md:table-cell">App</th>
                    <th scope="col" class="hidden lg:table-cell">User</th>
                    <th scope="col">Status</th>
                  </tr>
                </thead>
                <tbody id="audit-rows">
                  {{ block "audit_rows" . }}
                    {{ $count := len .Data.Events }}
                    {{ range $i, $e := .Data.Events }}
                      <tr
                        class="group hover:bg-base-200/60"
                        {{ if eq $count (add $i 1) }}
                          hx-get="{{ $.Data.NextPage }}" hx-trigger="revealed"
                          hx-swap="afterend" hx-indicator="#audit-loading"
                        {{ end }}>
                        <td class="w-8">
                          {{/* Events recorded outside a request (schedulers,
                            internal jobs) have no request id to trace. In
                            trace mode the rows already show this request:
                            a chevron would reload the same page
                          */}}
                          {{ if and $e.rid (ne $e.rid $.Data.Filters.rid) }}
                            <a
                              class="btn btn-xs btn-ghost btn-square tooltip tooltip-right"
                              data-tip="Expand: all events for this request"
                              aria-label="Trace request {{ $e.rid }}"
                              href="{{ $.AppPath }}/audit?rid={{ $e.rid }}"
                              hx-get="{{ $.AppPath }}/audit?rid={{ $e.rid }}"
                              hx-target="#audit-rows"
                              hx-swap="innerHTML"
                              hx-push-url="true"
                              hx-indicator="#page-progress">
                              {{ template "drilldown_icon" }}
                            </a>
                          {{ end }}
                        </td>
                        <td
                          class="text-xs text-base-content/70 whitespace-nowrap">
                          {{ template "time_ago" (dict "Time" $e.create_time "Res" 2 "Pos" "right") }}
                        </td>
                        <td class="hidden sm:table-cell">
                          {{ if eq $e.event_type "http" }}
                            <span
                              class="badge badge-xs badge-soft badge-primary"
                              >http</span
                            >
                          {{ else if eq $e.event_type "system" }}
                            <span
                              class="badge badge-xs badge-soft badge-warning"
                              >system</span
                            >
                          {{ else if eq $e.event_type "mcp" }}
                            <span
                              class="badge badge-xs badge-soft badge-info"
                              >mcp</span
                            >
                          {{ else }}
                            <span class="badge badge-xs badge-ghost"
                              >{{ $e.event_type }}</span
                            >
                          {{ end }}
                        </td>
                        <td class="font-mono text-xs whitespace-nowrap">
                          {{ $e.operation }}
                        </td>
                        <td>
                          <span
                            class="font-mono text-xs inline-block min-w-24 sm:min-w-40 max-w-56 break-all align-bottom"
                            title="{{ $e.target }}"
                            >{{ $e.target }}</span
                          >
                        </td>
                        <td class="hidden md:table-cell">
                          {{ if and $e.app_path (ne $e.app_env "preview") }}
                            <span
                              class="font-mono text-xs inline-block max-w-40 break-all align-bottom tooltip tooltip-left"
                              data-tip="{{ $e.app_name }}"
                              >{{ $e.app_path }}</span
                            ><a
                              href="{{ $.AppPath }}/apps/detail?path={{ $e.app_path }}"
                              data-tip="View app details"
                              aria-label="View details for {{ $e.app_path }}"
                              class="inline-block text-primary text-xs opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 ml-0.5 tooltip tooltip-left"
                              ><span aria-hidden="true">↗</span></a
                            >
                          {{ else if $e.app_path }}
                            <span
                              class="font-mono text-xs text-base-content/70 inline-block max-w-40 break-all align-bottom tooltip tooltip-left"
                              data-tip="{{ $e.app_name }}"
                              >{{ $e.app_path }}</span
                            >
                          {{ else if $e.app_name }}
                            <span
                              class="font-mono text-xs text-base-content/70 inline-block max-w-40 break-all align-bottom tooltip tooltip-left"
                              data-tip="{{ $e.app_name }}"
                              >{{ $e.app_name }}</span
                            >
                          {{ else }}
                            <span class="text-base-content/70 text-xs">-</span>
                          {{ end }}
                        </td>
                        <td
                          class="text-xs text-base-content/70 hidden lg:table-cell max-w-32 truncate{{ if $e.user_id }} tooltip tooltip-left{{ end }}"
                          {{ if $e.user_id }}data-tip="{{ $e.user_id }}"{{ end }}>
                          {{ $e.user_id }}
                        </td>
                        <td>
                          {{ if eq $e.status_style "ok" }}
                            <span
                              class="badge badge-xs badge-soft badge-success"
                              title="{{ $e.detail }}"
                              >{{ $e.status }}</span
                            >
                          {{ else if eq $e.status_style "error" }}
                            <span
                              class="badge badge-xs badge-soft badge-error"
                              title="{{ $e.detail }}"
                              >{{ $e.status }}</span
                            >
                          {{ else }}
                            <span class="text-base-content/70 text-xs">-</span>
                          {{ end }}
                        </td>
                      </tr>
                    {{ else }}
                      {{ if not .Data.IsMore }}
                        <tr>
                          <td colspan="8">
                            <div
                              class="flex flex-col items-center gap-2 py-10 text-center text-sm text-base-content/70">
                              <span class="text-xl" aria-hidden="true">📜</span>
                              <p>No audit events match the filters</p>
                            </div>
                          </td>
                        </tr>
                      {{ end }}
                    {{ end }}
                    {{ if and .IsPartial (not .Data.IsMore) }}
                      {{/* Out-of-band: keep the trace banner (and its hidden
                        rid input) in sync on HTMX row swaps. Pagination
                        continuations (IsMore) skip it: the banner did not
                        change and replacing it mid-scroll would churn the
                        DOM under the user
                      */}}
                      {{ template "audit_trace_banner" . }}
                    {{ end }}
                  {{ end }}
                  <!-- End of "audit_rows" block -->
                </tbody>
              </table>
            </div>
            <div class="flex justify-center py-1">
              <span
                id="audit-loading"
                class="htmx-indicator loading loading-dots loading-sm text-primary"></span>
            </div>
          </div>
{{ template "page_close" . }}