fix: conditionally render activity monitors to prevent output conflicts

- Add currentActivityId property to track the active process
- Replace event dispatching with property assignment for cleaner state management
- S3 download monitor only renders during download and is removed when complete
- Database restore monitor only renders during restore operation
- Both monitors now share the same activity-monitor component instance with proper lifecycle management
- When user starts restore after S3 download, S3 monitor is removed from DOM
- Fixes issue where S3 download and database restore showed identical output

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-11-02 16:57:00 +01:00
parent 226de35146
commit 5324ac3bd9
2 changed files with 29 additions and 22 deletions

View file

@ -68,6 +68,8 @@ class Import extends Component
public bool $s3DownloadInProgress = false;
public ?int $currentActivityId = null;
public function getListeners()
{
$userId = Auth::id();
@ -263,7 +265,7 @@ public function runImport()
'container' => $this->container,
'serverId' => $this->server->id,
]);
$this->dispatch('activityMonitor', $activity->id);
$this->currentActivityId = $activity->id;
}
} catch (\Throwable $e) {
return handleError($e, $this);
@ -403,8 +405,8 @@ public function downloadFromS3()
$this->s3DownloadedFile = $downloadPath;
$this->filename = $downloadPath;
$this->currentActivityId = $activity->id;
$this->dispatch('activityMonitor', $activity->id);
$this->dispatch('info', 'Downloading file from S3. This may take a few minutes for large backups...');
} catch (\Throwable $e) {
$this->s3DownloadInProgress = false;
@ -486,7 +488,7 @@ public function restoreFromS3()
's3DownloadedFile' => $this->s3DownloadedFile,
'resourceUuid' => $this->resource->uuid,
]);
$this->dispatch('activityMonitor', $activity->id);
$this->currentActivityId = $activity->id;
}
} catch (\Throwable $e) {
return handleError($e, $this);
@ -516,6 +518,7 @@ public function cancelS3Download()
// Reset S3 download state
$this->s3DownloadedFile = null;
$this->s3DownloadInProgress = false;
$this->currentActivityId = null;
$this->filename = null;
}
}

View file

@ -147,23 +147,25 @@
</div>
</div>
<div x-show="s3DownloadInProgress" class="pt-2">
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
backups.</div>
<livewire:activity-monitor header="S3 Download Progress" :showWaiting="false" />
</div>
<div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
<div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
<div class="flex gap-2 pt-2">
<x-forms.button class="w-full" wire:click='restoreFromS3'>
Restore Database from S3
</x-forms.button>
<x-forms.button class="w-full" wire:click='cancelS3Download'>
Cancel
</x-forms.button>
@if ($s3DownloadInProgress)
<div class="pt-2">
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
backups.</div>
<livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
</div>
</div>
@elseif ($s3DownloadedFile)
<div class="pt-2">
<div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
<div class="flex gap-2 pt-2">
<x-forms.button class="w-full" wire:click='restoreFromS3'>
Restore Database from S3
</x-forms.button>
<x-forms.button class="w-full" wire:click='cancelS3Download'>
Cancel
</x-forms.button>
</div>
</div>
@endif
</div>
@endif
@ -172,9 +174,11 @@
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
</div>
<div class="container w-full mx-auto" x-show="$wire.importRunning">
<livewire:activity-monitor header="Database Restore Output" :showWaiting="false" />
</div>
@if ($importRunning)
<div class="container w-full mx-auto">
<livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
</div>
@endif
@else
<div>Database must be running to restore a backup.</div>
@endif