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

ui: redesign

Browse Source
This commit is contained in:
Andras Bacsai
2024-03-20 12:54:06 +01:00
parent 91950e1891
commit b61860b3ab
85 changed files with 1537 additions and 961 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/livewire/activity-monitor.blade.php
View File

@@ -10,7 +10,7 @@
</div>
@endif
<div
class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 pt-6 text-xs text-white">
class="scrollbar flex flex-col-reverse w-full overflow-y-auto border border-solid rounded border-coolgray-300 max-h-[32rem] p-4 text-xs text-white">
<pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($this->activity) }}</pre>
</div>

4
resources/views/livewire/dashboard.blade.php
View File

@@ -2,10 +2,10 @@
@if (session('error'))
<span x-data x-init="$wire.emit('error', '{{ session('error') }}')" />
@endif
<h1>Dashboard</h1>
<h1 class="title">Dashboard</h1>
{{-- <div class="subtitle">Your self-hosted environment</div> --}}
@if (request()->query->get('success'))
<div class="mb-10 text-white rounded alert alert-success">
<div class="mb-10 text-white rounded alert-success">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

6
resources/views/livewire/destination/form.blade.php
View File

@@ -6,14 +6,14 @@
Save
</x-forms.button>
@if ($destination->network !== 'coolify')
<x-new-modal isErrorButton buttonTitle="Delete Destination">
<x-modal-confirmation isErrorButton buttonTitle="Delete Destination">
This destination will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@endif
</div>
@if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
<div class="subtitle ">A Docker network in a non-swarm environment</div>
<div class="subtitle ">A Docker network in a non-swarm environment.</div>
@else
<div class="subtitle ">Your swarm docker network. WIP</div>
@endif

5
resources/views/livewire/help.blade.php
View File

@@ -1,11 +1,10 @@
<div class="flex flex-col w-11/12 max-w-5xl gap-2 modal-box">
<h3>How can we help?</h3>
<div class="flex flex-col w-full gap-2">
<div>Your feedback helps us to improve Coolify. Thank you! 💜</div>
<form wire:submit="submit" class="flex flex-col gap-4 pt-4">
<x-forms.input id="subject" label="Subject" placeholder="Summary of your problem."></x-forms.input>
<x-forms.textarea rows="10" id="description" label="Description"
placeholder="Please provide as much information as possible."></x-forms.textarea>
<div></div>
<x-forms.button class="w-full mt-4" type="submit" onclick="help.close()">Send</x-forms.button>
<x-forms.button class="w-full mt-4" type="submit" @click="modalOpen=false">Send</x-forms.button>
</form>
</div>

29
resources/views/livewire/layout-popups.blade.php
View File

@@ -1,6 +1,22 @@
<div>
@if (data_get(auth()->user(), 'is_notification_sponsorship_enabled'))
<div class="toast">
<x-popup>
<x-slot:title>
Love Coolify as we do?
</x-slot:title>
<x-slot:description>
<span>Please
consider donating on <a href="https://github.com/sponsors/coollabsio"
class="text-xs text-white underline">GitHub</a> or <a href="https://opencollective.com/coollabsio"
class="text-xs text-white underline">OpenCollective</a>.<br><br></span>
<span>It enables us to keep creating features without paywalls, ensuring our work remains free and
open.</span>
</x-slot:description>
<x-slot:button-text wire:click='disableSponsorship'>
Disable This Popup
</x-slot:button-text>
</x-popup>
{{-- <div class="toast">
<div class="flex flex-col text-white rounded alert bg-coolgray-200">
<span>Love Coolify as we do? <a href="https://coolify.io/sponsorships"
class="underline text-warning">Please
@@ -10,8 +26,9 @@
<x-forms.button class="bg-coolgray-400" wire:click='disableSponsorship'>Disable This
Popup</x-forms.button>
</div>
</div>
</div> --}}
@endif
{{-- <x-popup /> --}}
@if (currentTeam()->serverOverflow())
<x-banner :closable=false>
<div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit
@@ -24,10 +41,12 @@
@if (!currentTeam()->isAnyNotificationEnabled())
<div class="toast">
<div class="flex flex-col text-white rounded alert bg-coolgray-200">
<span><span class="font-bold text-red-500">WARNING:</span> No notifications enabled.<br><br> It is highly recommended to enable at least
<span><span class="font-bold text-red-500">WARNING:</span> No notifications enabled.<br><br> It is
highly recommended to enable at least
one
notification channel to receive important alerts.<br>Visit <a href="{{ route('notification.index') }}"
class="text-white underline">/notification</a> to enable notifications.</span>
notification channel to receive important alerts.<br>Visit <a
href="{{ route('notification.index') }}" class="text-white underline">/notification</a> to
enable notifications.</span>
<x-forms.button class="bg-coolgray-400" wire:click='disableNotifications'>Disable This
Popup</x-forms.button>
</div>

31
resources/views/livewire/notifications/email-settings.blade.php
View File

@@ -1,15 +1,4 @@
<div>
<dialog id="sendTestEmail" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
<x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
<x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification">
Send Email
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>Email</h2>
@@ -21,15 +10,17 @@
Copy from Instance Settings
</x-forms.button>
@endif
@if (isEmailEnabled($team) &&
auth()->user()->isAdminFromSession() &&
isTestEmailEnabled($team))
<x-forms.button onclick="sendTestEmail.showModal()"
class="text-white normal-case btn btn-xs no-animation btn-primary">
Send Test Email
</x-forms.button>
@if (isEmailEnabled($team) && auth()->user()->isAdminFromSession() && isTestEmailEnabled($team))
<x-modal-input buttonTitle="Send Test Email" title="Send Test Email">
<form wire:submit='submit' class="flex flex-col w-full gap-2">
<x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
<x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification"
@click="modalOpen=false">
Send Email
</x-forms.button>
</form>
</x-modal-input>
@endif
</div>
</form>
@if (isCloud())
@@ -45,7 +36,7 @@
</div>
@endif
@else
<div class="pb-4 w-96">
<div class="w-96">
<x-forms.checkbox instantSave="instantSaveInstance" id="team.use_instance_email_settings"
label="Use system wide (transactional) email settings" />
</div>

20
resources/views/livewire/project/add-empty.blade.php
View File

