Merge pull request #881 from anwesha-palit-redhat/feat/SRVKP-10407

SRVKP-10407: Adds ANSI color support to the log viewer components, enabling colored output for Tekton task and pipeline run logs.

Author: anwesha-palit-redhat

package.json

@@ -20,7 +20,7 @@
     "cypress-generate": "marge -o ./integration-tests/screenshots/ -f cypress-report -t 'OpenShift Console Plugin Template Cypress Test Results' -p 'OpenShift Cypress Plugin Template Test Results' --showPassed false --assetsDir ./integration-tests/screenshots/cypress/assets ./integration-tests/screenshots/cypress.json",
     "cypress-postreport": "yarn cypress-merge && yarn cypress-generate",
     "generate-types": "openapi-typescript openapi/spec.yml --output src/types/api.ts",
-    "dev": "NODE_ENV=development NODE_OPTIONS=--max-old-space-size=8192 rm -rf dist && yarn ts-node ./node_modules/.bin/webpack serve --progress",
+    "dev": "NODE_ENV=development rm -rf dist && node --max-old-space-size=8192 -r ts-node/register ./node_modules/.bin/webpack serve --progress",
     "test": "jest",
     "memsource-upload": "./i18n-scripts/memsource-upload.sh",
     "memsource-download": "./i18n-scripts/memsource-download.sh",

src/components/logs/LogsWrapperComponent.tsx

@@ -50,7 +50,7 @@ const LogsWrapperComponent: React.FC<
     taskRun?.spec.taskRef?.name ||
     '-';
 
-  if (loaded && !error && resource.name === obj.metadata.name) {
+  if (loaded && !error && resource.name === obj?.metadata?.name) {
     resourceRef.current = obj;
   } else if (error) {
     resourceRef.current = null;

src/components/logs/TektonTaskRunLog.scss

@@ -1,7 +1,11 @@
+@use './ansi-log-colors' as *;
+
 .odc-tekton-taskrun-log {
   overflow: hidden;
 
   .pf-v5-c-log-viewer__text {
     white-space: pre;
   }
+
+  @include ansi-log-colors;
 }

src/components/logs/ansi-log-colors.scss

@@ -0,0 +1,122 @@
+// Shared ANSI color classes for LogViewer with useAnsiClasses
+// Import this mixin in any SCSS file that wraps a LogViewer component
+
+@mixin ansi-log-colors {
+  // Foreground colors (optimized for dark/black background)
+  .ansi-black-fg {
+    color: #6e6e6e;
+  }
+  .ansi-red-fg {
+    color: #f14c4c;
+  }
+  .ansi-green-fg {
+    color: #23d18b;
+  }
+  .ansi-yellow-fg {
+    color: #f5f543;
+  }
+  .ansi-blue-fg {
+    color: #3b8eea;
+  }
+  .ansi-magenta-fg {
+    color: #d670d6;
+  }
+  .ansi-cyan-fg {
+    color: #29b8db;
+  }
+  .ansi-white-fg {
+    color: #e5e5e5;
+  }
+
+  // Bright foreground colors
+  .ansi-bright-black-fg {
+    color: #a0a0a0;
+  }
+  .ansi-bright-red-fg {
+    color: #f14c4c;
+  }
+  .ansi-bright-green-fg {
+    color: #23d18b;
+  }
+  .ansi-bright-yellow-fg {
+    color: #f5f543;
+  }
+  .ansi-bright-blue-fg {
+    color: #73c3ff;
+  }
+  .ansi-bright-magenta-fg {
+    color: #ff7eff;
+  }
+  .ansi-bright-cyan-fg {
+    color: #5ff;
+  }
+  .ansi-bright-white-fg {
+    color: #fff;
+  }
+
+  // Background colors
+  .ansi-black-bg {
+    background-color: #000;
+  }
+  .ansi-red-bg {
+    background-color: #bb0000;
+  }
+  .ansi-green-bg {
+    background-color: #00bb00;
+  }
+  .ansi-yellow-bg {
+    background-color: #bbbb00;
+  }
+  .ansi-blue-bg {
+    background-color: #0000bb;
+  }
+  .ansi-magenta-bg {
+    background-color: #bb00bb;
+  }
+  .ansi-cyan-bg {
+    background-color: #00bbbb;
+  }
+  .ansi-white-bg {
+    background-color: #fff;
+  }
+
+  // Bright background colors
+  .ansi-bright-black-bg {
+    background-color: #555;
+  }
+  .ansi-bright-red-bg {
+    background-color: #f55;
+  }
+  .ansi-bright-green-bg {
+    background-color: #0f0;
+  }
+  .ansi-bright-yellow-bg {
+    background-color: #ff5;
+  }
+  .ansi-bright-blue-bg {
+    background-color: #55f;
+  }
+  .ansi-bright-magenta-bg {
+    background-color: #f5f;
+  }
+  .ansi-bright-cyan-bg {
+    background-color: #5ff;
+  }
+  .ansi-bright-white-bg {
+    background-color: #fff;
+  }
+
+  // Text styles
+  .ansi-bold {
+    font-weight: bold;
+  }
+  .ansi-faint {
+    opacity: 0.5;
+  }
+  .ansi-italic {
+    font-style: italic;
+  }
+  .ansi-underline {
+    text-decoration: underline;
+  }
+}

src/components/pipelineRuns-details/PipelineRunLogs.scss

@@ -1,3 +1,5 @@
+@use '../logs/ansi-log-colors' as *;
+
 .odc-pipeline-run-logs {
   display: flex;
   flex: 1;
@@ -10,6 +12,9 @@
   .pf-v5-c-log-viewer__text {
     white-space: pre;
   }
+
+  @include ansi-log-colors;
+
   &__nav {
     padding-top: 0;
     list-style-type: none;

src/components/pipelineRuns-details/PipelineRunLogs.tsx

@@ -235,7 +235,7 @@ class PipelineRunLogsWithTranslation extends React.Component<
                 </NavList>
               </Nav>
             ) : (
-              <div className="odc-pipeline-run-logs__nav">
+              <div className="odc-pipeline-run-logs__nav pf-v5-u-text-align-center">
                 {t('No task runs found')}
               </div>
             )}
@@ -251,7 +251,7 @@ class PipelineRunLogsWithTranslation extends React.Component<
             />
           ) : (
             <div
-              className="odc-pipeline-run-logs__logcontainer pf-v5-u-w-100"
+              className="pf-v5-u-w-100 pf-v5-u-pr-xl"
               data-test-id="task-logs-error"
             >
               <LogViewer

src/components/pipelines-tasks/tasks-details-pages/TaskRunLog.scss

@@ -1,3 +1,5 @@
+@use '../../logs/ansi-log-colors' as *;
+
 .odc-task-run-log {
   display: flex;
   flex: 1;
@@ -6,4 +8,6 @@
   .pf-v5-c-log-viewer__text {
     white-space: pre;
   }
+
+  @include ansi-log-colors;
 }