TASK: Reverse stdout log and improve styling

Author: Sebobo

Classes/Core/Infrastructure/ContentReleaseLogger.php

@@ -19,10 +19,9 @@ class ContentReleaseLogger
      */
     protected $contentReleaseIdentifier;
 
-    /**
-     * @var string
-     */
-    protected $logPrefix = '';
+    protected string $logPrefix = '';
+
+    protected ?RendererIdentifier $rendererIdentifier;
 
     protected function __construct(OutputInterface $output, ContentReleaseIdentifier $contentReleaseIdentifier, ?RendererIdentifier $rendererIdentifier)
     {
@@ -47,30 +46,30 @@ public static function fromSymfonyOutput(OutputInterface $output, ContentRelease
         return new static($output, $contentReleaseIdentifier, null);
     }
 
-    public function debug($message, array $additionalPayload = []): void
+    public function debug(string $message, array $additionalPayload = []): void
     {
-        $this->logToOutput($message, $additionalPayload);
+        $this->logToOutput('DEBUG', $message, $additionalPayload);
     }
 
-    public function info($message, array $additionalPayload = []): void
+    public function info(string $message, array $additionalPayload = []): void
     {
-        $this->logToOutput($message, $additionalPayload);
+        $this->logToOutput('INFO', $message, $additionalPayload);
     }
 
-    public function warn($message, array $additionalPayload = []): void
+    public function warn(string $message, array $additionalPayload = []): void
     {
-        $this->logToOutput($message, $additionalPayload);
+        $this->logToOutput('WARNING', $message, $additionalPayload);
     }
 
-    public function error($message, array $additionalPayload = []): void
+    public function error(string $message, array $additionalPayload = []): void
     {
-        $this->logToOutput($message, $additionalPayload);
+        $this->logToOutput('ERROR', $message, $additionalPayload);
     }
 
-    protected function logToOutput($message, array $additionalPayload = []): void
+    protected function logToOutput(string $level, string $message, array $additionalPayload = []): void
     {
         $formattedPayload = $additionalPayload ? json_encode($additionalPayload) : '';
-        $this->output->writeln($this->logPrefix . $message . $formattedPayload);
+        $this->output->writeln($this->logPrefix . $level . ': ' . $message . $formattedPayload);
     }
 
     public function logException(\Exception $exception, string $message, array $additionalPayload)

Resources/Private/BackendFusion/Integration/Backend.Details.fusion

@@ -8,6 +8,8 @@ Flowpack.DecoupledContentStore.BackendController.details = Neos.Fusion:Component
     // - redisContentStores: array of all configured content store identifiers
     // - isPrimary: bool
 
+    stdOutLines = ${Array.filter(String.pregSplit(String.htmlSpecialChars(jobLogs.stdout), "/\r\n|\n|\r/"))}
+
     renderer = afx`
         <div id="app">
             <form id="postHelper" method="post">
@@ -38,13 +40,19 @@ Flowpack.DecoupledContentStore.BackendController.details = Neos.Fusion:Component
                   />
               </Neos.Fusion:Loop>
 
-              <h2 @if.isTrue={detailTaskName} class="text-3xl py-5">Log Output for {detailTaskName}</h2>
-              <pre @if={!String.isBlank(jobLogs.stderr)} title="stderr" class="block whitespace-pre overflow-x-scroll border border-red-800 p-2 mb-6">
-                {String.htmlSpecialChars(jobLogs.stderr)}
-              </pre>
-              <pre title="stdout" class="block whitespace-pre overflow-x-scroll">
-                {String.htmlSpecialChars(jobLogs.stdout)}
-              </pre>
+              <div @if={!String.isBlank(jobLogs.stderr)}>
+                <h2 class="text-3xl py-5">Error output for {detailTaskName}</h2>
+                <pre title="stderr" class="block whitespace-pre overflow-x-scroll border border-red-800 p-2 mb-6">
+                  {String.htmlSpecialChars(jobLogs.stderr)}
+                </pre>
+              </div>
+
+              <h2 class="text-3xl py-5">Log output for {detailTaskName}</h2>
+              <div title="stdout" class="stdout grid gap-2">
+                <Neos.Fusion:Loop items={Array.reverse(props.stdOutLines)} iterationName="iteration">
+                  <pre>{Array.length(props.stdOutLines) - iteration.index}: {String.pregReplace(item, "/(DEBUG|WARNING|ERROR|INFO): (.*)/", "<span class=\"log-level-$1\">$1:</span> <span class=\"log-content-$1\">$2</span>")}</pre>
+                </Neos.Fusion:Loop>
+              </div>
             </Neos.Fusion:Fragment>
             <p @if.notData={!detailsData}>
               No data exists for this release in Redis.

Resources/Public/BackendCompiled/out.css

@@ -1,4 +1,4 @@
-/* ../../../../../../../../../var/folders/jx/0n3dgdj52yd7lhy7jz8m_lyc0000gn/T/tmp-76784-4SF1kWZd2RxP/Flowpack.DecoupledContentStore/Resources/Private/Js/1705479026689-styles.css */
+/* ../../../../../../../../../var/folders/1z/rq1_kd710hn00r35j5rzqs5h0000gn/T/tmp-24630-ZfKI51gf2y1c/Flowpack.DecoupledContentStore/Resources/Private/Js/1705488391983-styles.css */
 #app *,
 #app ::before,
 #app ::after {
@@ -70,6 +70,9 @@
 #app .table {
   display: table;
 }
+#app .grid {
+  display: grid;
+}
 #app .hidden {
   display: none;
 }
@@ -117,6 +120,9 @@
 #app .justify-center {
   justify-content: center;
 }
+#app .gap-2 {
+  gap: 0.5rem;
+}
 #app .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));