mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-18 18:15:18 +00:00
Merge branch 'v4.x' into allow-dep
This commit is contained in:
296 files changed
+18332
-6636
No files matched your search
+10
-2
@@ -20,8 +20,11 @@
|
||||
--color-warning: #fcd452;
|
||||
--color-success: #16a34a;
|
||||
--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;
|
||||
@@ -91,11 +94,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 +121,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;
|
||||
}
|
||||
|
||||
@@ -6,10 +6,31 @@
|
||||
@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;
|
||||
}
|
||||
@@ -42,7 +63,7 @@
|
||||
}
|
||||
|
||||
@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:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-coolgray-100;
|
||||
}
|
||||
|
||||
@utility alert-success {
|
||||
@@ -62,11 +83,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 {
|
||||
@@ -134,15 +155,15 @@
|
||||
}
|
||||
|
||||
@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 {
|
||||
@@ -178,7 +199,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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
@props(['type' => 'warning', 'title' => 'Warning', 'class' => ''])
|
||||
|
||||
@php
|
||||
$icons = [
|
||||
'warning' => '<svg class="w-5 h-5 text-yellow-600 dark:text-yellow-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-yellow-50 dark:bg-yellow-900/30',
|
||||
'border' => 'border-yellow-300 dark:border-yellow-800',
|
||||
'title' => 'text-yellow-800 dark:text-yellow-300',
|
||||
'text' => 'text-yellow-700 dark:text-yellow-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' => '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">
|
||||
<div class="text-base font-bold {{ $colorScheme['title'] }}">
|
||||
{{ $title }}
|
||||
</div>
|
||||
<div class="mt-2 text-sm {{ $colorScheme['text'] }}">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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',
|
||||
@@ -200,9 +201,6 @@
|
||||
@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']"
|
||||
@@ -226,11 +224,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)
|
||||
@@ -324,10 +320,9 @@
|
||||
<!-- Step 3: Password confirmation -->
|
||||
@if (!$disableTwoStepConfirmation)
|
||||
<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();
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
@endif
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen"
|
||||
x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
|
||||
class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
|
||||
<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"
|
||||
@@ -45,7 +46,7 @@
|
||||
<div class="flex items-center justify-between pb-3">
|
||||
<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:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning">
|
||||
<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" />
|
||||
|
||||
@@ -59,20 +59,20 @@
|
||||
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%;
|
||||
font-size: 93.75%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
:root {
|
||||
--vh: 1vh;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
html {
|
||||
font-size: 87.5%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
@@ -82,6 +82,19 @@
|
||||
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
|
||||
<x-version />
|
||||
</div>
|
||||
<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">
|
||||
@@ -278,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' }}"
|
||||
|
||||
@@ -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>
|
||||
@@ -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" />
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</x-slot>
|
||||
@foreach ($links as $link)
|
||||
<a class="dropdown-item" target="_blank" href="{{ $link }}">
|
||||
<x-external-link class="size-4" />{{ $link }}
|
||||
<x-external-link class="size-3.5" />{{ $link }}
|
||||
</a>
|
||||
@endforeach
|
||||
</x-dropdown>
|
||||
|
||||
@@ -397,28 +397,28 @@
|
||||
: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"
|
||||
|
||||
@@ -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() {
|
||||
@@ -16,9 +19,9 @@
|
||||
}
|
||||
}" x-cloak class="mx-auto" :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="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
|
||||
<div class="fixed 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 left-full">
|
||||
<button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
|
||||
@@ -35,9 +35,9 @@
|
||||
@endphp
|
||||
<title>{{ $name }}{{ $title ?? 'Coolify' }}</title>
|
||||
@env('local')
|
||||
<link rel="icon" href="{{ asset('coolify-logo-dev-transparent.png') }}" 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/x-icon" />
|
||||
<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'])
|
||||
@@ -138,7 +138,8 @@
|
||||
}
|
||||
}
|
||||
let theme = localStorage.theme
|
||||
let baseColor = '#FCD452'
|
||||
let cpuColor = '#1e90ff'
|
||||
let ramColor = '#00ced1'
|
||||
let textColor = '#ffffff'
|
||||
let editorBackground = '#181818'
|
||||
let editorTheme = 'blackboard'
|
||||
@@ -149,12 +150,14 @@
|
||||
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
if (theme == 'dark') {
|
||||
baseColor = '#FCD452'
|
||||
cpuColor = '#1e90ff'
|
||||
ramColor = '#00ced1'
|
||||
textColor = '#ffffff'
|
||||
editorBackground = '#181818'
|
||||
editorTheme = 'blackboard'
|
||||
} else {
|
||||
baseColor = 'black'
|
||||
cpuColor = '#1e90ff'
|
||||
ramColor = '#00ced1'
|
||||
textColor = '#000000'
|
||||
editorBackground = '#ffffff'
|
||||
editorTheme = null
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
@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 box 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 +28,20 @@
|
||||
{{ $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())
|
||||
@can('createAnyResource')
|
||||
<a class="hover:underline" wire:click.stop
|
||||
<a class="hover:underline"
|
||||
href="{{ route('project.resource.create', [
|
||||
'project_uuid' => $project->uuid,
|
||||
'environment_uuid' => $project->environments->first()->uuid,
|
||||
]) }}">
|
||||
<span class="p-2 font-bold">+ Add Resource</span>
|
||||
+ Add Resource
|
||||
</a>
|
||||
@endcan
|
||||
@endif
|
||||
@can('update', $project)
|
||||
<a class="hover:underline" wire:click.stop
|
||||
<a class="hover:underline"
|
||||
href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
|
||||
Settings
|
||||
</a>
|
||||
@@ -125,52 +125,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
|
||||
@can('cleanupDeploymentQueue', Application::class)
|
||||
<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." />
|
||||
@endcan
|
||||
</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>
|
||||
@@ -0,0 +1,92 @@
|
||||
<div wire:poll.3000ms x-data="{
|
||||
expanded: @entangle('expanded')
|
||||
}" class="fixed bottom-0 z-50 mb-4 left-0 lg:left-56 ml-4">
|
||||
@if ($this->deploymentCount > 0)
|
||||
<div class="relative">
|
||||
<!-- 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->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>
|
||||
@@ -18,8 +18,7 @@
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new destinations.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<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
|
||||
@@ -0,0 +1,220 @@
|
||||
<div x-data="{
|
||||
modalOpen: false,
|
||||
selectedIndex: -1,
|
||||
openModal() {
|
||||
this.modalOpen = true;
|
||||
this.selectedIndex = -1;
|
||||
@this.openSearchModal();
|
||||
},
|
||||
closeModal() {
|
||||
this.modalOpen = false;
|
||||
this.selectedIndex = -1;
|
||||
// Ensure scroll is restored
|
||||
document.body.style.overflow = '';
|
||||
@this.closeSearchModal();
|
||||
},
|
||||
navigateResults(direction) {
|
||||
const results = document.querySelectorAll('.search-result-item');
|
||||
if (results.length === 0) return;
|
||||
|
||||
if (direction === 'down') {
|
||||
this.selectedIndex = Math.min(this.selectedIndex + 1, results.length - 1);
|
||||
} else if (direction === 'up') {
|
||||
this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
|
||||
}
|
||||
|
||||
if (this.selectedIndex >= 0 && this.selectedIndex < results.length) {
|
||||
results[this.selectedIndex].focus();
|
||||
results[this.selectedIndex].scrollIntoView({ block: 'nearest' });
|
||||
} else if (this.selectedIndex === -1) {
|
||||
this.$refs.searchInput?.focus();
|
||||
}
|
||||
},
|
||||
init() {
|
||||
// Create named handlers for proper cleanup
|
||||
const openGlobalSearchHandler = () => this.openModal();
|
||||
const slashKeyHandler = (e) => {
|
||||
if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(e.target.tagName) && !this.modalOpen) {
|
||||
e.preventDefault();
|
||||
this.openModal();
|
||||
}
|
||||
};
|
||||
const cmdKHandler = (e) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
if (this.modalOpen) {
|
||||
this.closeModal();
|
||||
} else {
|
||||
this.openModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
const escapeKeyHandler = (e) => {
|
||||
if (e.key === 'Escape' && this.modalOpen) {
|
||||
this.closeModal();
|
||||
}
|
||||
};
|
||||
const arrowKeyHandler = (e) => {
|
||||
if (!this.modalOpen) return;
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
this.navigateResults('down');
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
this.navigateResults('up');
|
||||
}
|
||||
};
|
||||
|
||||
// Add event listeners
|
||||
window.addEventListener('open-global-search', openGlobalSearchHandler);
|
||||
document.addEventListener('keydown', slashKeyHandler);
|
||||
document.addEventListener('keydown', cmdKHandler);
|
||||
document.addEventListener('keydown', escapeKeyHandler);
|
||||
document.addEventListener('keydown', arrowKeyHandler);
|
||||
|
||||
// Cleanup on component destroy
|
||||
this.$el.addEventListener('alpine:destroy', () => {
|
||||
window.removeEventListener('open-global-search', openGlobalSearchHandler);
|
||||
document.removeEventListener('keydown', slashKeyHandler);
|
||||
document.removeEventListener('keydown', cmdKHandler);
|
||||
document.removeEventListener('keydown', escapeKeyHandler);
|
||||
document.removeEventListener('keydown', arrowKeyHandler);
|
||||
});
|
||||
}
|
||||
}">
|
||||
|
||||
<!-- Modal overlay -->
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen" x-cloak
|
||||
class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen pt-[20vh]">
|
||||
<div @click="closeModal()" class="absolute inset-0 w-full h-full bg-black/50 backdrop-blur-sm">
|
||||
</div>
|
||||
<div x-show="modalOpen" x-trap.inert="modalOpen" x-init="$watch('modalOpen', value => { document.body.style.overflow = value ? 'hidden' : '' })"
|
||||
x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-4 scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 scale-100" x-transition:leave="ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
|
||||
x-transition:leave-end="opacity-0 -translate-y-4 scale-95" class="relative w-full max-w-2xl mx-4"
|
||||
@click.stop>
|
||||
|
||||
<!-- Search input (always visible) -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<svg class="w-5 h-5 text-neutral-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<input type="text" wire:model.live.debounce.500ms="searchQuery"
|
||||
placeholder="Search for resources, servers, projects, and environments" x-ref="searchInput"
|
||||
x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })"
|
||||
class="w-full pl-12 pr-12 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:ring-2 focus:ring-neutral-400 dark:focus:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500" />
|
||||
<button @click="closeModal()"
|
||||
class="absolute inset-y-0 right-2 flex items-center justify-center px-2 text-xs font-medium text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 rounded">
|
||||
ESC
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search results (with background) -->
|
||||
@if (strlen($searchQuery) >= 1)
|
||||
<div
|
||||
class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 overflow-hidden">
|
||||
<!-- Loading indicator -->
|
||||
<div wire:loading.flex wire:target="searchQuery"
|
||||
class="min-h-[200px] items-center justify-center p-8">
|
||||
<div class="text-center">
|
||||
<svg class="animate-spin mx-auto h-8 w-8 text-neutral-400"
|
||||
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>
|
||||
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Searching...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results content - hidden while loading -->
|
||||
<div wire:loading.remove wire:target="searchQuery"
|
||||
class="max-h-[60vh] overflow-y-auto scrollbar">
|
||||
@if (strlen($searchQuery) >= 2 && count($searchResults) > 0)
|
||||
<div class="py-2">
|
||||
@foreach ($searchResults as $index => $result)
|
||||
<a href="{{ $result['link'] ?? '#' }}"
|
||||
class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-yellow-50 dark:focus:bg-yellow-900/20 border-transparent hover:border-coollabs focus:border-yellow-500 dark:focus:border-yellow-400">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span
|
||||
class="font-medium text-neutral-900 dark:text-white truncate">
|
||||
{{ $result['name'] }}
|
||||
</span>
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full bg-neutral-100 dark:bg-coolgray-300 text-neutral-700 dark:text-neutral-300 shrink-0">
|
||||
@if ($result['type'] === 'application')
|
||||
Application
|
||||
@elseif ($result['type'] === 'service')
|
||||
Service
|
||||
@elseif ($result['type'] === 'database')
|
||||
{{ ucfirst($result['subtype'] ?? 'Database') }}
|
||||
@elseif ($result['type'] === 'server')
|
||||
Server
|
||||
@elseif ($result['type'] === 'project')
|
||||
Project
|
||||
@elseif ($result['type'] === 'environment')
|
||||
Environment
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
@if (!empty($result['project']) && !empty($result['environment']))
|
||||
<div
|
||||
class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">
|
||||
{{ $result['project'] }} / {{ $result['environment'] }}
|
||||
</div>
|
||||
@endif
|
||||
@if (!empty($result['description']))
|
||||
<div class="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{{ Str::limit($result['description'], 80) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="shrink-0 h-5 w-5 text-neutral-300 dark:text-neutral-600 self-center"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@elseif (strlen($searchQuery) >= 2 && count($searchResults) === 0)
|
||||
<div class="flex items-center justify-center py-12 px-4">
|
||||
<div class="text-center">
|
||||
<p class="mt-4 text-sm font-medium text-neutral-900 dark:text-white">
|
||||
No results found
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
||||
Try different keywords or check the spelling
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@elseif (strlen($searchQuery) > 0 && strlen($searchQuery) < 2)
|
||||
<div class="flex items-center justify-center py-12 px-4">
|
||||
<div class="text-center">
|
||||
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Type at least 2 characters to search
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -57,7 +57,7 @@
|
||||
@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 canGate="update" :canResource="$settings" type="submit">
|
||||
@@ -89,7 +89,7 @@
|
||||
</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 canGate="update" :canResource="$settings" type="submit">
|
||||
|
||||
@@ -13,6 +13,12 @@
|
||||
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" canGate="update"
|
||||
:canResource="$application" />
|
||||
@if ($isPreviewDeploymentsEnabled)
|
||||
<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" />
|
||||
@endif
|
||||
@endif
|
||||
<x-forms.checkbox helper="Disable Docker build cache on every deployment." instantSave
|
||||
id="disableBuildCache" label="Disable Build Cache" canGate="update" :canResource="$application" />
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
@else
|
||||
<x-forms.button wire:click.prevent="show_debug">Show Debug Logs</x-forms.button>
|
||||
@endif
|
||||
@if (isDev())
|
||||
<x-forms.button x-on:click="$wire.copyLogsToClipboard().then(text => navigator.clipboard.writeText(text))">Copy 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
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
])>
|
||||
<span x-show="showTimestamps" class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
|
||||
<span @class([
|
||||
'text-coollabs dark:text-warning' => $line['hidden'],
|
||||
'text-success dark:text-warning' => $line['hidden'],
|
||||
'text-red-500' => $line['stderr'],
|
||||
'font-bold' => isset($line['command']) && $line['command'],
|
||||
'whitespace-pre-wrap',
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
<form wire:submit='submit' class="flex flex-col pb-32">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>General</h2>
|
||||
@if (isDev())
|
||||
<div>{{ $application->compose_parsing_version }}</div>
|
||||
@endif
|
||||
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
|
||||
</div>
|
||||
<div>General configuration for your application.</div>
|
||||
@@ -47,8 +50,8 @@
|
||||
<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.{{ str($serviceName)->slug('_') }}.domain"
|
||||
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
|
||||
@@ -87,12 +90,12 @@
|
||||
@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"
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur="application.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"
|
||||
<x-forms.input placeholder="https://coolify.io" wire:model.blur="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-bind:disabled="!canUpdate" />
|
||||
@@ -186,7 +189,7 @@
|
||||
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."
|
||||
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="application.docker_registry_image_tag"
|
||||
@@ -267,6 +270,14 @@
|
||||
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>
|
||||
@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="application.watch_paths"
|
||||
label="Watch Paths" x-bind:disabled="shouldDisable()" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col gap-2 xl:flex-row">
|
||||
@@ -301,7 +312,7 @@
|
||||
@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."
|
||||
helper="Order-based pattern matching to filter Git webhook deployments. Supports wildcards (*, **, ?) and negation (!). Last matching pattern wins."
|
||||
placeholder="src/pages/**" id="application.watch_paths"
|
||||
label="Watch Paths" x-bind:disabled="!canUpdate" />
|
||||
</div>
|
||||
@@ -464,6 +475,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-domain-conflict-modal :conflicts="$domainConflicts" :showModal="$showDomainConflictModal" confirmAction="confirmDomainUsage" />
|
||||
|
||||
@script
|
||||
<script>
|
||||
$wire.$on('loadCompose', (isInit = true) => {
|
||||
|
||||
@@ -219,4 +219,19 @@
|
||||
@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>
|
||||
@@ -11,7 +11,7 @@
|
||||
<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">
|
||||
<div class="p-2">
|
||||
<div class="">
|
||||
@if (data_get($image, 'is_current'))
|
||||
|
||||
@@ -5,25 +5,25 @@
|
||||
@can('update', $application)
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
@endcan
|
||||
<a target="_blank" class="hover:no-underline" href="{{ $application?->gitBranchLocation }}">
|
||||
<x-forms.button>
|
||||
<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>
|
||||
|
||||
@@ -34,11 +34,13 @@
|
||||
</div>
|
||||
@endif
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input placeholder="coollabsio/coolify-example" id="gitRepository" label="Repository" canGate="update" :canResource="$application" />
|
||||
<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" canGate="update" :canResource="$application" />
|
||||
<x-forms.input placeholder="HEAD" id="gitCommitSha" placeholder="HEAD" label="Commit SHA"
|
||||
canGate="update" :canResource="$application" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@endcan
|
||||
</div>
|
||||
<div class="subtitle">All your projects are here.</div>
|
||||
<div x-data="searchComponent()">
|
||||
<div x-data="searchComponent()" class="-mt-1">
|
||||
<x-forms.input placeholder="Search for name, description..." x-model="search" id="null" />
|
||||
<div class="grid grid-cols-2 gap-4 pt-4">
|
||||
<template x-if="filteredProjects.length === 0">
|
||||
|
||||
+14
-6
@@ -61,13 +61,21 @@
|
||||
@endif
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
|
||||
<div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." x-model="baseDir" />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur="docker_compose_location"
|
||||
label="Docker Compose Location" helper="It is calculated together with the Base Directory."
|
||||
x-model="composeLocation" />
|
||||
<div class="pt-2">
|
||||
<span>
|
||||
Compose file location in your repository: </span><span class='dark:text-warning'
|
||||
x-text='(baseDir === "/" ? "" : baseDir) + (composeLocation.startsWith("/") ? composeLocation : "/" + composeLocation)'></span>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<x-forms.input wire:model="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
|
||||
label="Docker Compose Location"
|
||||
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
|
||||
Compose file location in your repository:<span
|
||||
class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>
|
||||
@endif
|
||||
@if ($show_is_static)
|
||||
<x-forms.input type="number" required id="port" label="Port" :readonly="$is_static || $build_pack === 'static'" />
|
||||
|
||||
@@ -95,14 +95,25 @@
|
||||
@endif
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory"
|
||||
label="Base Directory"
|
||||
<div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory"
|
||||
label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos."
|
||||
x-model="baseDir" />
|
||||
<x-forms.input placeholder="/docker-compose.yaml"
|
||||
wire:model.blur="docker_compose_location" label="Docker Compose Location"
|
||||
helper="It is calculated together with the Base Directory."
|
||||
x-model="composeLocation" />
|
||||
<div class="pt-2">
|
||||
<span>
|
||||
Compose file location in your repository: </span><span
|
||||
class='dark:text-warning'
|
||||
x-text='(baseDir === "/" ? "" : baseDir) + (composeLocation.startsWith("/") ? composeLocation : "/" + composeLocation)'></span>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<x-forms.input wire:model="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" id="docker_compose_location"
|
||||
label="Docker Compose Location"
|
||||
helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>" />
|
||||
Compose file location in your repository:<span
|
||||
class='dark:text-warning'>{{ Str::start($base_directory . $docker_compose_location, '/') }}</span>
|
||||
@endif
|
||||
@if ($show_is_static)
|
||||
<x-forms.input type="number" id="port" label="Port" :readonly="$is_static || $build_pack === 'static'"
|
||||
|
||||
@@ -53,9 +53,9 @@
|
||||
</div>
|
||||
@if ($build_pack === 'dockercompose')
|
||||
<div x-data="{ baseDir: '{{ $base_directory }}', composeLocation: '{{ $docker_compose_location }}' }" class="gap-2 flex flex-col">
|
||||
<x-forms.input placeholder="/" wire:model.blur-sm="base_directory" label="Base Directory"
|
||||
<x-forms.input placeholder="/" wire:model.blur="base_directory" label="Base Directory"
|
||||
helper="Directory to use as root. Useful for monorepos." x-model="baseDir" />
|
||||
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur-sm="docker_compose_location"
|
||||
<x-forms.input placeholder="/docker-compose.yaml" wire:model.blur="docker_compose_location"
|
||||
label="Docker Compose Location" helper="It is calculated together with the Base Directory."
|
||||
x-model="composeLocation" />
|
||||
<div class="pt-2">
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
@if ($environment->isEmpty())
|
||||
@can('createAnyResource')
|
||||
<a href="{{ route('project.resource.create', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => data_get($environment, 'uuid')]) }}"
|
||||
class="items-center justify-center box">+ Add New Resource</a>
|
||||
class="items-center justify-center box">+ Add Resource</a>
|
||||
@else
|
||||
<div
|
||||
class="flex flex-col items-center justify-center p-8 text-center border border-dashed border-neutral-300 dark:border-coolgray-300 rounded-lg">
|
||||
|
||||
@@ -1,7 +1,21 @@
|
||||
<form wire:submit.prevent='submit' class="flex flex-col w-full gap-2">
|
||||
<div class="pb-2">Note: If a service has a defined port, do not delete it. <br>If you want to use your custom
|
||||
domain, you can add it with a port.</div>
|
||||
<x-forms.input canGate="update" :canResource="$application" placeholder="https://app.coolify.io" label="Domains" id="application.fqdn"
|
||||
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.input>
|
||||
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
|
||||
</form>
|
||||
<div class="w-full">
|
||||
<form wire:submit.prevent='submit' class="flex flex-col w-full gap-2">
|
||||
<div class="pb-2">Note: If a service has a defined port, do not delete it. <br>If you want to use your custom
|
||||
domain, you can add it with a port.</div>
|
||||
<x-forms.input canGate="update" :canResource="$application" placeholder="https://app.coolify.io" label="Domains"
|
||||
id="application.fqdn"
|
||||
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.input>
|
||||
<x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
|
||||
</form>
|
||||
|
||||
<x-domain-conflict-modal :conflicts="$domainConflicts" :showModal="$showDomainConflictModal" confirmAction="confirmDomainUsage">
|
||||
<x-slot:consequences>
|
||||
<ul class="mt-2 ml-4 list-disc">
|
||||
<li>Only one service 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>
|
||||
</x-slot:consequences>
|
||||
</x-domain-conflict-modal>
|
||||
</div>
|
||||
@@ -1,73 +1,75 @@
|
||||
<div class="">
|
||||
<div class="flex flex-col justify-center pb-4 text-sm select-text">
|
||||
<div class="flex gap-2 md:flex-row flex-col pt-4">
|
||||
<x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
|
||||
<x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
|
||||
<div>
|
||||
<div class="flex flex-col gap-4 p-4 bg-white border dark:bg-base dark:border-coolgray-300 border-neutral-200">
|
||||
<div class="flex flex-col justify-center text-sm select-text">
|
||||
<div class="flex gap-2 md:flex-row flex-col">
|
||||
<x-forms.input label="Source Path" :value="$fileStorage->fs_path" readonly />
|
||||
<x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form wire:submit='submit' class="flex flex-col gap-2">
|
||||
@can('update', $resource)
|
||||
<div class="flex gap-2">
|
||||
@if ($fileStorage->is_directory)
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm Directory Conversion to File?"
|
||||
buttonTitle="Convert to file" submitAction="convertToFile" :actions="[
|
||||
'All files in this directory will be permanently deleted and an empty file will be created in its place.',
|
||||
]"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to file" />
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm Directory Deletion?" buttonTitle="Delete"
|
||||
isErrorButton submitAction="delete" :checkboxes="$directoryDeletionCheckboxes" :actions="[
|
||||
'The selected directory and all its contents will be permanently deleted from the container.',
|
||||
]"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" />
|
||||
@else
|
||||
@if (!$fileStorage->is_binary)
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm File Conversion to Directory?"
|
||||
buttonTitle="Convert to directory" submitAction="convertToDirectory" :actions="[
|
||||
'The selected file will be permanently deleted and an empty directory will be created in its place.',
|
||||
<form wire:submit='submit' class="flex flex-col gap-2">
|
||||
@can('update', $resource)
|
||||
<div class="flex gap-2">
|
||||
@if ($fileStorage->is_directory)
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm Directory Conversion to File?"
|
||||
buttonTitle="Convert to file" submitAction="convertToFile" :actions="[
|
||||
'All files in this directory will be permanently deleted and an empty file will be created in its place.',
|
||||
]"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to directory" />
|
||||
shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to file" />
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm Directory Deletion?" buttonTitle="Delete"
|
||||
isErrorButton submitAction="delete" :checkboxes="$directoryDeletionCheckboxes" :actions="[
|
||||
'The selected directory and all its contents will be permanently deleted from the container.',
|
||||
]"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" />
|
||||
@else
|
||||
@if (!$fileStorage->is_binary)
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm File Conversion to Directory?"
|
||||
buttonTitle="Convert to directory" submitAction="convertToDirectory" :actions="[
|
||||
'The selected file will be permanently deleted and an empty directory will be created in its place.',
|
||||
]"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" :confirmWithPassword="false" step2ButtonText="Convert to directory" />
|
||||
@endif
|
||||
<x-forms.button type="button" wire:click="loadStorageOnServer">Load from server</x-forms.button>
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm File Deletion?" buttonTitle="Delete"
|
||||
isErrorButton submitAction="delete" :checkboxes="$fileDeletionCheckboxes" :actions="['The selected file will be permanently deleted from the container.']"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" />
|
||||
@endif
|
||||
<x-forms.button type="button" wire:click="loadStorageOnServer">Load from server</x-forms.button>
|
||||
<x-modal-confirmation :ignoreWire="false" title="Confirm File Deletion?" buttonTitle="Delete"
|
||||
isErrorButton submitAction="delete" :checkboxes="$fileDeletionCheckboxes" :actions="['The selected file will be permanently deleted from the container.']"
|
||||
confirmationText="{{ $fs_path }}"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
|
||||
shortConfirmationLabel="Filepath" />
|
||||
@endif
|
||||
</div>
|
||||
@endcan
|
||||
@if (!$fileStorage->is_directory)
|
||||
@can('update', $resource)
|
||||
@if (data_get($resource, 'settings.is_preserve_repository_enabled'))
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox instantSave label="Is this based on the Git repository?"
|
||||
id="fileStorage.is_based_on_git"></x-forms.checkbox>
|
||||
</div>
|
||||
@endif
|
||||
<x-forms.textarea
|
||||
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
|
||||
rows="20" id="fileStorage.content"
|
||||
readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary }}"></x-forms.textarea>
|
||||
@if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary)
|
||||
<x-forms.button class="w-full" type="submit">Save</x-forms.button>
|
||||
@endif
|
||||
@else
|
||||
@if (data_get($resource, 'settings.is_preserve_repository_enabled'))
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox disabled label="Is this based on the Git repository?"
|
||||
id="fileStorage.is_based_on_git"></x-forms.checkbox>
|
||||
</div>
|
||||
@endif
|
||||
<x-forms.textarea
|
||||
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
|
||||
rows="20" id="fileStorage.content" disabled></x-forms.textarea>
|
||||
</div>
|
||||
@endcan
|
||||
@endif
|
||||
</form>
|
||||
@if (!$fileStorage->is_directory)
|
||||
@can('update', $resource)
|
||||
@if (data_get($resource, 'settings.is_preserve_repository_enabled'))
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox instantSave label="Is this based on the Git repository?"
|
||||
id="fileStorage.is_based_on_git"></x-forms.checkbox>
|
||||
</div>
|
||||
@endif
|
||||
<x-forms.textarea
|
||||
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
|
||||
rows="20" id="fileStorage.content"
|
||||
readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary }}"></x-forms.textarea>
|
||||
@if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary)
|
||||
<x-forms.button class="w-full" type="submit">Save</x-forms.button>
|
||||
@endif
|
||||
@else
|
||||
@if (data_get($resource, 'settings.is_preserve_repository_enabled'))
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox disabled label="Is this based on the Git repository?"
|
||||
id="fileStorage.is_based_on_git"></x-forms.checkbox>
|
||||
</div>
|
||||
@endif
|
||||
<x-forms.textarea
|
||||
label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
|
||||
rows="20" id="fileStorage.content" disabled></x-forms.textarea>
|
||||
@endcan
|
||||
@endif
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,4 +67,18 @@
|
||||
instantSave="instantSaveAdvanced" id="application.is_log_drain_enabled" label="Drain Logs" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-domain-conflict-modal
|
||||
:conflicts="$domainConflicts"
|
||||
:showModal="$showDomainConflictModal"
|
||||
confirmAction="confirmDomainUsage">
|
||||
<x-slot:consequences>
|
||||
<ul class="mt-2 ml-4 list-disc">
|
||||
<li>Only one service 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>
|
||||
</x-slot:consequences>
|
||||
</x-domain-conflict-modal>
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<div class="flex flex-col gap-4">
|
||||
@if (
|
||||
$resource->getMorphClass() == 'App\Models\Application' ||
|
||||
$resource->getMorphClass() == 'App\Models\StandalonePostgresql' ||
|
||||
@@ -9,50 +9,338 @@
|
||||
$resource->getMorphClass() == 'App\Models\StandaloneClickhouse' ||
|
||||
$resource->getMorphClass() == 'App\Models\StandaloneMongodb' ||
|
||||
$resource->getMorphClass() == 'App\Models\StandaloneMysql')
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Storages</h2>
|
||||
<x-helper
|
||||
helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
|
||||
volume
|
||||
name, example: <span class='text-helper'>-pr-1</span>" />
|
||||
@if ($resource?->build_pack !== 'dockercompose')
|
||||
@can('update', $resource)
|
||||
<x-modal-input :closeOutside="false" buttonTitle="+ Add" title="New Persistent Storage" minWidth="64rem">
|
||||
<livewire:project.shared.storages.add :resource="$resource" />
|
||||
</x-modal-input>
|
||||
@endcan
|
||||
@endif
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Storages</h2>
|
||||
<x-helper
|
||||
helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
|
||||
volume
|
||||
name, example: <span class='text-helper'>-pr-1</span>" />
|
||||
@if ($resource?->build_pack !== 'dockercompose')
|
||||
@can('update', $resource)
|
||||
<div x-data="{
|
||||
dropdownOpen: false,
|
||||
volumeModalOpen: false,
|
||||
fileModalOpen: false,
|
||||
directoryModalOpen: false
|
||||
}" @close-storage-modal.window="
|
||||
if ($event.detail === 'volume') volumeModalOpen = false;
|
||||
if ($event.detail === 'file') fileModalOpen = false;
|
||||
if ($event.detail === 'directory') directoryModalOpen = false;
|
||||
">
|
||||
<div class="relative" @click.outside="dropdownOpen = false">
|
||||
<x-forms.button @click="dropdownOpen = !dropdownOpen">
|
||||
+ Add
|
||||
<svg class="w-4 h-4 ml-2" 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="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
|
||||
</svg>
|
||||
</x-forms.button>
|
||||
|
||||
<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-10 min-w-max"
|
||||
x-cloak>
|
||||
<div
|
||||
class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
|
||||
<div class="flex flex-col gap-1">
|
||||
<a class="dropdown-item"
|
||||
@click="volumeModalOpen = true; dropdownOpen = false">
|
||||
<svg class="size-4" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Volume Mount
|
||||
</a>
|
||||
<a class="dropdown-item" @click="fileModalOpen = true; dropdownOpen = false">
|
||||
<svg class="size-4" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
File Mount
|
||||
</a>
|
||||
<a class="dropdown-item"
|
||||
@click="directoryModalOpen = true; dropdownOpen = false">
|
||||
<svg class="size-4" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
Directory Mount
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Volume Modal --}}
|
||||
<template x-teleport="body">
|
||||
<div x-show="volumeModalOpen" @keydown.window.escape="volumeModalOpen=false"
|
||||
class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
|
||||
<div x-show="volumeModalOpen" x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0" @click="volumeModalOpen=false"
|
||||
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
||||
<div x-show="volumeModalOpen" x-trap.inert.noscroll="volumeModalOpen"
|
||||
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-[36rem] 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">
|
||||
<h3 class="text-2xl font-bold">Add Volume Mount</h3>
|
||||
<button @click="volumeModalOpen=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 focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning">
|
||||
<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"
|
||||
x-init="$watch('volumeModalOpen', value => { if(value) { $nextTick(() => { const input = $el.querySelector('input'); input?.focus(); }) } })">
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitPersistentVolume'>
|
||||
<div class="flex flex-col">
|
||||
<div>Docker Volumes mounted to the container.</div>
|
||||
</div>
|
||||
@if ($isSwarm)
|
||||
<div class="text-warning">Swarm Mode detected: You need to set a shared volume
|
||||
(EFS/NFS/etc) on all the worker nodes if you would like to use a persistent
|
||||
volumes.</div>
|
||||
@endif
|
||||
<div class="flex flex-col gap-2">
|
||||
<x-forms.input canGate="update" :canResource="$resource" placeholder="pv-name"
|
||||
id="name" label="Name" required helper="Volume name." />
|
||||
@if ($isSwarm)
|
||||
<x-forms.input canGate="update" :canResource="$resource" placeholder="/root"
|
||||
id="host_path" label="Source Path" required
|
||||
helper="Directory on the host system." />
|
||||
@else
|
||||
<x-forms.input canGate="update" :canResource="$resource" placeholder="/root"
|
||||
id="host_path" label="Source Path"
|
||||
helper="Directory on the host system." />
|
||||
@endif
|
||||
<x-forms.input canGate="update" :canResource="$resource" placeholder="/tmp/root"
|
||||
id="mount_path" label="Destination Path" required
|
||||
helper="Directory inside the container." />
|
||||
<x-forms.button canGate="update" :canResource="$resource" type="submit">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- File Modal --}}
|
||||
<template x-teleport="body">
|
||||
<div x-show="fileModalOpen" @keydown.window.escape="fileModalOpen=false"
|
||||
class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
|
||||
<div x-show="fileModalOpen" x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0" @click="fileModalOpen=false"
|
||||
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
||||
<div x-show="fileModalOpen" x-trap.inert.noscroll="fileModalOpen"
|
||||
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-[36rem] 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">
|
||||
<h3 class="text-2xl font-bold">Add File Mount</h3>
|
||||
<button @click="fileModalOpen=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 focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning">
|
||||
<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"
|
||||
x-init="$watch('fileModalOpen', value => { if(value) { $nextTick(() => { const input = $el.querySelector('input'); input?.focus(); }) } })">
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitFileStorage'>
|
||||
<div class="flex flex-col">
|
||||
<div>Actual file mounted from the host system to the container.</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<x-forms.input canGate="update" :canResource="$resource"
|
||||
placeholder="/etc/nginx/nginx.conf" id="file_storage_path"
|
||||
label="Destination Path" required helper="File location inside the container" />
|
||||
<x-forms.textarea canGate="update" :canResource="$resource" label="Content"
|
||||
id="file_storage_content"></x-forms.textarea>
|
||||
<x-forms.button canGate="update" :canResource="$resource" type="submit">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{-- Directory Modal --}}
|
||||
<template x-teleport="body">
|
||||
<div x-show="directoryModalOpen" @keydown.window.escape="directoryModalOpen=false"
|
||||
class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
|
||||
<div x-show="directoryModalOpen" x-transition:enter="ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0" @click="directoryModalOpen=false"
|
||||
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
||||
<div x-show="directoryModalOpen" x-trap.inert.noscroll="directoryModalOpen"
|
||||
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-[36rem] 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">
|
||||
<h3 class="text-2xl font-bold">Add Directory Mount</h3>
|
||||
<button @click="directoryModalOpen=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 focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning">
|
||||
<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"
|
||||
x-init="$watch('directoryModalOpen', value => { if(value) { $nextTick(() => { const input = $el.querySelector('input'); input?.focus(); }) } })">
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitFileStorageDirectory'>
|
||||
<div class="flex flex-col">
|
||||
<div>Directory mounted from the host system to the container.</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<x-forms.input canGate="update" :canResource="$resource"
|
||||
placeholder="{{ application_configuration_dir() }}/{{ $resource->uuid }}/etc/nginx"
|
||||
id="file_storage_directory_source" label="Source Directory" required
|
||||
helper="Directory on the host system." />
|
||||
<x-forms.input canGate="update" :canResource="$resource" placeholder="/etc/nginx"
|
||||
id="file_storage_directory_destination" label="Destination Directory" required
|
||||
helper="Directory inside the container." />
|
||||
<x-forms.button canGate="update" :canResource="$resource" type="submit">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@endcan
|
||||
@endif
|
||||
</div>
|
||||
<div>Persistent storage to preserve data between deployments.</div>
|
||||
</div>
|
||||
<div class="pb-4">Persistent storage to preserve data between deployments.</div>
|
||||
@if ($resource?->build_pack === 'dockercompose')
|
||||
<span class="dark:text-warning text-coollabs">Please modify storage layout in your Docker Compose
|
||||
file or reload the compose file to reread the storage layout.</span>
|
||||
<div class="dark:text-warning text-coollabs">Please modify storage layout in your Docker Compose
|
||||
file or reload the compose file to reread the storage layout.</div>
|
||||
@else
|
||||
@if ($resource->persistentStorages()->get()->count() === 0 && $fileStorage->count() == 0)
|
||||
<div class="pt-4">No storage found.</div>
|
||||
<div>No storage found.</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if ($resource->persistentStorages()->get()->count() > 0)
|
||||
<h3 class="pt-4">Volumes</h3>
|
||||
<livewire:project.shared.storages.all :resource="$resource" />
|
||||
@endif
|
||||
@if ($fileStorage->count() > 0)
|
||||
<div class="flex flex-col gap-2">
|
||||
@foreach ($fileStorage as $fs)
|
||||
<livewire:project.service.file-storage :fileStorage="$fs" wire:key="resource-{{ $fs->uuid }}" />
|
||||
@endforeach
|
||||
@php
|
||||
$hasVolumes = $this->volumeCount > 0;
|
||||
$hasFiles = $this->fileCount > 0;
|
||||
$hasDirectories = $this->directoryCount > 0;
|
||||
$defaultTab = $hasVolumes ? 'volumes' : ($hasFiles ? 'files' : 'directories');
|
||||
@endphp
|
||||
|
||||
@if ($hasVolumes || $hasFiles || $hasDirectories)
|
||||
<div x-data="{
|
||||
activeTab: '{{ $defaultTab }}'
|
||||
}">
|
||||
{{-- Tabs Navigation --}}
|
||||
<div class="flex gap-2 border-b dark:border-coolgray-300 border-neutral-200">
|
||||
<button @click="activeTab = 'volumes'"
|
||||
:class="activeTab === 'volumes' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
|
||||
@if (!$hasVolumes) disabled @endif
|
||||
class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasVolumes ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }} 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-coolgray-100">
|
||||
Volumes ({{ $this->volumeCount }})
|
||||
</button>
|
||||
<button @click="activeTab = 'files'"
|
||||
:class="activeTab === 'files' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
|
||||
@if (!$hasFiles) disabled @endif
|
||||
class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasFiles ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }} 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-coolgray-100">
|
||||
Files ({{ $this->fileCount }})
|
||||
</button>
|
||||
<button @click="activeTab = 'directories'"
|
||||
:class="activeTab === 'directories' ? 'border-b-2 dark:border-white border-black' : 'border-b-2 border-transparent'"
|
||||
@if (!$hasDirectories) disabled @endif
|
||||
class="px-4 py-2 -mb-px font-medium transition-colors {{ $hasDirectories ? 'dark:text-neutral-400 dark:hover:text-white text-neutral-600 hover:text-black cursor-pointer' : 'opacity-50 cursor-not-allowed' }} 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-coolgray-100">
|
||||
Directories ({{ $this->directoryCount }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Tab Content --}}
|
||||
<div class="pt-4">
|
||||
{{-- Volumes Tab --}}
|
||||
<div x-show="activeTab === 'volumes'" class="flex flex-col gap-4">
|
||||
@if ($hasVolumes)
|
||||
<livewire:project.shared.storages.all :resource="$resource" />
|
||||
@else
|
||||
<div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
|
||||
No volumes configured.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Files Tab --}}
|
||||
<div x-show="activeTab === 'files'" class="flex flex-col gap-4">
|
||||
@if ($hasFiles)
|
||||
@foreach ($this->files as $fs)
|
||||
<livewire:project.service.file-storage :fileStorage="$fs"
|
||||
wire:key="file-{{ $fs->id }}" />
|
||||
@endforeach
|
||||
@else
|
||||
<div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
|
||||
No file mounts configured.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Directories Tab --}}
|
||||
<div x-show="activeTab === 'directories'" class="flex flex-col gap-4">
|
||||
@if ($hasDirectories)
|
||||
@foreach ($this->directories as $fs)
|
||||
<livewire:project.service.file-storage :fileStorage="$fs"
|
||||
wire:key="directory-{{ $fs->id }}" />
|
||||
@endforeach
|
||||
@else
|
||||
<div class="text-center py-8 dark:text-neutral-500 text-neutral-400">
|
||||
No directory mounts configured.
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
@if ($resource->persistentStorages()->get()->count() > 0)
|
||||
<h3 class="pt-4">{{ Str::headline($resource->name) }} </h3>
|
||||
<h3>{{ Str::headline($resource->name) }} </h3>
|
||||
@endif
|
||||
@if ($resource->persistentStorages()->get()->count() > 0)
|
||||
<livewire:project.shared.storages.all :resource="$resource" />
|
||||
@endif
|
||||
@if ($fileStorage->count() > 0)
|
||||
<div class="flex flex-col gap-4 pt-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
@foreach ($fileStorage->sort() as $fileStorage)
|
||||
<livewire:project.service.file-storage :fileStorage="$fileStorage"
|
||||
wire:key="resource-{{ $fileStorage->uuid }}" />
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</svg>
|
||||
</x-slot:icon>
|
||||
<x-slot:description>
|
||||
<span>Please restart (or redeploy) to apply the new configuration.</span>
|
||||
<span>Please redeploy to apply the new configuration.</span>
|
||||
</x-slot:description>
|
||||
<x-slot:button-text @click="disableSponsorship()">
|
||||
Disable This Popup
|
||||
|
||||
@@ -11,17 +11,8 @@
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Resource Name below"
|
||||
shortConfirmationLabel="Resource Name" />
|
||||
@else
|
||||
<div class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
|
||||
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
|
||||
<div class="text-sm text-red-600 dark:text-red-400">You don't have permission to delete this resource.
|
||||
Contact your team administrator for access.</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="danger" title="Insufficient Permissions">
|
||||
You don't have permission to delete this resource. Contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3>Primary Server</h3>
|
||||
<div
|
||||
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
|
||||
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
@if (str($resource->realStatus())->startsWith('running'))
|
||||
<div title="{{ $resource->realStatus() }}" class="absolute bg-success -top-1 -left-1 badge ">
|
||||
</div>
|
||||
@@ -36,7 +36,7 @@
|
||||
@foreach ($resource->additional_networks as $destination)
|
||||
<div class="flex flex-col gap-2" wire:key="destination-{{ $destination->id }}">
|
||||
<div
|
||||
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-black">
|
||||
class="relative flex flex-col bg-white border cursor-default dark:text-white box-without-bg dark:bg-coolgray-100 dark:border-coolgray-300">
|
||||
@if (str(data_get($destination, 'pivot.status'))->startsWith('running'))
|
||||
<div title="{{ data_get($destination, 'pivot.status') }}"
|
||||
class="absolute bg-success -top-1 -left-1 badge "></div>
|
||||
@@ -80,21 +80,11 @@
|
||||
<div class="flex flex-col gap-2">
|
||||
@if ($resource->persistentStorages()->count() > 0)
|
||||
<h3>Add another server</h3>
|
||||
<div
|
||||
class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
|
||||
<div class="flex items-center">
|
||||
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Cannot add additional
|
||||
servers</h4>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
|
||||
This application has persistent storage volumes configured. Applications with persistent
|
||||
storage cannot be deployed to multiple servers as the storage would not be accessible
|
||||
across different servers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Cannot add additional servers">
|
||||
This application has persistent storage volumes configured. Applications with persistent
|
||||
storage cannot be deployed to multiple servers as the storage would not be accessible
|
||||
across different servers.
|
||||
</x-callout>
|
||||
@elseif (count($networks) > 0)
|
||||
<h3>Add another server</h3>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
|
||||
@@ -3,17 +3,22 @@
|
||||
<x-forms.textarea x-show="$wire.is_multiline === true" x-cloak id="value" label="Value" required />
|
||||
<x-forms.input x-show="$wire.is_multiline === false" x-cloak placeholder="production" id="value"
|
||||
x-bind:label="$wire.is_multiline === false && 'Value'" required />
|
||||
@if (data_get($parameters, 'application_uuid'))
|
||||
<x-forms.checkbox id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for docker file, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
@endif
|
||||
<x-forms.checkbox id="is_multiline" label="Is Multiline?" />
|
||||
|
||||
@if (!$shared)
|
||||
<x-forms.checkbox id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
|
||||
<x-environment-variable-warning :problematic-variables="$problematicVariables" />
|
||||
|
||||
<x-forms.checkbox id="is_runtime" helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
|
||||
<x-forms.checkbox id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.button type="submit" @click="slideOverOpen=false">
|
||||
Save
|
||||
</x-forms.button>
|
||||
|
||||
@@ -13,17 +13,32 @@
|
||||
@endcan
|
||||
</div>
|
||||
<div>Environment variables (secrets) for this resource. </div>
|
||||
@if ($resourceClass === 'App\Models\Application' && data_get($resource, 'build_pack') !== 'dockercompose')
|
||||
<div class="w-64 pt-2">
|
||||
@can('manageEnvironment', $resource)
|
||||
<x-forms.checkbox id="is_env_sorting_enabled" label="Sort alphabetically"
|
||||
helper="Turn this off if one environment is dependent on an other. It will be sorted by creation order (like you pasted them or in the order you created them)."
|
||||
instantSave></x-forms.checkbox>
|
||||
@else
|
||||
<x-forms.checkbox id="is_env_sorting_enabled" label="Sort alphabetically"
|
||||
helper="Turn this off if one environment is dependent on an other. It will be sorted by creation order (like you pasted them or in the order you created them)."
|
||||
disabled></x-forms.checkbox>
|
||||
@endcan
|
||||
@if ($resourceClass === 'App\Models\Application')
|
||||
<div class="flex flex-col gap-2 pt-2">
|
||||
@if (data_get($resource, 'build_pack') !== 'dockercompose')
|
||||
<div class="w-64">
|
||||
@can('manageEnvironment', $resource)
|
||||
<x-forms.checkbox id="is_env_sorting_enabled" label="Sort alphabetically"
|
||||
helper="Turn this off if one environment is dependent on another. It will be sorted by creation order (like you pasted them or in the order you created them)."
|
||||
instantSave></x-forms.checkbox>
|
||||
@else
|
||||
<x-forms.checkbox id="is_env_sorting_enabled" label="Sort alphabetically"
|
||||
helper="Turn this off if one environment is dependent on another. It will be sorted by creation order (like you pasted them or in the order you created them)."
|
||||
disabled></x-forms.checkbox>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
<div class="w-64">
|
||||
@can('manageEnvironment', $resource)
|
||||
<x-forms.checkbox id="use_build_secrets" label="Use Docker Build Secrets"
|
||||
helper="Enable Docker BuildKit secrets for enhanced security during builds. Secrets won't be exposed in the final image. Requires Docker 18.09+ with BuildKit support."
|
||||
instantSave></x-forms.checkbox>
|
||||
@else
|
||||
<x-forms.checkbox id="use_build_secrets" label="Use Docker Build Secrets"
|
||||
helper="Enable Docker BuildKit secrets for enhanced security during builds. Secrets won't be exposed in the final image. Requires Docker 18.09+ with BuildKit support."
|
||||
disabled></x-forms.checkbox>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($resource->type() === 'service' || $resource?->build_pack === 'dockercompose')
|
||||
@@ -45,14 +60,7 @@
|
||||
<h3>Production Environment Variables</h3>
|
||||
<div>Environment (secrets) variables for Production.</div>
|
||||
</div>
|
||||
@php
|
||||
$requiredEmptyVars = $resource->environment_variables->filter(function ($env) {
|
||||
return $env->is_required && empty($env->value);
|
||||
});
|
||||
|
||||
$otherVars = $resource->environment_variables->diff($requiredEmptyVars);
|
||||
@endphp
|
||||
@forelse ($requiredEmptyVars->merge($otherVars) as $env)
|
||||
@forelse ($this->environmentVariables as $env)
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
|
||||
:env="$env" :type="$resource->type()" />
|
||||
@empty
|
||||
@@ -63,7 +71,7 @@
|
||||
<h3>Preview Deployments Environment Variables</h3>
|
||||
<div>Environment (secrets) variables for Preview Deployments.</div>
|
||||
</div>
|
||||
@foreach ($resource->environment_variables_preview as $env)
|
||||
@foreach ($this->environmentVariablesPreview as $env)
|
||||
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
|
||||
:env="$env" :type="$resource->type()" />
|
||||
@endforeach
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
@if ($isLocked)
|
||||
<div class="flex flex-1 w-full gap-2">
|
||||
<x-forms.input disabled id="key" />
|
||||
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="icon my-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
||||
<path d="M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6z" />
|
||||
<path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4" />
|
||||
@@ -21,6 +21,95 @@
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@endcan
|
||||
</div>
|
||||
@can('update', $this->env)
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div class="flex w-full items-center gap-4 overflow-x-auto whitespace-nowrap">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div class="flex w-full items-center gap-4 overflow-x-auto whitespace-nowrap">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@else
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
@else
|
||||
@can('update', $this->env)
|
||||
@if ($isDisabled)
|
||||
@@ -55,107 +144,114 @@
|
||||
</div>
|
||||
@endcan
|
||||
@can('update', $this->env)
|
||||
<div class="flex flex-col w-full gap-2 lg:flex-row">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox instantSave id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for docker file, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox instantSave id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for docker file, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div class="flex w-full items-center gap-4 overflow-x-auto whitespace-nowrap">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
<x-forms.checkbox instantSave id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for dockerfile, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@else
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
@endif
|
||||
<x-forms.checkbox instantSave id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
@if (!$env->is_nixpacks)
|
||||
<x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox instantSave id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
<div class="flex-1"></div>
|
||||
@if ($isDisabled)
|
||||
<x-forms.button disabled type="submit">
|
||||
Update
|
||||
</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>
|
||||
Lock
|
||||
</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@else
|
||||
<x-forms.button type="submit">
|
||||
Update
|
||||
</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>
|
||||
Lock
|
||||
</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@endif
|
||||
</div>
|
||||
<x-environment-variable-warning :problematic-variables="$problematicVariables" />
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
@if ($isDisabled)
|
||||
<x-forms.button disabled type="submit">Update</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>Lock</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@else
|
||||
<x-forms.button type="submit">Update</x-forms.button>
|
||||
<x-forms.button wire:click='lock'>Lock</x-forms.button>
|
||||
<x-modal-confirmation title="Confirm Environment Variable Deletion?" isErrorButton
|
||||
buttonTitle="Delete" submitAction="delete" :actions="['The selected environment variable will be permanently deleted.']"
|
||||
confirmationText="{{ $key }}" buttonFullWidth="true"
|
||||
confirmationLabel="Please confirm the execution of the actions by entering the Environment Variable Name below"
|
||||
shortConfirmationLabel="Environment Variable Name" :confirmWithPassword="false"
|
||||
step2ButtonText="Permanently Delete" />
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="flex flex-col w-full gap-2 flex-wrap lg:flex-row">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox disabled id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for docker file, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox disabled id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for docker file, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<div class="flex flex-col w-full gap-3">
|
||||
<div class="flex w-full items-center gap-4 overflow-x-auto whitespace-nowrap">
|
||||
@if (!$is_redis_credential)
|
||||
@if ($type === 'service')
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_shared)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
<x-forms.checkbox disabled id="is_build_time"
|
||||
helper="If you are using Docker, remember to modify the file to be ready to receive the build time args. Ex.: for dockerfile, add `ARG name_of_the_variable`, or dockercompose add `- 'name_of_the_variable=${name_of_the_variable}'`"
|
||||
label="Is Build Variable?" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@else
|
||||
<x-forms.checkbox disabled id="is_buildtime"
|
||||
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
||||
label="Available at Buildtime" />
|
||||
<x-forms.checkbox disabled id="is_runtime"
|
||||
helper="Make this variable available in the running container at runtime."
|
||||
label="Available at Runtime" />
|
||||
<x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
|
||||
@if ($is_multiline === false)
|
||||
<x-forms.checkbox disabled id="is_literal"
|
||||
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
<div class="flex-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
@endif
|
||||
|
||||
@@ -20,7 +20,11 @@
|
||||
@if (count($containers) === 0)
|
||||
<div>No containers are running or terminal access is disabled on this server.</div>
|
||||
@else
|
||||
<form class="w-full flex gap-2 items-end" wire:submit="$dispatchSelf('connectToContainer')">
|
||||
<form class="w-96 min-w-fit flex gap-2 items-end" wire:submit="$dispatchSelf('connectToContainer')"
|
||||
x-data="{ autoConnected: false }" x-init="if ({{ count($containers) }} === 1 && !autoConnected) {
|
||||
autoConnected = true;
|
||||
$nextTick(() => $wire.dispatchSelf('connectToContainer'));
|
||||
}">
|
||||
<x-forms.select label="Container" id="container" required wire:model.live="selected_container">
|
||||
@foreach ($containers as $container)
|
||||
@if ($loop->first)
|
||||
|
||||
@@ -2,19 +2,33 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Healthchecks</h2>
|
||||
<x-forms.button canGate="update" :canResource="$resource" type="submit">Save</x-forms.button>
|
||||
@if (!$resource->health_check_enabled)
|
||||
<x-modal-confirmation title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"
|
||||
submitAction="toggleHealthcheck" :actions="['Enable healthcheck for this resource.']"
|
||||
warningMessage="If the health check fails, your application will become inaccessible. Please review the <a href='https://coolify.io/docs/knowledge-base/health-checks' target='_blank' class='underline text-white'>Health Checks</a> guide before proceeding!"
|
||||
step2ButtonText="Enable Healthcheck" :confirmWithText="false" :confirmWithPassword="false"
|
||||
isHighlightedButton>
|
||||
</x-modal-confirmation>
|
||||
@else
|
||||
<x-forms.button canGate="update" :canResource="$resource" wire:click="toggleHealthcheck">Disable Healthcheck</x-forms.button>
|
||||
@endif
|
||||
</div>
|
||||
<div class="pb-4">Define how your resource's health should be checked.</div>
|
||||
<div class="mt-1 pb-4">Define how your resource's health should be checked.</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
@if ($resource->custom_healthcheck_found)
|
||||
<div class="dark:text-warning">A custom health check has been found and will be used until you enable this.
|
||||
</div>
|
||||
<x-callout type="warning" title="Caution">
|
||||
<p>A custom health check has been detected. If you enable this health check, it will disable the custom one and use this instead.</p>
|
||||
</x-callout>
|
||||
@endif
|
||||
<div class="w-32">
|
||||
<x-forms.checkbox canGate="update" :canResource="$resource" instantSave id="resource.health_check_enabled" label="Enabled" />
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input canGate="update" :canResource="$resource" id="resource.health_check_method" placeholder="GET" label="Method" required />
|
||||
<x-forms.input canGate="update" :canResource="$resource" id="resource.health_check_scheme" placeholder="http" label="Scheme" required />
|
||||
<x-forms.select canGate="update" :canResource="$resource" id="resource.health_check_method" label="Method" required>
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
</x-forms.select>
|
||||
<x-forms.select canGate="update" :canResource="$resource" id="resource.health_check_scheme" label="Scheme" required>
|
||||
<option value="http">http</option>
|
||||
<option value="https">https</option>
|
||||
</x-forms.select>
|
||||
<x-forms.input canGate="update" :canResource="$resource" id="resource.health_check_host" placeholder="localhost" label="Host" required />
|
||||
<x-forms.input canGate="update" :canResource="$resource" type="number" id="resource.health_check_port"
|
||||
helper="If no port is defined, the first exposed port will be used." placeholder="80" label="Port" />
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-2 ">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Metrics</h2>
|
||||
</div>
|
||||
<div class="pb-4">Basic metrics for your container.</div>
|
||||
@if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
|
||||
<div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
|
||||
@elseif(!$resource->destination->server->isMetricsEnabled())
|
||||
<div class="alert alert-warning">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
|
||||
<div> Go to <a class="underline dark:text-white"
|
||||
href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to
|
||||
enable
|
||||
it.</div>
|
||||
@else
|
||||
@if (!str($resource->status)->contains('running'))
|
||||
<div class="alert alert-warning">Metrics are only available when this resource is running!</div>
|
||||
<div class="pb-4">Basic metrics for your application container.</div>
|
||||
<div>
|
||||
@if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
|
||||
<div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
|
||||
@elseif(!$resource->destination->server->isMetricsEnabled())
|
||||
<div class="alert alert-warning">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
|
||||
<div>Go to <a class="underline dark:text-white" href="{{ route('server.show', $resource->destination->server->uuid) }}">Server settings</a> to enable it.</div>
|
||||
@else
|
||||
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
||||
@if (!str($resource->status)->contains('running'))
|
||||
<div class="alert alert-warning">Metrics are only available when the application container is running!</div>
|
||||
@else
|
||||
<div>
|
||||
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
||||
<option value="5">5 minutes (live)</option>
|
||||
<option value="10">10 minutes (live)</option>
|
||||
<option value="30">30 minutes</option>
|
||||
@@ -26,7 +25,7 @@
|
||||
</x-forms.select>
|
||||
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()"
|
||||
class="pt-5">
|
||||
<h4>CPU (%)</h4>
|
||||
<h4>CPU Usage</h4>
|
||||
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
||||
|
||||
<script>
|
||||
@@ -34,6 +33,7 @@
|
||||
const optionsServerCpu = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
width: 2,
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
@@ -52,7 +52,7 @@
|
||||
},
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
@@ -68,74 +68,90 @@
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
series: [{
|
||||
name: "CPU %",
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
series: [{
|
||||
name: "CPU %",
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
||||
const value = series[seriesIndex][dataPointIndex];
|
||||
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
||||
const date = new Date(timestamp);
|
||||
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
||||
date.getUTCFullYear() + '-' +
|
||||
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(date.getUTCDate()).padStart(2, '0');
|
||||
return '<div class="apexcharts-tooltip-custom">' +
|
||||
'<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
|
||||
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`), optionsServerCpu);
|
||||
serverCpuChart.render();
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
||||
checkTheme();
|
||||
serverCpuChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`), optionsServerCpu);
|
||||
serverCpuChart.render();
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
||||
checkTheme();
|
||||
serverCpuChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
},
|
||||
formatter: function(value) {
|
||||
return Math.round(value) + ' %';
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h3>Memory (MB)</h3>
|
||||
<h4>Memory Usage</h4>
|
||||
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
||||
|
||||
<script>
|
||||
@@ -143,6 +159,7 @@
|
||||
const optionsServerMemory = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
width: 2,
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
@@ -161,7 +178,7 @@
|
||||
},
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
@@ -177,81 +194,99 @@
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Memory (MB)",
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "Memory (MB)",
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
||||
const value = series[seriesIndex][dataPointIndex];
|
||||
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
||||
const date = new Date(timestamp);
|
||||
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
||||
date.getUTCFullYear() + '-' +
|
||||
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(date.getUTCDate()).padStart(2, '0');
|
||||
return '<div class="apexcharts-tooltip-custom">' +
|
||||
'<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + ' MB</span></div>' +
|
||||
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
|
||||
optionsServerMemory);
|
||||
serverMemoryChart.render();
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
||||
checkTheme();
|
||||
serverMemoryChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
|
||||
optionsServerMemory);
|
||||
serverMemoryChart.render();
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
||||
checkTheme();
|
||||
serverMemoryChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
},
|
||||
formatter: function(value) {
|
||||
return Math.round(value) + ' MB';
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
color: textColor,
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,84 +1,166 @@
|
||||
<div>
|
||||
<h2>Resource Operations</h2>
|
||||
<div>You can easily make different kind of operations on this resource.</div>
|
||||
<h3 class="pt-4">Clone</h3>
|
||||
<div class="pb-4">To another project / environment on a different / same server.</div>
|
||||
<div class="pb-4">
|
||||
<div class="flex flex-col flex-wrap gap-2">
|
||||
@can('update', $resource)
|
||||
@foreach ($servers->sortBy('id') as $server)
|
||||
<h5>Server: <span class="font-bold text-dark dark:text-white">{{ $server->name }}</span></h5>
|
||||
@foreach ($server->destinations() as $destination)
|
||||
<x-modal-confirmation title="Clone Resource?" buttonTitle="Clone Resource"
|
||||
submitAction="cloneTo({{ data_get($destination, 'id') }})" :actions="[
|
||||
'All containers of this resource will be duplicated and cloned to the selected destination.',
|
||||
]" :confirmWithText="false"
|
||||
:confirmWithPassword="false" step2ButtonText="Clone Resource" dispatchEvent="true"
|
||||
dispatchEventType="success"
|
||||
dispatchEventMessage="Resource cloned to {{ $destination->name }} destination.">
|
||||
<x:slot name="content">
|
||||
<div class="box group">
|
||||
<div class="flex flex-col">
|
||||
<div class="box-title">Network</div>
|
||||
<div class="box-description">{{ $destination->name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</x:slot>
|
||||
</x-modal-confirmation>
|
||||
@endforeach
|
||||
@endforeach
|
||||
@else
|
||||
<div
|
||||
class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to clone resources. Contact your team
|
||||
administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
<h3>Move</h3>
|
||||
<div class="pb-4">Between projects / environments.</div>
|
||||
<div>
|
||||
<div class="pb-2">
|
||||
This resource is currently in the <span
|
||||
class="font-bold dark:text-warning">{{ $resource->environment->project->name }} /
|
||||
{{ $resource->environment->name }}</span> environment.
|
||||
</div>
|
||||
<div class="flex flex-col flex-wrap gap-2">
|
||||
@can('update', $resource)
|
||||
@forelse ($projects as $project)
|
||||
<h5>Project: <span class="font-bold text-dark dark:text-white">{{ $project->name }}</span></h5>
|
||||
|
||||
@foreach ($project->environments as $environment)
|
||||
<x-modal-confirmation title="Move Resource?" buttonTitle="Move Resource"
|
||||
submitAction="moveTo({{ data_get($environment, 'id') }})" :actions="['All containers of this resource will be moved to the selected environment.']" :confirmWithText="false"
|
||||
:confirmWithPassword="false" step2ButtonText="Move Resource" dispatchEvent="true"
|
||||
dispatchEventType="success"
|
||||
dispatchEventMessage="Resource moved to {{ $environment->name }} environment.">
|
||||
<x:slot:content>
|
||||
<div class="box group">
|
||||
<div class="flex flex-col">
|
||||
<div class="box-title">Environment</div>
|
||||
<div class="box-description">{{ $environment->name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</x:slot>
|
||||
</x-modal-confirmation>
|
||||
@endforeach
|
||||
@empty
|
||||
<div>No projects found to move to</div>
|
||||
@endforelse
|
||||
@else
|
||||
<div
|
||||
class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to move resources between projects or
|
||||
environments. Contact your team administrator to request access.
|
||||
<div x-data="{
|
||||
selectedCloneServer: null,
|
||||
selectedCloneDestination: null,
|
||||
selectedMoveProject: null,
|
||||
selectedMoveEnvironment: null,
|
||||
currentProjectId: {{ $resource->environment->project->id }},
|
||||
currentEnvironmentId: {{ $resource->environment->id }},
|
||||
servers: @js(
|
||||
$servers->map(
|
||||
fn($s) => [
|
||||
'id' => $s->id,
|
||||
'name' => $s->name,
|
||||
'ip' => $s->ip,
|
||||
'destinations' => $s->destinations()->map(
|
||||
fn($d) => [
|
||||
'id' => $d->id,
|
||||
'name' => $d->name,
|
||||
'server_id' => $s->id,
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
projects: @js(
|
||||
$projects->map(
|
||||
fn($p) => [
|
||||
'id' => $p->id,
|
||||
'name' => $p->name,
|
||||
'environments' => $p->environments->map(
|
||||
fn($e) => [
|
||||
'id' => $e->id,
|
||||
'name' => $e->name,
|
||||
'project_id' => $p->id,
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
get availableDestinations() {
|
||||
if (!this.selectedCloneServer) return [];
|
||||
const server = this.servers.find(s => s.id == this.selectedCloneServer);
|
||||
return server ? server.destinations : [];
|
||||
},
|
||||
get availableEnvironments() {
|
||||
if (!this.selectedMoveProject) return [];
|
||||
const project = this.projects.find(p => p.id == this.selectedMoveProject);
|
||||
if (!project) return [];
|
||||
// Filter out the current environment if we're in the same project
|
||||
return project.environments.filter(e => {
|
||||
if (project.id === this.currentProjectId) {
|
||||
return e.id !== this.currentEnvironmentId;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
},
|
||||
get isCurrentProjectSelected() {
|
||||
return this.selectedMoveProject == this.currentProjectId;
|
||||
}
|
||||
}">
|
||||
<h3 class="pt-4">Clone Resource</h3>
|
||||
<div class="pb-2">Duplicate this resource to another server or network destination.</div>
|
||||
|
||||
@can('update', $resource)
|
||||
<div class="space-y-4 pb-8">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium mb-2">Select Server</label>
|
||||
<select x-model="selectedCloneServer" @change="selectedCloneDestination = null" class="select">
|
||||
<option value="">Choose a server...</option>
|
||||
<template x-for="server in servers" :key="server.id">
|
||||
<option :value="server.id" x-text="`${server.name} (${server.ip})`"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium mb-2">Select Network Destination</label>
|
||||
<select x-model="selectedCloneDestination" :disabled="!selectedCloneServer" class="select">
|
||||
<option value="">Choose a destination...</option>
|
||||
<template x-for="destination in availableDestinations" :key="destination.id">
|
||||
<option :value="destination.id" x-text="destination.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
|
||||
<div x-show="selectedCloneDestination" x-cloak>
|
||||
<x-forms.button isHighlighted @click="$wire.cloneTo(selectedCloneDestination)" class="mt-2">
|
||||
Clone Resource
|
||||
</x-forms.button>
|
||||
<div class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
All configurations will be duplicated to the selected destination. The running application won't be
|
||||
touched.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<x-callout type="warning" title="Access Restricted">
|
||||
You don't have permission to clone resources. Contact your team administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
|
||||
<h3 class="pt-4">Move Resource</h3>
|
||||
<div class="pb-4">Transfer this resource between projects and environments.</div>
|
||||
|
||||
@can('update', $resource)
|
||||
@if ($projects->count() > 0)
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium mb-2">Select Target Project</label>
|
||||
<select x-model="selectedMoveProject" @change="selectedMoveEnvironment = null" class="select">
|
||||
<option value="">Choose a project...</option>
|
||||
<template x-for="project in projects" :key="project.id">
|
||||
<option :value="project.id"
|
||||
x-text="project.name + (project.id === currentProjectId ? ' (current)' : '')">
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium mb-2 flex gap-2 items-center">Select Target
|
||||
Environment
|
||||
<x-helper helper="Current environment is excluded." />
|
||||
</label>
|
||||
<select x-model="selectedMoveEnvironment"
|
||||
:disabled="!selectedMoveProject || availableEnvironments.length === 0" class="select">
|
||||
<option value=""
|
||||
x-text="availableEnvironments.length === 0 && isCurrentProjectSelected ? 'No other environments available' : 'Choose an environment...'">
|
||||
</option>
|
||||
<template x-for="environment in availableEnvironments" :key="environment.id">
|
||||
<option :value="environment.id"
|
||||
x-text="environment.name + (environment.id === currentEnvironmentId ? ' (current)' : '')">
|
||||
</option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="selectedMoveEnvironment" x-cloak>
|
||||
<x-forms.button isHighlighted @click="$wire.moveTo(selectedMoveEnvironment)" class="mt-2">
|
||||
Move Resource
|
||||
</x-forms.button>
|
||||
<div class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
All configurations will be moved to the selected environment. The running application won't be
|
||||
touched.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-neutral-600 dark:text-neutral-400">No other projects available for moving this resource.
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<x-callout type="warning" title="Access Restricted">
|
||||
You don't have permission to move resources between projects or environments. Contact your team
|
||||
administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,7 +14,7 @@
|
||||
}">
|
||||
@forelse($executions as $execution)
|
||||
<a wire:click="selectTask({{ data_get($execution, 'id') }})" @class([
|
||||
'flex flex-col border-l-2 transition-colors p-4 cursor-pointer bg-white hover:bg-gray-100 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 text-black dark:text-white',
|
||||
'relative flex flex-col border-l-2 transition-colors p-4 cursor-pointer bg-white hover:bg-gray-100 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 text-black dark:text-white',
|
||||
'bg-gray-200 dark:bg-coolgray-200' => data_get($execution, 'id') == $selectedKey,
|
||||
'border-blue-500/50 border-dashed' => data_get($execution, 'status') === 'running',
|
||||
'border-error' => data_get($execution, 'status') === 'failed',
|
||||
@@ -67,18 +67,22 @@
|
||||
@endif
|
||||
@if ($this->logLines->isNotEmpty())
|
||||
<div>
|
||||
<pre class="whitespace-pre-wrap">
|
||||
<div class="max-h-[600px] overflow-y-auto border border-gray-200 dark:border-coolgray-300 rounded p-4 bg-gray-50 dark:bg-coolgray-100 scrollbar">
|
||||
<pre class="whitespace-pre-wrap">
|
||||
@foreach ($this->logLines as $line)
|
||||
{{ $line }}
|
||||
@endforeach
|
||||
</pre>
|
||||
<div class="flex gap-2">
|
||||
</div>
|
||||
<div class="flex gap-2 mt-4">
|
||||
@if ($this->hasMoreLogs())
|
||||
<x-forms.button wire:click.prevent="loadMoreLogs" isHighlighted>
|
||||
Load More
|
||||
</x-forms.button>
|
||||
<x-forms.button wire:click.prevent="loadAllLogs">
|
||||
Load All
|
||||
</x-forms.button>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<div class="flex flex-col w-full gap-2 max-h-[80vh] overflow-y-auto scrollbar">
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm " wire:submit='submitPersistentVolume'>
|
||||
<div class="flex flex-col">
|
||||
<h3>Volume Mount</h3>
|
||||
<div>Docker Volumes mounted to the container.</div>
|
||||
</div>
|
||||
@if ($isSwarm)
|
||||
<h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you
|
||||
would
|
||||
like to use a persistent volumes.</h5>
|
||||
@endif
|
||||
<div class="flex flex-col gap-2 px-2">
|
||||
<x-forms.input placeholder="pv-name" id="name" label="Name" required helper="Volume name." />
|
||||
@if ($isSwarm)
|
||||
<x-forms.input placeholder="/root" id="host_path" label="Source Path" required
|
||||
helper="Directory on the host system." />
|
||||
@else
|
||||
<x-forms.input placeholder="/root" id="host_path" label="Source Path"
|
||||
helper="Directory on the host system." />
|
||||
@endif
|
||||
<x-forms.input placeholder="/tmp/root" id="mount_path" label="Destination Path" required
|
||||
helper="Directory inside the container." />
|
||||
<x-forms.button type="submit" @click="modalOpen=false">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm py-4" wire:submit='submitFileStorage'>
|
||||
<div class="flex flex-col">
|
||||
<h3>File Mount</h3>
|
||||
<div>Actual file mounted from the host system to the container.</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 px-2">
|
||||
<x-forms.input placeholder="/etc/nginx/nginx.conf" id="file_storage_path" label="Destination Path" required
|
||||
helper="File location inside the container" />
|
||||
<x-forms.textarea label="Content" id="file_storage_content"></x-forms.textarea>
|
||||
<x-forms.button type="submit" @click="modalOpen=false">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submitFileStorageDirectory'>
|
||||
<div class="flex flex-col">
|
||||
<h3>Directory Mount</h3>
|
||||
<div>Directory mounted from the host system to the container.</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 px-2">
|
||||
<x-forms.input placeholder="{{ application_configuration_dir() }}/{{ $resource->uuid }}/etc/nginx"
|
||||
id="file_storage_directory_source" label="Source Directory" required
|
||||
helper="Directory on the host system." />
|
||||
<x-forms.input placeholder="/etc/nginx" id="file_storage_directory_destination"
|
||||
label="Destination Directory" required helper="Directory inside the container." />
|
||||
<x-forms.button type="submit" @click="modalOpen=false">
|
||||
Add
|
||||
</x-forms.button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -3,12 +3,10 @@
|
||||
@foreach ($resource->persistentStorages as $storage)
|
||||
@if ($resource->type() === 'service')
|
||||
<livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage"
|
||||
:resource="$resource" :isFirst="$loop->first" isReadOnly='true' isService='true' />
|
||||
:resource="$resource" :isFirst="$storage->id === $this->firstStorageId" isService='true' />
|
||||
@else
|
||||
<livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage"
|
||||
:resource="$resource"
|
||||
isReadOnly="{{ data_get($storage, 'is_readonly') || $resource?->build_pack === 'dockercompose' ? true : false }}"
|
||||
startedAt="{{ data_get($resource, 'started_at') }}" />
|
||||
:resource="$resource" :isFirst="$storage->id === $this->firstStorageId" startedAt="{{ data_get($resource, 'started_at') }}" />
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div>
|
||||
<form wire:submit='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
|
||||
<form wire:submit='submit' class="flex flex-col items-center gap-4 p-4 bg-white border lg:items-start dark:bg-base dark:border-coolgray-300 border-neutral-200">
|
||||
@if ($isReadOnly)
|
||||
@if ($isFirst)
|
||||
<div class="flex gap-2 items-end w-full md:flex-row flex-col">
|
||||
|
||||
@@ -10,12 +10,9 @@
|
||||
<x-forms.button type="submit">Add</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg mt-4">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to manage tags. Contact your team
|
||||
administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Access Restricted" class="mt-4">
|
||||
You don't have permission to manage tags. Contact your team administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
@if (data_get($this->resource, 'tags') && count(data_get($this->resource, 'tags')) > 0)
|
||||
<h3 class="pt-4">Assigned Tags</h3>
|
||||
|
||||
@@ -73,7 +73,9 @@
|
||||
@endcan
|
||||
</form>
|
||||
@else
|
||||
You are using an official Git App. You do not need manual webhooks.
|
||||
<x-callout type="info" title="Information">
|
||||
You are using an official Git App. You do not need manual webhooks.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
|
||||
<div class="grid gap-2 lg:grid-cols-2">
|
||||
@forelse ($project->environments->sortBy('created_at') as $environment)
|
||||
<div class="gap-2 border border-transparent box group">
|
||||
<div class="gap-2 box group">
|
||||
<div class="flex flex-1 mx-6">
|
||||
<a class="flex flex-col justify-center flex-1"
|
||||
href="{{ route('project.resource.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid]) }}">
|
||||
|
||||
@@ -14,47 +14,6 @@
|
||||
<div class="mb-4">Advanced configuration for your server.</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<h3>Terminal Access</h3>
|
||||
<x-helper
|
||||
helper="Control whether terminal access is available for this server and its containers.<br/>Only team
|
||||
administrators and owners can modify this setting." />
|
||||
@if ($isTerminalEnabled)
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
|
||||
Enabled
|
||||
</span>
|
||||
@else
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
|
||||
Disabled
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex items-center gap-4 pt-4">
|
||||
@if (auth()->user()->isAdmin())
|
||||
<div wire:key="terminal-access-change-{{ $isTerminalEnabled }}" class="pb-4">
|
||||
<x-modal-confirmation title="Confirm Terminal Access Change?"
|
||||
temporaryDisableTwoStepConfirmation
|
||||
buttonTitle="{{ $isTerminalEnabled ? 'Disable Terminal' : 'Enable Terminal' }}"
|
||||
submitAction="toggleTerminal" :actions="[
|
||||
$isTerminalEnabled
|
||||
? 'This will disable terminal access for this server and all its containers.'
|
||||
: 'This will enable terminal access for this server and all its containers.',
|
||||
$isTerminalEnabled
|
||||
? 'Users will no longer be able to access terminal views from the UI.'
|
||||
: 'Users will be able to access terminal views from the UI.',
|
||||
'This change will take effect immediately.',
|
||||
]" confirmationText="{{ $server->name }}"
|
||||
shortConfirmationLabel="Server Name"
|
||||
step3ButtonText="{{ $isTerminalEnabled ? 'Disable Terminal' : 'Enable Terminal' }}">
|
||||
</x-modal-confirmation>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Disk Usage</h3>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex flex-col">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<x-server.sidebar :server="$server" activeMenu="metrics" />
|
||||
<div class="w-full">
|
||||
<h2>Metrics</h2>
|
||||
<div class="pb-4">Basic metrics for your container.</div>
|
||||
<div class="pb-4">Basic metrics for your server.</div>
|
||||
@if ($server->isMetricsEnabled())
|
||||
<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
|
||||
<x-forms.select label="Interval" wire:change="setInterval" id="interval">
|
||||
@@ -19,7 +19,7 @@
|
||||
<option value="10080">1 week</option>
|
||||
<option value="43200">30 days</option>
|
||||
</x-forms.select>
|
||||
<h4 class="pt-4">CPU (%)</h4>
|
||||
<h4 class="pt-4">CPU Usage</h4>
|
||||
<div wire:ignore id="{!! $chartId !!}-cpu"></div>
|
||||
|
||||
<script>
|
||||
@@ -27,6 +27,7 @@
|
||||
const optionsServerCpu = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
width: 2,
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
@@ -45,7 +46,7 @@
|
||||
},
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
@@ -61,16 +62,16 @@
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
series: [{
|
||||
name: 'CPU %',
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
series: [{
|
||||
name: 'CPU %',
|
||||
data: []
|
||||
}],
|
||||
noData: {
|
||||
@@ -79,12 +80,27 @@
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
||||
const value = series[seriesIndex][dataPointIndex];
|
||||
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
||||
const date = new Date(timestamp);
|
||||
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
||||
date.getUTCFullYear() + '-' +
|
||||
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(date.getUTCDate()).padStart(2, '0');
|
||||
return '<div class="apexcharts-tooltip-custom">' +
|
||||
'<div class="apexcharts-tooltip-custom-value">CPU: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
|
||||
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
@@ -95,11 +111,11 @@
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
|
||||
checkTheme();
|
||||
serverCpuChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [baseColor],
|
||||
serverCpuChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [cpuColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
@@ -109,15 +125,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
},
|
||||
formatter: function(value) {
|
||||
return Math.round(value) + ' %';
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
@@ -130,7 +149,7 @@
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h4>Memory (%)</h4>
|
||||
<h4>Memory Usage</h4>
|
||||
<div wire:ignore id="{!! $chartId !!}-memory"></div>
|
||||
|
||||
<script>
|
||||
@@ -138,6 +157,7 @@
|
||||
const optionsServerMemory = {
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
width: 2,
|
||||
},
|
||||
chart: {
|
||||
height: '150px',
|
||||
@@ -156,7 +176,7 @@
|
||||
},
|
||||
},
|
||||
animations: {
|
||||
enabled: false,
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
@@ -172,15 +192,15 @@
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [baseColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '',
|
||||
},
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
@@ -196,12 +216,27 @@
|
||||
color: textColor,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
custom: function({ series, seriesIndex, dataPointIndex, w }) {
|
||||
const value = series[seriesIndex][dataPointIndex];
|
||||
const timestamp = w.globals.seriesX[seriesIndex][dataPointIndex];
|
||||
const date = new Date(timestamp);
|
||||
const timeString = String(date.getUTCHours()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCMinutes()).padStart(2, '0') + ':' +
|
||||
String(date.getUTCSeconds()).padStart(2, '0') + ', ' +
|
||||
date.getUTCFullYear() + '-' +
|
||||
String(date.getUTCMonth() + 1).padStart(2, '0') + '-' +
|
||||
String(date.getUTCDate()).padStart(2, '0');
|
||||
return '<div class="apexcharts-tooltip-custom">' +
|
||||
'<div class="apexcharts-tooltip-custom-value">Memory: <span class="apexcharts-tooltip-value-bold">' + value + '%</span></div>' +
|
||||
'<div class="apexcharts-tooltip-custom-title">' + timeString + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
@@ -212,11 +247,11 @@
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
|
||||
checkTheme();
|
||||
serverMemoryChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [baseColor],
|
||||
serverMemoryChart.updateOptions({
|
||||
series: [{
|
||||
data: chartData[0].seriesData,
|
||||
}],
|
||||
colors: [ramColor],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
@@ -226,16 +261,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
show: true,
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: textColor,
|
||||
},
|
||||
formatter: function(value) {
|
||||
return Math.round(value) + ' %';
|
||||
}
|
||||
}
|
||||
},
|
||||
noData: {
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
|
||||
@@ -23,15 +23,11 @@
|
||||
<div class="flex flex-col gap-2 pt-6">
|
||||
@if ($isCloudflareTunnelsEnabled)
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
class="w-full px-4 py-2 text-yellow-800 rounded-xs border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-600">
|
||||
<p class="font-bold">Warning!</p>
|
||||
<p>If you disable Cloudflare Tunnel, you will need to update the server's IP address back
|
||||
to
|
||||
its real IP address in the server "General" settings. The server may become inaccessible
|
||||
if the IP
|
||||
address is not updated correctly.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Warning!">
|
||||
If you disable Cloudflare Tunnel, you will need to update the server's IP address back
|
||||
to its real IP address in the server "General" settings. The server may become inaccessible
|
||||
if the IP address is not updated correctly.
|
||||
</x-callout>
|
||||
<div class="w-64">
|
||||
@if ($server->ip_previous)
|
||||
<x-modal-confirmation title="Disable Cloudflare Tunnel?"
|
||||
@@ -60,10 +56,9 @@
|
||||
</div>
|
||||
</div>
|
||||
@elseif (!$server->isFunctional())
|
||||
<div
|
||||
class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="info" title="Configuration Options" class="mb-4">
|
||||
To <span class="font-semibold">automatically</span> configure Cloudflare Tunnel, please
|
||||
validate your server first.</span> Then you will need a Cloudflare token and an SSH
|
||||
validate your server first. Then you will need a Cloudflare token and an SSH
|
||||
domain configured.
|
||||
<br />
|
||||
To <span class="font-semibold">manually</span> configure Cloudflare Tunnel, please
|
||||
@@ -72,8 +67,8 @@
|
||||
<br /><br />
|
||||
For more information, please read our <a
|
||||
href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/server-ssh" target="_blank"
|
||||
class="underline ">documentation</a>.
|
||||
</div>
|
||||
class="underline">documentation</a>.
|
||||
</x-callout>
|
||||
@endif
|
||||
@if (!$isCloudflareTunnelsEnabled && $server->isFunctional())
|
||||
<div class="flex flex-col pb-2">
|
||||
@@ -97,10 +92,9 @@
|
||||
<x-forms.button type="submit" isHighlighted>Continue</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure Cloudflare Tunnel for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@script
|
||||
@@ -128,10 +122,9 @@
|
||||
confirmationLabel="Please type the confirmation text to confirm that you manually configured Cloudflare Tunnel."
|
||||
shortConfirmationLabel="Confirmation text" />
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure Cloudflare Tunnel for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -11,13 +11,6 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Docker Cleanup</h2>
|
||||
<x-forms.button type="submit" canGate="update" :canResource="$server">Save</x-forms.button>
|
||||
</div>
|
||||
<div class="mt-3 mb-4">Configure Docker cleanup settings for your server.</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-4">
|
||||
<h3>Docker Cleanup</h3>
|
||||
@can('update', $server)
|
||||
<x-modal-confirmation title="Confirm Docker Cleanup?" buttonTitle="Trigger Manual Cleanup"
|
||||
isHighlightedButton submitAction="manualCleanup" :actions="[
|
||||
@@ -31,7 +24,14 @@
|
||||
:confirmWithPassword="false" step2ButtonText="Trigger Docker Cleanup" />
|
||||
@endcan
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<div class="mt-1 mb-6">Configure Docker cleanup settings for your server.</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-4">
|
||||
<h3>Cleanup Configuration</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<x-forms.input canGate="update" :canResource="$server" placeholder="*/10 * * * *"
|
||||
id="dockerCleanupFrequency" label="Docker cleanup frequency" required
|
||||
helper="Cron expression for Docker Cleanup.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at midnight." />
|
||||
@@ -40,43 +40,44 @@
|
||||
label="Docker cleanup threshold (%)" required
|
||||
helper="The Docker cleanup tasks will run when the disk usage exceeds this threshold." />
|
||||
@endif
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$server"
|
||||
helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Removes stopped containers managed by Coolify (as containers are none persistent, no data will be lost).</li>
|
||||
<li>Deletes unused images.</li>
|
||||
<li>Clears build cache.</li>
|
||||
<li>Removes old versions of the Coolify helper image.</li>
|
||||
<li>Optionally delete unused volumes (if enabled in advanced options).</li>
|
||||
<li>Optionally remove unused networks (if enabled in advanced options).</li>
|
||||
</ul>"
|
||||
instantSave id="forceDockerCleanup" label="Force Docker Cleanup" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<span class="dark:text-warning font-bold">Warning: Enable these
|
||||
options only if you fully understand their implications and
|
||||
consequences!</span><br>Improper use will result in data loss and could cause
|
||||
functional issues.
|
||||
</p>
|
||||
<div class="w-96">
|
||||
<div class="w-full sm:w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$server"
|
||||
helper="Enabling Force Docker Cleanup or manually triggering a cleanup will perform the following actions:
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Removes stopped containers managed by Coolify (as containers are non-persistent, no data will be lost).</li>
|
||||
<li>Deletes unused images.</li>
|
||||
<li>Clears build cache.</li>
|
||||
<li>Removes old versions of the Coolify helper image.</li>
|
||||
<li>Optionally delete unused volumes (if enabled in advanced options).</li>
|
||||
<li>Optionally remove unused networks (if enabled in advanced options).</li>
|
||||
</ul>"
|
||||
instantSave id="forceDockerCleanup" label="Force Docker Cleanup" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 mt-6">
|
||||
<h3>Advanced</h3>
|
||||
<x-callout type="warning" title="Caution">
|
||||
<p>These options can cause permanent data loss and functional issues. Only enable if you fully
|
||||
understand the consequences.</p>
|
||||
</x-callout>
|
||||
<div class="w-full sm:w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$server" instantSave id="deleteUnusedVolumes"
|
||||
label="Delete Unused Volumes"
|
||||
helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data form stopped containers will be lost!</strong><br><br>Consequences include:<br>
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Volumes not attached to running containers will be deleted and data will be permanently lost (stopped containers are affected).</li>
|
||||
<li>Data from stopped containers volumes will be permanently lost.</li>
|
||||
<li>No way to recover deleted volume data.</li>
|
||||
</ul>" />
|
||||
helper="This option will remove all unused Docker volumes during cleanup.<br><br><strong>Warning: Data from stopped containers will be lost!</strong><br><br>Consequences include:<br>
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Volumes not attached to running containers will be permanently deleted (volumes from stopped containers are affected).</li>
|
||||
<li>Data stored in deleted volumes cannot be recovered.</li>
|
||||
</ul>" />
|
||||
<x-forms.checkbox canGate="update" :canResource="$server" instantSave id="deleteUnusedNetworks"
|
||||
label="Delete Unused Networks"
|
||||
helper="This option will remove all unused Docker networks during cleanup.<br><br><strong>Warning: Functionality may be lost and containers may not be able to communicate with each other!</strong><br><br>Consequences include:<br>
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Networks not attached to running containers will be permanently deleted (stopped containers are affected).</li>
|
||||
<li>Custom networks for stopped containers will be permanently deleted.</li>
|
||||
<li>Functionality may be lost and containers may not be able to communicate with each other.</li>
|
||||
</ul>" />
|
||||
<ul class='list-disc pl-4 mt-2'>
|
||||
<li>Networks not attached to running containers will be permanently deleted (networks used by stopped containers are affected).</li>
|
||||
<li>Containers may lose connectivity if required networks are removed.</li>
|
||||
</ul>" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -7,37 +7,60 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Configuration</h2>
|
||||
@if ($server->proxy->status === 'exited' || $server->proxy->status === 'removing')
|
||||
<x-forms.button canGate="update" :canResource="$server" wire:click.prevent="changeProxy">Switch Proxy</x-forms.button>
|
||||
@can('update', $server)
|
||||
<x-modal-confirmation title="Confirm Proxy Switching?" buttonTitle="Switch Proxy"
|
||||
submitAction="changeProxy" :actions="['Custom proxy configurations may be reset to their default settings.']"
|
||||
warningMessage="This operation may cause issues. Please refer to the guide <a href='https://coolify.io/docs/knowledge-base/server/proxies#switch-between-proxies' target='_blank' class='underline text-white'>switching between proxies</a> before proceeding!"
|
||||
step2ButtonText="Switch Proxy" :confirmWithText="false" :confirmWithPassword="false">
|
||||
</x-modal-confirmation>
|
||||
@endcan
|
||||
@else
|
||||
<x-forms.button canGate="update" :canResource="$server" disabled wire:click.prevent="changeProxy">Switch Proxy</x-forms.button>
|
||||
<x-forms.button canGate="update" :canResource="$server"
|
||||
wire:click="$dispatch('error', 'Currently running proxy must be stopped before switching proxy')">Switch
|
||||
Proxy</x-forms.button>
|
||||
@endif
|
||||
<x-forms.button canGate="update" :canResource="$server" type="submit">Save</x-forms.button>
|
||||
</div>
|
||||
<div class="pb-4 "> <svg class="inline-flex w-6 h-6 mr-2 dark:text-warning" 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>Before switching proxies, please read <a class="underline dark:text-white"
|
||||
href="https://coolify.io/docs/knowledge-base/server/proxies#switch-between-proxies">this</a>.
|
||||
</div>
|
||||
<div class="subtitle">Configure your proxy settings and advanced options.</div>
|
||||
<h3>Advanced</h3>
|
||||
<div class="pb-4 w-96">
|
||||
<div class="pb-6 w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$server"
|
||||
helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
|
||||
id="server.settings.generate_exact_labels"
|
||||
label="Generate labels only for {{ str($server->proxyType())->title() }}" instantSave />
|
||||
<x-forms.checkbox canGate="update" :canResource="$server" instantSave="instantSaveRedirect"
|
||||
id="redirect_enabled" label="Override default request handler"
|
||||
id="redirectEnabled" label="Override default request handler"
|
||||
helper="Requests to unknown hosts or stopped services will receive a 503 response or be redirected to the URL you set below (need to enable this first)." />
|
||||
@if ($redirect_enabled)
|
||||
@if ($redirectEnabled)
|
||||
<x-forms.input canGate="update" :canResource="$server" placeholder="https://app.coolify.io"
|
||||
id="redirect_url" label="Redirect to (optional)" />
|
||||
id="redirectUrl" label="Redirect to (optional)" />
|
||||
@endif
|
||||
</div>
|
||||
@if ($server->proxyType() === ProxyTypes::TRAEFIK->value)
|
||||
<h3>Traefik</h3>
|
||||
@elseif ($server->proxyType() === 'CADDY')
|
||||
<h3>Caddy</h3>
|
||||
@php
|
||||
$proxyTitle =
|
||||
$server->proxyType() === ProxyTypes::TRAEFIK->value
|
||||
? 'Traefik (Coolify Proxy)'
|
||||
: 'Caddy (Coolify Proxy)';
|
||||
@endphp
|
||||
@if ($server->proxyType() === ProxyTypes::TRAEFIK->value || $server->proxyType() === 'CADDY')
|
||||
<div class="flex items-center gap-2">
|
||||
<h3>{{ $proxyTitle }}</h3>
|
||||
@if ($proxySettings)
|
||||
@can('update', $server)
|
||||
<x-modal-confirmation title="Reset Proxy Configuration?"
|
||||
buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
|
||||
:actions="[
|
||||
'Reset proxy configuration to default settings',
|
||||
'All custom configurations will be lost',
|
||||
'Custom ports and entrypoints will be removed',
|
||||
]" confirmationText="{{ $server->name }}"
|
||||
confirmationLabel="Please confirm by entering the server name below"
|
||||
shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
|
||||
:confirmWithPassword="false" :confirmWithText="true">
|
||||
</x-modal-confirmation>
|
||||
@endcan
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@if (
|
||||
$server->proxy->last_applied_settings &&
|
||||
@@ -50,15 +73,12 @@
|
||||
<x-loading text="Loading proxy configuration..." />
|
||||
</div>
|
||||
<div wire:loading.remove wire:target="loadProxyConfiguration">
|
||||
@if ($proxy_settings)
|
||||
<div class="flex flex-col gap-2 pt-4">
|
||||
@if ($proxySettings)
|
||||
<div class="flex flex-col gap-2 pt-2">
|
||||
<x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
|
||||
monacoEditorLanguage="yaml" label="Configuration file" name="proxy_settings"
|
||||
id="proxy_settings" rows="30" />
|
||||
<x-forms.button canGate="update" :canResource="$server"
|
||||
wire:click.prevent="reset_proxy_configuration">
|
||||
Reset configuration to default
|
||||
</x-forms.button>
|
||||
monacoEditorLanguage="yaml"
|
||||
label="Configuration file ( {{ $this->configurationFilePath }} )"
|
||||
name="proxySettings" id="proxySettings" rows="30" />
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -99,10 +119,9 @@
|
||||
</x-forms.button> --}}
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure proxy settings for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</x-slot:content>
|
||||
</x-slide-over>
|
||||
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row" x-init="$wire.checkForUpdates()">
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
|
||||
<x-server.sidebar-security :server="$server" :parameters="$parameters" />
|
||||
<form wire:submit='submit' class="w-full">
|
||||
<div>
|
||||
@@ -20,8 +20,6 @@
|
||||
<x-helper
|
||||
helper="Only available for apt, dnf and zypper package managers atm, more coming
|
||||
soon.<br/>Status notifications sent every week.<br/>You can disable notifications in the <a class='dark:text-white underline' href='{{ route('notifications.email') }}'>notification settings</a>." />
|
||||
<x-forms.button type="button" wire:click="$dispatch('checkForUpdatesDispatch')">
|
||||
Check Now</x-forms.button>
|
||||
@if (isDev())
|
||||
<x-forms.button type="button" wire:click="sendTestEmail">
|
||||
Send Test Email (dev only)</x-forms.button>
|
||||
@@ -30,6 +28,8 @@
|
||||
<div>Update your servers semi-automatically.</div>
|
||||
<div>
|
||||
<div class="flex flex-col gap-6 pt-4">
|
||||
<x-forms.button type="button" wire:click="$dispatch('checkForUpdates')">
|
||||
Check for Updates</x-forms.button>
|
||||
<div class="flex flex-col">
|
||||
<div>
|
||||
<div class="pb-2" wire:target="checkForUpdates" wire:loading>
|
||||
@@ -109,6 +109,9 @@
|
||||
</div>
|
||||
@script
|
||||
<script>
|
||||
$wire.on('checkForUpdates', () => {
|
||||
$wire.$call('checkForUpdatesDispatch');
|
||||
});
|
||||
$wire.on('updateAllPackages', () => {
|
||||
window.dispatchEvent(new CustomEvent('startupdate'));
|
||||
$wire.$call('updateAllPackages');
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<div>
|
||||
<x-slot:title>
|
||||
{{ data_get_str($server, 'name')->limit(10) }} > Terminal Access | Coolify
|
||||
</x-slot>
|
||||
<livewire:server.navbar :server="$server" />
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 sm:flex-row">
|
||||
<x-server.sidebar-security :server="$server" :parameters="$parameters" />
|
||||
<div class="w-full">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2>Terminal Access</h2>
|
||||
<x-helper
|
||||
helper="Decide if users (including admins and the owner) can access the terminal for this server and its containers from the dashboard.<br/>
|
||||
Only team administrators and owners can change this setting."/>
|
||||
@if (auth()->user()->isAdmin())
|
||||
<div wire:key="terminal-access-change-{{ $isTerminalEnabled }}">
|
||||
<x-modal-confirmation title="Confirm Terminal Access Change?"
|
||||
temporaryDisableTwoStepConfirmation
|
||||
buttonTitle="{{ $isTerminalEnabled ? 'Disable Terminal' : 'Enable Terminal' }}"
|
||||
submitAction="toggleTerminal" :actions="[
|
||||
$isTerminalEnabled
|
||||
? 'This will disable terminal access for this server and all its containers.'
|
||||
: 'This will enable terminal access for this server and all its containers.',
|
||||
$isTerminalEnabled
|
||||
? 'Users will no longer be able to access terminal views from the UI.'
|
||||
: 'Users will be able to access terminal views from the UI.',
|
||||
'This change will take effect immediately.',
|
||||
]" confirmationText="{{ $server->name }}"
|
||||
shortConfirmationLabel="Server Name"
|
||||
step3ButtonText="{{ $isTerminalEnabled ? 'Disable Terminal' : 'Enable Terminal' }}"
|
||||
isHighlightedButton>
|
||||
</x-modal-confirmation>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="mb-4">Manage terminal access to this server and its containers.</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<h3>Terminal Status:</h3>
|
||||
@if ($isTerminalEnabled)
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
|
||||
Operational
|
||||
</span>
|
||||
@else
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
|
||||
Disabled
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,9 +62,10 @@
|
||||
</x-forms.button>
|
||||
@endif
|
||||
@if ($server->isForceDisabled() && isCloud())
|
||||
<div class="pt-4 font-bold text-red-500">The system has disabled the server because you have
|
||||
exceeded the
|
||||
number of servers for which you have paid.</div>
|
||||
<x-callout type="danger" title="Server Disabled" class="mt-4">
|
||||
The system has disabled the server because you have exceeded the
|
||||
number of servers for which you have paid.
|
||||
</x-callout>
|
||||
@endif
|
||||
<div class="flex flex-col gap-2 pt-4">
|
||||
<div class="flex flex-col gap-2 w-full lg:flex-row">
|
||||
@@ -211,6 +212,14 @@
|
||||
:canResource="$server">Save</x-forms.button>
|
||||
<x-forms.button wire:click='restartSentinel' canGate="update"
|
||||
:canResource="$server">Restart</x-forms.button>
|
||||
<x-slide-over fullScreen>
|
||||
<x-slot:title>Sentinel Logs</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:project.shared.get-logs :server="$server"
|
||||
container="coolify-sentinel" lazy />
|
||||
</x-slot:content>
|
||||
<x-forms.button @click="slideOverOpen=true">Logs</x-forms.button>
|
||||
</x-slide-over>
|
||||
@else
|
||||
<x-status.stopped status="Out of sync" noLoading
|
||||
title="{{ $sentinelUpdatedAt }}" />
|
||||
@@ -218,12 +227,19 @@
|
||||
:canResource="$server">Save</x-forms.button>
|
||||
<x-forms.button wire:click='restartSentinel' canGate="update"
|
||||
:canResource="$server">Sync</x-forms.button>
|
||||
<x-slide-over fullScreen>
|
||||
<x-slot:title>Sentinel Logs</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:project.shared.get-logs :server="$server"
|
||||
container="coolify-sentinel" lazy />
|
||||
</x-slot:content>
|
||||
<x-forms.button @click="slideOverOpen=true">Logs</x-forms.button>
|
||||
</x-slide-over>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
<div class="w-96">
|
||||
<x-forms.checkbox canGate="update" :canResource="$server" wire:model.live="isSentinelEnabled"
|
||||
label="Enable Sentinel" />
|
||||
@@ -243,6 +259,20 @@
|
||||
label="Enable Metrics (enable Sentinel first)" />
|
||||
@endif
|
||||
</div>
|
||||
@if (isDev() && $server->isSentinelEnabled())
|
||||
<div class="pt-4" x-data="{
|
||||
customImage: localStorage.getItem('sentinel_custom_docker_image_{{ $server->uuid }}') || '',
|
||||
saveCustomImage() {
|
||||
localStorage.setItem('sentinel_custom_docker_image_{{ $server->uuid }}', this.customImage);
|
||||
$wire.set('sentinelCustomDockerImage', this.customImage);
|
||||
}
|
||||
}" x-init="$wire.set('sentinelCustomDockerImage', customImage)">
|
||||
<x-forms.input x-model="customImage" @input.debounce.500ms="saveCustomImage()"
|
||||
placeholder="e.g., sentinel:latest or myregistry/sentinel:dev"
|
||||
label="Custom Sentinel Docker Image (Dev Only)"
|
||||
helper="Override the default Sentinel Docker image for testing. Leave empty to use the default." />
|
||||
</div>
|
||||
@endif
|
||||
@if ($server->isSentinelEnabled())
|
||||
<div class="flex flex-wrap gap-2 sm:flex-nowrap items-end">
|
||||
<x-forms.input canGate="update" :canResource="$server" type="password" id="sentinelToken"
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
dropdownOpen: false,
|
||||
search: '',
|
||||
allEntries: [],
|
||||
darkColorContent: getComputedStyle($el).getPropertyValue('--color-base'),
|
||||
whiteColorContent: getComputedStyle($el).getPropertyValue('--color-white'),
|
||||
init() {
|
||||
this.mounted();
|
||||
// Load all entries when component initializes
|
||||
@@ -45,11 +47,16 @@
|
||||
const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const userSettings = localStorage.getItem('theme') || 'dark';
|
||||
localStorage.setItem('theme', userSettings);
|
||||
|
||||
const themeMetaTag = document.querySelector('meta[name=theme-color]');
|
||||
|
||||
if (userSettings === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
themeMetaTag.setAttribute('content', this.darkColorContent);
|
||||
this.theme = 'dark';
|
||||
} else if (userSettings === 'light') {
|
||||
document.documentElement.classList.remove('dark');
|
||||
themeMetaTag.setAttribute('content', this.whiteColorContent);
|
||||
this.theme = 'light';
|
||||
} else if (darkModePreference) {
|
||||
this.theme = 'system';
|
||||
@@ -116,7 +123,7 @@
|
||||
x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2" class="absolute right-0 top-full mt-1 z-50 w-48" x-cloak>
|
||||
<div
|
||||
class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-black border-neutral-300">
|
||||
class="p-1 bg-white border rounded-sm shadow-lg dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- What's New Section -->
|
||||
@if ($unreadCount > 0)
|
||||
@@ -242,6 +249,9 @@
|
||||
<p class="mt-1 text-sm dark:text-neutral-400">
|
||||
Stay up to date with the latest features and improvements.
|
||||
</p>
|
||||
<p class="mt-1 text-xs dark:text-neutral-500">
|
||||
Current version: <span class="font-semibold dark:text-neutral-300">{{ $currentVersion }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
@if (isDev())
|
||||
@@ -299,6 +309,10 @@
|
||||
<span x-text="entry.title"></span>
|
||||
<x-external-link />
|
||||
</a></span>
|
||||
<span x-show="entry.tag_name === '{{ $currentVersion }}'"
|
||||
class="px-2 py-1 text-xs font-semibold bg-success text-white rounded-sm">
|
||||
CURRENT VERSION
|
||||
</span>
|
||||
<span class="text-xs dark:text-neutral-400"
|
||||
x-text="new Date(entry.published_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></span>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,8 @@
|
||||
@if (
|
||||
$oauth_setting->provider == 'authentik' ||
|
||||
$oauth_setting->provider == 'clerk' ||
|
||||
$oauth_setting->provider == 'zitadel')
|
||||
$oauth_setting->provider == 'zitadel' ||
|
||||
$oauth_setting->provider == 'gitlab')
|
||||
<x-forms.input id="oauth_settings_map.{{ $oauth_setting->provider }}.base_url"
|
||||
label="Base URL" />
|
||||
@endif
|
||||
|
||||
@@ -66,12 +66,10 @@
|
||||
confirmationLabel="Please type the confirmation text to disable two step confirmation."
|
||||
shortConfirmationLabel="Confirmation text" />
|
||||
</div>
|
||||
<div class="w-full px-4 py-2 mb-4 text-white rounded-xs border-l-4 border-red-500 bg-error">
|
||||
<p class="font-bold">Warning!</p>
|
||||
<p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and
|
||||
increases
|
||||
the risk of accidental actions. This is not recommended for production servers.</p>
|
||||
</div>
|
||||
<x-callout type="danger" title="Warning!" class="mb-4">
|
||||
Disabling two step confirmation reduces security (as anyone can easily delete anything) and
|
||||
increases the risk of accidental actions. This is not recommended for production servers.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -79,5 +79,19 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<x-domain-conflict-modal
|
||||
:conflicts="$domainConflicts"
|
||||
:showModal="$showDomainConflictModal"
|
||||
confirmAction="confirmDomainUsage">
|
||||
<x-slot:consequences>
|
||||
<ul class="mt-2 ml-4 list-disc">
|
||||
<li>The Coolify instance domain will conflict with existing resources</li>
|
||||
<li>SSL certificates might not work correctly</li>
|
||||
<li>Routing behavior will be unpredictable</li>
|
||||
<li>You may not be able to access the Coolify dashboard properly</li>
|
||||
</ul>
|
||||
</x-slot:consequences>
|
||||
</x-domain-conflict-modal>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,19 +269,9 @@
|
||||
helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
|
||||
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
|
||||
<div class="text-sm text-red-600 dark:text-red-400">You don't have permission to create
|
||||
new GitHub Apps. Please contact your team administrator.</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="danger" title="Insufficient Permissions">
|
||||
You don't have permission to create new GitHub Apps. Please contact your team administrator.
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,8 +52,7 @@
|
||||
</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new GitHub Apps.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You don't have permission to create new GitHub Apps. Please contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
@@ -7,7 +7,7 @@
|
||||
<x-forms.input required label="Name" id="name" />
|
||||
<x-forms.input label="Description" id="description" />
|
||||
</div>
|
||||
<x-forms.input required type="url" label="Endpoint" wire:model.blur-sm="endpoint" />
|
||||
<x-forms.input required type="url" label="Endpoint" wire:model.blur="endpoint" />
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input required label="Bucket" id="bucket" />
|
||||
<x-forms.input required helper="Region only required for AWS. Leave it as-is for other providers."
|
||||
@@ -24,8 +24,8 @@
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new S3 storage configurations.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You don't have permission to create new S3 storage configurations. Please contact your team administrator for
|
||||
access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
@@ -26,10 +26,11 @@
|
||||
<div class="text-xl font-bold dark:text-white">{{ currentTeam()->servers->count() }}</div>
|
||||
</div>
|
||||
@if (currentTeam()->serverOverflow())
|
||||
<div class="py-4"><span class="font-bold text-red-500">WARNING:</span> You must delete
|
||||
{{ currentTeam()->servers->count() - $server_limits }} servers,
|
||||
<x-callout type="danger" title="WARNING" class="my-4">
|
||||
You must delete {{ currentTeam()->servers->count() - $server_limits }} servers,
|
||||
or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
|
||||
deactivated.</div>
|
||||
deactivated.
|
||||
</x-callout>
|
||||
@endif
|
||||
<x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Change Server Quantity
|
||||
</x-forms.button>
|
||||
|
||||
@@ -55,10 +55,10 @@
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscription</h1>
|
||||
</div>
|
||||
<div>You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
|
||||
<span class="underline cursor-pointer dark:text-white" wire:click="help">contact
|
||||
us</span>.
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
|
||||
<span class="underline cursor-pointer dark:text-white" wire:click="help">contact us</span>.
|
||||
</x-callout>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
<h2>Invite New Member</h2>
|
||||
@if (isInstanceAdmin())
|
||||
<div class="pb-4 text-xs dark:text-warning">You need to configure (as root team) <a
|
||||
href="/settings#smtp" class="underline dark:text-warning">Transactional
|
||||
href="/settings/email" class="underline dark:text-warning">Transactional
|
||||
Emails</a>
|
||||
before
|
||||
you can invite a
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</svg>
|
||||
In progress
|
||||
</button>
|
||||
<button class="menu-item" @click="modalOpen=true" x-show="!showProgress">
|
||||
<button class="menu-item cursor-pointer" @click="modalOpen=true" x-show="!showProgress">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-pink-500 transition-colors hover:text-pink-300" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
|
||||
@@ -54,12 +54,12 @@
|
||||
<p>Are you sure you would like to upgrade your instance to {{ $latestVersion }}?</p>
|
||||
<br />
|
||||
|
||||
<div
|
||||
class="p-4 mb-4 text-yellow-800 border border-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-800">
|
||||
<p class="font-medium">Warning: Any deployments running during the update process will
|
||||
<x-callout type="warning" title="Caution">
|
||||
<p>Any deployments running during the update process will
|
||||
fail. Please ensure no deployments are in progress on any server before continuing.
|
||||
</p>
|
||||
</div>
|
||||
</x-callout>
|
||||
<br />
|
||||
<p>You can review the changelogs <a class="font-bold underline dark:text-white"
|
||||
href="https://github.com/coollabsio/coolify/releases" target="_blank">here</a>.</p>
|
||||
<br />
|
||||
|
||||
Reference in new issue
Block a user