Lots of updates

This commit is contained in:
Dan Milne
2025-11-11 16:54:52 +11:00
parent 26216da9ca
commit cc8213f87a
41 changed files with 1463 additions and 614 deletions

View File

@@ -41,7 +41,7 @@
<!-- Key Statistics Cards -->
<div class="space-y-6">
<div id="dashboard-stats" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div id="dashboard-stats" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
<!-- Total Events -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
@@ -148,6 +148,35 @@
</div>
</div>
</div>
<!-- Job Queue -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 <%= job_queue_status_color(@job_statistics[:health_status]) %> rounded-md flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</div>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Job Queue</dt>
<dd class="text-lg font-medium text-gray-900"><%= number_with_delimiter(@job_statistics[:pending_jobs]) %></dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<span class="<%= job_queue_status_text_color(@job_statistics[:health_status]) %> font-medium">
<%= @job_statistics[:health_status].humanize %>
</span>
<span class="text-gray-500"> · <%= @job_statistics[:recent_enqueued] %> recent</span>
</div>
</div>
</div>
</div>
<!-- Charts and Detailed Analytics -->
@@ -214,7 +243,7 @@
</div>
<!-- Secondary Information Rows -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Top Countries -->
<div class="bg-white shadow rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
@@ -283,6 +312,36 @@
</div>
</div>
</div>
<!-- Job Queue Details -->
<div class="bg-white shadow rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Job Queue Details</h3>
</div>
<div class="p-6">
<div class="space-y-3">
<% if @job_statistics[:queue_breakdown].any? %>
<% @job_statistics[:queue_breakdown].each do |queue, count| %>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-2 h-2 rounded-full mr-2
<%= case queue.to_s
when 'default' then 'bg-blue-500'
when 'waf_policies' then 'bg-purple-500'
when 'waf_events' then 'bg-green-500'
else 'bg-gray-500'
end %>"></div>
<span class="text-sm text-gray-900"><%= queue.to_s.humanize %></span>
</div>
<span class="text-sm font-medium text-gray-900"><%= number_with_delimiter(count) %></span>
</div>
<% end %>
<% else %>
<p class="text-gray-500 text-center py-4">No job queue data available</p>
<% end %>
</div>
</div>
</div>
</div>
<!-- Top Blocked IPs -->

View File

@@ -215,9 +215,10 @@
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<% unless data_import.processing? %>
<%= link_to "Delete", data_import, method: :delete,
<%= link_to "Delete", data_import,
data: {
confirm: "Are you sure you want to delete this import?"
turbo_method: :delete,
turbo_confirm: "Are you sure you want to delete this import?"
},
class: "text-red-600 hover:text-red-900" %>
<% else %>

View File

@@ -38,9 +38,10 @@
<div class="flex items-center space-x-2">
<%= link_to "← Back to Imports", data_imports_path, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
<% unless @data_import.processing? %>
<%= link_to "Delete", @data_import, method: :delete,
<%= link_to "Delete", @data_import,
data: {
confirm: "Are you sure you want to delete this import record?"
turbo_method: :delete,
turbo_confirm: "Are you sure you want to delete this import record?"
},
class: "inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm leading-4 font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
<% end %>

View File

