Password promt

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

@@ -14,8 +14,12 @@
   import EnvSelector from '../../components/EnvSelector.svelte';
   import DashboardGrid from '../../components/DashboardGrid.svelte';
   import MappingTable from '../../components/MappingTable.svelte';
-  import MissingMappingModal from '../../components/MissingMappingModal.svelte';
+  import TaskRunner from '../../components/TaskRunner.svelte';
   import TaskHistory from '../../components/TaskHistory.svelte';
+  import TaskLogViewer from '../../components/TaskLogViewer.svelte';
+  import PasswordPrompt from '../../components/PasswordPrompt.svelte';
+  import { selectedTask } from '../../lib/stores.js';
+  import { resumeTask } from '../../services/taskService.js';
   import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard';
   // [/SECTION]
 
@@ -33,6 +37,15 @@
   let mappings: any[] = [];
   let suggestions: any[] = [];
   let fetchingDbs = false;
+  
+  // UI State for Modals
+  let showLogViewer = false;
+  let logViewerTaskId: string | null = null;
+  let logViewerTaskStatus: string | null = null;
+  
+  let showPasswordPrompt = false;
+  let passwordPromptDatabases: string[] = [];
+  let passwordPromptErrorMessage = "";
   // [/SECTION]
 
   // [DEF:fetchEnvironments:Function]
@@ -147,6 +160,50 @@
   }
   // [/DEF:handleMappingUpdate]
 
