Tidy up homepage and navigation

This commit is contained in:
Dan Milne
2025-11-09 20:58:13 +11:00
parent c9e2992fe0
commit 1f4428348d
56 changed files with 2822 additions and 955 deletions

View File

@@ -1,23 +1,21 @@
<% content_for :title, "Network Ranges - #{@project.name}" %>
<% content_for :title, "Network Ranges" %>
<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
<div class="space-y-6">
<!-- Header -->
<div class="mb-8">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">Network Ranges</h1>
<p class="mt-2 text-gray-600">Browse and manage network ranges with intelligence data</p>
</div>
<div class="flex space-x-3">
<%= link_to "IP Lookup", lookup_network_ranges_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" %>
<%= link_to "Add Range", new_network_range_path, 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" %>
</div>
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">Network Ranges</h1>
<p class="mt-2 text-gray-600">Browse and manage network ranges with intelligence data</p>
</div>
<div class="flex space-x-3">
<%= link_to "IP Lookup", lookup_network_ranges_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" %>
<%= link_to "Add Range", new_network_range_path, 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" %>
</div>
</div>
<!-- Active Filters -->
<% if params[:asn].present? || params[:country].present? || params[:company].present? || params[:datacenter].present? || params[:vpn].present? || params[:proxy].present? || params[:source].present? || params[:search].present? %>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-medium text-blue-900">Active Filters</h3>
@@ -225,8 +223,23 @@
<!-- Network Ranges Table -->
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 sm:px-6 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">Network Ranges</h3>
<p class="mt-1 text-sm text-gray-500">Showing <%= @network_ranges.count %> of <%= number_with_delimiter(@total_ranges) %> ranges</p>
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-medium text-gray-900">Network Ranges</h3>
<p class="mt-1 text-sm text-gray-500">Showing <%= @network_ranges.count %> of <%= number_with_delimiter(@total_ranges) %> ranges</p>
</div>
<% if @pagy.present? && @pagy.pages > 1 %>
<span class="text-sm text-gray-500">
Page <%= @pagy.page %> of <%= @pagy.pages %>
</span>
<% end %>
</div>
<!-- Top Pagination -->
<% if @pagy.present? && @pagy.pages > 1 %>
<div class="mt-4">
<%= pagy_nav_tailwind(@pagy, pagy_id: 'network_ranges_top') %>
</div>
<% end %>
</div>
<ul class="divide-y divide-gray-200">
@@ -304,10 +317,10 @@
<% end %>
</div>
<!-- Pagination -->
<% if @pagy.present? %>
<div class="mt-6 flex justify-center">
<%= pagy_nav(@pagy) %>
<!-- Bottom Pagination -->
<% if @pagy.present? && @pagy.pages > 1 %>
<div class="mt-6">
<%= pagy_nav_tailwind(@pagy, pagy_id: 'network_ranges_bottom') %>
</div>
<% end %>
</div>

View File

@@ -159,22 +159,22 @@
<h3 class="text-lg font-medium text-gray-900">Traffic Statistics</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="text-center">
<div class="text-2xl font-bold text-gray-900"><%= number_with_delimiter(@traffic_stats[:total_requests]) %></div>
<div class="text-sm text-gray-500">Total Requests</div>
<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">
<div class="text-2xl font-bold text-gray-900"><%= number_with_delimiter(@traffic_stats[:unique_ips]) %></div>
<div class="text-sm text-gray-500">Unique IPs</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">
<div class="text-2xl font-bold text-green-600"><%= number_with_delimiter(@traffic_stats[:allowed_requests]) %></div>
<div class="text-sm text-gray-500">Allowed</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">
<div class="text-2xl font-bold text-red-600"><%= number_with_delimiter(@traffic_stats[:blocked_requests]) %></div>
<div class="text-sm text-gray-500">Blocked</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>
@@ -196,11 +196,197 @@
<% end %>
<!-- Associated Rules -->
<% if @associated_rules.any? %>
<div class="bg-white shadow rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<div class="bg-white shadow rounded-lg mb-6">
<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>
<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">
<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>
</div>
</div>
<!-- Quick Create Rule Form -->
<div id="quick_create_rule" 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",
onchange: "toggleRuleTypeFields()"
} %>
<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" } %>
<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.datetime_local_field :expires_at,
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">Leave blank for permanent rule</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" 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>
</div>
</div>
<!-- Rate Limit Fields -->
<div id="rate_limit_fields" 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" 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" 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">
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>
<!-- Rules List -->
<% if @associated_rules.any? %>
<div class="divide-y divide-gray-200">
<% @associated_rules.each do |rule| %>
<div class="px-6 py-4">
@@ -214,6 +400,9 @@
<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
@@ -242,8 +431,16 @@
</div>
<% end %>
</div>
</div>
<% end %>
<% 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>
<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>
</div>
<% end %>
</div>
<!-- Network Relationships -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
@@ -344,4 +541,87 @@
</div>
</div>
<% end %>
</div>
</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>