BUGFIX: Joblogs preserve whitespace and highlight errors

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>
-                  {String.nl2br(String.htmlSpecialChars(jobLogs.stderr))}
-              </pre>
-              <pre>
-                  {String.nl2br(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/1z/rq1_kd710hn00r35j5rzqs5h0000gn/T/tmp-53849-7B7Y00uLTAH0/Flowpack.DecoupledContentStore/Resources/Private/Js/1674136282935-styles.css */
+/* ../../../../../../../../../var/folders/1z/rq1_kd710hn00r35j5rzqs5h0000gn/T/tmp-24630-ZfKI51gf2y1c/Flowpack.DecoupledContentStore/Resources/Private/Js/1705488391983-styles.css */
 #app *,
 #app ::before,
 #app ::after {
@@ -34,6 +34,9 @@
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
+#app .mb-6 {
+  margin-bottom: 1.5rem;
+}
 #app .mt-4 {
   margin-top: 1rem;
 }
@@ -49,6 +52,9 @@
 #app .mb-2 {
   margin-bottom: 0.5rem;
 }
+#app .block {
+  display: block;
+}
 #app .inline-block {
   display: inline-block;
 }
@@ -64,6 +70,9 @@
 #app .table {
   display: table;
 }
+#app .grid {
+  display: grid;
+}
 #app .hidden {
   display: none;
 }
@@ -111,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)));
@@ -123,11 +135,17 @@
 #app .overflow-hidden {
   overflow: hidden;
 }
+#app .overflow-x-scroll {
+  overflow-x: scroll;
+}
 #app .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+#app .whitespace-pre {
+  white-space: pre;
+}
 #app .rounded-md {
   border-radius: 0.375rem;
 }
@@ -143,6 +161,10 @@
 #app .border-2 {
   border-width: 2px;
 }
+#app .border-red-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 27 27 / var(--tw-border-opacity));
+}
 #app .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -191,6 +213,9 @@
   --tw-bg-opacity: 1;
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
 }
+#app .p-2 {
+  padding: 0.5rem;
+}
 #app .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;