91 lines
5.4 KiB
PHP
91 lines
5.4 KiB
PHP
<div wire:poll.10s="refreshHealth">
|
|
<x-topbar :title="__('host.title')" :subtitle="__('host.subtitle')" />
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
@php
|
|
$worst = $this->worstState();
|
|
$problems = $this->problemCount();
|
|
$bannerMap = [
|
|
'online' => ['bg' => 'bg-online/10', 'bar' => 'bg-online', 'icon' => 'check', 'tint' => 'text-online'],
|
|
'warning' => ['bg' => 'bg-warning/10', 'bar' => 'bg-warning', 'icon' => 'alert', 'tint' => 'text-warning'],
|
|
'offline' => ['bg' => 'bg-offline/10', 'bar' => 'bg-offline', 'icon' => 'alert', 'tint' => 'text-offline'],
|
|
];
|
|
$b = $bannerMap[$worst];
|
|
$stateLabel = [
|
|
'online' => __('common.status_online'),
|
|
'warning' => __('common.status_warning'),
|
|
'offline' => __('common.status_offline'),
|
|
];
|
|
@endphp
|
|
|
|
<section class="relative overflow-hidden rounded-card border border-line-soft {{ $b['bg'] }} reveal">
|
|
<span class="absolute inset-y-0 left-0 w-[3px] {{ $b['bar'] }}"></span>
|
|
<div class="flex items-center gap-3.5 p-4 pl-5">
|
|
<span class="grid place-items-center w-10 h-10 rounded-lg bg-base/40 {{ $b['tint'] }} shrink-0">
|
|
<x-icon :name="$b['icon']" :size="20" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<h2 class="text-[15px] font-bold text-ink">
|
|
{{ $worst === 'online'
|
|
? __('host.health_ok_title')
|
|
: trans_choice('host.health_problem_title', $problems, ['count' => $problems]) }}
|
|
</h2>
|
|
<p class="text-[12.5px] text-ink-2">
|
|
{{ $worst === 'online' ? __('host.health_ok_body') : __('host.health_problem_body') }}
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-3 shrink-0">
|
|
<span class="hidden sm:block text-[11px] font-mono text-ink-3">{{ __('host.checked_at', ['time' => $checkedAt]) }}</span>
|
|
<button type="button" wire:click="refreshHealth" wire:loading.attr="disabled" wire:target="refreshHealth"
|
|
class="grid place-items-center w-9 h-9 rounded-lg bg-base/40 text-ink-2 hover:text-ink transition-colors disabled:opacity-50"
|
|
aria-label="{{ __('host.refresh') }}" title="{{ __('host.refresh') }}">
|
|
<span wire:loading.remove wire:target="refreshHealth"><x-icon name="activity" :size="17" /></span>
|
|
<span wire:loading wire:target="refreshHealth" class="pulse-live"><x-icon name="activity" :size="17" /></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<x-panel :title="__('host.services_title')" class="reveal">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
@foreach ($services as $svc)
|
|
<div class="flex items-center gap-3 rounded-lg border border-line-soft bg-raised p-3">
|
|
<span class="grid place-items-center w-9 h-9 rounded-lg bg-inset text-ink-2 shrink-0">
|
|
<x-icon :name="$svc['icon']" :size="18" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<div class="text-[13px] font-semibold text-ink">{{ $svc['label'] }}</div>
|
|
<div class="text-[11.5px] text-ink-3 font-mono tabular-nums">{{ $svc['detail'] }}</div>
|
|
</div>
|
|
<x-status-pill :state="$svc['state']" class="ml-auto shrink-0">
|
|
<x-status-dot :state="$svc['state']" :pulse="$svc['state'] === 'online'" class="!w-1.5 !h-1.5" />
|
|
{{ $stateLabel[$svc['state']] }}
|
|
</x-status-pill>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-panel>
|
|
|
|
<x-panel :title="__('host.system_title')" class="reveal">
|
|
<dl class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-3">
|
|
<div class="flex flex-col gap-0.5">
|
|
<dt class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('host.stack_framework') }}</dt>
|
|
<dd class="text-[13px] font-mono text-ink-2">Laravel {{ app()->version() }}</dd>
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<dt class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('host.stack_database') }}</dt>
|
|
<dd class="text-[13px] font-mono text-ink-2">PostgreSQL 17 · TSDB</dd>
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<dt class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('host.stack_realtime') }}</dt>
|
|
<dd class="text-[13px] font-mono text-ink-2">Reverb</dd>
|
|
</div>
|
|
<div class="flex flex-col gap-0.5">
|
|
<dt class="text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">{{ __('host.stack_queue') }}</dt>
|
|
<dd class="text-[13px] font-mono text-ink-2">Redis · Horizon</dd>
|
|
</div>
|
|
</dl>
|
|
</x-panel>
|
|
</div>
|
|
</div>
|