Baffle-WAF/baffle-hub
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add 'tags' to event model. Add a dataimport system - currently for MaxMind zip files

Browse Source
This commit is contained in:
Dan Milne
2025-11-11 10:31:36 +11:00
parent 772fae7e8b
commit 26216da9ca
34 changed files with 3580 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/views/data_imports/_progress_card.html.erb Normal file
View File

@@ -0,0 +1,80 @@
<div class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-900">Import Progress</h2>
<%# Reuse the status_badge helper - need to define it here since it's a partial %>
<% def status_badge(status) %>
<% case status %>
<% when 'pending' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<%= status.capitalize %>
</span>
<% when 'processing' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<%= status.capitalize %>
</span>
<% when 'completed' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
<%= status.capitalize %>
</span>
<% when 'failed' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
<%= status.capitalize %>
</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">
<%= status.capitalize %>
</span>
<% end %>
<% end %>
<%= status_badge(@data_import.status) %>
</div>
<!-- Progress Bar -->
<div class="mb-4">
<div class="flex items-center justify-between text-sm text-gray-600 mb-1">
<span><%= number_with_delimiter(@data_import.processed_records) %> of <%= number_with_delimiter(@data_import.total_records) %> records</span>
<span><%= @data_import.progress_percentage %>%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
style="width: <%= @data_import.progress_percentage %>%"></div>
</div>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-gray-900">
<%= number_with_delimiter(@data_import.total_records) %>
</div>
<div class="text-sm text-gray-600">Total Records</div>
</div>
<div class="bg-green-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-green-900">
<%= number_with_delimiter(@data_import.processed_records) %>
</div>
<div class="text-sm text-green-600">Processed</div>
</div>
<div class="bg-red-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-red-900">
<%= number_with_delimiter(@data_import.failed_records) %>
</div>
<div class="text-sm text-red-600">Failed</div>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-blue-900">
<%= number_with_delimiter(@data_import.records_per_second) %>
</div>
<div class="text-sm text-blue-600">Records/Sec</div>
</div>
</div>
</div>
</div>
<%# Auto-refresh logic for completed/failed imports %>
<% if @data_import.completed? || @data_import.failed? %>
<script>
setTimeout(() => window.location.reload(), 2000);
</script>
<% end %>

273
app/views/data_imports/index.html.erb Normal file
View File

