ui ui ui ui

This commit is contained in:
Andras Bacsai
2024-03-25 11:33:38 +01:00
parent a66090b594
commit 9ad6ce5851
41 changed files with 203 additions and 289 deletions

View File

@@ -1,5 +1,5 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="production" id="name" label="Name" required />
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
<x-forms.input autofocus placeholder="production" id="name" label="Name" required />
<x-forms.button type="submit" @click="slideOverOpen=false">
Save
</x-forms.button>

View File

@@ -1,16 +1,6 @@
<div>
<h1>Backups</h1>
<livewire:project.database.heading :database="$database" />
<x-modal modalId="startDatabase">
<x-slot:modalBody>
<livewire:activity-monitor header="Database Startup Logs" />
</x-slot:modalBody>
<x-slot:modalSubmit>
<x-forms.button onclick="startDatabase.close()" type="submit">
Close
</x-forms.button>
</x-slot:modalSubmit>
</x-modal>
<div class="pt-6">
<livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s" :status="data_get($database, 'status')" />
<div class="flex items-center gap-2">

View File

@@ -1,28 +1,12 @@
<div>
<h1>Backups</h1>
<livewire:project.database.heading :database="$database" />
<x-modal modalId="startDatabase">
<x-slot:modalBody>
<livewire:activity-monitor header="Database Startup Logs" />
</x-slot:modalBody>
<x-slot:modalSubmit>
<x-forms.button onclick="startDatabase.close()" type="submit">
Close
</x-forms.button>
</x-slot:modalSubmit>
</x-modal>
<div class="pt-6">
<div class="flex gap-2 ">
<h2 class="pb-4">Scheduled Backups</h2>
<x-slide-over>
<x-slot:title>New Scheduled Backup</x-slot:title>
<x-slot:content>
<livewire:project.database.create-scheduled-backup :database="$database" :s3s="$s3s" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Scheduled Backup">
<livewire:project.database.create-scheduled-backup :database="$database" :s3s="$s3s" />
</x-modal-input>
</div>
<livewire:project.database.scheduled-backups :database="$database" />
</div>

View File

@@ -1,16 +1,6 @@
<div>
<h1>Configuration</h1>
<livewire:project.database.heading :database="$database" />
<x-modal modalId="startDatabase" noSubmit>
<x-slot:modalBody>
<livewire:activity-monitor header="Database Startup Logs" />
</x-slot:modalBody>
<x-slot:modalSubmit>
<x-forms.button onclick="startDatabase.close()" type="submit">
Close
</x-forms.button>
</x-slot:modalSubmit>
</x-modal>
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'general' && 'dark:text-white'"

View File

@@ -1,5 +1,5 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
<x-forms.input autofocus placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
<x-forms.checkbox id="save_s3" label="Save to S3" />
<x-forms.select id="selected_storage_id">
@if ($s3s->count() === 0)

View File

@@ -3,7 +3,7 @@
<x-slide-over @startdatabase.window="slideOverOpen = true" closeWithX fullScreen>
<x-slot:title>Database Startup Logs</x-slot:title>
<x-slot:content>
<livewire:activity-monitor showWaiting />
<livewire:activity-monitor header="Logs" showWaiting />
</x-slot:content>
</x-slide-over>
<div class="navbar-main">

View File

@@ -82,21 +82,17 @@
<div class="pb-16">
<div class="flex gap-2 pt-4 pb-2">
<h3>Initialization scripts</h3>
<x-slide-over>
<x-slot:title>New Init Script</x-slot:title>
<x-slot:content>
<form class="flex flex-col gap-2 rounded modal-box" wire:submit='save_new_init_script'>
<x-forms.input placeholder="create_test_db.sql" id="new_filename" label="Filename" required />
<x-forms.textarea placeholder="CREATE DATABASE test;" id="new_content" label="Content"
required />
<x-forms.button type="submit">
Save
</x-forms.button>
</form>
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Init Script">
<form class="flex flex-col w-full gap-2 rounded" wire:submit='save_new_init_script'>
<x-forms.input autofocus placeholder="create_test_db.sql" id="new_filename" label="Filename"
required />
<x-forms.textarea rows="20" placeholder="CREATE DATABASE test;" id="new_content"
label="Content" required />
<x-forms.button type="submit">
Save
</x-forms.button>
</form>
</x-modal-input>
</div>
<div class="flex flex-col gap-2">
@forelse(data_get($database,'init_scripts', []) as $script)