@@ -1,12 +1,8 @@
<dialog id="newEmptyProject" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
<x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
<x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
<x-forms.button onclick="newEmptyProject.close()" type="submit">
Save
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="Your Cool Project" id="name" label="Name" required />
<x-forms.input placeholder="This is my cool project everyone knows about" id="description" label="Description" />
<div class="subtitle">New project will have a default production environment.</div>
<x-forms.button type="submit" @click="slideOverOpen=false">
Save
</x-forms.button>
</form>

17
resources/views/livewire/project/add-environment.blade.php
View File

@@ -1,11 +1,6 @@
<dialog id="newEnvironment" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
<x-forms.input placeholder="production" id="name" label="Name" required />
<x-forms.button onclick="newEnvironment.close()" type="submit">
Save
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="production" id="name" label="Name" required />
<x-forms.button type="submit" @click="slideOverOpen=false">
Save
</x-forms.button>
</form>

2
resources/views/livewire/project/application/advanced.blade.php
View File

@@ -4,7 +4,7 @@
<h2>Advanced</h2>
</div>
<div>Advanced configuration for your application.</div>
<div class="flex flex-col gap-2 pt-4 w-96">
<div class="pt-4 w-96">
<h3>General</h3>
@if ($application->git_based())
<x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave

105
resources/views/livewire/project/application/deployment/index.blade.php
View File

@@ -6,39 +6,30 @@
@if ($skip == 0) wire:poll.5000ms='reload_deployments' @endif>
<div class="flex items-end gap-2 pt-4">
<h2>Deployments <span class="text-xs">({{ $deployments_count }})</span></h2>
@if ($show_prev)
<x-forms.button wire:click="previous_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
@if ($deployments_count > 0)
<x-forms.button disabled="{{ !$show_prev }}" wire:click="previous_page('{{ $default_take }}')"><svg
class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg></x-forms.button>
@else
<x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg></x-forms.button>
@endif
@if ($show_next)
<x-forms.button wire:click="next_page({{ $default_take }})"><svg class="w-6 h-6" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg></x-forms.button>
@else
<x-forms.button disabled><svg class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<x-forms.button disabled="{{ !$show_next }}" wire:click="next_page('{{ $default_take }}')"><svg
class="w-6 h-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg></x-forms.button>
@endif
</div>
<form class="flex items-end gap-2">
<x-forms.input id="pull_request_id" label="Pull Request"></x-forms.input>
<x-forms.button type="submit">Filter</x-forms.button>
</form>
@if ($deployments_count > 0)
<form class="flex items-end gap-2">
<x-forms.input id="pull_request_id" label="Pull Request"></x-forms.input>
<x-forms.button type="submit">Filter</x-forms.button>
</form>
@endif
@forelse ($deployments as $deployment)
<a @class([
'bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
'hover:bg-coolgray-200' => data_get($deployment, 'status') === 'queued',
'dark:bg-coolgray-100 p-2 border-l border-dashed transition-colors hover:no-underline',
'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',
@@ -98,42 +89,44 @@
@empty
<div class="">No deployments found</div>
@endforelse
<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 = {};
@if ($deployments_count > 0)
<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);
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_relativeTime);
Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
finished_time: 'calculating...',
started_time: 'calculating...',
init() {
if (timers[uuid]) {
clearInterval(timers[uuid]);
Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
finished_time: 'calculating...',
started_time: 'calculating...',
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();
}
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>
}))
})
</script>
@endif
</div>
</div>

4
resources/views/livewire/project/application/rollback.blade.php
View File

@@ -3,13 +3,13 @@
<h2>Rollback</h2>
<x-forms.button wire:click='loadImages(true)'>Reload Available Images</x-forms.button>
</div>
<div class="pb-4 ">You can easily rollback to a previously built <span class="text-warning">(local)</span> images
<div class="pb-4 ">You can easily rollback to a previously built (local) images
quickly.</div>
<div wire:target='loadImages'>
<div class="flex flex-wrap">
@forelse ($images as $image)
<div class="w-2/4 p-2">
<div class="rounded shadow-lg bg-coolgray-200">
<div class="rounded shadow-lg bg-coolgray-100">
<div class="p-2">
<div class="">
@if (data_get($image, 'is_current'))

2
resources/views/livewire/project/clone-me.blade.php
View File

@@ -1,7 +1,7 @@
<form>
<div class="flex flex-col">
<h1>Clone</h1>
<div class="subtitle ">Quickly clone all resources to a new project or environment</div>
<div class="subtitle ">Quickly clone all resources to a new project or environment.</div>
</div>
<x-forms.input required id="newName" label="New Name" />
<x-forms.button isHighlighted wire:click="clone('project')" class="mt-4">Clone to a new Project</x-forms.button>

4
resources/views/livewire/project/database/import.blade.php
View File

@@ -1,6 +1,6 @@
<div>
<h2>Import Backup</h2>
<div class="mt-2 mb-4 rounded alert alert-error">
<div class="mt-2 mb-4 rounded alert">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@@ -23,7 +23,7 @@
<x-forms.input class="mb-2" label="Custom Import Command"
wire:model='mariadbRestoreCommand'></x-forms.input>
@endif
<div x-on:livewire-upload-start="isUploading = true; isFinished = false"
<div x-on:livewire-upload-start="isUploading = true; isFinished = false"
x-on:livewire-upload-finish="isUploading = false; isFinished = true"
x-on:livewire-upload-error="isUploading = false"
x-on:livewire-upload-progress="progress = $event.detail.progress">

2
resources/views/livewire/project/database/postgresql/general.blade.php
View File

@@ -82,7 +82,7 @@
<div class="pb-16">
<div class="flex gap-2 pt-4 pb-2">
<h3>Initialization scripts</h3>
<x-forms.button class="btn" onclick="newInitScript.showModal()">+ Add</x-forms.button>
<x-forms.button onclick="newInitScript.showModal()">+ Add</x-forms.button>
</div>
<div class="flex flex-col gap-2">
@forelse(data_get($database,'init_scripts', []) as $script)

4
resources/views/livewire/project/delete-environment.blade.php
View File

@@ -1,3 +1,3 @@
<x-new-modal isErrorButton buttonTitle="Delete Environment" disabled="{{ $disabled }}">
<x-modal-confirmation isErrorButton buttonTitle="Delete Environment" disabled="{{ $disabled }}">
This environment will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>

4
resources/views/livewire/project/delete-project.blade.php
View File

@@ -1,3 +1,3 @@
<x-new-modal isErrorButton buttonTitle="Delete Project" disabled="{{ $disabled }}">
<x-modal-confirmation isErrorButton buttonTitle="Delete Project" disabled="{{ $disabled }}">
This project will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>

