From 461295a8916718017d0470380c740ef65b4a4f70 Mon Sep 17 00:00:00 2001 From: Tchoupinax Date: Tue, 17 Sep 2024 13:18:24 +0200 Subject: [PATCH] feat(ui): display sha's revision in every history release Signed-off-by: Tchoupinax --- ...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 ? ( + +
+
+
Revision:
+
+ +
+
+
+ + + + {showParameterDetails && ( + services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}> + {(details: models.RepoAppDetails) => ( +
+ +
+ )} +
+ )} +
+ ) : ( + info.sources.map((source, i) => ( + + {i > 0 ?
: null} +
+
+
Revision:
+
+ +
+
+
+ + + + {showParameterDetails && ( + services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}> + {(details: models.RepoAppDetails) => ( +
+ +
+ )} +
+ )} + + )) + )} + + ); +}; 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 (
{recentDeployments.map((info, index) => ( @@ -78,104 +72,8 @@ export const ApplicationDeploymentHistory = ({
- {selectedRollbackDeploymentIndex === index ? ( - info.sources === undefined ? ( - -
-
-
Revision:
-
- -
-
-
- - - {showParameterDetails && ( - services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}> - {(details: models.RepoAppDetails) => ( -
- -
- )} -
- )} -
- ) : ( - info.sources.map((source, i) => ( - - {i > 0 ?
: null} -
-
-
Revision:
-
- -
-
-
- - - - {showParameterDetails && ( - services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}> - {(details: models.RepoAppDetails) => ( -
- -
- )} -
- )} - - )) - ) - ) : ( -

Click to see source details.

- )} +
))} 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 -1 && ( this.rollbackApplication(info, application)} selectDeployment={i => this.setRollbackPanelVisible(i)} />