View File

@@ -2,12 +2,14 @@
<div class="flex flex-wrap gap-2">
@forelse($database->scheduledBackups as $backup)
@if ($type == 'database')
<a class="flex flex-col box"
href="{{ route('project.database.backup.execution', [...$parameters, 'backup_uuid' => $backup->uuid]) }}">
<div>Frequency: {{ $backup->frequency }}</div>
<div>Last backup: {{ data_get($backup->latest_log, 'status', 'No backup yet') }}</div>
<div>Number of backups to keep (locally): {{ $backup->number_of_backups_locally }}</div>
</a>
<div class="box">
<a class="flex flex-col"
href="{{ route('project.database.backup.execution', [...$parameters, 'backup_uuid' => $backup->uuid]) }}">
<div>Frequency: {{ $backup->frequency }}</div>
<div>Last backup: {{ data_get($backup->latest_log, 'status', 'No backup yet') }}</div>
<div>Number of backups to keep (locally): {{ $backup->number_of_backups_locally }}</div>
</a>
</div>
@else
<div @class([
'border-coollabs' =>
@@ -25,8 +27,8 @@
</div>
@if ($type === 'service-database' && $selectedBackup)
<div class="pt-10">
<livewire:project.database.backup-edit wire:key="{{ $selectedBackup->id }}" :backup="$selectedBackup" :s3s="$s3s"
:status="data_get($database, 'status')" />
<livewire:project.database.backup-edit wire:key="{{ $selectedBackup->id }}" :backup="$selectedBackup"
:s3s="$s3s" :status="data_get($database, 'status')" />
<h3 class="py-4">Executions</h3>
<livewire:project.database.backup-executions wire:keykey="{{ $selectedBackup->id }}" :backup="$selectedBackup"
:executions="$selectedBackup->executions" />

View File

@@ -16,18 +16,15 @@
</form>
<div class="flex gap-2">
<h2>Shared Variables</h2>
<x-slide-over>
<x-slot:title>New Shared Variable</x-slot:title>
<x-slot:content>
<livewire:project.shared.environment-variable.add />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Shared Variable">
<livewire:project.shared.environment-variable.add />
</x-modal-input>
</div>
<div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span
class="dark:text-warning text-coollabs">@{{ project.VARIABLENAME }}</span><x-helper
helper="More info <a class='dark:text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
<div class="pb-4 lg:flex lg:gap-1">
<div>You can use these variables anywhere with</div>
<div class=" dark:text-warning text-coollabs">@{{ project.VARIABLENAME }} </div>
<x-helper
helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
</div>
<div class="flex flex-col gap-2">
@forelse ($project->environment_variables->sort()->sortBy('real_value') as $env)

View File

@@ -44,18 +44,12 @@
</form>
<div class="flex gap-2 pt-10">
<h2>Shared Variables</h2>
<x-slide-over>
<x-slot:title>New Shared Variable</x-slot:title>
<x-slot:content>
<livewire:project.shared.environment-variable.add />
</x-slot:content>
<button @click="slideOverOpen=true"
class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Shared Variable">
<livewire:project.shared.environment-variable.add />
</x-modal-input>
</div>
<div class="flex items-center gap-2 pb-4">You can use these variables anywhere with <span class="dark:text-warning">@{{environment.VARIABLENAME}}</span><x-helper
helper="More info <a class='dark:text-white underline' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
</div>
<div class="flex flex-col gap-2">
@forelse ($environment->environment_variables->sort()->sortBy('real_value') as $env)

View File

@@ -17,7 +17,7 @@
{{ $project->description }}</div>
</a>
<div class="flex items-center">
<a class="mx-4 font-bold hover:underline dark:hover:no-underline"
<a class="mx-4 font-bold hover:underline"
href="{{ route('project.edit', ['project_uuid' => data_get($project, 'uuid')]) }}">
Settings
</a>

View File

@@ -75,17 +75,14 @@
<div class="text-xs">{{ $application->status }}</div>
</div>
<div class="flex items-center px-4">
<a class="flex flex-col flex-1 group-hover:dark:text-white hover:no-underline"
<a class="mx-4 font-bold hover:underline"
href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $application->uuid]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
</svg>
Settings
</a>
<x-modal-confirmation action="restartApplication({{ $application->id }})"
isErrorButton buttonTitle="Restart">
This application will be unavailable during the restart. <br>Please think again.
</x-modal-confirmation>
</div>
</div>
</div>
@@ -100,8 +97,6 @@
$database->status)->contains(['restarting']),
'flex gap-2 box-without-bg bg-coolgray-100 hover:text-neutral-300 group',
])>
<div class="flex flex-row w-full">
<div class="flex flex-col flex-1">
<div class="pb-2">
@@ -121,17 +116,15 @@
<div class="text-xs">{{ $database->status }}</div>
</div>
<div class="flex items-center px-4">
<a class="flex flex-col flex-1 group-hover:dark:text-white hover:no-underline"
<a class="mx-4 font-bold hover:underline"
href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $database->uuid]) }}">
<svg xmlns="http://www.w3.org/2000/svg" class="icon hover:dark:text-warning"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
</svg>
Settings
</a>
<x-modal-confirmation action="restartDatabase({{ $database->id }})"
isErrorButton buttonTitle="Restart">
This database will be unavailable during the restart. <br>Please think again.
</x-modal-confirmation>
</div>
</div>
</div>

