From 85f38b7cb5fd083e08ce91e197c9999bda20d0f1 Mon Sep 17 00:00:00 2001 From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com> Date: Wed, 15 Jan 2025 18:35:20 +0100 Subject: [PATCH] refactor: improve data formatting and UI - move date and duration functions to a shared function - remove duplicate code - redesigned the deployment executions tab - added start and end times for backups, scheduled tasks, deployments and docker cleanup executions - calculated the duration for backups, scheduled tasks, deployments and Docker cleanup executions - redesigned status badges with colors to make it easier to see your current status - removed dependency on dayjs - fixed calculation of execution time was sometimes incorrect --- .../Project/Database/BackupExecutions.php | 23 --- .../Shared/ScheduledTask/Executions.php | 13 -- bootstrap/helpers/timezone.php | 42 +++++ .../application/deployment/index.blade.php | 155 +++++++----------- .../database/backup-executions.blade.php | 36 +++- .../scheduled-task/executions.blade.php | 38 +++-- 6 files changed, 154 insertions(+), 153 deletions(-) create mode 100644 bootstrap/helpers/timezone.php diff --git a/app/Livewire/Project/Database/BackupExecutions.php b/app/Livewire/Project/Database/BackupExecutions.php index 7eef1a539..3fc721fda 100644 --- a/app/Livewire/Project/Database/BackupExecutions.php +++ b/app/Livewire/Project/Database/BackupExecutions.php @@ -117,29 +117,6 @@ class BackupExecutions extends Component return null; } - public function getServerTimezone() - { - $server = $this->server(); - if (! $server) { - return 'UTC'; - } - - return $server->settings->server_timezone; - } - - public function formatDateInServerTimezone($date) - { - $serverTimezone = $this->getServerTimezone(); - $dateObj = new \DateTime($date); - try { - $dateObj->setTimezone(new \DateTimeZone($serverTimezone)); - } catch (\Exception) { - $dateObj->setTimezone(new \DateTimeZone('UTC')); - } - - return $dateObj->format('Y-m-d H:i:s T'); - } - public function render() { return view('livewire.project.database.backup-executions', [ diff --git a/app/Livewire/Project/Shared/ScheduledTask/Executions.php b/app/Livewire/Project/Shared/ScheduledTask/Executions.php index 74eac7132..6f62a5b5b 100644 --- a/app/Livewire/Project/Shared/ScheduledTask/Executions.php +++ b/app/Livewire/Project/Shared/ScheduledTask/Executions.php @@ -141,17 +141,4 @@ class Executions extends Component return $lines->count() > ($this->currentPage * $this->logsPerPage); } - - public function formatDateInServerTimezone($date) - { - $serverTimezone = $this->serverTimezone; - $dateObj = new \DateTime($date); - try { - $dateObj->setTimezone(new \DateTimeZone($serverTimezone)); - } catch (\Exception) { - $dateObj->setTimezone(new \DateTimeZone('UTC')); - } - - return $dateObj->format('Y-m-d H:i:s T'); - } } diff --git a/bootstrap/helpers/timezone.php b/bootstrap/helpers/timezone.php new file mode 100644 index 000000000..96d9ba6cf --- /dev/null +++ b/bootstrap/helpers/timezone.php @@ -0,0 +1,42 @@ +setTimezone(new \DateTimeZone($serverTimezone)); + } catch (\Exception) { + $dateObj->setTimezone(new \DateTimeZone('UTC')); + } + + return $dateObj->format('Y-m-d H:i:s T'); +} + +function calculateDuration($startDate, $endDate = null) +{ + if (! $endDate) { + return null; + } + + $start = new \DateTime($startDate); + $end = new \DateTime($endDate); + $interval = $start->diff($end); + + if ($interval->days > 0) { + return $interval->format('%dd %Hh %Im %Ss'); + } elseif ($interval->h > 0) { + return $interval->format('%Hh %Im %Ss'); + } else { + return $interval->format('%Im %Ss'); + } +} diff --git a/resources/views/livewire/project/application/deployment/index.blade.php b/resources/views/livewire/project/application/deployment/index.blade.php index 3fa52b7f3..0555f90d7 100644 --- a/resources/views/livewire/project/application/deployment/index.blade.php +++ b/resources/views/livewire/project/application/deployment/index.blade.php @@ -32,135 +32,96 @@ @forelse ($deployments as $deployment)
- data_get($deployment, 'status') === 'in_progress' || - data_get($deployment, 'status') === 'cancelled-by-user', - 'border-error border-dashed ' => - data_get($deployment, 'status') === 'failed', + 'border-blue-500/50 border-dashed' => data_get($deployment, 'status') === 'in_progress', + 'border-purple-500/50 border-dashed' => data_get($deployment, 'status') === 'queued', + 'border-white border-dashed' => data_get($deployment, 'status') === 'cancelled-by-user', + 'border-error' => data_get($deployment, 'status') === 'failed', 'border-success' => data_get($deployment, 'status') === 'finished', ]) x-on:click.stop="goto('{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}')">
-
- {{ $deployment->created_at }} UTC - > - {{ $deployment->status }} +
+ data_get($deployment, 'status') === 'in_progress', + 'bg-purple-100/80 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300 dark:shadow-purple-900/5' => data_get($deployment, 'status') === 'queued', + 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($deployment, 'status') === 'failed', + 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($deployment, 'status') === 'finished', + 'bg-gray-100 text-gray-700 dark:bg-gray-600/30 dark:text-gray-300 dark:shadow-gray-900/5' => data_get($deployment, 'status') === 'cancelled-by-user', + ])> + @php + $statusText = match(data_get($deployment, 'status')) { + 'finished' => 'Success', + 'in_progress' => 'In Progress', + 'cancelled-by-user' => 'Cancelled', + 'queued' => 'Queued', + default => ucfirst(data_get($deployment, 'status')) + }; + @endphp + {{ $statusText }} +
- @if (data_get($deployment, 'is_webhook') || data_get($deployment, 'pull_request_id')) -
- @if (data_get($deployment, 'is_webhook')) - Webhook - @endif - @if (data_get($deployment, 'pull_request_id')) - @if (data_get($deployment, 'is_webhook')) - | - @endif - Pull Request #{{ data_get($deployment, 'pull_request_id') }} + @if(data_get($deployment, 'status') !== 'queued') +
+ Started: {{ formatDateInServerTimezone(data_get($deployment, 'created_at'), data_get($application, 'destination.server')) }} + @if($deployment->status !== 'in_progress') +
Ended: {{ formatDateInServerTimezone(data_get($deployment, 'updated_at'), data_get($application, 'destination.server')) }} +
Duration: {{ calculateDuration(data_get($deployment, 'created_at'), data_get($deployment, 'updated_at')) }} + @else +
Running for: {{ calculateDuration(data_get($deployment, 'created_at'), now()) }} @endif +
+ @endif + +
+
@if (data_get($deployment, 'commit')) -
-
+ + Commit: @if ($deployment->commitMessage()) - ({{ data_get_str($deployment, 'commit')->limit(7) }} - - {{ $deployment->commitMessage() }}) + {{ data_get_str($deployment, 'commit')->limit(7) }} - {{ $deployment->commitMessage() }} @else {{ data_get_str($deployment, 'commit')->limit(7) }} @endif -
-
+ + @endif -
- @else -
- @if (data_get($deployment, 'rollback') === true) - Rollback - @else - @if (data_get($deployment, 'is_api')) + + @if (data_get($deployment, 'is_webhook')) + Webhook + @if (data_get($deployment, 'pull_request_id')) + | Pull Request #{{ data_get($deployment, 'pull_request_id') }} + @endif + @elseif (data_get($deployment, 'pull_request_id')) + Pull Request #{{ data_get($deployment, 'pull_request_id') }} + @elseif (data_get($deployment, 'rollback') === true) + Rollback + @elseif (data_get($deployment, 'is_api')) API @else Manual @endif - @endif - @if (data_get($deployment, 'commit')) -
-
- @if ($deployment->commitMessage()) - ({{ data_get_str($deployment, 'commit')->limit(7) }} - - {{ $deployment->commitMessage() }}) - @else - {{ data_get_str($deployment, 'commit')->limit(7) }} - @endif -
-
- @endif +
- @endif +
+ @if (data_get($deployment, 'server_name') && $application->additional_servers->count() > 0) -
+
Server: {{ data_get($deployment, 'server_name') }}
@endif
- -
-
- @if ($deployment->status !== 'in_progress') - Finished 0s ago in - 0s - @else - Running for 0s - @endif - -
-
@empty
No deployments found
@endforelse @if ($deployments_count > 0) - - - @endif
diff --git a/resources/views/livewire/project/database/backup-executions.blade.php b/resources/views/livewire/project/database/backup-executions.blade.php index 7f8350a3e..b42db371c 100644 --- a/resources/views/livewire/project/database/backup-executions.blade.php +++ b/resources/views/livewire/project/database/backup-executions.blade.php @@ -7,22 +7,40 @@
@forelse($executions as $execution)
data_get($execution, 'status') === 'success', - 'border-red-500' => data_get($execution, 'status') === 'failed', - 'border-yellow-500' => data_get($execution, 'status') === 'running', + 'flex flex-col border-l-2 transition-colors p-4 bg-white dark:bg-coolgray-100 text-black dark:text-white', + 'border-blue-500/50 border-dashed' => data_get($execution, 'status') === 'running', + 'border-error' => data_get($execution, 'status') === 'failed', + 'border-success' => data_get($execution, 'status') === 'success', ])> @if (data_get($execution, 'status') === 'running')
@endif -
Status: - {{ data_get($execution, 'status') }}
+
+ data_get($execution, 'status') === 'running', + 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed', + 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success', + ])> + @php + $statusText = match(data_get($execution, 'status')) { + 'success' => 'Success', + 'running' => 'In Progress', + 'failed' => 'Failed', + default => ucfirst(data_get($execution, 'status')) + }; + @endphp + {{ $statusText }} + +
- Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at')) }} + Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at'), $this->server()) }} + @if(data_get($execution, 'status') !== 'running') +
Ended: {{ formatDateInServerTimezone(data_get($execution, 'updated_at'), $this->server()) }} +
Duration: {{ calculateDuration(data_get($execution, 'created_at'), data_get($execution, 'updated_at')) }} + @endif
Database: {{ data_get($execution, 'database_name', 'N/A') }} diff --git a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php index c1400f5ec..63cbfd748 100644 --- a/resources/views/livewire/project/shared/scheduled-task/executions.blade.php +++ b/resources/views/livewire/project/shared/scheduled-task/executions.blade.php @@ -14,25 +14,41 @@ }"> @forelse($executions as $execution) - data_get($execution, 'id') == $selectedKey, - 'border-green-500' => data_get($execution, 'status') === 'success', - 'border-red-500' => data_get($execution, 'status') === 'failed', - 'border-yellow-500' => data_get($execution, 'status') === 'running', + 'flex flex-col border-l-2 transition-colors p-4 cursor-pointer bg-white hover:bg-gray-100 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 text-black dark:text-white', + 'bg-gray-200 dark:bg-coolgray-200' => data_get($execution, 'id') == $selectedKey, + 'border-blue-500/50 border-dashed' => data_get($execution, 'status') === 'running', + 'border-error' => data_get($execution, 'status') === 'failed', + 'border-success' => data_get($execution, 'status') === 'success', ])> - @if (data_get($execution, 'status') === 'running')
@endif -
Status: {{ data_get($execution, 'status') }} +
+ data_get($execution, 'status') === 'running', + 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' => data_get($execution, 'status') === 'failed', + 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' => data_get($execution, 'status') === 'success', + ])> + @php + $statusText = match(data_get($execution, 'status')) { + 'success' => 'Success', + 'running' => 'In Progress', + 'failed' => 'Failed', + default => ucfirst(data_get($execution, 'status')) + }; + @endphp + {{ $statusText }} +
- Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at', now())) }} + Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at', now()), data_get($task, 'application.destination.server') ?? data_get($task, 'service.destination.server')) }} + @if(data_get($execution, 'status') !== 'running') +
Ended: {{ formatDateInServerTimezone(data_get($execution, 'updated_at'), data_get($task, 'application.destination.server') ?? data_get($task, 'service.destination.server')) }} +
Duration: {{ calculateDuration(data_get($execution, 'created_at'), data_get($execution, 'updated_at')) }} + @endif
@if (strlen($execution->message) > 0)