fix: deployments ui
This commit is contained in:
parent
070573f0df
commit
90291b2edf
@ -23,82 +23,79 @@
|
|||||||
data_get($deployment, 'status') === 'error',
|
data_get($deployment, 'status') === 'error',
|
||||||
'border-success hover:bg-success' =>
|
'border-success hover:bg-success' =>
|
||||||
data_get($deployment, 'status') === 'finished',
|
data_get($deployment, 'status') === 'finished',
|
||||||
]) @if (data_get($deployment, 'status') !== 'cancelled by system' && data_get($deployment, 'status') !== 'queued')
|
]) href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}"
|
||||||
href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}"
|
class="hover:no-underline">
|
||||||
@endif
|
<div class="flex flex-col justify-start">
|
||||||
class="hover:no-underline">
|
<div class="flex gap-1">
|
||||||
<div class="flex flex-col justify-start">
|
{{ $deployment->created_at }} UTC
|
||||||
<div>
|
<span class=" text-warning">></span>
|
||||||
{{ $deployment->created_at }} UTC
|
{{ $deployment->status }}
|
||||||
<span class=" text-warning">></span>
|
</div>
|
||||||
{{ $deployment->status }}
|
@if (data_get($deployment, 'pull_request_id'))
|
||||||
@if (data_get($deployment, 'pull_request_id'))
|
<div>
|
||||||
<span class=" text-warning">></span>
|
<span class=" text-warning">></span>
|
||||||
Pull Request #{{ data_get($deployment, 'pull_request_id') }}
|
Pull Request #{{ data_get($deployment, 'pull_request_id') }}
|
||||||
@if (data_get($deployment, 'is_webhook'))
|
@if (data_get($deployment, 'is_webhook'))
|
||||||
(Webhook)
|
(Webhook)
|
||||||
|
@endif
|
||||||
|
Webhook (SHA
|
||||||
|
@if (data_get($deployment, 'commit'))
|
||||||
|
{{ data_get($deployment, 'commit') }})
|
||||||
|
@else
|
||||||
|
HEAD)
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@elseif (data_get($deployment, 'is_webhook'))
|
</div>
|
||||||
<span class=" text-warning">></span>
|
|
||||||
</div>
|
|
||||||
Webhook (sha
|
|
||||||
@if (data_get($deployment, 'commit'))
|
|
||||||
{{ data_get($deployment, 'commit') }})
|
|
||||||
@else
|
|
||||||
HEAD)
|
|
||||||
@endif
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col" x-data="elapsedTime('{{ $deployment->deployment_uuid }}', '{{ $deployment->status }}', '{{ $deployment->created_at }}', '{{ $deployment->updated_at }}')">
|
<div class="flex flex-col" x-data="elapsedTime('{{ $deployment->deployment_uuid }}', '{{ $deployment->status }}', '{{ $deployment->created_at }}', '{{ $deployment->updated_at }}')">
|
||||||
<div>
|
<div>
|
||||||
@if ($deployment->status !== 'in_progress')
|
@if ($deployment->status !== 'in_progress')
|
||||||
Finished <span x-text="measure_since_started()">0s</span> in
|
Finished <span x-text="measure_since_started()">0s</span> in
|
||||||
@else
|
@else
|
||||||
Running for
|
Running for
|
||||||
@endif
|
@endif
|
||||||
<span class="font-bold" x-text="measure_finished_time()">0s</span>
|
<span class="font-bold" x-text="measure_finished_time()">0s</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
</a>
|
@empty
|
||||||
@empty
|
<div class="">No deployments found</div>
|
||||||
<div class="">No deployments found</div>
|
@endforelse
|
||||||
@endforelse
|
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
|
||||||
<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/utc.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
|
<script>
|
||||||
<script>
|
document.addEventListener('alpine:init', () => {
|
||||||
document.addEventListener('alpine:init', () => {
|
let timers = {};
|
||||||
let timers = {};
|
|
||||||
|
|
||||||
dayjs.extend(window.dayjs_plugin_utc);
|
dayjs.extend(window.dayjs_plugin_utc);
|
||||||
dayjs.extend(window.dayjs_plugin_relativeTime);
|
dayjs.extend(window.dayjs_plugin_relativeTime);
|
||||||
|
|
||||||
Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
|
Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
|
||||||
finished_time: 'calculating...',
|
finished_time: 'calculating...',
|
||||||
started_time: 'calculating...',
|
started_time: 'calculating...',
|
||||||
init() {
|
init() {
|
||||||
if (timers[uuid]) {
|
if (timers[uuid]) {
|
||||||
clearInterval(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();
|
||||||
}
|
}
|
||||||
if (status === 'in_progress') {
|
}))
|
||||||
timers[uuid] = setInterval(() => {
|
})
|
||||||
this.finished_time = dayjs().diff(dayjs.utc(created_at),
|
</script>
|
||||||
'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>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user