@@ -0,0 +1,273 @@
<%# Helper methods %>
<% def status_badge_class(status) %>
<% case status %>
<% when 'pending' %>
bg-gray-100 text-gray-800
<% when 'processing' %>
bg-blue-100 text-blue-800
<% when 'completed' %>
bg-green-100 text-green-800
<% when 'failed' %>
bg-red-100 text-red-800
<% else %>
bg-gray-100 text-gray-800
<% end %>
<% end %>
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-semibold text-gray-900">GeoLite2 Data Imports</h1>
<p class="mt-1 text-sm text-gray-600">
Manage and monitor your GeoLite2 database imports.
</p>
</div>
<%= link_to "New Import", new_data_import_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
</div>
</div>
<!-- Filters -->
<div class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4">
<%= form_with(url: data_imports_path, method: :get, local: true) do |f| %>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<%= f.label :import_type, "Import Type", class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= f.select :import_type,
options_for_select([['All Types', ''], ['ASN', 'asn'], ['Country', 'country']], params[:import_type]),
{ }, { class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
</div>
<div>
<%= f.label :status, "Status", class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= f.select :status,
options_for_select([['All Statuses', ''], ['Pending', 'pending'], ['Processing', 'processing'], ['Completed', 'completed'], ['Failed', 'failed']], params[:status]),
{ }, { class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
</div>
<div>
<%= f.label :filename, "Filename", class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= f.text_field :filename, value: params[:filename], class: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "Search filename..." %>
</div>
<div class="flex items-end">
<%= f.submit "Filter", class: "w-full flex justify-center py-2 px-4 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>
</div>
<% end %>
</div>
</div>
<!-- Stats Overview -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<div class="bg-white shadow-sm rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
</svg>
</div>
</div>
<div class="ml-4">
<div class="text-2xl font-semibold text-gray-900"><%= DataImport.count %></div>
<div class="text-sm text-gray-600">Total Imports</div>
</div>
</div>
</div>
<div class="bg-white shadow-sm rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
</div>
<div class="ml-4">
<div class="text-2xl font-semibold text-gray-900"><%= DataImport.completed.count %></div>
<div class="text-sm text-gray-600">Completed</div>
</div>
</div>
</div>
<div class="bg-white shadow-sm rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
</div>
</div>
<div class="ml-4">
<div class="text-2xl font-semibold text-gray-900"><%= DataImport.processing.count %></div>
<div class="text-sm text-gray-600">Processing</div>
</div>
</div>
</div>
<div class="bg-white shadow-sm rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
<svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
</div>
<div class="ml-4">
<div class="text-2xl font-semibold text-gray-900"><%= DataImport.failed.count %></div>
<div class="text-sm text-gray-600">Failed</div>
</div>
</div>
</div>
</div>
<!-- Imports Table -->
<div class="bg-white shadow-sm rounded-lg">
<div class="overflow-hidden">
<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">
Filename
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Type
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Progress
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Created
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Duration
</th>
<th class="relative px-6 py-3">
<span class="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<% if @data_imports.any? %>
<% @data_imports.each do |data_import| %>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<%= link_to data_import, class: "flex items-center text-blue-600 hover:text-blue-900 hover:underline" do %>
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"></path>
</svg>
<%= truncate(data_import.filename, length: 40) %>
<% end %>
</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 <%= data_import.import_type == 'asn' ? 'bg-purple-100 text-purple-800' : 'bg-indigo-100 text-indigo-800' %>">
<%= data_import.import_type.upcase %>
</span>
</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 <%= status_badge_class(data_import.status) %>">
<%= data_import.status.capitalize %>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
<%= link_to data_import, class: "block hover:bg-gray-50 -mx-2 px-2 py-1 rounded" do %>
<% if data_import.processing? || data_import.total_records > 0 %>
<div class="flex items-center">
<div class="flex-1 mr-2">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: <%= data_import.progress_percentage %>%"></div>
</div>
</div>
<span class="text-xs text-gray-600">
<% if data_import.processed_records > 0 %>
<% if data_import.total_records > 0 && data_import.processed_records >= data_import.total_records %>
<%= number_with_delimiter(data_import.processed_records) %> total
<% else %>
<%= number_with_delimiter(data_import.processed_records) %> imported
<% end %>
<% else %>
Initializing...
<% end %>
</span>
</div>
<% else %>
<span class="text-gray-400">Not started</span>
<% end %>
<% end %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<%= data_import.created_at.strftime('%Y-%m-%d %H:%M') %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<% if data_import.duration > 0 %>
<%= distance_of_time_in_words(data_import.duration) %>
<% else %>
-
<% end %>
</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,
data: {
confirm: "Are you sure you want to delete this import?"
},
class: "text-red-600 hover:text-red-900" %>
<% else %>
<span class="text-gray-400">Processing...</span>
<% end %>
</td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="7" class="px-6 py-12 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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"></path>
</svg>
<h3 class="mt-2 text-sm font-medium text-gray-900">No imports found</h3>
<p class="mt-1 text-sm text-gray-500">
<% if params[:import_type].present? || params[:status].present? || params[:filename].present? %>
Try adjusting your search filters or
<% else %>
Get started by uploading your first
<% end %>
<%= link_to "GeoLite2 import", new_data_import_path, class: "text-blue-600 hover:text-blue-500" %>.
</p>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<!-- Pagination -->
<% if @pagy.pages > 1 %>
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
Showing
<span class="font-medium"><%= @pagy.from %></span>
to
<span class="font-medium"><%= @pagy.to %></span>
of
<span class="font-medium"><%= @pagy.count %></span>
results
</p>
</div>
<div>
<%= pagy_nav_tailwind(@pagy) %>
</div>
</div>
</div>
<% end %>
</div>
</div>

162
app/views/data_imports/new.html.erb Normal file
View File

@@ -0,0 +1,162 @@
<div class="max-w-2xl mx-auto">
<div class="bg-white shadow-sm rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h1 class="text-2xl font-semibold text-gray-900">Import GeoLite2 Data</h1>
<p class="mt-1 text-sm text-gray-600">
Upload GeoLite2-ASN-CSV or GeoLite2-Country-CSV files to import network range data.
</p>
</div>
<div class="px-6 py-4">
<%= form_with(model: @data_import, local: true, class: "space-y-6") do |form| %>
<% if @data_import.errors.any? %>
<div class="rounded-md bg-red-50 p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-red-800">
There were <%= pluralize(@data_import.errors.count, "error") %> with your submission:
</h3>
<div class="mt-2 text-sm text-red-700">
<ul class="list-disc list-inside space-y-1">
<% @data_import.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
<!-- File Upload Section -->
<div class="space-y-2">
<%= form.label :file, "Select File", class: "block text-sm font-medium text-gray-700" %>
<div class="flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-gray-400 transition-colors">
<div class="space-y-1 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-gray-600">
<label for="data_import_file" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
<span>Upload a file</span>
<%= form.file_field :file, id: "data_import_file", class: "sr-only", accept: ".csv,.zip", required: true %>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500">
CSV or ZIP files up to 500MB
</p>
</div>
</div>
</div>
<!-- File Type Detection -->
<div class="bg-blue-50 border border-blue-200 rounded-md p-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
<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>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">Automatic Detection</h3>
<div class="mt-2 text-sm text-blue-700">
<p>The system will automatically detect whether your file contains ASN or Country data based on:</p>
<ul class="mt-1 list-disc list-inside">
<li>Filename (containing "ASN" or "Country")</li>
<li>Column headers in the CSV file</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Supported Formats -->
<div class="bg-gray-50 border border-gray-200 rounded-md p-4">
<h3 class="text-sm font-medium text-gray-800 mb-3">Supported File Formats</h3>
<div class="space-y-3">
<div>
<h4 class="text-sm font-medium text-gray-700">GeoLite2-ASN-CSV</h4>
<p class="text-xs text-gray-600">Contains network ranges with ASN and organization information</p>
<p class="text-xs text-gray-500">Expected files: GeoLite2-ASN-Blocks-IPv4.csv, GeoLite2-ASN-Blocks-IPv6.csv</p>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700">GeoLite2-Country-CSV</h4>
<p class="text-xs text-gray-600">Contains network ranges with country geolocation data</p>
<p class="text-xs text-gray-500">Expected files: GeoLite2-Country-Blocks-IPv4.csv, GeoLite2-Country-Blocks-IPv6.csv, GeoLite2-Country-Locations-*.csv</p>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<%= form.submit "Start Import", class: "w-full flex justify-center py-2 px-4 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 cursor-pointer transition-colors" %>
</div>
<% end %>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const fileInput = document.getElementById('data_import_file');
const dropZone = fileInput.closest('.border-dashed');
// Handle drag and drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropZone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, unhighlight, false);
});
function highlight(e) {
dropZone.classList.add('border-blue-400', 'bg-blue-50');
}
function unhighlight(e) {
dropZone.classList.remove('border-blue-400', 'bg-blue-50');
}
dropZone.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
if (files.length > 0) {
fileInput.files = files;
updateFileName(files[0].name);
}
}
fileInput.addEventListener('change', function(e) {
if (e.target.files.length > 0) {
updateFileName(e.target.files[0].name);
}
});
function updateFileName(fileName) {
const textElement = dropZone.querySelector('p.text-xs');
textElement.textContent = `Selected: ${fileName}`;
textElement.classList.add('text-green-600', 'font-medium');
}
});
</script>

