fix: multiple server deployments
feat: custom preview deployment fqdn ui: improvements here and there
This commit is contained in:
Andras Bacsai
@@ -1,54 +1,68 @@
|
||||
@props([
|
||||
'title' => 'Are you sure?',
|
||||
'buttonTitle' => 'Open Modal',
|
||||
'isErrorButton' => false,
|
||||
'buttonTitle' => 'REWRITE THIS BUTTON TITLE PLEASSSSEEEE',
|
||||
'buttonFullWidth' => false,
|
||||
'customButton' => null,
|
||||
'disabled' => false,
|
||||
'action' => 'delete',
|
||||
'content' => null,
|
||||
])
|
||||
<div x-data="{ modalOpen: false }" @keydown.escape.window="modalOpen = false" :class="{ 'z-40': modalOpen }"
|
||||
class="relative w-auto h-auto">
|
||||
@if ($content)
|
||||
<div @click="modalOpen=true">
|
||||
{{ $content }}
|
||||
</div>
|
||||
@else
|
||||
@if ($disabled)
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button class="w-full" isError disabled wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.button isError disabled wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@elseif ($isErrorButton)
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button class="w-full" isError @click="modalOpen=true">
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.button isError @click="modalOpen=true">
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@if ($customButton)
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button @click="modalOpen=true" class="w-full">
|
||||
{{ $customButton }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button @click="modalOpen=true" class="flex w-full gap-2" wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
<x-forms.button @click="modalOpen=true">
|
||||
{{ $customButton }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@else
|
||||
@if ($content)
|
||||
<div @click="modalOpen=true">
|
||||
{{ $content }}
|
||||
</div>
|
||||
@else
|
||||
@if ($disabled)
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button class="w-full" isError disabled wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.button isError disabled wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@elseif ($isErrorButton)
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button class="w-full" isError @click="modalOpen=true">
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.button isError @click="modalOpen=true">
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@else
|
||||
<x-forms.button @click="modalOpen=true" class="flex gap-2" wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@if ($buttonFullWidth)
|
||||
<x-forms.button @click="modalOpen=true" class="flex w-full gap-2" wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@else
|
||||
<x-forms.button @click="modalOpen=true" class="flex gap-2" wire:target>
|
||||
{{ $buttonTitle }}
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen"
|
||||
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen" style="zoom:1.1;" x-cloak>
|
||||
class="fixed top-0 lg:pt-10 left-0 z-[99] flex items-start justify-center w-screen h-screen"
|
||||
style="zoom:1.1;" x-cloak>
|
||||
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click="modalOpen=false"
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
<div class="flex flex-col gap-2 pb-4">
|
||||
<x-forms.input id="application.preview_url_template" label="Preview URL Template"
|
||||
helper="Templates:<span class='text-helper'>@@{{ random }}</span> to generate random sub-domain each time a PR is deployed, <span class='text-helper'>@@{{ pr_id }}</span> to use pull request ID as sub-domain or <span class='text-helper'>@@{{ domain }}</span> to replace the domain name with the application's domain name." />
|
||||
<div class="">Domain Preview: {{ $preview_url_template }}</div>
|
||||
@if ($preview_url_template)
|
||||
<div class="">Domain Preview: {{ $preview_url_template }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -39,7 +39,11 @@
|
||||
<x-external-link />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<td class="flex flex-col gap-1 md:flex-row">
|
||||
<x-forms.button
|
||||
wire:click="add('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
|
||||
Add
|
||||
</x-forms.button>
|
||||
<x-forms.button
|
||||
wire:click="deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
|
||||
Deploy
|
||||
@@ -55,9 +59,9 @@
|
||||
</div>
|
||||
@if ($application->previews->count() > 0)
|
||||
<div class="pb-4">Previews</div>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
@foreach ($application->previews as $preview)
|
||||
<div class="flex flex-col p-4 dark:bg-coolgray-100">
|
||||
<div class="flex flex-wrap w-full gap-4">
|
||||
@foreach (data_get($application, 'previews') as $previewName => $preview)
|
||||
<div class="flex flex-col w-full p-4 border dark:border-coolgray-200">
|
||||
<div class="flex gap-2">PR #{{ data_get($preview, 'pull_request_id') }} |
|
||||
@if (Str::of(data_get($preview, 'status'))->startsWith('running'))
|
||||
<x-status.running :status="data_get($preview, 'status')" />
|
||||
@@ -77,9 +81,15 @@
|
||||
<x-external-link />
|
||||
</a>
|
||||
</div>
|
||||
<form wire:submit="save_preview('{{ $preview->id }}')" class="flex items-end gap-2 pt-4">
|
||||
<x-forms.input label="Domain" helper="One domain per preview."
|
||||
id="application.previews.{{ $previewName }}.fqdn"></x-forms.input>
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
<x-forms.button wire:click="generate_preview('{{ $preview->id }}')">Generate
|
||||
Domain</x-forms.button>
|
||||
</form>
|
||||
<div class="flex items-center gap-2 pt-6">
|
||||
<x-forms.button class="dark:bg-coolgray-500"
|
||||
wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
|
||||
<x-forms.button wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
|
||||
@if (data_get($preview, 'status') === 'exited')
|
||||
Deploy
|
||||
@else
|
||||
@@ -89,20 +99,43 @@
|
||||
@if (count($parameters) > 0)
|
||||
<a
|
||||
href="{{ route('project.application.deployment.index', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
|
||||
<x-forms.button class="dark:bg-coolgray-500">
|
||||
<x-forms.button>
|
||||
Deployment Logs
|
||||
</x-forms.button>
|
||||
</a>
|
||||
<a
|
||||
href="{{ route('project.application.logs', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
|
||||
<x-forms.button class="dark:bg-coolgray-500">
|
||||
<x-forms.button>
|
||||
Application Logs
|
||||
</x-forms.button>
|
||||
</a>
|
||||
@endif
|
||||
<x-forms.button isError class="dark:bg-coolgray-500"
|
||||
wire:click="stop({{ data_get($preview, 'pull_request_id') }})">Delete
|
||||
</x-forms.button>
|
||||
<div class="flex-1"></div>
|
||||
@if (data_get($preview, 'status') !== 'exited')
|
||||
<x-modal-confirmation isErrorButton
|
||||
action="stop({{ data_get($preview, 'pull_request_id') }})">
|
||||
<x-slot:customButton>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error"
|
||||
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
|
||||
</path>
|
||||
<path
|
||||
d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
|
||||
</path>
|
||||
</svg>
|
||||
Stop
|
||||
</x-slot:customButton>
|
||||
This will stop the preview deployment. <br>Please think again.
|
||||
</x-modal-confirmation>
|
||||
@endif
|
||||
<x-modal-confirmation isErrorButton
|
||||
action="delete({{ data_get($preview, 'pull_request_id') }})" buttonTitle="Delete">
|
||||
This will delete the preview deployment. <br>Please think again.
|
||||
</x-modal-confirmation>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@if ($resource?->additional_networks?->count() > 0)
|
||||
@if ($resource?->additional_networks?->count() > 0 && data_get($resource, 'build_pack') !== 'dockercompose')
|
||||
<h3>Additional Server(s)</h3>
|
||||
@foreach ($resource->additional_networks as $destination)
|
||||
<div class="flex flex-col gap-2">
|
||||
@@ -73,7 +73,7 @@
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
@if ($resource->getMorphClass() === 'App\Models\Application')
|
||||
@if ($resource->getMorphClass() === 'App\Models\Application' && data_get($resource, 'build_pack') !== 'dockercompose')
|
||||
@if (count($networks) > 0)
|
||||
<h4>Choose another server</h4>
|
||||
<div class="pb-4 description">(experimental) </div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<div class="p-4 my-4 border dark:border-coolgray-200">
|
||||
<div x-init="$wire.getLogs" id="screen" x-data="{
|
||||
fullscreen: false,
|
||||
alwaysScroll: false,
|
||||
@@ -33,13 +33,12 @@
|
||||
screen.scrollTop = 0;
|
||||
}
|
||||
}">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 ">
|
||||
@if ($resource?->type() === 'application')
|
||||
<h3>{{ $container }}</h3>
|
||||
<h4>{{ $container }}</h4>
|
||||
@else
|
||||
<h3>{{ str($container)->beforeLast('-')->headline() }}</h3>
|
||||
@endif
|
||||
<div>Server: {{ $server->name }} </div>
|
||||
@if ($pull_request)
|
||||
<div>({{ $pull_request }})</div>
|
||||
@endif
|
||||
|
||||
@@ -4,18 +4,21 @@
|
||||
<h1>Logs</h1>
|
||||
<livewire:project.application.heading :application="$resource" />
|
||||
<div class="pt-4">
|
||||
<h2 class="pb-4">Logs</h2>
|
||||
<h2>Logs</h2>
|
||||
<div class="subtitle">Here you can see the logs of the application.</div>
|
||||
<div class="pt-2" wire:loading wire:target="loadContainers">
|
||||
Loading containers...
|
||||
</div>
|
||||
@forelse ($servers as $server)
|
||||
<h3 x-init="$wire.loadContainers({{ $server->id }})"></h3>
|
||||
<div wire:loading.remove wire:target="loadContainers">
|
||||
@forelse (data_get($server,'containers',[]) as $container)
|
||||
<livewire:project.shared.get-logs :server="$server" :resource="$resource" :container="data_get($container, 'Names')" />
|
||||
@empty
|
||||
<div class="pt-2">No containers are not running on server: {{ $server->name }}</div>
|
||||
@endforelse
|
||||
<div class="py-2">
|
||||
<h2 wire:loading.remove x-init="$wire.loadContainers({{ $server->id }})">Server: {{ $server->name }}</h2>
|
||||
<div wire:loading.remove wire:target="loadContainers">
|
||||
@forelse (data_get($server,'containers',[]) as $container)
|
||||
<livewire:project.shared.get-logs :server="$server" :resource="$resource" :container="data_get($container, 'Names')" />
|
||||
@empty
|
||||
<div class="pt-2">No containers are not running on server: {{ $server->name }}</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div>No functional server found for the application.</div>
|
||||
|
||||
Reference in New Issue
Block a user