Merge branch 'master' into snyk-upgrade-300edeeed04a577cd8528b88ff4f8d4e

src/components/commit-hash/index.tsx

@@ -24,6 +24,6 @@ export const CommitHash: FunctionComponent<CommitHashProps> = ({
           }
         : { as: 'span', token: { color: 'currentColor' } })}
     >
-      {smallGithubCommitHash(commit)} {repo && <Icon data={github} />}
+      {smallGithubCommitHash(commit)} {repo && <Icon data={github} size={18} />}
     </Typography>
   ) : null;

src/components/component/git-commit-tags.tsx

@@ -21,13 +21,13 @@ export const GitCommitTags = ({ commitID, gitTags, repository }: Props) => {
       )}
       {gitTags && (
         <>
-          {' '}
-          <Icon data={github} size={18} />
+          {' tags '}
           {repository ? (
             <GitTagLinks gitTags={gitTags} repository={repository} />
           ) : (
-            { gitTags }
+            <>{gitTags}</>
           )}
+          {!commitID && <Icon data={github} size={18} />}
         </>
       )}
     </>

src/components/create-job-form/pipeline-form-build-branches.tsx

@@ -63,7 +63,8 @@ export function PipelineFormBuildBranches({
         jobName = (await triggerBuild(body).unwrap()).name;
       }
       onSuccess(jobName);
-    }
+    },
+    `Created ${pipelineName} pipeline job`
   );
   const isValid =
     branch !== '' && !branch.includes('*') && !branch.includes('?');

src/components/job-overview/component-list.tsx

@@ -1,43 +1,79 @@
-import { Typography } from '@equinor/eds-core-react';
-import { upperFirst } from 'lodash';
 import * as PropTypes from 'prop-types';
 
-import { buildComponentMap } from '../../utils/build-component-map';
-import { ComponentSummary } from '../../store/radix-api';
+import { DeploymentSummary } from '../../store/radix-api';
+import { DockerImage } from '../docker-image';
 import { GitCommitTags } from '../component/git-commit-tags';
+import { List, Typography } from '@equinor/eds-core-react';
+import { Link } from 'react-router-dom';
+import { routeWithParams } from '../../utils/string';
+import { routes } from '../../routes';
 
 type Props = {
-  components: Array<ComponentSummary>;
+  appName: string;
+  deployments: DeploymentSummary[];
   repository: string;
 };
 
