82 lines
4.8 KiB
PHP
82 lines
4.8 KiB
PHP
<div class="space-y-6" x-data="{ msgs: @js(['soon' => __('cloud.action_toast')]) }">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('cloud.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('cloud.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<div class="min-w-0">
|
|
<p class="font-semibold text-ink">{{ $instance['name'] }}</p>
|
|
<a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer" class="font-mono text-sm text-accent-text hover:underline">{{ $instance['domain'] }}</a>
|
|
</div>
|
|
<x-ui.badge :status="$instance['status']" class="sm:ml-2">{{ __('cloud.status_'.$instance['status']) }}</x-ui.badge>
|
|
@if ($maintenance)
|
|
@php $mActive = now()->between($maintenance->starts_at, $maintenance->ends_at); @endphp
|
|
<span class="inline-flex items-center gap-1.5 rounded-pill border border-warning-border bg-warning-bg px-2.5 py-0.5 text-xs font-semibold text-warning">
|
|
<x-ui.icon name="alert-triangle" class="size-3.5" />
|
|
{{ $mActive ? __('cloud.maintenance_active') : __('cloud.maintenance_planned') }}
|
|
</span>
|
|
@endif
|
|
<a href="https://{{ $instance['domain'] }}" target="_blank" rel="noopener noreferrer"
|
|
class="ml-auto inline-flex items-center gap-2 rounded-pill bg-accent-active px-4 py-2 text-sm font-semibold text-on-accent transition hover:bg-accent-press">
|
|
<x-ui.icon name="external-link" class="size-4" />{{ __('cloud.open') }}
|
|
</a>
|
|
</div>
|
|
@if ($maintenance)
|
|
<div class="mt-4 flex items-start gap-2.5 rounded-lg border border-warning-border bg-warning-bg p-3">
|
|
<x-ui.icon name="alert-triangle" class="mt-0.5 size-4 shrink-0 text-warning" />
|
|
<div class="min-w-0 text-sm">
|
|
<p class="font-semibold text-ink">{{ $maintenance->title }}</p>
|
|
<p class="text-body">{{ __('cloud.maintenance_window', ['start' => $maintenance->starts_at->local()->isoFormat('LLL'), 'end' => $maintenance->ends_at->local()->isoFormat('LT')]) }}</p>
|
|
@if ($maintenance->public_description)
|
|
<p class="mt-0.5 text-muted">{{ $maintenance->public_description }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($restartPending)
|
|
<div class="mt-4 flex items-start gap-2.5 rounded-lg border border-warning-border bg-warning-bg p-3">
|
|
<x-ui.icon name="rotate-ccw" class="mt-0.5 size-4 shrink-0 text-warning" />
|
|
<div class="min-w-0 text-sm">
|
|
<p class="font-semibold text-ink">{{ __('cloud.restart_pending_title') }}</p>
|
|
<p class="text-body">{{ __('cloud.restart_pending_body') }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<dl class="mt-4 grid grid-cols-1 gap-4 border-t border-line pt-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach ([
|
|
['cloud.plan', $instance['plan']],
|
|
['cloud.seats', $instance['seats']],
|
|
['cloud.performance', $instance['performance']],
|
|
['cloud.location', $instance['location']],
|
|
['cloud.storage', $storageLabel],
|
|
] as [$key, $val])
|
|
<div>
|
|
<dt class="text-xs font-semibold text-muted">{{ __($key) }}</dt>
|
|
<dd class="mt-1 font-mono text-sm text-body">{{ $val }}</dd>
|
|
</div>
|
|
@endforeach
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
|
<h2 class="font-semibold text-ink">{{ __('cloud.storage_growth') }}</h2>
|
|
<p class="text-sm text-muted">{{ __('cloud.storage_growth_sub') }}</p>
|
|
<div class="mt-4 h-56" wire:ignore>
|
|
<x-ui.chart :config="$storageChart" class="h-56" :label="__('cloud.storage_growth')" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 animate-rise [animation-delay:180ms]">
|
|
<x-ui.button variant="secondary" :disabled="! $canRestart"
|
|
@click="$dispatch('openModal', { component: 'confirm-restart-cloud' })">
|
|
<x-ui.icon name="rotate-ccw" class="size-4" />{{ __('cloud.restart') }}
|
|
</x-ui.button>
|
|
<x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.snapshot') }}</x-ui.button>
|
|
<x-ui.button variant="secondary" @click="$dispatch('notify', { message: msgs.soon })">{{ __('cloud.logs') }}</x-ui.button>
|
|
</div>
|
|
</div>
|