deployments

This commit is contained in:
Andras Bacsai
2023-05-31 14:24:20 +02:00
parent 59f631e1d4
commit 327b7769f3
3 changed files with 80 additions and 23 deletions

View File

@@ -1,7 +1,15 @@
<div class="flex flex-col gap-2 pt-2" wire:init='loadDeployments' wire:poll.5000ms='reloadDeployments'>
<div wire:loading wire:target='loadDeployments'>
<x-loading />
<div class="flex flex-col gap-2 pt-2 " wire:init='load_deployments'
@if ($skip == 0) wire:poll.5000ms='reload_deployments' @endif>
<div>
<h3>Actions</h3>
@if ($show_next)
<x-forms.button isHighlighted wire:click="load_deployments({{ $default_take }})">Load More
Deployments</x-forms.button>
@else
<x-forms.button disabled>No More Deployments</x-forms.button>
@endif
</div>
<h3>Deployments</h3>
@foreach ($deployments as $deployment)
<a @class([
'bg-coolgray-200 p-2 border-l border-dashed transition-colors hover:no-underline',
@@ -19,6 +27,10 @@
@endif
class="hover:no-underline">
<div class="flex flex-col justify-start">
<div>
{{ $deployment->deployment_uuid }} <span class="text-sm text-warning">></span>
{{ $deployment->status }}
</div>
@if (data_get($deployment, 'pull_request_id'))
<div>
Pull Request #{{ data_get($deployment, 'pull_request_id') }}
@@ -27,29 +39,57 @@
@endif
</div>
@elseif (data_get($deployment, 'is_webhook'))
<div>Webhook (commit
<div>Webhook (sha
@if (data_get($deployment, 'commit'))
{{ data_get($deployment, 'commit') }})
@else
HEAD)
@endif
</div>
@else
<div>Commit:
@if (data_get($deployment, 'commit'))
{{ data_get($deployment, 'commit') }}
@else
HEAD
@endif
</div>
@endif
<div>
{{ $deployment->status }}
</div>
<div>
{{ $deployment->created_at }}
<div class="flex flex-col" x-data="elapsedTime('{{ $deployment->deployment_uuid }}', '{{ $deployment->status }}', '{{ $deployment->created_at }}', '{{ $deployment->updated_at }}')">
<div>Finished <span x-text="measure_since_started()">0s</span> in <span class="font-bold text-white"
x-text="measure_finished_time()">0s</span></div>
</div>
</div>
</a>
@endforeach
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
<script>
document.addEventListener('alpine:init', () => {
let timers = {};
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_relativeTime);
Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
finished_time: '0s',
started_time: '0s',
init() {
if (timers[uuid]) {
clearInterval(timers[uuid]);
}
if (status === 'in_progress') {
timers[uuid] = setInterval(() => {
this.finished_time = dayjs().diff(dayjs.utc(created_at),
'second') + 's'
}, 1000);
} else {
let seconds = dayjs.utc(updated_at).diff(dayjs.utc(created_at), 'second')
this.finished_time = seconds + 's';
}
},
measure_finished_time() {
return this.finished_time;
},
measure_since_started() {
return dayjs.utc(created_at).fromNow();
}
}))
})
</script>
</div>