From ae40175000b67a1bd15f9f11dc03f8cbb2433cf3 Mon Sep 17 00:00:00 2001
From: pashakostohrys <pavel@codefresh.io>
Date: Wed, 9 Oct 2024 14:30:50 +0300
Subject: [PATCH] feat(ui): display sha's revision in every history release
 (#19962) - release-2.13

Signed-off-by: pashakostohrys <pavel@codefresh.io>
---
 ...application-deployment-history-details.tsx | 125 ++++++++++++++++++
 .../application-deployment-history.tsx        | 110 +--------------
 .../application-details.tsx                   |   1 -
 3 files changed, 129 insertions(+), 107 deletions(-)
 create mode 100644 ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx

diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx b/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx
new file mode 100644
index 0000000000000..e98f46fc60e06
--- /dev/null
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx
@@ -0,0 +1,125 @@
+import * as moment from 'moment';
+import * as React from 'react';
+import * as models from '../../../shared/models';
+import './application-deployment-history.scss';
+import {DataLoader} from 'argo-ui';
+import {Revision} from '../../../shared/components';
+import {services} from '../../../shared/services';
+import {ApplicationParameters} from '../application-parameters/application-parameters';
+import {RevisionMetadataRows} from './revision-metadata-rows';
+
+type props = {
+    app: models.Application;
+    info: models.RevisionHistory;
+    index: number;
+};
+
+export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) => {
+    const deployments = (app.status.history || []).slice().reverse();
+    const recentDeployments = deployments.map((info, i) => {
+        const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
+        const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
+        return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
+    });
+
+    const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
+
+    return (
+        <>
+            {info.sources === undefined ? (
+                <React.Fragment>
+                    <div>
+                        <div className='row'>
+                            <div className='columns small-3'>Revision:</div>
+                            <div className='columns small-9'>
+                                <Revision repoUrl={info.source.repoURL} revision={info.revision} />
+                            </div>
+                        </div>
+                    </div>
+                    <RevisionMetadataRows
+                        applicationName={app.metadata.name}
+                        applicationNamespace={app.metadata.namespace}
+                        source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
+                        index={0}
+                        versionId={recentDeployments[index].id}
+                    />
+                    <button
+                        type='button'
+                        className='argo-button argo-button--base application-deployment-history__show-parameter-details'
+                        onClick={() => setShowParameterDetails(!showParameterDetails)}>
+                        {showParameterDetails ? 'Hide details' : 'Show details'}
+                    </button>
+
+                    {showParameterDetails && (
+                        <DataLoader
+                            input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
+                            load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
+                            {(details: models.RepoAppDetails) => (
+                                <div>
+                                    <ApplicationParameters
+                                        application={{
+                                            ...app,
+                                            spec: {...app.spec, source: recentDeployments[index].source}
+                                        }}
+                                        details={details}
+                                    />
+                                </div>
+                            )}
+                        </DataLoader>
+                    )}
+                </React.Fragment>
+            ) : (
+                info.sources.map((source, i) => (
+                    <React.Fragment key={`${index}_${i}`}>
+                        {i > 0 ? <div className='separator' /> : null}
+                        <div>
+                            <div className='row'>
+                                <div className='columns small-3'>Revision:</div>
+                                <div className='columns small-9'>
+                                    <Revision repoUrl={source.repoURL} revision={info.revisions[i]} />
+                                </div>
+                            </div>
+                        </div>
+                        <RevisionMetadataRows
+                            applicationName={app.metadata.name}
+                            applicationNamespace={app.metadata.namespace}
+                            source={{...source, targetRevision: recentDeployments[index].revisions[i]}}
+                            index={i}
+                            versionId={recentDeployments[index].id}
+                        />
+                        <button
+                            type='button'
+                            className='argo-button argo-button--base application-deployment-history__show-parameter-details'
+                            onClick={() => setShowParameterDetails(!showParameterDetails)}>
+                            {showParameterDetails ? 'Hide details' : 'Show details'}
+                        </button>
+
+                        {showParameterDetails && (
+                            <DataLoader
+                                input={{
+                                    ...source,
+                                    targetRevision: recentDeployments[index].revisions[i],
+                                    index: i,
+                                    versionId: recentDeployments[index].id,
+                                    appName: app.metadata.name
+                                }}
+                                load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
+                                {(details: models.RepoAppDetails) => (
+                                    <div>
+                                        <ApplicationParameters
+                                            application={{
+                                                ...app,
+                                                spec: {...app.spec, source}
+                                            }}
+                                            details={details}
+                                        />
+                                    </div>
+                                )}
+                            </DataLoader>
+                        )}
+                    </React.Fragment>
+                ))
+            )}
+        </>
+    );
+};
diff --git a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
index c24fab22e00eb..69adefe598216 100644
--- a/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
+++ b/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx
@@ -1,22 +1,18 @@
-import {DataLoader, DropDownMenu, Duration} from 'argo-ui';
+import {DropDownMenu, Duration} from 'argo-ui';
 import {InitiatedBy} from './initiated-by';
 import * as moment from 'moment';
 import * as React from 'react';
