improve application view

This commit is contained in:
Andras Bacsai
2024-12-16 14:11:45 +01:00
parent 62574941df
commit e76817d401
6 changed files with 110 additions and 114 deletions

View File

@@ -8,14 +8,21 @@ use Livewire\Component;
class Configuration extends Component
{
public $currentRoute;
public Application $application;
public $project;
public $environment;
public $servers;
protected $listeners = ['buildPackUpdated' => '$refresh'];
public function mount()
{
$this->currentRoute = request()->route()->getName();
$project = currentTeam()
->projects()
->select('id', 'uuid', 'team_id')
@@ -30,6 +37,8 @@ class Configuration extends Component
->where('uuid', request()->route('application_uuid'))
->firstOrFail();
$this->project = $project;
$this->environment = $environment;
$this->application = $application;
if ($application->destination && $application->destination->server) {
$mainServer = $application->destination->server;

View File

@@ -5,7 +5,6 @@ namespace App\Livewire\Project\Shared\EnvironmentVariable;
use App\Models\EnvironmentVariable as ModelsEnvironmentVariable;
use App\Models\SharedEnvironmentVariable;
use Livewire\Component;
use Visus\Cuid2\Cuid2;
class Show extends Component
{
@@ -13,8 +12,6 @@ class Show extends Component
public ModelsEnvironmentVariable|SharedEnvironmentVariable $env;
public ?string $modalId = null;
public bool $isDisabled = false;
public bool $isLocked = false;
@@ -61,7 +58,6 @@ class Show extends Component
if ($this->env->getMorphClass() === \App\Models\SharedEnvironmentVariable::class) {
$this->isSharedVariable = true;
}
$this->modalId = new Cuid2;
$this->parameters = get_route_parameters();
$this->checkEnvs();
}

View File

@@ -39,7 +39,7 @@ location ~ \.php$ {
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_buffers 8 8k;
fastcgi_buffer_size 8k;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_read_timeout 99;
}

View File

@@ -39,7 +39,7 @@ location ~ \.php$ {
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_buffers 8 8k;
fastcgi_buffer_size 8k;
fastcgi_buffers 16 16k;
fastcgi_buffer_size 32k;
fastcgi_read_timeout 99;
}

View File

@@ -5,34 +5,36 @@
<h1>Configuration</h1>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex flex-col h-full gap-8 pt-6 sm:flex-row">
<div class="flex flex-col items-start gap-2 min-w-fit">
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.application.configuration', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>General</a>
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.application.advanced', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Advanced</a>
@if ($application->destination->server->isSwarm())
<a class="menu-item" :class="activeTab === 'swarm' && 'menu-item-active'"
@click.prevent="activeTab = 'swarm'; window.location.hash = 'swarm'" href="#">Swarm
<a class="menu-item"
wire:current.exact="menu-item-active
href="{{ route('project.application.swarm', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Swarm
Configuration</a>
@endif
<a class="menu-item" :class="activeTab === 'advanced' && 'menu-item-active'"
@click.prevent="activeTab = 'advanced'; window.location.hash = 'advanced'" href="#">Advanced</a>
@if ($application->build_pack !== 'static')
<a class="menu-item" :class="activeTab === 'environment-variables' && 'menu-item-active'"
@click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
href="#">Environment
Variables</a>
@endif
@if ($application->build_pack !== 'static')
<a class="menu-item" :class="activeTab === 'storages' && 'menu-item-active'"
@click.prevent="activeTab = 'storages'; window.location.hash = 'storages'" href="#">Storages
</a>
@endif
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.application.environment-variables', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Environment Variables</a>
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.application.persistent-storage', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Persistent Storage</a>
@if ($application->git_based())
<a class="menu-item" :class="activeTab === 'source' && 'menu-item-active'"
@click.prevent="activeTab = 'source'; window.location.hash = 'source'" href="#">Source</a>
<a class='menu-item' wire:current.exact="menu-item-active"
href="{{ route('project.application.source', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Git Source</a>
@endif
<a class="menu-item" :class="activeTab === 'servers' && 'menu-item-active'" class="flex items-center gap-2"
@click.prevent="activeTab = 'servers'; window.location.hash = 'servers'" href="#">Servers
<a class="menu-item flex items-center gap-2" wire:current.exact="menu-item-active"
href="{{ route('project.application.servers', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Servers
@if (str($application->status)->contains('degraded'))
<span title="Some servers are unavailable">
<svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
@@ -50,102 +52,74 @@
</span>
@endif
</a>
<a class="menu-item" :class="activeTab === 'scheduled-tasks' && 'menu-item-active'"
@click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
href="#">Scheduled Tasks
</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Scheduled Tasks</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.webhooks', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Webhooks</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.preview-deployments', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Preview Deployments</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.healthcheck', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Healthcheck</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.rollback', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Rollback</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.resource-limits', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Resource Limits</a>
<a class="menu-item" :class="activeTab === 'webhooks' && 'menu-item-active'"
@click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
</a>
@if ($application->git_based())
<a class="menu-item" :class="activeTab === 'previews' && 'menu-item-active'"
@click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Preview
Deployments
</a>
@endif
@if ($application->build_pack !== 'static' && $application->build_pack !== 'dockercompose')
<a class="menu-item" :class="activeTab === 'health' && 'menu-item-active'"
@click.prevent="activeTab = 'health'; window.location.hash = 'health'" href="#">Healthchecks
</a>
@endif
<a class="menu-item" :class="activeTab === 'rollback' && 'menu-item-active'"
@click.prevent="activeTab = 'rollback'; window.location.hash = 'rollback'" href="#">Rollback
</a>
@if ($application->build_pack !== 'dockercompose')
<a class="menu-item" :class="activeTab === 'resource-limits' && 'menu-item-active'"
@click.prevent="activeTab = 'resource-limits'; window.location.hash = 'resource-limits'"
href="#">Resource Limits
</a>
@endif
<a class="menu-item" :class="activeTab === 'resource-operations' && 'menu-item-active'"
@click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
href="#">Resource Operations
</a>
<a class="menu-item" :class="activeTab === 'metrics' && 'menu-item-active'"
@click.prevent="activeTab = 'metrics'; window.location.hash = 'metrics'" href="#">Metrics
</a>
<a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
@click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
</a>
<a class="menu-item" :class="activeTab === 'danger' && 'menu-item-active'"
@click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.resource-operations', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Resource Operations</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.metrics', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Metrics</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.tags', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Tags</a>
<a class="menu-item" wire:current.exact="menu-item-active"
href="{{ route('project.application.danger', ['project_uuid' => $project->uuid, 'environment_name' => $environment->name, 'application_uuid' => $application->uuid]) }}"
wire:navigate>Danger Zone</a>
</div>
<div class="w-full">
<div x-cloak x-show="activeTab === 'general'" class="h-full">
@if (request()->route()->getName() === 'project.application.configuration')
<livewire:project.application.general :application="$application" />
</div>
<div x-cloak x-show="activeTab === 'swarm'" class="h-full">
@elseif (request()->route()->getName() === 'project.application.swarm' && $application->destination->server->isSwarm())
<livewire:project.application.swarm :application="$application" />
</div>
<div x-cloak x-show="activeTab === 'advanced'" class="h-full">
@elseif (request()->route()->getName() === 'project.application.advanced')
<livewire:project.application.advanced :application="$application" />
</div>
<div x-cloak x-show="activeTab === 'environment-variables'">
@elseif (request()->route()->getName() === 'project.application.environment-variables')
<livewire:project.shared.environment-variable.all :resource="$application" />
</div>
@if ($application->git_based())
<div x-cloak x-show="activeTab === 'source'">
@elseif (request()->route()->getName() === 'project.application.persistent-storage')
<livewire:project.service.storage :resource="$application" />
@elseif (request()->route()->getName() === 'project.application.source' && $application->git_based())
<livewire:project.application.source :application="$application" />
</div>
@endif
<div x-cloak x-show="activeTab === 'servers'">
@elseif (request()->route()->getName() === 'project.application.servers')
<livewire:project.shared.destination :resource="$application" :servers="$servers" />
</div>
<div x-cloak x-show="activeTab === 'storages'">
<livewire:project.service.storage :resource="$application" lazy />
</div>
<div x-cloak x-show="activeTab === 'webhooks'">
<livewire:project.shared.webhooks :resource="$application" lazy />
</div>
<div x-cloak x-show="activeTab === 'previews'">
<livewire:project.application.previews :application="$application" />
</div>
<div x-cloak x-show="activeTab === 'health'">
<livewire:project.shared.health-checks :resource="$application" />
</div>
<div x-cloak x-show="activeTab === 'rollback'">
<livewire:project.application.rollback :application="$application" />
</div>
<div x-cloak x-show="activeTab === 'resource-limits'">
<livewire:project.shared.resource-limits :resource="$application" />
</div>
<div x-cloak x-show="activeTab === 'scheduled-tasks'">
@elseif (request()->route()->getName() === 'project.application.scheduled-tasks.show')
<livewire:project.shared.scheduled-task.all :resource="$application" />
</div>
<div x-cloak x-show="activeTab === 'resource-operations'">
@elseif (request()->route()->getName() === 'project.application.webhooks')
<livewire:project.shared.webhooks :resource="$application" />
@elseif (request()->route()->getName() === 'project.application.preview-deployments')
<livewire:project.application.previews :application="$application" />
@elseif (request()->route()->getName() === 'project.application.healthcheck')
<livewire:project.shared.health-checks :resource="$application" />
@elseif (request()->route()->getName() === 'project.application.rollback')
<livewire:project.application.rollback :application="$application" />
@elseif (request()->route()->getName() === 'project.application.resource-limits')
<livewire:project.shared.resource-limits :resource="$application" />
@elseif (request()->route()->getName() === 'project.application.resource-operations')
<livewire:project.shared.resource-operations :resource="$application" />
</div>
<div x-cloak x-show="activeTab === 'metrics'">
@elseif (request()->route()->getName() === 'project.application.metrics')
<livewire:project.shared.metrics :resource="$application" />
</div>
<div x-cloak x-show="activeTab === 'tags'">
<livewire:project.shared.tags :resource="$application" lazy />
</div>
<div x-cloak x-show="activeTab === 'danger'">
@elseif (request()->route()->getName() === 'project.application.tags')
<livewire:project.shared.tags :resource="$application" />
@elseif (request()->route()->getName() === 'project.application.danger')
<livewire:project.shared.danger :resource="$application" />
</div>
@endif
</div>
</div>
</div>

View File

@@ -183,6 +183,23 @@ Route::middleware(['auth', 'verified'])->group(function () {
});
Route::prefix('project/{project_uuid}/{environment_name}/application/{application_uuid}')->group(function () {
Route::get('/', ApplicationConfiguration::class)->name('project.application.configuration');
Route::get('/swarm', ApplicationConfiguration::class)->name('project.application.swarm');
Route::get('/advanced', ApplicationConfiguration::class)->name('project.application.advanced');
Route::get('/environment-variables', ApplicationConfiguration::class)->name('project.application.environment-variables');
Route::get('/persistent-storage', ApplicationConfiguration::class)->name('project.application.persistent-storage');
Route::get('/source', ApplicationConfiguration::class)->name('project.application.source');
Route::get('/servers', ApplicationConfiguration::class)->name('project.application.servers');
Route::get('/scheduled-tasks', ApplicationConfiguration::class)->name('project.application.scheduled-tasks.show');
Route::get('/webhooks', ApplicationConfiguration::class)->name('project.application.webhooks');
Route::get('/preview-deployments', ApplicationConfiguration::class)->name('project.application.preview-deployments');
Route::get('/healthcheck', ApplicationConfiguration::class)->name('project.application.healthcheck');
Route::get('/rollback', ApplicationConfiguration::class)->name('project.application.rollback');
Route::get('/resource-limits', ApplicationConfiguration::class)->name('project.application.resource-limits');
Route::get('/resource-operations', ApplicationConfiguration::class)->name('project.application.resource-operations');
Route::get('/metrics', ApplicationConfiguration::class)->name('project.application.metrics');
Route::get('/tags', ApplicationConfiguration::class)->name('project.application.tags');
Route::get('/danger', ApplicationConfiguration::class)->name('project.application.danger');
Route::get('/deployment', DeploymentIndex::class)->name('project.application.deployment.index');
Route::get('/deployment/{deployment_uuid}', DeploymentShow::class)->name('project.application.deployment.show');
Route::get('/logs', Logs::class)->name('project.application.logs');