Skip to content

Commit

Permalink
feat(ui): display sha's revision in every history release (argoproj#1…
Browse files Browse the repository at this point in the history 
…9963)

Signed-off-by: Tchoupinax <[email protected]>
  • Loading branch information
@Tchoupinax
Tchoupinax authored Sep 19, 2024
1 parent 02a4d9f commit f4c519a
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 107 deletions.
125 changes: 125 additions & 0 deletions ...ions/components/application-deployment-history/application-deployment-history-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
))
)}
</>
);
};
110 changes: 4 additions & 106 deletions ...applications/components/application-deployment-history/application-deployment-history.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
}) => {
Expand All @@ -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) => (
Expand Down Expand Up @@ -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>
))}
Expand Down
1 change: 0 additions & 1 deletion ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
/>
Expand Down

0 comments on commit f4c519a

Please sign in to comment.