+  // [DEF:handleViewLogs:Function]
+  function handleViewLogs(event: CustomEvent) {
+      const task = event.detail;
+      logViewerTaskId = task.id;
+      logViewerTaskStatus = task.status;
+      showLogViewer = true;
+  }
+  // [/DEF:handleViewLogs]
+
+  // [DEF:handlePasswordPrompt:Function]
+  // This is triggered by TaskRunner or TaskHistory when a task needs input
+  // For now, we rely on the WebSocket or manual check.
+  // Ideally, TaskHistory or TaskRunner emits an event when input is needed.
+  // Or we watch selectedTask.
+  
+  $: if ($selectedTask && $selectedTask.status === 'AWAITING_INPUT' && $selectedTask.input_request) {
+      const req = $selectedTask.input_request;
+      if (req.type === 'database_password') {
+          passwordPromptDatabases = req.databases || [];
+          passwordPromptErrorMessage = req.error_message || "";
+          showPasswordPrompt = true;
+      }
+  } else if (!$selectedTask || $selectedTask.status !== 'AWAITING_INPUT') {
+      // Close prompt if task is no longer waiting (e.g. resumed)
+      // But only if we are viewing this task.
+      // showPasswordPrompt = false;
+      // Actually, don't auto-close, let the user or success handler close it.
+  }
+
+  async function handleResumeMigration(event: CustomEvent) {
+      if (!$selectedTask) return;
+      
+      const { passwords } = event.detail;
+      try {
+          await resumeTask($selectedTask.id, passwords);
+          showPasswordPrompt = false;
+          // Task status update will be handled by store/websocket
+      } catch (e) {
+          console.error("Failed to resume task:", e);
+          passwordPromptErrorMessage = e.message;
+          // Keep prompt open
+      }
+  }
+
   // [DEF:startMigration:Function]
   /**
    * @purpose Starts the migration process.
@@ -171,7 +228,8 @@
       const selection: DashboardSelection = {
         selected_ids: selectedDashboardIds,
         source_env_id: sourceEnvId,
-        target_env_id: targetEnvId
+        target_env_id: targetEnvId,
+        replace_db_config: replaceDb
       };
       console.log(`[MigrationDashboard][Action] Starting migration with selection:`, selection);
       const response = await fetch('/api/migration/execute', {
@@ -183,7 +241,30 @@
       if (!response.ok) throw new Error(`Failed to start migration: ${response.status} ${response.statusText}`);
       const result = await response.json();
       console.log(`[MigrationDashboard][Action] Migration started: ${result.task_id} - ${result.message}`);
-      // TODO: Show success message or redirect to task status
+      
+      // Wait a brief moment for the backend to ensure the task is retrievable
+      await new Promise(r => setTimeout(r, 500));
+      
+      // Fetch full task details and switch to TaskRunner view
+      try {
+        const taskRes = await fetch(`/api/tasks/${result.task_id}`);
+        if (taskRes.ok) {
+          const task = await taskRes.json();
+          selectedTask.set(task);
+        } else {
+            // Fallback: create a temporary task object to switch view immediately
+            console.warn("Could not fetch task details immediately, using placeholder.");
+            selectedTask.set({
+                id: result.task_id,
+                plugin_id: 'superset-migration',
+                status: 'RUNNING',
+                logs: [],
+                params: {}
+            });
+        }
+      } catch (fetchErr) {
+        console.error("Failed to fetch new task details:", fetchErr);
+      }
     } catch (e) {
       console.error(`[MigrationDashboard][Failure] Migration failed:`, e);
       error = e.message;
@@ -196,90 +277,119 @@
 <div class="max-w-4xl mx-auto p-6">
   <h1 class="text-2xl font-bold mb-6">Migration Dashboard</h1>
   
-  <TaskHistory />
+  <TaskHistory on:viewLogs={handleViewLogs} />
 
-  {#if loading}
-    <p>Loading environments...</p>
-  {:else if error}
-    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-      {error}
+  {#if $selectedTask}
+    <div class="mt-6">
+      <TaskRunner />
+      <button
+        on:click={() => selectedTask.set(null)}
+        class="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      >
+        Back to New Migration
+      </button>
     </div>
-  {/if}
-
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-    <EnvSelector
-      label="Source Environment"
-      bind:selectedId={sourceEnvId}
-      {environments}
-    />
-    <EnvSelector
-      label="Target Environment"
-      bind:selectedId={targetEnvId}
-      {environments}
-    />
-  </div>
-
-  <!-- [DEF:DashboardSelectionSection] -->
-  <div class="mb-8">
-    <h2 class="text-lg font-medium mb-4">Select Dashboards</h2>
-    
-    {#if sourceEnvId}
-      <DashboardGrid
-        {dashboards}
-        bind:selectedIds={selectedDashboardIds}
-      />
-    {:else}
-      <p class="text-gray-500 italic">Select a source environment to view dashboards.</p>
+  {:else}
+    {#if loading}
+      <p>Loading environments...</p>
+    {:else if error}
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        {error}
+      </div>
     {/if}
-  </div>
-  <!-- [/DEF:DashboardSelectionSection] -->
 
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+      <EnvSelector
+        label="Source Environment"
+        bind:selectedId={sourceEnvId}
+        {environments}
+      />
+      <EnvSelector
+        label="Target Environment"
+        bind:selectedId={targetEnvId}
+        {environments}
+      />
+    </div>
 
-  <div class="flex items-center mb-4">
-    <input
-      id="replace-db"
-      type="checkbox"
-      bind:checked={replaceDb}
-      on:change={() => { if (replaceDb && sourceDatabases.length === 0) fetchDatabases(); }}
-      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
-    />
-    <label for="replace-db" class="ml-2 block text-sm text-gray-900">
-      Replace Database (Apply Mappings)
-    </label>
-  </div>
-
-  {#if replaceDb}
-    <div class="mb-8 p-4 border rounded-md bg-gray-50">
-      <h3 class="text-md font-medium mb-4">Database Mappings</h3>
-      {#if fetchingDbs}
-        <p>Loading databases and suggestions...</p>
-      {:else if sourceDatabases.length > 0}
-        <MappingTable
-          {sourceDatabases}
-          {targetDatabases}
-          {mappings}
-          {suggestions}
-          on:update={handleMappingUpdate}
+    <!-- [DEF:DashboardSelectionSection] -->
+    <div class="mb-8">
+      <h2 class="text-lg font-medium mb-4">Select Dashboards</h2>
+      
+      {#if sourceEnvId}
+        <DashboardGrid
+          {dashboards}
+          bind:selectedIds={selectedDashboardIds}
         />
-      {:else if sourceEnvId && targetEnvId}
-        <button
-          on:click={fetchDatabases}
-          class="text-indigo-600 hover:text-indigo-500 text-sm font-medium"
-        >
-          Refresh Databases & Suggestions
-        </button>
+      {:else}
+        <p class="text-gray-500 italic">Select a source environment to view dashboards.</p>
       {/if}
     </div>
-  {/if}
+    <!-- [/DEF:DashboardSelectionSection] -->
 
-  <button
-    on:click={startMigration}
-    disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0}
-    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
-  >
-    Start Migration
-  </button>
+
+    <div class="flex items-center mb-4">
+      <input
+        id="replace-db"
+        type="checkbox"
+        bind:checked={replaceDb}
+        on:change={() => { if (replaceDb && sourceDatabases.length === 0) fetchDatabases(); }}
+        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+      />
+      <label for="replace-db" class="ml-2 block text-sm text-gray-900">
+        Replace Database (Apply Mappings)
+      </label>
+    </div>
+
+    {#if replaceDb}
+      <div class="mb-8 p-4 border rounded-md bg-gray-50">
+        <h3 class="text-md font-medium mb-4">Database Mappings</h3>
+        {#if fetchingDbs}
+          <p>Loading databases and suggestions...</p>
+        {:else if sourceDatabases.length > 0}
+          <MappingTable
+            {sourceDatabases}
+            {targetDatabases}
+            {mappings}
+            {suggestions}
+            on:update={handleMappingUpdate}
+          />
+        {:else if sourceEnvId && targetEnvId}
+          <button
+            on:click={fetchDatabases}
+            class="text-indigo-600 hover:text-indigo-500 text-sm font-medium"
+          >
+            Refresh Databases & Suggestions
+          </button>
+        {/if}
+      </div>
+    {/if}
+
+    <button
+      on:click={startMigration}
+      disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0}
+      class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
+    >
+      Start Migration
+    </button>
+  {/if}
 </div>
+
+<!-- Modals -->
+<TaskLogViewer
+    bind:show={showLogViewer}
+    taskId={logViewerTaskId}
+    taskStatus={logViewerTaskStatus}
+    on:close={() => showLogViewer = false}
+/>
+
+<PasswordPrompt
+    bind:show={showPasswordPrompt}
+    databases={passwordPromptDatabases}
+    errorMessage={passwordPromptErrorMessage}
+    on:resume={handleResumeMigration}
+    on:cancel={() => showPasswordPrompt = false}
+/>
+
 <!-- [/SECTION] -->
 
 <style>