@@ -16,59 +16,7 @@
</div>
</div>
<!-- Environment DSNs -->
<div class="bg-white shadow overflow-hidden sm:rounded-md mb-8">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">Environment DSNs</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
Default DSNs configured via environment variables for agent connectivity.
</p>
</div>
<div class="border-t border-gray-200">
<dl>
<!-- BAFFLE_HOST DSN -->
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">External DSN (BAFFLE_HOST)</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-2">
<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">
<%= @external_dsn %>
</code>
<button onclick="copyToClipboard('<%= @external_dsn %>')" class="text-blue-600 hover:text-blue-800 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</button>
</div>
<p class="text-xs text-gray-400 mt-1">Host: <%= ENV['BAFFLE_HOST'] || 'localhost:3000' %></p>
</dd>
</div>
<% if @internal_dsn.present? %>
<!-- BAFFLE_INTERNAL_HOST DSN -->
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Internal DSN (BAFFLE_INTERNAL_HOST)</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-2">
<code class="bg-gray-100 px-2 py-1 rounded text-sm font-mono">
<%= @internal_dsn %>
</code>
<button onclick="copyToClipboard('<%= @internal_dsn %>')" class="text-blue-600 hover:text-blue-800 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</button>
</div>
<p class="text-xs text-gray-400 mt-1">Host: <%= ENV['BAFFLE_INTERNAL_HOST'] %></p>
</dd>
</div>
<% end %>
</dl>
</div>
</div>
<!-- Database DSNs -->
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<% if @dsns.any? %>
@@ -120,6 +68,13 @@
<%= link_to "Enable", enable_dsn_path(dsn), method: :post,
class: "text-green-600 hover:text-green-900 text-sm font-medium" %>
<% end %>
<% if policy(dsn).destroy? && !dsn.enabled? %>
<%= button_to "Delete", dsn, method: :delete,
data: {
confirm: "Are you sure you want to delete '#{dsn.name}'? This action cannot be undone."
},
class: "text-red-700 hover:text-red-900 text-sm font-medium font-semibold bg-transparent border-none cursor-pointer p-0" %>
<% end %>
</div>
</div>
</li>

View File

@@ -17,6 +17,13 @@
<% if policy(@dsn).edit? %>
<%= link_to "Edit", edit_dsn_path(@dsn), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700" %>
<% end %>
<% if policy(@dsn).destroy? && !@dsn.enabled? %>
<%= button_to "Delete", @dsn, method: :delete,
data: {
confirm: "Are you sure you want to delete '#{@dsn.name}'? This action cannot be undone and the DSN key will be permanently removed."
},
class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700" %>
<% end %>
</div>
</div>
@@ -141,7 +148,7 @@
<h4 class="mt-4">Query Parameter Authentication</h4>
<p>Include the DSN key as a query parameter:</p>
<pre class="bg-gray-100 p-3 rounded text-sm"><code>/api/events?baffle_key=<%= @dsn.key %></code></pre>
<pre class="bg-gray-100 p-3 rounded text-sm"><code>/api/v1/events?baffle_key=<%= @dsn.key %></code></pre>
<h4 class="mt-4">X-Baffle-Auth Header</h4>
<p>Use the custom Baffle authentication header:</p>

View File

@@ -123,7 +123,7 @@
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<% @events.each do |event| %>
<tr class="hover:bg-gray-50">
<tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='<%= event_path(event) %>'">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<div class="text-gray-900" data-timeline-target="timestamp" data-iso="<%= event.timestamp.iso8601 %>">
<%= event.timestamp.strftime("%H:%M:%S") %>
@@ -135,9 +135,8 @@
<td class="px-6 py-4 text-sm text-gray-900">
<% network_range = @network_ranges_by_ip[event.ip_address.to_s] %>
<% if network_range %>
<%= link_to event.ip_address, network_range_path(network_range),
<%= link_to event.ip_address, network_range_path(event.ip_address),
class: "text-blue-600 hover:text-blue-800 hover:underline font-mono" %>
<!-- Network Intelligence Summary -->
<div class="mt-1 space-y-1">
<% if network_range.company.present? %>
@@ -161,7 +160,7 @@
<% end %>
<div class="text-xs text-gray-500">
<%= network_range.cidr %>
<%= link_to network_range.cidr, network_range_path(network_range) %>
<% if network_range.asn.present? %>
• ASN <%= network_range.asn %>
<% end %>
@@ -184,8 +183,10 @@
<%= event.waf_action %>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 max-w-xs truncate" title="<%= event.request_path %>">
<%= event.request_path || '-' %>
<td class="px-6 py-4 text-sm font-mono text-gray-900">
<div class="max-w-md break-all">
<%= event.request_path || '-' %>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<%= event.request_method ? event.request_method.upcase : '-' %>
@@ -202,8 +203,35 @@
<span class="text-gray-400">-</span>
<% end %>
</td>
<td class="px-6 py-4 text-sm text-gray-900 max-w-xs truncate" title="<%= event.user_agent %>">
<%= event.user_agent&.truncate(50) || '-' %>
<td class="px-6 py-4 text-sm text-gray-900">
<% if event.user_agent.present? %>
<% ua = parse_user_agent(event.user_agent) %>
<div class="space-y-0.5" title="<%= ua[:raw] %>">
<div class="font-medium text-gray-900">
<%= ua[:name] if ua[:name].present? %>
<% if ua[:version].present? && ua[:name].present? %>
<span class="text-gray-500 font-normal"><%= ua[:version] %></span>
<% end %>
</div>
<% if ua[:os_name].present? %>
<div class="text-xs text-gray-500">
<%= ua[:os_name] %>
<% if ua[:os_version].present? %>
<%= ua[:os_version] %>
<% end %>
</div>
<% end %>
<% if ua[:bot] %>
<div class="text-xs">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-orange-100 text-orange-800">
🤖 <%= ua[:bot_name] || 'Bot' %>
</span>
</div>
<% end %>
</div>
<% else %>
<span class="text-gray-400">-</span>
<% end %>
</td>
</tr>
<% end %>

