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

src/web/templates/pages/dashboard.html

@@ -0,0 +1,227 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - 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">
+            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Dashboard
+            </h1>
+        </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+        <!-- Total Snapshots -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="rounded-md bg-blue-500 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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Total Snapshots</dt>
+                            <dd class="text-2xl font-semibold text-gray-900">{{ total_snapshots | format_number }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Total Resources -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="rounded-md bg-green-500 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>
+                    <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">{{ total_resources | format_number }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Active Baseline -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="rounded-md bg-amber-500 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Active Baseline</dt>
+                            <dd class="text-lg font-semibold text-gray-900 truncate">
+                                {% if active_snapshot %}
+                                    {{ active_snapshot }}
+                                {% else %}
+                                    <span class="text-gray-400">None set</span>
+                                {% endif %}
+                            </dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Resource Types -->
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+            <div class="p-5">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <div class="rounded-md bg-purple-500 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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="ml-5 w-0 flex-1">
+                        <dl>
+                            <dt class="text-sm font-medium text-gray-500 truncate">Resource Types</dt>
+                            <dd class="text-2xl font-semibold text-gray-900">{{ stats_by_type | length }}</dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Charts Row -->
+    <div class="grid grid-cols-1 gap-5 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>
+
+    <!-- Recent Snapshots -->
+    <div class="bg-white shadow rounded-lg">
+        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
+            <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Snapshots</h3>
+        </div>
+        <ul role="list" class="divide-y divide-gray-200">
+            {% for snapshot in recent_snapshots %}
+            <li>
+                <a href="/snapshots/{{ snapshot.name }}" class="block hover:bg-gray-50">
+                    <div class="px-4 py-4 sm:px-6">
+                        <div class="flex items-center justify-between">
+                            <p class="text-sm font-medium text-blue-600 truncate">{{ snapshot.name }}</p>
+                            <div class="ml-2 flex-shrink-0 flex">
+                                {% if snapshot.is_active %}
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                    Active
+                                </span>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div class="mt-2 sm:flex sm:justify-between">
+                            <div class="sm:flex">
+                                <p class="flex items-center text-sm text-gray-500">
+                                    {{ snapshot.resource_count | format_number }} resources
+                                </p>
+                            </div>
+                            <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                                <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" 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>
+                                <p>{{ snapshot.created_at }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            {% else %}
+            <li class="px-4 py-8 text-center text-gray-500">
+                <p>No snapshots yet. Create one with:</p>
+                <code class="mt-2 block bg-gray-100 px-4 py-2 rounded text-sm">awsinv snapshot create my-baseline --regions us-east-1</code>
+            </li>
+            {% endfor %}
+        </ul>
+        {% if recent_snapshots %}
+        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 rounded-b-lg">
+            <a href="/snapshots" class="text-sm font-medium text-blue-600 hover:text-blue-500">
+                View all snapshots <span aria-hidden="true">&rarr;</span>
+            </a>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // Load charts
+    document.addEventListener('DOMContentLoaded', function() {
+        // Resources by Type Chart
+        fetch('/api/charts/resources-by-type')
+            .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 }
+                            }
+                        }
+                    }
+                });
+            });
+
+        // Resources by Region Chart
+        fetch('/api/charts/resources-by-region')
+            .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 }
+                        }
+                    }
+                });
+            });
+    });
+</script>
+{% endblock %}

src/web/templates/pages/diff.html

@@ -0,0 +1,175 @@
+{% extends "base.html" %}
+
+{% block title %}Compare Snapshots - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="space-y-6" x-data="{
+    snapshot1: '',
+    snapshot2: '',
+    loading: false,
+    results: null,
+    error: null
+}">
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">Compare Snapshots</h1>
+            <p class="mt-1 text-sm text-gray-500">See what changed between two snapshots</p>
+        </div>
+    </div>
+
+    <!-- Snapshot Selection -->
+    <div class="bg-white shadow rounded-lg p-6">
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
+            <div>
+                <label for="snapshot1" class="block text-sm font-medium text-gray-700">First Snapshot (Before)</label>
+                <select id="snapshot1" x-model="snapshot1"
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                    <option value="">Select snapshot...</option>
+                    {% for s in snapshots %}
+                    <option value="{{ s.name }}">{{ s.name }} ({{ s.resource_count }} resources)</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="flex items-end justify-center">
+                <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
+                </svg>
+            </div>
+
+            <div>
+                <label for="snapshot2" class="block text-sm font-medium text-gray-700">Second Snapshot (After)</label>
+                <select id="snapshot2" x-model="snapshot2"
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                    <option value="">Select snapshot...</option>
+                    {% for s in snapshots %}
+                    <option value="{{ s.name }}">{{ s.name }} ({{ s.resource_count }} resources)</option>
+                    {% endfor %}
+                </select>
+            </div>
+        </div>
+
+        <div class="mt-6 text-center">
+            <button @click="comparSnapshots()"
+                    :disabled="!snapshot1 || !snapshot2 || loading"
+                    class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                <span x-show="!loading">Compare</span>
+                <span x-show="loading" class="flex items-center">
+                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Comparing...
+                </span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Results -->
+    <div x-show="results" x-cloak class="space-y-6">
+        <!-- Summary -->
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
+                <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                        </svg>
+                    </div>
+                    <div class="ml-4">
+                        <p class="text-sm font-medium text-green-800">Added</p>
+                        <p class="text-2xl font-bold text-green-900" x-text="results?.added?.length || 0"></p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <svg class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
+                        </svg>
+                    </div>
+                    <div class="ml-4">
+                        <p class="text-sm font-medium text-red-800">Removed</p>
+                        <p class="text-2xl font-bold text-red-900" x-text="results?.removed?.length || 0"></p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <svg class="h-8 w-8 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <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"/>
+                        </svg>
+                    </div>
+                    <div class="ml-4">
+                        <p class="text-sm font-medium text-amber-800">Modified</p>
+                        <p class="text-2xl font-bold text-amber-900" x-text="results?.modified?.length || 0"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Details -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <!-- Added -->
+            <div class="bg-white shadow rounded-lg" x-show="results?.added?.length > 0">
+                <div class="px-4 py-5 border-b border-gray-200 bg-green-50 rounded-t-lg">
+                    <h3 class="text-lg font-medium text-green-800">Added Resources</h3>
+                </div>
+                <ul class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
+                    <template x-for="r in results?.added?.slice(0, 50)" :key="r.arn">
+                        <li class="px-4 py-3">
+                            <p class="text-sm font-medium text-gray-900" x-text="r.name"></p>
+                            <p class="text-xs text-gray-500" x-text="r.resource_type"></p>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+
+            <!-- Removed -->
+            <div class="bg-white shadow rounded-lg" x-show="results?.removed?.length > 0">
+                <div class="px-4 py-5 border-b border-gray-200 bg-red-50 rounded-t-lg">
+                    <h3 class="text-lg font-medium text-red-800">Removed Resources</h3>
+                </div>
+                <ul class="divide-y divide-gray-200 max-h-96 overflow-y-auto">
+                    <template x-for="r in results?.removed?.slice(0, 50)" :key="r.arn">
+                        <li class="px-4 py-3">
+                            <p class="text-sm font-medium text-gray-900" x-text="r.name"></p>
+                            <p class="text-xs text-gray-500" x-text="r.resource_type"></p>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Error -->
+    <div x-show="error" x-cloak class="bg-red-50 border border-red-200 rounded-lg p-4">
+        <p class="text-red-800" x-text="error"></p>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    function comparSnapshots() {
+        const data = Alpine.$data(document.querySelector('[x-data]'));
+        data.loading = true;
+        data.error = null;
+
+        fetch(`/api/resources/diff?snapshot1=${data.snapshot1}&snapshot2=${data.snapshot2}`)
+            .then(r => r.json())
+            .then(result => {
+                data.results = result;
+                data.loading = false;
+            })
+            .catch(err => {
+                data.error = err.message;
+                data.loading = false;
+            });
+    }
+</script>
+{% endblock %}

src/web/templates/pages/error.html

@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block title %}Error - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="min-h-[60vh] flex items-center justify-center">
+    <div class="text-center">
+        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 mb-6">
+            <svg class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+        </div>
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ error_title | default('Something went wrong') }}</h1>
+        <p class="text-gray-600 mb-6 max-w-md mx-auto">{{ error_message | default('An unexpected error occurred. Please try again.') }}</p>
+        {% if error_details %}
+        <div class="bg-gray-100 rounded-lg p-4 mb-6 max-w-xl mx-auto text-left">
+            <p class="text-xs font-mono text-gray-600">{{ error_details }}</p>
+        </div>
+        {% endif %}
+        <div class="flex items-center justify-center space-x-4">
+            <a href="/" 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">
+                Go to Dashboard
+            </a>
+            <button onclick="window.history.back()" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                Go Back
+            </button>
+        </div>
+    </div>
+</div>
+{% endblock %}