170 lines
12 KiB
PHP
170 lines
12 KiB
PHP
<div class="space-y-6">
|
|
<div class="animate-rise">
|
|
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('admin_incidents.title') }}</h1>
|
|
<p class="mt-1 text-sm text-muted">{{ __('admin_incidents.subtitle') }}</p>
|
|
|
|
{{-- Where this ends up. Asked in as many words — "where do I enter
|
|
something, and where does the status page get its data from" — and
|
|
nothing on either page said so. The four components measure
|
|
themselves; what an operator adds here is the part no probe can
|
|
know. --}}
|
|
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-line bg-surface-2 px-4 py-3 text-sm">
|
|
<x-ui.icon name="activity" class="size-4 shrink-0 text-accent-text" />
|
|
<span class="text-body">{{ __('admin_incidents.appears_on') }}</span>
|
|
<a href="{{ route('status') }}" target="_blank" rel="noopener"
|
|
class="inline-flex items-center gap-1.5 font-medium text-accent-text underline-offset-4 hover:underline">
|
|
{{ __('admin_incidents.open_status') }}<x-ui.icon name="external-link" class="size-3.5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_420px] lg:items-start">
|
|
<div class="space-y-6 animate-rise [animation-delay:60ms]">
|
|
{{-- Open first. This page is opened while something is wrong, and
|
|
the thing an operator needs is the box to type into. --}}
|
|
@forelse ($ongoing as $incident)
|
|
<div wire:key="open-{{ $incident->uuid }}" class="overflow-hidden rounded-lg border border-danger-border bg-surface shadow-xs">
|
|
<div class="border-b border-line bg-danger-bg px-5 py-4">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<x-ui.badge status="suspended">{{ __("status.incident.impact.{$incident->impact}") }}</x-ui.badge>
|
|
<span class="font-mono text-xs text-muted">{{ __('status.incident.stage.'.$incident->stage()) }}</span>
|
|
@unless ($incident->isPublished())
|
|
<span class="font-mono text-xs text-warning">{{ __('admin_incidents.unpublished') }}</span>
|
|
@endunless
|
|
</div>
|
|
<h2 class="mt-2 font-semibold text-ink">{{ $incident->title }}</h2>
|
|
<p class="mt-1 font-mono text-xs text-muted">
|
|
{{ __('status.incident.started') }} {{ $incident->started_at->local()->isoFormat('DD.MM. HH:mm') }}
|
|
· {{ collect($incident->components)->map(fn ($c) => __("status.component.{$c}"))->join(', ') }}
|
|
</p>
|
|
</div>
|
|
|
|
<x-status.timeline :incident="$incident" />
|
|
|
|
<div class="border-t border-line bg-surface-2 px-5 py-4">
|
|
@if ($updatingUuid === $incident->uuid)
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label for="stage-{{ $incident->uuid }}" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.stage') }}</label>
|
|
<select id="stage-{{ $incident->uuid }}" wire:model="updateStage" class="min-h-10 w-full rounded border border-line bg-surface px-3 text-sm text-ink">
|
|
@foreach (['investigating', 'identified', 'monitoring', 'resolved'] as $stage)
|
|
<option value="{{ $stage }}">{{ __("status.incident.stage.{$stage}") }}</option>
|
|
@endforeach
|
|
</select>
|
|
<p class="mt-1.5 text-xs text-muted">{{ __('admin_incidents.resolved_hint') }}</p>
|
|
</div>
|
|
<div>
|
|
<label for="body-{{ $incident->uuid }}" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.update_body') }}</label>
|
|
<textarea id="body-{{ $incident->uuid }}" wire:model="updateBody" rows="3"
|
|
class="w-full rounded border border-line bg-surface px-3 py-2 text-sm text-ink"></textarea>
|
|
@error('updateBody') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<x-ui.button wire:click="postUpdate" size="sm">{{ __('admin_incidents.post') }}</x-ui.button>
|
|
<x-ui.button wire:click="cancelUpdate" variant="secondary" size="sm">{{ __('admin_incidents.cancel') }}</x-ui.button>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-ui.button wire:click="startUpdate('{{ $incident->uuid }}')" variant="secondary" size="sm">
|
|
<x-ui.icon name="pen" class="size-4" />{{ __('admin_incidents.add_update') }}
|
|
</x-ui.button>
|
|
<x-ui.button variant="ghost" size="sm" class="text-danger"
|
|
wire:click="$dispatch('openModal', { component: 'admin.confirm-delete-incident', arguments: { uuid: '{{ $incident->uuid }}' } })">
|
|
<x-ui.icon name="trash-2" class="size-4" />{{ __('admin_incidents.delete') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="rounded-lg border border-line bg-surface p-8 text-center shadow-xs">
|
|
<x-ui.icon name="check" class="mx-auto size-5 text-success" />
|
|
<p class="mt-2 text-sm text-muted">{{ __('admin_incidents.none_open') }}</p>
|
|
</div>
|
|
@endforelse
|
|
|
|
@if ($resolved->isNotEmpty())
|
|
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs">
|
|
<h2 class="border-b border-line px-5 py-3.5 text-sm font-semibold text-ink">{{ __('admin_incidents.closed') }}</h2>
|
|
<table class="w-full text-sm">
|
|
<tbody>
|
|
@foreach ($resolved as $incident)
|
|
<tr wire:key="done-{{ $incident->uuid }}" class="border-b border-line last:border-0">
|
|
<td class="px-5 py-3 font-medium text-ink">{{ $incident->title }}</td>
|
|
<td class="whitespace-nowrap px-5 py-3 font-mono text-xs text-muted">
|
|
{{ $incident->started_at->local()->isoFormat('DD.MM.YY HH:mm') }}
|
|
</td>
|
|
<td class="whitespace-nowrap px-5 py-3 text-right font-mono text-xs text-muted">
|
|
<x-status.duration :minutes="$incident->durationMinutes()" />
|
|
</td>
|
|
<td class="w-10 px-3 py-3 text-right">
|
|
<button type="button" title="{{ __('admin_incidents.delete') }}" aria-label="{{ __('admin_incidents.delete') }}"
|
|
wire:click="$dispatch('openModal', { component: 'admin.confirm-delete-incident', arguments: { uuid: '{{ $incident->uuid }}' } })"
|
|
class="grid size-8 place-items-center rounded-md border border-line text-muted transition hover:border-danger hover:text-danger">
|
|
<x-ui.icon name="trash-2" class="size-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Report. A page-level form, not a row editor: it creates a record
|
|
rather than editing one, so R20 does not apply. --}}
|
|
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
|
|
<h2 class="text-sm font-semibold text-ink">{{ __('admin_incidents.report') }}</h2>
|
|
<p class="mt-1 text-xs text-muted">{{ __('admin_incidents.report_hint') }}</p>
|
|
|
|
<div class="mt-4 space-y-4">
|
|
<div>
|
|
<label for="inc-title" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.headline') }}</label>
|
|
<input id="inc-title" type="text" wire:model="title" class="min-h-10 w-full rounded border border-line bg-surface px-3 text-sm text-ink">
|
|
@error('title') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<span class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.affects') }}</span>
|
|
<div class="space-y-2">
|
|
@foreach ($this->componentOptions() as $component)
|
|
<label class="flex items-center gap-2.5 text-sm text-body">
|
|
<input type="checkbox" wire:model="components" value="{{ $component }}" class="size-4 rounded border-line text-accent-active">
|
|
{{ __("status.component.{$component}") }}
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('components') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="inc-impact" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.impact') }}</label>
|
|
<select id="inc-impact" wire:model="impact" class="min-h-10 w-full rounded border border-line bg-surface px-3 text-sm text-ink">
|
|
@foreach (['degraded', 'down', 'maintenance'] as $impact)
|
|
<option value="{{ $impact }}">{{ __("status.incident.impact.{$impact}") }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="inc-start" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.started') }}</label>
|
|
<input id="inc-start" type="datetime-local" wire:model="startedAt" class="min-h-10 w-full rounded border border-line bg-surface px-3 text-sm text-ink">
|
|
@error('startedAt') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label for="inc-first" class="mb-1.5 block text-xs font-semibold text-muted">{{ __('admin_incidents.first_update') }}</label>
|
|
<p class="mb-1.5 text-xs text-muted">{{ __('admin_incidents.first_update_hint') }}</p>
|
|
<textarea id="inc-first" wire:model="firstUpdate" rows="3" class="w-full rounded border border-line bg-surface px-3 py-2 text-sm text-ink"
|
|
placeholder="{{ __('admin_incidents.first_update_placeholder') }}"></textarea>
|
|
@error('firstUpdate') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
|
|
</div>
|
|
|
|
<x-ui.button wire:click="create" class="w-full">{{ __('admin_incidents.publish') }}</x-ui.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|