├── .gitignore
├── LICENSE.md
├── README.md
├── composer.json
├── example.png
├── resources
    └── views
    │   └── livewire
    │       └── database-card.blade.php
└── src
    ├── DatabaseServiceProvider.php
    ├── Livewire
        └── Database.php
    └── Recorders
        └── DatabaseRecorder.php


/.gitignore:
--------------------------------------------------------------------------------
1 | /vendor
2 | .env
3 | .phpunit.result.cache
4 | composer.lock
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) Jamie Schouten j4mie@hey.com
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Database status card for Laravel Pulse
  2 | 
  3 | Get real-time insights into the status of your database
  4 | 
  5 | ## Example
  6 | 
  7 | ![example](example.png)
  8 | 
  9 | ## Installation
 10 | 
 11 | Install the package using Composer:
 12 | 
 13 | ```shell
 14 | composer require maantje/pulse-database
 15 | ```
 16 | 
 17 | ## Register the recorder
 18 | 
 19 | In your `pulse.php` configuration file, register the DatabaseRecorder with the desired settings:
 20 | 
 21 | Uncertain about the available values? You can execute `show status` against your database to view all the options at your disposal.
 22 | 
 23 | ```php
 24 | return [
 25 |     // ...
 26 |     
 27 |     'recorders' => [
 28 |         \Maantje\Pulse\Database\Recorders\DatabaseRecorder::class => [
 29 |             'connections' => [
 30 |                 'mysql_another' => [
 31 |                     'values' => [
 32 |                         'Connections',
 33 |                         'Threads_connected',
 34 |                         'Threads_running',
 35 |                         'Innodb_buffer_pool_reads',
 36 |                         'Innodb_buffer_pool_read_requests',
 37 |                         'Innodb_buffer_pool_pages_total',
 38 |                         'Max_used_connections'
 39 |                     ],
 40 |                     'aggregates' => [
 41 |                         'avg' => [
 42 |                             'Threads_connected',
 43 |                             'Threads_running',
 44 |                             'Innodb_buffer_pool_reads',
 45 |                             'Innodb_buffer_pool_read_requests',
 46 |                             'Innodb_buffer_pool_pages_total',
 47 |                         ],
 48 |                         'max' => [
 49 |                             //
 50 |                         ],
 51 |                         'count' => [
 52 |                             //
 53 |                         ],
 54 |                     ],
 55 |                 ],
 56 |                 'mysql' => [
 57 |                     'values' => [
 58 |                         'Connections',
 59 |                         'Threads_connected',
 60 |                         'Threads_running',
 61 |                         'Innodb_buffer_pool_reads',
 62 |                         'Innodb_buffer_pool_read_requests',
 63 |                         'Innodb_buffer_pool_pages_total',
 64 |                         'Max_used_connections'
 65 |                     ],
 66 |                     'aggregates' => [
 67 |                         'avg' => [
 68 |                             'Threads_connected',
 69 |                             'Threads_running',
 70 |                             'Innodb_buffer_pool_reads',
 71 |                             'Innodb_buffer_pool_read_requests',
 72 |                             'Innodb_buffer_pool_pages_total',
 73 |                         ],
 74 |                         'max' => [
 75 |                             //
 76 |                         ],
 77 |                         'count' => [
 78 |                             //
 79 |                         ],
 80 |                     ],
 81 |                 ]
 82 |             ]
 83 |         ],
 84 |     ]
 85 | ]
 86 | ```
 87 | 
 88 | Ensure you're running [the `pulse:check` command](https://laravel.com/docs/10.x/pulse#capturing-entries).
 89 | 
 90 | ## Add to your dashboard
 91 | 
 92 | Integrate the card into your Pulse dashboard by [publish the vendor view](https://laravel.com/docs/10.x/pulse#dashboard-customization).
 93 | and then adding the following to the `dashboard.blade.php` file:
 94 | 
 95 | ```html
 96 | <livewire:database cols='6' title="Active threads" :values="['Threads_connected', 'Threads_running']" :graphs="[
 97 |     'avg' => ['Threads_connected' => '#ffffff', 'Threads_running' => '#3c5dff'],
 98 | ]" />
 99 | 
100 | <livewire:database cols='6' title="Connections" :values="['Connections', 'Max_used_connections']" />
101 | 
102 | <livewire:database cols='full' title="Innodb" :values="['Innodb_buffer_pool_reads', 'Innodb_buffer_pool_read_requests', 'Innodb_buffer_pool_pages_total']" :graphs="[
103 |     'avg' => ['Innodb_buffer_pool_reads' => '#ffffff', 'Innodb_buffer_pool_read_requests' => '#3c5dff'],
104 | ]" />
105 | ```
106 | 
107 | And that's it! Enjoy enhanced visibility into your database status on your Pulse dashboard.
108 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "maantje/pulse-database",
 3 |     "description": "A Laravel Pulse card for database status",
 4 |     "keywords": ["laravel", "database", "database-status"],
 5 |     "type": "library",
 6 |     "license": "MIT",
 7 |     "authors": [
 8 |         {
 9 |             "name": "Jamie Schouten",
10 |             "email": "j4mie@hey.com"
11 |         }
12 |     ],
13 |     "require": {
14 |         "php": "^8.1",
15 |         "illuminate/support": "*",
16 |         "laravel/pulse": "^1"
17 |     },
18 |     "require-dev": {
19 |         "orchestra/testbench": "^8",
20 |         "mockery/mockery": "^1.5.0",
21 |         "phpunit/phpunit": "^10"
22 |     },
23 |     "autoload": {
24 |         "psr-4": {
25 |             "Maantje\\Pulse\\Database\\": "src/"
26 |         }
27 |     },
28 |     "extra": {
29 |         "laravel": {
30 |             "providers": [
31 |                 "Maantje\\Pulse\\Database\\DatabaseServiceProvider"
32 |             ]
33 |         }
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maantje/pulse-database/a3f3205dcfc197aae7413f0cff0e79293ae3a2ea/example.png


--------------------------------------------------------------------------------
/resources/views/livewire/database-card.blade.php:
--------------------------------------------------------------------------------
  1 | @php use Illuminate\Support\Str; @endphp
  2 | <x-pulse::card :cols="$cols" :rows="$rows" :class="$class">
  3 |     <x-pulse::card-header
  4 |         :name="$title"
  5 |         title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};"
  6 |         details="past {{ $this->periodForHumans() }}"
  7 |     >
  8 |         <x-slot:actions>
  9 |             <div class="flex flex-wrap gap-4">
 10 |                 @foreach($graphs as $type => $aggregates)
 11 |                     @foreach($aggregates as $aggregate => $color)
 12 |                         <div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 font-medium">
 13 |                             <div class="h-0.5 w-3 rounded-full" style="background-color: {{ $color }}"></div>
 14 |                             {{ str_replace('_', ' ', ucfirst($aggregate)) }} {{ $type }}
 15 |                         </div>
 16 |                     @endforeach
 17 |                 @endforeach
 18 |             </div>
 19 |         </x-slot:actions>
 20 |     </x-pulse::card-header>
 21 |     @if ($connections->isEmpty())
 22 |         <x-pulse::no-results/>
 23 |     @else
 24 |         <div wire:poll.5s class="overflow-x-auto pb-px">
 25 |             @foreach ($connections as $slug => $connection)
 26 |                 <div class="grid gap-4 mx-px mb-px mt-4">
 27 |                     <div wire:key="{{ $slug }}-{{ Str::slug($title) }}">
 28 |                         @php
 29 |                             $highest = $connection->aggregates->flatten()->max();
 30 |                         @endphp
 31 |                         <div class="grid grid-cols-{{count($values) + 1}} gap-3 text-center items-center">
 32 |                             <div class="flex">
 33 |                                 <div wire:key="{{ $slug }}-indicator"
 34 |                                      class="flex items-center {{ $connections->count() > 1 ? 'py-2' : '' }}"
 35 |                                      title="{{ $connection->updated_at->fromNow() }}">
 36 |                                     @if ($connection->recently_reported)
 37 |                                         <div class="w-5 flex justify-center mr-1">
 38 |                                             <div class="h-1 w-1 bg-green-500 rounded-full animate-pulse"></div>
 39 |                                         </div>
 40 |                                     @else
 41 |                                         <x-pulse::icons.signal-slash class="w-5 h-5 stroke-red-500 mr-1"/>
 42 |                                     @endif
 43 |                                 </div>
 44 |                                 <div wire:key="{{ $slug }}-name"
 45 |                                      class="flex items-center pr-8 xl:pr-12 {{ $connections->count() > 1 ? 'py-2' : '' }} {{ !$connection->recently_reported ? 'opacity-25 animate-pulse' : '' }}">
 46 |                                     <x-pulse::icons.server class="w-6 h-6 mr-2 stroke-gray-500 dark:stroke-gray-400"/>
 47 |                                     <span class="text-base font-bold text-gray-600 dark:text-gray-300"
 48 |                                           title="Time: {{ number_format($time) }}ms; Run at: {{ $runAt }};">{{ $connection->name }}</span>
 49 |                                 </div>
 50 |                             </div>
 51 |                             @foreach($values as $value)
 52 |                                 <div class="flex flex-col justify-center @sm:block">
 53 |                                 <span class="text-xl uppercase font-bold text-gray-700 dark:text-gray-300 tabular-nums">
 54 |                                     {{ \Illuminate\Support\Number::format($connection->$value) }}
 55 |                                 </span>
 56 |                                     <span class="text-xs uppercase font-bold text-gray-500 dark:text-gray-400">
 57 |                                     {{ str_replace('_', ' ', ucfirst($value)) }}
 58 |                                 </span>
 59 |                                 </div>
 60 |                             @endforeach
 61 |                         </div>
 62 | 
 63 |                         @if(count($graphs) > 0)
 64 |                         <div class="mt-3 relative">
 65 |                             <div
 66 |                                 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">
 67 |                                 {{ number_format($highest) }}
 68 |                             </div>
 69 |                             <div
 70 |                                 wire:ignore
 71 |                                 x-data="{
 72 |                                     init() {
 73 |                                         let chart = new Chart(
 74 |                                             this.$refs.canvas,
 75 |                                             {
 76 |                                                 type: 'line',
 77 |                                                 data: {
 78 |                                                     labels: @js($connection->aggregates->first()->first()->keys()),
 79 |                                                     datasets: [
 80 |                                                         @foreach($graphs as $type => $aggregates)
 81 |                                                             @foreach($connection->aggregates[$type] as $key => $data)
 82 |                                                                 {
 83 |                                                                     label: '{{ str_replace('_', ' ', ucfirst($key)) }} {{ $type }}',
 84 |                                                                     borderColor: '{{ $aggregates[$key] }}',
 85 |                                                                     data: @js($data),
 86 |                                                                 },
 87 |                                                             @endforeach
 88 |                                                         @endforeach
 89 |                                                     ],
 90 |                                                 },
 91 |                                                 options: {
 92 |                                                     maintainAspectRatio: false,
 93 |                                                     layout: {
 94 |                                                         autoPadding: false,
 95 |                                                         padding: {
 96 |                                                             top: 1,
 97 |                                                         },
 98 |                                                     },
 99 |                                                     datasets: {
100 |                                                         line: {
101 |                                                             borderWidth: 2,
102 |                                                             borderCapStyle: 'round',
103 |                                                             pointHitRadius: 10,
104 |                                                             pointStyle: false,
105 |                                                             tension: 0.2,
106 |                                                             spanGaps: false,
107 |                                                             segment: {
108 |                                                                 borderColor: (ctx) => ctx.p0.raw === 0 && ctx.p1.raw === 0 ? 'transparent' : undefined,
109 |                                                             }
110 |                                                         }
111 |                                                     },
112 |                                                     scales: {
113 |                                                         x: {
114 |                                                             display: false,
115 |                                                         },
116 |                                                         y: {
117 |                                                             display: false,
118 |                                                             min: 0,
119 |                                                         },
120 |                                                     },
121 |                                                     plugins: {
122 |                                                         legend: {
123 |                                                             display: false,
124 |                                                         },
125 |                                                         tooltip: {
126 |                                                             mode: 'index',
127 |                                                             position: 'nearest',
128 |                                                             intersect: false,
129 |                                                             callbacks: {
130 |                                                                 beforeBody: (context) => context
131 |                                                                     .map(item => `${item.dataset.label}: ${item.formattedValue}`)
132 |                                                                     .join(', '),
133 |                                                                 label: () => null,
134 |                                                             },
135 |                                                         },
136 |                                                     },
137 |                                                 },
138 |                                             }
139 |                                         )
140 | 
141 |                                         Livewire.on('{{Str::slug($title)}}-database-chart-update', ({ connections }) => {
142 |                                             if (chart === undefined) {
143 |                                                 return
144 |                                             }
145 | 
146 |                                             if (connections['{{ $slug }}'] === undefined && chart) {
147 |                                                 chart.destroy()
148 |                                                 chart = undefined
149 |                                                 return
150 |                                             }
151 | 
152 |                                             @foreach($graphs as $type => $aggregates)
153 |                                                 @foreach($aggregates as $key => $color)
154 |                                                     @if($loop->first)
155 |                                                         chart.data.labels = Object.keys(connections['{{ $slug }}']['aggregates']['{{ $type }}']['{{ $key }}'])
156 |                                                     @endif
157 |                                                     chart.data.datasets[{{ $loop->index }}].data = Object.values(connections['{{ $slug }}']['aggregates']['{{ $type }}']['{{ $key }}'])
158 |                                                 @endforeach
159 |                                             @endforeach
160 | 
161 |                                             chart.update()
162 |                                         })
163 |                                     }
164 |                                 }"
165 |                             >
166 |                                 <canvas x-ref="canvas"
167 |                                         class="ring-1 h-12 ring-gray-900/5 dark:ring-gray-100/10 bg-gray-50 dark:bg-gray-800 rounded-md shadow-sm"></canvas>
168 |                             </div>
169 |                         </div>
170 |                         @endif
171 |                     </div>
172 |                 </div>
173 |             @endforeach
174 |         </div>
175 | 
176 |     @endif
177 | </x-pulse::card>
178 | 


--------------------------------------------------------------------------------
/src/DatabaseServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Maantje\Pulse\Database;
 4 | 
 5 | use Maantje\Pulse\Database\Livewire\Database;
 6 | use Illuminate\Foundation\Application;
 7 | use Illuminate\Support\ServiceProvider;
 8 | use Livewire\LivewireManager;
 9 | 
10 | class DatabaseServiceProvider extends ServiceProvider
11 | {
12 |     public function boot(): void
13 |     {
14 |         $this->loadViewsFrom(__DIR__ . '/../resources/views', 'database');
15 | 
16 |         $this->callAfterResolving('livewire', function (LivewireManager $livewire, Application $app) {
17 |             $livewire->component('database', Database::class);
18 |         });
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Livewire/Database.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Maantje\Pulse\Database\Livewire;
 4 | 
 5 | use Carbon\CarbonImmutable;
 6 | use Illuminate\Support\Collection;
 7 | use Illuminate\Support\Facades\Request;
 8 | use Illuminate\Support\Facades\View;
 9 | use Illuminate\Support\Str;
10 | use Laravel\Pulse\Facades\Pulse;
11 | use Laravel\Pulse\Livewire\Card;
12 | use Laravel\Pulse\Livewire\Concerns\HasPeriod;
13 | use Laravel\Pulse\Livewire\Concerns\RemembersQueries;
14 | use Livewire\Attributes\Lazy;
15 | use Maantje\Pulse\Database\Recorders\DatabaseRecorder;
16 | 
17 | class Database extends Card
18 | {
19 |     use HasPeriod;
20 |     use RemembersQueries;
21 | 
22 |     public array $graphs = [];
23 |     public array $values;
24 |     public string $title;
25 | 
26 |     public function __construct()
27 |     {
28 | 
29 |     }
30 | 
31 |     #[Lazy]
32 |     public function render()
33 |     {
34 |         [$connections, $time, $runAt] = $this->remember(function () {
35 |             $graphs = [];
36 | 
37 |             foreach ($this->graphs as $aggregate => $graph) {
38 |                 $graphs[$aggregate] = Pulse::graph(array_keys($graph), $aggregate, $this->periodAsInterval());
39 |             }
40 | 
41 | 
42 |             return Pulse::values('database_connection')
43 |                 ->map(function ($fpm, $slug) use ($graphs) {
44 |                     $values = json_decode($fpm->value, flags: JSON_THROW_ON_ERROR);
45 | 
46 |                     return (object) [
47 |                         ...((array) $values),
48 |                         'aggregates' => collect($this->graphs)->reduce(function (Collection $carry, $aggregates, $type) use ($slug, $graphs) {
49 |                             $carry[$type] = collect(array_keys($aggregates))->mapWithKeys(function ($value) use ($slug, $type, $graphs) {
50 |                                 return [$value => $graphs[$type]->get($slug)?->get($value) ?? collect()];
51 |                             });
52 | 
53 |                             return $carry;
54 |                         }, collect()),
55 |                         'updated_at' => $updatedAt = CarbonImmutable::createFromTimestamp($fpm->timestamp),
56 |                         'recently_reported' => $updatedAt->isAfter(now()->subSeconds(30)),
57 |                     ];
58 |                 });
59 |         }, Str::slug($this->title));
60 | 
61 |         if (Request::hasHeader('X-Livewire')) {
62 |             $this->dispatch(Str::slug($this->title). '-database-chart-update', connections: $connections);
63 |         }
64 | 
65 |         return View::make('database::livewire.database-card', [
66 |             'connections' => $connections,
67 |             'time' => $time,
68 |             'runAt' => $runAt,
69 |         ]);
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/Recorders/DatabaseRecorder.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace Maantje\Pulse\Database\Recorders;
 4 | 
 5 | use Illuminate\Config\Repository;
 6 | use Illuminate\Database\DatabaseManager;
 7 | use Illuminate\Support\Str;
 8 | use Laravel\Pulse\Events\SharedBeat;
 9 | use Laravel\Pulse\Pulse;
10 | 
11 | class DatabaseRecorder
12 | {
13 |     /**
14 |      * The events to listen for.
15 |      *
16 |      * @var class-string
17 |      */
18 |     public string $listen = SharedBeat::class;
19 | 
20 |     /**
21 |      * Create a new recorder instance.
22 |      */
23 |     public function __construct(
24 |         protected Pulse $pulse,
25 |         protected Repository $config,
26 |         protected DatabaseManager $manager,
27 |     ) {
28 |         //
29 |     }
30 | 
31 |     public function record(SharedBeat $event): void
32 |     {
33 |         $class = self::class;
34 | 
35 |         foreach ($this->config->get('pulse.recorders.'.self::class.'.connections', []) as $connectionName => $config) {
36 |             $connection = $this->manager->connection($connectionName);
37 | 
38 |             $keys = collect()
39 |                 ->merge($this->config->get("pulse.recorders.$class.connections.$connectionName.values", []))
40 |                 ->merge($maxAggregates = $this->config->get("pulse.recorders.$class.connections.$connectionName.aggregates.max", []))
41 |                 ->merge($avgAggregates = $this->config->get("pulse.recorders.$class.connections.$connectionName.aggregates.avg", []))
42 |                 ->merge($countAggregates = $this->config->get("pulse.recorders.$class.connections.$connectionName.aggregates.count", []));
43 | 
44 |             $status = collect($connection->select('show status'))
45 |                 ->filter(function ($row) use ($keys) {
46 |                     return $keys->contains($row->Variable_name);
47 |                 })
48 |                 ->mapWithKeys(function ($row) {
49 |                     return [$row->Variable_name => $row->Value];
50 |                 });
51 | 
52 | 
53 |             $slug = Str::slug($connection->getName());
54 | 
55 |             foreach ($maxAggregates as $max) {
56 |                 $this->pulse->record($max, $slug, $status->get($max), $event->time)->max()->onlyBuckets();
57 |             }
58 | 
59 |             foreach ($avgAggregates as $avg) {
60 |                 $this->pulse->record($avg, $slug, $status->get($avg), $event->time)->avg()->onlyBuckets();
61 |             }
62 | 
63 |             foreach ($countAggregates as $count) {
64 |                 $this->pulse->record($count, $slug, $status->get($count), $event->time)->count()->onlyBuckets();
65 |             }
66 | 
67 |             $this->pulse->set('database_connection', $slug, json_encode([
68 |                 ...$status,
69 |                 'name' => $connection->getName(),
70 |             ]));
71 |         }
72 |     }
73 | }
74 | 


--------------------------------------------------------------------------------