222
app/views/data_imports/show.html.erb Normal file
View File

@@ -0,0 +1,222 @@
<%# Helper methods %>
<% def status_badge(status) %>
<% case status %>
<% when 'pending' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<%= status.capitalize %>
</span>
<% when 'processing' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<%= status.capitalize %>
</span>
<% when 'completed' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
<%= status.capitalize %>
</span>
<% when 'failed' %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
<%= status.capitalize %>
</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">
<%= status.capitalize %>
</span>
<% end %>
<% end %>
<div class="max-w-4xl mx-auto">
<!-- Header -->
<div class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-semibold text-gray-900">Import Details</h1>
<p class="mt-1 text-sm text-gray-600">
<%= @data_import.filename %>
</p>
</div>
<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,
data: {
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 %>
</div>
</div>
</div>
</div>
<!-- Progress Card -->
<div data-controller="data-import-progress"
data-data-import-progress-import-id-value="<%= @data_import.id %>"
class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-900">Import Progress</h2>
<%= status_badge(@data_import.status) %>
</div>
<!-- Progress Bar -->
<div class="mb-4">
<div class="flex items-center justify-between text-sm text-gray-600 mb-1">
<span>
<% if @data_import.total_records > 0 && @data_import.processed_records >= @data_import.total_records %>
<%= number_with_delimiter(@data_import.processed_records) %> total records
<% elsif @data_import.total_records > 0 %>
<%= number_with_delimiter(@data_import.processed_records) %> records processed
<% else %>
Initializing...
<% end %>
</span>
<span><%= @data_import.progress_percentage %>%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div data-data-import-progress-target="progressBar"
class="bg-blue-600 h-2 rounded-full transition-all duration-300"
style="width: <%= @data_import.progress_percentage %>%"></div>
</div>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-gray-900" data-data-import-progress-target="totalRecords">
<%= number_with_delimiter(@data_import.total_records) %>
</div>
<div class="text-sm text-gray-600">Total Records</div>
</div>
<div class="bg-green-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-green-900" data-data-import-progress-target="processedRecords">
<%= number_with_delimiter(@data_import.processed_records) %>
</div>
<div class="text-sm text-green-600">Processed</div>
</div>
<div class="bg-red-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-red-900" data-data-import-progress-target="failedRecords">
<%= number_with_delimiter(@data_import.failed_records) %>
</div>
<div class="text-sm text-red-600">Failed</div>
</div>
<div class="bg-blue-50 rounded-lg p-4">
<div class="text-2xl font-semibold text-blue-900" data-data-import-progress-target="recordsPerSecond">
<%= number_with_delimiter(@data_import.records_per_second) %>
</div>
<div class="text-sm text-blue-600">Records/Sec</div>
</div>
</div>
</div>
</div>
<!-- Import Details -->
<div class="bg-white shadow-sm rounded-lg mb-6">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Import Information</h2>
</div>
<div class="px-6 py-4">
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
<div>
<dt class="text-sm font-medium text-gray-500">Import Type</dt>
<dd class="mt-1 text-sm text-gray-900 capitalize"><%= @data_import.import_type %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Filename</dt>
<dd class="mt-1 text-sm text-gray-900"><%= @data_import.filename %></dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Started</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if @data_import.processing? && @data_import.started_at %>
<%= time_ago_in_words(@data_import.started_at) %> ago
(<%= @data_import.started_at.strftime('%Y-%m-%d %H:%M:%S') %>)
<% elsif @data_import.processing? %>
Initializing...
<% elsif @data_import.started_at %>
<%= time_ago_in_words(@data_import.started_at) %> ago
(<%= @data_import.started_at.strftime('%Y-%m-%d %H:%M:%S') %>)
<% else %>
Not started
<% end %>
</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Duration</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if @data_import.duration > 0 %>
<%= distance_of_time_in_words(@data_import.duration) %>
<% else %>
N/A
<% end %>
</dd>
</div>
<div>
<dt class="text-sm font-medium text-gray-500">Completed</dt>
<dd class="mt-1 text-sm text-gray-900">
<% if @data_import.completed? && @data_import.completed_at %>
<%= time_ago_in_words(@data_import.completed_at) %> ago
(<%= @data_import.completed_at.strftime('%Y-%m-%d %H:%M:%S') %>)
<% elsif @data_import.completed? %>
Just now
<% elsif @data_import.processing? %>
In progress...
<% else %>
Not completed
<% end %>
</dd>
</div>
</dl>
</div>
</div>
<!-- Error Details (if any) -->
<% if @data_import.error_message.present? || @data_import.import_stats['errors']&.any? %>
<div class="bg-red-50 border border-red-200 rounded-lg mb-6">
<div class="px-6 py-4 border-b border-red-200">
<h2 class="text-lg font-medium text-red-900">Error Details</h2>
</div>
<div class="px-6 py-4">
<% if @data_import.error_message.present? %>
<div class="mb-4">
<h3 class="text-sm font-medium text-red-800 mb-2">General Error</h3>
<p class="text-sm text-red-700"><%= @data_import.error_message %></p>
</div>
<% end %>
<% if @data_import.import_stats['errors']&.any? %>
<div>
<h3 class="text-sm font-medium text-red-800 mb-2">Recent Errors (<%= @data_import.import_stats['errors'].size %>)</h3>
<div class="bg-white rounded border border-red-200 p-3 max-h-48 overflow-y-auto">
<ul class="space-y-2">
<% @data_import.import_stats['errors'].each do |error| %>
<li class="text-xs text-red-700 font-mono"><%= error %></li>
<% end %>
</ul>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<!-- Additional Stats (if available) -->
<% if @data_import.import_stats&.any? && (@data_import.import_stats.except('errors', 'completed_at')).any? %>
<div class="bg-white shadow-sm rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Additional Statistics</h2>
</div>
<div class="px-6 py-4">
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
<% @data_import.import_stats.except('errors', 'completed_at').each do |key, value| %>
<div>
<dt class="text-sm font-medium text-gray-500"><%= key.to_s.humanize %></dt>
<dd class="mt-1 text-sm text-gray-900"><%= value.is_a?(Hash) ? value.inspect : value %></dd>
</div>
<% end %>
</dl>
</div>
</div>
<% end %>
</div>

8
app/views/layouts/application.html.erb
View File

@@ -20,6 +20,10 @@
<%# Includes all stylesheet files in app/assets/stylesheets %>
<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%# Tom Select CSS for enhanced multi-select %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" data-turbo-track="reload">
<%= javascript_importmap_tags %>
<style>
@@ -74,6 +78,8 @@
class: nav_link_class(network_ranges_path) %>
<% if user_signed_in? && current_user_admin? %>
<%= link_to "📊 Data Imports", data_imports_path,
class: nav_link_class(data_imports_path) %>
<%= link_to "🔗 DSNs", dsns_path,
class: nav_link_class(dsns_path) %>
<% end %>
@@ -165,6 +171,8 @@
class: mobile_nav_link_class(network_ranges_path) %>
<% if user_signed_in? && current_user_admin? %>
<%= link_to "📊 Data Imports", data_imports_path,
class: mobile_nav_link_class(data_imports_path) %>
<%= link_to "🔗 DSNs", dsns_path,
class: mobile_nav_link_class(dsns_path) %>
<% end %>

240
app/views/waf_policies/edit.html.erb Normal file
View File

@@ -0,0 +1,240 @@
<% content_for :title, "Edit WAF Policy" %>
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">Edit WAF Policy</h1>
<p class="mt-2 text-gray-600">Modify the firewall policy settings</p>
</div>
<div class="flex space-x-3">
<%= link_to "← Back to Policy", waf_policy_path(@waf_policy),
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>
<%= form_with(model: @waf_policy, local: true, class: "space-y-6") do |form| %>
<!-- Basic Information -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">📋 Basic Information</h3>
<!-- Name -->
<div>
<%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :name,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., Block Brazil" %>
</div>
<!-- Description -->
<div>
<%= form.label :description, "Description", class: "block text-sm font-medium text-gray-700" %>
<%= form.text_area :description, rows: 3,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "Explain why this policy is needed..." %>
</div>
<!-- Action -->
<div>
<%= form.label :action, "Action", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :action,
options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.action),
{ prompt: "Select action" },
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
id: "action-select" } %>
</div>
<!-- Status -->
<div class="flex items-center">
<%= form.check_box :enabled, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
<%= form.label :enabled, "Enable this policy", class: "ml-2 text-sm text-gray-700" %>
</div>
<!-- Expiration -->
<div>
<%= form.label :expires_at, "Expires At (optional)", class: "block text-sm font-medium text-gray-700" %>
<%= form.datetime_local_field :expires_at,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
<p class="text-xs text-gray-500 mt-1">Leave blank for permanent policy</p>
</div>
</div>
</div>
<!-- Targets Configuration -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">🎯 Targets Configuration</h3>
<p class="text-sm text-gray-600">
<strong>Policy Type:</strong> <%= @waf_policy.policy_type.humanize %>
<% unless @waf_policy.new_record? %>
<span class="text-xs text-gray-500">(Cannot change policy type after creation)</span>
<% end %>
</p>
<% if @waf_policy.new_record? %>
<!-- Policy Type (only for new records) -->
<div>
<%= form.label :policy_type, "Policy Type", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :policy_type,
options_for_select(@policy_types.map { |type| [type.humanize, type] }, @waf_policy.policy_type),
{ prompt: "Select policy type" },
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
id: "policy-type-select", disabled: !@waf_policy.new_record? } %>
</div>
<% else %>
<!-- Display policy type for existing records -->
<div>
<%= form.label :policy_type, "Policy Type", class: "block text-sm font-medium text-gray-700" %>
<div class="mt-1">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<%= @waf_policy.policy_type.humanize %>
</span>
</div>
<%= form.hidden_field :policy_type %>
</div>
<% end %>
<!-- Country Policy Targets -->
<% if @waf_policy.country_policy? %>
<div id="country-targets">
<%= form.label :targets, "Countries", class: "block text-sm font-medium text-gray-700 mb-2" %>
<div data-controller="country-selector"
data-country-selector-options-value="<%= CountryHelper.all_for_select.to_json %>"
data-country-selector-placeholder-value="Search and select countries...">
<%= select_tag "waf_policy[targets][]",
options_for_select(@waf_policy.targets.map { |code| [CountryHelper.display_with_flag(code), code] }, @waf_policy.targets),
{
multiple: true,
class: "hidden",
data: { "country-selector-target": "select" }
} %>
</div>
</div>
<% end %>
<!-- ASN Policy Targets -->
<% if @waf_policy.asn_policy? %>
<div id="asn-targets">
<%= form.label :targets, "ASN Numbers", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "waf_policy[targets][]", @waf_policy.targets.join(', '),
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., 12345, 67890" %>
<p class="text-xs text-gray-500 mt-1">Enter ASNs separated by commas</p>
</div>
<% end %>
<!-- Company Policy Targets -->
<% if @waf_policy.company_policy? %>
<div id="company-targets">
<%= form.label :targets, "Companies", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "waf_policy[targets][]", @waf_policy.targets.join(', '),
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., AWS, Digital Ocean, Google Cloud" %>
<p class="text-xs text-gray-500 mt-1">Enter company names separated by commas</p>
</div>
<% end %>
<!-- Network Type Targets -->
<% if @waf_policy.network_type_policy? %>
<div id="network-type-targets">
<%= form.label :targets, "Network Types", class: "block text-sm font-medium text-gray-700" %>
<div class="space-y-2">
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "datacenter", @waf_policy.targets.include?("datacenter"), class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Datacenter IPs</span>
</label>
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "proxy", @waf_policy.targets.include?("proxy"), class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Proxy/VPN IPs</span>
</label>
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "standard", @waf_policy.targets.include?("standard"), class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Standard ISPs</span>
</label>
</div>
</div>
<% end %>
</div>
</div>
<!-- Additional Configuration -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Additional Configuration</h3>
<!-- Redirect Settings (for redirect action) -->
<div id="redirect-config" class="space-y-3 <%= 'hidden' unless @waf_policy.redirect_action? %>">
<div>
<%= label_tag "additional_data[redirect_url]", "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "additional_data[redirect_url]", @waf_policy.additional_data&.dig('redirect_url'),
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "https://example.com/compliance" %>
</div>
<div>
<%= label_tag "additional_data[redirect_status]", "HTTP Status", class: "block text-sm font-medium text-gray-700" %>
<%= select_tag "additional_data[redirect_status]",
options_for_select([["301 Moved Permanently", 301], ["302 Found", 302], ["307 Temporary Redirect", 307]], @waf_policy.additional_data&.dig('redirect_status')),
{ include_blank: true, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
</div>
</div>
<!-- Challenge Settings (for challenge action) -->
<div id="challenge-config" class="space-y-3 <%= 'hidden' unless @waf_policy.challenge_action? %>">
<div>
<%= label_tag "additional_data[challenge_type]", "Challenge Type", class: "block text-sm font-medium text-gray-700" %>
<%= select_tag "additional_data[challenge_type]",
options_for_select([["CAPTCHA", "captcha"], ["JavaScript", "javascript"], ["Proof of Work", "proof_of_work"]], @waf_policy.additional_data&.dig('challenge_type')),
{ include_blank: true, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
</div>
<div>
<%= label_tag "additional_data[challenge_message]", "Challenge Message", class: "block text-sm font-medium text-gray-700" %>
<%= text_area_tag "additional_data[challenge_message]", @waf_policy.additional_data&.dig('challenge_message'), rows: 2,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "Please verify you are human to continue..." %>
</div>
</div>
</div>
</div>
<!-- Submit Buttons -->
<div class="flex justify-end space-x-3">
<%= link_to "Cancel", waf_policy_path(@waf_policy),
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" %>
<%= form.submit "Update Policy",
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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
<% end %>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const actionSelect = document.getElementById('action-select');
const redirectConfig = document.getElementById('redirect-config');
const challengeConfig = document.getElementById('challenge-config');
function updateActionConfig() {
const selectedAction = actionSelect.value;
// Hide all config sections
redirectConfig.classList.add('hidden');
challengeConfig.classList.add('hidden');
// Show relevant config section
switch(selectedAction) {
case 'redirect':
redirectConfig.classList.remove('hidden');
break;
case 'challenge':
challengeConfig.classList.remove('hidden');
break;
}
}
// Add event listener
actionSelect.addEventListener('change', updateActionConfig);
// Initial update
updateActionConfig();
});
</script>

