Add dashboard

config/routes.yaml

@@ -2,9 +2,9 @@ patchlevel_event_sourcing_dashboard_default_index:
   path: /
   controller: Patchlevel\EventSourcingDashboardBundle\Controller\DefaultController::indexAction
 
-patchlevel_event_sourcing_dashboard_default_dashboard:
+patchlevel_event_sourcing_dashboard_dashboard_index:
   path: /dashboard
-  controller: Patchlevel\EventSourcingDashboardBundle\Controller\DefaultController::dashboardAction
+  controller: Patchlevel\EventSourcingDashboardBundle\Controller\DashboardController::indexAction
 
 patchlevel_event_sourcing_dashboard_store_show:
   path: /store

docs/dashboard.md

@@ -0,0 +1,43 @@
+# Dashboard
+
+The dashboard view is the landing page of the bundle. It gives you an overview of your event
+sourcing setup at a glance, before you drill down into the store, a single aggregate or your
+subscriptions. The index route of the bundle redirects here.
+
+## Overview
+
+Four cards summarize the current state of your system:
+
+* **Events in store**: how many messages your event store holds in total
+* **Aggregates**: how many aggregate roots are registered
+* **Registered events**: how many event classes are registered
+* **Subscriptions**: how many subscriptions the subscription engine knows about
+
+Each card links to the view where you can explore that number in detail.
+
+## Subscription health
+
+Below the cards you see how your subscriptions are distributed across the statuses of the
+subscription engine, for example `active`, `booting`, `paused` or `error`. Statuses without any
+subscription are hidden, so in a healthy system you only see `active`.
+
+Every status is a link into the [subscriptions](subscriptions.md) view, pre-filtered to that
+status. This makes the dashboard a good starting point when something goes wrong: a red `error`
+or `failed` pill takes you straight to the subscriptions that need attention.
+
+:::tip
+If you only ever want to look at one thing, look at this row. Everything else on the page is
+informational, but a non-empty `error` or `failed` count means events are not being processed.
+:::
+
+## Latest events
+
+The last recorded events are listed at the bottom, newest first, with the same columns as the
+[store](store.md) view. From here you can jump into the inspection of the aggregate or stream
+that recorded an event, or open the full store listing.
+
+## Learn more
+
+* [How to browse and filter the event store](store.md)
+* [How to inspect a single aggregate](inspection.md)
+* [How to manage subscriptions](subscriptions.md)

docs/project.json

