fix: revert to original dispatch approach with unique wire:key per monitor
Root cause analysis:
- Changed from dispatch to property binding broke the activity monitor completely
- ActivityMonitor component expects activityMonitor event, not property binding
- Original approach was correct: use dispatch + event listeners
Solution:
- Revert to original dispatch('activityMonitor', $activity->id) calls
- Use @if conditionals to render only one monitor at a time (removes from DOM)
- Add unique wire:key to each monitor instance to prevent conflicts
- S3 download monitor: wire:key="s3-download-{{ $resource->uuid }}"
- Database restore monitor: wire:key="database-restore-{{ $resource->uuid }}"
This ensures:
- Activity monitors display correctly when processes start
- Only one monitor is rendered at a time (S3 download OR database restore)
- Each monitor has unique identity via wire:key
- Event listeners work as designed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
1271e7df2c
commit
f2a017a063
3 changed files with 27 additions and 35 deletions
|
|
@ -44,14 +44,6 @@ public function hydrateActivity()
|
||||||
$this->activity = Activity::find($this->activityId);
|
$this->activity = Activity::find($this->activityId);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function updatedActivityId($value)
|
|
||||||
{
|
|
||||||
if ($value) {
|
|
||||||
$this->hydrateActivity();
|
|
||||||
$this->isPollingActive = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public function polling()
|
public function polling()
|
||||||
{
|
{
|
||||||
$this->hydrateActivity();
|
$this->hydrateActivity();
|
||||||
|
|
|
||||||
|
|
@ -68,8 +68,6 @@ class Import extends Component
|
||||||
|
|
||||||
public bool $s3DownloadInProgress = false;
|
public bool $s3DownloadInProgress = false;
|
||||||
|
|
||||||
public ?int $currentActivityId = null;
|
|
||||||
|
|
||||||
public function getListeners()
|
public function getListeners()
|
||||||
{
|
{
|
||||||
$userId = Auth::id();
|
$userId = Auth::id();
|
||||||
|
|
@ -271,7 +269,7 @@ public function runImport()
|
||||||
'container' => $this->container,
|
'container' => $this->container,
|
||||||
'serverId' => $this->server->id,
|
'serverId' => $this->server->id,
|
||||||
]);
|
]);
|
||||||
$this->currentActivityId = $activity->id;
|
$this->dispatch('activityMonitor', $activity->id);
|
||||||
}
|
}
|
||||||
} catch (\Throwable $e) {
|
} catch (\Throwable $e) {
|
||||||
return handleError($e, $this);
|
return handleError($e, $this);
|
||||||
|
|
@ -411,8 +409,8 @@ public function downloadFromS3()
|
||||||
|
|
||||||
$this->s3DownloadedFile = $downloadPath;
|
$this->s3DownloadedFile = $downloadPath;
|
||||||
$this->filename = $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...');
|
$this->dispatch('info', 'Downloading file from S3. This may take a few minutes for large backups...');
|
||||||
} catch (\Throwable $e) {
|
} catch (\Throwable $e) {
|
||||||
$this->s3DownloadInProgress = false;
|
$this->s3DownloadInProgress = false;
|
||||||
|
|
@ -494,7 +492,7 @@ public function restoreFromS3()
|
||||||
's3DownloadedFile' => $this->s3DownloadedFile,
|
's3DownloadedFile' => $this->s3DownloadedFile,
|
||||||
'resourceUuid' => $this->resource->uuid,
|
'resourceUuid' => $this->resource->uuid,
|
||||||
]);
|
]);
|
||||||
$this->currentActivityId = $activity->id;
|
$this->dispatch('activityMonitor', $activity->id);
|
||||||
}
|
}
|
||||||
} catch (\Throwable $e) {
|
} catch (\Throwable $e) {
|
||||||
return handleError($e, $this);
|
return handleError($e, $this);
|
||||||
|
|
@ -524,7 +522,6 @@ public function cancelS3Download()
|
||||||
// Reset S3 download state
|
// Reset S3 download state
|
||||||
$this->s3DownloadedFile = null;
|
$this->s3DownloadedFile = null;
|
||||||
$this->s3DownloadInProgress = false;
|
$this->s3DownloadInProgress = false;
|
||||||
$this->currentActivityId = null;
|
|
||||||
$this->filename = null;
|
$this->filename = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,7 @@
|
||||||
s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
|
s3DownloadedFile: $wire.entangle('s3DownloadedFile'),
|
||||||
s3FileSize: $wire.entangle('s3FileSize'),
|
s3FileSize: $wire.entangle('s3FileSize'),
|
||||||
s3StorageId: $wire.entangle('s3StorageId'),
|
s3StorageId: $wire.entangle('s3StorageId'),
|
||||||
s3Path: $wire.entangle('s3Path'),
|
s3Path: $wire.entangle('s3Path')
|
||||||
importRunning: $wire.entangle('importRunning')
|
|
||||||
}">
|
}">
|
||||||
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
|
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
|
||||||
@script
|
@script
|
||||||
|
|
@ -148,23 +147,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div x-show="s3DownloadInProgress" class="pt-2">
|
@if ($s3DownloadInProgress)
|
||||||
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
|
<div class="pt-2">
|
||||||
backups.</div>
|
<div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
|
||||||
<livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
|
backups.</div>
|
||||||
</div>
|
<livewire:activity-monitor wire:key="s3-download-{{ $resource->uuid }}" header="S3 Download Progress" :showWaiting="false" />
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
|
|
@ -173,9 +174,11 @@
|
||||||
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
|
<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>
|
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
|
||||||
</div>
|
</div>
|
||||||
<div class="container w-full mx-auto" x-show="importRunning">
|
@if ($importRunning)
|
||||||
<livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
|
<div class="container w-full mx-auto">
|
||||||
</div>
|
<livewire:activity-monitor wire:key="database-restore-{{ $resource->uuid }}" header="Database Restore Output" :showWaiting="false" />
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
@else
|
@else
|
||||||
<div>Database must be running to restore a backup.</div>
|
<div>Database must be running to restore a backup.</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue