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

src/web/templates/pages/snapshots.html

@@ -0,0 +1,429 @@
+{% extends "base.html" %}
+
+{% block title %}Snapshots - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="space-y-6" x-data="snapshotsPage()" x-init="loadInventories()">
+    <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">Snapshots</h1>
+        </div>
+        <div class="mt-4 flex md:ml-4 md:mt-0">
+            <button @click="showCreateModal = true"
+                    class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all">
+                <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+                </svg>
+                Create Snapshot
+            </button>
+        </div>
+    </div>
+
+    <!-- Snapshots Grid -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {% for snapshot in snapshots %}
+        <div class="relative bg-white rounded-lg shadow hover:shadow-md transition-shadow">
+            <div class="p-5">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-lg font-medium text-gray-900 truncate">
+                        <a href="/snapshots/{{ snapshot.name }}" class="hover:text-blue-600">
+                            {{ snapshot.name }}
+                        </a>
+                    </h3>
+                    {% if snapshot.name == active_snapshot %}
+                    <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>
+                    {% endif %}
+                </div>
+
+                <div class="mt-4 space-y-2">
+                    <div class="flex items-center text-sm text-gray-500">
+                        <svg class="flex-shrink-0 mr-2 h-4 w-4" 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>
+                        {{ snapshot.resource_count | format_number }} resources
+                    </div>
+                    <div class="flex items-center text-sm text-gray-500">
+                        <svg class="flex-shrink-0 mr-2 h-4 w-4" 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>
+                        {{ snapshot.created_at }}
+                    </div>
+                    <div class="flex items-center text-sm text-gray-500">
+                        <svg class="flex-shrink-0 mr-2 h-4 w-4" 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>
+                        {{ snapshot.regions | join(', ') if snapshot.regions else 'N/A' }}
+                    </div>
+                </div>
+
+                <div class="mt-4 flex space-x-2">
+                    <a href="/snapshots/{{ snapshot.name }}"
+                       class="flex-1 text-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
+                        View
+                    </a>
+                    {% if snapshot.name != active_snapshot %}
+                    <button hx-post="/api/snapshots/{{ snapshot.name }}/activate"
+                            hx-swap="none"
+                            hx-on::after-request="window.location.reload()"
+                            class="flex-1 text-center px-3 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
+                        Set Active
+                    </button>
+                    {% endif %}
+                </div>
+
+                <!-- Action buttons -->
+                <div class="mt-3 pt-3 border-t border-gray-100 flex space-x-2">
+                    <button @click="openRenameModal('{{ snapshot.name }}')"
+                            class="flex-1 text-center px-3 py-1.5 text-xs font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded transition-colors">
+                        <svg class="inline w-3.5 h-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                        </svg>
+                        Rename
+                    </button>
+                    {% if snapshot.name != active_snapshot %}
+                    <button @click="confirmDelete('{{ snapshot.name }}')"
+                            class="flex-1 text-center px-3 py-1.5 text-xs font-medium text-red-600 hover:text-red-800 hover:bg-red-50 rounded transition-colors">
+                        <svg class="inline w-3.5 h-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                        </svg>
+                        Delete
+                    </button>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% else %}
+        <div class="col-span-full text-center py-12">
+            <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="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>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No snapshots</h3>
+            <p class="mt-1 text-sm text-gray-500">Create your first snapshot with the CLI:</p>
+            <code class="mt-2 inline-block bg-gray-100 px-4 py-2 rounded text-sm">
+                awsinv snapshot create my-baseline --regions us-east-1
+            </code>
+        </div>
+        {% endfor %}
+    </div>
+
+    <!-- Create Snapshot Modal -->
+    <div x-show="showCreateModal" class="fixed z-50 inset-0 overflow-y-auto" x-cloak>
+        <div class="flex items-center justify-center min-h-screen px-4">
+            <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity" @click="showCreateModal = false"></div>
+
+            <div class="relative bg-white rounded-xl shadow-2xl max-w-lg w-full overflow-hidden"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-95"
+                 x-transition:enter-end="opacity-100 scale-100">
+                <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-5">
+                    <h3 class="text-xl font-bold text-white">Create New Snapshot</h3>
+                    <p class="text-blue-100 text-sm mt-1">Capture current state of AWS resources</p>
+                </div>
+
+                <form @submit.prevent="createSnapshot" class="p-6 space-y-5">
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Snapshot Name</label>
+                        <input type="text" x-model="newSnapshot.name"
+                               class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
+                               placeholder="Auto-generated if empty">
+                        <p class="text-xs text-gray-500 mt-1">Leave empty to auto-generate (snapshot-YYYYMMDD-HHMMSS)</p>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Inventory</label>
+                        <select x-model="newSnapshot.inventory"
+                                class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
+                            <option value="">-- No inventory (collect all) --</option>
+                            <template x-for="inv in inventories" :key="inv.name">
+                                <option :value="inv.name" x-text="inv.name + (inv.description ? ' - ' + inv.description : '')"></option>
+                            </template>
+                        </select>
+                        <p class="text-xs text-gray-500 mt-1">Use inventory filters (include/exclude tags)</p>
+                    </div>
+
+                    <div>
+                        <label class="block text-sm font-semibold text-gray-700 mb-2">Regions</label>
+                        <input type="text" x-model="newSnapshot.regions"
+                               class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
+                               placeholder="us-east-1">
+                        <p class="text-xs text-gray-500 mt-1">Comma-separated list (default: us-east-1)</p>
+                    </div>
+
+                    <div class="flex items-center space-x-4">
+                        <label class="flex items-center">
+                            <input type="checkbox" x-model="newSnapshot.setActive"
+                                   class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
+                            <span class="ml-2 text-sm text-gray-700">Set as active snapshot</span>
+                        </label>
+                        <label class="flex items-center">
+                            <input type="checkbox" x-model="newSnapshot.useConfig"
+                                   class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
+                            <span class="ml-2 text-sm text-gray-700">Use AWS Config</span>
+                        </label>
+                    </div>
+
+                    <!-- Job Status -->
+                    <div x-show="createJobId" class="p-4 bg-blue-50 rounded-lg border border-blue-200">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-sm font-medium text-blue-700">Status:</span>
+                            <span class="text-sm font-semibold"
+                                  :class="{
+                                      'text-yellow-600': createJobStatus === 'pending' || createJobStatus === 'running',
+                                      'text-green-600': createJobStatus === 'completed',
+                                      'text-red-600': createJobStatus === 'failed'
+                                  }"
+                                  x-text="createJobStatus"></span>
+                        </div>
+                        <p class="text-sm text-gray-600" x-text="createJobMessage"></p>
+                        <div x-show="createJobProgress > 0" class="mt-2">
+                            <div class="w-full bg-blue-100 rounded-full h-2">
+                                <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                                     :style="'width: ' + createJobProgress + '%'"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" @click="showCreateModal = false; resetCreateForm()"
+                                class="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+                                :disabled="creating">
+                            <span x-text="createJobStatus === 'completed' ? 'Close' : 'Cancel'"></span>
+                        </button>
+                        <button type="submit" class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-lg transition-colors"
+                                :disabled="creating || createJobId"
+                                x-show="!createJobId">
+                            <span x-show="!creating">Create Snapshot</span>
+                            <span x-show="creating" class="flex items-center justify-center">
+                                <svg class="animate-spin h-4 w-4 mr-2" 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 12h4z"></path>
+                                </svg>
+                                Starting...
+                            </span>
+                        </button>
+                        <button type="button" @click="window.location.reload()"
+                                class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors"
+                                x-show="createJobStatus === 'completed'">
+                            View Snapshot
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Rename Modal -->
+    <div x-show="showRenameModal" class="fixed z-50 inset-0 overflow-y-auto" x-cloak>
+        <div class="flex items-center justify-center min-h-screen px-4">
+            <div class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm transition-opacity" @click="showRenameModal = false"></div>
+
+            <div class="relative bg-white rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-95"
+                 x-transition:enter-end="opacity-100 scale-100">
+                <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4">
+                    <h3 class="text-lg font-bold text-white">Rename Snapshot</h3>
+                </div>
+
+                <form @submit.prevent="renameSnapshot" class="p-6 space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Current Name</label>
+                        <input type="text" :value="renameOldName" disabled
+                               class="w-full bg-gray-100 border-gray-300 rounded-lg text-gray-500">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">New Name</label>
+                        <input type="text" x-model="renameNewName" required
+                               class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"
+                               placeholder="Enter new name">
+                    </div>
+                    <div class="flex gap-3 pt-2">
+                        <button type="button" @click="showRenameModal = false"
+                                class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
+                            Cancel
+                        </button>
+                        <button type="submit" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                                :disabled="renaming">
+                            <span x-show="!renaming">Rename</span>
+                            <span x-show="renaming">Renaming...</span>
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function snapshotsPage() {
+    return {
+        // Rename modal
+        showRenameModal: false,
+        renameOldName: '',
+        renameNewName: '',
+        renaming: false,
+
+        // Create modal
+        showCreateModal: false,
+        creating: false,
+        inventories: [],
+        newSnapshot: {
+            name: '',
+            inventory: '',
+            regions: 'us-east-1',
+            setActive: true,
+            useConfig: true
+        },
+        createJobId: null,
+        createJobStatus: null,
+        createJobMessage: '',
+        createJobProgress: 0,
+        pollInterval: null,
+
+        async loadInventories() {
+            try {
+                const response = await fetch('/api/inventories');
+                if (response.ok) {
+                    const data = await response.json();
+                    this.inventories = data.inventories || [];
+                }
+            } catch (error) {
+                console.error('Failed to load inventories:', error);
+            }
+        },
+
+        resetCreateForm() {
+            this.newSnapshot = {
+                name: '',
+                inventory: '',
+                regions: 'us-east-1',
+                setActive: true,
+                useConfig: true
+            };
+            this.createJobId = null;
+            this.createJobStatus = null;
+            this.createJobMessage = '';
+            this.createJobProgress = 0;
+            if (this.pollInterval) {
+                clearInterval(this.pollInterval);
+                this.pollInterval = null;
+            }
+        },
+
+        async createSnapshot() {
+            this.creating = true;
+            try {
+                const regions = this.newSnapshot.regions
+                    ? this.newSnapshot.regions.split(',').map(r => r.trim()).filter(r => r)
+                    : ['us-east-1'];
+
+                const response = await fetch('/api/snapshots', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name: this.newSnapshot.name || null,
+                        inventory: this.newSnapshot.inventory || null,
+                        regions: regions,
+                        set_active: this.newSnapshot.setActive,
+                        use_config: this.newSnapshot.useConfig
+                    })
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Failed to create snapshot');
+                }
+
+                const result = await response.json();
+                this.createJobId = result.job_id;
+                this.createJobStatus = 'pending';
+                this.createJobMessage = result.message;
+
+                // Start polling for status
+                this.pollJobStatus();
+
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                this.creating = false;
+            }
+        },
+
+        pollJobStatus() {
+            this.pollInterval = setInterval(async () => {
+                try {
+                    const response = await fetch('/api/snapshots/jobs/' + this.createJobId);
+                    if (response.ok) {
+                        const status = await response.json();
+                        this.createJobStatus = status.status;
+                        this.createJobMessage = status.message;
+                        this.createJobProgress = status.progress || 0;
+
+                        if (status.status === 'completed' || status.status === 'failed') {
+                            clearInterval(this.pollInterval);
+                            this.pollInterval = null;
+                        }
+                    }
+                } catch (error) {
+                    console.error('Failed to poll job status:', error);
+                }
+            }, 2000);
+        },
+
+        openRenameModal(name) {
+            this.renameOldName = name;
+            this.renameNewName = name;
+            this.showRenameModal = true;
+        },
+
+        async renameSnapshot() {
+            if (!this.renameNewName || this.renameNewName === this.renameOldName) return;
+
+            this.renaming = true;
+            try {
+                const response = await fetch('/api/snapshots/' + encodeURIComponent(this.renameOldName) + '/rename', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ new_name: this.renameNewName })
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Failed to rename snapshot');
+                }
+
+                window.location.reload();
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                this.renaming = false;
+            }
+        },
+
+        async confirmDelete(name) {
+            if (!confirm('Are you sure you want to delete snapshot "' + name + '"? This cannot be undone.')) return;
+
+            try {
+                const response = await fetch('/api/snapshots/' + encodeURIComponent(name), {
+                    method: 'DELETE'
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Failed to delete snapshot');
+                }
+
+                window.location.reload();
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+    };
+}
+</script>
+{% endblock %}