Skip to content

Commit f4c519a

Browse files
TchoupinaxTchoupinax
authoredSep 19, 2024··
feat(ui): display sha's revision in every history release (#19963)
Signed-off-by: Tchoupinax <corentinfiloche@hotmail.fr>
·
v2.14.5stable
1 parent 02a4d9f commit f4c519a

File tree

3 files changed

+129
-107
lines changed

3 files changed

+129
-107
lines changed
 

‎ui/src/app/applications/components/application-deployment-history/application-deployment-history-details.tsx

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import * as moment from 'moment';
2+
import * as React from 'react';
3+
import * as models from '../../../shared/models';
4+
import './application-deployment-history.scss';
5+
import {DataLoader} from 'argo-ui';
6+
import {Revision} from '../../../shared/components';
7+
import {services} from '../../../shared/services';
8+
import {ApplicationParameters} from '../application-parameters/application-parameters';
9+
import {RevisionMetadataRows} from './revision-metadata-rows';
10+
11+
type props = {
12+
app: models.Application;
13+
info: models.RevisionHistory;
14+
index: number;
15+
};
16+
17+
export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) => {
18+
const deployments = (app.status.history || []).slice().reverse();
19+
const recentDeployments = deployments.map((info, i) => {
20+
const nextDeployedAt = i === 0 ? null : deployments[i - 1].deployedAt;
21+
const runEnd = nextDeployedAt ? moment(nextDeployedAt) : moment();
22+
return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
23+
});
24+
25+
const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
26+
27+
return (
28+
<>
29+
{info.sources === undefined ? (
30+
<React.Fragment>
31+
<div>
32+
<div className='row'>
33+
<div className='columns small-3'>Revision:</div>
34+
<div className='columns small-9'>
35+
<Revision repoUrl={info.source.repoURL} revision={info.revision} />
36+
</div>
37+
</div>
38+
</div>
39+
<RevisionMetadataRows
40+
applicationName={app.metadata.name}
41+
applicationNamespace={app.metadata.namespace}
42+
source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
43+
index={0}
44+
versionId={recentDeployments[index].id}
45+
/>
46+
<button
47+
type='button'
48+
className='argo-button argo-button--base application-deployment-history__show-parameter-details'
49+
onClick={() => setShowParameterDetails(!showParameterDetails)}>
50+
{showParameterDetails ? 'Hide details' : 'Show details'}
51+
</button>
52+
53+
{showParameterDetails && (
54+
<DataLoader
55+
input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
56+
load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
57+
{(details: models.RepoAppDetails) => (
58+
<div>
59+
<ApplicationParameters
60+
application={{
61+
...app,
62+
spec: {...app.spec, source: recentDeployments[index].source}
63+
}}
64+
details={details}
65+
/>
66+
</div>
67+
)}
68+
</DataLoader>
69+
)}
70+
</React.Fragment>
71+
) : (
72+
info.sources.map((source, i) => (
73+
<React.Fragment key={`${index}_${i}`}>
74+
{i > 0 ? <div className='separator' /> : null}
75+
<div>
76+
<div className='row'>
77+
<div className='columns small-3'>Revision:</div>
78+
<div className='columns small-9'>
79+
<Revision repoUrl={source.repoURL} revision={info.revisions[i]} />
80+
</div>
81+
</div>
82+
</div>
83+
<RevisionMetadataRows
84+
applicationName={app.metadata.name}
85+
applicationNamespace={app.metadata.namespace}
86+
source={{...source, targetRevision: recentDeployments[index].revisions[i]}}
87+
index={i}
88+
versionId={recentDeployments[index].id}
89+
/>
90+
<button
91+
type='button'
92+
className='argo-button argo-button--base application-deployment-history__show-parameter-details'
93+
onClick={() => setShowParameterDetails(!showParameterDetails)}>
94+
{showParameterDetails ? 'Hide details' : 'Show details'}
95+
</button>
96+
97+
{showParameterDetails && (
98+
<DataLoader
99+
input={{
100+
...source,
101+
targetRevision: recentDeployments[index].revisions[i],
102+
index: i,
103+
versionId: recentDeployments[index].id,
104+
appName: app.metadata.name
105+
}}
106+
load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
107+
{(details: models.RepoAppDetails) => (
108+
<div>
109+
<ApplicationParameters
110+
application={{
111+
...app,
112+
spec: {...app.spec, source}
113+
}}
114+
details={details}
115+
/>
116+
</div>
117+
)}
118+
</DataLoader>
119+
)}
120+
</React.Fragment>
121+
))
122+
)}
123+
</>
124+
);
125+
};

‎ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx

+4-106
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
import {DataLoader, DropDownMenu, Duration} from 'argo-ui';
1+
import {DropDownMenu, Duration} from 'argo-ui';
22
import {InitiatedBy} from './initiated-by';
33
import * as moment from 'moment';
44
import * as React from 'react';
5-
import {Revision, Timestamp} from '../../../shared/components';
5+
import {Timestamp} from '../../../shared/components';
66
import * as models from '../../../shared/models';
7-
import {services} from '../../../shared/services';
8-
import {ApplicationParameters} from '../application-parameters/application-parameters';
9-
import {RevisionMetadataRows} from './revision-metadata-rows';
107
import './application-deployment-history.scss';
8+
import {ApplicationDeploymentHistoryDetails} from './application-deployment-history-details';
119

