dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: improve data formatting and UI

Browse Source 
- 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
This commit is contained in:
peaklabs-dev
2025-01-15 18:35:20 +01:00
parent 25e6e376f9
commit 85f38b7cb5
6 changed files with 154 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/views/livewire/project/database/backup-executions.blade.php
View File

@@ -7,22 +7,40 @@
<div class="flex flex-col gap-4">
@forelse($executions as $execution)
<div wire:key="{{ data_get($execution, 'id') }}" @class([
'flex flex-col border-l-2 transition-colors p-4 ',
'bg-white dark:bg-coolgray-100 ',
'text-black dark:text-white',
'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 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')
<div class="absolute top-2 right-2">
<x-loading />
</div>
@endif
<div class="text-gray-700 dark:text-gray-300 font-semibold mb-1">Status:
{{ data_get($execution, 'status') }}</div>
<div class="flex items-center gap-2 mb-2">
<span @class([
'px-3 py-1 rounded-md text-xs font-medium tracking-wide shadow-sm',
'bg-blue-100/80 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300 dark:shadow-blue-900/5' => 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 }}
</span>
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Started At: {{ $this->formatDateInServerTimezone(data_get($execution, 'created_at')) }}
Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at'), $this->server()) }}
@if(data_get($execution, 'status') !== 'running')
<br>Ended: {{ formatDateInServerTimezone(data_get($execution, 'updated_at'), $this->server()) }}
<br>Duration: {{ calculateDuration(data_get($execution, 'created_at'), data_get($execution, 'updated_at')) }}
@endif
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Database: {{ data_get($execution, 'database_name', 'N/A') }}