feat(kubernetes): expose rendered helm template in execution details (#…

…6943)

app/scripts/modules/core/src/manifest/ManifestYaml.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Modal } from 'react-bootstrap';
+
+export interface IManifestYamlProps {
+  linkName: string;
+  manifestText: string;
+  modalTitle: string;
+}
+
+export function ManifestYaml(props: IManifestYamlProps) {
+  const [modalVisible, setModalVisible] = React.useState<boolean>(false);
+  const toggle = () => setModalVisible(!modalVisible);
+  return (
+    <>
+      <a key="modal-link" onClick={toggle} className="clickable">
+        {props.linkName}
+      </a>
+      <Modal key="modal" show={modalVisible} onHide={toggle}>
+        <Modal.Header closeButton={true}>
+          <h3>{props.modalTitle}</h3>
+        </Modal.Header>
+        <Modal.Body>
+          <textarea readOnly={true} rows={15} className="code" value={props.manifestText} />
+        </Modal.Body>
+        <Modal.Footer>
+          <button className="btn btn-primary" onClick={toggle}>
+            Close
+          </button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}

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

@@ -4,3 +4,4 @@ export * from './stage/JobStageExecutionLogs';
 export * from './IManifestSubscription';
 export * from './ManifestService';
 export * from './stage/JobManifestPodLogs';
+export * from './ManifestYaml';

app/scripts/modules/core/src/pipeline/config/stages/bakeManifest/BakeManifestDetailsTab.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+import {
+  decodeUnicodeBase64,
+  ExecutionDetailsSection,
+  IArtifact,
+  IExecutionDetailsSectionProps,
+  ManifestYaml,
+} from '@spinnaker/core';
+
+export class BakeManifestDetailsTab extends React.Component<IExecutionDetailsSectionProps> {
+  public static title = 'bakedManifest';
+
+  public render() {
+    const bakedArtifacts: IArtifact[] = this.props.stage.context.artifacts.filter(
+      (a: IArtifact) => a.type === 'embedded/base64',
+    );
+    return (
+      <ExecutionDetailsSection name={this.props.name} current={this.props.current}>
+        {bakedArtifacts.map((artifact, i) => (
+          <ManifestYaml
+            key={i}
+            linkName={bakedArtifacts.length > 1 ? `Baked Manifest ${i} YAML` : 'Baked Manifest YAML'}
+            manifestText={decodeUnicodeBase64(artifact.reference)}
+            modalTitle="Baked Manifest"
+          />
+        ))}
+      </ExecutionDetailsSection>
+    );
+  }
+}

app/scripts/modules/core/src/pipeline/config/stages/bakeManifest/bakeManifestStage.ts

@@ -8,6 +8,7 @@ import { Registry } from 'core/registry';
 import { SETTINGS } from 'core/config';
 
 import { BakeManifestConfigCtrl } from './bakeManifestConfig.controller';
+import { BakeManifestDetailsTab } from './BakeManifestDetailsTab';
 
 export const BAKE_MANIFEST_STAGE = 'spinnaker.core.pipeline.stage.bakeManifestStage';
 
@@ -23,7 +24,7 @@ module(BAKE_MANIFEST_STAGE, [])
         producesArtifacts: true,
         cloudProvider: 'kubernetes',
         controllerAs: 'ctrl',
-        executionDetailsSections: [ExecutionDetailsTasks, ExecutionArtifactTab],
+        executionDetailsSections: [BakeManifestDetailsTab, ExecutionDetailsTasks, ExecutionArtifactTab],
         artifactExtractor: (fields: string[]) =>
           ExpectedArtifactService.accumulateArtifacts<IArtifact>(['inputArtifacts'])(fields).map(
             (a: IArtifact) => a.id,

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

@@ -10,3 +10,4 @@ export * from './timeFormatters';
 export * from './uuid.service';
 export * from './workerPool';
 export * from './renderIfFeature.component';
+export * from './unicodeBase64';

app/scripts/modules/kubernetes/src/v2/pipelines/stages/deployManifest/react/ManifestStatus.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { CopyToClipboard, IManifest } from '@spinnaker/core';
+import { dump } from 'js-yaml';
+
+import { CopyToClipboard, IManifest, ManifestYaml } from '@spinnaker/core';
+
 import { DeployManifestStatusPills } from './DeployStatusPills';
 import { ManifestDetailsLink } from './ManifestDetailsLink';
 import { ManifestEvents } from './ManifestEvents';
-import { ManifestYaml } from './ManifestYaml';
 
 import './ManifestStatus.less';
 
@@ -30,7 +32,11 @@ export class ManifestStatus extends React.Component<IManifestStatusProps> {
         </dd>
       </dl>,
       <div className="manifest-support-links" key="manifest-support-links">
-        <ManifestYaml manifest={manifest} linkName="YAML" />
+        <ManifestYaml
+          linkName="YAML"
+          manifestText={dump(manifest.manifest)}
+          modalTitle={manifest.manifest.metadata.name}
+        />
         <ManifestDetailsLink linkName="Details" manifest={manifest} accountId={account} />
       </div>,
       <div className="manifest-events pad-left" key="manifest-events">