dashcaddy/status/js/snapshot.js

// ========== CONTAINER SNAPSHOT / CHECKPOINT ==========
(function() {
  // Inject modal HTML
  injectModal('snapshot-modal', `<div id="snapshot-modal" class="weather-modal">
    <div class="weather-modal-content" style="min-width: 700px; max-width: 850px;">
      <h3>💾 Container Snapshots</h3>
      <p class="modal-subtitle">
        Create and manage Docker container checkpoints for instant state recovery.
      </p>

      <div id="snapshot-container-select-wrapper" style="margin-bottom: 16px;">
        <label style="font-size: 0.85rem; color: var(--muted);">Select Container:</label>
        <select id="snapshot-container-select" style="width: 100%; padding: 8px 12px; margin-top: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 0.9rem;">
          <option value="">-- Select a container --</option>
        </select>
      </div>

      <div id="snapshot-details" style="display: none; margin-bottom: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-hover);">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.85rem;">
          <div><span style="color: var(--muted);">Image:</span> <span id="snapshot-image"></span></div>
          <div><span style="color: var(--muted);">Status:</span> <span id="snapshot-status"></span></div>
          <div><span style="color: var(--muted);">Created:</span> <span id="snapshot-created"></span></div>
          <div><span style="color: var(--muted);">Container ID:</span> <span id="snapshot-id" style="font-family: monospace;"></span></div>
        </div>
      </div>

      <div class="panel-tabs" style="margin-bottom: 12px;">
        <button class="panel-tab active" data-panel="snapshot-create">Create Snapshot</button>
        <button class="panel-tab" data-panel="snapshot-list">Manage Snapshots</button>
      </div>

      <div id="snapshot-create" class="panel-section active">
        <div style="margin-bottom: 12px;">
          <label style="font-size: 0.85rem; color: var(--muted);">Snapshot Name:</label>
          <input type="text" id="snapshot-name" placeholder="e.g., before-update-2024" 
            style="width: 100%; padding: 8px 12px; margin-top: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 0.9rem; box-sizing: border-box;" />
        </div>
        <div style="margin-bottom: 12px;">
          <label class="checkbox-label" style="font-size: 0.85rem;">
            <input type="checkbox" id="snapshot-leave-running" checked />
            Leave container running after checkpoint (resume without restart)
          </label>
        </div>
        <button id="snapshot-create-btn" class="btn-accent-solid" style="width: 100%;">💾 Create Snapshot</button>
        <div id="snapshot-create-status" style="margin-top: 12px; text-align: center; font-size: 0.85rem;"></div>
      </div>

      <div id="snapshot-list" class="panel-section" style="display: none;">
        <div id="snapshot-list-container" class="scroll-container" style="max-height: 300px;">
          <div class="panel-empty"><span class="empty-icon">💾</span>Select a container to view its snapshots</div>
        </div>
      </div>

      <div class="weather-modal-buttons modal-footer-bar">
        <button id="snapshot-close">Close</button>
      </div>
    </div>
  </div>`);

  const modal = document.getElementById('snapshot-modal');
  const openBtn = document.getElementById('snapshot-btn');
  const closeBtn = document.getElementById('snapshot-close');
  const containerSelect = document.getElementById('snapshot-container-select');
  const detailsDiv = document.getElementById('snapshot-details');
  const createBtn = document.getElementById('snapshot-create-btn');
  const createStatus = document.getElementById('snapshot-create-status');

  let currentContainerId = null;

  async function loadContainers() {
    try {
      const res = await fetch('/api/v1/containers');
      const data = await res.json();
      if (!data.success || !data.containers) return;
      
      containerSelect.innerHTML = '<option value="">-- Select a container --</option>';
      for (const c of data.containers) {
        const opt = document.createElement('option');
        opt.value = c.id;
        opt.textContent = `${c.name || c.id} (${c.image || 'unknown'})`;
        opt.dataset.name = c.name;
        opt.dataset.image = c.image;
        opt.dataset.status = c.status;
        opt.dataset.created = c.created;
        containerSelect.appendChild(opt);
      }
    } catch (e) {
      console.error('Failed to load containers:', e);
    }
  }

  function showContainerDetails(opt) {
    if (!opt || !opt.value) {
      detailsDiv.style.display = 'none';
      currentContainerId = null;
      return;
    }
    currentContainerId = opt.value;
    document.getElementById('snapshot-image').textContent = opt.dataset.image || '-';
    document.getElementById('snapshot-status').textContent = opt.dataset.status || '-';
    document.getElementById('snapshot-created').textContent = opt.dataset.created ? new Date(opt.dataset.created * 1000).toLocaleString() : '-';
    document.getElementById('snapshot-id').textContent = opt.value.substring(0, 12);
    detailsDiv.style.display = '';
  }

  async function createSnapshot() {
    if (!currentContainerId) {
      createStatus.textContent = 'Please select a container first';
      createStatus.style.color = 'var(--bad-fg)';
      return;
    }
    const name = document.getElementById('snapshot-name').value.trim();
    if (!name) {
      createStatus.textContent = 'Please enter a snapshot name';
      createStatus.style.color = 'var(--bad-fg)';
      return;
    }
    const leaveRunning = document.getElementById('snapshot-leave-running').checked;
    
    createBtn.disabled = true;
    createBtn.textContent = 'Creating...';
    createStatus.textContent = '';
    
    try {
      const res = await fetch(`/api/v1/containers/${encodeURIComponent(currentContainerId)}/checkpoint`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, leaveRunning })
      });
      const data = await res.json();
      if (data.success) {
        createStatus.textContent = `✓ Snapshot "${name}" created successfully`;
        createStatus.style.color = 'var(--ok-fg)';
        document.getElementById('snapshot-name').value = '';
      } else {
        createStatus.textContent = `✗ Failed: ${data.error || 'Unknown error'}`;
        createStatus.style.color = 'var(--bad-fg)';
      }
    } catch (e) {
      createStatus.textContent = `✗ Error: ${e.message}`;
      createStatus.style.color = 'var(--bad-fg)';
    } finally {
      createBtn.disabled = false;
      createBtn.textContent = '💾 Create Snapshot';
    }
  }

  function openModal() {
    modal.classList.add('show');
    loadContainers();
  }

  function closeModal() {
    modal.classList.remove('show');
    detailsDiv.style.display = 'none';
    currentContainerId = null;
    containerSelect.selectedIndex = 0;
  }

  openBtn?.addEventListener('click', openModal);
  closeBtn?.addEventListener('click', closeModal);
  wireModal(modal, closeBtn);
  
  containerSelect?.addEventListener('change', (e) => {
    const opt = containerSelect.options[containerSelect.selectedIndex];
    showContainerDetails(opt);
  });
  
  createBtn?.addEventListener('click', createSnapshot);
  
  // Tab switching
  modal?.querySelectorAll('.panel-tab').forEach(tab => {
    tab.addEventListener('click', () => {
      modal.querySelectorAll('.panel-tab').forEach(t => t.classList.remove('active'));
      modal.querySelectorAll('.panel-section').forEach(s => s.classList.remove('active'));
      tab.classList.add('active');
      modal.querySelector(`#${tab.dataset.panel}`).classList.add('active');
    });
  });
})();