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

wip: ui for services

Browse Source
This commit is contained in:
Andras Bacsai
2023-09-22 11:23:49 +02:00
parent 4ae7e46e81
commit 53d1fa0331
32 changed files with 575 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/views/components/applications/links.blade.php
View File

@@ -1,18 +1,20 @@
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Links
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Open Application
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block">
<ul tabindex="0" class="relative -ml-24 text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
<li>
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="{{ $application->gitBranchLocation }}">
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
Git Repository
</a>
</li>
@if (data_get($application, 'gitBrancLocation'))
<li>
<a target="_blank"
class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
href="{{ $application->gitBranchLocation }}">
<x-git-icon git="{{ $application->source?->getMorphClass() }}" />
Git Repository
</a>
</li>
@endif
@if (data_get($application, 'fqdn'))
@foreach (Str::of(data_get($application, 'fqdn'))->explode(',') as $fqdn)
<li>
@@ -31,7 +33,7 @@
</li>
@endforeach
@endif
@if (data_get($application, 'previews')->count() > 0)
@if (data_get($application, 'previews', collect([]))->count() > 0)
@foreach (data_get($application, 'previews') as $preview)
@if (data_get($preview, 'fqdn'))
<li>

28
resources/views/components/services/links.blade.php Normal file
View File

@@ -0,0 +1,28 @@
<div class="group">
<label tabindex="0" class="flex items-center gap-2 cursor-pointer hover:text-white"> Open Application
<x-chevron-down />
</label>
<div class="absolute hidden group-hover:block">
<ul tabindex="0" class="relative -ml-24 text-xs text-white normal-case rounded min-w-max menu bg-coolgray-200">
@if ($links->count() > 0)
@foreach ($links as $link)
<li>
<a class="text-xs text-white rounded-none hover:no-underline hover:bg-coollabs hover:text-white"
target="_blank" href="{{ $link }}">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 15l6 -6" />
<path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
<path
d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
</svg>{{ $link }}
</a>
</li>
@endforeach
@endif
</ul>
</div>
</div>

32
resources/views/components/services/navbar.blade.php
View File

@@ -1,13 +1,11 @@
<div class="navbar-main">
<a class="{{ request()->routeIs('project.service') ? 'text-white' : '' }}"
href="{{ route('project.service', $parameters) }}">
<button>Configuration</button>
href="{{ route('project.service', [...$parameters, 'service_name' => null]) }}">
<button>Service</button>
</a>
<x-services.links :service="$service" />
<div class="flex-1"></div>
{{-- <x-applications.links :application="$application" />
<x-applications.advanced :application="$application" /> --}}
@if (serviceStatus($service) !== 'exited')
@if (serviceStatus($service) === 'running')
<button wire:click='stop' class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -17,7 +15,7 @@
</svg>
Stop
</button>
@else
@elseif(serviceStatus($service) === 'exited')
<button wire:click='deploy' onclick="startService.showModal()"
class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-warning" viewBox="0 0 24 24" stroke-width="1.5"
@@ -27,5 +25,25 @@
</svg>
Deploy
</button>
@elseif (serviceStatus($service) === 'degraded')
<button wire:click='deploy' onclick="startService.showModal()"
class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg class="w-5 h-5 text-warning" 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="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
<path d="M20 4v5h-5" />
</g>
</svg>
Restart Degraded Services
</button>
<button wire:click='stop' class="flex items-center gap-2 cursor-pointer hover:text-white text-neutral-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
<path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"></path>
</svg>
Stop
</button>
@endif
</div>

14
resources/views/livewire/project/service/application.blade.php Normal file
View File

@@ -0,0 +1,14 @@
<form wire:submit.prevent='submit'>
<div class="flex gap-2 pb-4">
@if ($application->human_name)
<h2>{{ Str::headline($application->human_name) }}</h2>
@else
<h2>{{ Str::headline($application->name) }}</h2>
@endif
<x-forms.button type="submit">Save</x-forms.button>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="application.human_name" placeholder="Name"></x-forms.input>
<x-forms.input label="FQDN" required id="application.fqdn"></x-forms.input>
</div>
</form>

13
resources/views/livewire/project/service/database.blade.php Normal file
View File

