feat: lazy load stuffs + tell user if compose based deployments have missing envs
This commit is contained in:
Andras Bacsai
13
resources/views/components/page-loading.blade.php
Normal file
13
resources/views/components/page-loading.blade.php
Normal file
@@ -0,0 +1,13 @@
|
||||
@props(['text' => "Loading..."])
|
||||
<div class="inline-flex items-center justify-center" {{ $attributes }}>
|
||||
@if (isset($text))
|
||||
<div>{{ $text }}</div>
|
||||
@endif
|
||||
<svg class="w-4 h-4 mx-1 ml-3 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>
|
||||
</div>
|
||||
@@ -83,48 +83,48 @@
|
||||
<livewire:project.application.general :application="$application" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'swarm'" class="h-full">
|
||||
<livewire:project.application.swarm :application="$application" />
|
||||
<livewire:project.application.swarm :application="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'advanced'" class="h-full">
|
||||
<livewire:project.application.advanced :application="$application" />
|
||||
<livewire:project.application.advanced :application="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'environment-variables'">
|
||||
<livewire:project.shared.environment-variable.all :resource="$application" />
|
||||
<livewire:project.shared.environment-variable.all :resource="$application" lazy />
|
||||
</div>
|
||||
@if ($application->git_based())
|
||||
<div x-cloak x-show="activeTab === 'source'">
|
||||
<livewire:project.application.source :application="$application" />
|
||||
<livewire:project.application.source :application="$application" lazy />
|
||||
</div>
|
||||
@endif
|
||||
<div x-cloak x-show="activeTab === 'servers'">
|
||||
<livewire:project.shared.destination :resource="$application" :servers="$servers" />
|
||||
<livewire:project.shared.destination :resource="$application" :servers="$servers" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'storages'">
|
||||
<livewire:project.service.storage :resource="$application" />
|
||||
<livewire:project.service.storage :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'webhooks'">
|
||||
<livewire:project.shared.webhooks :resource="$application" />
|
||||
<livewire:project.shared.webhooks :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'previews'">
|
||||
<livewire:project.application.previews :application="$application" />
|
||||
<livewire:project.application.previews :application="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'health'">
|
||||
<livewire:project.shared.health-checks :resource="$application" />
|
||||
<livewire:project.shared.health-checks :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'rollback'">
|
||||
<livewire:project.application.rollback :application="$application" />
|
||||
<livewire:project.application.rollback :application="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'resource-limits'">
|
||||
<livewire:project.shared.resource-limits :resource="$application" />
|
||||
<livewire:project.shared.resource-limits :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'scheduled-tasks'">
|
||||
<livewire:project.shared.scheduled-task.all :resource="$application" />
|
||||
<livewire:project.shared.scheduled-task.all :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'resource-operations'">
|
||||
<livewire:project.shared.resource-operations :resource="$application" />
|
||||
<livewire:project.shared.resource-operations :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'tags'">
|
||||
<livewire:project.shared.tags :resource="$application" />
|
||||
<livewire:project.shared.tags :resource="$application" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'danger'">
|
||||
<livewire:project.shared.danger :resource="$application" />
|
||||
|
||||
@@ -159,29 +159,29 @@
|
||||
<span class="dark:text-warning">Please modify storage layout in your Docker Compose file.</span>
|
||||
@foreach ($applications as $application)
|
||||
<livewire:project.service.storage wire:key="application-{{ $application->id }}"
|
||||
:resource="$application" />
|
||||
:resource="$application" lazy />
|
||||
@endforeach
|
||||
@foreach ($databases as $database)
|
||||
<livewire:project.service.storage wire:key="database-{{ $database->id }}" :resource="$database" />
|
||||
<livewire:project.service.storage wire:key="database-{{ $database->id }}" :resource="$database" lazy />
|
||||
@endforeach
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'webhooks'">
|
||||
<livewire:project.shared.webhooks :resource="$service" />
|
||||
<livewire:project.shared.webhooks :resource="$service" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'logs'">
|
||||
<livewire:project.shared.logs :resource="$service" />
|
||||
<livewire:project.shared.logs :resource="$service" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'execute-command'">
|
||||
<livewire:project.shared.execute-container-command :resource="$service" />
|
||||
<livewire:project.shared.execute-container-command :resource="$service" />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'environment-variables'">
|
||||
<livewire:project.shared.environment-variable.all :resource="$service" />
|
||||
<livewire:project.shared.environment-variable.all :resource="$service" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'resource-operations'">
|
||||
<livewire:project.shared.resource-operations :resource="$service" />
|
||||
<livewire:project.shared.resource-operations :resource="$service" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'tags'">
|
||||
<livewire:project.shared.tags :resource="$service" />
|
||||
<livewire:project.shared.tags :resource="$service" lazy />
|
||||
</div>
|
||||
<div x-cloak x-show="activeTab === 'danger'">
|
||||
<livewire:project.shared.danger :resource="$service" />
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>
|
||||
</div>
|
||||
<div>Environment variables (secrets) for this resource.</div>
|
||||
@if ($resource->type() === 'service')
|
||||
@if ($resource->type() === 'service' || $resource?->build_pack === 'dockercompose')
|
||||
<div>Hardcoded variables are not shown here.</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<div>
|
||||
<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">
|
||||
@if (!$env->isFoundInCompose)
|
||||
<div class="flex items-center justify-center gap-2 dark:text-warning text-coollabs"> <svg
|
||||
class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor"
|
||||
d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
|
||||
</path>
|
||||
</svg>This variable is not found in the compose file, so it won't be used.</div>
|
||||
@endif
|
||||
@if ($isLocked)
|
||||
<div class="flex flex-1 w-full gap-2">
|
||||
<x-forms.input disabled id="env.key" />
|
||||
@@ -49,7 +58,7 @@
|
||||
helper="This means that when you use $VARIABLES, 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 form another value. In this case, you should set this to true."
|
||||
label="Is Literal?" />
|
||||
@else
|
||||
@if ($type === 'team' || $type === 'environment' || $type === 'project')
|
||||
@if ($isSharedVariable)
|
||||
<x-forms.checkbox instantSave id="env.is_multiline" label="Is Multiline?" />
|
||||
@else
|
||||
<x-forms.checkbox instantSave id="env.is_build_time" label="Build Variable?" />
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
<div>
|
||||
<h2>Tags</h2>
|
||||
<div class="flex gap-2 pt-4">
|
||||
@forelse ($this->resource->tags as $tagId => $tag)
|
||||
<div class="px-2 py-1 text-center rounded select-none dark:text-white w-fit bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200">
|
||||
{{ $tag->name }}
|
||||
<svg wire:click="deleteTag('{{ $tag->id }}')"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
class="inline-block w-3 h-3 rounded cursor-pointer stroke-current hover:bg-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</div>
|
||||
@empty
|
||||
<div class="py-1">No tags yet</div>
|
||||
@endforelse
|
||||
@if (data_get($this->resource, 'tags'))
|
||||
@forelse (data_get($this->resource,'tags') as $tagId => $tag)
|
||||
<div
|
||||
class="px-2 py-1 text-center rounded select-none dark:text-white w-fit bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200">
|
||||
{{ $tag->name }}
|
||||
<svg wire:click="deleteTag('{{ $tag->id }}')" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
class="inline-block w-3 h-3 rounded cursor-pointer stroke-current hover:bg-red-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
@empty
|
||||
<div class="py-1">No tags yet</div>
|
||||
@endforelse
|
||||
@endif
|
||||
</div>
|
||||
<form wire:submit='submit' class="flex items-end gap-2 pt-4">
|
||||
<div class="w-64">
|
||||
|
||||
Reference in New Issue
Block a user