backup worked

frontend/src/routes/tasks/+page.svelte

@@ -0,0 +1,140 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { getTasks, createTask, getEnvironmentsList } from '../../lib/api';
+  import { addToast } from '../../lib/toasts';
+  import TaskList from '../../components/TaskList.svelte';
+  import TaskLogViewer from '../../components/TaskLogViewer.svelte';
+
+  let tasks = [];
+  let environments = [];
+  let loading = true;
+  let selectedTaskId = null;
+  let pollInterval;
+  let showBackupModal = false;
+  let selectedEnvId = '';
+
+  async function loadInitialData() {
+    try {
+      loading = true;
+      const [tasksData, envsData] = await Promise.all([
+        getTasks(),
+        getEnvironmentsList()
+      ]);
+      tasks = tasksData;
+      environments = envsData;
+    } catch (error) {
+      console.error('Failed to load tasks data:', error);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function refreshTasks() {
+    try {
+      const data = await getTasks();
+      // Ensure we don't try to parse HTML as JSON if the route returns 404
+      if (Array.isArray(data)) {
+        tasks = data;
+      }
+    } catch (error) {
+      console.error('Failed to refresh tasks:', error);
+    }
+  }
+
+  function handleSelectTask(event) {
+    selectedTaskId = event.detail.id;
+  }
+
+  async function handleRunBackup() {
+    if (!selectedEnvId) {
+      addToast('Please select an environment', 'error');
+      return;
+    }
+
+    try {
+      const task = await createTask('superset-backup', { environment_id: selectedEnvId });
+      addToast('Backup task started', 'success');
+      showBackupModal = false;
+      selectedTaskId = task.id;
+      await refreshTasks();
+    } catch (error) {
+      console.error('Failed to start backup:', error);
+    }
+  }
+
+  onMount(() => {
+    loadInitialData();
+    pollInterval = setInterval(refreshTasks, 3000);
+  });
+
+  onDestroy(() => {
+    if (pollInterval) clearInterval(pollInterval);
+  });
+</script>
+
+<div class="container mx-auto p-4 max-w-6xl">
+  <div class="flex justify-between items-center mb-6">
+    <h1 class="text-2xl font-bold text-gray-800">Task Management</h1>
+    <button
+      on:click={() => showBackupModal = true}
+      class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm transition duration-150 font-medium"
+    >
+      Run Backup
+    </button>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div class="lg:col-span-1">
+      <h2 class="text-lg font-semibold mb-3 text-gray-700">Recent Tasks</h2>
+      <TaskList {tasks} {loading} on:select={handleSelectTask} />
+    </div>
+
+    <div class="lg:col-span-2">
+      <h2 class="text-lg font-semibold mb-3 text-gray-700">Task Details & Logs</h2>
+      {#if selectedTaskId}
+        <div class="bg-white rounded-lg shadow-lg h-[600px] flex flex-col">
+          <TaskLogViewer taskId={selectedTaskId} />
+        </div>
+      {:else}
+        <div class="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg h-[600px] flex items-center justify-center text-gray-500">
+          <p>Select a task to view logs and details</p>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+{#if showBackupModal}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
+      <h3 class="text-xl font-bold mb-4">Run Manual Backup</h3>
+      <div class="mb-4">
+        <label for="env-select" class="block text-sm font-medium text-gray-700 mb-1">Target Environment</label>
+        <select
+          id="env-select"
+          bind:value={selectedEnvId}
+          class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border"
+        >
+          <option value="" disabled>-- Select Environment --</option>
+          {#each environments as env}
+            <option value={env.id}>{env.name}</option>
+          {/each}
+        </select>
+      </div>
+      <div class="flex justify-end space-x-3">
+        <button
+          on:click={() => showBackupModal = false}
+          class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition"
+        >
+          Cancel
+        </button>
+        <button
+          on:click={handleRunBackup}
+          class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
+        >
+          Start Backup
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}