crowdsec-dashy/web/templates/pages/dashboard.html

{{template "base" .}}
{{define "content"}}
<div style="max-width:1400px">

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px">
    <div class="stat-card stat-card--threat">
      <div class="stat-label">Active Bans</div>
      <div class="stat-value" id="stat-decisions">—</div>
      <div class="stat-sub">decisions in effect</div>
    </div>
    <div class="stat-card stat-card--warn">
      <div class="stat-label">Alerts (24h)</div>
      <div class="stat-value" id="stat-alerts-24h">—</div>
      <div class="stat-sub">last 24 hours</div>
    </div>
    <div class="stat-card stat-card--warn">
      <div class="stat-label">Alerts (7d)</div>
      <div class="stat-value" id="stat-alerts-7d">—</div>
      <div class="stat-sub">last 7 days</div>
    </div>
    <div class="stat-card stat-card--accent">
      <div class="stat-label">Bouncers</div>
      <div class="stat-value" id="stat-bouncers">{{if .CLIAvailable}}—{{else}}n/a{{end}}</div>
      <div class="stat-sub">registered agents</div>
    </div>
    <div class="stat-card stat-card--safe">
      <div class="stat-label">Machines</div>
      <div class="stat-value" id="stat-machines">{{if .CLIAvailable}}—{{else}}n/a{{end}}</div>
      <div class="stat-sub">registered agents</div>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">

    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Recent Decisions</span>
        <a href="/decisions" class="panel-link">View all</a>
      </div>
      {{if .RecentDecisions}}
      <table class="data-table">
        <thead>
          <tr>
            <th>Value</th>
            <th>Type</th>
            <th>Origin</th>
            <th>Expires</th>
          </tr>
        </thead>
        <tbody>
          {{range .RecentDecisions}}
          <tr>
            <td style="font-family:'JetBrains Mono',monospace;font-size:12px">{{.Value}}</td>
            <td><span class="badge {{decisionBadgeClass .Type}}">{{.Type}}</span></td>
            <td><span class="badge {{originBadgeClass .Origin}}">{{.Origin}}</span></td>
            <td style="font-size:12px;color:var(--muted)">{{truncate .Until 16}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
      {{else}}
      <div class="empty-state">
        <div class="empty-text">No active decisions</div>
        <div class="empty-sub">CrowdSec has not issued any bans</div>
      </div>
      {{end}}
    </div>

    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Recent Alerts</span>
        <a href="/alerts" class="panel-link">View all</a>
      </div>
      {{if .RecentAlerts}}
      <table class="data-table">
        <thead>
          <tr>
            <th>Scenario</th>
            <th>Source</th>
            <th>Events</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {{range .RecentAlerts}}
          <tr>
            <td style="font-size:12px">{{truncate .Scenario 32}}</td>
            <td style="font-family:'JetBrains Mono',monospace;font-size:12px">{{.Source.Value}}</td>
            <td style="font-family:'JetBrains Mono',monospace">{{.EventsCount}}</td>
            <td style="font-size:12px;color:var(--muted)">{{truncate .StartAt 16}}</td>
          </tr>
          {{end}}
        </tbody>
      </table>
      {{else}}
      <div class="empty-state">
        <div class="empty-text">No recent alerts</div>
        <div class="empty-sub">No threat activity detected</div>
      </div>
      {{end}}
    </div>

  </div>
</div>
{{end}}

{{define "scripts"}}
<script>
window._pollInterval = {{.PollInterval}};
window._cliAvailable = {{.CLIAvailable}};
</script>
<script src="/static/js/dashboard.js"></script>
{{end}}