11
resources/views/livewire/project/index.blade.php
View File

@@ -2,10 +2,17 @@
<div class="flex gap-2">
<h1>Projects</h1>
@if ($servers > 0)
<x-forms.button onclick="newEmptyProject.showModal()">+ Add</x-forms.button>
<livewire:project.add-empty />
<x-slide-over>
<x-slot:title>New Project</x-slot:title>
<x-slot:content>
<livewire:project.add-empty />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
@endif
</div>
<div class="subtitle">All your projects.</div>
<div class="grid gap-2 lg:grid-cols-2">
@if ($servers === 0)
<div>

16
resources/views/livewire/project/new/select.blade.php
View File

@@ -10,13 +10,13 @@
</div>
</div>
<div class="pb-4 ">Deploy resources, like Applications, Databases, Services...</div>
<div class="flex flex-col gap-4 pt-10 sm:px-20">
<div class="flex flex-col gap-4 pt-10">
@if ($current_step === 'type')
<ul class="pb-10 steps">
{{-- <ul class="pb-10 steps">
<li class="step step-secondary">Select Resource Type</li>
<li class="step">Select a Server</li>
<li class="step">Select a Destination</li>
</ul>
</ul> --}}
<h2>Applications</h2>
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
<x-resource-view wire="setType('public')">
@@ -167,7 +167,7 @@
<h2 class="py-4">Services</h2>
<x-forms.button wire:click="loadServices('force')">Reload List</x-forms.button>
<input
class="w-full text-white rounded input input-sm bg-coolgray-200 disabled:bg-coolgray-200/50 disabled:border-none placeholder:text-coolgray-500 read-only:text-neutral-500 read-only:bg-coolgray-200/50"
class="input"
wire:model.live.debounce.200ms="search" autofocus placeholder="Search...">
</div>
<div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
@@ -254,11 +254,11 @@
companies, and use of them does not imply any affiliation or endorsement.</div>
@endif
@if ($current_step === 'servers')
<ul class="pb-10 steps">
{{-- <ul class="pb-10 steps">
<li class="step step-secondary">Select Resource Type</li>
<li class="step step-secondary">Select a Server</li>
<li class="step">Select a Destination</li>
</ul>
</ul> --}}
{{-- @if ($isDatabase)
<div class="flex items-center justify-center pt-4">
@@ -295,11 +295,11 @@
@endif --}}
@endif
@if ($current_step === 'destinations')
<ul class="pb-10 steps">
{{-- <ul class="pb-10 steps">
<li class="step step-secondary">Select Resource Type</li>
<li class="step step-secondary">Select a Server</li>
<li class="step step-secondary">Select a Destination</li>
</ul>
</ul> --}}
<div class="flex flex-col justify-center gap-4 text-left xl:flex-row xl:flex-wrap">
@if ($server->isSwarm())

8
resources/views/livewire/project/resource/index.blade.php
View File

@@ -3,15 +3,15 @@
<div class="flex items-center gap-2">
<h1>Resources</h1>
@if ($environment->isEmpty())
<a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
<a class="button"
href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
Clone
</a>
@else
<a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }} "
class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation">+
class="button">+
New</a>
<a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
<a class="button"
href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
Clone
</a>
@@ -45,7 +45,7 @@
class="items-center justify-center box">+ Add New Resource</a>
@else
<div x-data="searchComponent()">
<x-forms.input autofocus="true" placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
<x-forms.input autofocus placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
<div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
<template x-for="item in filteredApplications" :key="item.id">
<span>

18
resources/views/livewire/project/service/storage.blade.php
View File

@@ -11,13 +11,17 @@
helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
volume
name, example: <span class='text-helper'>-pr-1</span>" />
<x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
<livewire:project.shared.storages.add :uuid="$resource->uuid" />
<x-slide-over>
<x-slot:title>New Persistent Storage</x-slot:title>
<x-slot:content>
<livewire:project.shared.storages.add :uuid="$resource->uuid" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+ Add</button>
</x-slide-over>
{{-- <x-forms.button onclick="newStorage.showModal()">+ Add</x-forms.button> --}}
</div>
<div class="pb-4">Persistent storage to preserve data between deployments.</div>
@if (
$resource->persistentStorages()->get()->count() === 0 &&
$resource->fileStorages()->get()->count() == 0)
@if ($resource->persistentStorages()->get()->count() === 0 && $resource->fileStorages()->get()->count() == 0)
<div>No storage found.</div>
@else
@if ($resource->persistentStorages()->get()->count() > 0)
@@ -33,9 +37,7 @@
@endif
@endif
@else
@if (
$resource->persistentStorages()->get()->count() > 0 ||
$resource->fileStorages()->get()->count() > 0)
@if ($resource->persistentStorages()->get()->count() > 0 || $resource->fileStorages()->get()->count() > 0)
<h3 class="pt-4">{{ Str::headline($resource->name) }} </h3>
@endif
@if ($resource->persistentStorages()->get()->count() > 0)

4
resources/views/livewire/project/shared/danger.blade.php
View File

@@ -5,7 +5,7 @@
<div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming
back!
</div>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This resource will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>

4
resources/views/livewire/project/shared/destination.blade.php
View File

@@ -55,12 +55,12 @@
<x-forms.button isError
wire:click="stop('{{ data_get($destination, 'server.id') }}')">Stop</x-forms.button>
@endif
<x-new-modal
<x-modal-confirmation
action="removeServer({{ data_get($destination, 'id') }},{{ data_get($destination, 'server.id') }})"
isErrorButton buttonTitle="Remove Server">
This will stop the running application in this server and remove it as a deployment
destination.<br><br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>
@endforeach

12
resources/views/livewire/project/shared/environment-variable/show.blade.php
View File

@@ -39,10 +39,10 @@
@endif
<div class="flex gap-2">
@if ($isLocked)
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
You will delete environment variable <span
class="font-bold text-warning">{{ $env->key }}</span>.
</x-new-modal>
</x-modal-confirmation>
@else
@if ($isDisabled)
<x-forms.button disabled type="submit">
@@ -51,10 +51,10 @@
<x-forms.button wire:click='lock'>
Lock
</x-forms.button>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
You will delete environment variable <span
class="font-bold text-warning">{{ $env->key }}</span>.
</x-new-modal>
</x-modal-confirmation>
@else
<x-forms.button type="submit">
Update
@@ -62,10 +62,10 @@
<x-forms.button wire:click='lock'>
Lock
</x-forms.button>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
You will delete environment variable <span
class="font-bold text-warning">{{ $env->key }}</span>.
</x-new-modal>
</x-modal-confirmation>
@endif
@endif
</div>