@@ -5,6 +5,7 @@
     {
       "title": "Dashboard",
       "subEntries": [
+        { "title": "Dashboard", "file": "dashboard.md" },
         { "title": "Store", "file": "store.md" },
         { "title": "Inspection", "file": "inspection.md" },
         { "title": "Events", "file": "events.md" },

docs/store.md

@@ -1,8 +1,8 @@
 # Store
 
-The store view is the landing page of the dashboard. It lists the messages in your event store in
-reverse order, newest first, so you can see what your application recorded most recently. The index
-route of the bundle redirects here.
+The store view lists the messages in your event store in reverse order, newest first, so you can
+see what your application recorded most recently. It is reachable from the sidebar and from the
+[dashboard](dashboard.md) overview.
 
 ![The store view](screenshot1.png)
 

public/build/app.css

@@ -843,6 +843,9 @@ input:where([type='file']):focus {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -873,6 +876,9 @@ input:where([type='file']):focus {
 .flow-root {
   display: flow-root;
 }
+.grid {
+  display: grid;
+}
 .hidden {
   display: none;
 }
@@ -993,9 +999,15 @@ input:where([type='file']):focus {
 .cursor-help {
   cursor: help;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .place-content-between {
   place-content: space-between;
 }
@@ -1023,13 +1035,20 @@ input:where([type='file']):focus {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
 .gap-x-1\.5 {
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
 }
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -1163,6 +1182,10 @@ input:where([type='file']):focus {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
 }
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
@@ -1186,6 +1209,10 @@ input:where([type='file']):focus {
 .bg-white\/10 {
   background-color: rgb(255 255 255 / 0.1);
 }
+.bg-yellow-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1210,6 +1237,9 @@ input:where([type='file']):focus {
 .p-2\.5 {
   padding: 0.625rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -1326,6 +1356,10 @@ input:where([type='file']):focus {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -1355,6 +1389,13 @@ input:where([type='file']):focus {
 .font-semibold {
   font-weight: 600;
 }
+.capitalize {
+  text-transform: capitalize;
+}
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
 .leading-6 {
   line-height: 1.5rem;
 }
@@ -1369,6 +1410,10 @@ input:where([type='file']):focus {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
@@ -1381,6 +1426,10 @@ input:where([type='file']):focus {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+}
 .text-indigo-200 {
   --tw-text-opacity: 1;
   color: rgb(199 210 254 / var(--tw-text-opacity, 1));
@@ -1393,6 +1442,10 @@ input:where([type='file']):focus {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
 .text-red-800 {
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity, 1));
@@ -1405,6 +1458,10 @@ input:where([type='file']):focus {
   --tw-text-opacity: 1;
   color: rgb(234 179 8 / var(--tw-text-opacity, 1));
 }
+.text-yellow-800 {
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
+}
 .opacity-0 {
   opacity: 0;
 }
@@ -1451,13 +1508,25 @@ input:where([type='file']):focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
 }
+.ring-gray-500\/10 {
+  --tw-ring-color: rgb(107 114 128 / 0.1);
+}
 .ring-gray-900\/5 {
   --tw-ring-color: rgb(17 24 39 / 0.05);
 }
+.ring-green-600\/20 {
+  --tw-ring-color: rgb(22 163 74 / 0.2);
+}
+.ring-red-600\/20 {
+  --tw-ring-color: rgb(220 38 38 / 0.2);
+}
 .ring-white {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
 }
+.ring-yellow-600\/20 {
+  --tw-ring-color: rgb(202 138 4 / 0.2);
+}
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -1526,6 +1595,10 @@ input:where([type='file']):focus {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
+.hover\:text-indigo-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1633,6 +1706,10 @@ input:where([type='file']):focus {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1735,6 +1812,10 @@ input:where([type='file']):focus {
     width: 18rem;
   }
 
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:flex-col {
     flex-direction: column;
   }

src/Controller/DashboardController.php

@@ -0,0 +1,66 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Patchlevel\EventSourcingDashboardBundle\Controller;
+
+use Patchlevel\EventSourcing\Metadata\AggregateRoot\AggregateRootRegistry;
+use Patchlevel\EventSourcing\Metadata\Event\EventRegistry;
+use Patchlevel\EventSourcing\Store\Store;
+use Patchlevel\EventSourcing\Subscription\Engine\SubscriptionEngine;
+use Patchlevel\EventSourcing\Subscription\Status;
+use Patchlevel\EventSourcing\Subscription\Subscription;
+use Symfony\Component\HttpFoundation\Response;
+use Twig\Environment;
+
+use function count;
+
+final readonly class DashboardController
+{
+    private const LATEST_MESSAGE_LIMIT = 10;
+
+    public function __construct(
+        private Environment $twig,
+        private Store $store,
+        private AggregateRootRegistry $aggregateRootRegistry,
+        private EventRegistry $eventRegistry,
+        private SubscriptionEngine $engine,
+    ) {
+    }
+
+    public function indexAction(): Response
+    {
+        $subscriptions = $this->engine->subscriptions();
+
+        return new Response(
+            $this->twig->render('@PatchlevelEventSourcingDashboard/dashboard/index.html.twig', [
+                'messageCount' => $this->store->count(),
+                'aggregateCount' => count($this->aggregateRootRegistry->aggregateNames()),
+                'eventCount' => count($this->eventRegistry->eventNames()),
+                'subscriptionCount' => count($subscriptions),
+                'subscriptionStatuses' => $this->countByStatus($subscriptions),
+                'messages' => $this->store->load(null, self::LATEST_MESSAGE_LIMIT, 0, true),
+            ]),
+        );
+    }
+
+    /**
+     * @param list<Subscription> $subscriptions
+     *
+     * @return array<string, int>
+     */
+    private function countByStatus(array $subscriptions): array
+    {
+        $counts = [];
+
+        foreach (Status::cases() as $status) {
+            $counts[$status->value] = 0;
+        }
+
+        foreach ($subscriptions as $subscription) {
+            $counts[$subscription->status()->value]++;
+        }
+
+        return $counts;
+    }
+}

src/Controller/DefaultController.php

@@ -18,7 +18,7 @@ public function __construct(
     public function indexAction(): Response
     {
         return new RedirectResponse(
-            $this->router->generate('patchlevel_event_sourcing_dashboard_store_show'),
+            $this->router->generate('patchlevel_event_sourcing_dashboard_dashboard_index'),
         );
     }
 }

src/DependencyInjection/PatchlevelEventSourcingDashboardExtension.php

@@ -13,6 +13,7 @@
 use Patchlevel\EventSourcing\Snapshot\SnapshotStore;
 use Patchlevel\EventSourcing\Store\Store;
 use Patchlevel\EventSourcing\Subscription\Engine\SubscriptionEngine;
+use Patchlevel\EventSourcingDashboardBundle\Controller\DashboardController;
 use Patchlevel\EventSourcingDashboardBundle\Controller\DefaultController;
 use Patchlevel\EventSourcingDashboardBundle\Controller\EventController;
 use Patchlevel\EventSourcingDashboardBundle\Controller\InspectionController;
@@ -56,13 +57,23 @@
         }
 
         $container->register(DefaultController::class)
             ->setArguments([
                 new Reference(RouterInterface::class),
             ])
             ->addTag('controller.service_arguments');
 
+        $container->register(DashboardController::class)
+            ->setArguments([
+                new Reference('twig'),
+                new Reference(Store::class),
+                new Reference(AggregateRootRegistry::class),
+                new Reference(EventRegistry::class),
+                new Reference(SubscriptionEngine::class),
+            ])
+            ->addTag('controller.service_arguments');
+
         $container->register(StoreController::class)
             ->setArguments([
                 new Reference('twig'),
                 new Reference(Store::class),
                 new Reference(AggregateRootRegistry::class),
@@ -71,7 +82,7 @@
             ->addTag('controller.service_arguments');
 
         $container->register(InspectionController::class)
             ->setArguments([
                 new Reference('twig'),
                 new Reference(RouterInterface::class),
                 new Reference(Store::class),
@@ -83,7 +94,7 @@
             ->addTag('controller.service_arguments');
 
         $container->register(SubscriptionController::class)
             ->setArguments([
                 new Reference('twig'),
                 new Reference(SubscriptionEngine::class),
                 new Reference(Store::class),
@@ -92,7 +103,7 @@
             ->addTag('controller.service_arguments');
 
         $container->register(EventController::class)
             ->setArguments([
                 new Reference('twig'),
                 new Reference(EventRegistry::class),
                 new Reference(ListenerProvider::class, ContainerInterface::NULL_ON_INVALID_REFERENCE),
@@ -101,8 +112,8 @@
             ])
             ->addTag('controller.service_arguments');
 
         $container->register(EventSourcingDashboardExtension::class)
             ->setArguments([
                 new Reference(AggregateRootRegistry::class),
                 new Reference(EventRegistry::class),
                 new Reference(EventSerializer::class),
@@ -111,7 +122,7 @@
             ])
             ->addTag('twig.extension');
 
         $container->register(HeroiconsExtension::class)
             ->addTag('twig.extension');
 
         $container->register('event_sourcing_dashboard.expression_language', ExpressionLanguage::class);