-import {Revision, Timestamp} from '../../../shared/components';
+import {Timestamp} from '../../../shared/components';
 import * as models from '../../../shared/models';
-import {services} from '../../../shared/services';
-import {ApplicationParameters} from '../application-parameters/application-parameters';
-import {RevisionMetadataRows} from './revision-metadata-rows';
 import './application-deployment-history.scss';
+import {ApplicationDeploymentHistoryDetails} from './application-deployment-history-details';
 
 export const ApplicationDeploymentHistory = ({
     app,
     rollbackApp,
-    selectedRollbackDeploymentIndex,
     selectDeployment
 }: {
     app: models.Application;
-    selectedRollbackDeploymentIndex: number;
     rollbackApp: (info: models.RevisionHistory) => any;
     selectDeployment: (index: number) => any;
 }) => {
@@ -27,8 +23,6 @@ export const ApplicationDeploymentHistory = ({
         return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
     });
 
-    const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
-
     return (
         <div className='application-deployment-history'>
             {recentDeployments.map((info, index) => (
@@ -78,104 +72,8 @@ export const ApplicationDeploymentHistory = ({
                                 </div>
                             </div>
                         </div>
-                        {selectedRollbackDeploymentIndex === index ? (
-                            info.sources === undefined ? (
-                                <React.Fragment>
-                                    <div>
-                                        <div className='row'>
-                                            <div className='columns small-3'>Revision:</div>
-                                            <div className='columns small-9'>
-                                                <Revision repoUrl={info.source.repoURL} revision={info.revision} />
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <RevisionMetadataRows
-                                        applicationName={app.metadata.name}
-                                        applicationNamespace={app.metadata.namespace}
-                                        source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
-                                        index={0}
-                                        versionId={recentDeployments[index].id}
-                                    />
-                                    <button
-                                        type='button'
-                                        className='argo-button argo-button--base application-deployment-history__show-parameter-details'
-                                        onClick={() => setShowParameterDetails(!showParameterDetails)}>
-                                        {showParameterDetails ? 'Hide details' : 'Show details'}
-                                    </button>
 
-                                    {showParameterDetails && (
-                                        <DataLoader
-                                            input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
-                                            load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
-                                            {(details: models.RepoAppDetails) => (
-                                                <div>
-                                                    <ApplicationParameters
-                                                        application={{
-                                                            ...app,
-                                                            spec: {...app.spec, source: recentDeployments[index].source}
-                                                        }}
-                                                        details={details}
-                                                    />
-                                                </div>
-                                            )}
-                                        </DataLoader>
-                                    )}
-                                </React.Fragment>
-                            ) : (
-                                info.sources.map((source, i) => (
-                                    <React.Fragment key={`${index}_${i}`}>
-                                        {i > 0 ? <div className='separator' /> : null}
-                                        <div>
-                                            <div className='row'>
-                                                <div className='columns small-3'>Revision:</div>
-                                                <div className='columns small-9'>
-                                                    <Revision repoUrl={source.repoURL} revision={info.revisions[i]} />
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <RevisionMetadataRows
-                                            applicationName={app.metadata.name}
-                                            applicationNamespace={app.metadata.namespace}
-                                            source={{...source, targetRevision: recentDeployments[index].revisions[i]}}
-                                            index={i}
-                                            versionId={recentDeployments[index].id}
-                                        />
-                                        <button
-                                            type='button'
-                                            className='argo-button argo-button--base application-deployment-history__show-parameter-details'
-                                            onClick={() => setShowParameterDetails(!showParameterDetails)}>
-                                            {showParameterDetails ? 'Hide details' : 'Show details'}
-                                        </button>
-
-                                        {showParameterDetails && (
-                                            <DataLoader
-                                                input={{
-                                                    ...source,
-                                                    targetRevision: recentDeployments[index].revisions[i],
-                                                    index: i,
-                                                    versionId: recentDeployments[index].id,
-                                                    appName: app.metadata.name
-                                                }}
-                                                load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
-                                                {(details: models.RepoAppDetails) => (
-                                                    <div>
-                                                        <ApplicationParameters
-                                                            application={{
-                                                                ...app,
-                                                                spec: {...app.spec, source}
-                                                            }}
-                                                            details={details}
-                                                        />
-                                                    </div>
-                                                )}
-                                            </DataLoader>
-                                        )}
-                                    </React.Fragment>
-                                ))
-                            )
-                        ) : (
-                            <p>Click to see source details.</p>
-                        )}
+                        <ApplicationDeploymentHistoryDetails index={index} info={info} app={app} />
                     </div>
                 </div>
             ))}
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
index 8e2d968727a8a..c364e939054fb 100644
--- a/ui/src/app/applications/components/application-details/application-details.tsx
+++ b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -855,7 +855,6 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                             {this.selectedRollbackDeploymentIndex > -1 && (
                                                 <ApplicationDeploymentHistory
                                                     app={application}
-                                                    selectedRollbackDeploymentIndex={this.selectedRollbackDeploymentIndex}
                                                     rollbackApp={info => this.rollbackApplication(info, application)}
                                                     selectDeployment={i => this.setRollbackPanelVisible(i)}
                                                 />