2
resources/views/livewire/project/shared/execute-container-command.blade.php
View File

@@ -50,7 +50,7 @@
@endif
</div>
</div>
<div class="container w-full pt-10 mx-auto">
<div class="w-full pt-10 mx-auto">
<livewire:activity-monitor header="Command output" />
</div>
</div>

8
resources/views/livewire/project/shared/resource-operations.blade.php
View File

@@ -11,7 +11,7 @@
<div>
<div class="grid grid-cols-1 gap-2 pb-4 lg:grid-cols-4">
@foreach ($server->destinations() as $destination)
<x-new-modal action="cloneTo({{ data_get($destination, 'id') }})">
<x-modal-confirmation action="cloneTo({{ data_get($destination, 'id') }})">
<x:slot name="content">
<div class="flex flex-col gap-2 box">
<div class="font-bold text-white">{{ $server->name }}</div>
@@ -19,7 +19,7 @@
</div>
</x:slot>
<div>You are about to clone this resource.</div>
</x-new-modal>
</x-modal-confirmation>
@endforeach
</div>
</div>
@@ -37,7 +37,7 @@
@forelse ($projects as $project)
<div class="flex flex-row flex-wrap gap-2">
@foreach ($project->environments as $environment)
<x-new-modal action="moveTo({{ data_get($environment, 'id') }})">
<x-modal-confirmation action="moveTo({{ data_get($environment, 'id') }})">
<x:slot name="content">
<div class="flex flex-col gap-2 box">
<div class="font-bold text-white">{{ $project->name }}</div>
@@ -45,7 +45,7 @@
</div>
</x:slot>
<div>You are about to move this resource.</div>
</x-new-modal>
</x-modal-confirmation>
@endforeach
</div>
@empty

4
resources/views/livewire/project/shared/scheduled-task/show.blade.php
View File

@@ -13,9 +13,9 @@
<x-forms.button type="submit">
Save
</x-forms.button>
<x-new-modal isErrorButton buttonTitle="Delete Scheduled Task">
<x-modal-confirmation isErrorButton buttonTitle="Delete Scheduled Task">
You will delete scheduled task <span class="font-bold text-warning">{{ $task->name }}</span>.
</x-new-modal>
</x-modal-confirmation>
</div>
</div>
<div class="flex w-full gap-2">

46
resources/views/livewire/project/shared/storages/add.blade.php
View File

@@ -1,28 +1,18 @@
<dialog id="newStorage" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
<h3 class="text-lg font-bold">Add Storage Volume</h3>
@if ($isSwarm)
<h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you would like to use a persistent volumes.</h5>
@endif
<x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name." />
@if ($isSwarm)
<x-forms.input placeholder="/root" id="host_path" label="Source Path" required helper="Directory on the host system." />
@else
<x-forms.input placeholder="/root" id="host_path" label="Source Path" helper="Directory on the host system." />
@endif
<x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required helper="Directory inside the container." />
<x-forms.button type="submit">
Save
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
<script>
document.addEventListener('livewire:initialized', () => {
Livewire.on('closeStorageModal', () => {
document.getElementById('newStorage').close()
})
})
</script>
</dialog>
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
@if ($isSwarm)
<h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you would
like to use a persistent volumes.</h5>
@endif
<x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name." />
@if ($isSwarm)
<x-forms.input placeholder="/root" id="host_path" label="Source Path" required
helper="Directory on the host system." />
@else
<x-forms.input placeholder="/root" id="host_path" label="Source Path" helper="Directory on the host system." />
@endif
<x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required
helper="Directory inside the container." />
<x-forms.button type="submit" @click="slideOverOpen=false">
Save
</x-forms.button>
</form>

4
resources/views/livewire/project/shared/storages/show.blade.php
View File

@@ -24,12 +24,12 @@
<x-forms.button type="submit">
Update
</x-forms.button>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This storage will be deleted <span class="font-bold text-warning">{{ $storage->name }}</span>. It
is
not
reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>
@endif
</form>

7
resources/views/livewire/project/shared/webhooks.blade.php
View File

@@ -9,7 +9,7 @@
helper="See details in our <a target='_blank' class='text-white underline' href='https://coolify.io/docs/api/authentication'>documentation</a>."
label="Deploy Webhook (auth required)" id="deploywebhook"></x-forms.input>
</div>
@if ($resource->type() !== 'service')
@if ($resource->type() === 'application')
<div>
<h3>Manual Git Webhooks</h3>
@if ($githubManualWebhook && $gitlabManualWebhook)
@@ -35,7 +35,10 @@
</div>
<div class="flex gap-2">
<x-forms.input readonly label="Bitbucket" id="bitbucketManualWebhook"></x-forms.input>
<x-forms.input type="password" helper="Need to set a secret to be able to use this webhook. It should match with the secret in Bitbucket." label="Bitbucket Webhook Secret" id="resource.manual_webhook_secret_bitbucket"></x-forms.input>
<x-forms.input type="password"
helper="Need to set a secret to be able to use this webhook. It should match with the secret in Bitbucket."
label="Bitbucket Webhook Secret"
id="resource.manual_webhook_secret_bitbucket"></x-forms.input>
</div>
<x-forms.button type="submit">Save</x-forms.button>
</form>

12
resources/views/livewire/project/show.blade.php
View File

@@ -1,11 +1,17 @@
<div>
<div class="flex items-center gap-2">
<h1>Environments</h1>
<x-forms.button class="btn" onclick="newEnvironment.showModal()">+ Add</x-forms.button>
<livewire:project.add-environment :project="$project" />
<x-slide-over>
<x-slot:title>New Environment</x-slot:title>
<x-slot:content>
<livewire:project.add-environment :project="$project" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<livewire:project.delete-project :disabled="$project->resource_count() > 0" :project_id="$project->id" />
</div>
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}</div>
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
<div class="grid gap-2 lg:grid-cols-2">
@forelse ($project->environments as $environment)
<div class="gap-2 border border-transparent cursor-pointer box group" x-data

2
resources/views/livewire/run-command.blade.php
View File

@@ -13,7 +13,7 @@
<x-forms.button type="submit">Execute Command
</x-forms.button>
</form>
<div class="container w-full pt-10 mx-auto">
<div class="w-full pt-10 mx-auto">
<livewire:activity-monitor header="Command output" />
</div>
</div>

