Skip to content

Commit

Permalink
fix: Rollback multi-source apps; 2nd follow-up to PR 14124 (#20566)
Browse files Browse the repository at this point in the history 
* fix: Rollback multi-source apps; 2nd follow-up to PR 14124

Signed-off-by: Keith Chong <[email protected]>

* Pull out styles changes; Make arrows more pronounced

Signed-off-by: Keith Chong <[email protected]>

* Lint issue again

Signed-off-by: Keith Chong <[email protected]>

* More lint errors. (Need to update my linter)

Signed-off-by: Keith Chong <[email protected]>

* Simplify code

Signed-off-by: Keith Chong <[email protected]>

---------

Signed-off-by: Keith Chong <[email protected]>
  • Loading branch information
@keithchong
keithchong authored Nov 4, 2024
1 parent a68d057 commit 8cf990b
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 55 deletions.
184 changes: 132 additions & 52 deletions ...ions/components/application-deployment-history/application-deployment-history-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import * as moment from 'moment';
import * as React from 'react';
import * as classNames from 'classnames';
import * as models from '../../../shared/models';
import './application-deployment-history.scss';
import '../../../shared/components/editable-panel/editable-panel.scss';
import {DataLoader} from 'argo-ui';
import {Revision} from '../../../shared/components';
import {Repo, Revision} from '../../../shared/components';
import {services} from '../../../shared/services';
import {ApplicationParameters} from '../application-parameters/application-parameters';
import {RevisionMetadataRows} from './revision-metadata-rows';
Expand All @@ -23,6 +25,63 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
});

const [showParameterDetails, setShowParameterDetails] = React.useState(Boolean);
const [showSourceDetails, setShowSourceDetails] = React.useState([]);
const updateMap = (i: number) => {
if (i === null || i === undefined) {
return;
}
if (showSourceDetails.includes(i)) {
setShowSourceDetails(showSourceDetails.filter(item => item !== i));
} else {
setShowSourceDetails([...showSourceDetails, i]);
}
};

const getCollapsedSection = (i: number, repoURL: string): React.ReactFragment => {
return (
<div
id={i ? `'hide-parameters-'${i}` : 'hide-parameters'}
key={i ? `'hide-parameters-'${i}` : 'hide-parameters'}
className='settings-overview__redirect-panel collapsible-section'
onClick={() => {
setShowParameterDetails(!showParameterDetails);
updateMap(i);
}}>
<div className='editable-panel__collapsible-button'>
<i className={`fa fa-angle-down filter__collapse editable-panel__collapsible-button__override`} />
</div>

<div style={{textAlign: 'center'}}>
<div className='settings-overview__redirect-panel__title'>{i != null ? 'Source ' + (i + 1) + ' Parameters' : 'Source Parameters'}</div>
<div className='settings-overview__redirect-panel__description'>URL: {repoURL}</div>
</div>
</div>
);
};

const getExpandedSection = (index?: number): React.ReactFragment => {
return (
<React.Fragment>
<div id={index ? `'show-parameters-'${index}` : 'show-parameters'} className='editable-panel__collapsible-button' style={{zIndex: 1001}}>
<i
className={`fa fa-angle-up filter__collapse editable-panel__collapsible-button__override`}
onClick={() => {
setShowParameterDetails(!showParameterDetails);
updateMap(index);
}}
/>
</div>
</React.Fragment>
);
};

const getErrorSection = (err: React.ReactNode): React.ReactFragment => {
return (
<div style={{padding: '1.7em'}}>
<p style={{textAlign: 'center'}}>{err}</p>
</div>
);
};

return (
<>
Expand All @@ -43,36 +102,44 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
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>
{showParameterDetails ? (
<div id={`'history-expanded'`} key={`'history-expanded'`} className={classNames('white-box', 'collapsible-section')}>
{getExpandedSection()}
<DataLoader
errorRenderer={err => {
return getErrorSection(err);
}}
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>
</div>
) : (
getCollapsedSection(null, recentDeployments[index].source.repoURL)
)}
</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'>Repo URL:</div>
<div className='columns small-9'>
<Repo url={source.repoURL} />
</div>
</div>
<div className='row'>
<div className='columns small-3'>Revision:</div>
<div className='columns small-9'>
Expand All @@ -87,35 +154,48 @@ export const ApplicationDeploymentHistoryDetails = ({app, info, index}: props) =
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>
{showSourceDetails.includes(i) ? (
<div id={`'history-expanded-'${i}`} key={`'history-expanded-'${i}`} className={classNames('white-box', 'collapsible-section')}>
<div id={`'history-expanded-'${i}`} key={`'history-expanded-'${i}`} className='white-box__details'>
{getExpandedSection(i)}
<DataLoader
errorRenderer={err => {
return getErrorSection(err);
}}
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) => (
<React.Fragment>
<div id={'floating_title_' + i} className='editable-panel__sticky-title'>
<div style={{marginTop: '0px'}}>
<div>Source {i + 1} Parameters</div>
<div>Repo URL: {source.repoURL}</div>
<div>{source.path ? 'Path: ' + source.path : ''}</div>
<span>
Revision: <Revision repoUrl={''} revision={info.revisions[i]}></Revision>
</span>
</div>
</div>
<ApplicationParameters
application={{
...app,
spec: {...app.spec, source}
}}
details={details}
/>
</React.Fragment>
)}
</DataLoader>
</div>
</div>
) : (
getCollapsedSection(i, source.repoURL)
)}
</React.Fragment>
))
Expand Down
13 changes: 12 additions & 1 deletion ...pplications/components/application-deployment-history/application-deployment-history.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
border-radius: $border-radius;
box-shadow: 1px 1px 3px $argo-color-gray-5;
margin-top: 1em;
overflow: hidden;

& > .columns {
padding: 1em;
Expand Down Expand Up @@ -47,6 +46,18 @@
margin-left: -1em;
}

.collapsible-section {
margin-top: 20px;
padding: 20px;
border: 1px solid;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
border-radius: '4px';
@include themify($themes) {
border-color: themed('border');
box-shadow: themed('shadow');
}
}

.separator {
height: 2px;
margin: 1em 0;
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/applications/components/application-parameters/application-parameters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ export const ApplicationParameters = (props: {
props.handleCollapse(index, !currentState);
}}>
<div className='editable-panel__collapsible-button'>
<i className={`fa fa-angle-down filter__collapse`} />
<i className={`fa fa-angle-down filter__collapse editable-panel__collapsible-button__override`} />
</div>
<div className='settings-overview__redirect-panel__content'>
<div className='settings-overview__redirect-panel__title'>Source {index + 1 + ': ' + appSource.repoURL}</div>
Expand All @@ -320,7 +320,7 @@ export const ApplicationParameters = (props: {
<React.Fragment>
<div className='editable-panel__collapsible-button'>
<i
className={`fa fa-angle-up filter__collapse`}
className={`fa fa-angle-up filter__collapse editable-panel__collapsible-button__override`}
onClick={() => {
props.handleCollapse(index, !props.collapsedSources[index]);
}}
Expand Down
6 changes: 6 additions & 0 deletions ui/src/app/shared/components/editable-panel/editable-panel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'node_modules/argo-ui/src/styles/config';
@import 'node_modules/argo-ui/src/styles/theme';

.editable-panel {
position: relative;
Expand Down Expand Up @@ -32,6 +33,11 @@
position: absolute;
top: 30px;
right: 30px;
&__override {
@include themify($themes) {
color: themed('light-argo-teal-7');
}
}
}

&__sticky-title {
Expand Down

0 comments on commit 8cf990b

Please sign in to comment.