67 lines
3.7 KiB
PHP
67 lines
3.7 KiB
PHP
@php
|
|
// container state -> status-pill status
|
|
$pill = fn (string $s) => match (true) {
|
|
$s === 'running' => 'online',
|
|
$s === 'paused' => 'warning',
|
|
in_array($s, ['created', 'restarting'], true) => 'pending',
|
|
default => 'offline', // exited / dead / removing
|
|
};
|
|
@endphp
|
|
|
|
<div class="space-y-4" @if (! $ready) wire:init="load" @endif>
|
|
{{-- Header --}}
|
|
<div class="flex flex-wrap items-end justify-between gap-3">
|
|
<div>
|
|
<p class="font-mono text-[11px] uppercase tracking-[0.2em] text-accent-text">{{ __('docker.eyebrow') }}</p>
|
|
<h2 class="mt-0.5 font-display text-xl font-semibold text-ink sm:text-2xl">{{ __('docker.title') }}</h2>
|
|
</div>
|
|
<x-status-pill :status="$connected ? 'online' : 'offline'">{{ $connected ? __('docker.connected') : __('docker.disconnected') }}</x-status-pill>
|
|
</div>
|
|
|
|
<x-panel :title="__('docker.containers_title')" :subtitle="$this->activeServer()?->name" :padded="false">
|
|
@if (! $ready)
|
|
{{-- lazy skeleton --}}
|
|
<div class="space-y-2 p-4 sm:p-5">
|
|
@for ($i = 0; $i < 3; $i++)
|
|
<div class="h-12 animate-pulse rounded-md bg-raised/50"></div>
|
|
@endfor
|
|
</div>
|
|
@elseif (! $connected)
|
|
<div class="px-4 py-10 text-center sm:px-5">
|
|
<p class="text-sm text-ink-2">{{ __('docker.unavailable_title') }}</p>
|
|
<p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('docker.unavailable_hint') }}</p>
|
|
</div>
|
|
@elseif (empty($containers))
|
|
<div class="px-4 py-10 text-center sm:px-5">
|
|
<p class="text-sm text-ink-2">{{ __('docker.empty_title') }}</p>
|
|
<p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('docker.empty_hint') }}</p>
|
|
</div>
|
|
@else
|
|
<div class="divide-y divide-line">
|
|
@foreach ($containers as $c)
|
|
<div wire:key="ctr-{{ $c['id'] }}" class="flex flex-wrap items-center gap-3 px-4 py-3 sm:px-5">
|
|
<x-status-dot :status="$pill($c['state'])" :ping="$c['state'] === 'running'" class="h-2.5 w-2.5" />
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate font-mono text-sm text-ink">{{ $c['name'] }}</p>
|
|
<p class="truncate font-mono text-[11px] text-ink-3">{{ $c['image'] }}@if ($c['ports']) · {{ $c['ports'] }}@endif</p>
|
|
</div>
|
|
<x-status-pill :status="$pill($c['state'])" class="hidden sm:inline-flex">{{ $c['state'] ?: '—' }}</x-status-pill>
|
|
|
|
<div class="flex flex-wrap items-center gap-1.5 pl-5 sm:pl-0">
|
|
@can('operate')
|
|
<x-btn variant="secondary" wire:click="viewLogs('{{ $c['id'] }}')">{{ __('docker.logs') }}</x-btn>
|
|
@if ($c['state'] === 'running')
|
|
<x-btn variant="secondary" wire:click="action('{{ $c['id'] }}', 'restart')" wire:loading.attr="disabled">{{ __('docker.restart') }}</x-btn>
|
|
<x-btn variant="danger-soft" wire:click="action('{{ $c['id'] }}', 'stop')" wire:loading.attr="disabled">{{ __('docker.stop') }}</x-btn>
|
|
@else
|
|
<x-btn variant="secondary" wire:click="action('{{ $c['id'] }}', 'start')" wire:loading.attr="disabled">{{ __('docker.start') }}</x-btn>
|
|
@endif
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</x-panel>
|
|
</div>
|