2
resources/views/livewire/security/api-tokens.blade.php
View File

@@ -12,7 +12,7 @@
<x-forms.button type="submit">Create New Token</x-forms.button>
</form>
@if (session()->has('token'))
<div class="pb-4 font-bold text-warning">Please copy this token now. For your security, it won't be shown again.
<div class="py-4 font-bold text-warning">Please copy this token now. For your security, it won't be shown again.
</div>
<div class="pb-4 font-bold text-white"> {{ session('token') }}</div>
@endif

4
resources/views/livewire/security/private-key/create.blade.php
View File

@@ -1,6 +1,6 @@
<div>
<h2>Private Key</h2>
<div class="subtitle ">Private Keys are used to connect to your servers without passwords.</div>
<h1>Private Key</h1>
<div class="subtitle">Private Keys are used to connect to your servers without passwords.</div>
<x-forms.button class="mb-4" wire:click="generateNewKey">Generate new SSH key for me</x-forms.button>
<form class="flex flex-col gap-2" wire:submit='createPrivateKey'>
<div class="flex gap-2">

4
resources/views/livewire/security/private-key/show.blade.php
View File

@@ -8,9 +8,9 @@
Save
</x-forms.button>
@if (data_get($private_key, 'id') > 0)
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This private key will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@endif
</div>
<x-forms.input id="private_key.name" label="Name" required />

8
resources/views/livewire/server/delete.blade.php
View File

@@ -8,13 +8,13 @@
</div>
@if ($server->definedResources()->count() > 0)
<div class="pb-2 text-red-500">You need to delete all resources before deleting this server.</div>
<x-new-modal disabled isErrorButton buttonTitle="Delete">
<x-modal-confirmation disabled isErrorButton buttonTitle="Delete">
This server will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@else
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This server will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@endif
@endif
</div>

4
resources/views/livewire/server/form.blade.php
View File

@@ -3,11 +3,11 @@
<div class="flex gap-2">
<h2>General</h2>
@if ($server->id === 0)
<x-new-modal buttonTitle="Save" title="Change Localhost" action="submit">
<x-modal-confirmation buttonTitle="Save" title="Change Localhost" action="submit">
You could lose a lot of functionalities if you change the server details of the server where Coolify
is
running on.<br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@else
<x-forms.button type="submit">Save</x-forms.button>
@if ($server->isFunctional())

4
resources/views/livewire/server/index.blade.php
View File

@@ -2,9 +2,11 @@
<div class="flex items-start gap-2">
<h1>Servers</h1>
<a class="text-white hover:no-underline" href="{{ route('server.create') }}">
<x-forms.button class="btn">+ Add</x-forms.button>
<x-forms.button >+ Add</x-forms.button>
</a>
</div>
<div class="subtitle">All your projects.</div>
<div class="grid gap-2 lg:grid-cols-2">
@forelse ($servers as $server)
<a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"

180
resources/views/livewire/server/log-drains.blade.php
View File