View File

@@ -0,0 +1,337 @@
<% content_for :title, "Event #{@event.event_id} - Baffle Hub" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8" data-controller="timeline" data-timeline-mode-value="events">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<nav class="flex" aria-label="Breadcrumb">
<ol class="flex items-center space-x-4">
<li>
<%= link_to "Events", events_path, class: "text-gray-500 hover:text-gray-700" %>
</li>
<li>
<div class="flex items-center">
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="ml-4 text-gray-700 font-medium"><%= @event.event_id %></span>
</div>
</li>
</ol>
</nav>
<div class="mt-2 flex items-center space-x-3">
<h1 class="text-3xl font-bold text-gray-900">Event Details</h1>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
<%= case @event.waf_action
when 'allow' then 'bg-green-100 text-green-800'
when 'deny' then 'bg-red-100 text-red-800'
when 'redirect' then 'bg-blue-100 text-blue-800'
when 'challenge' then 'bg-yellow-100 text-yellow-800'
else 'bg-gray-100 text-gray-800'
end %>">
<%= @event.waf_action.upcase %>
</span>
</div>
</div>
<div class="flex space-x-3">
<%= link_to "Back to Events", events_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
</div>
</div>
</div>
<!-- Event Overview -->
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Event Overview</h3>
</div>
<div class="px-6 py-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<dt class="text-sm font-medium text-gray-500">Event ID</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono break-all"><%= @event.event_id %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Timestamp</dt>
<dd class="mt-1 text-sm text-gray-900">
<div data-timeline-target="timestamp" data-iso="<%= @event.timestamp.iso8601 %>">
<%= @event.timestamp.strftime("%Y-%m-%d %H:%M:%S %Z") %>
</div>
<div class="text-xs text-gray-500 mt-1">
<%= time_ago_in_words(@event.timestamp) %> ago
</div>
</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Action</dt>
<dd class="mt-1">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
<%= case @event.waf_action
when 'allow' then 'bg-green-100 text-green-800'
when 'deny' then 'bg-red-100 text-red-800'
when 'redirect' then 'bg-blue-100 text-blue-800'
when 'challenge' then 'bg-yellow-100 text-yellow-800'
else 'bg-gray-100 text-gray-800'
end %>">
<%= @event.waf_action %>
</span>
</dd>
</div>
<% if @event.rule_matched.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Rule Matched</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.rule_matched %></dd>
</div>
<% end %>
<% if @event.blocked_reason.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Blocked Reason</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.blocked_reason %></dd>
</div>
<% end %>
<% if @event.response_status.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Response Status</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.response_status %></dd>
</div>
<% end %>
<% if @event.response_time_ms.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Response Time</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.response_time_ms %> ms</dd>
</div>
<% end %>
</div>
</div>
</div>
<!-- Request Details -->
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Request Details</h3>
</div>
<div class="px-6 py-4">
<div class="grid grid-cols-1 gap-6">
<div>
<dt class="text-sm font-medium text-gray-500">Request URL</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono break-all"><%= @event.request_url || @event.request_path %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Request Path</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono break-all"><%= @event.request_path %></dd>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<dt class="text-sm font-medium text-gray-500">Method</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono"><%= @event.request_method ? @event.request_method.upcase : '-' %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Protocol</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono"><%= @event.request_protocol || '-' %></dd>
</div>
<% if @event.request_host %>
<div>
<dt class="text-sm font-medium text-gray-500">Host</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono"><%= @event.request_host.hostname %></dd>
</div>
<% end %>
</div>
</div>
</div>
</div>
<!-- Network Intelligence -->
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Network Intelligence</h3>
</div>
<div class="px-6 py-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<dt class="text-sm font-medium text-gray-500">IP Address</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if @network_range %>
<%= link_to @event.ip_address, network_range_path(@event.ip_address),
class: "text-blue-600 hover:text-blue-800 hover:underline font-mono" %>
<% else %>
<span class="font-mono"><%= @event.ip_address %></span>
<% end %>
</dd>
</div>
<% if @network_range %>
<div>
<dt class="text-sm font-medium text-gray-500">Network Range</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= link_to @network_range.cidr, network_range_path(@network_range),
class: "text-blue-600 hover:text-blue-800 hover:underline font-mono" %>
</dd>
</div>
<% if @network_range.company.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Company</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @network_range.company %></dd>
</div>
<% end %>
<% if @network_range.asn.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">ASN</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= link_to "#{@network_range.asn} (#{@network_range.asn_org})", network_ranges_path(asn: @network_range.asn),
class: "text-blue-600 hover:text-blue-900 hover:underline" %>
</dd>
</div>
<% end %>
<% if @network_range.country.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Country</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= link_to @network_range.country, events_path(country: @network_range.country),
class: "text-blue-600 hover:text-blue-900 hover:underline" %>
</dd>
</div>
<% end %>
<% if @network_range.is_datacenter? || @network_range.is_vpn? || @network_range.is_proxy? %>
<div class="md:col-span-2 lg:col-span-3">
<dt class="text-sm font-medium text-gray-500 mb-2">Classification</dt>
<dd class="flex flex-wrap gap-2">
<% if @network_range.is_datacenter? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">Datacenter</span>
<% end %>
<% if @network_range.is_vpn? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">VPN</span>
<% end %>
<% if @network_range.is_proxy? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">Proxy</span>
<% end %>
</dd>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
<!-- User Agent -->
<% if @event.user_agent.present? %>
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">User Agent</h3>
</div>
<div class="px-6 py-4">
<% ua = parse_user_agent(@event.user_agent) %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<dt class="text-sm font-medium text-gray-500">Browser</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if ua[:name].present? %>
<%= ua[:name] %>
<% if ua[:version].present? %>
<span class="text-gray-500"><%= ua[:version] %></span>
<% end %>
<% else %>
<span class="text-gray-400">-</span>
<% end %>
</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Operating System</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if ua[:os_name].present? %>
<%= ua[:os_name] %>
<% if ua[:os_version].present? %>
<span class="text-gray-500"><%= ua[:os_version] %></span>
<% end %>
<% else %>
<span class="text-gray-400">-</span>
<% end %>
</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Device Type</dt>
<dd class="mt-1 text-sm text-gray-900"><%= ua[:device_type]&.humanize || "-" %></dd>
</div>
<% if ua[:bot] %>
<div>
<dt class="text-sm font-medium text-gray-500">Bot Detection</dt>
<dd class="mt-1">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
🤖 <%= ua[:bot_name] || 'Bot' %>
</span>
</dd>
</div>
<% end %>
<div class="md:col-span-2 lg:col-span-3">
<dt class="text-sm font-medium text-gray-500">Raw User Agent</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono break-all bg-gray-50 p-3 rounded"><%= @event.user_agent %></dd>
</div>
</div>
</div>
</div>
<% end %>
<!-- Tags -->
<% if @event.tags.any? %>
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Tags</h3>
</div>
<div class="px-6 py-4">
<div class="flex flex-wrap gap-2">
<% @event.tags.each do |tag| %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
<%= tag %>
</span>
<% end %>
</div>
</div>
</div>
<% end %>
<!-- Server Information -->
<% if @event.server_name.present? || @event.environment.present? || @event.agent_name.present? %>
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Server & Agent Information</h3>
</div>
<div class="px-6 py-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% if @event.server_name.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Server Name</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.server_name %></dd>
</div>
<% end %>
<% if @event.environment.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Environment</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @event.environment %></dd>
</div>
<% end %>
<% if @event.agent_name.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Agent</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= @event.agent_name %>
<% if @event.agent_version.present? %>
<span class="text-gray-500">v<%= @event.agent_version %></span>
<% end %>
</dd>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
<!-- Raw Payload -->
<% if @event.payload.present? %>
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Raw Event Payload</h3>
</div>
<div class="px-6 py-4">
<pre class="bg-gray-50 p-4 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(@event.payload) %></pre>
</div>
</div>
<% end %>
</div>

