ui: fix log outputs
This commit is contained in:
@@ -27,18 +27,17 @@
|
||||
@endif
|
||||
@forelse ($deployments as $deployment)
|
||||
<a @class([
|
||||
'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
|
||||
'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline box-without-bg bg-white',
|
||||
'dark:hover:bg-coolgray-200' =>
|
||||
data_get($deployment, 'status') === 'queued',
|
||||
'border-warning hover:bg-warning hover:text-black' =>
|
||||
data_get($deployment, 'status') === 'in_progress' ||
|
||||
data_get($deployment, 'status') === 'cancelled-by-user',
|
||||
'border-error hover:bg-error' =>
|
||||
'border-error dark:hover:bg-error hover:bg-neutral-200' =>
|
||||
data_get($deployment, 'status') === 'failed',
|
||||
'border-success hover:bg-success' =>
|
||||
'border-success dark:hover:bg-success hover:bg-neutral-200' =>
|
||||
data_get($deployment, 'status') === 'finished',
|
||||
]) href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}"
|
||||
class="hover:no-underline">
|
||||
]) href="{{ $current_url . '/' . data_get($deployment, 'deployment_uuid') }}">
|
||||
<div class="flex flex-col justify-start">
|
||||
<div class="flex gap-1">
|
||||
{{ $deployment->created_at }} UTC
|
||||
|
||||
@@ -1,11 +1,45 @@
|
||||
<div>
|
||||
<h1 class="py-0">Deployment</h1>
|
||||
<livewire:project.application.heading :application="$application" />
|
||||
<div class="pt-4" x-data="{ fullscreen: false, alwaysScroll: false, intervalId: null }">
|
||||
<div class="pt-4" x-data="{
|
||||
fullscreen: false,
|
||||
alwaysScroll: false,
|
||||
intervalId: null,
|
||||
makeFullscreen() {
|
||||
this.fullscreen = !this.fullscreen;
|
||||
if (this.fullscreen === false) {
|
||||
this.alwaysScroll = false;
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
},
|
||||
toggleScroll() {
|
||||
this.alwaysScroll = !this.alwaysScroll;
|
||||
|
||||
if (this.alwaysScroll) {
|
||||
this.intervalId = setInterval(() => {
|
||||
const screen = document.getElementById('screen');
|
||||
const logs = document.getElementById('logs');
|
||||
if (screen.scrollTop !== logs.scrollHeight) {
|
||||
screen.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
}
|
||||
},
|
||||
goTop() {
|
||||
this.alwaysScroll = false;
|
||||
clearInterval(this.intervalId);
|
||||
const screen = document.getElementById('screen');
|
||||
screen.scrollTop = 0;
|
||||
}
|
||||
}">
|
||||
<livewire:project.application.deployment-navbar :application_deployment_queue="$application_deployment_queue" />
|
||||
@if (data_get($application_deployment_queue, 'status') === 'in_progress')
|
||||
<div class="flex items-center gap-1 pt-2 ">Deployment is
|
||||
<div class="dark:text-warning"> {{ Str::headline(data_get($this->application_deployment_queue, 'status')) }}.
|
||||
<div class="dark:text-warning">
|
||||
{{ Str::headline(data_get($this->application_deployment_queue, 'status')) }}.
|
||||
</div>
|
||||
<x-loading class="loading-ring" />
|
||||
</div>
|
||||
@@ -17,7 +51,7 @@
|
||||
@endif
|
||||
<div id="screen" :class="fullscreen ? 'fullscreen' : ''">
|
||||
<div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
|
||||
class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto dark:text-white bg-coolgray-100 scrollbar border-coolgray-300"
|
||||
class="relative flex flex-col-reverse w-full p-2 px-4 mt-4 overflow-y-auto bg-white dark:text-white dark:bg-coolgray-100 scrollbar dark:border-coolgray-300"
|
||||
:class="fullscreen ? '' : 'max-h-[40rem] border border-dotted rounded'">
|
||||
<button title="Minimize" x-show="fullscreen" class="fixed top-4 right-4"
|
||||
x-on:click="makeFullscreen"><svg class="icon" viewBox="0 0 24 24"
|
||||
@@ -58,7 +92,11 @@
|
||||
<br>COMMAND: <br>{{ $line['command'] }} <br><br>OUTPUT:
|
||||
@endif @if (str($line['output'])->contains('http://') || str($line['output'])->contains('https://'))
|
||||
@php
|
||||
$line['output'] = preg_replace('/(https?:\/\/[^\s]+)/', '<a href="$1" target="_blank" class="underline text-neutral-400">$1</a>', $line['output']);
|
||||
$line['output'] = preg_replace(
|
||||
'/(https?:\/\/[^\s]+)/',
|
||||
'<a href="$1" target="_blank" class="underline text-neutral-400">$1</a>',
|
||||
$line['output'],
|
||||
);
|
||||
@endphp {!! $line['output'] !!}
|
||||
@else
|
||||
{{ $line['output'] }}
|
||||
@@ -71,39 +109,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function makeFullscreen() {
|
||||
this.fullscreen = !this.fullscreen;
|
||||
if (this.fullscreen === false) {
|
||||
this.alwaysScroll = false;
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleScroll() {
|
||||
this.alwaysScroll = !this.alwaysScroll;
|
||||
|
||||
if (this.alwaysScroll) {
|
||||
this.intervalId = setInterval(() => {
|
||||
const screen = document.getElementById('screen');
|
||||
const logs = document.getElementById('logs');
|
||||
if (screen.scrollTop !== logs.scrollHeight) {
|
||||
screen.scrollTop = logs.scrollHeight;
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
}
|
||||
}
|
||||
|
||||
function goTop() {
|
||||
this.alwaysScroll = false;
|
||||
clearInterval(this.intervalId);
|
||||
const screen = document.getElementById('screen');
|
||||
screen.scrollTop = 0;
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user