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:
parent
226de35146
commit
5324ac3bd9
2 changed files with 29 additions and 22 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue