Storage

composer.json

@@ -26,7 +26,7 @@
         "orchestra/testbench": "^8.0",
         "pestphp/pest": "^2.0",
         "phpstan/phpstan": "^1.10",
-        "predis/predis": "^2.1"
+        "predis/predis": "^2.2"
     },
     "autoload": {
         "psr-4": {

config/pulse.php

@@ -18,6 +18,9 @@
     // in milliseconds
     'slow_query_threshold' => 1000,
 
+    // in milliseconds
+    'slow_job_threshold' => 1000,
+
     // queues to show stats for
     'queues' => [
         'default',

database/migrations/2023_06_07_000001_create_pulse_tables.php

@@ -0,0 +1,83 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // TODO:
+        // - Review column types. Most of these likely need to be a text column, even "route".
+        // - We may need to keep a hashed version of the text columns to index and group by.
+        // - Do another pass at the indexes to ensure that they are optimized correctly.
+        Schema::create('pulse_servers', function (Blueprint $table) {
+            $table->timestamp('date');
+            $table->string('server');
+            $table->unsignedTinyInteger('cpu_percent');
+            $table->unsignedInteger('memory_used');
+            $table->unsignedInteger('memory_total');
+            $table->json('storage');
+
+            $table->index(['server', 'date']);
+        });
+
+        Schema::create('pulse_requests', function (Blueprint $table) {
+            $table->timestamp('date');
+            $table->string('user_id')->nullable();
+            $table->string('route');
+            $table->unsignedInteger('duration');
+
+            $table->index(['date', 'user_id'], 'user_usage');
+            $table->index(['date', 'route', 'duration'], 'slow_endpoints');
+        });
+
+        Schema::create('pulse_exceptions', function (Blueprint $table) {
+            $table->timestamp('date');
+            $table->string('user_id')->nullable();
+            $table->string('class');
+            $table->string('location');
+
+            $table->index(['date', 'class', 'location']);
+        });
+
+        Schema::create('pulse_queries', function (Blueprint $table) {
+            $table->timestamp('date');
+            $table->string('user_id')->nullable();
+            $table->string('sql');
+            $table->unsignedInteger('duration');
+
+            $table->index(['date', 'sql', 'duration'], 'slow_queries');
+        });
+
+        Schema::create('pulse_jobs', function (Blueprint $table) {
+            $table->timestamp('date');
+            $table->string('user_id')->nullable();
+            $table->string('job');
+            $table->string('job_id');
+            $table->timestamp('processing_started_at', 3)->nullable();
+            $table->unsignedInteger('duration')->nullable();
+
+            // TODO: verify this update index. Needs to find job quickly.
+            $table->index(['job_id']);
+            $table->index(['date', 'job', 'duration'], 'slow_jobs');
+            $table->index(['date', 'user_id'], 'user_usage');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('pulse_servers');
+        Schema::dropIfExists('pulse_requests');
+        Schema::dropIfExists('pulse_exceptions');
+        Schema::dropIfExists('pulse_queries');
+        Schema::dropIfExists('pulse_jobs');
+    }
+};

resources/css/pulse.css

@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+[x-cloak] {
+    display: none;
+}

resources/views/components/loading-indicator.blade.php

@@ -0,0 +1,5 @@
+<div {{ $attributes }} class="flex flex-col items-center justify-center p-4 py-6">
+    <div class="animate-pulse bg-gray-50 rounded-full text-xs leading-none px-2 py-1 text-gray-500">
+        LOADING
+    </div>
+</div>

resources/views/components/pulse.blade.php

@@ -37,6 +37,7 @@
                             </svg>
                             <span class="ml-2 text-2xl text-gray-700 font-medium"><b class="font-bold">Laravel</b> Pulse</span>
                         </div>
+                        <livewire:period-selector />
                     </div>
                 </div>
             </header>

resources/views/dashboard.blade.php

@@ -2,8 +2,9 @@
     <livewire:servers />
     <livewire:usage />
     <livewire:exceptions />
-    <livewire:slow-endpoints />
+    <livewire:slow-routes />
     <livewire:slow-queries />
+    <livewire:slow-jobs />
     <livewire:cache />
     <livewire:queues />
 </x-pulse>

resources/views/livewire/exceptions.blade.php

@@ -1,56 +1,90 @@
-<x-pulse::card
-    class="col-span-3"
-    wire:poll=""
->
+<x-pulse::card class="col-span-3">
     <x-slot:title>
         <x-pulse::card-title class="flex items-center">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-2 stroke-gray-400">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082" />
             </svg>
             <span>
-                Exceptions
-                <small class="ml-2 text-gray-400 text-xs font-medium">Past 7 days</small>
+                <span title="Time: {{ $time }}; Run at: {{ $runAt }};">Exceptions</span>
+                <small class="ml-2 text-gray-400 text-xs font-medium">past {{ match ($this->period) {
+                    '6_hours' => '6 hours',
+                    '24_hours' => '24 hours',
+                    '7_days' => '7 days',
+                    default => 'hour',
+                } }}</small>
             </span>
         </x-pulse::card-title>
-        <select wire:model="sortBy" class="rounded-md border-gray-200 text-gray-700 py-1 text-sm">
-            <option value="count">Trending</option>
-            <option value="last_occurrence">Recent</option>
-        </select>
+        <div class="flex items-center gap-2">
+            <div class="text-sm text-gray-700">Sort by</div>
+            <select
+                wire:model="orderBy"
+                wire:change="$emit('exceptionChanged', $event.target.value)"
+                class="rounded-md border-gray-200 text-gray-700 py-1 text-sm"
+            >
+                <option value="count">count</option>
+                <option value="last_occurrence">recent</option>
+            </select>
+        </div>
     </x-slot:title>
 
-    <div class="max-h-56 h-full relative overflow-y-auto">
-        @if (count($exceptions) === 0)
-            <x-pulse::no-results />
-        @else
-            <x-pulse::table>
-                <x-pulse::thead>
-                    <tr>
-                        <x-pulse::th class="w-full text-left">Type</x-pulse::th>
-                        <x-pulse::th class="text-center">Latest</x-pulse::th>
-                        <x-pulse::th class="text-right">Count</x-pulse::th>
-                    </tr>
-                </x-pulse::thead>
-                <tbody>
-                    @foreach ($exceptions as $exception)
-                        <tr>
-                            <x-pulse::td>
-                                <code class="block text-xs text-gray-900">
-                                    {{ $exception['class'] }}
-                                </code>
-                                <p class="text-xs text-gray-500">
-                                    {{ $exception['location'] }}
-                                </p>
-                            </x-pulse::td>
-                            <x-pulse::td class="text-center text-gray-700 text-sm font-bold whitespace-nowrap">
-                                {{ $exception['last_occurrence'] !== null ? Carbon\Carbon::parse($exception['last_occurrence'])->fromNow() : 'Unknown' }}
-                            </x-pulse::td>
-                            <x-pulse::td class="text-right text-gray-700 text-sm font-bold">
-                                {{ $exception['count'] }}
-                            </x-pulse::td>
-                        </tr>
-                    @endforeach
-                </tbody>
-            </x-pulse::table>
-        @endif
+    <div class="max-h-56 h-full relative overflow-y-auto" wire:poll.5s>
+        <script>
+            const initialExceptionDataLoaded = @js($initialDataLoaded)
+        </script>
+        <div x-data="{
+            initialDataLoaded: initialExceptionDataLoaded,
+            loadingNewDataset: false,
+            init() {
+                ['periodChanged', 'exceptionChanged'].forEach(event => Livewire.on(event, () => (this.loadingNewDataset = true)))
+
+                window.addEventListener('exceptions:dataLoaded', () => {
+                    this.initialDataLoaded = true
+                    this.loadingNewDataset = false
+                })
+
+                if (! this.initialDataLoaded) {
+                    @this.loadData()
+                }
+            }
+        }">
+            <x-pulse::loading-indicator x-cloak x-show="! initialDataLoaded" />
+            <div x-cloak x-show="initialDataLoaded">
+                <div :class="loadingNewDataset ? 'opacity-25 animate-pulse' : ''">
+                    @if ($initialDataLoaded && count($exceptions) === 0)
+                        <x-pulse::no-results />
+                    @elseif ($initialDataLoaded && count($exceptions) > 0)
+                        <x-pulse::table>
+                            <x-pulse::thead>
+                                <tr>
+                                    <x-pulse::th class="w-full text-left">Type</x-pulse::th>
+                                    <x-pulse::th class="text-center">Latest</x-pulse::th>
+                                    <x-pulse::th class="text-right">Count</x-pulse::th>
+                                </tr>
+                            </x-pulse::thead>
+                            <tbody>
+                                @foreach ($exceptions as $exception)
+                                    <tr>
+                                        <x-pulse::td>
+                                            <code class="block text-xs text-gray-900">
+                                                {{ $exception->class }}
+                                            </code>
+                                            <p class="text-xs text-gray-500">
+                                                {{ $exception->location }}
+                                            </p>
+                                        </x-pulse::td>
+                                        <x-pulse::td class="text-center text-gray-700 text-sm font-bold whitespace-nowrap">
+                                            {{ $exception->last_occurrence !== null ? Carbon\Carbon::parse($exception->last_occurrence)->fromNow() : 'Unknown' }}
+                                        </x-pulse::td>
+                                        <x-pulse::td class="text-right text-gray-700 text-sm font-bold">
+                                            {{ $exception->count }}
+                                        </x-pulse::td>
+                                    </tr>
+                                @endforeach
+                            </tbody>
+                        </x-pulse::table>
+                    @endif
+                </div>
+            </div>
+        </div>
     </div>
 </x-pulse::card>

resources/views/livewire/period-selector.blade.php

@@ -0,0 +1,6 @@
+<div class="flex gap-2">
+    <button wire:click="setPeriod('1_hour')" class="font-semibold text-lg {{ $period === '1_hour' ? 'text-gray-700' : 'text-gray-300 hover:text-gray-400'}}">1h</button>
+    <button wire:click="setPeriod('6_hours')" class="font-semibold text-lg {{ $period === '6_hours' ? 'text-gray-700' : 'text-gray-300 hover:text-gray-400'}}">6h</button>
+    <button wire:click="setPeriod('24_hours')" class="font-semibold text-lg {{ $period === '24_hours' ? 'text-gray-700' : 'text-gray-300 hover:text-gray-400'}}">24h</button>
+    <button wire:click="setPeriod('7_days')" class="font-semibold text-lg {{ $period === '7_days' ? 'text-gray-700' : 'text-gray-300 hover:text-gray-400'}}">7d</button>
+</div>