Shown images and commits and tags for components

equinor · Feb 6, 2024 · d81bcea · d81bcea
1 parent f2a86a6
commit d81bcea
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 65 deletions.
diff --git a/src/components/component/git-commit-tags.tsx b/src/components/component/git-commit-tags.tsx
@@ -25,7 +25,7 @@ export const GitCommitTags = ({ commitID, gitTags, repository }: Props) => {
           {repository ? (
             <GitTagLinks gitTags={gitTags} repository={repository} />
           ) : (
-            { gitTags }
+            <>{gitTags}</>
           )}
           {!commitID && <Icon data={github} size={18} />}
         </>

diff --git a/src/components/job-overview/component-list.tsx b/src/components/job-overview/component-list.tsx
@@ -1,53 +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 { GitCommitTags } from '../component/git-commit-tags';
+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;
-  commonCommitID: string;
 };
 
-export const ComponentList = ({
-  components,
-  repository,
-  commonCommitID,
-}: 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>
-            {' image '}
-            <DockerImage path={component.image} />
-            {commonCommitID &&
-              (component.skipDeployment ||
-                component.commitID !== commonCommitID) && (
+      {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>
                 <>
-                  <> from past deployment</>
-                  <GitCommitTags
-                    commitID={component.commitID}
-                    gitTags={component.gitTags}
-                    repository={repository}
-                  />
+                  {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</>
+                  )}
                 </>
-              )}
-          </Typography>
-        ))
+              </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,
 };
diff --git a/src/components/job-overview/index.tsx b/src/components/job-overview/index.tsx
@@ -324,8 +324,8 @@ export const JobOverview = ({ appName, jobName }: Props) => {
                       )}
                       {job.components && (
                         <ComponentList
-                          components={job.components}
-                          commonCommitID={job.commitID}
+                          appName={application?.registration.name}
+                          deployments={job.deployments}
                           repository={application?.registration.repository}
                         />
                       )}

diff --git a/src/components/job-overview/steps-list.tsx b/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" />

diff --git a/src/components/page-deployment/deployment-component-list.tsx b/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,33 +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 ||
-              component.commitID !== deployment.gitCommitHash) && (
-              <>
-                <> from past 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>
       </>
     )}
   </>