File manager - Edit - /var/www/payraty/helpdesk/vendor/laravel/pulse/resources/views/livewire/queues.blade.php
Back
@use('Illuminate\Support\Str') <x-pulse::card :cols="$cols" :rows="$rows" :class="$class"> <x-pulse::card-header name="Queues" title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};" details="past {{ $this->periodForHumans() }}" > <x-slot:icon> <x-pulse::icons.queue-list /> </x-slot:icon> <x-slot:actions> <div class="flex flex-wrap gap-4"> <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium"> <div class="h-0.5 w-3 rounded-full bg-[rgba(107,114,128,0.5)]"></div> Queued </div> <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium"> <div class="h-0.5 w-3 rounded-full bg-[rgba(147,51,234,0.5)]"></div> Processing </div> <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium"> <div class="h-0.5 w-3 rounded-full bg-[#9333ea]"></div> Processed </div> <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium"> <div class="h-0.5 w-3 rounded-full bg-[#eab308]"></div> Released </div> <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium"> <div class="h-0.5 w-3 rounded-full bg-[#e11d48]"></div> Failed </div> </div> </x-slot:actions> </x-pulse::card-header> <x-pulse::scroll :expand="$expand" wire:poll.5s=""> @if ($queues->isEmpty()) <x-pulse::no-results /> @else <div class="grid gap-3 mx-px mb-px"> @foreach ($queues as $queue => $readings) <div wire:key="{{ $queue }}"> <h3 class="font-bold text-gray-700 dark:text-gray-300"> @if ($showConnection) {{ $queue }} @else {{ Str::after($queue, ':') }} @endif </h3> @php $highest = $readings->flatten()->max(); @endphp <div class="mt-3 relative"> <div class="absolute -left-px -top-2 max-w-fit h-4 flex items-center px-1 text-xs leading-none text-white font-bold bg-purple-500 rounded after:[--triangle-size:4px] after:border-l-purple-500 after:absolute after:right-[calc(-1*var(--triangle-size))] after:top-[calc(50%-var(--triangle-size))] after:border-t-[length:var(--triangle-size)] after:border-b-[length:var(--triangle-size)] after:border-l-[length:var(--triangle-size)] after:border-transparent"> @if ($config['sample_rate'] < 1) <span title="Sample rate: {{ $config['sample_rate'] }}, Raw value: {{ number_format($highest) }}">~{{ number_format($highest * (1 / $config['sample_rate'])) }}</span> @else {{ number_format($highest) }} @endif </div> <div wire:ignore class="h-14" x-data="queueChart({ queue: '{{ $queue }}', readings: @js($readings), sampleRate: {{ $config['sample_rate'] }}, })" > <canvas x-ref="canvas" class="ring-1 ring-gray-900/5 dark:ring-gray-100/10 bg-gray-50 dark:bg-gray-800 rounded-md shadow-sm"></canvas> </div> </div> </div> @endforeach </div> @endif </x-pulse::scroll> </x-pulse::card> @script <script> Alpine.data('queueChart', (config) => ({ init() { let chart = new Chart( this.$refs.canvas, { type: 'line', data: { labels: this.labels(config.readings), datasets: [ { label: 'Queued', borderColor: 'rgba(107,114,128,0.5)', data: this.scale(config.readings.queued), order: 4, }, { label: 'Processing', borderColor: 'rgba(147,51,234,0.5)', data: this.scale(config.readings.processing), order: 3, }, { label: 'Released', borderColor: '#eab308', data: this.scale(config.readings.released), order: 2, }, { label: 'Processed', borderColor: '#9333ea', data: this.scale(config.readings.processed), order: 1, }, { label: 'Failed', borderColor: '#e11d48', data: this.scale(config.readings.failed), order: 0, }, ], }, options: { maintainAspectRatio: false, layout: { autoPadding: false, padding: { top: 1, }, }, datasets: { line: { borderWidth: 2, borderCapStyle: 'round', pointHitRadius: 10, pointStyle: false, tension: 0.2, spanGaps: false, segment: { borderColor: (ctx) => ctx.p0.raw === 0 && ctx.p1.raw === 0 ? 'transparent' : undefined, } } }, scales: { x: { display: false, }, y: { display: false, min: 0, max: this.highest(config.readings), }, }, plugins: { legend: { display: false, }, tooltip: { mode: 'index', position: 'nearest', intersect: false, callbacks: { beforeBody: (context) => context .map(item => `${item.dataset.label}: ${config.sampleRate < 1 ? '~' : ''}${item.formattedValue}`) .join(', '), label: () => null, }, }, }, }, } ) Livewire.on('queues-chart-update', ({ queues }) => { if (chart === undefined) { return } if (queues[config.queue] === undefined && chart) { chart.destroy() chart = undefined return } chart.data.labels = this.labels(queues[config.queue]) chart.options.scales.y.max = this.highest(queues[config.queue]) chart.data.datasets[0].data = this.scale(queues[config.queue].queued) chart.data.datasets[1].data = this.scale(queues[config.queue].processing) chart.data.datasets[2].data = this.scale(queues[config.queue].released) chart.data.datasets[3].data = this.scale(queues[config.queue].processed) chart.data.datasets[4].data = this.scale(queues[config.queue].failed) chart.update() }) }, labels(readings) { return Object.keys(readings.queued) }, scale(data) { return Object.values(data).map(value => value * (1 / config.sampleRate )) }, highest(readings) { return Math.max(...Object.values(readings).map(dataset => Math.max(...Object.values(dataset)))) * (1 / config.sampleRate) } })) </script> @endscript
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 1.04 |
proxy
|
phpinfo
|
Settings