feat(titus): Render run job output file as YAML (#6992)

* feat(titus): Render run job output file as YAML

* fixup - remove 6 or 7 lines of code

* fixup - unbreak my build

app/scripts/modules/core/src/pipeline/config/stages/script/ScriptExecutionDetails.tsx

@@ -1,3 +1,4 @@
+import { RenderOutputFile } from 'core/presentation/RenderOutputFile';
 import * as React from 'react';
 import { get } from 'lodash';
 
@@ -32,12 +33,7 @@ export function ScriptExecutionDetails(props: IExecutionDetailsSectionProps) {
         <div className="row">
           <div className="col-md-12">
             <h5 style={{ marginBottom: '0px', paddingBottom: '5px' }}>Property File</h5>
-            <dl>
-              {Object.keys(stage.context.propertyFileContents).map((key: string) => {
-                const val = stage.context.propertyFileContents[key];
-                return [<dt key={key}>{key}</dt>, <dd key={key + val}>{val}</dd>];
-              })}
-            </dl>
+            <RenderOutputFile outputFileObject={stage.context.propertyFileContents} />
           </div>
         </div>
       )}

app/scripts/modules/core/src/presentation/RenderOutputFile.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { dump as dumpYaml } from 'js-yaml';
+
+interface IRenderOutputFileProps {
+  outputFileObject: object;
+}
+
+/**
+ * Renders an object as YAML.
+ * Transforms strings that look like URLs into links
+ * The intention is to render the output file from a Script or Run Job stage
+ */
+export const RenderOutputFile = React.memo(({ outputFileObject }: IRenderOutputFileProps) => {
+  const linkRegex = /(https?:\/\/[^$\s'"]+)/;
+  const isLink = (str: string) => `'${str}'`.match(linkRegex);
+
+  const yaml = dumpYaml(outputFileObject);
+
+  let linkCount = 0;
+  const segments = yaml.split(linkRegex);
+  const renderLink = (url: string) => (
+    <a key={`${linkCount++}`} href={url} target="_blank">
+      {url}
+    </a>
+  );
+  const renderSegment = (segment: string) => (isLink(segment) ? renderLink(segment) : segment);
+  return <pre style={{ overflow: 'scroll', maxHeight: '400px' }}>{segments.map(renderSegment)}</pre>;
+});

app/scripts/modules/core/src/presentation/index.ts

@@ -5,6 +5,7 @@ export * from './LabelComponent';
 export * from './Markdown';
 export * from './Placement';
 export * from './ReactModal';
+export * from './RenderOutputFile';
 export * from './SpanDropdownTrigger';
 export * from './TetheredSelect';
 export * from './Tooltip';

app/scripts/modules/titus/src/pipeline/stages/runJob/RunJobExecutionDetails.tsx

@@ -6,6 +6,7 @@ import {
   AccountTag,
   ExecutionDetailsSection,
   IExecutionDetailsSectionProps,
+  RenderOutputFile,
   StageFailureMessage,
 } from '@spinnaker/core';
 
@@ -55,20 +56,6 @@ export class RunJobExecutionDetails extends React.Component<
     const jobId = cluster ? get(context['deploy.jobs'], cluster.region, [])[0] : null;
     const taskId = get(context, 'jobStatus.completionDetails.taskId');
 
-    const renderProperty = (entry: any) => {
-      if (typeof entry === 'object' && !Array.isArray(entry)) {
-        return <pre>{JSON.stringify(entry, null, 2)}</pre>;
-      }
-      const linkPattern = /^https?:\/\/([^\s])*$/;
-      return linkPattern.test(entry) ? (
-        <a href={entry} target="_blank">
-          {entry}
-        </a>
-      ) : (
-        <span>{entry}</span>
-      );
-    };
-
     return (
       <ExecutionDetailsSection name={name} current={current}>
         <div className="row">
@@ -145,22 +132,8 @@ export class RunJobExecutionDetails extends React.Component<
         {context.propertyFileContents && (
           <div className="row">
             <div className="col-md-12">
-              <h5 style={{ marginBottom: 0, paddingBottom: '5px' }}>Property File</h5>
-              <dl>
-                {Object.keys(context.propertyFileContents)
-                  .sort((a: string, b: string) =>
-                    context.propertyFileContents[a].toString().length >
-                    context.propertyFileContents[b].toString().length
-                      ? 1
-                      : -1,
-                  )
-                  .map(key => (
-                    <React.Fragment key={key}>
-                      <dt>{key}</dt>
-                      <dd>{renderProperty(context.propertyFileContents[key])}</dd>
-                    </React.Fragment>
-                  ))}
-              </dl>
+              <h5 style={{ marginBottom: '0px', paddingBottom: '5px' }}>Property File</h5>
+              <RenderOutputFile outputFileObject={context.propertyFileContents} />
             </div>
           </div>
         )}