View File

@@ -55,14 +55,9 @@
<div x-cloak x-show="activeTab === 'backups'">
<div class="flex gap-2 ">
<h2 class="pb-4">Scheduled Backups</h2>
<x-slide-over>
<x-slot:title>New Scheduled Backup</x-slot:title>
<x-slot:content>
<livewire:project.database.create-scheduled-backup :database="$serviceDatabase" :s3s="$s3s" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Scheduled Backup">
<livewire:project.database.create-scheduled-backup :database="$serviceDatabase" :s3s="$s3s" />
</x-modal-input>
</div>
<livewire:project.database.scheduled-backups :database="$serviceDatabase" />
</div>

View File

@@ -3,13 +3,9 @@
<div class="flex gap-2">
<h2>Service Stack</h2>
<x-forms.button type="submit">Save</x-forms.button>
<x-slide-over closeWithX fullScreen>
<x-slot:title>Docker Compose</x-slot:title>
<x-slot:content>
<livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
</x-slot:content>
<button @click.prevent="slideOverOpen=true" class="button">Edit Compose File</button>
</x-slide-over>
<x-modal-input buttonTitle="Edit Compose File" title="Docker Compose">
<livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
</x-modal-input>
</div>
<div>Configuration</div>
</div>
@@ -19,7 +15,7 @@
</div>
<div class="w-96">
<x-forms.checkbox instantSave id="service.connect_to_docker_network" label="Connect To Predefined Network"
helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='dark:text-white underline' target='_blank' href='https://coolify.io/docs/docker/compose#connect-to-predefined-networks'>this</a>." />
helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/docker/compose#connect-to-predefined-networks'>this</a>." />
</div>
@if ($fields)
<div>

View File

@@ -11,13 +11,9 @@
helper="For Preview Deployments, storage has a <span class='text-helper'>-pr-#PRNumber</span> in their
volume
name, example: <span class='text-helper'>-pr-1</span>" />
<x-slide-over>
<x-slot:title>New Persistent Storage</x-slot:title>
<x-slot:content>
<livewire:project.shared.storages.add :uuid="$resource->uuid" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+ Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Persistent Storage">
<livewire:project.shared.storages.add :uuid="$resource->uuid" />
</x-modal-input>
</div>
<div class="pb-4">Persistent storage to preserve data between deployments.</div>
@if ($resource->persistentStorages()->get()->count() === 0 && $resource->fileStorages()->get()->count() == 0)

