fix(cf): reorg build info details on server group detail and summary (#…

…6983) This adds the artifact version to the server group header, and moves the build info in the server group detail out of the package section.
spinnaker · May 13, 2019 · 84db0ef · 84db0ef
1 parent 0194821
commit 84db0ef
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 26 deletions.
diff --git a/app/scripts/modules/cloudfoundry/src/cf.module.ts b/app/scripts/modules/cloudfoundry/src/cf.module.ts
@@ -12,6 +12,7 @@ import {
 import {
   ApplicationManagerSection,
   BoundServicesSection,
+  BuildSection,
   cfServerGroupDetailsGetter,
   CloudFoundryCreateServerGroupModal,
   CloudFoundryServerGroupActions,
@@ -66,6 +67,7 @@ CloudProviderRegistry.registerProvider('cloudfoundry', {
       MetricsSection,
       ServerGroupSizingSection,
       HealthCheckSection,
+      BuildSection,
       PackageSection,
       BoundServicesSection,
       EvironmentVariablesSection,

diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/BuildSection.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/BuildSection.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import { CollapsibleSection } from '@spinnaker/core';
+
+import { ICloudFoundryServerGroupDetailsSectionProps } from './ICloudFoundryServerGroupDetailsSectionProps';
+
+export class BuildSection extends React.Component<ICloudFoundryServerGroupDetailsSectionProps> {
+  constructor(props: ICloudFoundryServerGroupDetailsSectionProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { serverGroup } = this.props;
+    return (
+      <>
+        {serverGroup.droplet && serverGroup.droplet.sourcePackage && (
+          <CollapsibleSection heading="Build" defaultExpanded={true}>
+            <dl className="dl-horizontal dl-flex">
+              {serverGroup.ciBuild && serverGroup.ciBuild.version && (
+                <div>
+                  <dt>Version</dt>
+                  <dd>{serverGroup.ciBuild.version}</dd>
+                </div>
+              )}
+              {serverGroup.ciBuild && serverGroup.ciBuild.jobName && (
+                <div>
+                  <dt>Job</dt>
+                  <dd>{serverGroup.ciBuild.jobName}</dd>
+                </div>
+              )}
+              {serverGroup.ciBuild && serverGroup.ciBuild.jobNumber && (
+                <div>
+                  <dt>Build</dt>
+                  {serverGroup.ciBuild.jobUrl ? (
+                    <dd>
+                      <a target="_blank" href={serverGroup.ciBuild.jobUrl}>
+                        {serverGroup.ciBuild.jobNumber}
+                      </a>
+                    </dd>
+                  ) : (
+                    <dd>{serverGroup.ciBuild.jobNumber}</dd>
+                  )}
+                </div>
+              )}
+            </dl>
+          </CollapsibleSection>
+        )}
+      </>
+    );
+  }
+}
diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/PackageSection.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/PackageSection.tsx
@@ -16,32 +16,6 @@ export class PackageSection extends React.Component<ICloudFoundryServerGroupDeta
         {serverGroup.droplet && serverGroup.droplet.sourcePackage && (
           <CollapsibleSection heading="Package" defaultExpanded={true}>
             <dl className="dl-horizontal dl-flex">
-              {serverGroup.ciBuild && serverGroup.ciBuild.version && (
-                <div>
-                  <dt>Version</dt>
-                  <dd>{serverGroup.ciBuild.version}</dd>
-                </div>
-              )}
-              {serverGroup.ciBuild && serverGroup.ciBuild.jobName && (
-                <div>
-                  <dt>Job</dt>
-                  <dd>{serverGroup.ciBuild.jobName}</dd>
-                </div>
-              )}
-              {serverGroup.ciBuild && serverGroup.ciBuild.jobNumber && (
-                <div>
-                  <dt>Build</dt>
-                  {serverGroup.ciBuild.jobUrl ? (
-                    <dd>
-                      <a target="_blank" href={serverGroup.ciBuild.jobUrl}>
-                        {serverGroup.ciBuild.jobNumber}
-                      </a>
-                    </dd>
-                  ) : (
-                    <dd>{serverGroup.ciBuild.jobNumber}</dd>
-                  )}
-                </div>
-              )}
               <dt>Checksum</dt>
               <dd>{serverGroup.droplet.sourcePackage.checksum}</dd>
             </dl>

diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/index.ts b/app/scripts/modules/cloudfoundry/src/serverGroup/details/sections/index.ts
@@ -4,5 +4,6 @@ export * from './MetricsSection';
 export * from './ServerGroupSizingSection';
 export * from './HealthCheckSection';
 export * from './PackageSection';
+export * from './BuildSection';
 export * from './BoundServicesSection';
 export * from './EvironmentVariablesSection';
diff --git a/app/scripts/modules/core/src/serverGroup/ServerGroupHeader.tsx b/app/scripts/modules/core/src/serverGroup/ServerGroupHeader.tsx
@@ -115,6 +115,7 @@ export class SequenceAndBuildAndImages extends React.Component<IServerGroupHeade
   public render() {
     const { serverGroup, jenkins, images, docker } = this.props;
     const serverGroupSequence = NameUtils.getSequence(serverGroup.moniker.sequence);
+    const ciBuild = serverGroup.buildInfo && serverGroup.buildInfo.ciBuild;
     return (
       <div>
         {!!serverGroupSequence && <span className="server-group-sequence"> {serverGroupSequence}</span>}
@@ -130,6 +131,15 @@ export class SequenceAndBuildAndImages extends React.Component<IServerGroupHeade
           </a>
         )}
         {!!images && <ImageList {...this.props} />}
+        {!!ciBuild && ciBuild.jobUrl && (
+          <span>
+            {' '}
+            ({ciBuild.version})
+            <a className="build-link" href={ciBuild.jobUrl} target="_blank">
+              Build: #{ciBuild.jobNumber}
+            </a>
+          </span>
+        )}
       </div>
     );
   }