Merge pull request #116 from kbond/stimulus

[BC BREAK] Remove Live Components, replace with auto-refreshing dashboard widgets

README.md

@@ -299,11 +299,6 @@ when@dev:
 
 ```yaml
 zenstruck_messenger_monitor:
-    live_components:
-        enabled:              false
-
-        # Role required to view live components.
-        role:                 ROLE_MESSENGER_MONITOR
     storage:
         orm:
 

composer.json

@@ -26,7 +26,6 @@
         "matthiasnoback/symfony-dependency-injection-test": "^4.3|^5.0",
         "phpstan/phpstan": "^1.4",
         "phpunit/phpunit": "^9.6.0",
-        "symfony/asset-mapper": "^6.4|^7.0",
         "symfony/config": "^6.4|^7.0",
         "symfony/console": "^6.4|^7.0",
         "symfony/http-client-contracts": "^3.3",
@@ -35,15 +34,13 @@
         "symfony/process": "^6.4|^7.0",
         "symfony/scheduler": "^6.4|^7.0",
         "symfony/security-bundle": "^6.4|^7.0",
-        "symfony/ux-live-component": "^2.10",
         "symfony/var-dumper": "^6.4|^7.0",
         "zenstruck/console-test": "^1.5",
         "zenstruck/foundry": "^2.2"
     },
     "suggest": {
         "knplabs/knp-time-bundle": "For human readable timestamps and durations on your dashboard.",
-        "lorisleiva/cron-translator": "For human readable cron expressions on your dashboard.",
-        "symfony/ux-live-component": "For Live Components"
+        "lorisleiva/cron-translator": "For human readable cron expressions on your dashboard."
     },
     "config": {
         "preferred-install": "dist",

src/Controller/MessengerMonitorController.php

@@ -266,4 +266,51 @@ public function triggerScheduleTask(
 
         return $this->redirectToRoute('zenstruck_messenger_monitor_schedule', ['name' => $name]);
     }
+
+    #[Route('/_workers', name: 'zenstruck_messenger_monitor_workers_widget')]
+    public function workersWidget(
+        ViewHelper $helper,
+    ): Response {
+        return $this->render('@ZenstruckMessengerMonitor/components/workers.html.twig', [
+            'workers' => $helper->workers,
+        ]);
+    }
+
+    #[Route('/_transports', name: 'zenstruck_messenger_monitor_transports_widget')]
+    public function transportsWidget(
+        ViewHelper $helper,
+    ): Response {
+        return $this->render('@ZenstruckMessengerMonitor/components/transports.html.twig', [
+            'transports' => $helper->transports,
+        ]);
+    }
+
+    #[Route('/_snapshot', name: 'zenstruck_messenger_monitor_snapshot_widget')]
+    public function snapshotWidget(
+        ViewHelper $helper,
+    ): Response {
+        if (!$helper->storage) {
+            throw new \LogicException('Storage must be configured to use the dashboard.');
+        }
+
+        return $this->render('@ZenstruckMessengerMonitor/components/snapshot.html.twig', [
+            'helper' => $helper,
+            'snapshot' => Specification::create(Period::IN_LAST_DAY)->snapshot($helper->storage),
+            'subtitle' => 'Last 24 Hours',
+        ]);
+    }
+
+    #[Route('/_recent-messages', name: 'zenstruck_messenger_monitor_recent_messages_widget')]
+    public function recentMessagesWidget(
+        ViewHelper $helper,
+    ): Response {
+        if (!$helper->storage) {
+            throw new \LogicException('Storage must be configured to use the dashboard.');
+        }
+
+        return $this->render('@ZenstruckMessengerMonitor/components/recent_messages.html.twig', [
+            'messages' => Specification::new()->snapshot($helper->storage)->messages(),
+            'helper' => $helper,
+        ]);
+    }
 }

src/DependencyInjection/ZenstruckMessengerMonitorExtension.php

@@ -36,15 +36,6 @@ public function getConfigTreeBuilder(): TreeBuilder
 
         $builder->getRootNode() // @phpstan-ignore-line
             ->children()
-                ->arrayNode('live_components')
-                    ->canBeEnabled()
-                    ->children()
-                        ->scalarNode('role')
-                            ->info('Role required to view live components.')
-                            ->defaultValue('ROLE_MESSENGER_MONITOR')
-                        ->end()
-                    ->end()
-                ->end()
                 ->arrayNode('storage')
                     ->children()
                         ->arrayNode('orm')
@@ -109,34 +100,5 @@ protected function loadInternal(array $mergedConfig, ContainerBuilder $container
                 $container->removeDefinition('.zenstruck_messenger_monitor.command.schedule_purge');
             }
         }
-
-        if ($mergedConfig['live_components']['enabled']) {
-            $loader->load('live_components.php');
-
-            self::loadLiveComponents($container, $mergedConfig['live_components']);
-        }
-    }
-
-    /**
-     * @param mixed[] $config
-     */
-    private static function loadLiveComponents(ContainerBuilder $container, array $config): void
-    {
-        if (!isset($container->getParameter('kernel.bundles')['LiveComponentBundle'])) {
-            throw new LogicException('"LiveComponentBundle" (symfony/ux-live-component) must be installed to use live components.');
-        }
-
-        if (!isset($container->getParameter('kernel.bundles')['StimulusBundle'])) {
-            throw new LogicException('The "StimulusBundle" (symfony/stimulus-bundle) must be installed to use live components.');
-        }
-
-        if (!\interface_exists(AssetMapperInterface::class) && !isset($container->getParameter('kernel.bundles')['WebpackEncoreBundle'])) {
-            throw new \LogicException('symfony/asset-mapper or encore must be available to use live components.');
-        }
-
-        $container->setParameter('zenstruck_messenger_monitor.security_role', $config['role']);
-        $container->getDefinition('zenstruck_messenger_monitor.view_helper')
-            ->setArgument(6, \interface_exists(AssetMapperInterface::class) ? ViewHelper::ASSET_MAPPER : ViewHelper::ENCORE)
-        ;
     }
 }

src/Twig/ViewHelper.php

@@ -25,13 +25,8 @@
  */
 final class ViewHelper
 {
-    public const ASSET_MAPPER = 'asset_mapper';
-    public const ENCORE = 'encore';
-
     /**
      * @internal
-     *
-     * @param null|self::ASSET_MAPPER|self::ENCORE $assetManager
      */
     public function __construct(
         public readonly Transports $transports,
@@ -40,15 +35,9 @@ public function __construct(
         public readonly ?Schedules $schedules,
         public readonly ?DateTimeFormatter $timeFormatter,
         public readonly ?CsrfTokenManagerInterface $csrfTokenManager,
-        public readonly ?string $assetManager = null,
     ) {
     }
 
-    public function useLiveComponents(): bool
-    {
-        return null !== $this->assetManager;
-    }
-
     public function canFormatDuration(): bool
     {
         return $this->timeFormatter && \method_exists($this->timeFormatter, 'formatDuration');

templates/components/_refreshable_widget.html.twig

@@ -0,0 +1,21 @@
+<div data-controller="refreshable" class="position-relative" data-refreshable-url-value="{{ url }}">
+    <div class="position-absolute top-0 end-0 z-2 d-flex align-items-center" style="margin-top: 8px; min-height: 26px;">
+        <div class="d-none spinner-border spinner-border-sm spinner-border-slow text-secondary opacity-50 me-2" data-refreshable-target="indicator" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+        {% block buttons %}
+            <button title="Refresh" data-action="refreshable#refresh" data-refreshable-target="refresh" class="d-none btn btn-light btn-outline-secondary btn-sm d-flex align-items-center me-2">
+                <svg width="16" height="16" fill="currentColor"><use xlink:href="#refresh-icon"/></svg>
+            </button>
+            <button title="Pause Polling" data-action="refreshable#pause" data-refreshable-target="pause" class="btn btn-light btn-outline-secondary btn-sm d-flex align-items-center me-2">
+                <svg width="16" height="16" fill="currentColor"><use xlink:href="#pause-icon"/></svg>
+            </button>
+            <button title="Start Polling" data-action="refreshable#start" data-refreshable-target="start" class="d-none btn btn-light btn-outline-secondary btn-sm d-flex align-items-center me-2">
+                <svg width="16" height="16" fill="currentColor"><use xlink:href="#play-icon"/></svg>
+            </button>
+        {% endblock %}
+    </div>
+    <div data-refreshable-target="content">
+        {% block content %}{% endblock %}
+    </div>
+</div>

templates/components/messages.html.twig

@@ -71,7 +71,7 @@
                             {% endif %}
                         </td>
                         <td>
-                            <a href="{{ path('zenstruck_messenger_monitor_detail', {id: message.id}) }}" class="btn btn-sm btn-secondary d-inline-flex align-items-center message-details">
+                            <a href="{{ path('zenstruck_messenger_monitor_detail', {id: message.id}) }}" class="btn btn-sm btn-secondary d-inline-flex align-items-center" data-controller="message-details" data-action="message-details#click">
                                 <svg fill="currentcolor" height="1em" width="1em" class="me-2"><use xlink:href="#search-icon"/></svg>
                                 Details...
                             </a>

templates/components/recent_messages.html.twig

@@ -0,0 +1,7 @@
+{% embed '@ZenstruckMessengerMonitor/components/messages.html.twig' with {messages: messages.take(number|default(15))} %}
+    {% block card_header %}
+        <div class="d-flex justify-content-between align-items-center">
+            <span>Recently Processed Messages <small><em class="text-secondary">Last {{ number|default(15) }}</em></small></span>
+        </div>
+    {% endblock %}
+{% endembed %}