-export const ComponentList = ({ components, repository }: Props) => {
-  const compMap = buildComponentMap(components);
+export const ComponentList = ({ appName, deployments, repository }: Props) => {
   return (
     <>
-      {Object.keys(compMap).map((type: ComponentSummary['type']) =>
-        compMap[type].map((component) => (
-          <Typography key={`${type}-${component.name}`}>
-            {upperFirst(type)} <strong>{component.name}</strong>
-            {component.skipDeployment && (
-              <>
-                {' keeps deployment '}
-                <GitCommitTags
-                  commitID={component.commitID}
-                  gitTags={component.gitTags}
-                  repository={repository}
-                />
-              </>
-            )}
-          </Typography>
-        ))
+      {deployments.some((value) => value.components?.length > 0) && (
+        <>
+          <Typography variant="h4">Components</Typography>
+          <List>
+            {deployments.map((deployment) => (
+              <List.Item key={deployment.name}>
+                <Typography>
+                  Environment <strong>{deployment.environment}</strong>
+                </Typography>
+                <>
+                  {deployment.components ? (
+                    <List className="o-indent-list">
+                      {deployment.components.map((component) => (
+                        <List.Item key={`${deployment.name}-${component.name}`}>
+                          <Typography
+                            as={Link}
+                            to={routeWithParams(routes.appComponent, {
+                              appName,
+                              deploymentName: deployment.name,
+                              componentName: component.name,
+                            })}
+                            link
+                          >
+                            {component.name}
+                          </Typography>{' '}
+                          {' image '}
+                          <DockerImage path={component.image} />
+                          {(component.skipDeployment ||
+                            component.commitID !==
+                              deployment.gitCommitHash) && (
+                            <>
+                              <> from past deployment</>
+                              <GitCommitTags
+                                commitID={component.commitID}
+                                gitTags={component.gitTags}
+                                repository={repository}
+                              />
+                            </>
+                          )}
+                        </List.Item>
+                      ))}
+                    </List>
+                  ) : (
+                    <>No components</>
+                  )}
+                </>
+              </List.Item>
+            ))}
+          </List>
+        </>
       )}
     </>
   );
 };
 
 ComponentList.propTypes = {
-  components: PropTypes.arrayOf(
-    PropTypes.object as PropTypes.Validator<ComponentSummary>
+  deployments: PropTypes.arrayOf(
+    PropTypes.object as PropTypes.Validator<Array<DeploymentSummary>>
   ).isRequired,
 };

src/components/job-overview/index.tsx

@@ -324,7 +324,8 @@ export const JobOverview = ({ appName, jobName }: Props) => {
                       )}
                       {job.components && (
                         <ComponentList
-                          components={job.components}
+                          appName={appName}
+                          deployments={job.deployments}
                           repository={application?.registration.repository}
                         />
                       )}

src/components/job-overview/step-summary.tsx

@@ -9,7 +9,7 @@ import { RelativeToNow } from '../time/relative-to-now';
 import { routes } from '../../routes';
 import { Step } from '../../store/radix-api';
 import { differenceInWords, formatDateTimePrecise } from '../../utils/datetime';
-import { getPipelineStepDescription } from '../../utils/pipeline';
+import { getPipelineStepDescription, PipelineStep } from '../../utils/pipeline';
 import { routeWithParams } from '../../utils/string';
 
 function getComponents(name: string, components: Array<string>): string {
@@ -53,6 +53,20 @@ const StepDescription: FunctionComponent<Pick<Step, 'name' | 'components'>> = ({
     return <>{stepDescription}</>;
   }
 
+  if (name === PipelineStep.CloneRepository) {
+    return (
+      <>
+        Cloning repository
+        {components?.length == 1 && (
+          <>
+            {' for '} <strong>{components[0]}</strong>
+            {' component'}
+          </>
+        )}
+      </>
+    );
+  }
+
   const buildComponent = name.match(/^build-(.+)$/);
   if (buildComponent) {
     return (

src/components/job-overview/steps-list.tsx

@@ -49,6 +49,11 @@ export const StepsList: FunctionComponent<{
 }> = ({ appName, jobName, steps }) => {
   const namedSteps = (steps ?? []).filter(({ name }) => !!name);
 
+  const getStepKey = (step: Step) => {
+    return step.components?.length == 1
+      ? step.name + '-' + step.components[0]
+      : step.name;
+  };
   return (
     <>
       <Typography variant="h4">Steps</Typography>
@@ -63,7 +68,7 @@ export const StepsList: FunctionComponent<{
                 ) ?? a.name.localeCompare(b.name)
             )
             .map((step) => (
-              <div key={step.name} className="steps-list__step">
+              <div key={getStepKey(step)} className="steps-list__step">
                 <div className="grid steps-list__divider">
                   <Icon className="step__icon" data={getStepIcon(step)} />
                   <span className="steps-list__divider-line" />

src/components/page-deployment/deployment-component-list.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@equinor/eds-core-react';
+import { List, Typography } from '@equinor/eds-core-react';
 import * as PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
@@ -23,32 +23,35 @@ export const DeploymentComponentList = ({
     {components && (
       <>
         <Typography variant="h4">Components</Typography>
-        {components.map((component) => (
-          <Typography key={component.name}>
-            <Typography
-              as={Link}
-              to={routeWithParams(routes.appComponent, {
-                appName,
-                deploymentName: deployment.name,
-                componentName: component.name,
-              })}
-              link
-            >
-              {component.name}
-            </Typography>{' '}
-            image <DockerImage path={component.image} />
-            {component.skipDeployment && (
-              <>
-                {' keeps deployment '}
-                <GitCommitTags
-                  commitID={component.commitID}
-                  // gitTags={component.gitTags}
-                  repository={deployment.repository}
-                />
-              </>
-            )}
-          </Typography>
-        ))}
+        <List className="o-indent-list">
+          {components.map((component) => (
+            <List.Item key={component.name}>
+              <Typography
+                as={Link}
+                to={routeWithParams(routes.appComponent, {
+                  appName,
+                  deploymentName: deployment.name,
+                  componentName: component.name,
+                })}
+                link
+              >
+                {component.name}
+              </Typography>{' '}
+              image <DockerImage path={component.image} />
+              {(component.skipDeployment ||
+                component.commitID !== deployment.gitCommitHash) && (
+                <>
+                  <> from past deployment</>
+                  <GitCommitTags
+                    commitID={component.commitID}
+                    gitTags={component.gitTags}
+                    repository={deployment.repository}
+                  />
+                </>
+              )}
+            </List.Item>
+          ))}
+        </List>
       </>
     )}
   </>

src/components/page-step/index.tsx

@@ -82,6 +82,11 @@ export function PageStep({ appName, jobName, stepName }: PageStepProps) {
                     {getPipelineStepTitle(step.name) || step.name}
                   </strong>
                 </Typography>
+                {step.components?.length == 1 && (
+                  <Typography>
+                    {'Component'} <strong>{step.components[0]}</strong>
+                  </Typography>
+                )}
               </div>
               {step.started && (
                 <div className="grid grid--gap-medium">

src/store/radix-api.ts

@@ -2246,6 +2246,8 @@ export type Component = {
   commitID?: string;
   /** Array of external DNS configurations */
   externalDNS?: ExternalDns[];
+  /** GitTags the git tags that the git commit hash points to */
+  gitTags?: string;
   horizontalScalingSummary?: HorizontalScalingSummary;
   identity?: Identity;
   /** Image name */

src/utils/pipeline/index.ts

@@ -5,14 +5,13 @@ export enum PipelineStep {
   OrchestratePipeline = 'radix-pipeline',
   PreparePipelines = 'prepare-pipelines',
   RunSubPipeline = 'run-pipelines',
+  BuildComponent = 'build',
 }
 
 export function getPipelineStepDescription(stepName: string): string {
   switch (stepName) {
     case PipelineStep.CloneConfig:
       return 'Cloning Radix config from config branch';
-    case PipelineStep.CloneRepository:
-      return 'Cloning repository';
     case PipelineStep.CloneConfigToMap:
       return 'Copying radixconfig.yaml from config branch';
     case PipelineStep.OrchestratePipeline:
@@ -21,6 +20,8 @@ export function getPipelineStepDescription(stepName: string): string {
       return 'Prepare pipeline';
     case PipelineStep.RunSubPipeline:
       return 'Run sub-pipeline';
+    case PipelineStep.BuildComponent:
+      return 'Building component';
     default:
       return null;
   }