View File

@@ -122,6 +122,10 @@
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" do %>
👥 Manage Users
<% end %>
<%= link_to settings_path,
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" do %>
🔧 Settings
<% end %>
<% end %>
<div class="border-t border-gray-100"></div>

View File

@@ -68,6 +68,21 @@
<dd class="mt-1 text-sm text-gray-900"><%= @network_range.ipv4? ? "IPv4" : "IPv6" %></dd>
</div>
<!-- Supernet display -->
<% parent_with_intelligence = @network_range.parent_with_intelligence %>
<% if parent_with_intelligence && parent_with_intelligence.cidr != @network_range.cidr %>
<div>
<dt class="text-sm font-medium text-gray-500">Supernet</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= link_to parent_with_intelligence.cidr, network_range_path(parent_with_intelligence),
class: "text-blue-600 hover:text-blue-800 hover:underline font-mono" %>
<% if parent_with_intelligence.company.present? %>
<span class="ml-2 text-xs text-gray-500">(<%= parent_with_intelligence.company %>)</span>
<% end %>
</dd>
</div>
<% end %>
<% if @network_range.asn.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">ASN</dt>
@@ -220,12 +235,12 @@
<% end %>
<!-- Associated Rules -->
<div class="bg-white shadow rounded-lg mb-6">
<div class="bg-white shadow rounded-lg mb-6" data-controller="quick-create-rule">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-medium text-gray-900">Associated Rules (<%= @associated_rules.count %>)</h3>
<% if @network_range.persisted? %>
<button type="button" onclick="toggleQuickCreateRule()" class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<button type="button" data-action="click->quick-create-rule#toggle" data-quick-create-rule-target="toggle" class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
@@ -239,7 +254,7 @@
<!-- Quick Create Rule Form -->
<% if @network_range.persisted? %>
<div id="quick_create_rule" class="hidden border-b border-gray-200">
<div id="quick_create_rule" data-quick-create-rule-target="form" class="hidden border-b border-gray-200">
<div class="px-6 py-4 bg-blue-50">
<%= form_with(model: Rule.new, url: rules_path, local: true,
class: "space-y-4",
@@ -290,7 +305,7 @@
{
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
id: "quick_rule_type_select",
onchange: "toggleRuleTypeFields()"
data: { quick_create_rule_target: "ruleTypeSelect", action: "change->quick-create-rule#updateRuleTypeFields" }
} %>
<p class="mt-1 text-xs text-gray-500">Select the type of rule to create</p>
</div>
@@ -308,7 +323,10 @@
['Monitor - Log but allow', 'monitor']
], 'deny'),
{ },
{ class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
{
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
data: { quick_create_rule_target: "actionSelect", action: "change->quick-create-rule#updateRuleTypeFields" }
} %>
<p class="mt-1 text-xs text-gray-500">Action to take when rule matches</p>
</div>
</div>
@@ -331,19 +349,20 @@
</div>
<!-- Pattern-based Rule Fields -->
<div id="pattern_fields" class="hidden space-y-4">
<div id="pattern_fields" data-quick-create-rule-target="patternFields" class="hidden space-y-4">
<div>
<%= form.label :conditions, "Pattern/Conditions", class: "block text-sm font-medium text-gray-700" %>
<%= form.text_area :conditions, rows: 3,
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
placeholder: "Enter pattern or JSON conditions...",
id: "quick_conditions_field" %>
<p class="mt-1 text-xs text-gray-500" id="pattern_help_text">Pattern will be used for matching</p>
id: "quick_conditions_field",
data: { quick_create_rule_target: "conditionsField" } %>
<p class="mt-1 text-xs text-gray-500" id="pattern_help_text" data-quick-create-rule-target="helpText">Pattern will be used for matching</p>
</div>
</div>
<!-- Rate Limit Fields -->
<div id="rate_limit_fields" class="hidden space-y-4">
<div id="rate_limit_fields" data-quick-create-rule-target="rateLimitFields" class="hidden space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<%= label_tag :rate_limit, "Request Limit", class: "block text-sm font-medium text-gray-700" %>
@@ -363,7 +382,7 @@
</div>
<!-- Redirect Fields -->
<div id="redirect_fields" class="hidden space-y-4">
<div id="redirect_fields" data-quick-create-rule-target="redirectFields" class="hidden space-y-4">
<div>
<%= label_tag :redirect_url, "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag :redirect_url,
@@ -405,7 +424,7 @@
<!-- Form Actions -->
<div class="flex justify-end space-x-3 pt-4 border-t border-blue-200">
<button type="button" onclick="toggleQuickCreateRule()" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
<button type="button" data-action="click->quick-create-rule#toggle" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
Cancel
</button>
<%= form.submit "Create Rule", class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700" %>
@@ -532,7 +551,7 @@
<!-- Recent Events -->
<% if @related_events.any? %>
<div class="bg-white shadow rounded-lg">
<div class="bg-white shadow rounded-lg" data-controller="timeline" data-timeline-mode-value="events">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Recent Events (<%= @related_events.count %>)</h3>
</div>
@@ -549,15 +568,22 @@
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<% @related_events.first(20).each do |event| %>
<tr class="hover:bg-gray-50">
<tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='<%= event_path(event) %>'">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<%= event.timestamp.strftime("%H:%M:%S") %>
<div class="text-gray-900" data-timeline-target="timestamp" data-iso="<%= event.timestamp.iso8601 %>">
<%= event.timestamp.strftime("%H:%M:%S") %>
</div>
<div class="text-xs text-gray-500" data-timeline-target="date" data-iso="<%= event.timestamp.iso8601 %>">
<%= event.timestamp.strftime("%Y-%m-%d") %>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
<%= event.ip_address %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<%= event.request_path || "-" %>
<td class="px-6 py-4 text-sm text-gray-900">
<div class="max-w-md break-all">
<%= event.request_path || "-" %>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= event.waf_action == 'deny' ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800' %>">
@@ -565,9 +591,34 @@
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-900">
<div class="truncate max-w-xs" title="<%= event.user_agent %>">
<%= event.user_agent&.truncate(50) || "-" %>
</div>
<% if event.user_agent.present? %>
<% ua = parse_user_agent(event.user_agent) %>
<div class="space-y-0.5" title="<%= ua[:raw] %>">
<div class="font-medium text-gray-900">
<%= ua[:name] if ua[:name].present? %>
<% if ua[:version].present? && ua[:name].present? %>
<span class="text-gray-500 font-normal"><%= ua[:version] %></span>
<% end %>
</div>
<% if ua[:os_name].present? %>
<div class="text-xs text-gray-500">
<%= ua[:os_name] %>
<% if ua[:os_version].present? %>
<%= ua[:os_version] %>
<% end %>
</div>
<% end %>
<% if ua[:bot] %>
<div class="text-xs">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-orange-100 text-orange-800">
🤖 <%= ua[:bot_name] || 'Bot' %>
</span>
</div>
<% end %>
</div>
<% else %>
<span class="text-gray-400">-</span>
<% end %>
</td>
</tr>
<% end %>
@@ -578,85 +629,3 @@
<% end %>
</div>
<script>
function toggleQuickCreateRule() {
const formDiv = document.getElementById('quick_create_rule');
formDiv.classList.toggle('hidden');
// Reset form when hiding
if (formDiv.classList.contains('hidden')) {
resetQuickCreateForm();
}
}
function toggleRuleTypeFields() {
const ruleType = document.getElementById('quick_rule_type_select').value;
const action = document.querySelector('select[name="rule[action]"]').value;
// Hide all optional fields
document.getElementById('pattern_fields').classList.add('hidden');
document.getElementById('rate_limit_fields').classList.add('hidden');
document.getElementById('redirect_fields').classList.add('hidden');
// Show relevant fields based on rule type
if (['path_pattern', 'header_pattern', 'query_pattern', 'body_signature'].includes(ruleType)) {
document.getElementById('pattern_fields').classList.remove('hidden');
updatePatternHelpText(ruleType);
} else if (ruleType === 'rate_limit') {
document.getElementById('rate_limit_fields').classList.remove('hidden');
}
// Show redirect fields if action is redirect
if (action === 'redirect') {
document.getElementById('redirect_fields').classList.remove('hidden');
}
}
function updatePatternHelpText(ruleType) {
const helpText = document.getElementById('pattern_help_text');
const conditionsField = document.getElementById('quick_conditions_field');
switch(ruleType) {
case 'path_pattern':
helpText.textContent = 'Regex pattern to match URL paths (e.g.,\\.env$|wp-admin|phpmyadmin)';
conditionsField.placeholder = 'Example: \\.env$|\\.git|config\\.php|wp-admin';
break;
case 'header_pattern':
helpText.textContent = 'JSON with header_name and pattern (e.g., {"header_name": "User-Agent", "pattern": "bot.*"})';
conditionsField.placeholder = 'Example: {"header_name": "User-Agent", "pattern": ".*[Bb]ot.*"}';
break;
case 'query_pattern':
helpText.textContent = 'Regex pattern to match query parameters (e.g., union.*select|<script)';
conditionsField.placeholder = 'Example: (?:union|select|insert|update|delete).*\\s+(?:union|select)';
break;
case 'body_signature':
helpText.textContent = 'Regex pattern to match request body content (e.g., OR 1=1|<script)';
conditionsField.placeholder = 'Example: (?:OR\\s+1\\s*=\\s*1|AND\\s+1\\s*=\\s*1|UNION\\s+SELECT)';
break;
}
}
function resetQuickCreateForm() {
const form = document.querySelector('#quick_create_rule form');
if (form) {
form.reset();
// Reset rule type to default
document.getElementById('quick_rule_type_select').value = 'network';
toggleRuleTypeFields();
}
}
// Initialize the form visibility state
document.addEventListener('DOMContentLoaded', function() {
// Set up action change listener to show/hide redirect fields
const actionSelect = document.querySelector('select[name="rule[action]"]');
if (actionSelect) {
actionSelect.addEventListener('change', function() {
toggleRuleTypeFields();
});
}
// Initialize field visibility
toggleRuleTypeFields();
});
</script>

View File

@@ -0,0 +1,60 @@
<% content_for :title, "Settings" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">Settings</h1>
<p class="mt-2 text-gray-600">Manage system configuration and API keys</p>
</div>
</div>
</div>
<!-- Settings Form -->
<div class="bg-white shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">API Configuration</h3>
<!-- ipapi.is API Key -->
<div class="mb-6">
<%= form_with url: settings_path, method: :patch, class: "space-y-4" do |f| %>
<%= hidden_field_tag :key, 'ipapi_key' %>
<div>
<label for="ipapi_key" class="block text-sm font-medium text-gray-700">
ipapi.is API Key
</label>
<div class="mt-1 flex rounded-md shadow-sm">
<%= text_field_tag :value,
@settings['ipapi_key']&.value || ENV['IPAPI_KEY'],
class: "flex-1 min-w-0 block w-full px-3 py-2 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "Enter your ipapi.is API key" %>
<%= f.submit "Update", class: "ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
<p class="mt-2 text-sm text-gray-500">
<% if @settings['ipapi_key']&.value.present? %>
<span class="text-green-600">✓ Configured in database</span>
<% elsif ENV['IPAPI_KEY'].present? %>
<span class="text-yellow-600">Using environment variable (IPAPI_KEY)</span>
<% else %>
<span class="text-red-600">ipapi.is not active</span>
<% end %>
</p>
<p class="mt-1 text-xs text-gray-400">
Get your API key from <a href="https://ipapi.is/" target="_blank" class="text-blue-600 hover:text-blue-800">ipapi.is</a>
</p>
</div>
<% end %>
</div>
</div>
</div>
<!-- Future Settings Section -->
<div class="mt-6 bg-gray-50 shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg font-medium leading-6 text-gray-900 mb-2">Additional Settings</h3>
<p class="text-sm text-gray-500">More configuration options will be added here as needed.</p>
</div>
</div>
</div>