aws-inventory-manager 0.13.2__py3-none-any.whl

src/web/templates/pages/snapshot_detail.html

@@ -0,0 +1,271 @@
+{% extends "base.html" %}
+
+{% block title %}{{ snapshot.name }} - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+    <!-- Header -->
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <nav class="flex mb-2" aria-label="Breadcrumb">
+                <ol class="flex items-center space-x-2">
+                    <li>
+                        <a href="/snapshots" class="text-sm text-gray-500 hover:text-gray-700">Snapshots</a>
+                    </li>
+                    <li class="flex items-center">
+                        <svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+                        </svg>
+                        <span class="ml-2 text-sm font-medium text-gray-900">{{ snapshot.name }}</span>
+                    </li>
+                </ol>
+            </nav>
+            <div class="flex items-center">
+                <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">{{ snapshot.name }}</h1>
+                {% if snapshot.is_active %}
+                <span class="ml-3 inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                    Active Baseline
+                </span>
+                {% endif %}
+            </div>
+        </div>
+        <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
+            {% if not snapshot.is_active %}
+            <button hx-post="/api/snapshots/{{ snapshot.name }}/activate"
+                    hx-swap="none"
+                    hx-on::after-request="window.location.reload()"
+                    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">
+                Set as Active
+            </button>
+            {% endif %}
+            <a href="/diff?snapshot1={{ snapshot.name }}"
+               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">
+                Compare
+            </a>
+        </div>
+    </div>
+
+    <!-- Metadata Grid -->
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
+                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+                        </svg>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Total Resources</dt>
+                            <dd class="text-2xl font-semibold text-gray-900">{{ snapshot.resource_count | format_number }}</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 bg-green-500 rounded-md p-3">
+                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                        </svg>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Created</dt>
+                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.created_at }}</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 bg-purple-500 rounded-md p-3">
+                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+                        </svg>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Regions</dt>
+                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.regions | join(', ') if snapshot.regions else 'N/A' }}</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 bg-amber-500 rounded-md p-3">
+                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+                        </svg>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Account ID</dt>
+                            <dd class="text-lg font-semibold text-gray-900">{{ snapshot.account_id }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <!-- Resources by Type -->
+        <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="text-lg font-medium text-gray-900 mb-4">Resources by Type</h3>
+            <div class="h-64">
+                <canvas id="chart-by-type"></canvas>
+            </div>
+        </div>
+
+        <!-- Resources by Region -->
+        <div class="bg-white shadow rounded-lg p-6">
+            <h3 class="text-lg font-medium text-gray-900 mb-4">Resources by Region</h3>
+            <div class="h-64">
+                <canvas id="chart-by-region"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Resource Table -->
+    <div class="bg-white shadow rounded-lg overflow-hidden">
+        <div class="px-4 py-5 border-b border-gray-200 sm:px-6 flex items-center justify-between">
+            <h3 class="text-lg font-medium text-gray-900">Resources</h3>
+            <a href="/resources?snapshot={{ snapshot.name }}" class="text-sm text-blue-600 hover:text-blue-500">
+                View all in Resource Explorer
+            </a>
+        </div>
+        <div id="resource-table"
+             hx-get="/api/snapshots/{{ snapshot.name }}/resources?limit=20"
+             hx-trigger="load"
+             hx-swap="innerHTML">
+            <div class="p-8 text-center text-gray-500">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+                <p class="mt-2">Loading resources...</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Load charts with snapshot-specific data
+        fetch('/api/charts/resources-by-type?snapshot={{ snapshot.name }}')
+            .then(r => r.json())
+            .then(data => {
+                new Chart(document.getElementById('chart-by-type'), {
+                    type: 'doughnut',
+                    data: data,
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                position: 'right',
+                                labels: { boxWidth: 12 }
+                            }
+                        }
+                    }
+                });
+            });
+
+        fetch('/api/charts/resources-by-region?snapshot={{ snapshot.name }}')
+            .then(r => r.json())
+            .then(data => {
+                new Chart(document.getElementById('chart-by-region'), {
+                    type: 'bar',
+                    data: data,
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: { display: false }
+                        },
+                        scales: {
+                            y: { beginAtZero: true }
+                        }
+                    }
+                });
+            });
+    });
+
+    // Handle resource table response
+    document.body.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.detail.target.id === 'resource-table') {
+            const data = JSON.parse(evt.detail.xhr.responseText);
+            renderResourceTable(data, evt.detail.target);
+        }
+    });
+
+    function renderResourceTable(data, target) {
+        if (!data.resources || data.resources.length === 0) {
+            target.innerHTML = `
+                <div class="p-8 text-center text-gray-500">
+                    <p>No resources in this snapshot.</p>
+                </div>
+            `;
+            return;
+        }
+
+        let html = `
+            <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">Name</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">Region</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+        `;
+
+        data.resources.forEach(r => {
+            html += `
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">${r.name || 'N/A'}</div>
+                        <div class="text-xs text-gray-500 truncate max-w-xs" title="${r.arn}">${r.arn}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                            ${r.resource_type}
+                        </span>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${r.region}</td>
+                </tr>
+            `;
+        });
+
+        html += `
+                </tbody>
+            </table>
+        `;
+
+        if (data.count > data.resources.length) {
+            html += `
+                <div class="bg-gray-50 px-4 py-3 text-center border-t border-gray-200">
+                    <a href="/resources?snapshot={{ snapshot.name }}" class="text-sm text-blue-600 hover:text-blue-500">
+                        View all ${data.count} resources
+                    </a>
+                </div>
+            `;
+        }
+
+        target.innerHTML = html;
+    }
+</script>
+{% endblock %}