Files
baffle-hub/app/views/network_ranges/show.html.erb
2025-11-13 08:35:00 +11:00

656 lines
34 KiB
Plaintext

<% content_for :title, "#{@network_range.cidr} - Network Range Details" %>
<% if @network_range.persisted? %>
<%= turbo_stream_from "network_range_#{@network_range.id}" %>
<% end %>
<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>
<nav class="flex" aria-label="Breadcrumb">
<ol class="flex items-center space-x-4">
<li>
<%= link_to "Network Ranges", network_ranges_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"><%= @network_range.cidr %></span>
</div>
</li>
</ol>
</nav>
<div class="mt-2 flex items-center space-x-3">
<h1 class="text-3xl font-bold text-gray-900"><%= @network_range.cidr %></h1>
<% if @network_range.virtual? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
Virtual
</span>
<% end %>
<% if @network_range.ipv4? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">IPv4</span>
<% else %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">IPv6</span>
<% end %>
</div>
</div>
<div class="flex space-x-3">
<% if @network_range.virtual? %>
<%= link_to "Create Network", new_network_range_path(network: @network_range.cidr), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700" %>
<% else %>
<%= link_to "Edit", edit_network_range_path(@network_range), 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" %>
<%= link_to "Create Rule", new_rule_path(network_range_id: @network_range.id), class: "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" %>
<% end %>
</div>
</div>
</div>
<!-- IPAPI Enrichment Data -->
<% if @network_range.persisted? %>
<%= render partial: "network_ranges/ipapi_data", locals: {
ipapi_data: @ipapi_data,
network_range: @network_range,
parent_with_ipapi: @parent_with_ipapi,
ipapi_loading: @ipapi_loading || false
} %>
<% end %>
<!-- MaxMind GeoLite2 Data -->
<% if @network_range.persisted? %>
<%= render partial: "network_ranges/geolite_data", locals: {
network_range: @network_range
} %>
<% end %>
<!-- Network Intelligence Card -->
<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">Network Address</dt>
<dd class="mt-1 text-sm text-gray-900 font-mono"><%= @network_range.network_address %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Prefix Length</dt>
<dd class="mt-1 text-sm text-gray-900">/<%= @network_range.prefix_length %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Family</dt>
<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>
<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.company.present? %>
<div>
<dt class="text-sm font-medium text-gray-500">Company</dt>
<dd class="mt-1 text-sm text-gray-900">
<%= link_to @network_range.company, network_ranges_path(company: @network_range.company),
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, network_ranges_path(country: @network_range.country),
class: "text-blue-600 hover:text-blue-900 hover:underline" %>
</dd>
</div>
<% end %>
<% if @network_range.persisted? %>
<div>
<dt class="text-sm font-medium text-gray-500">Source</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @network_range.source %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Created</dt>
<dd class="mt-1 text-sm text-gray-900"><%= time_ago_in_words(@network_range.created_at) %> ago</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Updated</dt>
<dd class="mt-1 text-sm text-gray-900"><%= time_ago_in_words(@network_range.updated_at) %> ago</dd>
</div>
<% else %>
<div>
<dt class="text-sm font-medium text-gray-500">Status</dt>
<dd class="mt-1 text-sm text-gray-900">Virtual Network</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Events Found</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @traffic_stats[:total_requests] %> requests</dd>
</div>
<% end %>
<!-- Classification Flags -->
<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">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
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">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
</svg>
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">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.894-.553l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd" />
</svg>
Proxy
</span>
<% end %>
<% if @network_range.abuser_scores_hash.any? %>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
Abuser Score: <%= @network_range.abuser_scores_hash['score'] || 'Unknown' %>
</span>
<% end %>
</dd>
</div>
</div>
<% if @network_range.additional_data_hash.any? %>
<div class="mt-6 pt-6 border-t border-gray-200">
<dt class="text-sm font-medium text-gray-500 mb-2">Additional Data</dt>
<dd class="mt-1">
<pre class="bg-gray-50 p-3 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(@network_range.additional_data_hash) %></pre>
</dd>
</div>
<% end %>
</div>
</div>
<!-- Traffic Statistics -->
<% if @traffic_stats[:total_requests] > 0 %>
<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">Traffic Statistics</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="text-center min-w-0">
<div class="text-2xl font-bold text-gray-900 break-words"><%= number_with_delimiter(@traffic_stats[:total_requests]) %></div>
<div class="text-sm text-gray-500 whitespace-normal">Total Requests</div>
</div>
<div class="text-center min-w-0">
<div class="text-2xl font-bold text-gray-900 break-words"><%= number_with_delimiter(@traffic_stats[:unique_ips]) %></div>
<div class="text-sm text-gray-500 whitespace-normal">Unique IPs</div>
</div>
<div class="text-center min-w-0">
<div class="text-2xl font-bold text-green-600 break-words"><%= number_with_delimiter(@traffic_stats[:allowed_requests]) %></div>
<div class="text-sm text-gray-500 whitespace-normal">Allowed</div>
</div>
<div class="text-center min-w-0">
<div class="text-2xl font-bold text-red-600 break-words"><%= number_with_delimiter(@traffic_stats[:blocked_requests]) %></div>
<div class="text-sm text-gray-500 whitespace-normal">Blocked</div>
</div>
</div>
<% if @traffic_stats[:top_paths].any? %>
<div class="border-t border-gray-200 pt-4">
<h4 class="text-sm font-medium text-gray-900 mb-2">Top Paths</h4>
<div class="space-y-1">
<% @traffic_stats[:top_paths].first(5).each do |path, count| %>
<div class="flex justify-between text-sm">
<span class="text-gray-600 truncate"><%= path %></span>
<span class="font-medium"><%= count %></span>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<!-- Associated Rules -->
<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" 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>
Quick Create Rule
</button>
<% else %>
<span class="text-sm text-gray-500">Create this network to add rules</span>
<% end %>
</div>
</div>
<!-- Quick Create Rule Form -->
<% if @network_range.persisted? %>
<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",
data: { turbo: false }) do |form| %>
<!-- Hidden network range ID -->
<%= form.hidden_field :network_range_id, value: @network_range.id %>
<!-- Network Context Display -->
<div class="mb-4 p-3 bg-blue-100 border border-blue-200 rounded-md">
<div class="flex items-center">
<svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
<div class="text-sm text-blue-800">
<strong>Creating rule for:</strong> <%= @network_range.cidr %>
<% if @network_range.company.present? %>
- <%= @network_range.company %>
<% end %>
<% if @network_range.asn_org.present? %>
(ASN: <%= @network_range.asn_org %>)
<% end %>
<% if @network_range.is_datacenter? || @network_range.is_vpn? || @network_range.is_proxy? %>
<span class="ml-2">
<% if @network_range.is_datacenter? %><span class="bg-orange-200 px-2 py-0.5 rounded text-xs">Datacenter</span><% end %>
<% if @network_range.is_vpn? %><span class="bg-purple-200 px-2 py-0.5 rounded text-xs">VPN</span><% end %>
<% if @network_range.is_proxy? %><span class="bg-red-200 px-2 py-0.5 rounded text-xs">Proxy</span><% end %>
</span>
<% end %>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Rule Type -->
<div>
<%= form.label :rule_type, "Rule Type", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :rule_type,
options_for_select([
['Network - IP/CIDR based blocking', 'network'],
['Rate Limit - Request rate limiting', 'rate_limit'],
['Path Pattern - URL path filtering', 'path_pattern'],
['Header Pattern - HTTP header filtering', 'header_pattern'],
['Query Pattern - Query parameter filtering', 'query_pattern'],
['Body Signature - Request body filtering', 'body_signature']
], 'network'),
{ },
{
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",
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>
<!-- Action -->
<div>
<%= form.label :action, "Action", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :action,
options_for_select([
['Deny - Block requests', 'deny'],
['Allow - Whitelist requests', 'allow'],
['Rate Limit - Throttle requests', 'rate_limit'],
['Redirect - Redirect to URL', 'redirect'],
['Challenge - Present CAPTCHA', 'challenge'],
['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",
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>
<!-- Expires At -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<%= form.label :expires_at, "Expires At (Optional)", class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :expires_at,
placeholder: "YYYY-MM-DD HH:MM (24-hour format, optional)",
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: "expiresAtField" },
autocomplete: "off" %>
<p class="mt-1 text-xs text-gray-500">Leave blank for permanent rule. Format: YYYY-MM-DD HH:MM (e.g., 2024-12-31 23:59)</p>
</div>
<div class="text-sm text-gray-600 flex items-center pt-6">
<svg class="w-4 h-4 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
Priority will be calculated automatically based on rule type
</div>
</div>
<!-- Pattern-based Rule Fields -->
<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",
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" 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" %>
<%= number_field_tag :rate_limit, 10,
min: 1,
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
<p class="mt-1 text-xs text-gray-500">Maximum requests per time window</p>
</div>
<div>
<%= label_tag :rate_window, "Time Window (seconds)", class: "block text-sm font-medium text-gray-700" %>
<%= number_field_tag :rate_window, 60,
min: 1,
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
<p class="mt-1 text-xs text-gray-500">Time window in seconds</p>
</div>
</div>
</div>
<!-- Redirect Fields -->
<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,
"https://example.com/blocked",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
<p class="mt-1 text-xs text-gray-500">URL to redirect to when rule matches</p>
</div>
</div>
<!-- Metadata -->
<div>
<%= form.label :metadata, "Reason/Description", class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :metadata,
placeholder: "e.g., Block malicious traffic from this range",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
<p class="mt-1 text-xs text-gray-500">Human-readable description of why this rule exists</p>
</div>
<!-- Source -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<%= form.label :source, "Source", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :source,
options_for_select([
['Manual', 'manual'],
['Auto-detected', 'auto'],
['Hub Sync', 'hub'],
['Imported', 'imported']
], 'manual'),
{ },
{ class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
</div>
<div class="flex items-center pt-6">
<%= form.check_box :enabled, checked: true, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" %>
<%= form.label :enabled, "Enable immediately", class: "ml-2 block text-sm text-gray-900" %>
</div>
</div>
<!-- Form Actions -->
<div class="flex justify-end space-x-3 pt-4 border-t border-blue-200">
<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" %>
</div>
<% end %>
</div>
</div>
<% end %>
<!-- Rules List -->
<% if @associated_rules.any? %>
<div class="divide-y divide-gray-200">
<% @associated_rules.each do |rule| %>
<div class="px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div>
<div class="flex items-center space-x-2">
<span class="text-sm font-medium text-gray-900">
<%= rule.action.upcase %> <%= rule.cidr %>
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
Priority: <%= rule.priority %>
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<%= rule.rule_type.humanize %>
</span>
<% if rule.source.include?('surgical') %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
Surgical
</span>
<% end %>
</div>
<div class="mt-1 text-sm text-gray-500">
Created <%= time_ago_in_words(rule.created_at) %> ago by <%= rule.user&.email_address || 'System' %>
</div>
<% if rule.metadata_hash['reason'].present? %>
<div class="mt-1 text-sm text-gray-600">
Reason: <%= rule.metadata_hash['reason'] %>
</div>
<% end %>
</div>
</div>
<div class="flex items-center space-x-2">
<% if rule.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">Active</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-800">Disabled</span>
<% end %>
<%= link_to "View", rule_path(rule), class: "text-blue-600 hover:text-blue-900 text-sm font-medium" %>
</div>
</div>
</div>
<% end %>
</div>
<% else %>
<div class="px-6 py-8 text-center text-gray-500">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<% if @network_range.virtual? %>
<h3 class="mt-2 text-sm font-medium text-gray-900">Virtual Network</h3>
<p class="mt-1 text-sm text-gray-500">Create this network range to add rules and manage it permanently.</p>
<% else %>
<h3 class="mt-2 text-sm font-medium text-gray-900">No rules yet</h3>
<p class="mt-1 text-sm text-gray-500">Get started by creating a rule for this network range.</p>
<% end %>
</div>
<% end %>
</div>
<!-- Network Relationships -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- Parent Ranges -->
<% if @parent_ranges.any? %>
<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">Parent Network Ranges</h3>
</div>
<div class="divide-y divide-gray-200">
<% @parent_ranges.each do |parent| %>
<div class="px-6 py-3">
<div class="flex items-center justify-between">
<div>
<%= link_to parent.cidr, network_range_path(parent), class: "text-sm font-medium text-gray-900 hover:text-blue-600" %>
<div class="text-sm text-gray-500">
Prefix: /<%= parent.prefix_length %> |
<% if parent.company.present? %><%= parent.company %> | <% end %>
<%= parent.source %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<!-- Child Ranges -->
<% if @child_ranges.any? %>
<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">Child Network Ranges</h3>
</div>
<div class="divide-y divide-gray-200">
<% @child_ranges.each do |child| %>
<div class="px-6 py-3">
<div class="flex items-center justify-between">
<div>
<%= link_to child.cidr, network_range_path(child), class: "text-sm font-medium text-gray-900 hover:text-blue-600" %>
<div class="text-sm text-gray-500">
Prefix: /<%= child.prefix_length %> |
<% if child.company.present? %><%= child.company %> | <% end %>
<%= child.source %>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
<!-- Recent Events -->
<% if @related_events.any? %>
<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>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Path</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Agent</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<% @related_events.first(20).each do |event| %>
<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") %>
</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 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' %>">
<%= event.waf_action %>
</span>
</td>
<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 %>
</tbody>
</table>
</div>
</div>
<% end %>
</div>