@@ -0,0 +1,13 @@
<form wire:submit.prevent='submit'>
<div class="flex gap-2 pb-4">
@if ($database->human_name)
<h2>{{ Str::headline($database->human_name) }}</h2>
@else
<h2>{{ Str::headline($database->name) }}</h2>
@endif
<x-forms.button type="submit">Save</x-forms.button>
</div>
<div class="flex gap-2">
<x-forms.input label="Name" id="database.human_name" placeholder="Name"></x-forms.input>
</div>
</form>

104
resources/views/livewire/project/service/index.blade.php
View File

@@ -1,25 +1,79 @@
<div x-init="$wire.check_status">
<livewire:project.service.modal />
<h1>Configuration</h1>
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
<x-services.navbar :service="$service" :parameters="$parameters" />
<h3>Applications</h3>
@foreach ($service->applications as $application)
<form class="box" wire:submit.prevent='submit'>
<p>{{ $application->name }}</p>
<x-forms.input id="services.{{ $application->name }}.fqdn"></x-forms.input>
<x-forms.button type="submit">Save</x-forms.button>
</form>
@endforeach
@if ($service->databases->count() > 0)
<h3>Databases</h3>
@endif
@foreach ($service->databases as $database)
<p>{{ $database->name }}</p>
<p>{{ $database->status }}</p>
@endforeach
<h3>Variables</h3>
@foreach ($service->environment_variables as $variable)
<p>{{ $variable->key }}={{ $variable->value }}</p>
@endforeach
</div>
<div x-data="{ raw: true, activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex h-full pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'service-stack' && 'text-white'"
@click.prevent="activeTab = 'service-stack'; window.location.hash = 'service-stack'" href="#">Service Stack</a>
<a :class="activeTab === 'compose' && 'text-white'"
@click.prevent="activeTab = 'compose'; window.location.hash = 'compose'" href="#">Compose File</a>
<a :class="activeTab === 'environment-variables' && 'text-white'"
@click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
href="#">Environment
Variables</a>
<a :class="activeTab === 'danger' && 'text-white'"
@click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
</a>
</div>
<div class="w-full pl-8">
<div x-cloak x-show="activeTab === 'service-stack'">
<h2 class="pb-4"> Service Stack </h2>
<div class="grid grid-cols-1 gap-2">
@foreach ($service->applications as $application)
<a class="flex flex-col justify-center box"
href="{{ route('project.service.show', [...$parameters, 'service_name' => $application->name]) }}">
@if ($application->human_name)
{{ Str::headline($application->human_name) }}
@else
{{ Str::headline($application->name) }}
@endif
@if ($application->fqdn)
<span class="text-xs">{{ $application->fqdn }}</span>
@endif
</a>
@endforeach
@foreach ($service->databases as $database)
<a class="justify-center box"
href="{{ route('project.service.show', [...$parameters, 'service_name' => $database->name]) }}">
@if ($database->human_name)
{{ Str::headline($database->human_name) }}
@else
{{ Str::headline($database->name) }}
@endif
</a>
@endforeach
</div>
</div>
<div x-cloak x-show="activeTab === 'compose'">
<div x-cloak x-show="activeTab === 'compose'">
<div class="flex gap-2 pb-4">
<h2>Docker Compose</h2>
<div x-cloak x-show="raw">
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable</x-forms.button>
<x-forms.button wire:click='save'>Save</x-forms.button>
</div>
<div x-cloak x-show="raw === false">
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Source</x-forms.button>
<x-forms.button disabled wire:click='save'>Save</x-forms.button>
</div>
</div>
<div x-cloak x-show="raw">
<x-forms.textarea rows="20" id="service.docker_compose_raw">
</x-forms.textarea>
</div>
<div x-cloak x-show="raw === false">
<x-forms.textarea readonly rows="20" id="service.docker_compose">
</x-forms.textarea>
</div>
</div>
</div>
<div x-cloak x-show="activeTab === 'environment-variables'">
<div x-cloak x-show="activeTab === 'environment-variables'">
<livewire:project.shared.environment-variable.all :resource="$service" />
</div>
</div>
<div x-cloak x-show="activeTab === 'danger'">
<livewire:project.shared.danger :resource="$service" />
</div>
</div>
</div>

6
resources/views/livewire/project/service/navbar.blade.php Normal file
View File