8
app/views/waf_policies/index.html.erb
View File

@@ -150,7 +150,13 @@
</div>
<div class="mt-1 text-sm text-gray-500">
<%= policy.policy_type.humanize %> policy targeting
<% if policy.targets.length > 3 %>
<% if policy.country_policy? && policy.targets.any? %>
<% if policy.targets.length > 3 %>
<%= policy.targets.length %> countries
<% else %>
<%= policy.targets.map { |code| CountryHelper.display_with_flag(code) }.join(', ') %>
<% end %>
<% elsif policy.targets.length > 3 %>
<%= policy.targets.length %> items
<% else %>
<%= policy.targets.join(', ') %>

240
app/views/waf_policies/new.html.erb Normal file
View File

@@ -0,0 +1,240 @@
<% content_for :title, "New WAF Policy" %>
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">New WAF Policy</h1>
<p class="mt-2 text-gray-600">Create a new firewall policy to automatically generate rules</p>
</div>
<div class="flex space-x-3">
<%= link_to "← Back to Policies", waf_policies_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>
<%= form_with(model: @waf_policy, local: true, class: "space-y-6") do |form| %>
<!-- Basic Information -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">📋 Basic Information</h3>
<!-- Name -->
<div>
<%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
<%= form.text_field :name,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., Block Brazil" %>
</div>
<!-- Description -->
<div>
<%= form.label :description, "Description", class: "block text-sm font-medium text-gray-700" %>
<%= form.text_area :description, rows: 3,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "Explain why this policy is needed..." %>
</div>
<!-- Policy Type -->
<div>
<%= form.label :policy_type, "Policy Type", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :policy_type,
options_for_select(@policy_types.map { |type| [type.humanize, type] }, @waf_policy.policy_type),
{ prompt: "Select policy type" },
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
id: "policy-type-select" } %>
</div>
<!-- Action -->
<div>
<%= form.label :action, "Action", class: "block text-sm font-medium text-gray-700" %>
<%= form.select :action,
options_for_select(@actions.map { |action| [action.humanize, action] }, @waf_policy.action),
{ prompt: "Select action" },
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
id: "action-select" } %>
</div>
</div>
</div>
<!-- Targets Configuration -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">🎯 Targets Configuration</h3>
<!-- Country Policy Targets -->
<div id="country-targets" class="policy-targets hidden">
<%= form.label :targets, "Countries", class: "block text-sm font-medium text-gray-700 mb-2" %>
<div data-controller="country-selector"
data-country-selector-options-value="<%= CountryHelper.all_for_select.to_json %>"
data-country-selector-placeholder-value="Search and select countries...">
<%= select_tag "waf_policy[targets][]",
options_for_select([]),
{
multiple: true,
class: "hidden",
data: { "country-selector-target": "select" }
} %>
</div>
</div>
<!-- ASN Policy Targets -->
<div id="asn-targets" class="policy-targets hidden">
<%= form.label :targets, "ASN Numbers", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "waf_policy[targets][]", nil,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., 12345, 67890" %>
<p class="text-xs text-gray-500 mt-1">Enter ASNs separated by commas</p>
</div>
<!-- Company Policy Targets -->
<div id="company-targets" class="policy-targets hidden">
<%= form.label :targets, "Companies", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "waf_policy[targets][]", nil,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "e.g., AWS, Digital Ocean, Google Cloud" %>
<p class="text-xs text-gray-500 mt-1">Enter company names separated by commas</p>
</div>
<!-- Network Type Targets -->
<div id="network-type-targets" class="policy-targets hidden">
<%= form.label :targets, "Network Types", class: "block text-sm font-medium text-gray-700" %>
<div class="space-y-2">
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "datacenter", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Datacenter IPs</span>
</label>
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "proxy", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Proxy/VPN IPs</span>
</label>
<label class="flex items-center">
<%= check_box_tag "waf_policy[targets][]", "standard", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<span class="text-sm text-gray-700">Standard ISPs</span>
</label>
</div>
</div>
</div>
</div>
<!-- Additional Configuration -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Additional Configuration</h3>
<!-- Redirect Settings (for redirect action) -->
<div id="redirect-config" class="hidden space-y-3">
<div>
<%= label_tag "additional_data[redirect_url]", "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "additional_data[redirect_url]", nil,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "https://example.com/compliance" %>
</div>
<div>
<%= label_tag "additional_data[redirect_status]", "HTTP Status", class: "block text-sm font-medium text-gray-700" %>
<%= select_tag "additional_data[redirect_status]",
options_for_select([["301 Moved Permanently", 301], ["302 Found", 302], ["307 Temporary Redirect", 307]]),
{ include_blank: true, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
</div>
</div>
<!-- Challenge Settings (for challenge action) -->
<div id="challenge-config" class="hidden space-y-3">
<div>
<%= label_tag "additional_data[challenge_type]", "Challenge Type", class: "block text-sm font-medium text-gray-700" %>
<%= select_tag "additional_data[challenge_type]",
options_for_select([["CAPTCHA", "captcha"], ["JavaScript", "javascript"], ["Proof of Work", "proof_of_work"]]),
{ include_blank: true, class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
</div>
<div>
<%= label_tag "additional_data[challenge_message]", "Challenge Message", class: "block text-sm font-medium text-gray-700" %>
<%= text_area_tag "additional_data[challenge_message]", nil, rows: 2,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm",
placeholder: "Please verify you are human to continue..." %>
</div>
</div>
<!-- Expiration -->
<div>
<%= form.label :expires_at, "Expires At (optional)", class: "block text-sm font-medium text-gray-700" %>
<%= form.datetime_local_field :expires_at,
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
<p class="text-xs text-gray-500 mt-1">Leave blank for permanent policy</p>
</div>
<!-- Enabled -->
<div class="flex items-center">
<%= form.check_box :enabled, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
<%= form.label :enabled, "Enable this policy immediately", class: "ml-2 text-sm text-gray-700" %>
</div>
</div>
</div>
<!-- Submit Buttons -->
<div class="flex justify-end space-x-3">
<%= link_to "Cancel", waf_policies_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" %>
<%= form.submit "Create Policy",
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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
</div>
<% end %>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const policyTypeSelect = document.getElementById('policy-type-select');
const actionSelect = document.getElementById('action-select');
const allTargets = document.querySelectorAll('.policy-targets');
const redirectConfig = document.getElementById('redirect-config');
const challengeConfig = document.getElementById('challenge-config');
function updateTargetsVisibility() {
const selectedType = policyTypeSelect.value;
// Hide all target sections
allTargets.forEach(target => target.classList.add('hidden'));
// Show relevant target section
switch(selectedType) {
case 'country':
document.getElementById('country-targets').classList.remove('hidden');
break;
case 'asn':
document.getElementById('asn-targets').classList.remove('hidden');
break;
case 'company':
document.getElementById('company-targets').classList.remove('hidden');
break;
case 'network_type':
document.getElementById('network-type-targets').classList.remove('hidden');
break;
}
}
function updateActionConfig() {
const selectedAction = actionSelect.value;
// Hide all config sections
redirectConfig.classList.add('hidden');
challengeConfig.classList.add('hidden');
// Show relevant config section
switch(selectedAction) {
case 'redirect':
redirectConfig.classList.remove('hidden');
break;
case 'challenge':
challengeConfig.classList.remove('hidden');
break;
}
}
// Add event listeners
policyTypeSelect.addEventListener('change', updateTargetsVisibility);
actionSelect.addEventListener('change', updateActionConfig);
// Initial update
updateTargetsVisibility();
updateActionConfig();
});
</script>