1210
export const ApplicationDeploymentHistory = ({
1311
app,
1412
rollbackApp,
15-
selectedRollbackDeploymentIndex,
1613
selectDeployment
1714
}: {
1815
app: models.Application;
19-
selectedRollbackDeploymentIndex: number;
2016
rollbackApp: (info: models.RevisionHistory) => any;
2117
selectDeployment: (index: number) => any;
2218
}) => {
@@ -27,8 +23,6 @@ export const ApplicationDeploymentHistory = ({
2723
return {...info, nextDeployedAt, durationMs: runEnd.diff(moment(info.deployedAt)) / 1000};
2824
});
2925

30-
const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
31-
3226
return (
3327
<div className='application-deployment-history'>
3428
{recentDeployments.map((info, index) => (
@@ -78,104 +72,8 @@ export const ApplicationDeploymentHistory = ({
7872
</div>
7973
</div>
8074
</div>
81-
{selectedRollbackDeploymentIndex === index ? (
82-
info.sources === undefined ? (
83-
<React.Fragment>
84-
<div>
85-
<div className='row'>
86-
<div className='columns small-3'>Revision:</div>
87-
<div className='columns small-9'>
88-
<Revision repoUrl={info.source.repoURL} revision={info.revision} />
89-
</div>
90-
</div>
91-
</div>
92-
<RevisionMetadataRows
93-
applicationName={app.metadata.name}
94-
applicationNamespace={app.metadata.namespace}
95-
source={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision}}
96-
index={0}
97-
versionId={recentDeployments[index].id}
98-
/>
99-
<button
100-
type='button'
101-
className='argo-button argo-button--base application-deployment-history__show-parameter-details'
102-
onClick={() => setShowParameterDetails(!showParameterDetails)}>
103-
{showParameterDetails ? 'Hide details' : 'Show details'}
104-
</button>
10575

106-
{showParameterDetails && (
107-
<DataLoader
108-
input={{...recentDeployments[index].source, targetRevision: recentDeployments[index].revision, appName: app.metadata.name}}
109-
load={src => services.repos.appDetails(src, src.appName, app.spec.project, 0, recentDeployments[index].id)}>
110-
{(details: models.RepoAppDetails) => (
111-
<div>
112-
<ApplicationParameters
113-
application={{
114-
...app,
115-
spec: {...app.spec, source: recentDeployments[index].source}
116-
}}
117-
details={details}
118-
/>
119-
</div>
120-
)}
121-
</DataLoader>
122-
)}
123-
</React.Fragment>
124-
) : (
125-
info.sources.map((source, i) => (
126-
<React.Fragment key={`${index}_${i}`}>
127-
{i > 0 ? <div className='separator' /> : null}
128-
<div>
129-
<div className='row'>
130-
<div className='columns small-3'>Revision:</div>
131-
<div className='columns small-9'>
132-
<Revision repoUrl={source.repoURL} revision={info.revisions[i]} />
133-
</div>
134-
</div>
135-
</div>
136-
<RevisionMetadataRows
137-
applicationName={app.metadata.name}
138-
applicationNamespace={app.metadata.namespace}
139-
source={{...source, targetRevision: recentDeployments[index].revisions[i]}}
140-
index={i}
141-
versionId={recentDeployments[index].id}
142-
/>
143-
<button
144-
type='button'
145-
className='argo-button argo-button--base application-deployment-history__show-parameter-details'
146-
onClick={() => setShowParameterDetails(!showParameterDetails)}>
147-
{showParameterDetails ? 'Hide details' : 'Show details'}
148-
</button>
149-
150-
{showParameterDetails && (
151-
<DataLoader
152-
input={{
153-
...source,
154-
targetRevision: recentDeployments[index].revisions[i],
155-
index: i,
156-
versionId: recentDeployments[index].id,
157-
appName: app.metadata.name
158-
}}
159-
load={src => services.repos.appDetails(src, src.appName, app.spec.project, i, recentDeployments[index].id)}>
160-
{(details: models.RepoAppDetails) => (
161-
<div>
162-
<ApplicationParameters
163-
application={{
164-
...app,
165-
spec: {...app.spec, source}
166-
}}
167-
details={details}
168-
/>
169-
</div>
170-
)}
171-
</DataLoader>
172-
)}
173-
</React.Fragment>
174-
))
175-
)
176-
) : (
177-
<p>Click to see source details.</p>
178-
)}
76+
<ApplicationDeploymentHistoryDetails index={index} info={info} app={app} />
17977
</div>
18078
</div>
18179
))}

‎ui/src/app/applications/components/application-details/application-details.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -855,7 +855,6 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
855855
{this.selectedRollbackDeploymentIndex > -1 && (
856856
<ApplicationDeploymentHistory
857857
app={application}
858-
selectedRollbackDeploymentIndex={this.selectedRollbackDeploymentIndex}
859858
rollbackApp={info => this.rollbackApplication(info, application)}
860859
selectDeployment={i => this.setRollbackPanelVisible(i)}
861860
/>

0 commit comments

Comments
 (0)
Please sign in to comment.