@@ -0,0 +1,6 @@
<div x-init="$wire.check_status">
<livewire:project.service.modal />
<h1>Configuration</h1>
<x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
<x-services.navbar :service="$service" :parameters="$parameters" />
</div>

30
resources/views/livewire/project/service/show.blade.php Normal file
View File

@@ -0,0 +1,30 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex h-full pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<a :class="activeTab === 'general' && 'text-white'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
<a :class="activeTab === 'storages' && 'text-white'"
@click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
</a>
</div>
<div class="w-full pl-8">
@isset($serviceApplication)
<div x-cloak x-show="activeTab === 'general'" class="h-full">
<livewire:project.service.application :application="$serviceApplication" />
</div>
<div x-cloak x-show="activeTab === 'storages'">
<livewire:project.shared.storages.all :resource="$serviceApplication" />
</div>
@endisset
@isset($serviceDatabase)
<div x-cloak x-show="activeTab === 'general'" class="h-full">
<livewire:project.service.database :database="$serviceDatabase" />
</div>
<div x-cloak x-show="activeTab === 'storages'">
<livewire:project.shared.storages.all :resource="$serviceDatabase" />
</div>
@endisset
</div>
</div>
</div>

6
resources/views/livewire/project/shared/environment-variable/all.blade.php
View File

@@ -12,7 +12,7 @@
@if ($view === 'normal')
@forelse ($resource->environment_variables as $env)
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
:env="$env" />
:env="$env" :type="$resource->type()" />
@empty
<div class="text-neutral-500">No environment variables found.</div>
@endforelse
@@ -23,12 +23,12 @@
</div>
@foreach ($resource->environment_variables_preview as $env)
<livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
:env="$env" />
:env="$env" :type="$resource->type()" />
@endforeach
@endif
@else
<form wire:submit.prevent='saveVariables(false)' class="flex flex-col gap-2">
<x-forms.textarea rows=5 class="whitespace-pre-wrap" label="Environment Variables"
<x-forms.textarea rows=5 class="whitespace-pre-wrap"
id="variables"></x-forms.textarea>
<x-forms.button type="submit" class="btn btn-primary">Save</x-forms.button>
</form>

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

@@ -8,7 +8,9 @@
<form wire:submit.prevent='submit' class="flex flex-col items-center gap-2 xl:flex-row">
<x-forms.input id="env.key" />
<x-forms.input type="password" id="env.value" />
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
@if ($type !== 'service')
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
@endif
<div class="flex gap-2">
<x-forms.button type="submit">
Update

17
resources/views/livewire/project/shared/storages/all.blade.php
View File

@@ -2,18 +2,25 @@
<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
@if ($resource->type() !== 'service')
<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>" />
<x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
<livewire:project.shared.storages.add />
<x-forms.button class="btn" onclick="newStorage.showModal()">+ Add</x-forms.button>
<livewire:project.shared.storages.add />
@endif
</div>
<div>Persistent storage to preserve data between deployments.</div>
</div>
<div class="flex flex-col gap-2 py-4">
@forelse ($resource->persistentStorages as $storage)
<livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
@if ($resource->type() === 'service')
<livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage"
isReadOnly='true' />
@else
<livewire:project.shared.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
@endif
@empty
<div class="text-neutral-500">No storages found.</div>
@endforelse

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

@@ -6,8 +6,11 @@
reversible. <br>Please think again.</p>
</x-slot:modalBody>
</x-modal>
<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
@if ($storage->is_readonly)
@if ($isReadOnly)
<span class="text-warning">Please modify storage layout in your Compose file.</span>
@endif
<form wire:submit.prevent='submit' class="flex flex-col gap-2 pt-4 xl:items-end xl:flex-row">
@if ($isReadOnly)
<x-forms.input id="storage.name" label="Name" required readonly />
<x-forms.input id="storage.host_path" label="Source Path" readonly />
<x-forms.input id="storage.mount_path" label="Destination Path" required readonly />
@@ -15,7 +18,7 @@
<x-forms.button type="submit" disabled>
Update
</x-forms.button>
<x-forms.button isError isModal modalId="{{ $modalId }}" disabled>
<x-forms.button isError isModal modalId="{{ $modalId }}">
Delete
</x-forms.button>
</div>