194
app/views/waf_policies/new_country.html.erb Normal file
View File

@@ -0,0 +1,194 @@
<% content_for :title, "Block Countries" %>
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900">🌍 Block Countries</h1>
<p class="mt-2 text-gray-600">Create country-based firewall policies to block or redirect traffic from specific countries</p>
</div>
<div class="flex space-x-3">
<%= link_to "← Back to Policies", waf_policies_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>
<%= form_with(url: create_country_waf_policies_path, method: :post, local: true, class: "space-y-6") do |form| %>
<!-- Popular Countries Quick Selection -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🚨 Popular Countries for Blocking</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<% CountryHelper.popular_for_blocking.each do |country| %>
<label class="relative flex items-start p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
<div class="flex items-center h-5">
<%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
</div>
<div class="ml-3 text-sm">
<div class="font-medium text-gray-900">
<%= country[:display] %>
</div>
<div class="text-gray-500">
<%= country[:reason] %>
</div>
</div>
</label>
<% end %>
</div>
</div>
</div>
<!-- Regional Selection -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🗺️ Select by Region</h3>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<% CountryHelper.by_region.each do |region_name, country_codes| %>
<div>
<h4 class="font-medium text-gray-900 mb-2"><%= region_name %></h4>
<div class="grid grid-cols-2 gap-2">
<% CountryHelper.countries_for_region(region_name).each do |country| %>
<label class="flex items-center text-sm">
<%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
<%= country[:display] %>
</label>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</div>
<!-- Policy Settings -->
<div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6 space-y-4">
<h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Policy Settings</h3>
<!-- Action Selection -->
<div>
<%= form.label :action, "What should happen to traffic from selected countries?", class: "block text-sm font-medium text-gray-700" %>
<div class="mt-2 space-y-2">
<label class="flex items-center">
<%= radio_button_tag "action", "deny", true, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
<span class="ml-2 text-sm text-gray-700">
<span class="font-medium">🚫 Block (Deny)</span> - Show 403 Forbidden error
</span>
</label>
<label class="flex items-center">
<%= radio_button_tag "action", "challenge", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
<span class="ml-2 text-sm text-gray-700">
<span class="font-medium">🛡️ Challenge</span> - Present CAPTCHA challenge
</span>
</label>
<label class="flex items-center">
<%= radio_button_tag "action", "redirect", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
<span class="ml-2 text-sm text-gray-700">
<span class="font-medium">🔄 Redirect</span> - Redirect to compliance page
</span>
</label>
<label class="flex items-center">
<%= radio_button_tag "action", "allow", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
<span class="ml-2 text-sm text-gray-700">
<span class="font-medium">✅ Allow</span> - Explicitly allow traffic
</span>
</label>
</div>
</div>
<!-- Redirect Settings (conditional) -->
<div id="redirect-settings" class="hidden space-y-3">
<%= form.label :redirect_url, "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
<%= text_field_tag "additional_data[redirect_url]", nil,
placeholder: "https://example.com/compliance",
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
<%= form.label :redirect_status, "HTTP Status", class: "block text-sm font-medium text-gray-700 mt-2" %>
<%= select_tag "additional_data[redirect_status]",
options_for_select([["301 Moved Permanently", 301], ["302 Found", 302], ["307 Temporary Redirect", 307]], 302),
{ class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
</div>
<!-- Description -->
<div>
<%= form.label :description, "Description (optional)", class: "block text-sm font-medium text-gray-700" %>
<%= text_area_tag "description", nil, rows: 3,
placeholder: "e.g., Block countries with high scanner activity",
class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
</div>
<!-- Preview -->
<div id="policy-preview" class="border-t pt-4">
<h4 class="text-sm font-medium text-gray-900 mb-2">📋 Policy Preview</h4>
<div class="bg-gray-50 rounded-md p-3 text-sm text-gray-600">
<span id="preview-text">Select countries above to see policy preview...</span>
</div>
</div>
</div>
</div>
<!-- Submit Buttons -->
<div class="flex justify-end space-x-3">
<%= link_to "Cancel", waf_policies_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" %>
<%= submit_tag "Create Country Policy",
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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
</div>
<% end %>
</div>
<script>
// Show/hide redirect settings based on action selection
document.addEventListener('DOMContentLoaded', function() {
const actionRadios = document.querySelectorAll('input[name="action"]');
const redirectSettings = document.getElementById('redirect-settings');
const previewText = document.getElementById('preview-text');
function updateVisibility() {
const selectedAction = document.querySelector('input[name="action"]:checked')?.value;
if (selectedAction === 'redirect') {
redirectSettings.classList.remove('hidden');
} else {
redirectSettings.classList.add('hidden');
}
updatePreview();
}
function updatePreview() {
const selectedCountries = document.querySelectorAll('input[name="countries[]"]:checked');
const selectedAction = document.querySelector('input[name="action"]:checked')?.value || 'deny';
const actionText = {
'deny': '🚫 Block',
'challenge': '🛡️ Challenge',
'redirect': '🔄 Redirect',
'allow': '✅ Allow'
}[selectedAction];
if (selectedCountries.length > 0) {
const countryNames = Array.from(selectedCountries).map(cb => {
const label = cb.closest('label');
const countryName = label.querySelector('.font-medium')?.textContent || cb.value;
return countryName;
}).join(', ');
previewText.textContent = `${actionText} ${selectedCountries.length} countries: ${countryNames}`;
} else {
previewText.textContent = 'Select countries above to see policy preview...';
}
}
// Add event listeners
actionRadios.forEach(radio => {
radio.addEventListener('change', updateVisibility);
});
document.querySelectorAll('input[name="countries[]"]').forEach(checkbox => {
checkbox.addEventListener('change', updatePreview);
});
// Initial update
updateVisibility();
});
</script>

270
app/views/waf_policies/show.html.erb Normal file
View File

@@ -0,0 +1,270 @@
<% content_for :title, @waf_policy.name %>
<div class="space-y-6">
<!-- Header -->
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-gray-900"><%= @waf_policy.name %></h1>
<p class="mt-2 text-gray-600"><%= @waf_policy.description %></p>
</div>
<div class="flex space-x-3">
<%= link_to "← Back to Policies", waf_policies_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 "Edit", edit_waf_policy_path(@waf_policy),
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>
<!-- Policy Details -->
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">📋 Policy Details</h3>
</div>
<div class="border-t border-gray-200">
<dl>
<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">Policy Type</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
<%= @waf_policy.policy_type.humanize %>
</span>
</dd>
</div>
<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">Action</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
<%= case @waf_policy.action
when 'deny' then 'bg-red-100 text-red-800'
when 'allow' then 'bg-green-100 text-green-800'
when 'redirect' then 'bg-yellow-100 text-yellow-800'
when 'challenge' then 'bg-purple-100 text-purple-800'
end %>">
<%= @waf_policy.action.upcase %>
</span>
</dd>
</div>
<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">Targets</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<% if @waf_policy.targets.any? %>
<div class="flex flex-wrap gap-2">
<% @waf_policy.targets.each do |target| %>
<% if @waf_policy.country_policy? %>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
<%= CountryHelper.display_with_flag(target) %>
</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">
<%= target %>
</span>
<% end %>
<% end %>
</div>
<% else %>
<span class="text-gray-400">No targets configured</span>
<% end %>
</dd>
</div>
<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">Status</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div class="flex items-center space-x-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
<%= @waf_policy.active? ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' %>">
<%= @waf_policy.active? ? 'Active' : 'Inactive' %>
</span>
<% if @waf_policy.active? %>
<%= link_to "Deactivate", deactivate_waf_policy_path(@waf_policy), method: :post,
data: { confirm: "Are you sure you want to deactivate this policy?" },
class: "text-sm text-red-600 hover:text-red-900" %>
<% else %>
<%= link_to "Activate", activate_waf_policy_path(@waf_policy), method: :post,
class: "text-sm text-green-600 hover:text-green-900" %>
<% end %>
</div>
</dd>
</div>
<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">Expires At</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<% if @waf_policy.expires_at.present? %>
<%= @waf_policy.expires_at.strftime("%B %d, %Y at %I:%M %p") %>
<% if @waf_policy.expired? %>
<span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
Expired
</span>
<% end %>
<% else %>
<span class="text-gray-400">Never expires</span>
<% end %>
</dd>
</div>
<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">Created By</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<%= @waf_policy.user.email_address %>
</dd>
</div>
<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">Created</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<%= @waf_policy.created_at.strftime("%B %d, %Y at %I:%M %p") %>
</dd>
</div>
<!-- Additional Configuration -->
<% if @waf_policy.additional_data && @waf_policy.additional_data.any? %>
<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">Additional Config</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<% @waf_policy.additional_data.each do |key, value| %>
<div class="mb-2">
<span class="font-medium"><%= key.humanize %>:</span>
<span class="text-gray-600"><%= value %></span>
</div>
<% end %>
</dd>
</div>
<% end %>
</dl>
</div>
</div>
<!-- Statistics -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Generated Rules</dt>
<dd class="text-lg font-medium text-gray-900"><%= @waf_policy.generated_rules_count %></dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Active Rules</dt>
<dd class="text-lg font-medium text-gray-900"><%= @waf_policy.active_rules_count %></dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Rules Last 7 Days</dt>
<dd class="text-lg font-medium text-gray-900"><%= @waf_policy.effectiveness_stats[:rules_last_7_days] %></dd>
</dl>
</div>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Efficiency Rate</dt>
<dd class="text-lg font-medium text-gray-900">
<%= @waf_policy.active_rules_count.to_f / [@waf_policy.generated_rules_count, 1].max * 100 %>%
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- Generated Rules -->
<% if @generated_rules.any? %>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">🔧 Generated Rules</h3>
<p class="mt-1 max-w-2xl text-sm text-gray-500">
Specific rules created by this policy that are enforced by baffle-agents.
</p>
</div>
<div class="border-t border-gray-200">
<ul class="divide-y divide-gray-200">
<% @generated_rules.each do |rule| %>
<li class="hover:bg-gray-50">
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= link_to "📋", rule_path(rule), class: "text-blue-600 hover:text-blue-900" %>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
Rule #<%= rule.id %> - <%= rule.network_range&.cidr || "Unknown" %>
</div>
<div class="text-sm text-gray-500">
<%= rule.action.upcase %> • Created <%= time_ago_in_words(rule.created_at) %> ago
<% if rule.redirect_action? %>
• Redirect to <%= rule.redirect_url %>
<% elsif rule.challenge_action? %>
• <%= rule.challenge_type.humanize %> challenge
<% end %>
</div>
</div>
</div>
<div class="flex items-center space-x-2">
<% if rule.active? %>
<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">
Inactive
</span>
<% end %>
</div>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
<% end %>
</div>