Add 'tags' to event model. Add a dataimport system - currently for MaxMind zip files
This commit is contained in:
Dan Milne
80
app/views/data_imports/_progress_card.html.erb
Normal file
80
app/views/data_imports/_progress_card.html.erb
Normal 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
273
app/views/data_imports/index.html.erb
Normal 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
162
app/views/data_imports/new.html.erb
Normal 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
222
app/views/data_imports/show.html.erb
Normal 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>
|
||||
|
||||
Reference in New Issue
Block a user