Refine ops health widget layout
This commit is contained in:
Codex Agent
@@ -250,10 +250,14 @@ return [
|
||||
'no_snapshot' => 'Kein Queue-Snapshot vorhanden. storage:check-upload-queues ausführen.',
|
||||
'no_queues' => 'Keine Queues konfiguriert.',
|
||||
'alerts_heading' => 'Alarme',
|
||||
'alerts_empty' => 'Keine aktiven Alarme.',
|
||||
'thresholds' => 'Grenzwerte',
|
||||
'size' => 'Größe',
|
||||
'failed' => 'Fehler',
|
||||
'queue' => 'Queue',
|
||||
'utilization' => 'Auslastung',
|
||||
'utilization_of' => ':percent% von :label',
|
||||
'utilization_na' => 'k.A.',
|
||||
],
|
||||
'alert_types' => [
|
||||
'size' => 'Queue-Größe über Grenzwert (:size)',
|
||||
|
||||
@@ -250,10 +250,14 @@ return [
|
||||
'no_snapshot' => 'No queue snapshot available. Run storage:check-upload-queues.',
|
||||
'no_queues' => 'No queues configured.',
|
||||
'alerts_heading' => 'Alerts',
|
||||
'alerts_empty' => 'No active alerts.',
|
||||
'thresholds' => 'Thresholds',
|
||||
'size' => 'Size',
|
||||
'failed' => 'Failed',
|
||||
'queue' => 'Queue',
|
||||
'utilization' => 'Utilization',
|
||||
'utilization_of' => ':percent% of :label',
|
||||
'utilization_na' => 'N/A',
|
||||
],
|
||||
'alert_types' => [
|
||||
'size' => 'Queue size above threshold (:size)',
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@php
|
||||
use Filament\Support\Icons\Heroicon;
|
||||
@endphp
|
||||
|
||||
<x-filament-panels::page>
|
||||
<div class="space-y-6">
|
||||
<x-filament::section>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-300">
|
||||
{{ __('admin.ops_health.help') }}
|
||||
</p>
|
||||
</x-filament::section>
|
||||
</div>
|
||||
<x-filament::section :icon="Heroicon::InformationCircle">
|
||||
{{ __('admin.ops_health.help') }}
|
||||
</x-filament::section>
|
||||
</x-filament-panels::page>
|
||||
|
||||
@@ -1,115 +1,163 @@
|
||||
@php
|
||||
use Filament\Support\Enums\GridDirection;
|
||||
use Filament\Support\Icons\Heroicon;
|
||||
use Illuminate\View\ComponentAttributeBag;
|
||||
|
||||
$severityColors = [
|
||||
'ok' => 'success',
|
||||
'warning' => 'warning',
|
||||
'critical' => 'danger',
|
||||
'unknown' => 'gray',
|
||||
];
|
||||
|
||||
$severityIcons = [
|
||||
'ok' => Heroicon::CheckCircle,
|
||||
'warning' => Heroicon::ExclamationTriangle,
|
||||
'critical' => Heroicon::XCircle,
|
||||
'unknown' => Heroicon::QuestionMarkCircle,
|
||||
];
|
||||
|
||||
$summaryGrid = (new ComponentAttributeBag())->grid(['default' => 1, 'sm' => 2, 'lg' => 4]);
|
||||
$summaryRow = (new ComponentAttributeBag())->grid(['default' => 2]);
|
||||
$mainGrid = (new ComponentAttributeBag())->grid(['default' => 1, 'xl' => 3]);
|
||||
$queuesColumn = (new ComponentAttributeBag())->gridColumn(['default' => 'full', 'xl' => 2]);
|
||||
$alertsColumn = (new ComponentAttributeBag())->gridColumn(['default' => 'full', 'xl' => 1]);
|
||||
$stacked = (new ComponentAttributeBag())->grid(['default' => 1], GridDirection::Column);
|
||||
@endphp
|
||||
|
||||
<x-filament-widgets::widget>
|
||||
<x-filament::section
|
||||
:heading="__('admin.ops_health.queue.heading')"
|
||||
:description="__('admin.ops_health.queue.description')"
|
||||
:icon="Heroicon::QueueList"
|
||||
>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3 text-xs text-slate-500 dark:text-slate-300">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<span>
|
||||
{{ __('admin.ops_health.queue.connection') }}:
|
||||
<span class="font-semibold text-slate-700 dark:text-slate-100">{{ $connection }}</span>
|
||||
</span>
|
||||
<span>{{ $snapshotLabel }}</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200">
|
||||
{{ __('admin.ops_health.queue.alerts_heading') }}: {{ number_format($alertCount) }}
|
||||
</span>
|
||||
@if($stalledAssets > 0)
|
||||
<span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-800 dark:bg-amber-400/20 dark:text-amber-200">
|
||||
{{ __('admin.ops_health.queue.stalled_assets', ['minutes' => $stalledMinutes]) }}:
|
||||
{{ number_format($stalledAssets) }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<x-slot name="afterHeader">
|
||||
<x-filament::badge color="gray" :icon="Heroicon::Clock">
|
||||
{{ $snapshotLabel }}
|
||||
</x-filament::badge>
|
||||
<x-filament::badge :color="$alertCount > 0 ? 'danger' : 'success'" :icon="Heroicon::BellAlert">
|
||||
{{ __('admin.ops_health.queue.alerts_heading') }}: {{ number_format($alertCount) }}
|
||||
</x-filament::badge>
|
||||
@if($stalledAssets > 0)
|
||||
<x-filament::badge color="warning" :icon="Heroicon::ExclamationTriangle">
|
||||
{{ __('admin.ops_health.queue.stalled_assets', ['minutes' => $stalledMinutes]) }}:
|
||||
{{ number_format($stalledAssets) }}
|
||||
</x-filament::badge>
|
||||
@endif
|
||||
</x-slot>
|
||||
|
||||
@if($snapshotMissing)
|
||||
<div class="mt-4 rounded-xl border border-dashed border-slate-200 bg-slate-50 p-4 text-sm text-slate-600 dark:border-white/10 dark:bg-slate-900/40 dark:text-slate-300">
|
||||
{{ __('admin.ops_health.queue.no_snapshot') }}
|
||||
</div>
|
||||
<x-filament::empty-state
|
||||
:heading="__('admin.ops_health.queue.no_snapshot')"
|
||||
:description="__('admin.ops_health.queue.description')"
|
||||
:icon="Heroicon::ExclamationTriangle"
|
||||
/>
|
||||
@else
|
||||
<div class="mt-4 grid gap-3">
|
||||
@forelse($queues as $queue)
|
||||
<div class="rounded-2xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/10 dark:bg-slate-900/60">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-slate-700 dark:text-slate-100">{{ $queue['name'] }}</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400">
|
||||
{{ __('admin.ops_health.queue.thresholds') }}:
|
||||
@if($queue['warning'] || $queue['critical'])
|
||||
W {{ number_format($queue['warning']) }} / C {{ number_format($queue['critical']) }}
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs">
|
||||
<span class="text-slate-500 dark:text-slate-400">
|
||||
{{ __('admin.ops_health.queue.size') }}:
|
||||
<span class="font-semibold text-slate-700 dark:text-slate-100">{{ $queue['size_label'] }}</span>
|
||||
</span>
|
||||
<span class="text-slate-500 dark:text-slate-400">
|
||||
{{ __('admin.ops_health.queue.failed') }}:
|
||||
<span class="font-semibold text-slate-700 dark:text-slate-100">{{ $queue['failed_label'] }}</span>
|
||||
</span>
|
||||
<span @class([
|
||||
'rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
|
||||
'bg-emerald-100 text-emerald-800 dark:bg-emerald-400/20 dark:text-emerald-200' => $queue['severity'] === 'ok',
|
||||
'bg-amber-100 text-amber-800 dark:bg-amber-400/20 dark:text-amber-200' => $queue['severity'] === 'warning',
|
||||
'bg-rose-100 text-rose-800 dark:bg-rose-400/20 dark:text-rose-200' => $queue['severity'] === 'critical',
|
||||
'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200' => ! in_array($queue['severity'], ['ok', 'warning', 'critical'], true),
|
||||
])>
|
||||
{{ __('admin.ops_health.severity.'.$queue['severity']) }}
|
||||
</span>
|
||||
</div>
|
||||
<div {{ $summaryGrid }}>
|
||||
@foreach($statusSummary as $summary)
|
||||
<x-filament::card>
|
||||
<div {{ $summaryRow }}>
|
||||
<x-filament::badge
|
||||
:color="$severityColors[$summary['severity']] ?? 'gray'"
|
||||
:icon="$severityIcons[$summary['severity']] ?? Heroicon::QuestionMarkCircle"
|
||||
>
|
||||
{{ $summary['label'] }}
|
||||
</x-filament::badge>
|
||||
<x-filament::badge color="gray">
|
||||
{{ number_format($summary['count']) }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm text-slate-500 dark:text-slate-300">{{ __('admin.ops_health.queue.no_queues') }}</p>
|
||||
@endforelse
|
||||
</x-filament::card>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if($alertCount > 0)
|
||||
<div class="mt-4 grid gap-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
|
||||
{{ __('admin.ops_health.queue.alerts_heading') }}
|
||||
</p>
|
||||
@foreach($alerts as $alert)
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-slate-200/70 bg-white/70 px-3 py-2 text-xs text-slate-600 dark:border-white/10 dark:bg-slate-900/50 dark:text-slate-200">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
@if($alert['queue'])
|
||||
<span class="font-semibold text-slate-700 dark:text-slate-100">{{ $alert['queue'] }}</span>
|
||||
@endif
|
||||
<span class="text-slate-500 dark:text-slate-400">
|
||||
@switch($alert['type'])
|
||||
@case('size')
|
||||
{{ __('admin.ops_health.alert_types.size', ['size' => number_format($alert['size'] ?? 0)]) }}
|
||||
@break
|
||||
@case('failed_jobs')
|
||||
{{ __('admin.ops_health.alert_types.failed_jobs', ['failed' => number_format($alert['failed'] ?? 0)]) }}
|
||||
@break
|
||||
@case('pending_assets')
|
||||
{{ __('admin.ops_health.alert_types.pending_assets', ['count' => number_format($alert['count'] ?? 0), 'minutes' => $alert['older_than_minutes'] ?? $stalledMinutes]) }}
|
||||
@break
|
||||
@default
|
||||
{{ __('admin.ops_health.snapshot_missing') }}
|
||||
@endswitch
|
||||
</span>
|
||||
</div>
|
||||
<span @class([
|
||||
'rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
|
||||
'bg-emerald-100 text-emerald-800 dark:bg-emerald-400/20 dark:text-emerald-200' => $alert['severity'] === 'ok',
|
||||
'bg-amber-100 text-amber-800 dark:bg-amber-400/20 dark:text-amber-200' => $alert['severity'] === 'warning',
|
||||
'bg-rose-100 text-rose-800 dark:bg-rose-400/20 dark:text-rose-200' => $alert['severity'] === 'critical',
|
||||
'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-200' => ! in_array($alert['severity'], ['ok', 'warning', 'critical'], true),
|
||||
])>
|
||||
{{ __('admin.ops_health.severity.'.$alert['severity']) }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
<div {{ $mainGrid }}>
|
||||
<div {{ $queuesColumn }}>
|
||||
<div {{ $stacked }}>
|
||||
@forelse($queues as $queue)
|
||||
<x-filament::card
|
||||
:heading="$queue['name']"
|
||||
:description="__('admin.ops_health.queue.thresholds') . ': ' . (($queue['warning'] || $queue['critical']) ? 'W ' . number_format($queue['warning']) . ' / C ' . number_format($queue['critical']) : '-')"
|
||||
>
|
||||
<x-slot name="afterHeader">
|
||||
<x-filament::badge
|
||||
:color="$severityColors[$queue['severity']] ?? 'gray'"
|
||||
:icon="$severityIcons[$queue['severity']] ?? Heroicon::QuestionMarkCircle"
|
||||
>
|
||||
{{ __('admin.ops_health.severity.'.$queue['severity']) }}
|
||||
</x-filament::badge>
|
||||
</x-slot>
|
||||
|
||||
<div {{ $stacked }}>
|
||||
<x-filament::badge color="gray" :icon="Heroicon::QueueList">
|
||||
{{ __('admin.ops_health.queue.size') }}: {{ $queue['size_label'] }}
|
||||
</x-filament::badge>
|
||||
<x-filament::badge color="gray" :icon="Heroicon::ExclamationCircle">
|
||||
{{ __('admin.ops_health.queue.failed') }}: {{ $queue['failed_label'] }}
|
||||
</x-filament::badge>
|
||||
<x-filament::badge color="gray" :icon="Heroicon::ArrowTrendingUp">
|
||||
{{ __('admin.ops_health.queue.utilization') }}: {{ $queue['utilization_label'] }}
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
</x-filament::card>
|
||||
@empty
|
||||
<x-filament::empty-state
|
||||
:heading="__('admin.ops_health.queue.no_queues')"
|
||||
:icon="Heroicon::QueueList"
|
||||
compact
|
||||
/>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div {{ $alertsColumn }}>
|
||||
<x-filament::card :heading="__('admin.ops_health.queue.alerts_heading')">
|
||||
<div {{ $stacked }}>
|
||||
@forelse($alerts as $alert)
|
||||
<x-filament::card compact>
|
||||
<x-slot name="afterHeader">
|
||||
<x-filament::badge
|
||||
:color="$severityColors[$alert['severity']] ?? 'gray'"
|
||||
:icon="$severityIcons[$alert['severity']] ?? Heroicon::QuestionMarkCircle"
|
||||
>
|
||||
{{ __('admin.ops_health.severity.'.$alert['severity']) }}
|
||||
</x-filament::badge>
|
||||
</x-slot>
|
||||
|
||||
<div {{ $stacked }}>
|
||||
@if($alert['queue'])
|
||||
<x-filament::badge color="gray" :icon="Heroicon::QueueList">
|
||||
{{ $alert['queue'] }}
|
||||
</x-filament::badge>
|
||||
@endif
|
||||
<x-filament::badge color="gray" :icon="Heroicon::BellAlert">
|
||||
@switch($alert['type'])
|
||||
@case('size')
|
||||
{{ __('admin.ops_health.alert_types.size', ['size' => number_format($alert['size'] ?? 0)]) }}
|
||||
@break
|
||||
@case('failed_jobs')
|
||||
{{ __('admin.ops_health.alert_types.failed_jobs', ['failed' => number_format($alert['failed'] ?? 0)]) }}
|
||||
@break
|
||||
@case('pending_assets')
|
||||
{{ __('admin.ops_health.alert_types.pending_assets', ['count' => number_format($alert['count'] ?? 0), 'minutes' => $alert['older_than_minutes'] ?? $stalledMinutes]) }}
|
||||
@break
|
||||
@default
|
||||
{{ __('admin.ops_health.snapshot_missing') }}
|
||||
@endswitch
|
||||
</x-filament::badge>
|
||||
</div>
|
||||
</x-filament::card>
|
||||
@empty
|
||||
<x-filament::empty-state
|
||||
:heading="__('admin.ops_health.queue.alerts_empty')"
|
||||
:icon="Heroicon::BellAlert"
|
||||
compact
|
||||
/>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-filament::card>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</x-filament::section>
|
||||
</x-filament-widgets::widget>
|
||||
|
||||
Reference in New Issue
Block a user