@@ -1,69 +1,70 @@
<div>
<x-server.navbar :server="$server" :parameters="$parameters" />
<h2>Log Drains</h2>
<div class="pb-4">Sends service logs to 3rd party tools.</div>
<div class="flex flex-col gap-4 pt-4">
<div class="p-4 border border-coolgray-500">
<form wire:submit='submit("newrelic")' class="flex flex-col">
<h3>New Relic</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("newrelic")'
id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
</div>
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
@if ($server->isLogDrainEnabled())
<x-forms.input disabled type="password" required
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
<x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
placeholder="https://log-api.eu.newrelic.com/log/v1"
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
label="Endpoint" />
@else
<x-forms.input type="password" required id="server.settings.logdrain_newrelic_license_key"
label="License Key" />
<x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
placeholder="https://log-api.eu.newrelic.com/log/v1"
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
label="Endpoint" />
@endif
@if ($server->isFunctional())
<h2>Log Drains</h2>
<div class="pb-4">Sends service logs to 3rd party tools.</div>
<div class="flex flex-col gap-4 pt-4">
<div class="p-4 border border-coolgray-500">
<form wire:submit='submit("newrelic")' class="flex flex-col">
<h3>New Relic</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("newrelic")'
id="server.settings.is_logdrain_newrelic_enabled" label="Enabled" />
</div>
</div>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
@if ($server->isLogDrainEnabled())
<x-forms.input disabled type="password" required
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
<x-forms.input disabled required id="server.settings.logdrain_newrelic_base_uri"
placeholder="https://log-api.eu.newrelic.com/log/v1"
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
label="Endpoint" />
@else
<x-forms.input type="password" required
id="server.settings.logdrain_newrelic_license_key" label="License Key" />
<x-forms.input required id="server.settings.logdrain_newrelic_base_uri"
placeholder="https://log-api.eu.newrelic.com/log/v1"
helper="For EU use: https://log-api.eu.newrelic.com/log/v1<br>For US use: https://log-api.newrelic.com/log/v1"
label="Endpoint" />
@endif
</div>
</div>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
<h3>Axiom</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
label="Enabled" />
</div>
<form wire:submit='submit("axiom")' class="flex flex-col">
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
@if ($server->isLogDrainEnabled())
<x-forms.input disabled type="password" required id="server.settings.logdrain_axiom_api_key"
label="API Key" />
<x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
label="Dataset Name" />
@else
<x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
label="API Key" />
<x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
label="Dataset Name" />
@endif
<h3>Axiom</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("axiom")' id="server.settings.is_logdrain_axiom_enabled"
label="Enabled" />
</div>
<form wire:submit='submit("axiom")' class="flex flex-col">
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
@if ($server->isLogDrainEnabled())
<x-forms.input disabled type="password" required
id="server.settings.logdrain_axiom_api_key" label="API Key" />
<x-forms.input disabled required id="server.settings.logdrain_axiom_dataset_name"
label="Dataset Name" />
@else
<x-forms.input type="password" required id="server.settings.logdrain_axiom_api_key"
label="API Key" />
<x-forms.input required id="server.settings.logdrain_axiom_dataset_name"
label="Dataset Name" />
@endif
</div>
</div>
</div>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
{{-- <h3>Highlight.io</h3>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
{{-- <h3>Highlight.io</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("highlight")'
id="server.settings.is_logdrain_highlight_enabled" label="Enabled" />
@@ -81,33 +82,36 @@
</x-forms.button>
</div>
</form> --}}
<h3>Custom FluentBit configuration</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("custom")' id="server.settings.is_logdrain_custom_enabled"
label="Enabled" />
<h3>Custom FluentBit configuration</h3>
<div class="w-32">
<x-forms.checkbox instantSave='instantSave("custom")'
id="server.settings.is_logdrain_custom_enabled" label="Enabled" />
</div>
<form wire:submit='submit("custom")' class="flex flex-col">
<div class="flex flex-col gap-4">
@if ($server->isLogDrainEnabled())
<x-forms.textarea disabled rows="6" required
id="server.settings.logdrain_custom_config" label="Custom FluentBit Configuration" />
<x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
label="Custom Parser Configuration" />
@else
<x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
label="Custom FluentBit Configuration" />
<x-forms.textarea id="server.settings.logdrain_custom_config_parser"
label="Custom Parser Configuration" />
@endif
</div>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
</div>
<form wire:submit='submit("custom")' class="flex flex-col">
<div class="flex flex-col gap-4">
@if ($server->isLogDrainEnabled())
<x-forms.textarea disabled rows="6" required id="server.settings.logdrain_custom_config"
label="Custom FluentBit Configuration" />
<x-forms.textarea disabled id="server.settings.logdrain_custom_config_parser"
label="Custom Parser Configuration" />
@else
<x-forms.textarea rows="6" required id="server.settings.logdrain_custom_config"
label="Custom FluentBit Configuration" />
<x-forms.textarea id="server.settings.logdrain_custom_config_parser"
label="Custom Parser Configuration" />
@endif
</div>
<div class="flex justify-end gap-4 pt-6">
<x-forms.button type="submit">
Save
</x-forms.button>
</div>
</form>
</div>
</div>
@else
<div>Server is not validated. Validate first.</div>
@endif
</div>

7
resources/views/livewire/server/new/by-ip.blade.php
View File

@@ -2,8 +2,7 @@
@if ($limit_reached)
<x-limit-reached name="servers" />
@else
<h1>Create a new Server</h1>
<div class="subtitle">Servers are the main blocks of your infrastructure.</div>
<h1 class="title">New Server</h1>
<form class="flex flex-col gap-2" wire:submit='submit'>
<div class="flex gap-2">
<x-forms.input id="name" label="Name" required />
@@ -29,8 +28,8 @@
<x-forms.checkbox instantSave type="checkbox" id="is_build_server" label="Use it as a build server?" />
</div>
<div class="w-96">
<h3 class="pt-6">Swarm Support</h3>
<div> Swarm support is experimental. Read the docs <a class='text-white'
<h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
<div class="pb-4">Read the docs <a class='text-white'
href='https://coolify.io/docs/docker/swarm#deploy-with-persistent-storage'
target='_blank'>here</a>.</div>
@if ($is_swarm_worker || $is_build_server)

279
resources/views/livewire/server/resources.blade.php
View File

@@ -1,142 +1,165 @@
<div>
<x-server.navbar :server="$server" :parameters="$parameters" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
<div class="flex flex-col gap-4 xl:w-32">
<a :class="activeTab === 'managed' && 'text-white'"
@click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
<a :class="activeTab === 'unmanaged' && 'text-white'"
@click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
</div>
<div class="w-full pl-8">
<div x-cloak x-show="activeTab === 'managed'" class="h-full">
<div class="flex flex-col">
<div class="flex gap-2">
<h2>Resources</h2>
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
</div>
<div class="pb-4 title">Here you can find all resources that are managed by Coolify.</div>
</div>
<div class="flex flex-col">
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full">
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-coolgray-400">
<thead>
<tr class="text-neutral-500">
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Project
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Environment</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
</th>
</tr>
</thead>
<tbody class="divide-y divide-coolgray-400">
@forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource->project(), 'name') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'environment.name') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap"><a class=""
href="{{ $resource->link() }}">{{ $resource->name }}
<x-internal-link /></a>
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ str($resource->type())->headline() }}</td>
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
@if ($resource->type() === 'service')
<x-status.services :service="$resource" :showRefreshButton="false" />
@else
<x-status.index :resource="$resource" :showRefreshButton="false" />
@endif
</td>
</tr>
@empty
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@if ($server->isFunctional())
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
<div class="flex flex-col gap-4 xl:w-32">
<a :class="activeTab === 'managed' && 'text-white'"
@click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
<a :class="activeTab === 'unmanaged' && 'text-white'"
@click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'"
href="#">Unmanaged</a>
</div>
<div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
<div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
<div class="flex gap-2">
<h2>Resources</h2>
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
</div>
<div class="pb-4 title">Here you can find all other containers running on the server.</div>
</div>
@if ($unmanagedContainers->count() > 0)
<div class="w-full pl-8">
<div x-cloak x-show="activeTab === 'managed'" class="h-full">
<div class="flex flex-col">
<div class="flex gap-2">
<h2>Resources</h2>
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
</div>
<div class="subtitle">Here you can find all resources that are managed by Coolify.</div>
</div>
@if ($server->definedResources()->count() > 0)
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full">
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-coolgray-400">
<thead>
<tr class="text-neutral-500">
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Image
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Status
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Action
</th>
</tr>
</thead>
<tbody class="divide-y divide-coolgray-400">
@forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'Names') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'Image') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'State') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
@if (data_get($resource, 'State') === 'running')
<x-forms.button
wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
<x-forms.button isError
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
@elseif (data_get($resource, 'State') === 'exited')
<x-forms.button
wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
@elseif (data_get($resource, 'State') === 'restarting')
<x-forms.button
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
@endif
</td>
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full">
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-coolgray-400">
<thead>
<tr class="text-neutral-500">
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Project
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Environment</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Name
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Type
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Status
</th>
</tr>
@empty
@endforelse
</tbody>
</table>
</thead>
<tbody class="divide-y divide-coolgray-400">
@forelse ($server->definedResources()->sortBy('name',SORT_NATURAL) as $resource)
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource->project(), 'name') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'environment.name') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap"><a
class=""
href="{{ $resource->link() }}">{{ $resource->name }}
<x-internal-link /></a>
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ str($resource->type())->headline() }}</td>
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
@if ($resource->type() === 'service')
<x-status.services :service="$resource"
:showRefreshButton="false" />
@else
<x-status.index :resource="$resource"
:showRefreshButton="false" />
@endif
</td>
</tr>
@empty
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@else
<div>No resources found.</div>
@endif
</div>
<div x-cloak x-show="activeTab === 'unmanaged'" class="h-full">
<div class="flex flex-col" x-init="$wire.loadUnmanagedContainers()">
<div class="flex gap-2">
<h2>Resources</h2>
<x-forms.button wire:click="refreshStatus">Refresh</x-forms.button>
</div>
<div class="subtitle">Here you can find all other containers running on the server.</div>
</div>
@endif
@if ($unmanagedContainers->count() > 0)
<div class="flex flex-col">
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full">
<div class="overflow-hidden">
<table class="min-w-full divide-y divide-coolgray-400">
<thead>
<tr class="text-neutral-500">
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Name
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Image
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Status
</th>
<th class="px-5 py-3 text-xs font-medium text-left uppercase">
Action
</th>
</tr>
</thead>
<tbody class="divide-y divide-coolgray-400">
@forelse ($unmanagedContainers->sortBy('name',SORT_NATURAL) as $resource)
<tr class="text-white bg-coolblack hover:bg-coolgray-100">
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'Names') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'Image') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($resource, 'State') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
@if (data_get($resource, 'State') === 'running')
<x-forms.button
wire:click="restartUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Restart</x-forms.button>
<x-forms.button isError
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
@elseif (data_get($resource, 'State') === 'exited')
<x-forms.button
wire:click="startUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Start</x-forms.button>
@elseif (data_get($resource, 'State') === 'restarting')
<x-forms.button
wire:click="stopUnmanaged('{{ data_get($resource, 'ID') }}')"
wire:key="{{ data_get($resource, 'ID') }}">Stop</x-forms.button>
@endif
</td>
</tr>
@empty
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@else
<div>No resources found.</div>
@endif
</div>
</div>
</div>
</div>
@else
<div>Server is not validated. Validate first.</div>
@endif
</div>

