Add WafPolicies
This commit is contained in:
Dan Milne
283
app/views/analytics/networks.html.erb
Normal file
283
app/views/analytics/networks.html.erb
Normal file
@@ -0,0 +1,283 @@
|
||||
<% content_for :title, "Network Analytics - Baffle Hub" %>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">Network Analytics</h1>
|
||||
<p class="mt-2 text-gray-600">Detailed traffic analysis and network intelligence insights</p>
|
||||
</div>
|
||||
|
||||
<!-- Time Period Selector -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-gray-900">Time Period</h3>
|
||||
<div class="flex space-x-2">
|
||||
<% [:hour, :day, :week, :month].each do |period| %>
|
||||
<%= link_to period.to_s.humanize, analytics_networks_path(period: period),
|
||||
class: "px-3 py-1 rounded-md text-sm font-medium #{ @time_period == period ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100' }" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Type Overview -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-8 w-8 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-4">
|
||||
<p class="text-sm font-medium text-gray-500">Standard Networks</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('standard', :networks) || 0) %>
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('standard', :events) || 0) %> events
|
||||
(<%= @network_breakdown.dig('standard', :percentage) || 0 %>%)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-8 w-8 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">Datacenter Networks</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('datacenter', :networks) || 0) %>
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('datacenter', :events) || 0) %> events
|
||||
(<%= @network_breakdown.dig('datacenter', :percentage) || 0 %>%)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-500">VPN Networks</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('vpn', :networks) || 0) %>
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('vpn', :events) || 0) %> events
|
||||
(<%= @network_breakdown.dig('vpn', :percentage) || 0 %>%)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-8 w-8 text-yellow-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-4">
|
||||
<p class="text-sm font-medium text-gray-500">Proxy Networks</p>
|
||||
<p class="text-2xl font-bold text-gray-900">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('proxy', :networks) || 0) %>
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">
|
||||
<%= number_with_delimiter(@network_breakdown.dig('proxy', :events) || 0) %> events
|
||||
(<%= @network_breakdown.dig('proxy', :percentage) || 0 %>%)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Networks by Traffic -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Top Networks by Traffic Volume</h3>
|
||||
<p class="text-sm text-gray-500">Networks with the most requests in the selected time period</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<% if @top_networks.any? %>
|
||||
<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">Network</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</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">Events</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unique IPs</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<% @top_networks.each do |network| %>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<div>
|
||||
<%= link_to network.cidr, network_range_path(network),
|
||||
class: "text-blue-600 hover:text-blue-800 hover:underline font-mono font-medium" %>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<% if network.country.present? %>
|
||||
🏳️ <%= network.country %>
|
||||
<% end %>
|
||||
<% if network.asn.present? %>
|
||||
• ASN <%= network.asn %>
|
||||
<% end %>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
<%= network.company || 'Unknown' %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<% if network.is_datacenter? %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">Datacenter</span>
|
||||
<% elsif network.is_vpn? %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">VPN</span>
|
||||
<% elsif network.is_proxy? %>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Proxy</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">Standard</span>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
<%= number_with_delimiter(network.event_count) %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
<%= number_with_delimiter(network.unique_ips) %>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<%= link_to "View Events", events_path(network_cidr: network.cidr),
|
||||
class: "text-blue-600 hover:text-blue-800 text-sm" %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% else %>
|
||||
<div class="px-6 py-12 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">No network traffic</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">No network activity found in the selected time period.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Analytics Sections -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Top Companies -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Top Companies by Traffic</h3>
|
||||
<p class="text-sm text-gray-500">Companies generating the most traffic</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<% if @top_companies.any? %>
|
||||
<div class="space-y-4">
|
||||
<% @top_companies.each do |company| %>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center">
|
||||
<div class="font-medium text-gray-900"><%= company.company %></div>
|
||||
<div class="ml-2 text-sm text-gray-500">
|
||||
<%= number_with_delimiter(company.network_count) %> networks
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<span><%= number_with_delimiter(company.event_count) %> events</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span><%= number_with_delimiter(company.unique_ips) %> unique IPs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<%= link_to "Filter Events", events_path(company: company.company),
|
||||
class: "text-blue-600 hover:text-blue-800 text-sm font-medium" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-sm text-gray-500">No company data available for this time period.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top ASNs -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-lg font-medium text-gray-900">Top Autonomous Systems</h3>
|
||||
<p class="text-sm text-gray-500">ASNs with the most traffic</p>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<% if @top_asns.any? %>
|
||||
<div class="space-y-4">
|
||||
<% @top_asns.each do |asn| %>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-gray-900">
|
||||
ASN <%= asn.asn %>
|
||||
<% if asn.asn_org.present? %>
|
||||
<span class="ml-2 text-gray-600">• <%= asn.asn_org.truncate(30) %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-600">
|
||||
<span><%= number_with_delimiter(asn.event_count) %> events</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span><%= number_with_delimiter(asn.unique_ips) %> unique IPs</span>
|
||||
<span class="mx-2">•</span>
|
||||
<span><%= number_with_delimiter(asn.network_count) %> networks</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<%= link_to "Filter Events", events_path(asn: asn.asn),
|
||||
class: "text-blue-600 hover:text-blue-800 text-sm font-medium" %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-sm text-gray-500">No ASN data available for this time period.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<%= link_to "← Back to Dashboard", analytics_path,
|
||||
class: "text-blue-600 hover:text-blue-800 font-medium" %>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
Showing network analytics for the <%= @time_period.to_s.humanize.downcase %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user