View File

@@ -1,5 +1,5 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
<x-forms.input autofocus placeholder="NODE_ENV" id="key" label="Name" required />
<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 />

View File

@@ -3,13 +3,9 @@
<div class="flex items-center gap-2">
<h2>Environment Variables</h2>
@if ($resource->type() !== 'service')
<x-slide-over>
<x-slot:title>New Environment Variable</x-slot:title>
<x-slot:content>
<livewire:project.shared.environment-variable.add />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+ Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Environment Variable">
<livewire:project.shared.environment-variable.add />
</x-modal-input>
@endif
<x-forms.button
wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>

View File

@@ -1,5 +1,5 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<x-forms.input placeholder="Run cron" id="name" label="Name" />
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
<x-forms.input autofocus placeholder="Run cron" id="name" label="Name" />
<x-forms.input placeholder="php artisan schedule:run" id="command" label="Command" />
<x-forms.input placeholder="0 0 * * * or daily" id="frequency" label="Frequency" />
<x-forms.input placeholder="php" id="container"

View File

@@ -1,28 +1,23 @@
<div>
<div class="flex gap-2">
<h2>Scheduled Tasks</h2>
<x-slide-over>
<x-slot:title>New Scheduled Task</x-slot:title>
<x-slot:content>
<livewire:project.shared.scheduled-task.add />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+ Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Scheduled Task">
<livewire:project.shared.scheduled-task.add />
</x-modal-input>
</div>
<div class="flex flex-wrap gap-2 pt-4">
@forelse($resource->scheduled_tasks as $task)
<a class="flex flex-col box"
@if ($resource->type() == 'application')
href="{{ route('project.application.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}">
@if ($resource->type() == 'application') href="{{ route('project.application.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}">
@elseif ($resource->type() == 'service')
href="{{ route('project.service.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}">
@endif
<div><span class="font-bold dark:text-warning">{{ $task->name }}<span></div>
<div>Frequency: {{ $task->frequency }}</div>
<div>Last run: {{ data_get($task->latest_log, 'status', 'No runs yet') }}</div>
</a>
@empty
<div>No scheduled tasks configured.</div>
@endforelse
href="{{ route('project.service.scheduled-tasks', [...$parameters, 'task_uuid' => $task->uuid]) }}"> @endif
<div><span class="font-bold dark:text-warning">{{ $task->name }}<span>
</div>
<div>Frequency: {{ $task->frequency }}</div>
<div>Last run: {{ data_get($task->latest_log, 'status', 'No runs yet') }}</div>
</a>
@empty
<div>No scheduled tasks configured.</div>
@endforelse
</div>
</div>

View File

@@ -1,4 +1,4 @@
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
<form class="flex flex-col w-full gap-2 rounded" wire:submit='submit'>
@if ($isSwarm)
<h5>Swarm Mode detected: You need to set a shared volume (EFS/NFS/etc) on all the worker nodes if you would
like to use a persistent volumes.</h5>

View File

@@ -1,14 +1,9 @@
<div>
<div class="flex items-center gap-2">
<h1>Environments</h1>
<x-slide-over>
<x-slot:title>New Environment</x-slot:title>
<x-slot:content>
<livewire:project.add-environment :project="$project" />
</x-slot:content>
<button @click="slideOverOpen=true" class="button">+
Add</button>
</x-slide-over>
<x-modal-input buttonTitle="+ Add" title="New Environment">
<livewire:project.add-environment :project="$project" />
</x-modal-input>
<livewire:project.delete-project :disabled="$project->resource_count() > 0" :project_id="$project->id" />
</div>
<div class="text-xs truncate subtitle lg:text-sm">{{ $project->name }}.</div>
@@ -23,7 +18,7 @@
{{ $environment->description }}</div>
</a>
<div class="flex items-center">
<a class="mx-4 font-bold hover:underline dark:hover:no-underline"
<a class="mx-4 font-bold hover:underline"
href="{{ route('project.environment.edit', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => $environment->name]) }}">
Settings
</a>