10
resources/views/livewire/settings/configuration.blade.php
View File

@@ -11,7 +11,9 @@
<div class="flex flex-col gap-2 pt-4">
<div class="flex items-end gap-2">
<x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io" />
<x-forms.input id="settings.custom_dns_servers" label="DNS Servers" helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers." placeholder="1.1.1.1,8.8.8.8" />
<x-forms.input id="settings.custom_dns_servers" label="DNS Servers"
helper="DNS servers for validation FQDNS againts. A comma separated list of DNS servers."
placeholder="1.1.1.1,8.8.8.8" />
<x-forms.checkbox instantSave id="is_dns_validation_enabled" label="Validate DNS settings?" />
</div>
@@ -22,12 +24,12 @@
</div>
</form>
<h2 class="pt-6">Advanced</h2>
<div class="flex flex-col py-6 text-right w-80">
@if(!is_null(env('AUTOUPDATE', null)))
<div class="text-right w-80">
@if (!is_null(env('AUTOUPDATE', null)))
<x-forms.checkbox instantSave helper="AUTOUPDATE is set in .env file, you need to modify it there." disabled
id="is_auto_update_enabled" label="Auto Update Coolify" />
@else
<x-forms.checkbox instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
<x-forms.checkbox instantSave id="is_auto_update_enabled" label="Auto Update Coolify" />
@endif
<x-forms.checkbox instantSave id="is_registration_enabled" label="Registration Allowed" />
<x-forms.checkbox instantSave id="do_not_track" label="Do Not Track" />

28
resources/views/livewire/settings/email.blade.php
View File

@@ -1,15 +1,4 @@
<div>
<dialog id="sendTestEmail" class="modal">
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
<x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
<x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification">
Send Email
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<div class="flex items-center gap-2">
<h2>Transactional Email</h2>
</div>
@@ -22,13 +11,16 @@
<x-forms.button type="submit">
Save
</x-forms.button>
@if (isEmailEnabled($settings) &&
auth()->user()->isAdminFromSession() &&
isTestEmailEnabled($settings))
<x-forms.button onclick="sendTestEmail.showModal()"
class="text-white normal-case btn btn-xs no-animation btn-primary">
Send Test Email
</x-forms.button>
@if (isEmailEnabled($settings) && auth()->user()->isAdminFromSession() && isTestEmailEnabled($settings))
<x-modal-input buttonTitle="Send Test Email" title="Send Test Email">
<form wire:submit='submit' class="flex flex-col gap-2">
<x-forms.input placeholder="test@example.com" id="emails" label="Recipients" required />
<x-forms.button onclick="sendTestEmail.close()" wire:click="sendTestNotification"
@click="modalOpen=false">
Send Email
</x-forms.button>
</form>
</x-modal-input>
@endif
</div>
</form>

12
resources/views/livewire/source/github/change.blade.php
View File

@@ -13,14 +13,14 @@
</x-forms.button>
</a>
@endif
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This source will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>
</div>
<div class="subtitle">Your Private GitHub App for private repositories.</div>
@if (!data_get($github_app, 'installation_id'))
<div class="mb-10 rounded alert alert-warning">
<div class="mb-10 rounded alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -148,12 +148,12 @@
<div class="flex items-center gap-2 pb-4">
<h1>GitHub App</h1>
<div class="flex gap-2">
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This source will be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>
</div>
<div class="mb-10 rounded alert alert-warning">
<div class="mb-10 rounded alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

2
resources/views/livewire/subscription/index.blade.php
View File

@@ -14,7 +14,7 @@
class="text-warning">{{ session('currentTeam.name') }}</span></span>
</div>
@if (request()->query->get('cancelled'))
<div class="mb-6 rounded alert alert-error">
<div class="mb-6 rounded alert">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

79
resources/views/livewire/tags/index.blade.php
View File

