Skip to content

More job metrics, less tables #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 22 commits into from
Oct 13, 2023
Merged

More job metrics, less tables #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
8086174
wip
jessarcher Oct 2, 2023
4b765b9
wip
jessarcher Oct 2, 2023
1120a79
wip
jessarcher Oct 2, 2023
e0c4091
wip
jessarcher Oct 2, 2023
7b41b62
wip
jessarcher Oct 2, 2023
72a1fd3
wip
jessarcher Oct 4, 2023
301f11b
wip
jessarcher Oct 4, 2023
554d402
wip
jessarcher Oct 4, 2023
d8a3a01
wip
jessarcher Oct 4, 2023
9382f77
Update queues to use standard cache pattern and stats display
jessarcher Oct 6, 2023
72e3e46
Live update queue charts
jessarcher Oct 6, 2023
7a17aae
wip
jessarcher Oct 6, 2023
f4b9d21
Add loading state to queues card
jessarcher Oct 6, 2023
3d5bcef
wip
jessarcher Oct 10, 2023
ca75f28
Update chart
jessarcher Oct 11, 2023
b719c5c
wip
jessarcher Oct 11, 2023
2a1773d
wip
jessarcher Oct 11, 2023
4016085
wip
jessarcher Oct 13, 2023
d3613b9
wip
jessarcher Oct 13, 2023
fa5f9fd
wip
jessarcher Oct 13, 2023
e98e13c
wip
jessarcher Oct 13, 2023
a25bb61
wip
jessarcher Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions config/pulse.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,37 +167,6 @@
],
],

/*
|--------------------------------------------------------------------------
| Pulse Queue Monitoring
|--------------------------------------------------------------------------
|
| The queues to show stats for.
|
*/

// TODO clean up this example after chatting with Jess.
'queues' => [
'default',
// 'default-connection:queue-1',
// 'default-connection:queue-2',
// env('QUEUE_CONNECTION', 'sync') => [
// 'default-connection:queue-3-via-array',
// ],
// 'specific-connection' => [
// 'queue-a',
// 'queue-1',
// ],
// 'connection-1' => [
// 'queue-1',
// 'queue-2'
// ],
// 'connection-2' => [
// 'queue-1',
// 'queue-2'
// ],
],

/*
|--------------------------------------------------------------------------
| Pulse Sample Rate
Expand Down
25 changes: 11 additions & 14 deletions database/migrations/2023_06_07_000001_create_pulse_tables.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,20 @@ public function up(): void
$table->string('user_id')->nullable();
$table->string('job');
$table->uuid('job_uuid');
$table->unsignedInteger('slow')->default(0);
$table->unsignedInteger('slowest')->nullable();
$table->unsignedInteger('attempt');
$table->string('connection');
$table->string('queue');
$table->datetime('queued_at');
$table->datetime('processing_at')->nullable();
$table->datetime('released_at')->nullable();
$table->datetime('processed_at')->nullable();
$table->datetime('failed_at')->nullable();
$table->unsignedInteger('duration')->nullable();

// TODO: verify this update index. Needs to find job quickly.
$table->index(['job_uuid']);
$table->index(['date', 'job', 'slowest']); // slow_jobs
$table->index(['date', 'user_id']); // user_usage
// $table->index(['date', 'job', 'slowest']); // slow_jobs
// $table->index(['date', 'user_id']); // user_usage
});

Schema::create('pulse_cache_interactions', function (Blueprint $table) {
Expand All @@ -92,15 +99,6 @@ public function up(): void
$table->string('user_id')->nullable();
$table->index(['uri', 'date', 'duration']);
});

Schema::create('pulse_queue_sizes', function (Blueprint $table) {
$table->datetime('date');
$table->string('connection');
$table->string('queue');
$table->unsignedInteger('size');
$table->unsignedInteger('failed');
// TODO: indexes?
});
}

/**
Expand All @@ -115,6 +113,5 @@ public function down(): void
Schema::dropIfExists('pulse_jobs');
Schema::dropIfExists('pulse_cache_interactions');
Schema::dropIfExists('pulse_outgoing_requests');
Schema::dropIfExists('pulse_queue_sizes');
}
};
2 changes: 1 addition & 1 deletion dist/pulse.css
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 1 addition & 21 deletions phpstan-baseline.neon
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,6 @@ parameters:
count: 3
path: src/PulseServiceProvider.php

-
message: "#^Unable to resolve the template type TKey in call to function collect$#"
count: 1
path: src/Queries/Queues.php

-
message: "#^Unable to resolve the template type TValue in call to function collect$#"
count: 1
path: src/Queries/Queues.php

-
message: "#^Method Laravel\\\\Pulse\\\\Queries\\\\Servers\\:\\:__invoke\\(\\) return type with generic class Illuminate\\\\Support\\\\Collection does not specify its types\\: TKey, TValue$#"
count: 1
Expand Down Expand Up @@ -77,19 +67,9 @@ parameters:

-
message: "#^Cannot call method diffInMilliseconds\\(\\) on Carbon\\\\CarbonImmutable\\|null\\.$#"
count: 1
count: 3
path: src/Recorders/Jobs.php

-
message: "#^Unable to resolve the template type TKey in call to function collect$#"
count: 1
path: src/Recorders/QueueSizes.php

-
message: "#^Unable to resolve the template type TValue in call to function collect$#"
count: 1
path: src/Recorders/QueueSizes.php

-
message: "#^Call to an undefined method Illuminate\\\\Contracts\\\\Http\\\\Kernel\\:\\:whenRequestLifecycleIsLongerThan\\(\\)\\.$#"
count: 1
Expand Down
239 changes: 208 additions & 31 deletions resources/views/livewire/queues.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,217 @@
<x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
<x-pulse::card-header name="Queues">
<x-pulse::card-header
name="Queues"
title="Time: {{ $time }}; 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-sm text-gray-700 dark:text-gray-300 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-sm text-gray-700 dark:text-gray-300 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-sm text-gray-700 dark:text-gray-300 font-medium">
<div class="h-0.5 w-3 rounded-full bg-[#9333ea]"></div>
Processed
</div>
<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 font-medium">
<div class="h-0.5 w-3 rounded-full bg-[#eab308]"></div>
Released
</div>
<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 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::card-body :expand="$expand" wire:poll.5s="">
<x-pulse::table>
<colgroup>
<col width="100%" />
<col width="0%" />
<col width="0%" />
</colgroup>
<x-pulse::thead>
<tr>
<x-pulse::th class="text-left">Name</x-pulse::th>
<x-pulse::th class="text-right">Pending</x-pulse::th>
<x-pulse::th class="text-right">Failed</x-pulse::th>
</tr>
</x-pulse::thead>
<tbody>
@foreach ($queues as $queue)
<tr class="h-2 first:h-0"></tr>
<tr wire:key="{{ $queue['queue'].$queue['connection'] }}">
<x-pulse::td class="text-gray-700 dark:text-gray-300 text-sm">
{{ $queue['queue'] }}{{ $showConnection ? '('.$queue['connection'].')' : '' }}
</x-pulse::td>
<x-pulse::td class="text-gray-700 dark:text-gray-300 text-sm font-bold text-right tabular-nums">
{{ number_format($queue['size']) }}
</x-pulse::td>
<x-pulse::td class="text-gray-700 dark:text-gray-300 text-sm font-bold text-right tabular-nums">
{{ number_format($queue['failed']) }}
</x-pulse::td>
</tr>
@endforeach
</tbody>
</x-pulse::table>
<div
x-data="{
loadingNewDataset: false,
init() {
Livewire.on('period-changed', () => (this.loadingNewDataset = true))

Livewire.hook('commit', ({ component, succeed }) => {
if (component.name === $wire.__instance.name) {
succeed(() => this.loadingNewDataset = false)
}
})
}
}"
class="min-h-full flex flex-col"
:class="loadingNewDataset ? 'opacity-25 animate-pulse' : ''"
>
@if (count($queues) === 0)
<x-pulse::no-results class="flex-1" />
@else
<div class="grid gap-3 mx-px mb-px">
@foreach ($queues as $queue => $readings)
<div>
<h3 class="font-bold text-gray-700 dark:text-gray-300">
@if ($showConnection)
{{ $queue }}
@else
{{ Str::after($queue, ':') }}
@endif
</h3>
@php $latest = $readings->last() @endphp
@php
$highest = $readings->map(fn ($reading) => max(
$reading->queued,
$reading->processing,
$reading->released,
$reading->processed,
$reading->failed,
))->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">{{ number_format($highest) }}</div>

<div
wire:ignore
class="h-14"
x-data="{
init() {
let chart = new Chart(
this.$refs.canvas,
{
type: 'line',
data: {
labels: @js(collect($readings)->pluck('date')),
datasets: [
{
label: 'Queued',
borderColor: 'rgba(107,114,128,0.5)',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('queued')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
order: 4,
},
{
label: 'Processing',
borderColor: 'rgba(147,51,234,0.5)',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('processing')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
order: 3,
},
{
label: 'Released',
borderColor: '#eab308',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('released')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
order: 2,
},
{
label: 'Processed',
borderColor: '#9333ea',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('processed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
order: 1,
},
{
label: 'Failed',
borderColor: '#e11d48',
borderWidth: 2,
borderCapStyle: 'round',
data: @js(collect($readings)->pluck('failed')),
pointStyle: false,
tension: 0.2,
spanGaps: false,
order: 0,
},
],
},
options: {
maintainAspectRatio: false,
layout: {
autoPadding: false,
padding: {
top: 1,
},
},
scales: {
x: {
display: false,
},
y: {
display: false,
min: 1,
ticks: {
stepSize: 1,
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
callbacks: {
beforeBody: (context) => context
.map(item => `${item.dataset.label}: ${item.formattedValue}`)
.join(', '),
label: () => null,
},
},
},
},
}
)

Livewire.on('queues-chart-update', ({ queues }) => {
if (chart === undefined) {
return
}

if (queues['{{ $queue }}'] === undefined && chart) {
chart.destroy()
chart = undefined
return
}

chart.data.labels = queues['{{ $queue }}'].map(reading => reading.date)
chart.data.datasets[0].data = queues['{{ $queue }}'].map(reading => reading.queued)
chart.data.datasets[1].data = queues['{{ $queue }}'].map(reading => reading.processing)
chart.data.datasets[2].data = queues['{{ $queue }}'].map(reading => reading.released)
chart.data.datasets[3].data = queues['{{ $queue }}'].map(reading => reading.processed)
chart.data.datasets[4].data = queues['{{ $queue }}'].map(reading => reading.failed)
chart.update()
})
}
}"
>
<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
</div>
</x-pulse::card-body>
</x-pulse::card>
Loading