tiennm99/coolify
1
0 Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-10-15 14:16:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into fix_breadcrumb

Browse Source
This commit is contained in:
Andras Bacsai authored and GitHub committed 2025-12-15 15:51:49 +01:00
2 parents 7af5d7683a 924812d7cd
commit 651e19fefe
1346 files changed
+111140 -18823
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/css/app.css
+33 -4
View File
@@ -18,10 +18,23 @@
--color-base: #101010;
--color-warning: #fcd452;
--color-success: #16a34a;
--color-warning-50: #fefce8;
--color-warning-100: #fef9c3;
--color-warning-200: #fef08a;
--color-warning-300: #fde047;
--color-warning-400: #fcd452;
--color-warning-500: #facc15;
--color-warning-600: #ca8a04;
--color-warning-700: #a16207;
--color-warning-800: #854d0e;
--color-warning-900: #713f12;
--color-success: #22C55E;
--color-error: #dc2626;
--color-coollabs-50: #f5f0ff;
--color-coollabs: #6b16ed;
--color-coollabs-100: #7317ff;
--color-coollabs-200: #5a12c7;
--color-coollabs-300: #4a0fa3;
--color-coolgray-100: #181818;
--color-coolgray-200: #202020;
--color-coolgray-300: #242424;
@@ -79,7 +92,7 @@
*/
html,
body {
@apply w-full min-h-full bg-neutral-50 dark:bg-base dark:text-neutral-400;
@apply w-full min-h-full bg-gray-50 dark:bg-base dark:text-neutral-400;
}
body {
@@ -91,11 +104,11 @@ option {
}
button[isError]:not(:disabled) {
@apply text-white bg-red-600 hover:bg-red-700;
@apply text-red-800 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border-red-300 dark:border-red-800 hover:bg-red-300 hover:text-white dark:hover:bg-red-800 dark:hover:text-white;
}
button[isHighlighted]:not(:disabled) {
@apply text-white bg-coollabs hover:bg-coollabs-100;
@apply text-coollabs-200 dark:text-white bg-coollabs-50 dark:bg-coollabs/20 border-coollabs dark:border-coollabs-100 hover:bg-coollabs hover:text-white dark:hover:bg-coollabs-100 dark:hover:text-white;
}
h1 {
@@ -118,6 +131,11 @@ a {
@apply hover:text-black dark:hover:text-white;
}
button:focus-visible,
a:focus-visible {
@apply outline-none ring-2 ring-coollabs dark:ring-warning ring-offset-2 dark:ring-offset-coolgray-100;
}
label {
@apply dark:text-neutral-400;
}
@@ -167,4 +185,15 @@ section {
.lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.log-highlight {
background-color: rgba(234, 179, 8, 0.4);
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.dark .log-highlight {
background-color: rgba(234, 179, 8, 0.3);
}
resources/css/utilities.css
+100 -16
View File
@@ -6,43 +6,123 @@
@apply hidden!;
}
@utility apexcharts-grid-borders {
@apply dark:hidden!;
}
@utility apexcharts-xaxistooltip {
@apply hidden!;
}
@utility apexcharts-tooltip-custom {
@apply bg-white dark:bg-coolgray-100 border border-neutral-200 dark:border-coolgray-300 rounded-lg shadow-lg p-3 text-sm;
min-width: 160px;
}
@utility apexcharts-tooltip-custom-value {
@apply text-neutral-700 dark:text-neutral-300 mb-1;
}
@utility apexcharts-tooltip-value-bold {
@apply font-bold text-black dark:text-white;
}
@utility apexcharts-tooltip-custom-title {
@apply text-xs text-neutral-500 dark:text-neutral-400 font-medium;
}
@utility input-sticky {
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300;
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 dark:bg-coolgray-100 dark:text-white disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40 focus-visible:outline-none;
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #e5e5e5;
&:where(.dark, .dark *) {
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 1px #242424;
}
&:focus-visible {
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 1px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 1px #242424;
}
}
@utility input-sticky-active {
@apply text-black border-2 border-coollabs dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs;
@apply text-black border-2 border-coollabs dark:border-warning dark:text-white focus:bg-neutral-200 dark:focus:bg-coolgray-400 focus:border-coollabs dark:focus:border-warning;
}
/* Focus */
@utility input-focus {
@apply focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300;
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
}
/* input, select before */
@utility input-select {
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 ring-1 ring-inset dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300 disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40 dark:disabled:ring-transparent;
@apply block py-1.5 w-full text-sm text-black rounded-sm border-0 dark:bg-coolgray-100 dark:text-white disabled:bg-neutral-200 disabled:text-neutral-500 dark:disabled:bg-coolgray-100/40;
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;
&:where(.dark, .dark *) {
box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #242424;
}
&:disabled {
box-shadow: none;
}
&:where(.dark, .dark *):disabled {
box-shadow: none;
}
}
/* Readonly */
@utility input {
@apply dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;
@apply input-focus;
@apply dark:read-only:text-neutral-500 dark:read-only:bg-coolgray-100/40 placeholder:text-neutral-300 dark:placeholder:text-neutral-700 read-only:text-neutral-500 read-only:bg-neutral-200;
@apply input-select;
@apply focus-visible:outline-none;
&:focus-visible {
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
}
&:read-only {
box-shadow: none;
}
&:where(.dark, .dark *):read-only {
box-shadow: none;
}
}
@utility select {
@apply w-full;
@apply input-focus;
@apply input-select;
@apply focus-visible:outline-none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000000'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1rem 1rem;
padding-right: 2.5rem;
&:where(.dark, .dark *) {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9'/%3e%3c/svg%3e");
}
&:focus-visible {
box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;
}
&:where(.dark, .dark *):focus-visible {
box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424;
}
}
@utility button {
@apply flex gap-2 justify-center items-center px-2 py-1 text-sm text-black normal-case rounded-sm border outline-0 cursor-pointer bg-neutral-200/50 border-neutral-300 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-500 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300;
@apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
}
@utility alert-success {
@@ -62,11 +142,11 @@
}
@utility dropdown-item {
@apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50;
@apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
}
@utility dropdown-item-no-padding {
@apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50;
@apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
}
@utility badge {
@@ -74,7 +154,7 @@
}
@utility badge-dashboard {
@apply absolute top-0 right-0 w-2.5 h-2.5 rounded-bl-full text-xs font-bold leading-none border border-neutral-200 dark:border-black;
@apply absolute top-1 right-1 w-2.5 h-2.5 rounded-full text-xs font-bold leading-none border border-neutral-200 dark:border-black;
}
@utility badge-success {
@@ -122,7 +202,7 @@
}
@utility navbar-main {
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center;
@apply flex flex-col gap-4 justify-items-start pb-2 border-b-2 border-solid h-fit md:flex-row sm:justify-between dark:border-coolgray-200 border-neutral-200 md:items-center text-neutral-700 dark:text-neutral-400;
}
@utility loading {
@@ -134,21 +214,25 @@
}
@utility box {
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow-sm bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 shadow-sm bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline rounded-sm;
}
@utility box-boarding {
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-coolgray-300 hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black rounded-sm;
}
@utility box-without-bg {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-black;
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-coolgray-300 rounded-sm;
}
@utility box-without-bg-without-border {
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
}
@utility coolbox {
@apply relative flex transition-all duration-150 dark:bg-coolgray-100 bg-white p-2 rounded border border-neutral-200 dark:border-coolgray-400 hover:ring-2 dark:hover:ring-warning hover:ring-coollabs cursor-pointer min-h-[4rem];
}
@utility on-box {
@apply rounded-sm hover:bg-neutral-300 dark:hover:bg-coolgray-500/20;
}
@@ -178,7 +262,7 @@
}
@utility info-helper-popup {
@apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300;
@apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-xs whitespace-normal break-words;
}
@utility buyme {
resources/js/terminal.js
+63
View File
@@ -33,6 +33,9 @@ export function initializeTerminalComponent() {
// Resize handling
resizeObserver: null,
resizeTimeout: null,
// Visibility handling - prevent disconnects when tab loses focus
isDocumentVisible: true,
wasConnectedBeforeHidden: false,
init() {
this.setupTerminal();
@@ -48,6 +51,18 @@ export function initializeTerminalComponent() {
this.sendCommandWhenReady({ command: command });
});
this.$wire.on('terminal-should-focus', () => {
// Wait for terminal to be ready, then focus
const focusWhenReady = () => {
if (this.terminalActive && this.term) {
this.term.focus();
} else {
setTimeout(focusWhenReady, 100);
}
};
focusWhenReady();
});
this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
this.$watch('terminalActive', (active) => {
@@ -80,6 +95,11 @@ export function initializeTerminalComponent() {
}, { once: true });
});
// Handle visibility changes to prevent disconnects when tab loses focus
document.addEventListener('visibilitychange', () => {
this.handleVisibilityChange();
});
window.onresize = () => {
this.resizeTerminal()
};
@@ -353,6 +373,15 @@ export function initializeTerminalComponent() {
this.resizeTerminal();
}, 200);
// Ensure terminal gets focus after connection with multiple attempts
setTimeout(() => {
this.term.focus();
}, 100);
setTimeout(() => {
this.term.focus();
}, 500);
// Notify parent component that terminal is connected
this.$wire.dispatch('terminalConnected');
} else if (event.data === 'unprocessable') {
@@ -430,6 +459,11 @@ export function initializeTerminalComponent() {
},
keepAlive() {
// Skip keepalive when document is hidden to prevent unnecessary disconnects
if (!this.isDocumentVisible) {
return;
}
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.sendMessage({ ping: true });
} else if (this.connectionState === 'disconnected') {
@@ -438,6 +472,35 @@ export function initializeTerminalComponent() {
}
},
handleVisibilityChange() {
const wasVisible = this.isDocumentVisible;
this.isDocumentVisible = !document.hidden;
if (!this.isDocumentVisible) {
// Tab is now hidden - pause heartbeat monitoring to prevent false disconnects
this.wasConnectedBeforeHidden = this.connectionState === 'connected';
if (this.pingTimeoutId) {
clearTimeout(this.pingTimeoutId);
this.pingTimeoutId = null;
}
console.log('[Terminal] Tab hidden, pausing heartbeat monitoring');
} else if (wasVisible === false) {
// Tab is now visible again
console.log('[Terminal] Tab visible, resuming connection management');
if (this.wasConnectedBeforeHidden && this.socket && this.socket.readyState === WebSocket.OPEN) {
// Send immediate ping to verify connection is still alive
this.heartbeatMissed = 0;
this.sendMessage({ ping: true });
this.resetPingTimeout();
} else if (this.wasConnectedBeforeHidden && this.connectionState !== 'connected') {
// Was connected before but now disconnected - attempt reconnection
this.reconnectAttempts = 0;
this.initializeWebSocket();
}
}
},
resetPingTimeout() {
if (this.pingTimeoutId) {
clearTimeout(this.pingTimeoutId);
resources/views/auth/confirm-password.blade.php
+46 -24
View File
@@ -1,29 +1,51 @@
<x-layout-simple>
<div class="flex items-center justify-center h-screen">
<div>
<div class="flex flex-col items-center pb-8">
<div class="text-5xl font-bold tracking-tight text-center dark:text-white">Coolify</div>
{{-- <x-version /> --}}
</div>
<div class="w-96">
<form action="/user/confirm-password" method="POST" class="flex flex-col gap-2">
@csrf
<x-forms.input required type="password" name="password" label="{{ __('input.password') }}" />
<x-forms.button type="submit">{{ __('auth.confirm_password') }}</x-forms.button>
</form>
@if ($errors->any())
<div class="text-xs text-center text-error">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
<p class="text-lg dark:text-neutral-400">
Confirm Your Password
</p>
</div>
<div class="space-y-6">
@if (session('status'))
<div class="p-4 bg-success/10 border border-success rounded-lg">
<p class="text-sm text-success">{{ session('status') }}</p>
</div>
@endif
@if ($errors->any())
<div class="p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
<div class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<div class="flex gap-3">
<svg class="size-5 flex-shrink-0 mt-0.5 text-coollabs dark:text-warning" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm dark:text-neutral-400">
This is a secure area. Please confirm your password before continuing.
</p>
</div>
</div>
@endif
@if (session('status'))
<div class="mb-4 font-medium text-green-600">
{{ session('status') }}
</div>
@endif
<form action="/user/confirm-password" method="POST" class="flex flex-col gap-4">
@csrf
<x-forms.input required type="password" name="password" label="{{ __('input.password') }}" />
<x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
{{ __('auth.confirm_password') }}
</x-forms.button>
</form>
</div>
</div>
</div>
</div>
</section>
</x-layout-simple>
resources/views/auth/forgot-password.blade.php
+79 -33
View File
@@ -1,42 +1,88 @@
<x-layout-simple>
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a class="flex items-center mb-1 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</a> <div class="flex items-center gap-2">
{{ __('auth.forgot_password') }}
</div>
<div
class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
<p class="text-lg dark:text-neutral-400">
{{ __('auth.forgot_password_heading') }}
</p>
</div>
<div class="space-y-6">
@if (session('status'))
<div class="mb-6 p-4 bg-success/10 border border-success rounded-lg">
<div class="flex gap-3">
<svg class="size-5 text-success flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-success">{{ session('status') }}</p>
</div>
</div>
@endif
@if ($errors->any())
<div class="mb-6 p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
@if (is_transactional_emails_enabled())
<form action="/forgot-password" method="POST" class="flex flex-col gap-2">
@csrf
<x-forms.input required type="email" name="email" label="{{ __('input.email') }}" />
<x-forms.button type="submit">{{ __('auth.forgot_password_send_email') }}</x-forms.button>
</form>
@else
<div>Transactional emails are not active on this instance.</div>
<div>See how to set it in our <a class="dark:text-white" target="_blank"
href="{{ config('constants.urls.docs') }}">docs</a>, or how to
manually reset password.
<form action="/forgot-password" method="POST" class="flex flex-col gap-4">
@csrf
<x-forms.input required type="email" name="email" label="{{ __('input.email') }}" />
<x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
{{ __('auth.forgot_password_send_email') }}
</x-forms.button>
</form>
@else
<div class="p-4 bg-warning/10 border border-warning rounded-lg mb-6">
<div class="flex gap-3">
<svg class="size-5 text-warning flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
<div>
<p class="font-bold text-warning mb-2">Email Not Configured</p>
<p class="text-sm dark:text-white text-black mb-2">
Transactional emails are not active on this instance.
</p>
<p class="text-sm dark:text-white text-black">
See how to set it in our <a class="font-bold underline hover:text-coollabs"
target="_blank" href="{{ config('constants.urls.docs') }}">documentation</a>, or
learn how to manually reset your password.
</p>
</div>
</div>
</div>
@endif
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 dark:bg-base text-neutral-500 dark:text-neutral-400">
Remember your password?
</span>
</div>
</div>
@endif
@if ($errors->any())
<div class="text-xs text-center text-error">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
</div>
@endif
@if (session('status'))
<div class="mb-4 text-xs font-medium text-green-600">
{{ session('status') }}
</div>
@endif
<a href="/login"
class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
Back to Login
</a>
</div>
</div>
</div>
</section>
</x-layout-simple>
</x-layout-simple>
resources/views/auth/login.blade.php
+91 -68
View File
@@ -1,79 +1,102 @@
<x-layout-simple>
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</a>
<div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
@if ($errors->any())
<div class="text-center text-error">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
</div>
@endif
<div class="p-6 space-y-4 md:space-y-3 sm:p-8">
<form action="/login" method="POST" class="flex flex-col gap-2">
@csrf
@env('local')
<x-forms.input value="test@example.com" type="email" autocomplete="email" name="email"
required label="{{ __('input.email') }}" />
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
</div>
<x-forms.input value="password" type="password" autocomplete="current-password" name="password"
required label="{{ __('input.password') }}" />
<a href="/forgot-password" class="text-xs">
{{ __('auth.forgot_password') }}?
</a>
@else
<x-forms.input type="email" name="email" autocomplete="email" required
label="{{ __('input.email') }}" />
<x-forms.input type="password" name="password" autocomplete="current-password" required
label="{{ __('input.password') }}" />
<a href="/forgot-password" class="text-xs">
{{ __('auth.forgot_password') }}?
</a>
@endenv
<x-forms.button class="mt-4" type="submit">{{ __('auth.login') }}</x-forms.button>
@if (session('error'))
<div class="mb-4 font-medium text-red-600">
{{ session('error') }}
</div>
@endif
@if (!$is_registration_enabled)
<div class="text-center text-neutral-500">{{ __('auth.registration_disabled') }}</div>
@endif
@if (session('status'))
<div class="mb-4 font-medium text-green-600">
{{ session('status') }}
</div>
@endif
</form>
@if ($is_registration_enabled)
<a href="/register" class="button bg-coollabs-gradient">
{{ __('auth.register_now') }}
</a>
@endif
@if ($enabled_oauth_providers->isNotEmpty())
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t dark:border-coolgray-200"></div>
</div>
<div class="relative flex justify-center">
<span class="px-2 text-sm dark:text-neutral-500 dark:bg-base">or</span>
</div>
<div class="space-y-6">
@if (session('status'))
<div class="mb-6 p-4 bg-success/10 border border-success rounded-lg">
<p class="text-sm text-success">{{ session('status') }}</p>
</div>
@endif
@foreach ($enabled_oauth_providers as $provider_setting)
<x-forms.button class="w-full" type="button"
onclick="document.location.href='/auth/{{ $provider_setting->provider }}/redirect'">
{{ __("auth.login.$provider_setting->provider") }}
@if (session('error'))
<div class="mb-6 p-4 bg-error/10 border border-error rounded-lg">
<p class="text-sm text-error">{{ session('error') }}</p>
</div>
@endif
@if ($errors->any())
<div class="mb-6 p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
<form action="/login" method="POST" class="flex flex-col gap-4">
@csrf
@env('local')
<x-forms.input value="test@example.com" type="email" autocomplete="email" name="email" required
label="{{ __('input.email') }}" />
<x-forms.input value="password" type="password" autocomplete="current-password" name="password"
required label="{{ __('input.password') }}" />
@else
<x-forms.input type="email" name="email" autocomplete="email" required
label="{{ __('input.email') }}" />
<x-forms.input type="password" name="password" autocomplete="current-password" required
label="{{ __('input.password') }}" />
@endenv
<div class="flex items-center justify-between">
<a href="/forgot-password"
class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning hover:underline transition-colors">
{{ __('auth.forgot_password_link') }}
</a>
</div>
<x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
{{ __('auth.login') }}
</x-forms.button>
@endforeach
</form>
@if ($is_registration_enabled)
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400 ">
Don't have an account?
</span>
</div>
</div>
<a href="/register"
class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
{{ __('auth.register_now') }}
</a>
@else
<div class="mt-6 text-center text-sm text-neutral-500 dark:text-neutral-400">
{{ __('auth.registration_disabled') }}
</div>
@endif
@if ($enabled_oauth_providers->isNotEmpty())
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">or
continue with</span>
</div>
</div>
<div class="flex flex-col gap-3">
@foreach ($enabled_oauth_providers as $provider_setting)
<x-forms.button class="w-full justify-center" type="button"
onclick="document.location.href='/auth/{{ $provider_setting->provider }}/redirect'">
{{ __("auth.login.$provider_setting->provider") }}
</x-forms.button>
@endforeach
</div>
@endif
</div>
</div>
</div>
</section>
</x-layout-simple>
</x-layout-simple>
resources/views/auth/register.blade.php
+66 -23
View File
@@ -11,22 +11,44 @@ $email = getOldOrLocal('email', 'test3@example.com');
<x-layout-simple>
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</a>
<div class="w-full bg-white rounded-lg shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<div>
<h1
class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Create an account
</h1>
@if ($isFirstUser)
<div class="text-xs dark:text-warning">This user will be the root user (full admin access).
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
<p class="text-lg dark:text-neutral-400">
Create your account
</p>
</div>
<div class="space-y-6">
@if ($isFirstUser)
<div class="mb-6 p-4 bg-warning/10 border border-warning rounded-lg">
<div class="flex gap-3">
<svg class="size-5 text-warning flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<div>
<p class="font-bold text-warning">Root User Setup</p>
<p class="text-sm dark:text-white text-black">This user will be the root user with full
admin access.</p>
</div>
</div>
@endif
</div>
<form action="/register" method="POST" class="flex flex-col gap-2">
</div>
@endif
@if ($errors->any())
<div class="mb-6 p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
<form action="/register" method="POST" class="flex flex-col gap-4">
@csrf
<x-forms.input id="name" required type="text" name="name" value="{{ $name }}"
label="{{ __('input.name') }}" />
@@ -36,17 +58,38 @@ $email = getOldOrLocal('email', 'test3@example.com');
label="{{ __('input.password') }}" />
<x-forms.input id="password_confirmation" required type="password" name="password_confirmation"
label="{{ __('input.password.again') }}" />
<div class="text-xs w-full">Your password should be min 8 characters long and contain
at least one uppercase letter, one lowercase letter, one number, and one symbol.</div>
<div class="flex flex-col gap-4 pt-8 w-full">
<x-forms.button class="w-full" type="submit">Register</x-forms.button>
<a href="/login" class="w-full text-xs">
{{ __('auth.already_registered') }}
</a>
<div
class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<p class="text-xs dark:text-neutral-400">
Your password should be min 8 characters long and contain at least one uppercase letter,
one lowercase letter, one number, and one symbol.
</p>
</div>
<x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit"
isHighlighted>
Create Account
</x-forms.button>
</form>
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Already have an account?
</span>
</div>
</div>
<a href="/login"
class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
{{ __('auth.already_registered') }}
</a>
</div>
</div>
</div>
</section>
</x-layout-simple>
</x-layout-simple>
resources/views/auth/reset-password.blade.php
+71 -26
View File
@@ -1,41 +1,86 @@
<x-layout-simple>
<section class="bg-gray-50 dark:bg-base">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a class="flex items-center text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</a>
<div class="flex items-center justify-center pb-6 text-center">
{{ __('auth.reset_password') }}
</div>
<div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<form action="/reset-password" method="POST" class="flex flex-col gap-2">
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
<p class="text-lg dark:text-neutral-400">
{{ __('auth.reset_password') }}
</p>
</div>
<div class="space-y-6">
@if (session('status'))
<div class="mb-6 p-4 bg-success/10 border border-success rounded-lg">
<div class="flex gap-3">
<svg class="size-5 text-success flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-success">{{ session('status') }}</p>
</div>
</div>
@endif
@if ($errors->any())
<div class="mb-6 p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
<div class="mb-6">
<p class="text-sm dark:text-neutral-400">
Enter your new password below. Make sure it's strong and secure.
</p>
</div>
<form action="/reset-password" method="POST" class="flex flex-col gap-4">
@csrf
<input hidden id="token" name="token" value="{{ request()->route('token') }}">
<input hidden value="{{ request()->query('email') }}" type="email" name="email"
label="{{ __('input.email') }}" />
<div class="flex flex-col gap-2">
<x-forms.input required type="password" id="password" name="password"
label="{{ __('input.password') }}" />
<x-forms.input required type="password" id="password_confirmation"
name="password_confirmation" label="{{ __('input.password.again') }}" />
<x-forms.input required type="password" id="password" name="password"
label="{{ __('input.password') }}" />
<x-forms.input required type="password" id="password_confirmation" name="password_confirmation"
label="{{ __('input.password.again') }}" />
<div
class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<p class="text-xs dark:text-neutral-400">
Your password should be min 8 characters long and contain at least one uppercase letter,
one lowercase letter, one number, and one symbol.
</p>
</div>
<x-forms.button type="submit">{{ __('auth.reset_password') }}</x-forms.button>
<x-forms.button class="w-full justify-center py-3 box-boarding mt-2" type="submit"
isHighlighted>
{{ __('auth.reset_password') }}
</x-forms.button>
</form>
@if ($errors->any())
<div class="text-xs text-center text-error">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
@endforeach
<div class="relative my-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
@endif
@if (session('status'))
<div class="mb-4 font-medium text-green-600">
{{ session('status') }}
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Remember your password?
</span>
</div>
@endif
</div>
<a href="/login"
class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
Back to Login
</a>
</div>
</div>
</div>
</section>
</x-layout-simple>
</x-layout-simple>
resources/views/auth/two-factor-challenge.blade.php
+124 -27
View File
@@ -1,40 +1,137 @@
<x-layout-simple>
<section class="bg-gray-50 dark:bg-base" x-data="{ showRecovery: false }">
<section class="bg-gray-50 dark:bg-base" x-data="{
showRecovery: false,
digits: ['', '', '', '', '', ''],
code: '',
focusNext(event) {
const nextInput = event.target.nextElementSibling;
if (nextInput && nextInput.tagName === 'INPUT') {
nextInput.focus();
}
},
focusPrevious(event) {
if (event.key === 'Backspace' && !event.target.value) {
const prevInput = event.target.previousElementSibling;
if (prevInput && prevInput.tagName === 'INPUT') {
prevInput.focus();
}
}
},
updateCode() {
this.code = this.digits.join('');
if (this.digits.every(d => d !== '') && this.digits.length === 6) {
this.$nextTick(() => {
const form = document.querySelector('form[action=\'/two-factor-challenge\']');
if (form) form.submit();
});
}
},
pasteCode(event) {
event.preventDefault();
const paste = (event.clipboardData || window.clipboardData).getData('text');
const pasteDigits = paste.replace(/\D/g, '').slice(0, 6).split('');
const container = event.target.closest('.flex');
const inputs = container.querySelectorAll('input[type=text]');
pasteDigits.forEach((digit, index) => {
if (index < 6 && inputs[index]) {
this.digits[index] = digit;
}
});
this.updateCode();
if (pasteDigits.length > 0 && inputs.length > 0) {
const lastIndex = Math.min(pasteDigits.length - 1, 5);
inputs[lastIndex].focus();
}
}
}">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
<a class="flex items-center mb-6 text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</a>
<div class="w-full bg-white shadow-sm md:mt-0 sm:max-w-md xl:p-0 dark:bg-base ">
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<form action="/two-factor-challenge" method="POST" class="flex flex-col gap-2">
@csrf
<div>
<x-forms.input type="number" name="code" autocomplete="one-time-code" label="{{ __('input.code') }}" />
<div x-show="!showRecovery"
class="pt-2 text-xs cursor-pointer hover:underline dark:hover:text-white"
x-on:click="showRecovery = !showRecovery">Enter
Recovery Code
</div>
<div class="w-full max-w-md space-y-8">
<div class="text-center space-y-2">
<h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Coolify
</h1>
<p class="text-lg dark:text-neutral-400">
Two-Factor Authentication
</p>
</div>
<div class="space-y-6">
@if (session('status'))
<div class="p-4 bg-success/10 border border-success rounded-lg">
<p class="text-sm text-success">{{ session('status') }}</p>
</div>
<div x-show="showRecovery" x-cloak>
<x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
</div>
<x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
</form>
@endif
@if ($errors->any())
<div class="text-xs text-center text-error">
<div class="p-4 bg-error/10 border border-error rounded-lg">
@foreach ($errors->all() as $error)
<p>{{ $error }}</p>
<p class="text-sm text-error">{{ $error }}</p>
@endforeach
</div>
@endif
@if (session('status'))
<div class="mb-4 font-medium text-green-600">
{{ session('status') }}
<div x-show="!showRecovery"
class="p-4 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<div class="flex gap-3">
<svg class="size-5 flex-shrink-0 mt-0.5 text-coollabs dark:text-warning"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="text-sm dark:text-neutral-400">
Enter the verification code from your authenticator app to continue.
</p>
</div>
@endif
</div>
<form action="/two-factor-challenge" method="POST" class="flex flex-col gap-4">
@csrf
<div x-show="!showRecovery">
<input type="hidden" name="code" x-model="code">
<div class="flex gap-2 justify-center" @paste="pasteCode($event)">
<template x-for="(digit, index) in digits" :key="index">
<input type="text" inputmode="numeric" maxlength="1" x-model="digits[index]"
@input="if ($event.target.value) { focusNext($event); updateCode(); }"
@keydown="focusPrevious($event)"
class="w-12 h-14 text-center text-2xl font-bold bg-white dark:bg-coolgray-100 border-2 border-neutral-200 dark:border-coolgray-300 rounded-lg focus:border-coollabs dark:focus:border-warning focus:outline-none focus:ring-0 transition-colors"
autocomplete="off" />
</template>
</div>
<button type="button" x-on:click="showRecovery = !showRecovery"
class="mt-4 text-sm dark:text-neutral-400 hover:text-black dark:hover:text-white hover:underline transition-colors cursor-pointer">
Use Recovery Code Instead
</button>
</div>
<div x-show="showRecovery" x-cloak>
<x-forms.input name="recovery_code" label="{{ __('input.recovery_code') }}" />
<button type="button" x-on:click="showRecovery = !showRecovery"
class="mt-2 text-sm dark:text-neutral-400 hover:text-black dark:hover:text-white hover:underline transition-colors cursor-pointer">
Use Authenticator Code Instead
</button>
</div>
<x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
{{ __('auth.login') }}
</x-forms.button>
</form>
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-gray-50 dark:bg-base text-neutral-500 dark:text-neutral-400">
Need help?
</span>
</div>
</div>
<a href="/login"
class="block w-full text-center py-3 px-4 rounded-lg border border-neutral-300 dark:border-coolgray-400 font-medium hover:border-coollabs dark:hover:border-warning transition-colors">
Back to Login
</a>
</div>
</div>
</div>
</section>
</x-layout-simple>
</x-layout-simple>
resources/views/components/applications/advanced.blade.php
+1 -1
View File
@@ -19,7 +19,7 @@
</div>
@else
<div class="dropdown-item" wire:click='deploy(true)'>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
resources/views/components/applications/links.blade.php
+73 -121
View File
@@ -8,133 +8,85 @@
data_get($application, 'previews', collect([]))->count() > 0 ||
data_get($application, 'ports_mappings_array')) &&
data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)
@if (data_get($application, 'gitBrancLocation'))
<a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
Git Repository
</a>
@endif
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endif
@if (data_get($application, 'fqdn'))
@foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ getFqdnWithoutPort($fqdn) }}
<div class="flex flex-col gap-1">
@if (data_get($application, 'gitBrancLocation'))
<a target="_blank" class="dropdown-item" href="{{ $application->gitBranchLocation }}">
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
Git Repository
</a>
@endforeach
@endif
@if (data_get($application, 'previews', collect())->count() > 0)
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach ($application->previews as $preview)
@foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>PR{{ data_get($preview, 'pull_request_id') }} |
{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endforeach
@else
@foreach (data_get($application, 'previews') as $preview)
@if (data_get($preview, 'fqdn'))
<a class="dropdown-item" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
PR{{ data_get($preview, 'pull_request_id') }} |
{{ data_get($preview, 'fqdn') }}
</a>
@endif
@endforeach
@endif
@endif
@if (data_get($application, 'ports_mappings_array'))
@foreach ($application->ports_mappings_array as $port)
@if ($application->destination->server->id === 0)
<a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
Port {{ $port }}
</a>
@else
<a class="dropdown-item" target="_blank"
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
</a>
@if (count($application->additional_servers) > 0)
@foreach ($application->additional_servers as $server)
<a class="dropdown-item" target="_blank"
href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>
{{ $server->ip }}:{{ explode(':', $port)[0] }}
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach (collect(json_decode($this->application->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<x-external-link class="size-4" />{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endif
@if (data_get($application, 'fqdn'))
@foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($fqdn) }}">
<x-external-link class="size-4" />{{ getFqdnWithoutPort($fqdn) }}
</a>
@endforeach
@endif
@if (data_get($application, 'previews', collect())->count() > 0)
@if (data_get($application, 'build_pack') === 'dockercompose')
@foreach ($application->previews as $preview)
@foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
@if (data_get($fqdn, 'domain'))
@foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
<a class="dropdown-item" target="_blank" href="{{ getFqdnWithoutPort($domain) }}">
<x-external-link class="size-4" />PR{{ data_get($preview, 'pull_request_id') }}
|
{{ getFqdnWithoutPort($domain) }}
</a>
@endforeach
@endif
@endforeach
@endforeach
@else
@foreach (data_get($application, 'previews') as $preview)
@if (data_get($preview, 'fqdn'))
<a class="dropdown-item" target="_blank"
href="{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">
<x-external-link class="size-4" />
PR{{ data_get($preview, 'pull_request_id') }} |
{{ data_get($preview, 'fqdn') }}
</a>
@endif
@endforeach
@endif
@endforeach
@endif
@endif
@if (data_get($application, 'ports_mappings_array'))
@foreach ($application->ports_mappings_array as $port)
@if ($application->destination->server->id === 0)
<a class="dropdown-item" target="_blank" href="http://localhost:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
Port {{ $port }}
</a>
@else
<a class="dropdown-item" target="_blank"
href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}
</a>
@if (count($application->additional_servers) > 0)
@foreach ($application->additional_servers as $server)
<a class="dropdown-item" target="_blank"
href="http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">
<x-external-link class="size-4" />
{{ $server->ip }}:{{ explode(':', $port)[0] }}
</a>
@endforeach
@endif
@endif
@endforeach
@endif
</div>
@else
<div class="px-2 py-1.5 text-xs">No links available</div>
@endif
resources/views/components/boarding-progress.blade.php
+47
View File
@@ -0,0 +1,47 @@
@props(['currentStep' => 1, 'totalSteps' => 3])
<div class="w-full max-w-2xl mx-auto mb-8">
<div class="flex items-center justify-between">
@for ($i = 1; $i <= $totalSteps; $i++)
<div class="flex items-center {{ $i < $totalSteps ? 'flex-1' : '' }}">
<div class="flex flex-col items-center">
<div
class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
{{ $i < $currentStep ? 'bg-success border-success' : 'border-neutral-200 dark:border-coolgray-300' }}
{{ $i === $currentStep ? 'bg-white dark:bg-coolgray-500' : '' }}
">
@if ($i < $currentStep)
<svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
@else
<span
class="text-sm font-bold text-black dark:text-white">
{{ $i }}
</span>
@endif
</div>
<span
class="mt-2 text-xs font-medium text-black dark:text-white">
@if ($i === 1)
Server
@elseif ($i === 2)
Connection
@elseif ($i === 3)
Complete
@endif
</span>
</div>
@if ($i < $totalSteps)
<div
class="flex-1 h-0.5 mx-4 transition-all duration-300
{{ $i < $currentStep ? 'bg-success' : 'bg-neutral-200 dark:bg-coolgray-300' }}">
</div>
@endif
</div>
@endfor
</div>
</div>
resources/views/components/boarding-step.blade.php
+22 -18
View File
@@ -1,25 +1,29 @@
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
<h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
<div class="py-6">
<div class="w-full max-w-4xl">
<div class=" rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
<div class="p-8 lg:p-12">
<h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
@isset($question)
<p class="dark:text-neutral-400">
<div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
{{ $question }}
</p>
</div>
@endisset
@if ($actions)
<div class="flex flex-col gap-4">
{{ $actions }}
</div>
@endif
</div>
@if ($actions)
<div class="flex flex-col flex-wrap gap-4 lg:items-center md:flex-row">
{{ $actions }}
@isset($explanation)
<div class=" border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 ">
<h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
Technical Details
</h3>
<div class="space-y-3 text-sm dark:text-neutral-400">
{{ $explanation }}
</div>
</div>
@endif
@endisset
</div>
@isset($explanation)
<div class="col-span-1">
<h3 class="pb-8 font-bold">Explanation</h3>
<div class="space-y-4">
{{ $explanation }}
</div>
</div>
@endisset
</div>
resources/views/components/callout.blade.php
+69
View File
@@ -0,0 +1,69 @@
@props(['type' => 'warning', 'title' => 'Warning', 'class' => '', 'dismissible' => false, 'onDismiss' => null])
@php
$icons = [
'warning' => '<svg class="w-5 h-5 text-warning-600 dark:text-warning-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>',
'danger' => '<svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>',
'info' => '<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>',
'success' => '<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>'
];
$colors = [
'warning' => [
'bg' => 'bg-warning-50 dark:bg-warning-900/30',
'border' => 'border-warning-300 dark:border-warning-800',
'title' => 'text-warning-800 dark:text-warning-300',
'text' => 'text-warning-700 dark:text-warning-200'
],
'danger' => [
'bg' => 'bg-red-50 dark:bg-red-900/30',
'border' => 'border-red-300 dark:border-red-800',
'title' => 'text-red-800 dark:text-red-300',
'text' => 'text-red-700 dark:text-red-200'
],
'info' => [
'bg' => 'bg-blue-50 dark:bg-blue-900/30',
'border' => 'border-blue-300 dark:border-blue-800',
'title' => 'text-blue-800 dark:text-blue-300',
'text' => 'text-blue-700 dark:text-blue-200'
],
'success' => [
'bg' => 'bg-green-50 dark:bg-green-900/30',
'border' => 'border-green-300 dark:border-green-800',
'title' => 'text-green-800 dark:text-green-300',
'text' => 'text-green-700 dark:text-green-200'
]
];
$colorScheme = $colors[$type] ?? $colors['warning'];
$icon = $icons[$type] ?? $icons['warning'];
@endphp
<div {{ $attributes->merge(['class' => 'relative p-4 border rounded-lg ' . $colorScheme['bg'] . ' ' . $colorScheme['border'] . ' ' . $class]) }}>
<div class="flex items-start">
<div class="flex-shrink-0">
{!! $icon !!}
</div>
<div class="ml-3 {{ $dismissible ? 'pr-8' : '' }}">
<div class="text-base font-bold {{ $colorScheme['title'] }}">
{{ $title }}
</div>
<div class="mt-2 text-sm {{ $colorScheme['text'] }}">
{{ $slot }}
</div>
</div>
@if($dismissible && $onDismiss)
<button type="button" @click.stop="{{ $onDismiss }}"
class="absolute top-2 right-2 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
aria-label="Dismiss">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4 {{ $colorScheme['text'] }}">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@endif
</div>
</div>
resources/views/components/domain-conflict-modal.blade.php
+87
View File
@@ -0,0 +1,87 @@
@props([
'conflicts' => [],
'showModal' => false,
'confirmAction' => 'confirmDomainUsage',
])
@if ($showModal && count($conflicts) > 0)
<div x-data="{ modalOpen: true }" x-init="$nextTick(() => { modalOpen = true })"
@keydown.escape.window="modalOpen = false; $wire.set('showDomainConflictModal', false)"
:class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
<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" x-cloak>
<div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
<div class="flex justify-between items-center pb-3">
<h2 class="pr-8 font-bold">Domain Already In Use</h2>
<button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="relative w-auto">
<x-callout type="danger" title="Domain Conflict Detected" class="mb-4">
The following domain(s) are already in use by other resources. Using the same domain for
multiple resources can cause routing conflicts and unpredictable behavior.
</x-callout>
<div class="mb-4">
<ul class="space-y-2">
@foreach ($conflicts as $conflict)
<li class="flex items-start text-red-500">
<div>
<strong>{{ $conflict['domain'] }}</strong> is used by
@if ($conflict['resource_type'] === 'instance')
<strong>{{ $conflict['resource_name'] }}</strong>
@else
<a href="{{ $conflict['resource_link'] }}" target="_blank"
class="underline hover:text-red-400">
{{ $conflict['resource_name'] }}
</a>
@endif
({{ $conflict['resource_type'] }})
</div>
</li>
@endforeach
</ul>
</div>
<x-callout type="warning" title="What will happen if you continue?" class="mb-4">
@if (isset($consequences))
{{ $consequences }}
@else
<ul class="mt-2 ml-4 list-disc">
<li>Only one resource will be accessible at this domain</li>
<li>The routing behavior will be unpredictable</li>
<li>You may experience service disruptions</li>
<li>SSL certificates might not work correctly</li>
</ul>
@endif
</x-callout>
<div class="flex flex-wrap gap-2 justify-between mt-4">
<x-forms.button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
class="w-auto dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
Cancel
</x-forms.button>
<x-forms.button wire:click="{{ $confirmAction }}" @click="modalOpen = false" class="w-auto"
isError>
I understand, proceed anyway
</x-forms.button>
</div>
</div>
</div>
</div>
</template>
</div>
@endif
resources/views/components/dropdown.blade.php
+2 -1
View File
@@ -16,7 +16,8 @@
<div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
<div class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-black border-neutral-300">
<div
class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
{{ $slot }}
</div>
</div>
resources/views/components/environment-variable-warning.blade.php
+37
View File
@@ -0,0 +1,37 @@
@props(['problematicVariables' => []])
<template x-data="{
problematicVars: @js($problematicVariables),
get showWarning() {
const currentKey = $wire.key;
const currentValue = $wire.value;
const isBuildtime = $wire.is_buildtime;
if (!isBuildtime || !currentKey) return false;
if (!this.problematicVars.hasOwnProperty(currentKey)) return false;
const config = this.problematicVars[currentKey];
if (!config || !config.problematic_values) return false;
// Check if current value matches any problematic values
const lowerValue = String(currentValue).toLowerCase();
return config.problematic_values.some(pv => pv.toLowerCase() === lowerValue);
},
get warningMessage() {
if (!this.showWarning) return null;
const config = this.problematicVars[$wire.key];
if (!config) return null;
return config.issue;
},
get recommendation() {
if (!this.showWarning) return null;
const config = this.problematicVars[$wire.key];
if (!config) return null;
return `Recommendation: ${config.recommendation}`;
}
}" x-if="showWarning">
<x-callout type="warning" title="Caution">
<div class="text-sm" x-text="warningMessage"></div>
<div class="text-sm" x-text="recommendation"></div>
</x-callout>
</template>
resources/views/components/external-link.blade.php
+5 -6
View File
@@ -1,7 +1,6 @@
<svg class="inline-flex w-3 h-3 ml-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
focusable="false" viewBox="0 0 24 24">
<path d="M0 0h24v24H0V0z" fill="none">
</path>
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" fill="currentColor">
</path>
@props(['class' => 'inline-flex w-3 h-3 dark:text-neutral-400 text-black'])
<svg {{ $attributes->merge(['class' => $class]) }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 290 B

After

Width:  |  Height:  |  Size: 356 B

resources/views/components/forms/checkbox.blade.php
+3 -3
View File
@@ -32,14 +32,14 @@
<input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
wire:loading.attr="disabled"
wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
wire:model={{ $id }} @if ($checked) checked @endif />
wire:model={{ $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
@else
@if ($domValue)
<input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
value={{ $domValue }} @if ($checked) checked @endif />
value={{ $domValue }} id="{{ $htmlId }}" @if ($checked) checked @endif />
@else
<input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
wire:model={{ $value ?? $id }} @if ($checked) checked @endif />
wire:model={{ $value ?? $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
@endif
@endif
</label>
resources/views/components/forms/datalist.blade.php
+276 -32
View File
@@ -1,6 +1,6 @@
<div class="w-full">
<label>
@if ($label)
@if ($label)
<label class="flex gap-1 items-center mb-1 text-sm font-medium {{ $disabled ? 'text-neutral-600' : '' }}">
{{ $label }}
@if ($required)
<x-highlighted text="*" />
@@ -8,37 +8,281 @@
@if ($helper)
<x-helper :helper="$helper" />
@endif
@endif
<input list={{ $id }} {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
wire:dirty.class.remove='dark:text-white' wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled"
name={{ $id }}
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif
@if ($attributes->whereStartsWith('onUpdate')->first()) wire:change={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:keydown.enter={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:blur={{ $attributes->whereStartsWith('onUpdate')->first() }} @else wire:change={{ $id }} wire:blur={{ $id }} wire:keydown.enter={{ $id }} @endif>
<datalist id={{ $id }}>
{{ $slot }}
</datalist>
</label>
@error($id)
</label>
@endif
@if ($multiple)
{{-- Multiple Selection Mode with Alpine.js --}}
<div x-data="{
open: false,
search: '',
selected: @entangle($modelBinding).live,
options: [],
filteredOptions: [],
init() {
this.options = Array.from(this.$refs.datalist.querySelectorAll('option')).map(opt => {
// Try to parse as integer, fallback to string
let value = opt.value;
const intValue = parseInt(value, 10);
if (!isNaN(intValue) && intValue.toString() === value) {
value = intValue;
}
return {
value: value,
text: opt.textContent.trim()
};
});
this.filteredOptions = this.options;
// Ensure selected is always an array
if (!Array.isArray(this.selected)) {
this.selected = [];
}
},
filterOptions() {
if (!this.search) {
this.filteredOptions = this.options;
return;
}
const searchLower = this.search.toLowerCase();
this.filteredOptions = this.options.filter(opt =>
opt.text.toLowerCase().includes(searchLower)
);
},
toggleOption(value) {
// Ensure selected is an array
if (!Array.isArray(this.selected)) {
this.selected = [];
}
const index = this.selected.indexOf(value);
if (index > -1) {
this.selected.splice(index, 1);
} else {
this.selected.push(value);
}
this.search = '';
this.filterOptions();
// Focus input after selection
this.$refs.searchInput.focus();
},
removeOption(value, event) {
// Ensure selected is an array
if (!Array.isArray(this.selected)) {
this.selected = [];
return;
}
// Prevent triggering container click
event.stopPropagation();
const index = this.selected.indexOf(value);
if (index > -1) {
this.selected.splice(index, 1);
}
},
isSelected(value) {
// Ensure selected is an array
if (!Array.isArray(this.selected)) {
return false;
}
return this.selected.includes(value);
},
getSelectedText(value) {
const option = this.options.find(opt => opt.value == value);
return option ? option.text : value;
}
}" @click.outside="open = false" class="relative">
{{-- Unified Input Container with Tags Inside --}}
<div @click="$refs.searchInput.focus()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
class="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto scrollbar py-1.5 px-2 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text px-1 text-black dark:text-white"
:style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
:class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }}
}" wire:loading.class="opacity-50"
wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
{{-- Selected Tags Inside Input --}}
<template x-for="value in selected" :key="value">
<button type="button" @click.stop="removeOption(value, $event)"
:disabled="{{ $disabled ? 'true' : 'false' }}"
class="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs bg-coolgray-200 dark:bg-coolgray-700 rounded whitespace-nowrap {{ $disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-red-100 dark:hover:bg-red-900/20 hover:text-red-600 dark:hover:text-red-400' }}"
aria-label="Remove">
<span x-text="getSelectedText(value)" class="max-w-[200px] truncate"></span>
</button>
</template>
{{-- Search Input (Borderless, Inside Container) --}}
<input type="text" x-model="search" x-ref="searchInput" @input="filterOptions()" @focus="open = true"
@keydown.escape="open = false" :placeholder="(Array.isArray(selected) && selected.length > 0) ? '' :
{{ json_encode($placeholder ?: 'Search...') }}" @required($required) @readonly($readonly)
@disabled($disabled) @if ($autofocus) autofocus @endif
class="flex-1 min-w-[120px] text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white" />
</div>
{{-- Dropdown Options --}}
<div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
<template x-if="filteredOptions.length === 0">
<div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
No options found
</div>
</template>
<template x-for="option in filteredOptions" :key="option.value">
<div @click="toggleOption(option.value)"
class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200 flex items-center gap-3"
:class="{ 'bg-neutral-50 dark:bg-coolgray-300': isSelected(option.value) }">
<input type="checkbox" :checked="isSelected(option.value)"
class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-white dark:bg-coolgray-100 text-black dark:text-white checked:bg-white dark:checked:bg-coolgray-100 focus:ring-coollabs dark:focus:ring-warning pointer-events-none"
tabindex="-1">
<span class="text-sm flex-1" x-text="option.text"></span>
</div>
</template>
</div>
{{-- Hidden datalist for options --}}
<datalist x-ref="datalist" style="display: none;">
{{ $slot }}
</datalist>
</div>
@else
{{-- Single Selection Mode with Alpine.js --}}
<div x-data="{
open: false,
search: '',
selected: @entangle(($attributes->whereStartsWith('wire:model')->first() ? $attributes->wire('model')->value() : $modelBinding)).live,
options: [],
filteredOptions: [],
init() {
this.options = Array.from(this.$refs.datalist.querySelectorAll('option')).map(opt => {
// Skip disabled options
if (opt.disabled) {
return null;
}
// Try to parse as integer, fallback to string
let value = opt.value;
const intValue = parseInt(value, 10);
if (!isNaN(intValue) && intValue.toString() === value) {
value = intValue;
}
return {
value: value,
text: opt.textContent.trim()
};
}).filter(opt => opt !== null);
this.filteredOptions = this.options;
},
filterOptions() {
if (!this.search) {
this.filteredOptions = this.options;
return;
}
const searchLower = this.search.toLowerCase();
this.filteredOptions = this.options.filter(opt =>
opt.text.toLowerCase().includes(searchLower)
);
},
selectOption(value) {
this.selected = value;
this.search = '';
this.open = false;
this.filterOptions();
},
openDropdown() {
if ({{ $disabled ? 'true' : 'false' }}) return;
this.open = true;
this.$nextTick(() => {
if (this.$refs.searchInput) {
this.$refs.searchInput.focus();
}
});
},
getSelectedText() {
if (!this.selected || this.selected === 'default') return '';
const option = this.options.find(opt => opt.value == this.selected);
return option ? option.text : this.selected;
},
isDefaultValue() {
return !this.selected || this.selected === 'default' || this.selected === '';
}
}" @click.outside="open = false" class="relative">
{{-- Hidden input for form validation --}}
<input type="hidden" :value="selected" @required($required) />
{{-- Input Container --}}
<div @click="openDropdown()" x-data="{ focused: false }" @focusin="focused = true" @focusout="focused = false"
class="flex items-center gap-2 py-1.5 w-full text-sm rounded-sm border-0 bg-white dark:bg-coolgray-100 cursor-text text-black dark:text-white"
:style="focused ? 'box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5;' : 'box-shadow: inset 4px 0 0 transparent, inset 0 0 0 2px #e5e5e5;'"
x-init="$watch('focused', () => { if ($root.classList.contains('dark') || document.documentElement.classList.contains('dark')) { $el.style.boxShadow = focused ? 'inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424' : 'inset 4px 0 0 transparent, inset 0 0 0 2px #242424'; } })"
:class="{
'opacity-50': {{ $disabled ? 'true' : 'false' }}
}" wire:loading.class="opacity-50" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]">
{{-- Display Selected Value or Search Input --}}
<div class="flex-1 flex items-center min-w-0 px-1">
<template x-if="!isDefaultValue() && !open">
<span class="text-sm flex-1 truncate text-black dark:text-white px-2"
x-text="getSelectedText()"></span>
</template>
<input type="text" x-show="isDefaultValue() || open" x-model="search" x-ref="searchInput"
@input="filterOptions()" @focus="open = true" @keydown.escape="open = false"
:placeholder="{{ json_encode($placeholder ?: 'Search...') }}" @readonly($readonly)
@disabled($disabled) @if ($autofocus) autofocus @endif
class="flex-1 text-sm border-0 outline-none bg-transparent p-0 focus:ring-0 placeholder:text-neutral-400 dark:placeholder:text-neutral-600 text-black dark:text-white px-2" />
</div>
{{-- Dropdown Arrow --}}
<button type="button" @click.stop="open = !open" :disabled="{{ $disabled ? 'true' : 'false' }}"
class="shrink-0 text-neutral-400 px-2 {{ $disabled ? 'cursor-not-allowed' : 'cursor-pointer' }}">
<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': open }" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
{{-- Dropdown Options --}}
<div x-show="open && !{{ $disabled ? 'true' : 'false' }}" x-transition
class="absolute z-50 w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg max-h-60 overflow-auto scrollbar">
<template x-if="filteredOptions.length === 0">
<div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
No options found
</div>
</template>
<template x-for="option in filteredOptions" :key="option.value">
<div @click="selectOption(option.value)"
class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200"
:class="{ 'bg-neutral-50 dark:bg-coolgray-300': selected == option.value }">
<span class="text-sm" x-text="option.text"></span>
</div>
</template>
</div>
{{-- Hidden datalist for options --}}
<datalist x-ref="datalist" style="display: none;">
{{ $slot }}
</datalist>
</div>
@endif
@error($modelBinding)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
@enderror
{{-- <script>
const input = document.querySelector(`input[list={{ $id }}]`);
input.addEventListener('focus', function(e) {
const input = e.target.value;
const datalist = document.getElementById('{{ $id }}');
if (datalist.options) {
for (let option of datalist.options) {
// change background color to red on all options
option.style.display = "none";
if (option.value.includes(input)) {
option.style.display = "block";
}
}
}
});
</script> --}}
</div>
</div>
resources/views/components/forms/env-var-input.blade.php
+274
View File
@@ -0,0 +1,274 @@
<div class="w-full">
@if ($label)
<label class="flex gap-1 items-center mb-1 text-sm font-medium">{{ $label }}
@if ($required)
<x-highlighted text="*" />
@endif
@if ($helper)
<x-helper :helper="$helper" />
@endif
</label>
@endif
<div class="relative" x-data="{
type: '{{ $type }}',
showDropdown: false,
suggestions: [],
selectedIndex: 0,
cursorPosition: 0,
currentScope: null,
availableScopes: ['team', 'project', 'environment'],
availableVars: @js($availableVars),
scopeUrls: @js($scopeUrls),
handleInput() {
const input = this.$refs.input;
if (!input) return;
const value = input.value || '';
this.cursorPosition = input.selectionStart || 0;
const textBeforeCursor = value.substring(0, this.cursorPosition);
const openBraces = '{' + '{';
const lastBraceIndex = textBeforeCursor.lastIndexOf(openBraces);
if (lastBraceIndex === -1) {
this.showDropdown = false;
return;
}
if (lastBraceIndex > 0 && textBeforeCursor[lastBraceIndex - 1] === '{') {
this.showDropdown = false;
return;
}
const textAfterBrace = textBeforeCursor.substring(lastBraceIndex);
const closeBraces = '}' + '}';
if (textAfterBrace.includes(closeBraces)) {
this.showDropdown = false;
return;
}
const content = textAfterBrace.substring(2).trim();
if (content === '') {
this.currentScope = null;
this.suggestions = this.availableScopes.map(scope => ({
type: 'scope',
value: scope,
display: scope
}));
this.selectedIndex = 0;
this.showDropdown = true;
} else if (content.includes('.')) {
const [scope, partial] = content.split('.');
if (!this.availableScopes.includes(scope)) {
this.showDropdown = false;
return;
}
this.currentScope = scope;
const scopeVars = this.availableVars[scope] || [];
const filtered = scopeVars.filter(v =>
v.toLowerCase().includes((partial || '').toLowerCase())
);
if (filtered.length === 0 && scopeVars.length === 0) {
this.suggestions = [];
this.showDropdown = true;
} else {
this.suggestions = filtered.map(varName => ({
type: 'variable',
value: varName,
display: `${scope}.${varName}`,
scope: scope
}));
this.selectedIndex = 0;
this.showDropdown = filtered.length > 0;
}
} else {
this.currentScope = null;
const filtered = this.availableScopes.filter(scope =>
scope.toLowerCase().includes(content.toLowerCase())
);
this.suggestions = filtered.map(scope => ({
type: 'scope',
value: scope,
display: scope
}));
this.selectedIndex = 0;
this.showDropdown = filtered.length > 0;
}
},
getScopeUrl(scope) {
return this.scopeUrls[scope] || this.scopeUrls['default'];
},
selectSuggestion(suggestion) {
const input = this.$refs.input;
if (!input) return;
const value = input.value || '';
const textBeforeCursor = value.substring(0, this.cursorPosition);
const textAfterCursor = value.substring(this.cursorPosition);
const openBraces = '{' + '{';
const lastBraceIndex = textBeforeCursor.lastIndexOf(openBraces);
if (suggestion.type === 'scope') {
const newText = value.substring(0, lastBraceIndex) +
openBraces + ' ' + suggestion.value + '.' +
textAfterCursor;
input.value = newText;
this.cursorPosition = lastBraceIndex + 3 + suggestion.value.length + 1;
this.$nextTick(() => {
input.setSelectionRange(this.cursorPosition, this.cursorPosition);
input.focus();
this.handleInput();
});
} else {
const closeBraces = '}' + '}';
const newText = value.substring(0, lastBraceIndex) +
openBraces + ' ' + suggestion.display + ' ' + closeBraces +
textAfterCursor;
input.value = newText;
this.cursorPosition = lastBraceIndex + 3 + suggestion.display.length + 3;
input.dispatchEvent(new Event('input'));
this.showDropdown = false;
this.selectedIndex = 0;
this.$nextTick(() => {
input.setSelectionRange(this.cursorPosition, this.cursorPosition);
input.focus();
});
}
},
handleKeydown(event) {
if (!this.showDropdown) return;
if (!this.suggestions || this.suggestions.length === 0) return;
if (event.key === 'ArrowDown') {
event.preventDefault();
this.selectedIndex = (this.selectedIndex + 1) % this.suggestions.length;
this.$nextTick(() => {
const el = document.getElementById('suggestion-' + this.selectedIndex);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
});
} else if (event.key === 'ArrowUp') {
event.preventDefault();
this.selectedIndex = this.selectedIndex <= 0 ? this.suggestions.length - 1 : this.selectedIndex - 1;
this.$nextTick(() => {
const el = document.getElementById('suggestion-' + this.selectedIndex);
if (el) {
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
});
} else if (event.key === 'Enter' && this.showDropdown) {
event.preventDefault();
if (this.suggestions[this.selectedIndex]) {
this.selectSuggestion(this.suggestions[this.selectedIndex]);
}
} else if (event.key === 'Escape') {
this.showDropdown = false;
}
}
}"
@click.outside="showDropdown = false">
@if ($type === 'password' && $allowToPeak)
<div x-on:click="changePasswordFieldType"
class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg>
</div>
@endif
<input
x-ref="input"
@input="handleInput()"
@keydown="handleKeydown($event)"
@click="handleInput()"
autocomplete="{{ $autocomplete }}"
{{ $attributes->merge(['class' => $defaultClass]) }}
@required($required)
@readonly($readonly)
@if ($modelBinding !== 'null')
wire:model="{{ $modelBinding }}"
wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
@endif
wire:loading.attr="disabled"
@if ($type === 'password')
:type="type"
@else
type="{{ $type }}"
@endif
@disabled($disabled)
@if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
name="{{ $name }}"
placeholder="{{ $attributes->get('placeholder') }}"
@if ($autofocus) autofocus @endif>
{{-- Dropdown for suggestions --}}
<div x-show="showDropdown"
x-transition
class="absolute z-[60] w-full mt-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-400 rounded shadow-lg">
<template x-if="suggestions.length === 0 && currentScope">
<div class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
<div>No shared variables found in <span class="font-semibold" x-text="currentScope"></span> scope.</div>
<a :href="getScopeUrl(currentScope)"
class="text-coollabs dark:text-warning hover:underline text-xs mt-1 inline-block"
target="_blank">
Add <span x-text="currentScope"></span> variables →
</a>
</div>
</template>
<div x-show="suggestions.length > 0"
x-ref="dropdownList"
class="max-h-48 overflow-y-scroll"
style="scrollbar-width: thin;">
<template x-for="(suggestion, index) in suggestions" :key="index">
<div :id="'suggestion-' + index"
@click="selectSuggestion(suggestion)"
class="px-3 py-2 cursor-pointer hover:bg-neutral-100 dark:hover:bg-coolgray-200 flex items-center gap-2"
:class="{ 'bg-neutral-50 dark:bg-coolgray-300': index === selectedIndex }">
<template x-if="suggestion.type === 'scope'">
<span class="text-xs px-2 py-0.5 bg-coollabs/10 dark:bg-warning/10 text-coollabs dark:text-warning rounded">
SCOPE
</span>
</template>
<template x-if="suggestion.type === 'variable'">
<span class="text-xs px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded">
VAR
</span>
</template>
<span class="text-sm font-mono" x-text="suggestion.display"></span>
</div>
</template>
</div>
</div>
</div>
@if (!$label && $helper)
<x-helper :helper="$helper" />
@endif
@error($modelBinding)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
@enderror
</div>
resources/views/components/forms/input.blade.php
+11 -11
View File
@@ -27,30 +27,30 @@
@endif
<input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
@if ($id !== 'null') wire:model={{ $id }} @endif
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
aria-placeholder="{{ $attributes->get('placeholder') }}">
aria-placeholder="{{ $attributes->get('placeholder') }}"
@if ($autofocus) x-ref="autofocusInput" @endif>
</div>
@else
<input autocomplete="{{ $autocomplete }}" @if ($value) value="{{ $value }}" @endif
{{ $attributes->merge(['class' => $defaultClass]) }} @required($required) @readonly($readonly)
@if ($id !== 'null') wire:model={{ $id }} @endif
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
wire:loading.attr="disabled"
type="{{ $type }}" @disabled($disabled) min="{{ $attributes->get('min') }}"
max="{{ $attributes->get('max') }}" minlength="{{ $attributes->get('minlength') }}"
maxlength="{{ $attributes->get('maxlength') }}"
@if ($id !== 'null') id={{ $id }} @endif name="{{ $name }}"
placeholder="{{ $attributes->get('placeholder') }}">
@if ($htmlId !== 'null') id={{ $htmlId }} @endif name="{{ $name }}"
placeholder="{{ $attributes->get('placeholder') }}"
@if ($autofocus) x-ref="autofocusInput" @endif>
@endif
@if (!$label && $helper)
<x-helper :helper="$helper" />
@endif
@error($id)
@error($modelBinding)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
resources/views/components/forms/monaco-editor.blade.php
+21 -6
View File
@@ -30,12 +30,22 @@
document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
},
monacoEditorAddLoaderScriptToHead() {
let script = document.createElement('script');
script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
document.head.appendChild(script);
// Use a global flag to prevent duplicate script loading
if (!window.__coolifyMonacoLoaderAdding && typeof _amdLoaderGlobal === 'undefined') {
window.__coolifyMonacoLoaderAdding = true;
let script = document.createElement('script');
script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
script.onload = () => {
window.__coolifyMonacoLoaderAdding = false;
};
script.onerror = () => {
window.__coolifyMonacoLoaderAdding = false;
};
document.head.appendChild(script);
}
}
}" x-modelable="monacoContent">
<div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
<div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined' && !window.__coolifyMonacoLoaderAdding) {
monacoEditorAddLoaderScriptToHead();
}
checkTheme();
@@ -81,8 +91,13 @@
document.getElementById(monacoId).addEventListener('monaco-editor-focused', (event) => {
editor.focus();
});
updatePlaceholder(editor.getValue());
@if ($autofocus)
// Auto-focus the editor
setTimeout(() => editor.focus(), 100);
@endif
$watch('monacoContent', value => {
if (editor.getValue() !== value) {
@@ -99,7 +114,7 @@
}, 5);" :id="monacoId">
</div>
<div class="relative z-10 w-full h-full">
<div x-ref="monacoEditorElement" class="w-full h-96 text-md {{ $readonly ? 'opacity-65' : '' }}"></div>
<div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 300px;"></div>
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
:style="'font-size: ' + monacoFontSize"
class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"
resources/views/components/forms/select.blade.php
+3 -4
View File
@@ -11,12 +11,11 @@
</label>
@endif
<select {{ $attributes->merge(['class' => $defaultClass]) }} @disabled($disabled) @required($required)
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled" name={{ $id }}
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif>
wire:loading.attr="disabled" name={{ $modelBinding }} id="{{ $htmlId }}"
@if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @else wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif>
{{ $slot }}
</select>
@error($id)
@error($modelBinding)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
resources/views/components/forms/textarea.blade.php
+17 -18
View File
@@ -25,9 +25,9 @@
</label>
@endif
@if ($useMonacoEditor)
<x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
readonly="{{ $readonly }}" label="dockerfile" />
<x-forms.monaco-editor id="{{ $modelBinding }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
name="{{ $modelBinding }}" model="{{ $value ?? $modelBinding }}" wire:model="{{ $value ?? $modelBinding }}"
readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
@else
@if ($type === 'password')
<div class="relative" x-data="{ type: 'password' }">
@@ -45,35 +45,34 @@
@endif
<input x-cloak x-show="type === 'password'" value="{{ $value }}"
{{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)
@if ($id !== 'null') wire:model={{ $id }} @endif
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300'
wire:dirty.class="dark:focus:ring-warning dark:ring-warning" wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $id }}"
@if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
wire:loading.attr="disabled"
type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
aria-placeholder="{{ $attributes->get('placeholder') }}">
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
@else
wire:model={{ $value ?? $id }}
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
name="{{ $name }}" name={{ $modelBinding }}
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
</div>
@else
<textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}"
{{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
{{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
@if ($realtimeValidation) wire:model.debounce.200ms="{{ $modelBinding }}" wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]"
@else
wire:model={{ $value ?? $id }}
wire:dirty.class.remove='dark:focus:ring-coolgray-300 dark:ring-coolgray-300' wire:dirty.class="dark:focus:ring-warning dark:ring-warning" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $id }}"
name="{{ $name }}" name={{ $id }}></textarea>
wire:model={{ $value ?? $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
@disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
name="{{ $name }}" name={{ $modelBinding }}
@if ($autofocus) x-ref="autofocusInput" @endif></textarea>
@endif
@endif
@error($id)
@error($modelBinding)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
resources/views/components/modal-confirmation.blade.php
+63 -28
View File
@@ -11,6 +11,7 @@
'content' => null,
'checkboxes' => [],
'actions' => [],
'warningMessage' => null,
'confirmWithText' => true,
'confirmationText' => 'Confirm Deletion',
'confirmationLabel' => 'Please confirm the execution of the actions by entering the Name below',
@@ -28,24 +29,34 @@
@php
use App\Models\InstanceSettings;
// Global setting to disable ALL two-step confirmation (text + password)
$disableTwoStepConfirmation = data_get(InstanceSettings::get(), 'disable_two_step_confirmation');
// Skip ONLY password confirmation for OAuth users (they have no password)
$skipPasswordConfirmation = shouldSkipPasswordConfirmation();
if ($temporaryDisableTwoStepConfirmation) {
$disableTwoStepConfirmation = false;
$skipPasswordConfirmation = false;
}
// When password step is skipped, Step 2 becomes final - change button text from "Continue" to "Confirm"
$effectiveStep2ButtonText = ($skipPasswordConfirmation && $step2ButtonText === 'Continue') ? 'Confirm' : $step2ButtonText;
@endphp
<div {{ $ignoreWire ? 'wire:ignore' : '' }} x-data="{
modalOpen: false,
step: {{ empty($checkboxes) ? 2 : 1 }},
initialStep: {{ empty($checkboxes) ? 2 : 1 }},
finalStep: {{ $confirmWithPassword && !$disableTwoStepConfirmation ? 3 : 2 }},
finalStep: {{ $confirmWithPassword && !$skipPasswordConfirmation ? 3 : 2 }},
deleteText: '',
password: '',
actions: @js($actions),
confirmationText: @js(html_entity_decode($confirmationText, ENT_QUOTES, 'UTF-8')),
confirmationText: (() => {
const textarea = document.createElement('textarea');
textarea.innerHTML = @js($confirmationText);
return textarea.value;
})(),
userConfirmationText: '',
confirmWithText: @js($confirmWithText && !$disableTwoStepConfirmation),
confirmWithPassword: @js($confirmWithPassword && !$disableTwoStepConfirmation),
confirmWithPassword: @js($confirmWithPassword && !$skipPasswordConfirmation),
submitAction: @js($submitAction),
dispatchAction: @js($dispatchAction),
passwordError: '',
@@ -54,6 +65,7 @@
dispatchEventType: @js($dispatchEventType),
dispatchEventMessage: @js($dispatchEventMessage),
disableTwoStepConfirmation: @js($disableTwoStepConfirmation),
skipPasswordConfirmation: @js($skipPasswordConfirmation),
resetModal() {
this.step = this.initialStep;
this.deleteText = '';
@@ -63,7 +75,7 @@
$wire.$refresh();
},
step1ButtonText: @js($step1ButtonText),
step2ButtonText: @js($step2ButtonText),
step2ButtonText: @js($effectiveStep2ButtonText),
step3ButtonText: @js($step3ButtonText),
validatePassword() {
if (this.confirmWithPassword && !this.password) {
@@ -87,10 +99,14 @@
const paramsMatch = this.submitAction.match(/\((.*?)\)/);
const params = paramsMatch ? paramsMatch[1].split(',').map(param => param.trim()) : [];
if (this.confirmWithPassword) {
params.push(this.password);
// Always pass password parameter (empty string if password confirmation is skipped)
// This ensures consistent method signature for backend Livewire methods
params.push(this.confirmWithPassword ? this.password : '');
// Only pass selectedActions if there are checkboxes with selections
if (this.selectedActions.length > 0) {
params.push(this.selectedActions);
}
params.push(this.selectedActions);
return $wire[methodName](...params)
.then(result => {
if (result === true) {
@@ -109,7 +125,7 @@
}
}
}"
@keydown.escape.window="modalOpen = false; resetModal()" :class="{ 'z-40': modalOpen }"
@keydown.escape.window="if (modalOpen) { modalOpen = false; resetModal(); }" :class="{ 'z-40': modalOpen }"
class="relative w-auto h-auto">
@if ($customButton)
@if ($buttonFullWidth)
@@ -172,7 +188,7 @@
@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" x-cloak>
class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
<div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
</div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
@@ -181,8 +197,8 @@
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
<div class="flex justify-between items-center pb-3">
class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
<div class="flex justify-between items-center py-6 px-7 shrink-0">
<h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen = false; resetModal()"
class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
@@ -192,13 +208,10 @@
</svg>
</button>
</div>
<div class="relative w-auto">
<div class="relative w-auto overflow-y-auto px-7 pb-6" style="-webkit-overflow-scrolling: touch;">
@if (!empty($checkboxes))
<!-- Step 1: Select actions -->
<div x-show="step === 1">
<div class="flex justify-between items-center">
<h4>Actions</h4>
</div>
@foreach ($checkboxes as $index => $checkbox)
<div class="flex justify-between items-center mb-2">
<x-forms.checkbox fullWidth :label="$checkbox['label']" :id="$checkbox['id']"
@@ -222,11 +235,9 @@
<!-- Step 2: Confirm deletion -->
<div x-show="step === 2">
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
<p class="font-bold">Warning</p>
<p>This operation is permanent and cannot be undone. Please think again before proceeding!
</p>
</div>
<x-callout type="danger" title="Warning" class="mb-4">
{!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
</x-callout>
<div class="mb-4">The following actions will be performed:</div>
<ul class="mb-4 space-y-2">
@foreach ($actions as $action)
@@ -250,6 +261,18 @@
<span>{{ $checkbox['label'] }}</span>
</li>
</template>
@if (isset($checkbox['default_warning']))
<template x-if="!selectedActions.includes('{{ $checkbox['id'] }}')">
<li class="flex items-center text-red-500">
<svg class="shrink-0 mr-2 w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>{{ $checkbox['default_warning'] }}</span>
</li>
</template>
@endif
@endforeach
</ul>
@if (!$disableTwoStepConfirmation)
@@ -257,8 +280,21 @@
<div class="mb-4">
<h4 class="mb-2 text-lg font-semibold">Confirm Actions</h4>
<p class="mb-2 text-sm">{{ $confirmationLabel }}</p>
<div class="relative mb-2">
<x-forms.copy-button :text="html_entity_decode($confirmationText, ENT_QUOTES, 'UTF-8')" />
<div class="relative mb-2" x-data="{ decodedText: confirmationText }">
<div class="relative">
<input type="text" x-model="decodedText" readonly class="input">
<button x-show="window.isSecureContext"
@click.prevent="navigator.clipboard.writeText(decodedText); $el.innerHTML = '<svg class=\'w-5 h-5 text-green-500\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M5 13l4 4L19 7\' /></svg>'; setTimeout(() => $el.innerHTML = '<svg class=\'w-5 h-5\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\' /></svg>', 1000)"
class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-300 transition-colors"
title="Copy to clipboard">
<svg class="w-5 h-5" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
</div>
</div>
<label for="userConfirmationText"
@@ -291,7 +327,7 @@
if (dispatchEvent) {
$wire.dispatch(dispatchEventType, dispatchEventMessage);
}
if (confirmWithPassword && !disableTwoStepConfirmation) {
if (confirmWithPassword && !skipPasswordConfirmation) {
step++;
} else {
modalOpen = false;
@@ -305,12 +341,11 @@
</div>
<!-- Step 3: Password confirmation -->
@if (!$disableTwoStepConfirmation)
@if (!$skipPasswordConfirmation)
<div x-show="step === 3 && confirmWithPassword">
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
<p class="font-bold">Final Confirmation</p>
<p>Please enter your password to confirm this destructive action.</p>
</div>
<x-callout type="danger" title="Final Confirmation" class="mb-4">
Please enter your password to confirm this destructive action.
</x-callout>
<div class="flex flex-col gap-2 mb-4">
@php
$passwordConfirm = Str::uuid();
resources/views/components/modal-input.blade.php
+22 -11
View File
@@ -8,8 +8,18 @@
'content' => null,
'closeOutside' => true,
'minWidth' => '36rem',
'maxWidth' => '48rem',
'isFullWidth' => false,
])
<div x-data="{ modalOpen: false }" :class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
@php
$modalId = 'modal-' . uniqid();
@endphp
<div x-data="{ modalOpen: false }"
x-init="$watch('modalOpen', value => { if (!value) { $wire.dispatch('modalClosed') } })"
:class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
class="relative w-auto h-auto" wire:ignore>
@if ($content)
<div @click="modalOpen=true">
@@ -17,42 +27,43 @@
</div>
@else
@if ($disabled)
<x-forms.button isError disabled>{{ $buttonTitle }}</x-forms.button>
<x-forms.button isError disabled @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
@elseif ($isErrorButton)
<x-forms.button isError @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
<x-forms.button isError @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
@elseif ($isHighlightedButton)
<x-forms.button isHighlighted @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
<x-forms.button isHighlighted @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
@else
<x-forms.button @click="modalOpen=true">{{ $buttonTitle }}</x-forms.button>
<x-forms.button @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
@endif
@endif
<template x-teleport="body">
<div x-show="modalOpen"
class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4">
<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"
@if ($closeOutside) @click="modalOpen=false" @endif
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
<div x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
<div id="{{ $modalId }}" x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
x-transition:enter="ease-out duration-100"
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full py-6 border rounded-sm drop-shadow-sm min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
<div class="flex items-center justify-between pb-3">
class="relative w-full min-w-full lg:min-w-[{{ $minWidth }}] max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
<div class="flex items-center justify-between py-6 px-6 shrink-0">
<h3 class="text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen=false"
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0">
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="relative flex items-center justify-center w-auto">
<div class="relative flex items-center justify-center w-auto overflow-y-auto px-6 pb-6" style="-webkit-overflow-scrolling: touch;">
{{ $slot }}
</div>
</div>
resources/views/components/modal.blade.php
+4 -3
View File
@@ -1,7 +1,7 @@
<dialog id="{{ $modalId }}" class="modal">
@if ($yesOrNo)
<form method="dialog" class="rounded-sm modal-box" @if (!$noSubmit) wire:submit='submit' @endif>
<div class="flex items-start">
<form method="dialog" class="rounded-sm modal-box max-h-[calc(100vh-5rem)] flex flex-col" @if (!$noSubmit) wire:submit='submit' @endif>
<div class="flex items-start overflow-y-auto" style="-webkit-overflow-scrolling: touch;">
<div class="flex items-center justify-center shrink-0 w-10 h-10 mr-4 rounded-full">
<svg class="w-8 h-8 text-error" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true">
@@ -33,7 +33,8 @@
</div>
</form>
@else
<form method="dialog" class="flex flex-col w-11/12 max-w-5xl gap-2 rounded-sm modal-box"
<form method="dialog" class="flex flex-col w-11/12 max-w-5xl max-h-[calc(100vh-5rem)] gap-2 rounded-sm modal-box overflow-y-auto"
style="-webkit-overflow-scrolling: touch;"
@if ($submitWireAction) wire:submit={{ $submitWireAction }} @endif
@if (!$noSubmit && !$submitWireAction) wire:submit='submit' @endif>
@isset($modalTitle)
resources/views/components/navbar.blade.php
+111 -127
View File
@@ -1,119 +1,101 @@
<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
switchWidth() {
if (this.full === 'full') {
localStorage.setItem('pageWidth', 'center');
} else {
localStorage.setItem('pageWidth', 'full');
}
window.location.reload();
},
setZoom(zoom) {
localStorage.setItem('zoom', zoom);
window.location.reload();
},
init() {
this.full = localStorage.getItem('pageWidth');
this.zoom = localStorage.getItem('zoom');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const userSettings = localStorage.getItem('theme');
if (userSettings !== 'system') {
return;
}
if (e.matches) {
document.documentElement.classList.add('dark');
<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base"
x-data="{
switchWidth() {
if (this.full === 'full') {
localStorage.setItem('pageWidth', 'center');
} else {
localStorage.setItem('pageWidth', 'full');
}
window.location.reload();
},
setZoom(zoom) {
localStorage.setItem('zoom', zoom);
window.location.reload();
},
init() {
this.full = localStorage.getItem('pageWidth');
this.zoom = localStorage.getItem('zoom');
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const userSettings = localStorage.getItem('theme');
if (userSettings !== 'system') {
return;
}
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
this.queryTheme();
this.checkZoom();
},
setTheme(type) {
this.theme = type;
localStorage.setItem('theme', type);
this.queryTheme();
},
queryTheme() {
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
const userSettings = localStorage.getItem('theme') || 'dark';
localStorage.setItem('theme', userSettings);
if (userSettings === 'dark') {
document.documentElement.classList.add('dark');
this.theme = 'dark';
} else if (userSettings === 'light') {
document.documentElement.classList.remove('dark');
this.theme = 'light';
} else if (darkModePreference) {
this.theme = 'system';
document.documentElement.classList.add('dark');
} else if (!darkModePreference) {
this.theme = 'system';
document.documentElement.classList.remove('dark');
}
});
this.queryTheme();
this.checkZoom();
},
setTheme(type) {
this.theme = type;
localStorage.setItem('theme', type);
this.queryTheme();
},
queryTheme() {
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
const userSettings = localStorage.getItem('theme') || 'dark';
localStorage.setItem('theme', userSettings);
if (userSettings === 'dark') {
document.documentElement.classList.add('dark');
this.theme = 'dark';
} else if (userSettings === 'light') {
document.documentElement.classList.remove('dark');
this.theme = 'light';
} else if (darkModePreference) {
this.theme = 'system';
document.documentElement.classList.add('dark');
} else if (!darkModePreference) {
this.theme = 'system';
document.documentElement.classList.remove('dark');
},
checkZoom() {
if (this.zoom === null) {
this.setZoom(100);
}
if (this.zoom === '90') {
const style = document.createElement('style');
style.textContent = `
html {
font-size: 93.75%;
}
:root {
--vh: 1vh;
}
@media (min-width: 1024px) {
html {
font-size: 87.5%;
}
}
`;
document.head.appendChild(style);
}
}
},
checkZoom() {
if (this.zoom === null) {
this.setZoom(100);
}
if (this.zoom === '90') {
const style = document.createElement('style');
style.textContent = `
html {
font-size: 93.75%;
}
:root {
--vh: 1vh;
}
@media (min-width: 1024px) {
html {
font-size: 87.5%;
}
}
`;
document.head.appendChild(style);
}
}
}">
<div class="flex pt-6 pb-4 pl-2">
}">
<div class="flex lg:pt-6 pt-4 pb-4 pl-2">
<div class="flex flex-col w-full">
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
<a href="/" class="text-2xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
<x-version />
</div>
<div class="pt-1">
<x-dropdown>
<x-slot:title>
<div class="flex justify-end w-8" x-show="theme === 'dark' || theme === 'system'">
<svg class="w-5 h-5 rounded-sm dark:fill-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
</svg>
</div>
<div class="flex justify-end w-8" x-show="theme === 'light'">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
</svg>
</div>
</x-slot:title>
<div class="flex flex-col gap-1">
<div class="font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Color</div>
<button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
<button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
<button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
<div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Width</div>
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
x-show="full === 'full'">Center</button>
<button @click="switchWidth()" class="px-1 dropdown-item-no-padding"
x-show="full === 'center'">Full</button>
<div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Zoom</div>
<button @click="setZoom(100)" class="px-1 dropdown-item-no-padding">100%</button>
<button @click="setZoom(90)" class="px-1 dropdown-item-no-padding">90%</button>
</div>
</x-dropdown>
<div>
<!-- Search button that triggers global search modal -->
<button @click="$dispatch('open-global-search')" type="button" title="Search (Press / or ⌘K)"
class="flex items-center gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-neutral-500 dark:text-neutral-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<kbd
class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 bg-neutral-200 dark:bg-coolgray-200 rounded">/</kbd>
</button>
</div>
<livewire:settings-dropdown />
</div>
<div class="px-2 pt-2 pb-7">
<livewire:switch-team />
@@ -196,8 +178,8 @@
class="{{ request()->is('storages*') ? 'menu-item-active menu-item' : 'menu-item' }}"
href="{{ route('storage.index') }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M4 6a8 3 0 1 0 16 0A8 3 0 1 0 4 6" />
<path d="M4 6v6a8 3 0 0 0 16 0V6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
@@ -211,8 +193,8 @@
class="{{ request()->is('shared-variables*') ? 'menu-item-active menu-item' : 'menu-item' }}"
href="{{ route('shared-variables.index') }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path
d="M5 4C2.5 9 2.5 14 5 20M19 4c2.5 5 2.5 10 0 16M9 9h1c1 0 1 1 2.016 3.527C13 15 13 16 14 16h1" />
<path d="M8 16c1.5 0 3-2 4-3.5S14.5 9 16 9" />
@@ -260,20 +242,22 @@
Tags
</a>
</li>
<li>
<a title="Terminal"
class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
href="{{ route('terminal') }}">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 7l5 5l-5 5" />
<path d="M12 19l7 0" />
</svg>
Terminal
</a>
</li>
@can('canAccessTerminal')
<li>
<a title="Terminal"
class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
href="{{ route('terminal') }}">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 7l5 5l-5 5" />
<path d="M12 19l7 0" />
</svg>
Terminal
</a>
</li>
@endcan
<li>
<a title="Profile"
class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
@@ -307,7 +291,7 @@
Teams
</a>
</li>
@if (isCloud())
@if (isCloud() && auth()->user()->isAdmin())
<li>
<a title="Subscription"
class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
resources/views/components/notification/navbar.blade.php
+4
View File
@@ -23,6 +23,10 @@
href="{{ route('notifications.pushover') }}">
<button>Pushover</button>
</a>
<a class="{{ request()->routeIs('notifications.webhook') ? 'dark:text-white' : '' }}"
href="{{ route('notifications.webhook') }}">
<button>Webhook</button>
</a>
</nav>
</div>
</div>
resources/views/components/resource-view.blade.php
+10 -13
View File
@@ -1,25 +1,22 @@
<div @class([
'transition-all duration-150 box-without-bg dark:bg-coolgray-100 bg-white group',
'hover:border-l-coollabs cursor-pointer' => !$upgrade,
'hover:border-l-red-500 cursor-not-allowed' => $upgrade,
])>
<div @class([
'coolbox group',
'!cursor-not-allowed hover:border-l-red-500' => $upgrade,
])>
<div class="flex items-center">
{{ $logo }}
<div class="flex flex-col pl-2 ">
<div class="dark:text-white text-md">
<div class="w-[4.5rem] h-[4.5rem] flex items-center justify-center text-black dark:text-white shrink-0 rounded-lg overflow-hidden">
{{ $logo }}
</div>
<div class="flex flex-col pl-3 space-y-1">
<div class="dark:text-white text-md font-medium">
{{ $title }}
</div>
@if ($upgrade)
<div>{{ $upgrade }}</div>
@else
<div class="text-xs font-bold dark:text-neutral-500 dark:group-hover:text-neutral-300">
<div class="text-xs dark:text-neutral-400 dark:group-hover:text-neutral-200 line-clamp-2">
{{ $description }}
</div>
@endif
</div>
</div>
@isset($documentation)
<div class="flex-1"></div>
{{ $documentation }}
@endisset
</div>
resources/views/components/security/navbar.blade.php
+11 -1
View File
@@ -6,8 +6,18 @@
<a href="{{ route('security.private-key.index') }}">
<button>Private Keys</button>
</a>
@can('viewAny', App\Models\CloudProviderToken::class)
<a href="{{ route('security.cloud-tokens') }}">
<button>Cloud Tokens</button>
</a>
@endcan
@can('viewAny', App\Models\CloudInitScript::class)
<a href="{{ route('security.cloud-init-scripts') }}">
<button>Cloud-Init Scripts</button>
</a>
@endcan
<a href="{{ route('security.api-tokens') }}">
<button>API tokens</button>
<button>API Tokens</button>
</a>
</nav>
</div>
resources/views/components/server/sidebar-proxy.blade.php
+8 -8
View File
@@ -1,9 +1,9 @@
@if ($server->proxySet())
<div class="flex flex-col items-start gap-2 min-w-fit">
<a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
href="{{ route('server.proxy', $parameters) }}">
<button>Configuration</button>
</a>
<div class="flex flex-col items-start gap-2 min-w-fit">
<a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
href="{{ route('server.proxy', $parameters) }}">
<button>Configuration</button>
</a>
@if ($server->proxySet())
<a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
<button>Dynamic Configurations</button>
@@ -12,5 +12,5 @@
href="{{ route('server.proxy.logs', $parameters) }}">
<button>Logs</button>
</a>
</div>
@endif
@endif
</div>
resources/views/components/server/sidebar-security.blade.php
+4
View File
@@ -3,4 +3,8 @@
href="{{ route('server.security.patches', $parameters) }}">
Server Patching
</a>
<a class="{{ request()->routeIs('server.security.terminal-access') ? 'menu-item menu-item-active' : 'menu-item' }}"
href="{{ route('server.security.terminal-access', $parameters) }}">
Terminal Access
</a>
</div>
resources/views/components/server/sidebar.blade.php
+5
View File
@@ -9,6 +9,11 @@
<a class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">Private Key
</a>
@if ($server->hetzner_server_id)
<a class="menu-item {{ $activeMenu === 'cloud-provider-token' ? 'menu-item-active' : '' }}"
href="{{ route('server.cloud-provider-token', ['server_uuid' => $server->uuid]) }}">Hetzner Token
</a>
@endif
<a class="menu-item {{ $activeMenu === 'ca-certificate' ? 'menu-item-active' : '' }}"
href="{{ route('server.ca-certificate', ['server_uuid' => $server->uuid]) }}">CA Certificate
</a>
resources/views/components/services/advanced.blade.php
+2 -2
View File
@@ -30,14 +30,14 @@
<div class="dropdown-item" @click="$wire.dispatch('forceDeployEvent')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;" class="w-6 h-6" stroke-width="2">
style="--darkreader-inline-stroke: currentColor;" class="w-4 h-4" stroke-width="2">
<path d="M7 7l5 5l-5 5"></path>
<path d="M13 7l5 5l-5 5"></path>
</svg>
Force Deploy
</div>
<div class="dropdown-item" wire:click='stop(true)''>
<svg class="w-6 h-6" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<svg class="w-4 h-4" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M26 20h-6v-2h6zm4 8h-6v-2h6zm-2-4h-6v-2h6z" />
<path fill="currentColor"
d="M17.003 20a4.895 4.895 0 0 0-2.404-4.173L22 3l-1.73-1l-7.577 13.126a5.699 5.699 0 0 0-5.243 1.503C3.706 20.24 3.996 28.682 4.01 29.04a1 1 0 0 0 1 .96h14.991a1 1 0 0 0 .6-1.8c-3.54-2.656-3.598-8.146-3.598-8.2Zm-5.073-3.003A3.11 3.11 0 0 1 15.004 20c0 .038.002.208.017.469l-5.9-2.624a3.8 3.8 0 0 1 2.809-.848ZM15.45 28A5.2 5.2 0 0 1 14 25h-2a6.5 6.5 0 0 0 .968 3h-2.223A16.617 16.617 0 0 1 10 24H8a17.342 17.342 0 0 0 .665 4H6c.031-1.836.29-5.892 1.803-8.553l7.533 3.35A13.025 13.025 0 0 0 17.596 28Z" />
resources/views/components/services/links.blade.php
+1 -7
View File
@@ -5,13 +5,7 @@
</x-slot>
@foreach ($links as $link)
<a class="dropdown-item" target="_blank" href="{{ $link }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ $link }}
<x-external-link class="size-3.5" />{{ $link }}
</a>
@endforeach
</x-dropdown>
resources/views/components/slide-over.blade.php
+7 -1
View File
@@ -1,7 +1,13 @@
@props(['closeWithX' => false, 'fullScreen' => false])
<div x-data="{
slideOverOpen: false
}" {{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
}"
x-init="$watch('slideOverOpen', value => {
if (!value) {
$dispatch('slideOverClosed')
}
})"
{{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
{{ $slot }}
<template x-teleport="body">
<div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif
resources/views/components/status/degraded.blade.php
+23 -5
View File
@@ -1,15 +1,33 @@
@props([
'status' => 'Degraded',
])
@php
// Handle both colon format (backend) and parentheses format (from services.blade.php)
// degraded:unhealthy → Degraded (unhealthy)
// degraded (unhealthy) → degraded (unhealthy) (already formatted, display as-is)
if (str($status)->contains('(')) {
// Already in parentheses format from services.blade.php - use as-is
$displayStatus = $status;
$healthStatus = str($status)->after('(')->before(')')->trim()->value();
} elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
// Colon format from backend - transform it
$parts = explode(':', $status);
$displayStatus = str($parts[0])->headline();
$healthStatus = $parts[1] ?? null;
} else {
// Simple status without health
$displayStatus = str($status)->headline();
$healthStatus = null;
}
@endphp
<div class="flex items-center" >
<x-loading wire:loading.delay.longer />
<span wire:loading.remove.delay.longer class="flex items-center">
<div class="badge badge-warning"></div>
<div class="pl-2 pr-1 text-xs font-bold tracking-widerr dark:text-warning">
{{ str($status)->before(':')->headline() }}
</div>
@if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
<div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
<div class="pl-2 pr-1 text-xs font-bold dark:text-warning">{{ $displayStatus }}</div>
@if ($healthStatus && !str($displayStatus)->contains('('))
<div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
@endif
</span>
</div>
resources/views/components/status/index.blade.php
+12 -5
View File
@@ -5,22 +5,29 @@
])
@if (str($resource->status)->startsWith('running'))
<x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
@elseif(str($resource->status)->startsWith('restarting') ||
str($resource->status)->startsWith('starting') ||
str($resource->status)->startsWith('degraded'))
@elseif(str($resource->status)->startsWith('degraded'))
<x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
@elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
<x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
@else
<x-status.stopped :status="$resource->status" />
@endif
@if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
<div class="flex items-center pl-2">
<span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
({{ $resource->restart_count }}x restarts)
</span>
</div>
@endif
@if (!str($resource->status)->contains('exited') && $showRefreshButton)
<button wire:loading.remove title="Refresh Status" wire:click='checkStatus'
<button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
<svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
</svg>
</button>
<button wire:loading title="Refreshing Status" wire:click='checkStatus'
<button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
<svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
resources/views/components/status/restarting.blade.php
+25 -5
View File
@@ -4,23 +4,43 @@
'lastDeploymentLink' => null,
'noLoading' => false,
])
@php
// Handle both colon format (backend) and parentheses format (from services.blade.php)
// starting:unknown → Starting (unknown)
// starting (unknown) → starting (unknown) (already formatted, display as-is)
if (str($status)->contains('(')) {
// Already in parentheses format from services.blade.php - use as-is
$displayStatus = $status;
$healthStatus = str($status)->after('(')->before(')')->trim()->value();
} elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
// Colon format from backend - transform it
$parts = explode(':', $status);
$displayStatus = str($parts[0])->headline();
$healthStatus = $parts[1] ?? null;
} else {
// Simple status without health
$displayStatus = str($status)->headline();
$healthStatus = null;
}
@endphp
<div class="flex items-center">
@if (!$noLoading)
<x-loading wire:loading.delay.longer />
@endif
<span wire:loading.remove.delay.longer class="flex items-center">
<div class="badge badge-warning"></div>
<div class="pl-2 pr-1 text-xs font-bold tracking-wider dark:text-warning" @if($title) title="{{$title}}" @endif>
<div class="pl-2 pr-1 text-xs font-bold dark:text-warning" @if($title) title="{{$title}}" @endif>
@if ($lastDeploymentLink)
<a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
{{ str($status)->before(':')->headline() }}
{{ $displayStatus }}
</a>
@else
{{ str($status)->before(':')->headline() }}
{{ $displayStatus }}
@endif
</div>
@if (!str($status)->startsWith('Proxy') && !str($status)->contains('('))
<div class="text-xs dark:text-warning">({{ str($status)->after(':') }})</div>
@if ($healthStatus && !str($displayStatus)->contains('('))
<div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
@endif
</span>
</div>
resources/views/components/status/running.blade.php
+49 -7
View File
@@ -4,29 +4,55 @@
'lastDeploymentLink' => null,
'noLoading' => false,
])
@php
// Handle both colon format (backend) and parentheses format (from services.blade.php)
// running:healthy → Running (healthy)
// running (healthy) → running (healthy) (already formatted, display as-is)
if (str($status)->contains('(')) {
// Already in parentheses format from services.blade.php - use as-is
$displayStatus = $status;
$healthStatus = str($status)->after('(')->before(')')->trim()->value();
} elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
// Colon format from backend - transform it
$parts = explode(':', $status);
$displayStatus = str($parts[0])->headline();
$healthStatus = $parts[1] ?? null;
} else {
// Simple status without health
$displayStatus = str($status)->headline();
$healthStatus = null;
}
@endphp
<div class="flex items-center">
<div class="flex items-center">
<div wire:loading.delay.longer wire:target="checkProxy(true)" class="badge badge-warning"></div>
<div wire:loading.remove.delay.longer wire:target="checkProxy(true)" class="badge badge-success"></div>
<div class="pl-2 pr-1 text-xs font-bold tracking-wider text-success"
<div class="pl-2 pr-1 text-xs font-bold text-success"
@if ($title) title="{{ $title }}" @endif>
@if ($lastDeploymentLink)
<a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
{{ str($status)->before(':')->headline() }}
{{ $displayStatus }}
</a>
@else
{{ str($status)->before(':')->headline() }}
{{ $displayStatus }}
@endif
</div>
@if ($healthStatus && !str($displayStatus)->contains('('))
<div class="text-xs text-success">({{ $healthStatus }})</div>
@endif
@php
$showUnknownHelper =
!str($status)->startsWith('Proxy') &&
(str($status)->contains('unknown') || str($healthStatus)->contains('unknown'));
$showUnhealthyHelper =
!str($status)->startsWith('Proxy') &&
!str($status)->contains('(') &&
str($status)->contains('unhealthy');
(str($status)->contains('unhealthy') || str($healthStatus)->contains('unhealthy'));
@endphp
@if ($showUnhealthyHelper)
@if ($showUnknownHelper)
<div class="px-2">
<x-helper
helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>This doesn't mean that the resource is malfunctioning.</span><br><br>- If the resource is accessible, it indicates that no health check is configured - it is not mandatory.<br>- If the resource is not accessible (returning 404 or 503), it may indicate that a health check is needed and has not passed. <span class='dark:text-warning text-coollabs'>Your action is required.</span><br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
helper="No health check configured. <span class='dark:text-warning text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
<x-slot:icon>
<svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg">
@@ -36,6 +62,22 @@
</svg>
</x-slot:icon>
</x-helper>
</div>
@endif
@if ($showUnhealthyHelper)
<div class="px-2">
<x-helper
helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>The health check is failing.</span><br><br>This resource will <span class='dark:text-warning text-coollabs'>NOT work with Traefik</span> as it expects a healthy state. Your action is required to fix the health check or the underlying issue causing it to fail.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
<x-slot:icon>
<svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
</path>
</svg>
</x-slot:icon>
</x-helper>
</div>
@endif
</div>
resources/views/components/status/services.blade.php
+14 -11
View File
@@ -1,23 +1,26 @@
@if (str($complexStatus)->contains('running'))
<x-status.running :status="$complexStatus" />
@elseif(str($complexStatus)->contains('starting'))
<x-status.restarting :status="$complexStatus" />
@elseif(str($complexStatus)->contains('restarting'))
<x-status.restarting :status="$complexStatus" />
@elseif(str($complexStatus)->contains('degraded'))
<x-status.degraded :status="$complexStatus" />
@php
$displayStatus = formatContainerStatus($complexStatus);
@endphp
@if (str($displayStatus)->lower()->contains('running'))
<x-status.running :status="$displayStatus" />
@elseif(str($displayStatus)->lower()->contains('starting'))
<x-status.restarting :status="$displayStatus" />
@elseif(str($displayStatus)->lower()->contains('restarting'))
<x-status.restarting :status="$displayStatus" />
@elseif(str($displayStatus)->lower()->contains('degraded'))
<x-status.degraded :status="$displayStatus" />
@else
<x-status.stopped :status="$complexStatus" />
<x-status.stopped :status="$displayStatus" />
@endif
@if (!str($complexStatus)->contains('exited') && $showRefreshButton)
<button wire:loading.remove title="Refresh Status" wire:click='checkStatus'
<button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
<svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
</svg>
</button>
<button wire:loading title="Refreshing Status" wire:click='checkStatus'
<button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
<svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
resources/views/components/status/stopped.blade.php
+36 -1
View File
@@ -2,12 +2,47 @@
'status' => 'Stopped',
'noLoading' => false,
])
@php
// Handle both colon format (backend) and parentheses format (from services.blade.php)
// For exited containers, health status is hidden (health checks don't run on stopped containers)
// exited:unhealthy → Exited
// exited (unhealthy) → Exited
if (str($status)->contains('(')) {
// Already in parentheses format from services.blade.php - use as-is
$displayStatus = $status;
$healthStatus = str($status)->after('(')->before(')')->trim()->value();
// Don't show health status for exited containers (health checks don't run on stopped containers)
if (str($displayStatus)->lower()->contains('exited')) {
$displayStatus = str($status)->before('(')->trim()->headline();
$healthStatus = null;
}
} elseif (str($status)->contains(':')) {
// Colon format from backend - transform it
$parts = explode(':', $status);
$displayStatus = str($parts[0])->headline();
$healthStatus = $parts[1] ?? null;
// Don't show health status for exited containers (health checks don't run on stopped containers)
if (str($displayStatus)->lower()->contains('exited')) {
$healthStatus = null;
}
} else {
// Simple status without health
$displayStatus = str($status)->headline();
$healthStatus = null;
}
@endphp
<div class="flex items-center">
@if (!$noLoading)
<x-loading wire:loading.delay.longer />
@endif
<span wire:loading.remove.delay.longer class="flex items-center">
<div class="badge badge-error "></div>
<div class="pl-2 pr-1 text-xs font-bold tracking-wider text-error">{{ str($status)->before(':')->headline() }}</div>
<div class="pl-2 pr-1 text-xs font-bold text-error">{{ $displayStatus }}</div>
@if ($healthStatus && !str($displayStatus)->contains('('))
<div class="text-xs text-error">({{ $healthStatus }})</div>
@endif
</span>
</div>
resources/views/components/toast.blade.php
+43 -40
View File
@@ -6,7 +6,7 @@
popToast(custom) {
let html = '';
if (typeof custom != 'undefined') {
html = custom;
html = window.sanitizeHTML(custom);
}
toast(this.title, { description: this.description, type: this.type, position: this.position, html: html })
}
@@ -96,27 +96,27 @@
topToast.style.top = '0px';
}
}
let bottomPositionOfFirstToast = this.getBottomPositionOfElement(topToast);
if (this.toasts.length == 1) return;
let middleToast = document.getElementById(this.toasts[1].id);
middleToast.style.zIndex = 90;
if (this.expanded) {
middleToastPosition = topToast.getBoundingClientRect().height +
this.paddingBetweenToasts + 'px';
if (this.position.includes('bottom')) {
middleToast.style.top = 'auto';
middleToast.style.bottom = middleToastPosition;
} else {
middleToast.style.top = middleToastPosition;
}
middleToast.style.scale = '100%';
middleToast.style.transform = 'translateY(0px)';
} else {
middleToast.style.scale = '94%';
if (this.position.includes('bottom')) {
@@ -126,8 +126,8 @@
middleToast.style.transform = 'translateY(16px)';
}
}
if (this.toasts.length == 2) return;
let bottomToast = document.getElementById(this.toasts[2].id);
bottomToast.style.zIndex = 80;
@@ -136,14 +136,14 @@
this.paddingBetweenToasts +
middleToast.getBoundingClientRect().height +
this.paddingBetweenToasts + 'px';
if (this.position.includes('bottom')) {
bottomToast.style.top = 'auto';
bottomToast.style.bottom = bottomToastPosition;
} else {
bottomToast.style.top = bottomToastPosition;
}
bottomToast.style.scale = '100%';
bottomToast.style.transform = 'translateY(0px)';
} else {
@@ -155,9 +155,9 @@
bottomToast.style.transform = 'translateY(32px)';
}
}
if (this.toasts.length == 3) return;
let burnToast = document.getElementById(this.toasts[3].id);
burnToast.style.zIndex = 70;
@@ -168,14 +168,14 @@
this.paddingBetweenToasts +
bottomToast.getBoundingClientRect().height +
this.paddingBetweenToasts + 'px';
if (this.position.includes('bottom')) {
burnToast.style.top = 'auto';
burnToast.style.bottom = burnToastPosition;
} else {
burnToast.style.top = burnToastPosition;
}
burnToast.style.scale = '100%';
burnToast.style.transform = 'translateY(0px)';
} else {
@@ -183,40 +183,40 @@
this.alignBottom(topToast, burnToast);
burnToast.style.transform = 'translateY(48px)';
}
burnToast.firstElementChild.classList.remove('opacity-100');
burnToast.firstElementChild.classList.add('opacity-0');
let that = this;
// Burn 🔥 (remove) last toast
setTimeout(function() {
that.toasts.pop();
}, 300);
if (this.position.includes('bottom')) {
middleToast.style.top = 'auto';
}
return;
},
alignBottom(element1, element2) {
// Get the top position and height of the first element
let top1 = element1.offsetTop;
let height1 = element1.offsetHeight;
// Get the height of the second element
let height2 = element2.offsetHeight;
// Calculate the top position for the second element
let top2 = top1 + (height1 - height2);
// Apply the calculated top position to the second element
element2.style.top = top2 + 'px';
},
alignTop(element1, element2) {
// Get the top position of the first element
let top1 = element1.offsetTop;
// Apply the same top position to the second element
element2.style.top = top1 + 'px';
},
@@ -244,13 +244,13 @@
$el.style.height = '0px';
return;
}
lastToast = this.toasts[this.toasts.length - 1];
lastToastRectangle = document.getElementById(lastToast.id).getBoundingClientRect();
firstToast = this.toasts[0];
firstToastRectangle = document.getElementById(firstToast.id).getBoundingClientRect();
if (this.toastsHovered) {
if (this.position.includes('bottom')) {
$el.style.height = ((firstToastRectangle.top + firstToastRectangle.height) - lastToastRectangle.top) + 'px';
@@ -276,13 +276,16 @@
if(event.detail.position){
position = event.detail.position;
}
// Sanitize HTML content to prevent XSS
let sanitizedHtml = event.detail.html ? window.sanitizeHTML(event.detail.html) : '';
toasts.unshift({
id: 'toast-' + Math.random().toString(16).slice(2),
show: false,
message: event.detail.message,
description: event.detail.description,
type: event.detail.type,
html: event.detail.html
html: sanitizedHtml
});
"
@mouseenter="toastsHovered=true;" @mouseleave="toastsHovered=false" x-init="if (layout == 'expanded') {
@@ -356,9 +359,9 @@
}, 2000)
}
});
setTimeout(function() {
setTimeout(function() {
if (position.includes('bottom')) {
$el.firstElementChild.classList.remove('opacity-0', 'translate-y-full');
@@ -366,13 +369,13 @@
$el.firstElementChild.classList.remove('opacity-0', '-translate-y-full');
}
$el.firstElementChild.classList.add('opacity-100', 'translate-y-0');
setTimeout(function() {
stackToasts();
}, 10);
}, 5);
}, 50);
this.timeout = setTimeout(function() {
setTimeout(function() {
$el.firstElementChild.classList.remove('opacity-100');
@@ -394,43 +397,43 @@
:class="{ 'p-4': !toast.html, 'p-0': toast.html }">
<template x-if="!toast.html">
<div class="relative w-full">
<div class="flex items-start"
<div class="flex items-center"
:class="{ 'text-green-500': toast.type=='success', 'text-blue-500': toast.type=='info', 'text-orange-400': toast.type=='warning', 'text-red-500': toast.type=='danger', 'text-gray-800': toast.type=='default' }">
<svg x-show="toast.type=='success'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
<svg x-show="toast.type=='success'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM16.7744 9.63269C17.1238 9.20501 17.0604 8.57503 16.6327 8.22559C16.2051 7.87615 15.5751 7.93957 15.2256 8.36725L10.6321 13.9892L8.65936 12.2524C8.24484 11.8874 7.61295 11.9276 7.248 12.3421C6.88304 12.7566 6.92322 13.3885 7.33774 13.7535L9.31046 15.4903C10.1612 16.2393 11.4637 16.1324 12.1808 15.2547L16.7744 9.63269Z"
fill="currentColor"></path>
</svg>
<svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
<svg x-show="toast.type=='info'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V12Z"
fill="currentColor"></path>
</svg>
<svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
<svg x-show="toast.type=='warning'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.44829 4.46472C10.5836 2.51208 13.4105 2.51168 14.5464 4.46401L21.5988 16.5855C22.7423 18.5509 21.3145 21 19.05 21L4.94967 21C2.68547 21 1.25762 18.5516 2.4004 16.5862L9.44829 4.46472ZM11.9995 8C12.5518 8 12.9995 8.44772 12.9995 9V13C12.9995 13.5523 12.5518 14 11.9995 14C11.4473 14 10.9995 13.5523 10.9995 13V9C10.9995 8.44772 11.4473 8 11.9995 8ZM12.0009 15.99C11.4486 15.9892 11.0003 16.4363 10.9995 16.9886L10.9995 16.9986C10.9987 17.5509 11.4458 17.9992 11.9981 18C12.5504 18.0008 12.9987 17.5537 12.9995 17.0014L12.9995 16.9914C13.0003 16.4391 12.5532 15.9908 12.0009 15.99Z"
fill="currentColor"></path>
</svg>
<svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1"
<svg x-show="toast.type=='danger'" class="w-[18px] h-[18px] mr-1.5 -ml-1 flex-shrink-0"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.9996 7C12.5519 7 12.9996 7.44772 12.9996 8V12C12.9996 12.5523 12.5519 13 11.9996 13C11.4474 13 10.9996 12.5523 10.9996 12V8C10.9996 7.44772 11.4474 7 11.9996 7ZM12.001 14.99C11.4488 14.9892 11.0004 15.4363 10.9997 15.9886L10.9996 15.9986C10.9989 16.5509 11.446 16.9992 11.9982 17C12.5505 17.0008 12.9989 16.5537 12.9996 16.0014L12.9996 15.9914C13.0004 15.4391 12.5533 14.9908 12.001 14.99Z"
fill="currentColor"></path>
</svg>
<p class="text-black leading-2 dark:text-neutral-200" x-html="toast.message">
<p class="text-black leading-2 dark:text-neutral-200" x-text="toast.message">
</p>
</div>
<div x-show="toast.description" :class="{ 'pl-5': toast.type!='default' }"
class="mt-1.5 text-xs px-2 opacity-90 whitespace-pre-wrap w-full break-words"
x-html="toast.description"></div>
x-html="window.sanitizeHTML(toast.description)"></div>
</div>
</template>
<template x-if="toast.html">
<div x-html="toast.html"></div>
<div x-html="window.sanitizeHTML(toast.html)"></div>
</template>
<span class="absolute mt-1 text-xs right-[4.4rem] text-success font-bold"
x-show="copyNotification"
resources/views/components/upgrade-progress.blade.php
+152
View File
@@ -0,0 +1,152 @@
@props(['step' => 0])
{{--
Step Mapping (Backend → UI):
Backend steps 1-2 (config download, env update) → UI Step 1: Preparing
Backend step 3 (pulling images) → UI Step 2: Helper + UI Step 3: Image
Backend steps 4-5 (stop/start containers) → UI Step 4: Restart
Backend step 6 (complete) → mapped in JS mapStepToUI() in upgrade.blade.php
The currentStep variable is inherited from parent Alpine component (upgradeModal).
--}}
<div class="w-full max-w-md mx-auto" x-data="{ activeStep: {{ $step }} }" x-effect="activeStep = $el.closest('[x-data]')?.__x?.$data?.currentStep ?? {{ $step }}">
<div class="flex items-center justify-between">
{{-- Step 1: Preparing --}}
<div class="flex items-center flex-1">
<div class="flex flex-col items-center">
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{
'bg-success border-success': currentStep > 1,
'bg-warning/20 border-warning': currentStep === 1,
'border-neutral-400 dark:border-coolgray-300': currentStep < 1
}">
<template x-if="currentStep > 1">
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</template>
<template x-if="currentStep === 1">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</template>
<template x-if="currentStep < 1">
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">1</span>
</template>
</div>
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{
'text-success': currentStep > 1,
'text-warning': currentStep === 1,
'text-neutral-500 dark:text-neutral-400': currentStep < 1
}">Preparing</span>
</div>
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
:class="currentStep > 1 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
</div>
{{-- Step 2: Helper --}}
<div class="flex items-center flex-1">
<div class="flex flex-col items-center">
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{
'bg-success border-success': currentStep > 2,
'bg-warning/20 border-warning': currentStep === 2,
'border-neutral-400 dark:border-coolgray-300': currentStep < 2
}">
<template x-if="currentStep > 2">
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</template>
<template x-if="currentStep === 2">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</template>
<template x-if="currentStep < 2">
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">2</span>
</template>
</div>
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{
'text-success': currentStep > 2,
'text-warning': currentStep === 2,
'text-neutral-500 dark:text-neutral-400': currentStep < 2
}">Helper</span>
</div>
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
:class="currentStep > 2 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
</div>
{{-- Step 3: Image --}}
<div class="flex items-center flex-1">
<div class="flex flex-col items-center">
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{
'bg-success border-success': currentStep > 3,
'bg-warning/20 border-warning': currentStep === 3,
'border-neutral-400 dark:border-coolgray-300': currentStep < 3
}">
<template x-if="currentStep > 3">
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</template>
<template x-if="currentStep === 3">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</template>
<template x-if="currentStep < 3">
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">3</span>
</template>
</div>
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{
'text-success': currentStep > 3,
'text-warning': currentStep === 3,
'text-neutral-500 dark:text-neutral-400': currentStep < 3
}">Image</span>
</div>
<div class="flex-1 h-0.5 mx-2 transition-all duration-300"
:class="currentStep > 3 ? 'bg-success' : 'bg-neutral-300 dark:bg-coolgray-300'"></div>
</div>
{{-- Step 4: Restart --}}
<div class="flex items-center">
<div class="flex flex-col items-center">
<div class="flex items-center justify-center size-8 rounded-full border-2 transition-all duration-300"
:class="{
'bg-success border-success': currentStep > 4,
'bg-warning/20 border-warning': currentStep === 4,
'border-neutral-400 dark:border-coolgray-300': currentStep < 4
}">
<template x-if="currentStep > 4">
<svg class="size-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</template>
<template x-if="currentStep === 4">
<svg class="size-4 text-warning animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</template>
<template x-if="currentStep < 4">
<span class="text-xs font-medium text-neutral-500 dark:text-neutral-400">4</span>
</template>
</div>
<span class="mt-1.5 text-xs font-medium transition-colors duration-300"
:class="{
'text-success': currentStep > 4,
'text-warning': currentStep === 4,
'text-neutral-500 dark:text-neutral-400': currentStep < 4
}">Restart</span>
</div>
</div>
</div>
</div>
resources/views/emails/backup-success-with-s3-warning.blade.php
+9
View File
@@ -0,0 +1,9 @@
<x-emails.layout>
Database backup for {{ $name }} @if($database_name)(db:{{ $database_name }})@endif with frequency of {{ $frequency }} succeeded locally but failed to upload to S3.
S3 Error: {{ $s3_error }}
@if($s3_storage_url)
Check S3 Configuration: {{ $s3_storage_url }}
@endif
</x-emails.layout>
resources/views/emails/email-change-verification.blade.php
+11
View File
@@ -0,0 +1,11 @@
<x-emails.layout>
You have requested to change your email address to: {{ $newEmail }}
Please use the following verification code to confirm this change:
Verification Code: {{ $verificationCode }}
This code is valid for {{ $expiryMinutes }} minutes.
If you did not request this change, please ignore this email and your email address will remain unchanged.
</x-emails.layout>
resources/views/emails/hetzner-deletion-failed.blade.php
+13
View File
@@ -0,0 +1,13 @@
<x-emails.layout>
Failed to delete Hetzner server #{{ $hetznerServerId }} from Hetzner Cloud.
Error:
<pre>
{{ $errorMessage }}
</pre>
The server has been removed from Coolify, but may still exist in your Hetzner Cloud account.
Please check your Hetzner Cloud console and manually delete the server if needed to avoid ongoing charges.
</x-emails.layout>
resources/views/emails/traefik-version-outdated.blade.php
+66
View File
@@ -0,0 +1,66 @@
<x-emails.layout>
{{ $count }} server(s) are running outdated Traefik proxy. Update recommended for security and features.
## Affected Servers
@foreach ($servers as $server)
@php
$serverName = data_get($server, 'name', 'Unknown Server');
$serverUrl = data_get($server, 'url', '#');
$info = data_get($server, 'outdatedInfo', []);
$current = data_get($info, 'current', 'unknown');
$latest = data_get($info, 'latest', 'unknown');
$isPatch = (data_get($info, 'type', 'patch_update') === 'patch_update');
$hasNewerBranch = isset($info['newer_branch_target']);
$hasUpgrades = $hasUpgrades ?? false;
if (!$isPatch || $hasNewerBranch) {
$hasUpgrades = true;
}
// Add 'v' prefix for display
$current = str_starts_with($current, 'v') ? $current : "v{$current}";
$latest = str_starts_with($latest, 'v') ? $latest : "v{$latest}";
// For minor upgrades, use the upgrade_target (e.g., "v3.6")
if (!$isPatch && data_get($info, 'upgrade_target')) {
$upgradeTarget = data_get($info, 'upgrade_target');
$upgradeTarget = str_starts_with($upgradeTarget, 'v') ? $upgradeTarget : "v{$upgradeTarget}";
} else {
// For patch updates, show the full version
$upgradeTarget = $latest;
}
// Get newer branch info if available
if ($hasNewerBranch) {
$newerBranchTarget = data_get($info, 'newer_branch_target', 'unknown');
$newerBranchLatest = data_get($info, 'newer_branch_latest', 'unknown');
$newerBranchLatest = str_starts_with($newerBranchLatest, 'v') ? $newerBranchLatest : "v{$newerBranchLatest}";
}
@endphp
@if ($isPatch && $hasNewerBranch)
- [**{{ $serverName }}**]({{ $serverUrl }}): {{ $current }} → {{ $upgradeTarget }} (patch update available) | Also available: {{ $newerBranchTarget }} (latest patch: {{ $newerBranchLatest }}) - new minor version
@elseif ($isPatch)
- [**{{ $serverName }}**]({{ $serverUrl }}): {{ $current }} → {{ $upgradeTarget }} (patch update available)
@else
- [**{{ $serverName }}**]({{ $serverUrl }}): {{ $current }} (latest patch: {{ $latest }}) → {{ $upgradeTarget }} (new minor version available)
@endif
@endforeach
## Recommendation
It is recommended to test the new Traefik version before switching it in production environments. You can update your proxy configuration by clicking on any server name above.
@if ($hasUpgrades ?? false)
**Important for minor version upgrades:** Before upgrading to a new minor version, please read the [Traefik changelog](https://github.com/traefik/traefik/releases) to understand breaking changes and new features.
@endif
## Next Steps
1. Review the [Traefik release notes](https://github.com/traefik/traefik/releases) for changes
2. Test the new version in a non-production environment
3. Update your proxy configuration when ready
4. Monitor services after the update
---
Click on any server name above to manage its proxy settings.
</x-emails.layout>
resources/views/errors/400.blade.php
+8 -4
View File
@@ -6,13 +6,17 @@
@if ($exception->getMessage())
<p class="text-base leading-7 text-red-500">{{ $exception->getMessage() }}</p>
@else
<p class="text-base leading-7 text-neutral-300">The request could not be understood by the server due to
<p class="text-base leading-7 dark:text-neutral-400 text-black">The request could not be understood by the
server due to
malformed syntax.
</p>
@endif
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/401.blade.php
+7 -4
View File
@@ -3,11 +3,14 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">401</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
<p class="text-base leading-7 text-neutral-300">You don't have permission to access this page.
<p class="text-base leading-7 dark:text-neutral-400 text-black">You don't have permission to access this page.
</p>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/402.blade.php
+6 -3
View File
@@ -4,9 +4,12 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">402</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">Payment required.</h1>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/403.blade.php
+7 -4
View File
@@ -3,11 +3,14 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">403</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">You shall not pass!</h1>
<p class="text-base leading-7 text-neutral-300">You don't have permission to access this page.
<p class="text-base leading-7 dark:text-neutral-400 text-black">You don't have permission to access this page.
</p>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/404.blade.php
+7 -4
View File
@@ -3,12 +3,15 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">404</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">How did you get here?</h1>
<p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
<p class="text-base leading-7 dark:text-neutral-400 text-black">Sorry, we couldn’t find the page you’re looking
for.
</p>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/419.blade.php
+7 -4
View File
@@ -3,12 +3,15 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">419</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">This page is definitely old, not like you!</h1>
<p class="text-base leading-7 text-neutral-300">Sorry, we couldn’t find the page you’re looking
<p class="text-base leading-7 dark:text-neutral-300 text-black">Sorry, we couldn’t find the page you’re looking
for.
</p>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/429.blade.php
+8 -4
View File
@@ -3,12 +3,16 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">429</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">Woah, slow down there!</h1>
<p class="text-base leading-7 text-neutral-300">You're making too many requests. Please wait a few
<p class="text-base leading-7 dark:text-neutral-400 text-black">You're making too many requests. Please wait a
few
seconds before trying again.
</p>
<div class="flex items-center mt-10 gap-x-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
resources/views/errors/500.blade.php
+10 -6
View File
@@ -3,18 +3,22 @@
<div class="w-full max-w-3xl px-8">
<p class="font-mono font-semibold text-red-500 text-[200px] leading-none">500</p>
<h1 class="text-3xl font-bold tracking-tight dark:text-white">Wait, this is not cool...</h1>
<p class="mt-2 text-lg leading-7 text-neutral-300">There has been an error with the following error message:</p>
<p class="mt-2 text-lg leading-7 dark:text-neutral-400 text-black">There has been an error with the following
error message:</p>
@if ($exception->getMessage() !== '')
<div class="mt-6 text-sm text-red-500">
{!! Purify::clean($exception->getMessage()) !!}
</div>
@endif
<div class="flex items-center mt-10 gap-6">
<a href="/">
<x-forms.button>Go back home</x-forms.button>
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a target="_blank" class="text-sm hover:text-neutral-300 flex items-center gap-1" href="{{ config('constants.urls.contact') }}">
Contact support
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
<x-external-link />
</a>
</div>
resources/views/errors/503.blade.php
+9 -2
View File
@@ -3,10 +3,17 @@
<div>
<p class="font-mono font-semibold text-7xl dark:text-warning">503</p>
<h1 class="mt-4 font-bold tracking-tight dark:text-white">We are working on serious things.</h1>
<p class="text-base leading-7 text-black dark:text-neutral-300">Service Unavailable. Be right back. Thanks for your
<p class="text-base leading-7 dark:text-neutral-400 text-black">Service Unavailable. Be right back. Thanks for
your
patience.
</p>
<div class="flex items-center mt-10 gap-x-6">
<div class="flex items-center mt-10 gap-x-2">
<a href="{{ url()->previous() }}">
<x-forms.button>Go back</x-forms.button>
</a>
<a href="{{ route('dashboard') }}">
<x-forms.button>Dashboard</x-forms.button>
</a>
<a target="_blank" class="text-xs" href="{{ config('constants.urls.contact') }}">Contact
support
<x-external-link />
resources/views/layouts/app.blade.php
+17 -7
View File
@@ -4,7 +4,10 @@
@if (isSubscribed() || !isCloud())
<livewire:layout-popups />
@endif
<!-- Global search component - included once to prevent keyboard shortcut duplication -->
<livewire:global-search />
@auth
<livewire:deployments-indicator />
<div x-data="{
open: false,
init() {
@@ -14,12 +17,13 @@
localStorage.setItem('pageWidth', 'full');
}
}
}" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
}" x-cloak class="mx-auto dark:text-inherit text-black"
:class="pageWidth === 'full' ? '' : 'max-w-7xl'">
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-black/80"></div>
<div class="fixed inset-0 flex">
<div class="relative flex flex-1 w-full mr-16 max-w-56 ">
<div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
<div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
<div class="fixed inset-y-0 right-0 h-full flex">
<div class="relative flex flex-1 w-full max-w-56 ">
<div class="absolute top-0 flex justify-center w-16 pt-5 right-full">
<button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
<span class="sr-only">Close sidebar</span>
<svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -42,8 +46,14 @@
</div>
</div>
<div class="sticky top-0 z-40 flex items-center px-4 py-4 gap-x-6 sm:px-6 lg:hidden">
<button type="button" class="-m-2.5 p-2.5 dark:text-warning lg:hidden" x-on:click="open = !open">
<div
class="sticky top-0 z-40 flex items-center justify-between px-4 py-4 gap-x-6 sm:px-6 lg:hidden bg-white/95 dark:bg-base/95 backdrop-blur-sm border-b border-neutral-300/50 dark:border-coolgray-200/50">
<div class="flex items-center gap-3 flex-shrink-0">
<a href="/"
class="text-xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
<livewire:switch-team />
</div>
<button type="button" class="-m-2.5 p-2.5 dark:text-warning" x-on:click="open = !open">
<span class="sr-only">Open sidebar</span>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
resources/views/layouts/base.blade.php
+235 -163
View File
@@ -1,11 +1,21 @@
<!DOCTYPE html>
<html data-theme="dark" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<script>
// Immediate theme application - runs before any rendering
(function () {
const t = localStorage.theme || 'dark';
const d = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList[d ? 'add' : 'remove']('dark');
document.documentElement.setAttribute('data-theme', d ? 'dark' : 'light');
})();
</script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<meta name="theme-color" content="#ffffff" />
<meta name="theme-color" content="#ffffff" id="theme-color-meta" />
<meta name="color-scheme" content="dark light" />
<meta name="Description" content="Coolify: An open-source & self-hostable Heroku / Netlify / Vercel alternative" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="twitter:card" content="summary_large_image" />
@@ -35,12 +45,18 @@
@endphp
<title>{{ $name }}{{ $title ?? 'Coolify' }}</title>
@env('local')
<link rel="icon" href="{{ asset('coolify-logo-dev-transparent.png') }}" type="image/x-icon" />
@else
<link rel="icon" href="{{ asset('coolify-logo.svg') }}" type="image/x-icon" />
<link rel="icon" href="{{ asset('coolify-logo-dev-transparent.png') }}" type="image/png" />
@else
<link rel="icon" href="{{ asset('coolify-logo.svg') }}" type="image/svg+xml" />
@endenv
<meta name="csrf-token" content="{{ csrf_token() }}">
@vite(['resources/js/app.js', 'resources/css/app.css'])
<script>
// Update theme-color meta tag (non-critical, can run async)
const t = localStorage.theme || 'dark';
const isDark = t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
document.getElementById('theme-color-meta')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
</script>
<style>
[x-cloak] {
display: none !important;
@@ -54,51 +70,107 @@
<script type="text/javascript" src="{{ URL::asset('js/echo.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/pusher.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/apexcharts.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/purify.min.js') }}"></script>
@endauth
</head>
@section('body')
<body>
<x-toast />
<script data-navigate-once>
if (!('theme' in localStorage)) {
localStorage.theme = 'dark';
document.documentElement.classList.add('dark')
} else if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark')
} else if (localStorage.theme === 'light') {
document.documentElement.classList.remove('dark')
} else {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}
let theme = localStorage.theme
let baseColor = '#FCD452'
let textColor = '#ffffff'
let editorBackground = '#181818'
let editorTheme = 'blackboard'
<body class="dark:text-inherit text-black">
<x-toast />
<script data-navigate-once>
// Global HTML sanitization function using DOMPurify
window.sanitizeHTML = function (html) {
if (!html) return '';
const URL_RE = /^(https?:|mailto:)/i;
const config = {
ALLOWED_TAGS: ['a', 'b', 'br', 'code', 'del', 'div', 'em', 'i', 'mark', 'p', 'pre', 's', 'span', 'strong',
'u'
],
ALLOWED_ATTR: ['class', 'href', 'target', 'title', 'rel'],
ALLOW_DATA_ATTR: false,
FORBID_TAGS: ['script', 'object', 'embed', 'applet', 'iframe', 'form', 'input', 'button', 'select',
'textarea', 'details', 'summary', 'dialog', 'style'
],
FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange',
'onsubmit', 'ontoggle', 'style'
],
KEEP_CONTENT: true,
RETURN_DOM: false,
RETURN_DOM_FRAGMENT: false,
SANITIZE_DOM: true,
SANITIZE_NAMED_PROPS: true,
SAFE_FOR_TEMPLATES: true,
ALLOWED_URI_REGEXP: URL_RE
};
function checkTheme() {
theme = localStorage.theme
if (theme == 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
if (theme == 'dark') {
baseColor = '#FCD452'
textColor = '#ffffff'
editorBackground = '#181818'
editorTheme = 'blackboard'
} else {
baseColor = 'black'
textColor = '#000000'
editorBackground = '#ffffff'
editorTheme = null
}
// One-time hook registration (idempotent pattern)
if (!window.__dpLinkHook) {
DOMPurify.addHook('afterSanitizeAttributes', node => {
// Remove Alpine.js directives to prevent XSS
if (node.hasAttributes && node.hasAttributes()) {
const attrs = Array.from(node.attributes);
attrs.forEach(attr => {
// Remove x-* attributes (Alpine directives)
if (attr.name.startsWith('x-')) {
node.removeAttribute(attr.name);
}
// Remove @* attributes (Alpine event shorthand)
if (attr.name.startsWith('@')) {
node.removeAttribute(attr.name);
}
// Remove :* attributes (Alpine binding shorthand)
if (attr.name.startsWith(':')) {
node.removeAttribute(attr.name);
}
});
}
// Existing link sanitization
if (node.nodeName === 'A' && node.hasAttribute('href')) {
const href = node.getAttribute('href') || '';
if (!URL_RE.test(href)) node.removeAttribute('href');
if (node.getAttribute('target') === '_blank') {
node.setAttribute('rel', 'noopener noreferrer');
}
}
});
window.__dpLinkHook = true;
}
@auth
return DOMPurify.sanitize(html, config);
};
// Initialize theme if not set
if (!('theme' in localStorage)) {
localStorage.theme = 'dark';
}
let theme = localStorage.theme
let cpuColor = '#1e90ff'
let ramColor = '#00ced1'
let textColor = '#ffffff'
let editorBackground = '#181818'
let editorTheme = 'blackboard'
function checkTheme() {
theme = localStorage.theme
if (theme == 'system') {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
if (theme == 'dark') {
cpuColor = '#1e90ff'
ramColor = '#00ced1'
textColor = '#ffffff'
editorBackground = '#181818'
editorTheme = 'blackboard'
} else {
cpuColor = '#1e90ff'
ramColor = '#00ced1'
textColor = '#000000'
editorBackground = '#ffffff'
editorTheme = null
}
}
@auth
window.Pusher = Pusher;
window.Echo = new Echo({
broadcaster: 'pusher',
@@ -127,131 +199,131 @@
// Maximum number of reconnection attempts
maxAttempts: 15
});
@endauth
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
@endauth
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
function changePasswordFieldType(event) {
let element = event.target
for (let i = 0; i < 10; i++) {
if (element.className === "relative") {
break;
}
element = element.parentElement;
function changePasswordFieldType(event) {
let element = event.target
for (let i = 0; i < 10; i++) {
if (element.className === "relative") {
break;
}
element = element.children[1];
if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
if (element.type === 'password') {
element.type = 'text';
if (element.disabled) return;
element.classList.add('truncate');
this.type = 'text';
} else {
element.type = 'password';
if (element.disabled) return;
element.classList.remove('truncate');
this.type = 'password';
}
element = element.parentElement;
}
element = element.children[1];
if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
if (element.type === 'password') {
element.type = 'text';
if (element.disabled) return;
element.classList.add('truncate');
this.type = 'text';
} else {
element.type = 'password';
if (element.disabled) return;
element.classList.remove('truncate');
this.type = 'password';
}
}
}
function copyToClipboard(text) {
navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
}
document.addEventListener('livewire:init', () => {
window.Livewire.on('reloadWindow', (timeout) => {
if (timeout) {
setTimeout(() => {
window.location.reload();
}, timeout);
return;
} else {
function copyToClipboard(text) {
navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
}
document.addEventListener('livewire:init', () => {
window.Livewire.on('reloadWindow', (timeout) => {
if (timeout) {
setTimeout(() => {
window.location.reload();
}
})
window.Livewire.on('info', (message) => {
if (typeof message === 'string') {
window.toast('Info', {
type: 'info',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Info', {
type: 'info',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'info',
description: message[1],
})
}
})
window.Livewire.on('error', (message) => {
if (typeof message === 'string') {
window.toast('Error', {
type: 'danger',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Error', {
type: 'danger',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'danger',
description: message[1],
})
}
})
window.Livewire.on('warning', (message) => {
if (typeof message === 'string') {
window.toast('Warning', {
type: 'warning',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Warning', {
type: 'warning',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'warning',
description: message[1],
})
}
})
window.Livewire.on('success', (message) => {
if (typeof message === 'string') {
window.toast('Success', {
type: 'success',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Success', {
type: 'success',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'success',
description: message[1],
})
}
})
});
</script>
</body>
}, timeout);
return;
} else {
window.location.reload();
}
})
window.Livewire.on('info', (message) => {
if (typeof message === 'string') {
window.toast('Info', {
type: 'info',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Info', {
type: 'info',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'info',
description: message[1],
})
}
})
window.Livewire.on('error', (message) => {
if (typeof message === 'string') {
window.toast('Error', {
type: 'danger',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Error', {
type: 'danger',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'danger',
description: message[1],
})
}
})
window.Livewire.on('warning', (message) => {
if (typeof message === 'string') {
window.toast('Warning', {
type: 'warning',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Warning', {
type: 'warning',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'warning',
description: message[1],
})
}
})
window.Livewire.on('success', (message) => {
if (typeof message === 'string') {
window.toast('Success', {
type: 'success',
description: message,
})
return;
}
if (message.length == 1) {
window.toast('Success', {
type: 'success',
description: message[0],
})
} else if (message.length == 2) {
window.toast(message[0], {
type: 'success',
description: message[1],
})
}
})
});
</script>
</body>
@show
</html>
</html>
resources/views/layouts/boarding.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
@extends('layouts.base')
@section('body')
<main class="h-full">
<main class="min-h-screen flex items-center justify-center p-4">
{{ $slot }}
</main>
@parent
resources/views/livewire/activity-monitor.blade.php
+1 -1
View File
@@ -5,7 +5,7 @@
])>
@if ($activity)
@if (isset($header))
<div class="flex gap-2 pb-2 flex-shrink-0">
<div class="flex gap-2 pb-2 flex-shrink-0" @if ($isPollingActive) wire:poll.1000ms @endif>
<h3>{{ $header }}</h3>
@if ($isPollingActive)
<x-loading />
resources/views/livewire/admin/index.blade.php
+1 -1
View File
@@ -17,7 +17,7 @@
@if ($foundUsers->count() > 0)
<div class="flex flex-wrap gap-2 pt-4">
@foreach ($foundUsers as $user)
<div class="box w-64 group" wire:click="switchUser({{ $user->id }})">
<div class="coolbox w-64 group" wire:click="switchUser({{ $user->id }})">
<div class="flex flex-col gap-2">
<div class="box-title">{{ $user->name }}</div>
<div class="box-description">{{ $user->email }}</div>
resources/views/livewire/boarding/index.blade.php
+733 -385
View File
File diff suppressed because it is too large. Load diff
resources/views/livewire/dashboard.blade.php
+54 -64
View File
@@ -14,13 +14,29 @@
</div>
@endif
<section>
<h3 class="pb-2">Projects</h3>
<section class="-mt-2">
<div class="flex items-center gap-2 pb-2">
<h3>Projects</h3>
@if ($projects->count() > 0)
<x-modal-input buttonTitle="Add" title="New Project">
<x-slot:content>
<button
class="flex items-center justify-center size-4 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
<svg class="size-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</x-slot:content>
<livewire:project.add-empty />
</x-modal-input>
@endif
</div>
@if ($projects->count() > 0)
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
@foreach ($projects as $project)
<div class="gap-2 border cursor-pointer box group"
wire:click="navigateToProject('{{ $project->uuid }}')">
<div class="relative gap-2 cursor-pointer coolbox group">
<a href="{{ $project->navigateTo() }}" class="absolute inset-0"></a>
<div class="flex flex-1 mx-6">
<div class="flex flex-col justify-center flex-1">
<div class="box-title">{{ $project->name }}</div>
@@ -28,20 +44,24 @@
{{ $project->description }}
</div>
</div>
<div class="flex items-center justify-center gap-2 text-xs font-bold">
<div class="relative z-10 flex items-center justify-center gap-4 text-xs font-bold">
@if ($project->environments->first())
<a class="hover:underline" wire:click.stop
href="{{ route('project.resource.create', [
'project_uuid' => $project->uuid,
'environment_uuid' => $project->environments->first()->uuid,
]) }}">
<span class="p-2 font-bold">+ Add Resource</span>
</a>
@can('createAnyResource')
<a class="hover:underline"
href="{{ route('project.resource.create', [
'project_uuid' => $project->uuid,
'environment_uuid' => $project->environments->first()->uuid,
]) }}">
+ Add Resource
</a>
@endcan
@endif
<a class="hover:underline" wire:click.stop
href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
Settings
</a>
@can('update', $project)
<a class="hover:underline"
href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
Settings
</a>
@endcan
</div>
</div>
</div>
@@ -61,13 +81,29 @@
</section>
<section>
<h3 class="pb-2">Servers</h3>
<div class="flex items-center gap-2 pb-2">
<h3>Servers</h3>
@if ($servers->count() > 0 && $privateKeys->count() > 0)
<x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
<x-slot:content>
<button
class="flex items-center justify-center size-4 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
<svg class="size-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
</x-slot:content>
<livewire:server.create />
</x-modal-input>
@endif
</div>
@if ($servers->count() > 0)
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
@foreach ($servers as $server)
<a href="{{ route('server.show', ['server_uuid' => data_get($server, 'uuid')]) }}"
@class([
'gap-2 border cursor-pointer box group',
'gap-2 border cursor-pointer coolbox group',
'border-red-500' =>
!$server->settings->is_reachable || $server->settings->force_disabled,
])>
@@ -121,50 +157,4 @@
@endif
@endif
</section>
@if ($servers->count() > 0 && $projects->count() > 0)
<section>
<div class="flex items-start gap-2">
<h3 class="pb-2">Deployments</h3>
@if (count($deploymentsPerServer) > 0)
<x-loading />
@endif
<x-modal-confirmation title="Confirm Cleanup Queues?" buttonTitle="Cleanup Queues" isErrorButton
submitAction="cleanupQueue" :actions="['All running Deployment Queues will be cleaned up.']" :confirmWithText="false" :confirmWithPassword="false"
step2ButtonText="Permanently Cleanup Deployment Queues" :dispatchEvent="true"
dispatchEventType="success" dispatchEventMessage="Deployment Queues cleanup started." />
</div>
<div wire:poll.3000ms="loadDeployments" class="grid grid-cols-1">
@forelse ($deploymentsPerServer as $serverName => $deployments)
<h4 class="pb-2">{{ $serverName }}</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',
'dark:border-coolgray-300' => data_get($deployment, 'status') === 'queued',
'border-yellow-500' => data_get($deployment, 'status') === 'in_progress',
])>
<div class="flex flex-col justify-center mx-6">
<div class="box-title">
{{ data_get($deployment, 'application_name') }}
</div>
@if (data_get($deployment, 'pull_request_id') !== 0)
<div class="box-description">
PR #{{ data_get($deployment, 'pull_request_id') }}
</div>
@endif
<div class="box-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>
</section>
@endif
</div>
resources/views/livewire/deployments-indicator.blade.php
+94
View File
@@ -0,0 +1,94 @@
<div wire:poll.3000ms x-data="{
expanded: @entangle('expanded'),
reduceOpacity: @js($this->shouldReduceOpacity)
}" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
@if ($this->deploymentCount > 0)
<div class="relative transition-opacity duration-200"
:class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">
<!-- Indicator Button -->
<button @click="expanded = !expanded"
class="flex items-center gap-2 px-4 py-2 rounded-lg shadow-lg transition-all duration-200 dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200 hover:shadow-xl">
<!-- Animated spinner -->
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<!-- Deployment count -->
<span class="text-sm font-medium dark:text-neutral-200 text-gray-800">
{{ $this->deploymentCount }} {{ Str::plural('deployment', $this->deploymentCount) }}
</span>
<!-- Expand/collapse icon -->
<svg class="w-4 h-4 transition-transform duration-200 dark:text-neutral-400 text-gray-600"
:class="{ 'rotate-180': expanded }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- Expanded deployment list -->
<div x-show="expanded" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-2" x-cloak
class="absolute bottom-full mb-2 w-80 max-h-96 overflow-y-auto rounded-lg shadow-xl dark:bg-coolgray-100 bg-white dark:border dark:border-coolgray-200">
<div class="p-4 space-y-3">
@foreach ($this->deployments as $deployment)
<a href="{{ $deployment->deployment_url }}"
class="flex items-start gap-3 p-3 rounded-lg dark:bg-coolgray-200 bg-gray-50 transition-all duration-200 hover:ring-2 hover:ring-coollabs dark:hover:ring-warning cursor-pointer">
<!-- Status indicator -->
<div class="flex-shrink-0 mt-1">
@if ($deployment->status === 'in_progress')
<svg class="w-4 h-4 text-coollabs dark:text-warning animate-spin"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
@else
<svg class="w-4 h-4 dark:text-neutral-400 text-gray-500" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
@endif
</div>
<!-- Deployment info -->
<div class="flex-1 min-w-0">
<div class="text-sm font-medium dark:text-neutral-200 text-gray-900 truncate">
{{ $deployment->application_name }}
</div>
<p class="text-xs dark:text-neutral-400 text-gray-600 mt-1">
{{ $deployment->application?->environment?->project?->name }} /
{{ $deployment->application?->environment?->name }}
</p>
<p class="text-xs dark:text-neutral-400 text-gray-600">
{{ $deployment->server_name }}
</p>
@if ($deployment->pull_request_id)
<p class="text-xs dark:text-neutral-400 text-gray-600">
PR #{{ $deployment->pull_request_id }}
</p>
@endif
<p class="text-xs mt-1 capitalize" :class="{
'text-coollabs dark:text-warning': '{{ $deployment->status }}' === 'in_progress',
'dark:text-neutral-400 text-gray-500': '{{ $deployment->status }}' === 'queued'
}">
{{ str_replace('_', ' ', $deployment->status) }}
</p>
</div>
</a>
@endforeach
</div>
</div>
</div>
@endif
</div>
resources/views/livewire/destination/index.blade.php
+8 -6
View File
@@ -5,17 +5,19 @@
<div class="flex items-center gap-2">
<h1>Destinations</h1>
@if ($servers->count() > 0)
<x-modal-input buttonTitle="+ Add" title="New Destination">
<livewire:destination.new.docker />
</x-modal-input>
@can('createAnyResource')
<x-modal-input buttonTitle="+ Add" title="New Destination">
<livewire:destination.new.docker />
</x-modal-input>
@endcan
@endif
</div>
<div class="subtitle">Network endpoints to deploy your resources.</div>
<div class="grid gap-4 lg:grid-cols-2">
<div class="grid gap-4 lg:grid-cols-2 -mt-1">
@forelse ($servers as $server)
@forelse ($server->destinations() as $destination)
@if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
<a class="box group"
<a class="coolbox group"
href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
<div class="flex flex-col justify-center mx-6">
<div class="box-title">{{ $destination->name }}</div>
@@ -24,7 +26,7 @@
</a>
@endif
@if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
<a class="box group"
<a class="coolbox group"
href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
<div class="flex flex-col mx-6">
<div class="box-title">{{ $destination->name }}</div>
resources/views/livewire/destination/new/docker.blade.php
+24 -18
View File
@@ -1,18 +1,24 @@
<div class="w-full ">
<div class="subtitle">Destinations are used to segregate resources by network.</div>
<form class="flex flex-col gap-4" wire:submit='submit'>
<div class="flex gap-2">
<x-forms.input id="name" label="Name" required />
<x-forms.input id="network" label="Network" required />
</div>
<x-forms.select id="serverId" label="Select a server" required wire:change="generateName">
<option disabled>Select a server</option>
@foreach ($servers as $server)
<option value="{{ $server->id }}">{{ $server->name }}</option>
@endforeach
</x-forms.select>
<x-forms.button type="submit">
Continue
</x-forms.button>
</form>
</div>
@can('createAnyResource')
<div class="w-full ">
<div class="subtitle">Destinations are used to segregate resources by network.</div>
<form class="flex flex-col gap-4" wire:submit='submit'>
<div class="flex gap-2">
<x-forms.input id="name" label="Name" required />
<x-forms.input id="network" label="Network" required />
</div>
<x-forms.select id="serverId" label="Select a server" required wire:change="generateName">
<option disabled>Select a server</option>
@foreach ($servers as $server)
<option value="{{ $server->id }}">{{ $server->name }}</option>
@endforeach
</x-forms.select>
<x-forms.button type="submit">
Continue
</x-forms.button>
</form>
</div>
@else
<x-callout type="warning" title="Permission Required">
You don't have permission to create new destinations. Please contact your team administrator for access.
</x-callout>
@endcan
resources/views/livewire/destination/show.blade.php
+5 -5
View File
@@ -2,14 +2,14 @@
<form class="flex flex-col">
<div class="flex items-center gap-2">
<h1>Destination</h1>
<x-forms.button wire:click.prevent='submit' type="submit">
Save
</x-forms.button>
<x-forms.button canGate="update" :canResource="$destination" wire:click.prevent='submit'
type="submit">Save</x-forms.button>
@if ($network !== 'coolify')
<x-modal-confirmation title="Confirm Destination Deletion?" buttonTitle="Delete Destination" isErrorButton
submitAction="delete" :actions="['This will delete the selected destination/network.']" confirmationText="{{ $destination->name }}"
confirmationLabel="Please confirm the execution of the actions by entering the Destination Name below"
shortConfirmationLabel="Destination Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
shortConfirmationLabel="Destination Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete"
canGate="delete" :canResource="$destination" />
@endif
</div>
@@ -19,7 +19,7 @@
<div class="subtitle ">A swarm Docker network. WIP</div>
@endif
<div class="flex gap-2">
<x-forms.input id="name" label="Name" />
<x-forms.input canGate="update" :canResource="$destination" id="name" label="Name" />
<x-forms.input id="serverIp" label="Server IP" readonly />
@if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
<x-forms.input id="network" label="Docker Network" readonly />
resources/views/livewire/global-search.blade.php
+1097
View File
File diff suppressed because it is too large. Load diff
resources/views/livewire/notifications/discord.blade.php
+21 -19
View File
@@ -6,27 +6,27 @@
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Discord</h2>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if ($discordEnabled)
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
<x-forms.button canGate="sendTest" :canResource="$settings" class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
<x-forms.button canGate="sendTest" :canResource="$settings" disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Notification
</x-forms.button>
@endif
</div>
<div class="w-48">
<x-forms.checkbox instantSave="instantSaveDiscordEnabled" id="discordEnabled" label="Enabled" />
<x-forms.checkbox instantSave="instantSaveDiscordPingEnabled" id="discordPingEnabled"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveDiscordEnabled" id="discordEnabled" label="Enabled" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveDiscordPingEnabled" id="discordPingEnabled"
helper="If enabled, a ping (@here) will be sent to the notification when a critical event happens."
label="Ping Enabled" />
</div>
<x-forms.input type="password"
<x-forms.input canGate="update" :canResource="$settings" type="password"
helper="Create a Discord Server and generate a Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks' target='_blank'>Webhook Documentation</a>"
required id="discordWebhookUrl" label="Webhook" />
</form>
@@ -38,11 +38,11 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessDiscordNotifications"
label="Deployment Success" />
<x-forms.checkbox instantSave="saveModel" id="deploymentFailureDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureDiscordNotifications"
label="Deployment Failure" />
<x-forms.checkbox instantSave="saveModel"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
helper="Send a notification when a container status changes. It will notify for Stopped and Restarted events of a container."
id="statusChangeDiscordNotifications" label="Container Status Changes" />
</div>
@@ -50,36 +50,38 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessDiscordNotifications"
label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailureDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureDiscordNotifications"
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessDiscordNotifications"
label="Scheduled Task Success" />
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailureDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureDiscordNotifications"
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessDiscordNotifications"
label="Docker Cleanup Success" />
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupFailureDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureDiscordNotifications"
label="Docker Cleanup Failure" />
<x-forms.checkbox instantSave="saveModel" id="serverDiskUsageDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageDiscordNotifications"
label="Server Disk Usage" />
<x-forms.checkbox instantSave="saveModel" id="serverReachableDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableDiscordNotifications"
label="Server Reachable" />
<x-forms.checkbox instantSave="saveModel" id="serverUnreachableDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableDiscordNotifications"
label="Server Unreachable" />
<x-forms.checkbox instantSave="saveModel" id="serverPatchDiscordNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchDiscordNotifications"
label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedDiscordNotifications"
label="Traefik Proxy Outdated" />
</div>
</div>
</div>
resources/views/livewire/notifications/email.blade.php
+51 -47
View File
@@ -6,41 +6,43 @@
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Email</h2>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if (auth()->user()->isAdminFromSession())
@if ($team->isNotificationEnabled('email'))
<x-modal-input buttonTitle="Send Test Email" title="Send Test Email">
<form wire:submit.prevent="sendTestEmail" class="flex flex-col w-full gap-2">
<x-forms.input wire:model="testEmailAddress" placeholder="test@example.com"
id="testEmailAddress" label="Recipient" required />
<x-forms.button type="submit" @click="modalOpen=false">
Send Email
</x-forms.button>
</form>
</x-modal-input>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Email
</x-forms.button>
@endif
@can('sendTest', $settings)
@if ($team->isNotificationEnabled('email'))
<x-modal-input buttonTitle="Send Test Email" title="Send Test Email">
<form wire:submit.prevent="sendTestEmail" class="flex flex-col w-full gap-2">
<x-forms.input wire:model="testEmailAddress" placeholder="test@example.com"
id="testEmailAddress" label="Recipient" required />
<x-forms.button type="submit" @click="modalOpen=false">
Send Email
</x-forms.button>
</form>
</x-modal-input>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Email
</x-forms.button>
@endif
@endcan
@endif
</div>
@if (!isCloud())
<div class="w-96">
<x-forms.checkbox instantSave="instantSave()" id="useInstanceEmailSettings"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSave()" id="useInstanceEmailSettings"
label="Use system wide (transactional) email settings" />
</div>
@endif
@if (!$useInstanceEmailSettings)
<div class="flex gap-2">
<x-forms.input required id="smtpFromName" helper="Name used in emails." label="From Name" />
<x-forms.input required id="smtpFromAddress" helper="Email address used in emails."
<x-forms.input canGate="update" :canResource="$settings" required id="smtpFromName" helper="Name used in emails." label="From Name" />
<x-forms.input canGate="update" :canResource="$settings" required id="smtpFromAddress" helper="Email address used in emails."
label="From Address" />
</div>
@if (isInstanceAdmin() && !$useInstanceEmailSettings)
<x-forms.button wire:click='copyFromInstanceSettings'>
<x-forms.button canGate="update" :canResource="$settings" wire:click='copyFromInstanceSettings'>
Copy from Instance Settings
</x-forms.button>
@endif
@@ -48,60 +50,60 @@
</form>
@if (isCloud())
<div class="w-64 py-4">
<x-forms.checkbox instantSave="instantSave()" id="useInstanceEmailSettings"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSave()" id="useInstanceEmailSettings"
label="Use Hosted Email Service" />
</div>
@endif
@if (!$useInstanceEmailSettings)
<div class="flex flex-col gap-4">
<form wire:submit='submitSmtp'
class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
class="p-4 border dark:border-coolgray-300 border-neutral-200 rounded-lg flex flex-col gap-2">
<div class="flex items-center gap-2">
<h3>SMTP Server</h3>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
</div>
<div class="w-32">
<x-forms.checkbox wire:model="smtpEnabled" instantSave="instantSave('SMTP')" id="smtpEnabled"
<x-forms.checkbox canGate="update" :canResource="$settings" wire:model="smtpEnabled" instantSave="instantSave('SMTP')" id="smtpEnabled"
label="Enabled" />
</div>
<div class="flex flex-col">
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
<x-forms.input required id="smtpHost" placeholder="smtp.mailgun.org" label="Host" />
<x-forms.input required id="smtpPort" placeholder="587" label="Port" />
<x-forms.select required id="smtpEncryption" label="Encryption">
<x-forms.input canGate="update" :canResource="$settings" required id="smtpHost" placeholder="smtp.mailgun.org" label="Host" />
<x-forms.input canGate="update" :canResource="$settings" required id="smtpPort" placeholder="587" label="Port" />
<x-forms.select canGate="update" :canResource="$settings" required id="smtpEncryption" label="Encryption">
<option value="starttls">StartTLS</option>
<option value="tls">TLS/SSL</option>
<option value="none">None</option>
</x-forms.select>
</div>
<div class="flex flex-col w-full gap-2 xl:flex-row">
<x-forms.input id="smtpUsername" label="SMTP Username" />
<x-forms.input id="smtpPassword" type="password" label="SMTP Password" />
<x-forms.input id="smtpTimeout" helper="Timeout value for sending emails."
<x-forms.input canGate="update" :canResource="$settings" id="smtpUsername" label="SMTP Username" />
<x-forms.input canGate="update" :canResource="$settings" id="smtpPassword" type="password" label="SMTP Password" />
<x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" helper="Timeout value for sending emails."
label="Timeout" />
</div>
</div>
</div>
</form>
<form wire:submit='submitResend'
class="p-4 border dark:border-coolgray-300 border-neutral-200 flex flex-col gap-2">
class="p-4 border dark:border-coolgray-300 border-neutral-200 rounded-lg flex flex-col gap-2">
<div class="flex items-center gap-2">
<h3>Resend</h3>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
</div>
<div class="w-32">
<x-forms.checkbox wire:model="resendEnabled" instantSave="instantSave('Resend')" id="resendEnabled"
<x-forms.checkbox canGate="update" :canResource="$settings" wire:model="resendEnabled" instantSave="instantSave('Resend')" id="resendEnabled"
label="Enabled" />
</div>
<div class="flex flex-col">
<div class="flex flex-col gap-4">
<div class="flex flex-col w-full gap-2 xl:flex-row">
<x-forms.input required type="password" id="resendApiKey" placeholder="API key"
<x-forms.input canGate="update" :canResource="$settings" required type="password" id="resendApiKey" placeholder="API key"
label="API Key" />
</div>
</div>
@@ -117,11 +119,11 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessEmailNotifications"
label="Deployment Success" />
<x-forms.checkbox instantSave="saveModel" id="deploymentFailureEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureEmailNotifications"
label="Deployment Failure" />
<x-forms.checkbox instantSave="saveModel"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
helper="Send an email when a container status changes. It will send and email for Stopped and Restarted events of a container."
id="statusChangeEmailNotifications" label="Container Status Changes" />
</div>
@@ -129,36 +131,38 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessEmailNotifications"
label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailureEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureEmailNotifications"
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessEmailNotifications"
label="Scheduled Task Success" />
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailureEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureEmailNotifications"
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessEmailNotifications"
label="Docker Cleanup Success" />
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupFailureEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureEmailNotifications"
label="Docker Cleanup Failure" />
<x-forms.checkbox instantSave="saveModel" id="serverDiskUsageEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageEmailNotifications"
label="Server Disk Usage" />
<x-forms.checkbox instantSave="saveModel" id="serverReachableEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableEmailNotifications"
label="Server Reachable" />
<x-forms.checkbox instantSave="saveModel" id="serverUnreachableEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableEmailNotifications"
label="Server Unreachable" />
<x-forms.checkbox instantSave="saveModel" id="serverPatchEmailNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchEmailNotifications"
label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedEmailNotifications"
label="Traefik Proxy Outdated" />
</div>
</div>
</div>
resources/views/livewire/notifications/pushover.blade.php
+21 -19
View File
@@ -6,28 +6,28 @@
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Pushover</h2>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if ($pushoverEnabled)
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
<x-forms.button canGate="sendTest" :canResource="$settings" class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
<x-forms.button canGate="sendTest" :canResource="$settings" disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Notification
</x-forms.button>
@endif
</div>
<div class="w-32">
<x-forms.checkbox instantSave="instantSavePushoverEnabled" id="pushoverEnabled" label="Enabled" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSavePushoverEnabled" id="pushoverEnabled" label="Enabled" />
</div>
<div class="flex gap-2">
<x-forms.input type="password"
<x-forms.input canGate="update" :canResource="$settings" type="password"
helper="Get your User Key in Pushover. You need to be logged in to Pushover to see your user key in the top right corner. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/' target='_blank'>Pushover Dashboard</a>"
required id="pushoverUserKey" label="User Key" />
<x-forms.input type="password"
<x-forms.input canGate="update" :canResource="$settings" type="password"
helper="Generate an API Token/Key in Pushover by creating a new application. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/apps/build' target='_blank'>Create Pushover Application</a>"
required id="pushoverApiToken" label="API Token" />
</div>
@@ -40,11 +40,11 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessPushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessPushoverNotifications"
label="Deployment Success" />
<x-forms.checkbox instantSave="saveModel" id="deploymentFailurePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailurePushoverNotifications"
label="Deployment Failure" />
<x-forms.checkbox instantSave="saveModel"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
helper="Send a notification when a container status changes. It will notify for Stopped and Restarted events of a container."
id="statusChangePushoverNotifications" label="Container Status Changes" />
</div>
@@ -52,36 +52,38 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessPushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessPushoverNotifications"
label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailurePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailurePushoverNotifications"
label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessPushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessPushoverNotifications"
label="Scheduled Task Success" />
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailurePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailurePushoverNotifications"
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessPushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessPushoverNotifications"
label="Docker Cleanup Success" />
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupFailurePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailurePushoverNotifications"
label="Docker Cleanup Failure" />
<x-forms.checkbox instantSave="saveModel" id="serverDiskUsagePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsagePushoverNotifications"
label="Server Disk Usage" />
<x-forms.checkbox instantSave="saveModel" id="serverReachablePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachablePushoverNotifications"
label="Server Reachable" />
<x-forms.checkbox instantSave="saveModel" id="serverUnreachablePushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachablePushoverNotifications"
label="Server Unreachable" />
<x-forms.checkbox instantSave="saveModel" id="serverPatchPushoverNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchPushoverNotifications"
label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedPushoverNotifications"
label="Traefik Proxy Outdated" />
</div>
</div>
</div>
resources/views/livewire/notifications/slack.blade.php
+19 -18
View File
@@ -6,24 +6,24 @@
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Slack</h2>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if ($slackEnabled)
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
<x-forms.button canGate="sendTest" :canResource="$settings" class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
<x-forms.button canGate="sendTest" :canResource="$settings" disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Notification
</x-forms.button>
@endif
</div>
<div class="w-32">
<x-forms.checkbox instantSave="instantSaveSlackEnabled" id="slackEnabled" label="Enabled" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveSlackEnabled" id="slackEnabled" label="Enabled" />
</div>
<x-forms.input type="password"
<x-forms.input canGate="update" :canResource="$settings" type="password"
helper="Create a Slack APP and generate a Incoming Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://api.slack.com/apps' target='_blank'>Create Slack APP</a>"
required id="slackWebhookUrl" label="Webhook" />
</form>
@@ -35,11 +35,11 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessSlackNotifications"
label="Deployment Success" />
<x-forms.checkbox instantSave="saveModel" id="deploymentFailureSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureSlackNotifications"
label="Deployment Failure" />
<x-forms.checkbox instantSave="saveModel"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
helper="Send a notification when a container status changes. It will notify for Stopped and Restarted events of a container."
id="statusChangeSlackNotifications" label="Container Status Changes" />
</div>
@@ -47,33 +47,34 @@
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessSlackNotifications" label="Backup Success" />
<x-forms.checkbox instantSave="saveModel" id="backupFailureSlackNotifications" label="Backup Failure" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessSlackNotifications" label="Backup Success" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureSlackNotifications" label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessSlackNotifications"
label="Scheduled Task Success" />
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailureSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureSlackNotifications"
label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessSlackNotifications"
label="Docker Cleanup Success" />
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupFailureSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureSlackNotifications"
label="Docker Cleanup Failure" />
<x-forms.checkbox instantSave="saveModel" id="serverDiskUsageSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageSlackNotifications"
label="Server Disk Usage" />
<x-forms.checkbox instantSave="saveModel" id="serverReachableSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableSlackNotifications"
label="Server Reachable" />
<x-forms.checkbox instantSave="saveModel" id="serverUnreachableSlackNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableSlackNotifications"
label="Server Unreachable" />
<x-forms.checkbox instantSave="saveModel" id="serverPatchSlackNotifications" label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchSlackNotifications" label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedSlackNotifications" label="Traefik Proxy Outdated" />
</div>
</div>
</div>
resources/views/livewire/notifications/telegram.blade.php
+41 -32
View File
@@ -6,28 +6,28 @@
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Telegram</h2>
<x-forms.button type="submit">
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if ($telegramEnabled)
<x-forms.button class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
<x-forms.button canGate="sendTest" :canResource="$settings" class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button>
@else
<x-forms.button disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
<x-forms.button canGate="sendTest" :canResource="$settings" disabled class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Notification
</x-forms.button>
@endif
</div>
<div class="w-32">
<x-forms.checkbox instantSave="instantSaveTelegramEnabled" id="telegramEnabled" label="Enabled" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveTelegramEnabled" id="telegramEnabled" label="Enabled" />
</div>
<div class="flex gap-2">
<x-forms.input type="password" autocomplete="new-password"
<x-forms.input canGate="update" :canResource="$settings" type="password" autocomplete="new-password"
helper="Get it from the <a class='inline-block underline dark:text-white' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
required id="telegramToken" label="Bot API Token" />
<x-forms.input type="password" autocomplete="new-password"
<x-forms.input canGate="update" :canResource="$settings" type="password" autocomplete="new-password"
helper="Add your bot to a group chat and add its Chat ID here." required id="telegramChatId"
label="Chat ID" />
</div>
@@ -42,27 +42,27 @@
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="deploymentSuccessTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessTelegramNotifications"
label="Deployment Success" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsDeploymentSuccessThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="deploymentFailureTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureTelegramNotifications"
label="Deployment Failure" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsDeploymentFailureThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="statusChangeTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="statusChangeTelegramNotifications"
label="Container Status Changes"
helper="Send a notification when a container status changes. It will send a notification for Stopped and Restarted events of a container." />
</div>
<x-forms.input type="password" id="telegramNotificationsStatusChangeThreadId"
<x-forms.input canGate="update" :canResource="$settings" type="password" id="telegramNotificationsStatusChangeThreadId"
placeholder="Custom Telegram Thread ID" />
</div>
</div>
@@ -72,19 +72,19 @@
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="backupSuccessTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessTelegramNotifications"
label="Backup Success" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsBackupSuccessThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="backupFailureTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureTelegramNotifications"
label="Backup Failure" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsBackupFailureThreadId" />
</div>
</div>
@@ -95,19 +95,19 @@
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskSuccessTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessTelegramNotifications"
label="Scheduled Task Success" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsScheduledTaskSuccessThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="scheduledTaskFailureTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureTelegramNotifications"
label="Scheduled Task Failure" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsScheduledTaskFailureThreadId" />
</div>
</div>
@@ -118,57 +118,66 @@
<div class="flex flex-col gap-1.5 pl-1">
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupSuccessTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessTelegramNotifications"
label="Docker Cleanup Success" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsDockerCleanupSuccessThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="dockerCleanupFailureTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureTelegramNotifications"
label="Docker Cleanup Failure" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsDockerCleanupFailureThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="serverDiskUsageTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageTelegramNotifications"
label="Server Disk Usage" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsServerDiskUsageThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="serverReachableTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableTelegramNotifications"
label="Server Reachable" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsServerReachableThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="serverUnreachableTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableTelegramNotifications"
label="Server Unreachable" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsServerUnreachableThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox instantSave="saveModel" id="serverPatchTelegramNotifications"
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchTelegramNotifications"
label="Server Patching" />
</div>
<x-forms.input type="password" placeholder="Custom Telegram Thread ID"
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsServerPatchThreadId" />
</div>
<div class="pl-1 flex gap-2">
<div class="w-96">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedTelegramNotifications"
label="Traefik Proxy Outdated" />
</div>
<x-forms.input canGate="update" :canResource="$settings" type="password" placeholder="Custom Telegram Thread ID"
id="telegramNotificationsTraefikOutdatedThreadId" />
</div>
</div>
</div>
</div>
resources/views/livewire/notifications/webhook.blade.php
+91
View File
@@ -0,0 +1,91 @@
<div>
<x-slot:title>
Notifications | Coolify
</x-slot>
<x-notification.navbar />
<form wire:submit='submit' class="flex flex-col gap-4 pb-4">
<div class="flex items-center gap-2">
<h2>Webhook</h2>
<x-forms.button canGate="update" :canResource="$settings" type="submit">
Save
</x-forms.button>
@if ($webhookEnabled)
<x-forms.button canGate="sendTest" :canResource="$settings"
class="normal-case dark:text-white btn btn-xs no-animation btn-primary"
wire:click="sendTestNotification">
Send Test Notification
</x-forms.button>
@else
<x-forms.button canGate="sendTest" :canResource="$settings" disabled
class="normal-case dark:text-white btn btn-xs no-animation btn-primary">
Send Test Notification
</x-forms.button>
@endif
</div>
<div class="w-48">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveWebhookEnabled"
id="webhookEnabled" label="Enabled" />
</div>
<div class="flex items-end gap-2">
<x-forms.input canGate="update" :canResource="$settings" type="password"
helper="Enter a valid HTTP or HTTPS URL. Coolify will send POST requests to this endpoint when events occur."
required id="webhookUrl" label="Webhook URL (POST)" />
</div>
</form>
<h2 class="mt-4">Notification Settings</h2>
<p class="mb-4">
Select events for which you would like to receive webhook notifications.
</p>
<div class="flex flex-col gap-4 max-w-2xl">
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Deployments</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="deploymentSuccessWebhookNotifications" label="Deployment Success" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="deploymentFailureWebhookNotifications" label="Deployment Failure" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
helper="Send a notification when a container status changes. It will notify for Stopped and Restarted events of a container."
id="statusChangeWebhookNotifications" label="Container Status Changes" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Backups</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="backupSuccessWebhookNotifications" label="Backup Success" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="backupFailureWebhookNotifications" label="Backup Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Scheduled Tasks</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="scheduledTaskSuccessWebhookNotifications" label="Scheduled Task Success" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="scheduledTaskFailureWebhookNotifications" label="Scheduled Task Failure" />
</div>
</div>
<div class="border dark:border-coolgray-300 border-neutral-200 p-4 rounded-lg">
<h3 class="font-medium mb-3">Server</h3>
<div class="flex flex-col gap-1.5 pl-1">
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="dockerCleanupSuccessWebhookNotifications" label="Docker Cleanup Success" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="dockerCleanupFailureWebhookNotifications" label="Docker Cleanup Failure" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="serverDiskUsageWebhookNotifications" label="Server Disk Usage" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="serverReachableWebhookNotifications" label="Server Reachable" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="serverUnreachableWebhookNotifications" label="Server Unreachable" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="serverPatchWebhookNotifications" label="Server Patching" />
<x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel"
id="traefikOutdatedWebhookNotifications" label="Traefik Proxy Outdated" />
</div>
</div>
</div>
</div>
resources/views/livewire/profile/index.blade.php
+43 -2
View File
@@ -3,17 +3,58 @@
Profile | Coolify
</x-slot>
<h1>Profile</h1>
<div class="subtitle ">Your user profile settings.</div>
<div class="subtitle -mt-2">Your user profile settings.</div>
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>General</h2>
<x-forms.button type="submit" label="Save">Save</x-forms.button>
</div>
<div class="flex flex-col gap-2 lg:flex-row">
<div class="flex flex-col gap-2 lg:flex-row items-end">
<x-forms.input id="name" label="Name" required />
<x-forms.input id="email" label="Email" readonly />
@if (!$show_email_change && !$show_verification)
<x-forms.button wire:click="showEmailChangeForm" type="button">Change Email</x-forms.button>
@else
<x-forms.button wire:click="showEmailChangeForm" type="button" disabled>Change Email</x-forms.button>
@endif
</div>
</form>
<div class="flex flex-col pt-4">
@if ($show_email_change)
<form wire:submit='requestEmailChange'>
<div class="flex gap-2 items-end">
<x-forms.input id="new_email" label="New Email Address" required type="email" />
<x-forms.button type="submit">Send Verification Code</x-forms.button>
<x-forms.button wire:click="$set('show_email_change', false)" type="button"
isError>Cancel</x-forms.button>
</div>
<div class="text-xs font-bold dark:text-warning pt-2">A verification code will be sent to your
new email
address.</div>
</form>
@endif
@if ($show_verification)
<form wire:submit='verifyEmailChange'>
<div class="flex gap-2 items-end">
<x-forms.input id="email_verification_code" label="Verification Code (6 digits)" required
maxlength="6" />
<x-forms.button type="submit">Verify & Update Email</x-forms.button>
<x-forms.button wire:click="resendVerificationCode" type="button" isWarning>Resend
Code</x-forms.button>
<x-forms.button wire:click="cancelEmailChange" type="button" isError>Cancel</x-forms.button>
</div>
<div class="text-xs font-bold dark:text-warning pt-2">
Verification code sent to {{ $new_email ?? auth()->user()->pending_email }}.
The code is valid for {{ config('constants.email_change.verification_code_expiry_minutes', 10) }}
minutes.
</div>
</form>
@endif
</div>
<form wire:submit='resetPassword' class="flex flex-col pt-4">
<div class="flex items-center gap-2 pb-2">
<h2>Change Password</h2>
resources/views/livewire/project/application/advanced.blade.php
+47 -25
View File
@@ -8,65 +8,85 @@
<h3>General</h3>
@if ($application->git_based())
<x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
id="isAutoDeployEnabled" label="Auto Deploy" />
id="isAutoDeployEnabled" label="Auto Deploy" canGate="update" :canResource="$application" />
<x-forms.checkbox
helper="Allow to automatically deploy Preview Deployments for all opened PR's.<br><br>Closing a PR will delete Preview Deployments."
instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" />
instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" canGate="update"
:canResource="$application" />
<x-forms.checkbox
helper="When enabled, anyone can trigger PR deployments. When disabled, only repository members, collaborators, and contributors can trigger PR deployments."
instantSave id="isPrDeploymentsPublicEnabled" label="Allow Public PR Deployments" canGate="update"
:canResource="$application" :disabled="!$isPreviewDeploymentsEnabled" />
@endif
<x-forms.checkbox helper="Disable Docker build cache on every deployment." instantSave id="disableBuildCache"
label="Disable Build Cache" />
<x-forms.checkbox helper="Disable Docker build cache on every deployment." instantSave
id="disableBuildCache" label="Disable Build Cache" canGate="update" :canResource="$application" />
<x-forms.checkbox
helper="When enabled, Coolify automatically adds ARG statements to your Dockerfile for build-time variables. Disable this if you manage ARGs manually in your Dockerfile to preserve Docker build cache."
instantSave id="injectBuildArgsToDockerfile" label="Inject Build Args to Dockerfile" canGate="update"
:canResource="$application" />
<x-forms.checkbox
helper="When enabled, SOURCE_COMMIT (git commit hash) is available during Docker build. Disable to preserve cache across different commits - SOURCE_COMMIT will still be available at runtime."
instantSave id="includeSourceCommitInBuild" label="Include Source Commit in Build" canGate="update"
:canResource="$application" />
@if ($application->settings->is_container_label_readonly_enabled)
<x-forms.checkbox
helper="Your application will be available only on https if your domain starts with https://..."
instantSave id="isForceHttpsEnabled" label="Force Https" />
instantSave id="isForceHttpsEnabled" label="Force Https" canGate="update" :canResource="$application" />
<x-forms.checkbox label="Enable Gzip Compression"
helper="You can disable gzip compression if you want. Some services are compressing data by default. In this case, you do not need this."
instantSave id="isGzipEnabled" />
instantSave id="isGzipEnabled" canGate="update" :canResource="$application" />
<x-forms.checkbox helper="Strip Prefix is used to remove prefixes from paths. Like /api/ to /api."
instantSave id="isStripprefixEnabled" label="Strip Prefixes" />
instantSave id="isStripprefixEnabled" label="Strip Prefixes" canGate="update" :canResource="$application" />
@else
<x-forms.checkbox disabled
helper="Readonly labels are disabled. You need to set the labels in the labels section." instantSave
id="isForceHttpsEnabled" label="Force Https" />
id="isForceHttpsEnabled" label="Force Https" canGate="update" :canResource="$application" />
<x-forms.checkbox label="Enable Gzip Compression" disabled
helper="Readonly labels are disabled. You need to set the labels in the labels section." instantSave
id="isGzipEnabled" />
id="isGzipEnabled" canGate="update" :canResource="$application" />
<x-forms.checkbox
helper="Readonly labels are disabled. You need to set the labels in the labels section." disabled
instantSave id="isStripprefixEnabled" label="Strip Prefixes" />
instantSave id="isStripprefixEnabled" label="Strip Prefixes" canGate="update" :canResource="$application" />
@endif
@if ($application->build_pack === 'dockercompose')
<h3>Docker Compose</h3>
<x-forms.checkbox instantSave id="isRawComposeDeploymentEnabled" label="Raw Compose Deployment"
helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>" />
helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>"
canGate="update" :canResource="$application" />
@endif
<h3 class="pt-4">Container Names</h3>
<x-forms.checkbox
helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
instantSave id="isConsistentContainerNameEnabled" label="Consistent Container Names" />
instantSave id="isConsistentContainerNameEnabled" label="Consistent Container Names" canGate="update"
:canResource="$application" />
@if ($isConsistentContainerNameEnabled === false)
<form class="flex items-end gap-2 " wire:submit.prevent='saveCustomName'>
<x-forms.input
helper="You can add a custom name for your container.<br><br>The name will be converted to slug format when you save it. <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
instantSave id="customInternalName" label="Custom Container Name" />
<x-forms.button type="submit">Save</x-forms.button>
instantSave id="customInternalName" label="Custom Container Name" canGate="update"
:canResource="$application" />
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
</form>
@endif
@if ($application->build_pack === 'dockercompose')
<h3 class="pt-4">Network</h3>
<x-forms.checkbox instantSave id="isConnectToDockerNetworkEnabled" label="Connect To Predefined Network"
helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>." />
helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>."
canGate="update" :canResource="$application" />
@endif
<h3 class="pt-4">Logs</h3>
<x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
instantSave id="isLogDrainEnabled" label="Drain Logs" />
instantSave id="isLogDrainEnabled" label="Drain Logs" canGate="update" :canResource="$application" />
@if ($application->git_based())
<h3>Git</h3>
<x-forms.checkbox instantSave id="isGitSubmodulesEnabled" label="Submodules"
helper="Allow Git Submodules during build process." />
helper="Allow Git Submodules during build process." canGate="update" :canResource="$application" />
<x-forms.checkbox instantSave id="isGitLfsEnabled" label="LFS"
helper="Allow Git LFS during build process." />
helper="Allow Git LFS during build process." canGate="update" :canResource="$application" />
<x-forms.checkbox instantSave id="isGitShallowCloneEnabled" label="Shallow Clone"
helper="Use shallow cloning (--depth=1) to speed up deployments by only fetching the latest commit history. This reduces clone time and resource usage, especially for large repositories."
canGate="update" :canResource="$application" />
@endif
</div>
@@ -76,7 +96,7 @@
<div class="flex gap-2 items-end pt-4">
<h3>GPU</h3>
@if ($isGpuEnabled)
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
@endif
</div>
@endif
@@ -84,21 +104,23 @@
<div class="md:w-96 pb-4">
<x-forms.checkbox
helper="Enable GPU usage for this application. More info <a href='https://docs.docker.com/compose/gpu-support/' class='underline dark:text-white' target='_blank'>here</a>."
instantSave id="isGpuEnabled" label="Enable GPU" />
instantSave id="isGpuEnabled" label="Enable GPU" canGate="update" :canResource="$application" />
</div>
@endif
@if ($isGpuEnabled)
<div class="flex flex-col w-full gap-2 ">
<div class="flex gap-2 items-end">
<x-forms.input label="GPU Driver" id="gpuDriver"> </x-forms.input>
<x-forms.input label="GPU Count" placeholder="empty means use all GPUs" id="gpuCount">
<x-forms.input label="GPU Driver" id="gpuDriver" canGate="update" :canResource="$application">
</x-forms.input>
<x-forms.input label="GPU Count" placeholder="empty means use all GPUs" id="gpuCount"
canGate="update" :canResource="$application">
</x-forms.input>
</div>
<x-forms.input label="GPU Device Ids" placeholder="0,2"
helper="Comma separated list of device ids. More info <a href='https://docs.docker.com/compose/gpu-support/#access-specific-devices' class='underline dark:text-white' target='_blank'>here</a>."
id="gpuDeviceIds"> </x-forms.input>
<x-forms.textarea rows="10" label="GPU Options" id="gpuOptions"> </x-forms.textarea>
id="gpuDeviceIds" canGate="update" :canResource="$application"> </x-forms.input>
<x-forms.textarea rows="10" label="GPU Options" id="gpuOptions" canGate="update"
:canResource="$application"> </x-forms.textarea>
</div>
@endif
</form>
resources/views/livewire/project/application/configuration.blade.php
+4 -4
View File
@@ -30,15 +30,15 @@
@endif
<a class="menu-item flex items-center gap-2" wire:current.exact="menu-item-active"
href="{{ route('project.application.servers', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}">Servers
@if (str($application->status)->contains('degraded'))
<span title="Some servers are unavailable">
@if ($application->server_status == false)
<span title="One or more servers are unreachable or misconfigured.">
<svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
</svg>
</span>
@elseif ($application->server_status == false)
<span title="The underlying server(s) has problems.">
@elseif ($application->additional_servers()->exists() && str($application->status)->contains('degraded'))
<span title="Application is in degraded state across multiple servers.">
<svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
resources/views/livewire/project/application/deployment-navbar.blade.php
+5 -8
View File
@@ -1,15 +1,12 @@
<div class="flex items-center gap-2 pb-4">
<h2>Deployment Log</h2>
@if ($is_debug_enabled)
<x-forms.button wire:click.prevent="show_debug">Hide Debug Logs</x-forms.button>
@else
<x-forms.button wire:click.prevent="show_debug">Show Debug Logs</x-forms.button>
@endif
@if (data_get($application_deployment_queue, 'status') === 'queued')
<x-forms.button wire:click.prevent="force_start">Force Start</x-forms.button>
@endif
@if (data_get($application_deployment_queue, 'status') === 'in_progress' ||
data_get($application_deployment_queue, 'status') === 'queued')
@if (
data_get($application_deployment_queue, 'status') === 'in_progress' ||
data_get($application_deployment_queue, 'status') === 'queued'
)
<x-forms.button isError wire:click.prevent="cancel">Cancel</x-forms.button>
@endif
</div>
</div>
resources/views/livewire/project/application/deployment/index.blade.php
+25 -20
View File
@@ -3,31 +3,36 @@
<h1>Deployments</h1>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" />
<div class="flex flex-col gap-2 pb-10"
@if (!$skip) wire:poll.5000ms='reload_deployments' @endif>
<div class="flex flex-col gap-2 pb-10" @if (!$skip) wire:poll.5000ms='reloadDeployments' @endif>
<div class="flex items-end gap-2">
<h2>Deployments <span class="text-xs">({{ $deployments_count }})</span></h2>
@if ($deployments_count > 0)
<x-forms.button disabled="{{ !$show_prev }}" wire:click="previous_page('{{ $default_take }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg>
</x-forms.button>
<x-forms.button disabled="{{ !$show_next }}" wire:click="next_page('{{ $default_take }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg>
</x-forms.button>
<div class="flex items-center gap-2">
<x-forms.button disabled="{{ !$showPrev }}" wire:click="previousPage('{{ $defaultTake }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg>
</x-forms.button>
<span class="text-sm text-gray-600 dark:text-gray-400 px-2">
Page {{ $currentPage }} of {{ ceil($deployments_count / $defaultTake) }}
</span>
<x-forms.button disabled="{{ !$showNext }}" wire:click="nextPage('{{ $defaultTake }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg>
</x-forms.button>
</div>
@endif
</div>
@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
<form class="flex items-end gap-2">
<x-forms.input id="pull_request_id" type="number" min="1" label="Pull Request Id"></x-forms.input>
<x-forms.button type="submit">Filter</x-forms.button>
@if ($pull_request_id)
<x-forms.button type="button" wire:click="clearFilter">Clear</x-forms.button>
@endif
</form>
@forelse ($deployments as $deployment)
<div @class([
'p-2 border-l-2 bg-white dark:bg-coolgray-100',
resources/views/livewire/project/application/deployment/show.blade.php
+290 -103
View File
@@ -1,31 +1,28 @@
<div>
<x-slot:title>
{{ data_get_str($application, 'name')->limit(10) }} > Deployment | Coolify
</x-slot>
<h1 class="py-0">Deployment</h1>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" />
<div x-data="{
fullscreen: false,
alwaysScroll: false,
</x-slot>
<h1 class="py-0">Deployment</h1>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" />
<div x-data="{
fullscreen: @entangle('fullscreen'),
alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
intervalId: null,
showTimestamps: true,
searchQuery: '',
renderTrigger: 0,
deploymentId: '{{ $application_deployment_queue->deployment_uuid ?? 'deployment' }}',
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;
const logsContainer = document.getElementById('logsContainer');
if (logsContainer) {
logsContainer.scrollTop = logsContainer.scrollHeight;
}
}, 100);
} else {
@@ -33,97 +30,287 @@
this.intervalId = null;
}
},
goTop() {
matchesSearch(text) {
if (!this.searchQuery.trim()) return true;
return text.toLowerCase().includes(this.searchQuery.toLowerCase());
},
hasActiveLogSelection() {
const selection = window.getSelection();
if (!selection || selection.isCollapsed || !selection.toString().trim()) {
return false;
}
const logsContainer = document.getElementById('logs');
if (!logsContainer) return false;
// Check if selection is within the logs container
const range = selection.getRangeAt(0);
return logsContainer.contains(range.commonAncestorContainer);
},
decodeHtml(text) {
// Decode HTML entities, handling double-encoding with max iteration limit to prevent DoS
let decoded = text;
let prev = '';
let iterations = 0;
const maxIterations = 3; // Prevent DoS from deeply nested HTML entities
while (decoded !== prev && iterations < maxIterations) {
prev = decoded;
const doc = new DOMParser().parseFromString(decoded, 'text/html');
decoded = doc.documentElement.textContent;
iterations++;
}
return decoded;
},
renderHighlightedLog(el, text) {
// Skip re-render if user has text selected in logs (preserves copy ability)
// But always render if the element is empty (initial render)
if (el.textContent && this.hasActiveLogSelection()) {
return;
}
const decoded = this.decodeHtml(text);
el.textContent = '';
if (!this.searchQuery.trim()) {
el.textContent = decoded;
return;
}
const query = this.searchQuery.toLowerCase();
const lowerText = decoded.toLowerCase();
let lastIndex = 0;
let index = lowerText.indexOf(query, lastIndex);
while (index !== -1) {
// Add text before match
if (index > lastIndex) {
el.appendChild(document.createTextNode(decoded.substring(lastIndex, index)));
}
// Add highlighted match
const mark = document.createElement('span');
mark.className = 'log-highlight';
mark.textContent = decoded.substring(index, index + this.searchQuery.length);
el.appendChild(mark);
lastIndex = index + this.searchQuery.length;
index = lowerText.indexOf(query, lastIndex);
}
// Add remaining text
if (lastIndex < decoded.length) {
el.appendChild(document.createTextNode(decoded.substring(lastIndex)));
}
},
getMatchCount() {
if (!this.searchQuery.trim()) return 0;
const logs = document.getElementById('logs');
if (!logs) return 0;
const lines = logs.querySelectorAll('[data-log-line]');
let count = 0;
lines.forEach(line => {
if (line.dataset.logContent && line.dataset.logContent.toLowerCase().includes(this.searchQuery.toLowerCase())) {
count++;
}
});
return count;
},
downloadLogs() {
const logs = document.getElementById('logs');
if (!logs) return;
const visibleLines = logs.querySelectorAll('[data-log-line]:not(.hidden)');
let content = '';
visibleLines.forEach(line => {
const text = line.textContent.replace(/\s+/g, ' ').trim();
if (text) {
content += text + String.fromCharCode(10);
}
});
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
const timestamp = new Date().toISOString().slice(0,19).replace(/[T:]/g, '-');
a.download = 'deployment-' + this.deploymentId + '-' + timestamp + '.txt';
a.click();
URL.revokeObjectURL(url);
},
stopScroll() {
// Scroll to the end one final time before disabling
const logsContainer = document.getElementById('logsContainer');
if (logsContainer) {
logsContainer.scrollTop = logsContainer.scrollHeight;
}
this.alwaysScroll = false;
clearInterval(this.intervalId);
const screen = document.getElementById('screen');
screen.scrollTop = 0;
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
},
init() {
// Prevent Livewire from morphing logs container when text is selected
Livewire.hook('morph.updating', ({ el, component, toEl, skip }) => {
if (el.id === 'logs' && this.hasActiveLogSelection()) {
skip();
}
});
// Re-render logs after Livewire updates
document.addEventListener('livewire:navigated', () => {
this.$nextTick(() => { this.renderTrigger++; });
});
Livewire.hook('commit', ({ succeed }) => {
succeed(() => {
this.$nextTick(() => { this.renderTrigger++; });
});
});
// Stop auto-scroll when deployment finishes
Livewire.on('deploymentFinished', () => {
// Wait for DOM to update with final logs before scrolling to end
setTimeout(() => {
this.stopScroll();
}, 500);
});
// Start auto-scroll if deployment is in progress
if (this.alwaysScroll) {
this.intervalId = setInterval(() => {
const logsContainer = document.getElementById('logsContainer');
if (logsContainer) {
logsContainer.scrollTop = logsContainer.scrollHeight;
}
}, 100);
}
}
}">
<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>
<x-loading class="loading-ring" />
</div>
{{-- <div class="">Logs will be updated automatically.</div> --}}
@else
<div class="pt-2 ">Deployment is <span
class="dark:text-warning">{{ Str::headline(data_get($application_deployment_queue, 'status')) }}</span>.
</div>
@endif
<div id="screen" :class="fullscreen ? 'fullscreen' : 'relative'">
<div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
class="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 ? '' : 'min-h-14 max-h-[40rem] border border-dotted rounded-sm'">
<div :class="fullscreen ? 'fixed' : 'absolute'" class="top-2 right-5">
<div class="flex justify-end gap-4">
<button title="Toggle timestamps" x-on:click="showTimestamps = !showTimestamps">
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button title="Go Top" x-show="fullscreen" x-on:click="goTop">
<svg class="w-5 h-5 opacity-30 hover:opacity-100" 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="M12 5v14m4-10l-4-4M8 9l4-4" />
</svg>
</button>
<button title="Follow Logs" x-show="fullscreen" :class="alwaysScroll ? 'dark:text-warning' : ''"
x-on:click="toggleScroll">
<svg class="w-5 h-5 opacity-30 hover:opacity-100" 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="M12 5v14m4-4l-4 4m-4-4l4 4" />
</svg>
</button>
<button title="Fullscreen" x-show="!fullscreen" x-on:click="makeFullscreen">
<svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
<path fill="currentColor"
d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586l4.793-4.793ZM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3h5Z" />
</g>
</svg>
</button>
<button title="Minimize" x-show="fullscreen" x-on:click="makeFullscreen">
<svg class="w-5 h-5 opacity-30 hover:opacity-100"
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="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
</svg>
</button>
</div>
</div>
<div id="logs" class="flex flex-col font-mono">
@forelse ($this->logLines as $line)
<div @class([
'mt-2' => isset($line['command']) && $line['command'],
'flex gap-2 dark:hover:bg-coolgray-500 hover:bg-gray-100',
])>
<span x-show="showTimestamps" class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
<span @class([
'text-coollabs dark:text-warning' => $line['hidden'],
'text-red-500' => $line['stderr'],
'font-bold' => isset($line['command']) && $line['command'],
'whitespace-pre-wrap',
])>{!! (isset($line['command']) && $line['command'] ? '[CMD]: ' : '') . trim($line['line']) !!}</span>
<livewire:project.application.deployment-navbar
:application_deployment_queue="$application_deployment_queue" />
<div id="screen" :class="fullscreen ? 'fullscreen flex flex-col' : 'mt-4 relative'">
<div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
class="flex flex-col w-full bg-white dark:text-white dark:bg-coolgray-100 dark:border-coolgray-300"
:class="fullscreen ? 'h-full' : 'border border-dotted rounded-sm'">
<div
class="flex items-center justify-between gap-2 px-4 py-2 border-b dark:border-coolgray-300 border-neutral-200 shrink-0">
<div class="flex items-center gap-3">
@if (data_get($application_deployment_queue, 'status') === 'in_progress')
<div class="flex items-center gap-1">
<span>Deployment is</span>
<span class="dark:text-warning">In Progress</span>
<x-loading class="loading-ring loading-xs" />
</div>
@else
<div class="flex items-center gap-1">
<span>Deployment is</span>
<span class="dark:text-warning">{{ Str::headline(data_get($application_deployment_queue, 'status')) }}</span>
</div>
@endif
<span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
</div>
@empty
<span class="font-mono text-neutral-400 mb-2">No logs yet.</span>
@endforelse
<div class="flex items-center gap-2">
<div class="relative">
<svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<input type="text" x-model="searchQuery" placeholder="Find in logs"
class="input input-sm w-48 pl-8 pr-8 dark:bg-coolgray-200" />
<button x-show="searchQuery" x-on:click="searchQuery = ''" type="button"
class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<button x-on:click="downloadLogs()" title="Download Logs"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</button>
<button title="Toggle Timestamps" x-on:click="showTimestamps = !showTimestamps"
:class="showTimestamps ? '!text-warning' : ''"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button wire:click="toggleDebug"
title="{{ $is_debug_enabled ? 'Hide Debug Logs' : 'Show Debug Logs' }}"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 {{ $is_debug_enabled ? '!text-warning' : '' }}">
<svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
</svg>
</button>
<button title="Follow Logs" :class="alwaysScroll ? '!text-warning' : ''"
x-on:click="toggleScroll"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" 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="M12 5v14m4-4l-4 4m-4-4l4 4" />
</svg>
</button>
<button title="Fullscreen" x-show="!fullscreen" x-on:click="makeFullscreen"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="none">
<path
d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
<path fill="currentColor"
d="M9.793 12.793a1 1 0 0 1 1.497 1.32l-.083.094L6.414 19H9a1 1 0 0 1 .117 1.993L9 21H4a1 1 0 0 1-.993-.883L3 20v-5a1 1 0 0 1 1.993-.117L5 15v2.586l4.793-4.793ZM20 3a1 1 0 0 1 .993.883L21 4v5a1 1 0 0 1-1.993.117L19 9V6.414l-4.793 4.793a1 1 0 0 1-1.497-1.32l.083-.094L17.586 5H15a1 1 0 0 1-.117-1.993L15 3h5Z" />
</g>
</svg>
</button>
<button title="Minimize" x-show="fullscreen" x-on:click="makeFullscreen"
class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<svg class="w-4 h-4" 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="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
</svg>
</button>
</div>
</div>
<div id="logsContainer"
class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
:class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
<div id="logs" class="flex flex-col font-mono">
<div x-show="searchQuery.trim() && getMatchCount() === 0"
class="text-gray-500 dark:text-gray-400 py-2">
No matches found.
</div>
@forelse ($this->logLines as $line)
@php
$lineContent = (isset($line['command']) && $line['command'] ? '[CMD]: ' : '') . trim($line['line']);
$searchableContent = $line['timestamp'] . ' ' . $lineContent;
@endphp
<div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
x-effect="renderTrigger; searchQuery; $el.classList.toggle('hidden', !matchesSearch($el.dataset.logContent))" @class([
'mt-2' => isset($line['command']) && $line['command'],
'flex gap-2',
])>
<span x-show="showTimestamps"
class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
<span data-line-text="{{ htmlspecialchars($lineContent) }}" @class([
'text-success dark:text-warning' => $line['hidden'],
'text-red-500' => $line['stderr'],
'font-bold' => isset($line['command']) && $line['command'],
'whitespace-pre-wrap',
])
x-effect="renderTrigger; searchQuery; renderHighlightedLog($el, $el.dataset.lineText)"></span>
</div>
@empty
<span class="font-mono text-neutral-400 mb-2">No logs yet.</span>
@endforelse
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
resources/views/livewire/project/application/general.blade.php
+433 -280
View File
@@ -1,38 +1,43 @@
<div x-data="{ initLoadingCompose: $wire.entangle('initLoadingCompose') }">
<div x-data="{
initLoadingCompose: $wire.entangle('initLoadingCompose'),
canUpdate: @js(auth()->user()->can('update', $application)),
shouldDisable() {
return this.initLoadingCompose || !this.canUpdate;
}
}">
<form wire:submit='submit' class="flex flex-col pb-32">
<div class="flex items-center gap-2">
<h2>General</h2>
<x-forms.button type="submit">
Save
</x-forms.button>
{{-- <x-forms.button wire:click="downloadConfig">
Download Config
</x-forms.button> --}}
{{-- <x-modal-input buttonTitle="Upload Config" title="Upload Config" :closeOutside="false">
<livewire:project.shared.upload-config :applicationId="$application->id" />
</x-modal-input> --}}
@if (isDev())
<div>{{ $application->compose_parsing_version }}</div>
@endif
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
@if ($application->build_pack === 'dockercompose')
<x-forms.button canGate="update" :canResource="$application" wire:target='initLoadingCompose'
x-on:click="$wire.dispatch('loadCompose', false)">
{{ $application->docker_compose_raw ? 'Reload Compose File' : 'Load Compose File' }}
</x-forms.button>
@endif
</div>
<div>General configuration for your application.</div>
<div class="flex flex-col gap-2 py-4">
<div class="flex flex-col items-end gap-2 xl:flex-row">
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.name" label="Name" required />
<x-forms.input x-bind:disabled="initLoadingCompose" id="application.description" label="Description" />
<x-forms.input x-bind:disabled="shouldDisable()" id="name" label="Name" required />
<x-forms.input x-bind:disabled="shouldDisable()" id="description" label="Description" />
</div>
@if (!$application->dockerfile && $application->build_pack !== 'dockerimage')
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<x-forms.select x-bind:disabled="initLoadingCompose" wire:model.live="application.build_pack"
label="Build Pack" required>
<x-forms.select x-bind:disabled="shouldDisable()" wire:model.live="buildPack" label="Build Pack"
required>
<option value="nixpacks">Nixpacks</option>
<option value="static">Static</option>
<option value="dockerfile">Dockerfile</option>
<option value="dockercompose">Docker Compose</option>
</x-forms.select>
@if ($application->settings->is_static || $application->build_pack === 'static')
<x-forms.select id="application.static_image" label="Static Image" required>
<x-forms.select x-bind:disabled="!canUpdate" id="staticImage" label="Static Image" required>
<option value="nginx:alpine">nginx:alpine</option>
<option disabled value="apache:alpine">apache:alpine</option>
</x-forms.select>
@@ -41,19 +46,23 @@
@if ($application->build_pack === 'dockercompose')
@if (
!is_null($parsedServices) &&
!is_null($parsedServices) &&
count($parsedServices) > 0 &&
!$application->settings->is_raw_compose_deployment_enabled)
!$application->settings->is_raw_compose_deployment_enabled
)
<h3 class="pt-6">Domains</h3>
@foreach (data_get($parsedServices, 'services') as $serviceName => $service)
@if (!isDatabaseImage(data_get($service, 'image')))
<div class="flex items-end gap-2">
<x-forms.input
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
label="Domains for {{ str($serviceName)->headline() }}"
id="parsedServiceDomains.{{ $serviceName }}.domain"></x-forms.input>
<x-forms.button wire:click="generateDomain('{{ $serviceName }}')">Generate
Domain</x-forms.button>
label="Domains for {{ $serviceName }}"
id="parsedServiceDomains.{{ str($serviceName)->replace('-', '_')->replace('.', '_') }}.domain"
x-bind:disabled="shouldDisable()"></x-forms.input>
@can('update', $application)
<x-forms.button wire:click="generateDomain('{{ $serviceName }}')">Generate
Domain</x-forms.button>
@endcan
</div>
@endif
@endforeach
@@ -63,67 +72,85 @@
</div>
@endif
@if ($application->settings->is_static || $application->build_pack === 'static')
<x-forms.textarea id="application.custom_nginx_configuration"
<x-forms.textarea id="customNginxConfiguration"
placeholder="Empty means default configuration will be used." label="Custom Nginx Configuration"
helper="You can add custom Nginx configuration here." />
<x-forms.button wire:click="generateNginxConfiguration">Generate Default Nginx
Configuration</x-forms.button>
helper="You can add custom Nginx configuration here." x-bind:disabled="!canUpdate" />
@can('update', $application)
<x-modal-confirmation title="Confirm Nginx Configuration Generation?"
buttonTitle="Generate Default Nginx Configuration" buttonFullWidth
submitAction="generateNginxConfiguration('{{ $application->settings->is_spa ? 'spa' : 'static' }}')"
:actions="[
'This will overwrite your current custom Nginx configuration.',
'The default configuration will be generated based on your application type (' .
($application->settings->is_spa ? 'SPA' : 'static') .
').',
]" />
@endcan
@endif
<div class="w-96 pb-6">
@if ($application->could_set_build_commands())
<x-forms.checkbox instantSave id="application.settings.is_static" label="Is it a static site?"
helper="If your application is a static site or the final build assets should be served as a static site, enable this." />
<x-forms.checkbox instantSave id="isStatic" label="Is it a static site?"
helper="If your application is a static site or the final build assets should be served as a static site, enable this."
x-bind:disabled="!canUpdate" />
@endif
@if ($application->settings->is_static && $application->build_pack !== 'static')
<x-forms.checkbox label="Is it a SPA (Single Page Application)?"
helper="If your application is a SPA, enable this." id="application.settings.is_spa"
instantSave></x-forms.checkbox>
helper="If your application is a SPA, enable this." id="isSpa" instantSave
x-bind:disabled="!canUpdate"></x-forms.checkbox>
@endif
</div>
@if ($application->build_pack !== 'dockercompose')
<div class="flex items-end gap-2">
@if ($application->settings->is_container_label_readonly_enabled == false)
<x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
label="Domains" readonly
helper="Readonly labels are disabled. You can set the domains in the labels section." />
<x-forms.input placeholder="https://coolify.io" wire:model="fqdn" label="Domains" readonly
helper="Readonly labels are disabled. You can set the domains in the labels section."
x-bind:disabled="!canUpdate" />
@else
<x-forms.input placeholder="https://coolify.io" wire:model.blur-sm="application.fqdn"
label="Domains"
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. " />
<x-forms.button wire:click="getWildcardDomain">Generate Domain
</x-forms.button>
<x-forms.input placeholder="https://coolify.io" wire:model="fqdn" label="Domains"
helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
x-bind:disabled="!canUpdate" />
@can('update', $application)
<x-forms.button wire:click="getWildcardDomain">Generate Domain
</x-forms.button>
@endcan
@endif
</div>
<div class="flex items-end gap-2">
@if ($application->settings->is_container_label_readonly_enabled == false)
@if ($application->redirect === 'both')
<x-forms.input label="Direction" value="Allow www & non-www." readonly
helper="Readonly labels are disabled. You can set the direction in the labels section." />
helper="Readonly labels are disabled. You can set the direction in the labels section."
x-bind:disabled="!canUpdate" />
@elseif ($application->redirect === 'www')
<x-forms.input label="Direction" value="Redirect to www." readonly
helper="Readonly labels are disabled. You can set the direction in the labels section." />
helper="Readonly labels are disabled. You can set the direction in the labels section."
x-bind:disabled="!canUpdate" />
@elseif ($application->redirect === 'non-www')
<x-forms.input label="Direction" value="Redirect to non-www." readonly
helper="Readonly labels are disabled. You can set the direction in the labels section." />
helper="Readonly labels are disabled. You can set the direction in the labels section."
x-bind:disabled="!canUpdate" />
@endif
@else
<x-forms.select label="Direction" id="application.redirect" required
helper="You must need to add www and non-www as an A DNS record. Make sure the www domain is added under Domains.">
<x-forms.select label="Direction" id="redirect" required
helper="You must need to add www and non-www as an A DNS record. Make sure the www domain is added under Domains."
x-bind:disabled="!canUpdate">
<option value="both">Allow www & non-www.</option>
<option value="www">Redirect to www.</option>
<option value="non-www">Redirect to non-www.</option>
</x-forms.select>
@if ($application->settings->is_container_label_readonly_enabled)
<x-modal-confirmation title="Confirm Redirection Setting?" buttonTitle="Set Direction"
submitAction="setRedirect" :actions="['All traffic will be redirected to the selected direction.']"
confirmationText="{{ $application->fqdn . '/' }}"
confirmationLabel="Please confirm the execution of the action by entering the Application URL below"
shortConfirmationLabel="Application URL" :confirmWithPassword="false"
step2ButtonText="Set Direction">
<x-slot:customButton>
<div class="w-[7.2rem]">Set Direction</div>
</x-slot:customButton>
</x-modal-confirmation>
@can('update', $application)
<x-modal-confirmation title="Confirm Redirection Setting?" buttonTitle="Set Direction"
submitAction="setRedirect" :actions="['All traffic will be redirected to the selected direction.']"
confirmationText="{{ $application->fqdn . '/' }}"
confirmationLabel="Please confirm the execution of the action by entering the Application URL below"
shortConfirmationLabel="Application URL" :confirmWithPassword="false"
step2ButtonText="Set Direction">
<x-slot:customButton>
<div class="w-[7.2rem]">Set Direction</div>
</x-slot:customButton>
</x-modal-confirmation>
@endcan
@endif
@endif
</div>
@@ -139,39 +166,44 @@
</div>
@if ($application->destination->server->isSwarm())
@if ($application->build_pack !== 'dockerimage')
<div>Docker Swarm requires the image to be available in a registry. More info <a
class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
target="_blank">here</a>.</div>
<div>Docker Swarm requires the image to be available in a registry. More info <a class="underline"
href="https://coolify.io/docs/knowledge-base/docker/registry" target="_blank">here</a>.</div>
@endif
@endif
<div class="flex flex-col gap-2 xl:flex-row">
@if ($application->build_pack === 'dockerimage')
@if ($application->destination->server->isSwarm())
<x-forms.input required id="application.docker_registry_image_name" label="Docker Image" />
<x-forms.input id="application.docker_registry_image_tag" label="Docker Image Tag" />
<x-forms.input required id="dockerRegistryImageName" label="Docker Image"
x-bind:disabled="!canUpdate" />
<x-forms.input id="dockerRegistryImageTag" label="Docker Image Tag or Hash"
helper="Enter a tag (e.g., 'latest', 'v1.2.3') or SHA256 hash (e.g., 'sha256-59e02939b1bf39f16c93138a28727aec520bb916da021180ae502c61626b3cf0')"
x-bind:disabled="!canUpdate" />
@else
<x-forms.input id="application.docker_registry_image_name" label="Docker Image" />
<x-forms.input id="application.docker_registry_image_tag" label="Docker Image Tag" />
<x-forms.input id="dockerRegistryImageName" label="Docker Image" x-bind:disabled="!canUpdate" />
<x-forms.input id="dockerRegistryImageTag" label="Docker Image Tag or Hash"
helper="Enter a tag (e.g., 'latest', 'v1.2.3') or SHA256 hash (e.g., 'sha256-59e02939b1bf39f16c93138a28727aec520bb916da021180ae502c61626b3cf0')"
x-bind:disabled="!canUpdate" />
@endif
@else
@if (
$application->destination->server->isSwarm() ||
$application->destination->server->isSwarm() ||
$application->additional_servers->count() > 0 ||
$application->settings->is_build_server_enabled)
<x-forms.input id="application.docker_registry_image_name" required label="Docker Image"
placeholder="Required!" />
<x-forms.input id="application.docker_registry_image_tag"
$application->settings->is_build_server_enabled
)
<x-forms.input id="dockerRegistryImageName" required label="Docker Image" placeholder="Required!"
x-bind:disabled="!canUpdate" />
<x-forms.input id="dockerRegistryImageTag"
helper="If set, it will tag the built image with this tag too. <br><br>Example: If you set it to 'latest', it will push the image with the commit sha tag + with the latest tag."
placeholder="Empty means latest will be used." label="Docker Image Tag" />
placeholder="Empty means latest will be used." label="Docker Image Tag"
x-bind:disabled="!canUpdate" />
@else
<x-forms.input id="application.docker_registry_image_name"
helper="Empty means it won't push the image to a docker registry."
placeholder="Empty means it won't push the image to a docker registry."
label="Docker Image" />
<x-forms.input id="application.docker_registry_image_tag"
placeholder="Empty means only push commit sha tag."
<x-forms.input id="dockerRegistryImageName"
helper="Empty means it won't push the image to a docker registry. Pre-tag the image with your registry url if you want to push it to a private registry (default: Dockerhub). <br><br>Example: ghcr.io/myimage"
placeholder="Empty means it won't push the image to a docker registry." label="Docker Image"
x-bind:disabled="!canUpdate" />
<x-forms.input id="dockerRegistryImageTag" placeholder="Empty means only push commit sha tag."
helper="If set, it will tag the built image with this tag too. <br><br>Example: If you set it to 'latest', it will push the image with the commit sha tag + with the latest tag."
label="Docker Image Tag" />
label="Docker Image Tag" x-bind:disabled="!canUpdate" />
@endif
@endif
</div>
@@ -182,17 +214,17 @@
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k --hostname=myapp"
id="application.custom_docker_run_options" label="Custom Docker Options" />
id="customDockerRunOptions" label="Custom Docker Options" x-bind:disabled="!canUpdate" />
@else
@if ($application->could_set_build_commands())
@if ($application->build_pack === 'nixpacks')
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
id="application.install_command" label="Install Command" />
id="installCommand" label="Install Command" x-bind:disabled="!canUpdate" />
<x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
id="application.build_command" label="Build Command" />
id="buildCommand" label="Build Command" x-bind:disabled="!canUpdate" />
<x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
id="application.start_command" label="Start Command" />
id="startCommand" label="Start Command" x-bind:disabled="!canUpdate" />
</div>
<div class="pt-1 text-xs">Nixpacks will detect the required configuration
automatically.
@@ -204,224 +236,345 @@
@endif
<div class="flex flex-col gap-2 pt-6 pb-10">
@if ($application->build_pack === 'dockercompose')
<div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
<div class="flex gap-2">
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="/"
id="application.base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." />
<x-forms.input x-bind:disabled="initLoadingCompose"
placeholder="/docker-compose.yaml" id="application.docker_compose_location"
label="Docker Compose Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>" />
</div>
<div class="w-96">
<x-forms.checkbox instantSave
id="application.settings.is_preserve_repository_enabled"
label="Preserve Repository During Deployment"
helper="Git repository (based on the base directory settings) will be copied to the deployment directory." />
</div>
<div class="pt-4">The following commands are for advanced use cases.
Only
modify them if you
know what are
you doing.</div>
<div class="flex gap-2">
<x-forms.input placeholder="docker compose build"
x-bind:disabled="initLoadingCompose"
id="application.docker_compose_custom_build_command"
helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} build</span>"
label="Custom Build Command" />
<x-forms.input placeholder="docker compose up -d"
x-bind:disabled="initLoadingCompose"
id="application.docker_compose_custom_start_command"
helper="If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>So in your case, use: <span class='dark:text-warning'>docker compose -f .{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }} up -d</span>"
label="Custom Start Command" />
</div>
</div>
@else
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input placeholder="/" id="application.base_directory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." />
@if ($application->build_pack === 'dockerfile' && !$application->dockerfile)
<x-forms.input placeholder="/Dockerfile" id="application.dockerfile_location"
label="Dockerfile Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>" />
@endif
@if ($application->build_pack === 'dockerfile')
<x-forms.input id="application.dockerfile_target_build"
label="Docker Build Stage Target"
helper="Useful if you have multi-staged dockerfile." />
@endif
@if ($application->could_set_build_commands())
@if ($application->settings->is_static)
<x-forms.input placeholder="/dist" id="application.publish_directory"
label="Publish Directory" required />
@else
<x-forms.input placeholder="/" id="application.publish_directory"
label="Publish Directory" />
@can('update', $application)
<div class="flex flex-col gap-2" x-init="$wire.dispatch('loadCompose', true)">
@else
<div class="flex flex-col gap-2">
@endcan
<div x-data="{
baseDir: '{{ $application->base_directory }}',
composeLocation: '{{ $application->docker_compose_location }}',
normalizePath(path) {
if (!path || path.trim() === '') return '/';
path = path.trim();
path = path.replace(/\/+$/, '');
if (!path.startsWith('/')) {
path = '/' + path;
}
return path;
},
normalizeBaseDir() {
this.baseDir = this.normalizePath(this.baseDir);
},
normalizeComposeLocation() {
this.composeLocation = this.normalizePath(this.composeLocation);
}
}" class="flex gap-2">
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="/" wire:model.defer="baseDirectory"
label="Base Directory" helper="Directory to use as root. Useful for monorepos."
x-model="baseDir" @blur="normalizeBaseDir()" />
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="/docker-compose.yaml"
wire:model.defer="dockerComposeLocation" label="Docker Compose Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->docker_compose_location, '/') }}</span>"
x-model="composeLocation" @blur="normalizeComposeLocation()" />
</div>
<div class="w-96">
<x-forms.checkbox instantSave id="isPreserveRepositoryEnabled"
label="Preserve Repository During Deployment"
helper="Git repository (based on the base directory settings) will be copied to the deployment directory."
x-bind:disabled="shouldDisable()" />
</div>
<div class="pt-4">The following commands are for advanced use cases.
Only
modify them if you
know what are
you doing.</div>
<div class="flex gap-2">
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="docker compose build"
id="dockerComposeCustomBuildCommand"
helper="The compose file path (<span class='dark:text-warning'>-f</span> flag) and environment variables (<span class='dark:text-warning'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-warning'>-f</span> or <span class='dark:text-warning'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-warning'>docker compose build</span>"
label="Custom Build Command" />
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="docker compose up -d"
id="dockerComposeCustomStartCommand"
helper="The compose file path (<span class='dark:text-warning'>-f</span> flag) and environment variables (<span class='dark:text-warning'>--env-file</span> flag) are automatically injected based on your Base Directory and Docker Compose Location settings. You can override by providing your own <span class='dark:text-warning'>-f</span> or <span class='dark:text-warning'>--env-file</span> flags.<br><br>If you use this, you need to specify paths relatively and should use the same compose file in the custom command, otherwise the automatically configured labels / etc won't work.<br><br>Example usage: <span class='dark:text-warning'>docker compose up -d</span>"
label="Custom Start Command" />
</div>
@if ($this->dockerComposeCustomBuildCommand)
<div wire:key="docker-compose-build-preview">
<x-forms.input readonly value="{{ $this->dockerComposeBuildCommandPreview }}"
label="Final Build Command (Preview)"
helper="This shows the actual command that will be executed with auto-injected flags." />
</div>
@endif
@if ($this->dockerComposeCustomStartCommand)
<div wire:key="docker-compose-start-preview">
<x-forms.input readonly value="{{ $this->dockerComposeStartCommandPreview }}"
label="Final Start Command (Preview)"
helper="This shows the actual command that will be executed with auto-injected flags." />
</div>
@endif
@if ($this->application->is_github_based() && !$this->application->is_public_repository())
<div class="pt-4">
<x-forms.textarea
helper="Order-based pattern matching to filter Git webhook deployments. Supports wildcards (*, **, ?) and negation (!). Last matching pattern wins."
placeholder="services/api/**" id="watchPaths" label="Watch Paths"
x-bind:disabled="shouldDisable()" />
</div>
@endif
</div>
@else
<div x-data="{
baseDir: '{{ $application->base_directory }}',
dockerfileLocation: '{{ $application->dockerfile_location }}',
normalizePath(path) {
if (!path || path.trim() === '') return '/';
path = path.trim();
path = path.replace(/\/+$/, '');
if (!path.startsWith('/')) {
path = '/' + path;
}
return path;
},
normalizeBaseDir() {
this.baseDir = this.normalizePath(this.baseDir);
},
normalizeDockerfileLocation() {
this.dockerfileLocation = this.normalizePath(this.dockerfileLocation);
}
}" class="flex flex-col gap-2 xl:flex-row">
<x-forms.input placeholder="/" wire:model.defer="baseDirectory" label="Base Directory"
helper="Directory to use as root. Useful for monorepos." x-bind:disabled="!canUpdate"
x-model="baseDir" @blur="normalizeBaseDir()" />
@if ($application->build_pack === 'dockerfile' && !$application->dockerfile)
<x-forms.input placeholder="/Dockerfile" wire:model.defer="dockerfileLocation" label="Dockerfile Location"
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>"
x-bind:disabled="!canUpdate" x-model="dockerfileLocation" @blur="normalizeDockerfileLocation()" />
@endif
@if ($application->build_pack === 'dockerfile')
<x-forms.input id="dockerfileTargetBuild" label="Docker Build Stage Target"
helper="Useful if you have multi-staged dockerfile." x-bind:disabled="!canUpdate" />
@endif
@if ($application->could_set_build_commands())
@if ($application->settings->is_static)
<x-forms.input placeholder="/dist" id="publishDirectory" label="Publish Directory" required
x-bind:disabled="!canUpdate" />
@else
<x-forms.input placeholder="/" id="publishDirectory" label="Publish Directory"
x-bind:disabled="!canUpdate" />
@endif
@endif
</div>
@if ($this->application->is_github_based() && !$this->application->is_public_repository())
<div class="pb-4">
<x-forms.textarea
helper="Order-based pattern matching to filter Git webhook deployments. Supports wildcards (*, **, ?) and negation (!). Last matching pattern wins."
placeholder="src/pages/**" id="watchPaths" label="Watch Paths"
x-bind:disabled="!canUpdate" />
</div>
@endif
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k --hostname=myapp"
id="customDockerRunOptions" label="Custom Docker Options" x-bind:disabled="!canUpdate" />
</div>
@if ($this->application->is_github_based() && !$this->application->is_public_repository())
<div class="pb-4">
<x-forms.textarea
helper="Gitignore-style rules to filter Git based webhook deployments."
placeholder="src/pages/**" id="application.watch_paths"
label="Watch Paths" />
</div>
@if ($application->build_pack !== 'dockercompose')
<div class="pt-2 w-96">
<x-forms.checkbox
helper="Use a build server to build your application. You can configure your build server in the Server settings. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
instantSave id="isBuildServerEnabled" label="Use a Build Server?"
x-bind:disabled="!canUpdate" />
</div>
@endif
@endif
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k --hostname=myapp"
id="application.custom_docker_run_options" label="Custom Docker Options" />
@if ($application->build_pack !== 'dockercompose')
<div class="pt-2 w-96">
<x-forms.checkbox
helper="Use a build server to build your application. You can configure your build server in the Server settings. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
instantSave id="application.settings.is_build_server_enabled"
label="Use a Build Server?" />
</div>
@endif
@endif
</div>
</div>
@endif
</div>
@if ($application->build_pack === 'dockercompose')
<div class="flex items-center gap-2 pb-4">
<h3>Docker Compose</h3>
<x-forms.button wire:target='initLoadingCompose'
x-on:click="$wire.dispatch('loadCompose', false)">Reload Compose File</x-forms.button>
</div>
@if ($application->settings->is_raw_compose_deployment_enabled)
<x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
label="Docker Compose Content (applicationId: {{ $application->id }})"
helper="You need to modify the docker compose file in the git repository."
monacoEditorLanguage="yaml" useMonacoEditor />
@else
@if ((int) $application->compose_parsing_version >= 3)
<x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
label="Docker Compose Content (raw)"
@if ($application->build_pack === 'dockercompose')
<div x-data="{ showRaw: true }">
<div class="flex items-center gap-2">
<h3>Docker Compose</h3>
<x-forms.button x-show="!($application->settings->is_raw_compose_deployment_enabled)" @click.prevent="showRaw = !showRaw" x-text="showRaw ? 'Show Deployable Compose' : 'Show Raw Compose'"></x-forms.button>
</div>
@if ($application->settings->is_raw_compose_deployment_enabled)
<x-forms.textarea rows="10" readonly id="dockerComposeRaw"
label="Docker Compose Content (applicationId: {{ $application->id }})"
helper="You need to modify the docker compose file in the git repository."
monacoEditorLanguage="yaml" useMonacoEditor />
@endif
<x-forms.textarea rows="10" readonly id="application.docker_compose"
label="Docker Compose Content"
helper="You need to modify the docker compose file in the git repository."
monacoEditorLanguage="yaml" useMonacoEditor />
@endif
<div class="w-96">
<x-forms.checkbox label="Escape special characters in labels?"
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
id="application.settings.is_container_label_escape_enabled" instantSave></x-forms.checkbox>
{{-- <x-forms.checkbox label="Readonly labels"
helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
id="application.settings.is_container_label_readonly_enabled" instantSave></x-forms.checkbox> --}}
</div>
@endif
@if ($application->dockerfile)
<x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile"
useMonacoEditor rows="6"> </x-forms.textarea>
@endif
@if ($application->build_pack !== 'dockercompose')
<h3 class="pt-8">Network</h3>
<div class="flex flex-col gap-2 xl:flex-row">
@if ($application->settings->is_static || $application->build_pack === 'static')
<x-forms.input id="application.ports_exposes" label="Ports Exposes" readonly />
@else
@if ($application->settings->is_container_label_readonly_enabled === false)
<x-forms.input placeholder="3000,3001" id="application.ports_exposes"
label="Ports Exposes" readonly
helper="Readonly labels are disabled. You can set the ports manually in the labels section." />
@else
<x-forms.input placeholder="3000,3001" id="application.ports_exposes"
label="Ports Exposes" required
helper="A comma separated list of ports your application uses. The first port will be used as default healthcheck port if nothing defined in the Healthcheck menu. Be sure to set this correctly." />
@if ((int) $application->compose_parsing_version >= 3)
<div x-show="showRaw">
<x-forms.textarea rows="10" readonly id="dockerComposeRaw" label="Docker Compose Content (raw)"
helper="You need to modify the docker compose file in the git repository."
monacoEditorLanguage="yaml" useMonacoEditor />
</div>
@endif
@endif
@if (!$application->destination->server->isSwarm())
<x-forms.input placeholder="3000:3000" id="application.ports_mappings" label="Ports Mappings"
helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host." />
@endif
@if (!$application->destination->server->isSwarm())
<x-forms.input id="application.custom_network_aliases" label="Network Aliases"
helper="A comma separated list of custom network aliases you would like to add for container in Docker network.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>api.internal,api.local"
wire:model="application.custom_network_aliases" />
@endif
</div>
<h3 class="pt-8">HTTP Basic Authentication</h3>
<div>
<div class="w-96">
<x-forms.checkbox helper="This will add the proper proxy labels to the container." instantSave
label="Enable" id="application.is_http_basic_auth_enabled" />
</div>
@if ($application->is_http_basic_auth_enabled)
<div class="flex gap-2 py-2">
<x-forms.input id="application.http_basic_auth_username" label="Username" required />
<x-forms.input id="application.http_basic_auth_password" type="password" label="Password"
required />
<div x-show="showRaw === false">
<x-forms.textarea rows="10" readonly id="dockerCompose" label="Docker Compose Content"
helper="You need to modify the docker compose file in the git repository."
monacoEditorLanguage="yaml" useMonacoEditor />
</div>
@endif
</div>
<div class="w-96">
<x-forms.checkbox label="Escape special characters in labels?"
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
id="isContainerLabelEscapeEnabled" instantSave x-bind:disabled="!canUpdate"></x-forms.checkbox>
{{-- <x-forms.checkbox label="Readonly labels"
helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
id="isContainerLabelReadonlyEnabled" instantSave></x-forms.checkbox> --}}
</div>
</div>
@endif
@if ($application->dockerfile)
<x-forms.textarea label="Dockerfile" id="dockerfile" monacoEditorLanguage="dockerfile" useMonacoEditor
rows="6" x-bind:disabled="!canUpdate"> </x-forms.textarea>
@endif
@if ($application->build_pack !== 'dockercompose')
<h3 class="pt-8">Network</h3>
@if ($this->detectedPortInfo)
@if ($this->detectedPortInfo['isEmpty'])
<div
class="flex items-start gap-2 p-4 mb-4 text-sm rounded-lg bg-warning-50 dark:bg-warning-900/20 text-warning-800 dark:text-warning-300 border border-warning-200 dark:border-warning-800">
<svg class="w-5 h-5 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
<div>
<span class="font-semibold">PORT environment variable detected
({{ $this->detectedPortInfo['port'] }})</span>
<p class="mt-1">Your Ports Exposes field is empty. Consider setting it to
<strong>{{ $this->detectedPortInfo['port'] }}</strong> to ensure the proxy routes traffic
correctly.</p>
</div>
</div>
@elseif (!$this->detectedPortInfo['matches'])
<div
class="flex items-start gap-2 p-4 mb-4 text-sm rounded-lg bg-warning-50 dark:bg-warning-900/20 text-warning-800 dark:text-warning-300 border border-warning-200 dark:border-warning-800">
<svg class="w-5 h-5 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd" />
</svg>
<div>
<span class="font-semibold">PORT mismatch detected</span>
<p class="mt-1">Your PORT environment variable is set to
<strong>{{ $this->detectedPortInfo['port'] }}</strong>, but it's not in your Ports Exposes
configuration. Ensure they match for proper proxy routing.</p>
</div>
</div>
@else
<div
class="flex items-start gap-2 p-4 mb-4 text-sm rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
<svg class="w-5 h-5 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
clip-rule="evenodd" />
</svg>
<div>
<span class="font-semibold">PORT environment variable configured</span>
<p class="mt-1">Your PORT environment variable ({{ $this->detectedPortInfo['port'] }}) matches
your Ports Exposes configuration.</p>
</div>
</div>
@endif
@endif
<div class="flex flex-col gap-2 xl:flex-row">
@if ($application->settings->is_static || $application->build_pack === 'static')
<x-forms.input id="portsExposes" label="Ports Exposes" readonly x-bind:disabled="!canUpdate" />
@else
@if ($application->settings->is_container_label_readonly_enabled === false)
<x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" readonly
helper="Readonly labels are disabled. You can set the ports manually in the labels section."
x-bind:disabled="!canUpdate" />
@else
<x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" required
helper="A comma separated list of ports your application uses. The first port will be used as default healthcheck port if nothing defined in the Healthcheck menu. Be sure to set this correctly."
x-bind:disabled="!canUpdate" />
@endif
@endif
@if (!$application->destination->server->isSwarm())
<x-forms.input placeholder="3000:3000" id="portsMappings" label="Ports Mappings"
helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host."
x-bind:disabled="!canUpdate" />
@endif
@if (!$application->destination->server->isSwarm())
<x-forms.input id="customNetworkAliases" label="Network Aliases"
helper="A comma separated list of custom network aliases you would like to add for container in Docker network.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>api.internal,api.local"
wire:model="customNetworkAliases" x-bind:disabled="!canUpdate" />
@endif
</div>
@if ($application->settings->is_container_label_readonly_enabled)
<x-forms.textarea readonly disabled label="Container Labels" rows="15" id="customLabels"
monacoEditorLanguage="ini" useMonacoEditor></x-forms.textarea>
@else
<x-forms.textarea label="Container Labels" rows="15" id="customLabels"
monacoEditorLanguage="ini" useMonacoEditor></x-forms.textarea>
@endif
<div class="w-96">
<x-forms.checkbox label="Readonly labels"
helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
id="application.settings.is_container_label_readonly_enabled" instantSave></x-forms.checkbox>
<x-forms.checkbox label="Escape special characters in labels?"
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
id="application.settings.is_container_label_escape_enabled" instantSave></x-forms.checkbox>
</div>
<x-modal-confirmation title="Confirm Labels Reset to Coolify Defaults?"
buttonTitle="Reset Labels to Defaults" buttonFullWidth submitAction="resetDefaultLabels(true)"
:actions="[
'All your custom proxy labels will be lost.',
'Proxy labels (traefik, caddy, etc) will be reset to the coolify defaults.',
]" confirmationText="{{ $application->fqdn . '/' }}"
confirmationLabel="Please confirm the execution of the actions by entering the Application URL below"
shortConfirmationLabel="Application URL" :confirmWithPassword="false"
step2ButtonText="Permanently Reset Labels" />
@endif
<h3 class="pt-8">HTTP Basic Authentication</h3>
<div>
<div class="w-96">
<x-forms.checkbox helper="This will add the proper proxy labels to the container." instantSave
label="Enable" id="isHttpBasicAuthEnabled" x-bind:disabled="!canUpdate" />
</div>
@if ($application->is_http_basic_auth_enabled)
<div class="flex gap-2 py-2">
<x-forms.input id="httpBasicAuthUsername" label="Username" required
x-bind:disabled="!canUpdate" />
<x-forms.input id="httpBasicAuthPassword" type="password" label="Password" required
x-bind:disabled="!canUpdate" />
</div>
@endif
</div>
<h3 class="pt-8">Pre/Post Deployment Commands</h3>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="php artisan migrate"
id="application.pre_deployment_command" label="Pre-deployment "
helper="An optional script or command to execute in the existing container before the deployment begins.<br>It is always executed with 'sh -c', so you do not need add it manually." />
@if ($application->build_pack === 'dockercompose')
<x-forms.input x-bind:disabled="initLoadingCompose"
id="application.pre_deployment_command_container" label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
@if ($application->settings->is_container_label_readonly_enabled)
<x-forms.textarea readonly disabled label="Container Labels" rows="15" id="customLabels"
monacoEditorLanguage="ini" useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>
@else
<x-forms.textarea label="Container Labels" rows="15" id="customLabels" monacoEditorLanguage="ini"
useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>
@endif
<div class="w-96">
<x-forms.checkbox label="Readonly labels"
helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
id="isContainerLabelReadonlyEnabled" instantSave
x-bind:disabled="!canUpdate"></x-forms.checkbox>
<x-forms.checkbox label="Escape special characters in labels?"
helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
id="isContainerLabelEscapeEnabled" instantSave x-bind:disabled="!canUpdate"></x-forms.checkbox>
</div>
@can('update', $application)
<x-modal-confirmation title="Confirm Labels Reset to Coolify Defaults?"
buttonTitle="Reset Labels to Defaults" buttonFullWidth submitAction="resetDefaultLabels(true)"
:actions="[
'All your custom proxy labels will be lost.',
'Proxy labels (traefik, caddy, etc) will be reset to the coolify defaults.',
]" confirmationText="{{ $application->fqdn . '/' }}"
confirmationLabel="Please confirm the execution of the actions by entering the Application URL below"
shortConfirmationLabel="Application URL" :confirmWithPassword="false"
step2ButtonText="Permanently Reset Labels" />
@endcan
@endif
<h3 class="pt-8">Pre/Post Deployment Commands</h3>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="php artisan migrate"
id="preDeploymentCommand" label="Pre-deployment "
helper="An optional script or command to execute in the existing container before the deployment begins.<br>It is always executed with 'sh -c', so you do not need add it manually." />
@if ($application->build_pack === 'dockercompose')
<x-forms.input x-bind:disabled="shouldDisable()" id="preDeploymentCommandContainer"
label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
@endif
</div>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input x-bind:disabled="shouldDisable()" placeholder="php artisan migrate"
id="postDeploymentCommand" label="Post-deployment "
helper="An optional script or command to execute in the newly built container after the deployment completes.<br>It is always executed with 'sh -c', so you do not need add it manually." />
@if ($application->build_pack === 'dockercompose')
<x-forms.input x-bind:disabled="shouldDisable()" id="postDeploymentCommandContainer"
label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
@endif
</div>
</div>
<div class="flex flex-col gap-2 xl:flex-row">
<x-forms.input x-bind:disabled="initLoadingCompose" placeholder="php artisan migrate"
id="application.post_deployment_command" label="Post-deployment "
helper="An optional script or command to execute in the newly built container after the deployment completes.<br>It is always executed with 'sh -c', so you do not need add it manually." />
@if ($application->build_pack === 'dockercompose')
<x-forms.input x-bind:disabled="initLoadingCompose"
id="application.post_deployment_command_container" label="Container Name"
helper="The name of the container to execute within. You can leave it blank if your application only has one container." />
@endif
</div>
</div>
</form>
<x-domain-conflict-modal :conflicts="$domainConflicts" :showModal="$showDomainConflictModal"
confirmAction="confirmDomainUsage" />
@script
<script>
$wire.$on('loadCompose', (isInit = true) => {
$wire.initLoadingCompose = true;
$wire.loadComposeFile(isInit);
});
</script>
<script>
$wire.$on('loadCompose', (isInit = true) => {
// Only load compose file if user has permission (this event should only be dispatched when authorized)
$wire.initLoadingCompose = true;
$wire.loadComposeFile(isInit);
});
</script>
@endscript
</div>
</div>
resources/views/livewire/project/application/heading.blade.php
+14 -5
View File
@@ -12,13 +12,22 @@
</a>
<a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.logs', $parameters) }}">
Logs
<div class="flex items-center gap-1">
Logs
@if ($application->restart_count > 0 && !str($application->status)->startsWith('exited'))
<svg class="w-4 h-4 dark:text-warning" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" title="Container has restarted {{ $application->restart_count }} time{{ $application->restart_count > 1 ? 's' : '' }}">
<path d="M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z"/>
</svg>
@endif
</div>
</a>
@if (!$application->destination->server->isSwarm())
<a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.command', $parameters) }}">
Terminal
</a>
@can('canAccessTerminal')
<a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.application.command', $parameters) }}">
Terminal
</a>
@endcan
@endif
<x-applications.links :application="$application" />
</nav>
resources/views/livewire/project/application/preview/form.blade.php
+5 -3
View File
@@ -1,13 +1,15 @@
<form wire:submit='submit'>
<div class="flex items-center gap-2">
<h2>Preview Deployments</h2>
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button isHighlighted wire:click="resetToDefault">Reset template to default</x-forms.button>
@can('update', $application)
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button isHighlighted wire:click="resetToDefault">Reset template to default</x-forms.button>
@endcan
</div>
<div class="pb-4 ">Preview Deployments based on pull requests are here.</div>
<div class="flex flex-col gap-2 pb-4">
<x-forms.input id="previewUrlTemplate" label="Preview URL Template"
helper="Templates:<br/><span class='text-helper'>@@{{ random }}</span> to generate random sub-domain each time a PR is deployed<br/><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." />
helper="Templates:<br/><span class='text-helper'>@@{{ random }}</span> to generate random sub-domain each time a PR is deployed<br/><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." canGate="update" :canResource="$application" />
@if ($previewUrlTemplate)
<div class="">Domain Preview: {{ $previewUrlTemplate }}</div>
@endif
resources/views/livewire/project/application/previews-compose.blade.php
+2 -2
View File
@@ -1,6 +1,6 @@
<form wire:submit="save" class="flex items-end gap-2">
<x-forms.input helper="One domain per preview." label="Domains for {{ str($serviceName)->headline() }}"
id="service.domain"></x-forms.input>
<x-forms.input helper="One domain per preview." label="Domains for {{ $serviceName }}" id="domain" canGate="update"
:canResource="$preview->application"></x-forms.input>
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button wire:click="generate">Generate
Domain</x-forms.button>
resources/views/livewire/project/application/previews.blade.php
+133 -102
View File
@@ -7,13 +7,15 @@
<div>
@if ($application->is_github_based())
<div class="flex items-center gap-2">
<h3>Pull Requests on Git</h3>
<x-forms.button wire:click="load_prs">Load Pull Requests
</x-forms.button>
@can('update', $application)
<h3>Pull Requests on Git</h3>
<x-forms.button wire:click="load_prs">Load Pull Requests
</x-forms.button>
@endcan
</div>
@endif
@isset($rate_limit_remaining)
<div class="pt-1 ">Requests remaining till rate limited by Git: {{ $rate_limit_remaining }}</div>
<div class="pt-1 pb-4">Requests remaining till rate limited by Git: {{ $rate_limit_remaining }}</div>
@endisset
<div wire:loading.remove wire:target='load_prs'>
@if ($pull_requests->count() > 0)
@@ -40,19 +42,23 @@
</a>
</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') }}')">
Configure
</x-forms.button>
<x-forms.button
wire:click="add_and_deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>Deploy
</x-forms.button>
@can('update', $application)
<x-forms.button
wire:click="add('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
Configure
</x-forms.button>
@endcan
@can('deploy', $application)
<x-forms.button
wire:click="add_and_deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>Deploy
</x-forms.button>
@endcan
</td>
</tr>
@endforeach
@@ -66,7 +72,8 @@
<h3 class="py-4">Deployments</h3>
<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 flex-col w-full p-4 border dark:border-coolgray-200"
wire:key="preview-container-{{ $preview->pull_request_id }}">
<div class="flex gap-2">PR #{{ data_get($preview, 'pull_request_id') }} |
@if (str(data_get($preview, 'status'))->startsWith('running'))
<x-status.running :status="data_get($preview, 'status')" />
@@ -85,6 +92,18 @@
PR on Git
<x-external-link />
</a>
@if (count($parameters) > 0)
|
<a
href="{{ route('project.application.deployment.index', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
Deployment Logs
</a>
|
<a
href="{{ route('project.application.logs', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
Application Logs
</a>
@endif
</div>
@if ($application->build_pack === 'dockercompose')
@@ -93,14 +112,17 @@
<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>
id="previewFqdns.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
@can('update', $application)
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button wire:click="generate_preview('{{ $preview->id }}')">Generate
Domain</x-forms.button>
@endcan
</form>
@else
@foreach (collect(json_decode($preview->docker_compose_domains)) as $serviceName => $service)
<livewire:project.application.previews-compose wire:key="{{ $preview->id }}"
<livewire:project.application.previews-compose
wire:key="preview-{{ $preview->pull_request_id }}-{{ $serviceName }}"
:service="$service" :serviceName="$serviceName" :preview="$preview" />
@endforeach
@endif
@@ -108,99 +130,108 @@
@else
<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>
id="previewFqdns.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
@can('update', $application)
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button wire:click="generate_preview('{{ $preview->id }}')">Generate
Domain</x-forms.button>
@endcan
</form>
@endif
<div class="flex items-center gap-2 pt-6">
@if (count($parameters) > 0)
<a
href="{{ route('project.application.deployment.index', [...$parameters, 'pull_request_id' => data_get($preview, 'pull_request_id')]) }}">
<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>
Application Logs
</x-forms.button>
</a>
@endif
<div class="flex flex-col xl:flex-row xl:items-center gap-2 pt-6">
<div class="flex-1"></div>
<x-forms.button
wire:click="force_deploy_without_cache({{ data_get($preview, 'pull_request_id') }})">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
<path
d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
<path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
<path d="M3 3l18 18" />
</svg>
Force deploy (without
cache)
</x-forms.button>
<x-forms.button wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
@if (data_get($preview, 'status') === 'exited')
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
@can('deploy', $application)
<x-forms.button
wire:click="force_deploy_without_cache({{ data_get($preview, 'pull_request_id') }})">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>
Deploy
@else
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
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="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
</path>
<path d="M7.05 11.038v-3.988"></path>
</svg> Redeploy
@endif
</x-forms.button>
@if (data_get($preview, 'status') !== 'exited')
<x-modal-confirmation title="Confirm Preview Deployment Stopping?" buttonTitle="Stop"
submitAction="stop({{ data_get($preview, 'pull_request_id') }})" :actions="[
'This preview deployment will be stopped.',
'If the preview deployment is currently in use data could be lost.',
'All non-persistent data of this preview deployment (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the preview deployment again).',
]"
:confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Stop Preview Deployment">
<x-slot:customButton>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error"
d="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
<path
d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
<path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
<path d="M3 3l18 18" />
</svg>
Force deploy (without
cache)
</x-forms.button>
<x-forms.button wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
@if (data_get($preview, 'status') === 'exited')
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 4v16l13 -8z" />
</svg>
Deploy
@else
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
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">
d="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
</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>
</x-modal-confirmation>
<path d="M7.05 11.038v-3.988"></path>
</svg> Redeploy
@endif
</x-forms.button>
@endcan
@if (data_get($preview, 'status') !== 'exited')
@can('deploy', $application)
<x-modal-confirmation title="Confirm Preview Deployment Stopping?" buttonTitle="Stop"
submitAction="stop({{ data_get($preview, 'pull_request_id') }})" :actions="[
'This preview deployment will be stopped.',
'If the preview deployment is currently in use data could be lost.',
'All non-persistent data of this preview deployment (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the preview deployment again).',
]"
:confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Stop Preview Deployment">
<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>
</x-modal-confirmation>
@endcan
@endif
<x-modal-confirmation title="Confirm Preview Deployment Deletion?" buttonTitle="Delete"
isErrorButton submitAction="delete({{ data_get($preview, 'pull_request_id') }})"
:actions="[
'All containers of this preview deployment will be stopped and permanently deleted.',
]" confirmationText="{{ data_get($preview, 'fqdn') . '/' }}"
confirmationLabel="Please confirm the execution of the actions by entering the Preview Deployment name below"
shortConfirmationLabel="Preview Deployment Name" :confirmWithPassword="false" />
@can('delete', $application)
<x-modal-confirmation title="Confirm Preview Deployment Deletion?" buttonTitle="Delete"
isErrorButton submitAction="delete({{ data_get($preview, 'pull_request_id') }})"
:actions="[
'All containers of this preview deployment will be stopped and permanently deleted.',
]" confirmationText="{{ data_get($preview, 'fqdn') . '/' }}"
confirmationLabel="Please confirm the execution of the actions by entering the Preview Deployment name below"
shortConfirmationLabel="Preview Deployment Name" :confirmWithPassword="false" />
@endcan
</div>
</div>
@endforeach
</div>
@endif
<x-domain-conflict-modal
:conflicts="$domainConflicts"
:showModal="$showDomainConflictModal"
confirmAction="confirmDomainUsage">
The preview deployment domain is already in use by other resources. Using the same domain for multiple resources can cause routing conflicts and unpredictable behavior.
<x-slot:consequences>
<ul class="mt-2 ml-4 list-disc">
<li>The preview deployment may not be accessible</li>
<li>Conflicts with production or other preview deployments</li>
<li>SSL certificates might not work correctly</li>
<li>Unpredictable routing behavior</li>
</ul>
</x-slot:consequences>
</x-domain-conflict-modal>
</div>
resources/views/livewire/project/application/rollback.blade.php
+54 -20
View File
@@ -1,41 +1,75 @@
<div x-init="$wire.loadImages">
<div class="flex items-center gap-2">
<h2>Rollback</h2>
<x-forms.button wire:click='loadImages(true)'>Reload Available Images</x-forms.button>
@can('view', $application)
<x-forms.button wire:click='loadImages(true)'>Reload Available Images</x-forms.button>
@endcan
</div>
<div class="pb-4">You can easily rollback to a previously built (local) images quickly.</div>
@if($serverRetentionDisabled)
<x-callout type="warning" class="mb-4">
Image retention is disabled at the server level. This setting has no effect until the server administrator enables it.
</x-callout>
@endif
<div class="pb-4">
<form wire:submit="saveSettings" class="flex items-end gap-2 w-96">
<x-forms.input id="dockerImagesToKeep" type="number" min="0" max="100" label="Images to keep for rollback"
helper="Number of Docker images to keep for rollback during cleanup. Set to 0 to only keep the currently running image. PR images are always deleted during cleanup.<br><br><strong>Note:</strong> Server administrators can disable image retention at the server level, which overrides this setting."
canGate="update" :canResource="$application" :disabled="$serverRetentionDisabled" />
<x-forms.button canGate="update" :canResource="$application" type="submit" :disabled="$serverRetentionDisabled">Save</x-forms.button>
</form>
</div>
<div class="pb-4 ">You can easily rollback to a previously built (local) images
quickly.</div>
<div wire:target='loadImages' wire:loading.remove>
<div class="flex flex-wrap">
@forelse ($images as $image)
<div class="w-2/4 p-2">
<div class="bg-white border rounded-sm dark:border-black dark:bg-coolgray-100 border-neutral-200">
<div
class="bg-white border rounded-sm dark:border-coolgray-300 dark:bg-coolgray-100 border-neutral-200">
@php
$tag = data_get($image, 'tag');
$date = data_get($image, 'created_at');
$interval = \Illuminate\Support\Carbon::parse($date);
// Check if tag looks like a commit SHA (hex string) or PR tag (pr-N)
$isCommitSha = preg_match('/^[0-9a-f]{7,128}$/i', $tag);
$isPrTag = preg_match('/^pr-\d+$/', $tag);
$isRollbackable = $isCommitSha || $isPrTag;
@endphp
<div class="p-2">
<div class="">
@if (data_get($image, 'is_current'))
<span class="font-bold dark:text-warning">LIVE</span>
|
@endif
SHA: {{ data_get($image, 'tag') }}
@if ($isCommitSha)
SHA: {{ $tag }}
@elseif ($isPrTag)
PR: {{ $tag }}
@else
Tag: {{ $tag }}
@endif
</div>
@php
$date = data_get($image, 'created_at');
$interval = \Illuminate\Support\Carbon::parse($date);
@endphp
<div class="text-xs">{{ $interval->diffForHumans() }}</div>
<div class="text-xs">{{ $date }}</div>
</div>
<div class="flex justify-end p-2">
@if (data_get($image, 'is_current'))
<x-forms.button disabled tooltip="This image is currently running.">
Rollback
</x-forms.button>
@else
<x-forms.button class="dark:bg-coolgray-100"
wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
Rollback
</x-forms.button>
@endif
@can('deploy', $application)
@if (data_get($image, 'is_current'))
<x-forms.button disabled tooltip="This image is currently running.">
Rollback
</x-forms.button>
@elseif (!$isRollbackable)
<x-forms.button disabled tooltip="Rollback not available for '{{ $tag }}' tag. Only commit-based tags support rollback. Re-deploy to create a rollback-enabled image.">
Rollback
</x-forms.button>
@else
<x-forms.button class="dark:bg-coolgray-100"
wire:click="rollbackImage('{{ $tag }}')">
Rollback
</x-forms.button>
@endif
@endcan
</div>
</div>
</div>
@@ -45,4 +79,4 @@
</div>
</div>
<div wire:target='loadImages' wire:loading>Loading available docker images...</div>
</div>
</div>
resources/views/livewire/project/application/source.blade.php
+64 -56
View File
@@ -2,26 +2,28 @@
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>Source</h2>
<x-forms.button type="submit">Save</x-forms.button>
<a target="_blank" class="hover:no-underline" href="{{ $application?->gitBranchLocation }}">
<x-forms.button>
@can('update', $application)
<x-forms.button type="submit">Save</x-forms.button>
@endcan
<div class="flex items-center gap-4 px-2">
<a target="_blank" class="hover:no-underline flex items-center gap-1"
href="{{ $application?->gitBranchLocation }}">
Open Repository
<x-external-link />
</x-forms.button>
</a>
@if (data_get($application, 'source.is_public') === false)
<a target="_blank" class="hover:no-underline" href="{{ getInstallationPath($application->source) }}">
<x-forms.button>
</a>
@if (data_get($application, 'source.is_public') === false)
<a target="_blank" class="hover:no-underline flex items-center gap-1"
href="{{ getInstallationPath($application->source) }}">
Open Git App
<x-external-link />
</x-forms.button>
</a>
@endif
<a target="_blank" class="flex hover:no-underline" href="{{ $application?->gitCommits }}">
<x-forms.button>Open Commits on Git
</a>
@endif
<a target="_blank" class="flex hover:no-underline items-center gap-1"
href="{{ $application?->gitCommits }}">
Open Commits on Git
<x-external-link />
</x-forms.button>
</a>
</a>
</div>
</div>
<div class="pb-4">Code source of your application.</div>
@@ -32,11 +34,13 @@
</div>
@endif
<div class="flex gap-2">
<x-forms.input placeholder="coollabsio/coolify-example" id="gitRepository" label="Repository" />
<x-forms.input placeholder="main" id="gitBranch" label="Branch" />
<x-forms.input placeholder="coollabsio/coolify-example" id="gitRepository" label="Repository"
canGate="update" :canResource="$application" />
<x-forms.input placeholder="main" id="gitBranch" label="Branch" canGate="update" :canResource="$application" />
</div>
<div class="flex items-end gap-2">
<x-forms.input placeholder="HEAD" id="gitCommitSha" placeholder="HEAD" label="Commit SHA" />
<x-forms.input placeholder="HEAD" id="gitCommitSha" placeholder="HEAD" label="Commit SHA"
canGate="update" :canResource="$application" />
</div>
</div>
@@ -46,45 +50,49 @@
class="dark:text-warning">{{ $privateKeyName }}</span>
</div>
<h4 class="py-2 ">Select another Private Key</h4>
<div class="flex flex-wrap gap-2">
@foreach ($privateKeys as $key)
<x-forms.button wire:click="setPrivateKey('{{ $key->id }}')">{{ $key->name }}
</x-forms.button>
@endforeach
</div>
@else
<div class="pt-4">
<h3 class="pb-2">Change Git Source</h3>
<div class="grid grid-cols-1 gap-2">
@forelse ($sources as $source)
<div wire:key="{{ $source->name }}">
<x-modal-confirmation title="Change Git Source" :actions="['Change git source to ' . $source->name]" :buttonFullWidth="true"
:isHighlightedButton="$application->source_id === $source->id" :disabled="$application->source_id === $source->id"
submitAction="changeSource({{ $source->id }}, {{ $source->getMorphClass() }})"
:confirmWithText="true" confirmationText="Change Git Source"
confirmationLabel="Please confirm changing the git source by entering the text below"
shortConfirmationLabel="Confirmation Text" :confirmWithPassword="false">
<x-slot:customButton>
<div class="flex items-center gap-2">
<div class="box-title">
{{ $source->name }}
@if ($application->source_id === $source->id)
<span class="text-xs">(current)</span>
@endif
</div>
<div class="box-description">
{{ $source->organization ?? 'Personal Account' }}
</div>
</div>
</x-slot:customButton>
</x-modal-confirmation>
</div>
@empty
<div>No other sources found</div>
@endforelse
@can('update', $application)
<h4 class="py-2 ">Select another Private Key</h4>
<div class="flex flex-wrap gap-2">
@foreach ($privateKeys as $key)
<x-forms.button wire:click="setPrivateKey('{{ $key->id }}')">{{ $key->name }}
</x-forms.button>
@endforeach
</div>
</div>
@endcan
@else
@can('update', $application)
<div class="pt-4">
<h3 class="pb-2">Change Git Source</h3>
<div class="grid grid-cols-1 gap-2">
@forelse ($sources as $source)
<div wire:key="{{ $source->name }}">
<x-modal-confirmation title="Change Git Source" :actions="['Change git source to ' . $source->name]" :buttonFullWidth="true"
:isHighlightedButton="$application->source_id === $source->id" :disabled="$application->source_id === $source->id"
submitAction="changeSource({{ $source->id }}, {{ $source->getMorphClass() }})"
:confirmWithText="true" confirmationText="Change Git Source"
confirmationLabel="Please confirm changing the git source by entering the text below"
shortConfirmationLabel="Confirmation Text" :confirmWithPassword="false">
<x-slot:customButton>
<div class="flex items-center gap-2">
<div class="box-title">
{{ $source->name }}
@if ($application->source_id === $source->id)
<span class="text-xs">(current)</span>
@endif
</div>
<div class="box-description">
{{ $source->organization ?? 'Personal Account' }}
</div>
</div>
</x-slot:customButton>
</x-modal-confirmation>
</div>
@empty
<div>No other sources found</div>
@endforelse
</div>
</div>
@endcan
@endif
</form>
</div>
resources/views/livewire/project/application/swarm.blade.php
+13 -6
View File
@@ -2,20 +2,27 @@
<form wire:submit='submit' class="flex flex-col">
<div class="flex items-center gap-2">
<h2>Swarm Configuration</h2>
<x-forms.button type="submit">
Save
</x-forms.button>
@can('update', $application)
<x-forms.button type="submit">
Save
</x-forms.button>
@else
<x-forms.button type="submit" disabled
title="You don't have permission to update this application. Contact your team administrator for access.">
Save
</x-forms.button>
@endcan
</div>
<div class="flex flex-col gap-2 py-4">
<div class="flex flex-col items-end gap-2 xl:flex-row">
<x-forms.input id="swarmReplicas" label="Replicas" required />
<x-forms.input id="swarmReplicas" label="Replicas" required canGate="update" :canResource="$application" />
<x-forms.checkbox instantSave helper="If turned off, this resource will start on manager nodes too."
id="isSwarmOnlyWorkerNodes" label="Only Start on Worker nodes" />
id="isSwarmOnlyWorkerNodes" label="Only Start on Worker nodes" canGate="update" :canResource="$application" />
</div>
<x-forms.textarea id="swarmPlacementConstraints" rows="7" label="Custom Placement Constraints"
placeholder="placement:
constraints:
- 'node.role == worker'" />
- 'node.role == worker'" canGate="update" :canResource="$application" />
</div>
</form>
resources/views/livewire/project/database/backup-edit.blade.php
+12 -4
View File
@@ -18,7 +18,7 @@
shortConfirmationLabel="Database Name" />
@endif
</div>
<div class="w-48 pb-2">
<div class="w-64 pb-2">
<x-forms.checkbox instantSave label="Backup Enabled" id="backupEnabled" />
@if ($s3s->count() > 0)
<x-forms.checkbox instantSave label="S3 Enabled" id="saveS3" />
@@ -26,11 +26,18 @@
<x-forms.checkbox instantSave helper="No validated S3 storage available." label="S3 Enabled" id="saveS3"
disabled />
@endif
@if ($backup->save_s3)
<x-forms.checkbox instantSave label="Disable Local Backup" id="disableLocalBackup"
helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
@else
<x-forms.checkbox disabled label="Disable Local Backup" id="disableLocalBackup"
helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
@endif
</div>
@if ($backup->save_s3)
<div class="pb-6">
<x-forms.select id="s3StorageId" label="S3 Storage" required>
<option value="default">Select a S3 storage</option>
<option value="default" disabled>Select a S3 storage</option>
@foreach ($s3s as $s3)
<option value="{{ $s3->id }}">{{ $s3->name }}</option>
@endforeach
@@ -77,6 +84,7 @@
<x-forms.input label="Frequency" id="frequency" />
<x-forms.input label="Timezone" id="timezone" disabled
helper="The timezone of the server where the backup is scheduled to run (if not set, the instance timezone will be used)" />
<x-forms.input label="Timeout" id="timeout" helper="The timeout of the backup job in seconds." />
</div>
<h3 class="mt-6 mb-2 text-lg font-medium">Backup Retention Settings</h3>
@@ -98,7 +106,7 @@
min="0"
helper="Automatically removes backups older than the specified number of days. Set to 0 for no time limit." />
<x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageLocally"
type="number" min="0" step="0.0000001"
type="number" min="0"
helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.001 for 1MB). Set to 0 for unlimited storage." />
</div>
</div>
@@ -114,7 +122,7 @@
min="0"
helper="Automatically removes S3 backups older than the specified number of days. Set to 0 for no time limit." />
<x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageS3"
type="number" min="0" step="0.0000001"
type="number" min="0"
helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.5 for 500MB). Set to 0 for unlimited storage." />
</div>
</div>
resources/views/livewire/project/database/backup-executions.blade.php
+69 -31
View File
@@ -1,10 +1,36 @@
<div wire:init='refreshBackupExecutions'>
@isset($backup)
<div class="flex items-center gap-2">
<h3 class="py-4">Executions</h3>
<h3 class="py-4">Executions <span class="text-xs">({{ $executions_count }})</span></h3>
@if ($executions_count > 0)
<div class="flex items-center gap-2">
<x-forms.button disabled="{{ !$showPrev }}" wire:click="previousPage('{{ $defaultTake }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m14 6l-6 6l6 6z" />
</svg>
</x-forms.button>
<span class="text-sm text-gray-600 dark:text-gray-400 px-2">
Page {{ $currentPage }} of {{ ceil($executions_count / $defaultTake) }}
</span>
<x-forms.button disabled="{{ !$showNext }}" wire:click="nextPage('{{ $defaultTake }}')">
<svg class="w-4 h-4" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m10 18l6-6l-6-6z" />
</svg>
</x-forms.button>
</div>
@endif
<x-forms.button wire:click='cleanupFailed'>Cleanup Failed Backups</x-forms.button>
<x-modal-confirmation title="Cleanup Deleted Backup Entries?" buttonTitle="Cleanup Deleted" isErrorButton
submitAction="cleanupDeleted()"
:actions="['This will permanently delete all backup execution entries that are marked as deleted from local storage.', 'This only removes database entries, not actual backup files.']"
confirmationText="cleanup deleted backups"
confirmationLabel="Please confirm by typing 'cleanup deleted backups' below"
shortConfirmationLabel="Confirmation" />
</div>
<div wire:poll.5000ms="refreshBackupExecutions" class="flex flex-col gap-4">
<div @if (!$skip) wire:poll.5000ms="refreshBackupExecutions" @endif
class="flex flex-col gap-4">
@forelse($executions as $execution)
<div wire:key="{{ data_get($execution, 'id') }}" @class([
'flex flex-col border-l-2 transition-colors p-4 bg-white dark:bg-coolgray-100 text-black dark:text-white',
@@ -25,12 +51,14 @@
data_get($execution, 'status') === 'running',
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200 dark:shadow-red-900/5' =>
data_get($execution, 'status') === 'failed',
'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200 dark:shadow-amber-900/5' =>
data_get($execution, 'status') === 'success' && data_get($execution, 's3_uploaded') === false,
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200 dark:shadow-green-900/5' =>
data_get($execution, 'status') === 'success',
data_get($execution, 'status') === 'success' && data_get($execution, 's3_uploaded') !== false,
])>
@php
$statusText = match (data_get($execution, 'status')) {
'success' => 'Success',
'success' => data_get($execution, 's3_uploaded') === false ? 'Success (S3 Warning)' : 'Success',
'running' => 'In Progress',
'failed' => 'Failed',
default => ucfirst(data_get($execution, 'status')),
@@ -40,22 +68,21 @@
</span>
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at'), $this->server()) }}
@if (data_get($execution, 'status') !== 'running')
<br>Ended:
{{ formatDateInServerTimezone(data_get($execution, 'finished_at'), $this->server()) }}
<br>Duration:
{{ calculateDuration(data_get($execution, 'created_at'), data_get($execution, 'finished_at')) }}
<br>Finished {{ \Carbon\Carbon::parse(data_get($execution, 'finished_at'))->diffForHumans() }}
@if (data_get($execution, 'status') === 'running')
<span title="Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at'), $this->server()) }}">
Running for {{ calculateDuration(data_get($execution, 'created_at'), now()) }}
</span>
@else
<span title="Started: {{ formatDateInServerTimezone(data_get($execution, 'created_at'), $this->server()) }}&#10;Ended: {{ formatDateInServerTimezone(data_get($execution, 'finished_at'), $this->server()) }}">
{{ \Carbon\Carbon::parse(data_get($execution, 'finished_at'))->diffForHumans() }}
({{ calculateDuration(data_get($execution, 'created_at'), data_get($execution, 'finished_at')) }})
• {{ \Carbon\Carbon::parse(data_get($execution, 'finished_at'))->format('M j, H:i') }}
</span>
@endif
• Database: {{ data_get($execution, 'database_name', 'N/A') }}
@if(data_get($execution, 'size'))
• Size: {{ formatBytes(data_get($execution, 'size')) }}
@endif
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Database: {{ data_get($execution, 'database_name', 'N/A') }}
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Size: {{ data_get($execution, 'size') }} B /
{{ round((int) data_get($execution, 'size') / 1024, 2) }} kB /
{{ round((int) data_get($execution, 'size') / 1024 / 1024, 3) }} MB
</div>
<div class="text-gray-600 dark:text-gray-400 text-sm">
Location: {{ data_get($execution, 'filename', 'N/A') }}
@@ -94,20 +121,15 @@
Local Storage
</span>
</span>
@if ($backup->save_s3)
@if (data_get($execution, 's3_uploaded') !== null)
<span @class([
'px-2 py-1 rounded-sm text-xs font-medium',
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => !data_get(
$execution,
's3_storage_deleted',
false),
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get(
$execution,
's3_storage_deleted',
false),
'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-200' => data_get($execution, 's3_uploaded') === false && !data_get($execution, 's3_storage_deleted', false),
'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-200' => data_get($execution, 's3_uploaded') === true && !data_get($execution, 's3_storage_deleted', false),
'bg-gray-100 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400' => data_get($execution, 's3_storage_deleted', false),
])>
<span class="flex items-center gap-1">
@if (!data_get($execution, 's3_storage_deleted', false))
@if (data_get($execution, 's3_uploaded') === true && !data_get($execution, 's3_storage_deleted', false))
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
@@ -137,9 +159,25 @@
<x-forms.button class="dark:hover:bg-coolgray-400"
x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
@endif
@php
$executionCheckboxes = [];
$deleteActions = [];
if (!data_get($execution, 'local_storage_deleted', false)) {
$deleteActions[] = 'This backup will be permanently deleted from local storage.';
}
if (data_get($execution, 's3_uploaded') === true && !data_get($execution, 's3_storage_deleted', false)) {
$executionCheckboxes[] = ['id' => 'delete_backup_s3', 'label' => 'Delete the selected backup permanently from S3 Storage'];
}
if (empty($deleteActions)) {
$deleteActions[] = 'This backup execution record will be deleted.';
}
@endphp
<x-modal-confirmation title="Confirm Backup Deletion?" buttonTitle="Delete" isErrorButton
submitAction="deleteBackup({{ data_get($execution, 'id') }})" :checkboxes="$checkboxes"
:actions="['This backup will be permanently deleted from local storage.']" confirmationText="{{ data_get($execution, 'filename') }}"
submitAction="deleteBackup({{ data_get($execution, 'id') }})" :checkboxes="$executionCheckboxes"
:actions="$deleteActions" confirmationText="{{ data_get($execution, 'filename') }}"
confirmationLabel="Please confirm the execution of the actions by entering the Backup Filename below"
shortConfirmationLabel="Backup Filename" 1 />
</div>
resources/views/livewire/project/database/backup/index.blade.php
+5 -3
View File
@@ -8,9 +8,11 @@
<div>
<div class="flex gap-2">
<h2 class="pb-4">Scheduled Backups</h2>
<x-modal-input buttonTitle="+ Add" title="New Scheduled Backup">
<livewire:project.database.create-scheduled-backup :database="$database" />
</x-modal-input>
@can('update', $database)
<x-modal-input buttonTitle="+ Add" title="New Scheduled Backup">
<livewire:project.database.create-scheduled-backup :database="$database" />
</x-modal-input>
@endcan
</div>
<livewire:project.database.scheduled-backups :database="$database" />
</div>
resources/views/livewire/project/database/clickhouse/general.blade.php
+22 -17
View File
@@ -2,54 +2,56 @@
<form wire:submit="submit" class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<h2>General</h2>
<x-forms.button type="submit">
<x-forms.button type="submit" canGate="update" :canResource="$database">
Save
</x-forms.button>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="name" />
<x-forms.input label="Description" id="description" />
<x-forms.input label="Image" id="image" required
<x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
<x-forms.input label="Description" id="description" canGate="update" :canResource="$database" />
<x-forms.input label="Image" id="image" required canGate="update" :canResource="$database"
helper="For all available images, check here:<br><br><a target='_blank' href='https://hub.docker.com/r/clickhouse/clickhouse-server/'>https://hub.docker.com/r/clickhouse/clickhouse-server/</a>" />
</div>
@if ($database->started_at)
<div class="flex gap-2">
<x-forms.input label="Initial Username" id="clickhouseAdminUser" placeholder="If empty: clickhouse"
readonly helper="You can only change this in the database." />
readonly helper="You can only change this in the database." canGate="update" :canResource="$database" />
<x-forms.input label="Initial Password" id="clickhouseAdminPassword" type="password" required readonly
helper="You can only change this in the database." />
helper="You can only change this in the database." canGate="update" :canResource="$database" />
</div>
@else
<div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
start. After that, you need to modify it in the database.
</div>
<div class="flex gap-2">
<x-forms.input label="Username" id="clickhouseAdminUser" required />
<x-forms.input label="Password" id="clickhouseAdminPassword" type="password" required />
<x-forms.input label="Username" id="clickhouseAdminUser" required canGate="update" :canResource="$database" />
<x-forms.input label="Password" id="clickhouseAdminPassword" type="password" required canGate="update"
:canResource="$database" />
</div>
@endif
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
id="customDockerRunOptions" label="Custom Docker Options" />
id="customDockerRunOptions" label="Custom Docker Options" canGate="update" :canResource="$database" />
<div class="flex flex-col gap-2">
<h3 class="py-2">Network</h3>
<div class="flex items-end gap-2">
<x-forms.input placeholder="3000:5432" id="portsMappings" label="Ports Mappings"
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433" />
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
canGate="update" :canResource="$database" />
</div>
<x-forms.input label="Clickhouse URL (internal)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrl" />
type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
@if ($dbUrlPublic)
<x-forms.input label="Clickhouse URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrlPublic" />
type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
@else
<x-forms.input label="Clickhouse URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
readonly value="Starting the database will generate this." />
readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
@endif
</div>
<div>
@@ -64,21 +66,24 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>
</x-slide-over>
@endif
</div>
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" />
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
:canResource="$database" />
</div>
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port" />
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
canGate="update" :canResource="$database" />
</div>
</form>
<h3 class="pt-4">Advanced</h3>
<div class="w-64">
<x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" />
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" canGate="update"
:canResource="$database" />
</div>
</div>
resources/views/livewire/project/database/configuration.blade.php
+5 -3
View File
@@ -17,9 +17,11 @@
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.database.persistent-storage', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}">Persistent
Storage</a>
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.database.import-backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}">Import
Backups</a>
@can('update', $database)
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.database.import-backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}">Import
Backups</a>
@endcan
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.database.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}">Webhooks</a>
<a class="menu-item" wire:current.exact="menu-item-active"
resources/views/livewire/project/database/dragonfly/general.blade.php
+23 -17
View File
@@ -2,51 +2,53 @@
<form wire:submit="submit" class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<h2>General</h2>
<x-forms.button type="submit">
<x-forms.button type="submit" canGate="update" :canResource="$database">
Save
</x-forms.button>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="name" />
<x-forms.input label="Description" id="description" />
<x-forms.input label="Image" id="image" required />
<x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
<x-forms.input label="Description" id="description" canGate="update" :canResource="$database" />
<x-forms.input label="Image" id="image" required canGate="update" :canResource="$database" />
</div>
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
id="customDockerRunOptions" label="Custom Docker Options" />
id="customDockerRunOptions" label="Custom Docker Options" canGate="update" :canResource="$database" />
@if ($database->started_at)
<div class="flex gap-2">
<x-forms.input label="Initial Password" id="dragonflyPassword" type="password" required readonly
helper="You can only change this in the database." />
helper="You can only change this in the database." canGate="update" :canResource="$database" />
</div>
@else
<div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
start. After that, you need to modify it in the database.
</div>
<div class="flex gap-2">
<x-forms.input label="Password" id="dragonflyPassword" type="password" required />
<x-forms.input label="Password" id="dragonflyPassword" type="password" required canGate="update"
:canResource="$database" />
</div>
@endif
<div class="flex flex-col gap-2">
<h3 class="py-2">Network</h3>
<div class="flex items-end gap-2">
<x-forms.input placeholder="3000:5432" id="portsMappings" label="Ports Mappings"
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433" />
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
canGate="update" :canResource="$database" />
</div>
<x-forms.input label="Dragonfly URL (internal)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrl" />
type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
@if ($dbUrlPublic)
<x-forms.input label="Dragonfly URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrlPublic" />
type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
@else
<x-forms.input label="Dragonfly URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
readonly value="Starting the database will generate this." />
readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
@endif
</div>
<div class="flex flex-col gap-2">
@@ -79,11 +81,12 @@
<div class="w-64">
@if (str($database->status)->contains('exited'))
<x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
instantSave="instantSaveSSL" />
instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
@else
<x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
instantSave="instantSaveSSL" disabled
helper="Database should be stopped to change this settings." />
helper="Database should be stopped to change this settings." canGate="update"
:canResource="$database" />
@endif
</div>
</div>
@@ -100,21 +103,24 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>
</x-slide-over>
@endif
</div>
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" />
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
:canResource="$database" />
</div>
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port" />
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
canGate="update" :canResource="$database" />
</div>
</form>
<h3 class="pt-4">Advanced</h3>
<div class="w-64">
<x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" />
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" canGate="update"
:canResource="$database" />
</div>
</div>
resources/views/livewire/project/database/heading.blade.php
+9 -5
View File
@@ -3,7 +3,9 @@
<x-slide-over @startdatabase.window="slideOverOpen = true" closeWithX fullScreen>
<x-slot:title>Database Startup</x-slot:title>
<x-slot:content>
<livewire:activity-monitor header="Logs" fullHeight />
<div wire:ignore>
<livewire:activity-monitor header="Logs" fullHeight />
</div>
</x-slot:content>
</x-slide-over>
<div class="navbar-main">
@@ -18,10 +20,12 @@
href="{{ route('project.database.logs', $parameters) }}">
Logs
</a>
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.command', $parameters) }}">
Terminal
</a>
@can('canAccessTerminal')
<a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
href="{{ route('project.database.command', $parameters) }}">
Terminal
</a>
@endcan
@if (
$database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
$database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
resources/views/livewire/project/database/import.blade.php
+185 -66
View File
@@ -1,54 +1,65 @@
<div x-data="{ error: $wire.entangle('error'), filesize: $wire.entangle('filesize'), filename: $wire.entangle('filename'), isUploading: $wire.entangle('isUploading'), progress: $wire.entangle('progress') }">
<div x-data="{
error: $wire.entangle('error'),
filesize: $wire.entangle('filesize'),
filename: $wire.entangle('filename'),
isUploading: $wire.entangle('isUploading'),
progress: $wire.entangle('progress'),
s3FileSize: $wire.entangle('s3FileSize'),
s3StorageId: $wire.entangle('s3StorageId'),
s3Path: $wire.entangle('s3Path'),
restoreType: null
}">
<script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
@script
<script data-navigate-once>
Dropzone.options.myDropzone = {
chunking: true,
method: "POST",
maxFilesize: 1000000000,
chunkSize: 10000000,
createImageThumbnails: false,
disablePreviews: true,
parallelChunkUploads: false,
init: function() {
let button = this.element.querySelector('button');
button.innerText = 'Select or drop a backup file here.'
this.on('sending', function(file, xhr, formData) {
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
formData.append("_token", token);
});
this.on("addedfile", file => {
$wire.isUploading = true;
});
this.on('uploadprogress', function(file, progress, bytesSent) {
$wire.progress = progress;
});
this.on('complete', function(file) {
$wire.filename = file.name;
$wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
$wire.isUploading = false;
});
this.on('error', function(file, message) {
$wire.error = true;
$wire.$dispatch('error', message.error)
});
}
};
</script>
<script data-navigate-once>
Dropzone.options.myDropzone = {
chunking: true,
method: "POST",
maxFilesize: 1000000000,
chunkSize: 10000000,
createImageThumbnails: false,
disablePreviews: true,
parallelChunkUploads: false,
init: function () {
let button = this.element.querySelector('button');
button.innerText = 'Select or drop a backup file here.'
this.on('sending', function (file, xhr, formData) {
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
formData.append("_token", token);
});
this.on("addedfile", file => {
$wire.isUploading = true;
$wire.customLocation = '';
});
this.on('uploadprogress', function (file, progress, bytesSent) {
$wire.progress = progress;
});
this.on('complete', function (file) {
$wire.filename = file.name;
$wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
$wire.isUploading = false;
});
this.on('error', function (file, message) {
$wire.error = true;
$wire.$dispatch('error', message.error)
});
}
};
</script>
@endscript
<h2>Import Backup</h2>
@if ($unsupported)
<div>Database restore is not supported.</div>
@else
<div class="pt-2 rounded-sm 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">
<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" />
</svg>
<span>This is a destructive action, existing data will be replaced!</span>
</div>
@if (str(data_get($resource, 'status'))->startsWith('running'))
{{-- Restore Command Configuration --}}
@if ($resource->type() === 'standalone-postgresql')
@if ($dumpAll)
<x-forms.textarea rows="6" readonly label="Custom Import Command"
@@ -62,8 +73,7 @@
</div>
@endif
<div class="w-64 pt-2">
<x-forms.checkbox label="Backup includes all databases"
wire:model.live='dumpAll'></x-forms.checkbox>
<x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
</div>
@elseif ($resource->type() === 'standalone-mysql')
@if ($dumpAll)
@@ -73,8 +83,7 @@
<x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand'></x-forms.input>
@endif
<div class="w-64 pt-2">
<x-forms.checkbox label="Backup includes all databases"
wire:model.live='dumpAll'></x-forms.checkbox>
<x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
</div>
@elseif ($resource->type() === 'standalone-mariadb')
@if ($dumpAll)
@@ -84,35 +93,145 @@
<x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand'></x-forms.input>
@endif
<div class="w-64 pt-2">
<x-forms.checkbox label="Backup includes all databases"
wire:model.live='dumpAll'></x-forms.checkbox>
<x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
</div>
@endif
<h3 class="pt-6">Backup File</h3>
<form class="flex gap-2 items-end">
<x-forms.input label="Location of the backup file on the server"
placeholder="e.g. /home/user/backup.sql.gz" wire:model='customLocation'></x-forms.input>
<x-forms.button class="w-full" wire:click='checkFile'>Check File</x-forms.button>
</form>
<div class="pt-2 text-center text-xl font-bold">
Or
</div>
<form action="/upload/backup/{{ $resource->uuid }}" class="dropzone" id="my-dropzone" wire:ignore>
@csrf
</form>
<div x-show="isUploading">
<progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
</div>
<h3 class="pt-6" x-show="filename && !error">File Information</h3>
<div x-show="filename && !error">
<div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
<x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
</div>
<div class="container w-full mx-auto">
<livewire:activity-monitor header="Database Restore Output" />
{{-- Restore Type Selection Boxes --}}
<h3 class="pt-6">Choose Restore Method</h3>
<div class="flex gap-4 pt-2">
<div @click="restoreType = 'file'"
class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
:class="restoreType === 'file' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
<div class="flex flex-col gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<h4 class="text-lg font-bold">Restore from File</h4>
<p class="text-sm text-neutral-600 dark:text-neutral-400">Upload a backup file or specify a file path on the server</p>
</div>
</div>
@if ($availableS3Storages->count() > 0)
<div @click="restoreType = 's3'"
class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
:class="restoreType === 's3' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
<div class="flex flex-col gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
<h4 class="text-lg font-bold">Restore from S3</h4>
<p class="text-sm text-neutral-600 dark:text-neutral-400">Download and restore a backup from S3 storage</p>
</div>
</div>
@endif
</div>
{{-- File Restore Section --}}
@can('update', $resource)
<div x-show="restoreType === 'file'" class="pt-6">
<h3>Backup File</h3>
<form class="flex gap-2 items-end pt-2">
<x-forms.input label="Location of the backup file on the server" placeholder="e.g. /home/user/backup.sql.gz"
wire:model='customLocation' x-model="$wire.customLocation"></x-forms.input>
<x-forms.button class="w-full" wire:click='checkFile' x-bind:disabled="!$wire.customLocation">Check File</x-forms.button>
</form>
<div class="pt-2 text-center text-xl font-bold">
Or
</div>
<form action="/upload/backup/{{ $resource->uuid }}" class="dropzone" id="my-dropzone" wire:ignore>
@csrf
</form>
<div x-show="isUploading">
<progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
</div>
<div x-show="filename && !error" class="pt-6">
<h3>File Information</h3>
<div class="pt-2">Location: <span x-text="filename ?? 'N/A'"></span><span x-show="filesize" x-text="' / ' + filesize"></span></div>
<div class="pt-2">
<x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
submitAction="runImport" isErrorButton>
<x-slot:button-title>
Restore Database from File
</x-slot:button-title>
This will perform the following actions:
<ul class="list-disc list-inside pt-2">
<li>Copy backup file to database container</li>
<li>Execute restore command</li>
</ul>
<div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
</x-modal-confirmation>
</div>
</div>
</div>
@endcan
{{-- S3 Restore Section --}}
@if ($availableS3Storages->count() > 0)
@can('update', $resource)
<div x-show="restoreType === 's3'" class="pt-6">
<h3>Restore from S3</h3>
<div class="flex flex-col gap-2 pt-2">
<x-forms.select label="S3 Storage" wire:model.live="s3StorageId">
<option value="">Select S3 Storage</option>
@foreach ($availableS3Storages as $storage)
<option value="{{ $storage->id }}">{{ $storage->name }}
@if ($storage->description)
- {{ $storage->description }}
@endif
</option>
@endforeach
</x-forms.select>
<x-forms.input label="S3 File Path (within bucket)"
helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
placeholder="/backups/database-backup.gz" wire:model.blur='s3Path'
wire:keydown.enter='checkS3File'></x-forms.input>
<div class="flex gap-2">
<x-forms.button class="w-full" wire:click='checkS3File' x-bind:disabled="!s3StorageId || !s3Path">
Check File
</x-forms.button>
</div>
@if ($s3FileSize)
<div class="pt-6">
<h3>File Information</h3>
<div class="pt-2">Location: {{ $s3Path }} {{ formatBytes($s3FileSize ?? 0) }}</div>
<div class="pt-2">
<x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
submitAction="restoreFromS3" isErrorButton>
<x-slot:button-title>
Restore Database from S3
</x-slot:button-title>
This will perform the following actions:
<ul class="list-disc list-inside pt-2">
<li>Download backup from S3 storage</li>
<li>Copy file into database container</li>
<li>Execute restore command</li>
</ul>
<div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
</x-modal-confirmation>
</div>
</div>
@endif
</div>
</div>
@endcan
@endif
{{-- Slide-over for activity monitor (all restore operations) --}}
<x-slide-over @databaserestore.window="slideOverOpen = true" closeWithX fullScreen>
<x-slot:title>Database Restore Output</x-slot:title>
<x-slot:content>
<div wire:ignore>
<livewire:activity-monitor wire:key="database-restore-{{ $resource->uuid }}" header="Logs" fullHeight />
</div>
</x-slot:content>
</x-slide-over>
@else
<div>Database must be running to restore a backup.</div>
@endif
@endif
</div>
</div>
resources/views/livewire/project/database/keydb/general.blade.php
+24 -18
View File
@@ -2,51 +2,53 @@
<form wire:submit="submit" class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<h2>General</h2>
<x-forms.button type="submit">
<x-forms.button type="submit" canGate="update" :canResource="$database">
Save
</x-forms.button>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="name" />
<x-forms.input label="Description" id="description" />
<x-forms.input label="Image" id="image" required
<x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
<x-forms.input label="Description" id="description" canGate="update" :canResource="$database" />
<x-forms.input label="Image" id="image" required canGate="update" :canResource="$database"
helper="For all available images, check here:<br><br><a target='_blank' href=https://hub.docker.com/r/eqalpha/keydb'>https://hub.docker.com/r/eqalpha/keydb</a>" />
</div>
@if ($database->started_at)
<div class="flex gap-2">
<x-forms.input label="Initial Password" id="keydbPassword" type="password" required readonly
helper="You can only change this in the database." />
helper="You can only change this in the database." canGate="update" :canResource="$database" />
</div>
@else
<div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
start. After that, you need to modify it in the database.
</div>
<div class="flex gap-2">
<x-forms.input label="Password" id="keydbPassword" type="password" required />
<x-forms.input label="Password" id="keydbPassword" type="password" required canGate="update"
:canResource="$database" />
</div>
@endif
<x-forms.input
helper="You can add custom docker run options that will be used when your container is started.<br>Note: Not all options are supported, as they could mess up Coolify's automation and could cause bad experience for users.<br><br>Check the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/custom-commands'>docs.</a>"
placeholder="--cap-add SYS_ADMIN --device=/dev/fuse --security-opt apparmor:unconfined --ulimit nofile=1024:1024 --tmpfs /run:rw,noexec,nosuid,size=65536k"
id="customDockerRunOptions" label="Custom Docker Options" />
id="customDockerRunOptions" label="Custom Docker Options" canGate="update" :canResource="$database" />
<div class="flex flex-col gap-2">
<h3 class="py-2">Network</h3>
<div class="flex items-end gap-2">
<x-forms.input placeholder="3000:5432" id="portsMappings" label="Ports Mappings"
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433" />
helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
canGate="update" :canResource="$database" />
</div>
<x-forms.input label="KeyDB URL (internal)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrl" />
type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
@if ($dbUrlPublic)
<x-forms.input label="KeyDB URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
type="password" readonly wire:model="dbUrlPublic" />
type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
@else
<x-forms.input label="KeyDB URL (public)"
helper="If you change the user/password/port, this could be different. This is with the default values."
readonly value="Starting the database will generate this." />
readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
@endif
</div>
<div class="flex flex-col gap-2">
@@ -79,11 +81,12 @@
<div class="w-64">
@if (str($database->status)->contains('exited'))
<x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
instantSave="instantSaveSSL" />
instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
@else
<x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
instantSave="instantSaveSSL" disabled
helper="Database should be stopped to change this settings." />
helper="Database should be stopped to change this settings." canGate="update"
:canResource="$database" />
@endif
</div>
</div>
@@ -100,24 +103,27 @@
<x-slot:title>Proxy Logs</x-slot:title>
<x-slot:content>
<livewire:project.shared.get-logs :server="$server" :resource="$database"
container="{{ data_get($database, 'uuid') }}-proxy" lazy />
container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
</x-slot:content>
<x-forms.button disabled="{{ !$isPublic }}"
@click="slideOverOpen=true">Logs</x-forms.button>
</x-slide-over>
@endif
</div>
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" />
<x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
:canResource="$database" />
</div>
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port" />
<x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
canGate="update" :canResource="$database" />
</div>
<x-forms.textarea
helper="<a target='_blank' class='underline dark:text-white' href='https://raw.githubusercontent.com/Snapchat/KeyDB/unstable/keydb.conf'>KeyDB Default Configuration</a>"
label="Custom KeyDB Configuration" rows="10" id="keydbConf" />
label="Custom KeyDB Configuration" rows="10" id="keydbConf" canGate="update" :canResource="$database" />
</form>
<h3 class="pt-4">Advanced</h3>
<div class="w-64">
<x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" />
instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" canGate="update"
:canResource="$database" />
</div>
</div>
Loaded 100 of 1346 files, more files were not shown because too many files have changed in this diff. Show more