@@ -1,14 +1,81 @@
<div>
<h1>Tags</h1>
<div class="flex flex-col gap-2 pb-6 ">
<div>Available tags: </div>
<div class="subtitle">Tags help you to perform actions on multiple resources.</div>
<div class="flex flex-wrap gap-2">
@forelse ($tags as $oneTag)
<a class="flex items-center justify-center h-6 px-2 text-white min-w-14 w-fit hover:no-underline hover:bg-coolgray-200 bg-coolgray-100"
href="{{ route('tags.show', ['tag_name' => $oneTag->name]) }}">{{ $oneTag->name }}</a>
@empty
@if ($tags->count() === 0)
<div>No tags yet defined yet. Go to a resource and add a tag there.</div>
@endforelse
@else
<x-forms.select wire:model.live="tag">
<option value="null" disabled selected>Select a tag</option>
@foreach ($tags as $oneTag)
<option value="{{ $oneTag->name }}">{{ $oneTag->name }}</option>
@endforeach
</x-forms.select>
@if ($tag)
<div>
<div class="flex items-end gap-2 ">
<div class="w-[500px]">
<x-forms.input readonly label="Deploy Webhook URL" id="webhook" />
</div>
<x-modal-confirmation isHighlighted buttonTitle="Redeploy All" action="redeploy_all">
All resources will be redeployed.
</x-modal-confirmation>
</div>
<div class="grid grid-cols-1 gap-2 pt-4 lg:grid-cols-2 xl:grid-cols-3">
@foreach ($applications as $application)
<a href="{{ $application->link() }}" class="flex flex-col box group">
<span
class="font-bold text-white">{{ $application->project()->name }}/{{ $application->environment->name }}</span>
<span class="text-white ">{{ $application->name }}</span>
<span class="description">{{ $application->description }}</span>
</a>
@endforeach
@foreach ($services as $service)
<a href="{{ $service->link() }}" class="flex flex-col box group">
<span
class="font-bold text-white">{{ $service->project()->name }}/{{ $service->environment->name }}</span>
<span class="text-white ">{{ $service->name }}</span>
<span class="description">{{ $service->description }}</span>
</a>
@endforeach
</div>
<div class="flex items-center gap-2">
<h3 class="py-4">Deployments</h3>
@if (count($deployments_per_tag_per_server) > 0)
<x-loading />
@endif
</div>
<div wire:poll.1000ms="get_deployments" class="grid grid-cols-1">
@forelse ($deployments_per_tag_per_server as $server_name => $deployments)
<h4 class="py-4">{{ $server_name }}</h4>
<div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
@foreach ($deployments as $deployment)
<a href="{{ data_get($deployment, 'deployment_url') }}"
@class([
'gap-2 cursor-pointer box group border-l-2 border-dotted',
'border-coolgray-500' => data_get($deployment, 'status') === 'queued',
'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
])>
<div class="flex flex-col mx-6">
<div class="font-bold text-white">
{{ data_get($deployment, 'application_name') }}
</div>
<div class="description">
{{ str(data_get($deployment, 'status'))->headline() }}
</div>
</div>
<div class="flex-1"></div>
</a>
@endforeach
</div>
@empty
<div>No deployments running.</div>
@endforelse
</div>
</div>
@endif
@endif
</div>
</div>
</div>

8
resources/views/livewire/tags/show.blade.php
View File

@@ -5,11 +5,11 @@
</div>
</div>
<div class="flex flex-col gap-2 pb-6 ">
<div>Available tags: </div>
<div>Available tags</div>
<div class="flex flex-wrap gap-2 ">
@forelse ($tags as $oneTag)
<a :class="{{ $tag->id == $oneTag->id }} && 'bg-coollabs hover:bg-coollabs-100'"
class="flex items-center justify-center h-6 px-2 text-white min-w-14 w-fit hover:no-underline hover:bg-coolgray-200 bg-coolgray-100"
class="w-64 box"
href="{{ route('tags.show', ['tag_name' => $oneTag->name]) }}">{{ $oneTag->name }}</a>
@empty
<div>No tags yet defined yet. Go to a resource and add a tag there.</div>
@@ -22,9 +22,9 @@
<div class="w-[500px]">
<x-forms.input readonly label="Deploy Webhook URL" id="webhook" />
</div>
<x-new-modal isHighlighted buttonTitle="Redeploy All" action="redeploy_all">
<x-modal-confirmation isHighlighted buttonTitle="Redeploy All" action="redeploy_all">
All resources will be redeployed.
</x-new-modal>
</x-modal-confirmation>
</div>
<div class="grid grid-cols-1 gap-2 pt-4 lg:grid-cols-2 xl:grid-cols-3">
@foreach ($applications as $application)

2
resources/views/livewire/team/create.blade.php
View File

@@ -1,6 +1,6 @@
<div>
<h1>New Team</h1>
<div class="subtitle">Add a new team</div>
<div class="subtitle">Add a new team.</div>
<form class="flex flex-col gap-2" wire:submit='submit'>
<x-forms.input autofocus id="name" label="Name" required />
<x-forms.input id="description" label="Description" />

4
resources/views/livewire/team/index.blade.php
View File

@@ -28,9 +28,9 @@
@else
@if (currentTeam()->isEmpty())
<div class="pb-4">This will delete your team. Beware! There is no coming back!</div>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This team be deleted. It is not reversible. <br>Please think again.
</x-new-modal>
</x-modal-confirmation>
@else
<div>
<div class="pb-4">You need to delete the following resources to be able to delete the team:</div>

2
resources/views/livewire/team/member.blade.php
View File

@@ -11,7 +11,7 @@
<td class="px-5 py-4 text-sm whitespace-nowrap">
{{ data_get($member, 'pivot.role') }}
</td>
<td class="px-5 py-4 text-sm whitespace-nowrap">
<td class="flex gap-2 px-5 py-4 text-sm whitespace-nowrap">
@if (auth()->user()->isAdminFromSession())
@if ($member->id !== auth()->user()->id)
@if (auth()->user()->isOwner())

4
resources/views/livewire/team/storage/create.blade.php
View File

@@ -1,6 +1,6 @@
<div>
<h1>Create a new S3 Storage</h1>
<div class="subtitle">S3 Storage used to save backups / files</div>
<h1>New S3 Storage</h1>
<div class="subtitle">S3 Storage used to save backups / files.</div>
<form class="flex flex-col gap-2" wire:submit='submit'>
<div class="flex gap-2">
<x-forms.input label="Name" id="name" />

4
resources/views/livewire/team/storage/form.blade.php
View File

@@ -16,9 +16,9 @@
<x-forms.button wire:click="test_s3_connection">
Validate Connection
</x-forms.button>
<x-new-modal isErrorButton buttonTitle="Delete">
<x-modal-confirmation isErrorButton buttonTitle="Delete">
This storage will be deleted. It is not reversible. Your data won't be touched!<br>Please think again.
</x-new-modal>
</x-modal-confirmation>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="storage.name" />

2
resources/views/livewire/team/storage/index.blade.php
View File

@@ -4,7 +4,7 @@
->currentTeam()" />
<div class="flex items-start gap-2">
<h2 class="pb-4">S3 Storages</h2>
<a class="text-white hover:no-underline" href="/team/storages/new"> <x-forms.button class="btn">+ Add
<a class="text-white hover:no-underline" href="/team/storages/new"> <x-forms.button >+ Add
</x-forms.button></a>
</div>
<div class="grid gap-2 lg:grid-cols-2">