Skip to content

feat: Add Sources tab to show all sources of a multi-source app (#17274) #17275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ishitasequeira merged 7 commits into from
Apr 16, 2024
Merged

feat: Add Sources tab to show all sources of a multi-source app (#17274) #17275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
95246c5
feat: Add Sources tab to show all sources of a multi-source app (#17274)
keithchong Feb 22, 2024
902647a
Update ui/src/app/applications/components/resource-details/resource-d…
keithchong Apr 4, 2024
e213231
Remove getAppSources
keithchong Apr 4, 2024
1239c71
Merge branch 'master' into 17274-SourcesTab
keithchong Apr 5, 2024
c36e52c
Add address Ishita's comments. Add missing Ref field
keithchong Apr 16, 2024
2027d76
Merge branch '17274-SourcesTab' of git@github.com:keithchong/argo-cd.…
keithchong Apr 16, 2024
42a8a83
Use single quotes
keithchong Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
394 changes: 301 additions & 93 deletions ui/src/app/applications/components/application-parameters/application-parameters.tsx
View file
Open in desktop

Large diffs are not rendered by default.

165 changes: 83 additions & 82 deletions ui/src/app/applications/components/application-summary/application-summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
title: 'CREATED AT',
view: formatCreationTimestamp(app.metadata.creationTimestamp)
},
{
!hasMultipleSources && {
title: 'REPO URL',
view: <Repo url={source.repoURL} />,
edit: (formApi: FormApi) =>
Expand All @@ -180,88 +180,89 @@ export const ApplicationSummary = (props: ApplicationSummaryProps) => {
<FormField formApi={formApi} field='spec.source.repoURL' component={Text} />
)
},
...(isHelm
? [
{
title: 'CHART',
view: (
<span>
{source.chart}:{source.targetRevision}
</span>
),
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('CHART is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<DataLoader
input={{repoURL: getAppSpecDefaultSource(formApi.getFormState().values.spec).repoURL}}
load={src => services.repos.charts(src.repoURL).catch(() => new Array<models.HelmChart>())}>
{(charts: models.HelmChart[]) => (
<div className='row'>
<div className='columns small-8'>
<FormField
formApi={formApi}
field='spec.source.chart'
component={AutocompleteField}
componentProps={{
items: charts.map(chart => chart.name),
filterSuggestions: true
}}
/>
...(!hasMultipleSources
? isHelm
? [
{
title: 'CHART',
view: (
<span>
{source.chart}:{source.targetRevision}
</span>
),
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('CHART is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<DataLoader
input={{repoURL: getAppSpecDefaultSource(formApi.getFormState().values.spec).repoURL}}
load={src => services.repos.charts(src.repoURL).catch(() => new Array<models.HelmChart>())}>
{(charts: models.HelmChart[]) => (
<div className='row'>
<div className='columns small-8'>
<FormField
formApi={formApi}
field='spec.source.chart'
component={AutocompleteField}
componentProps={{
items: charts.map(chart => chart.name),
filterSuggestions: true
}}
/>
</div>
<DataLoader
input={{charts, chart: getAppSpecDefaultSource(formApi.getFormState().values.spec).chart}}
load={async data => {
const chartInfo = data.charts.find(chart => chart.name === data.chart);
return (chartInfo && chartInfo.versions) || new Array<string>();
}}>
{(versions: string[]) => (
<div className='columns small-4'>
<FormField
formApi={formApi}
field='spec.source.targetRevision'
component={AutocompleteField}
componentProps={{
items: versions
}}
/>
<RevisionHelpIcon type='helm' top='0' />
</div>
)}
</DataLoader>
</div>
<DataLoader
input={{charts, chart: getAppSpecDefaultSource(formApi.getFormState().values.spec).chart}}
load={async data => {
const chartInfo = data.charts.find(chart => chart.name === data.chart);
return (chartInfo && chartInfo.versions) || new Array<string>();
}}>
{(versions: string[]) => (
<div className='columns small-4'>
<FormField
formApi={formApi}
field='spec.source.targetRevision'
component={AutocompleteField}
componentProps={{
items: versions
}}
/>
<RevisionHelpIcon type='helm' top='0' />
</div>
)}
</DataLoader>
</div>
)}
</DataLoader>
)
}
]
: [
{
title: 'TARGET REVISION',
view: <Revision repoUrl={source.repoURL} revision={source.targetRevision || 'HEAD'} />,
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('TARGET REVISION is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<RevisionFormField helpIconTop={'0'} hideLabel={true} formApi={formApi} repoURL={source.repoURL} />
)
},
{
title: 'PATH',
view: (
<Revision repoUrl={source.repoURL} revision={source.targetRevision || 'HEAD'} path={source.path} isForPath={true}>
{processPath(source.path)}
</Revision>
),
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('PATH is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<FormField formApi={formApi} field='spec.source.path' component={Text} />
)
}
]),

)}
</DataLoader>
)
}
]
: [
{
title: 'TARGET REVISION',
view: <Revision repoUrl={source.repoURL} revision={source.targetRevision || 'HEAD'} />,
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('TARGET REVISION is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<RevisionFormField helpIconTop={'0'} hideLabel={true} formApi={formApi} repoURL={source.repoURL} />
)
},
{
title: 'PATH',
view: (
<Revision repoUrl={source.repoURL} revision={source.targetRevision || 'HEAD'} path={source.path} isForPath={true}>
{processPath(source.path)}
</Revision>
),
edit: (formApi: FormApi) =>
hasMultipleSources ? (
helpTip('PATH is not editable for applications with multiple sources. You can edit them in the "Manifest" tab.')
) : (
<FormField formApi={formApi} field='spec.source.path' component={Text} />
)
}
]
: []),
{
title: 'REVISION HISTORY LIMIT',
view: app.spec.revisionHistoryLimit,
Expand Down
51 changes: 38 additions & 13 deletions ui/src/app/applications/components/resource-details/resource-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
const tab = new URLSearchParams(appContext.history.location.search).get('tab');
const selectedNodeInfo = NodeInfo(new URLSearchParams(appContext.history.location.search).get('node'));
const selectedNodeKey = selectedNodeInfo.key;
const [pageNumber, setPageNumber] = React.useState(0);

const getResourceTabs = (
node: ResourceNode,
Expand Down Expand Up @@ -161,23 +162,18 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
content: <ApplicationSummary app={application} updateApp={(app, query: {validate?: boolean}) => updateApp(app, query)} />
},
{
title: 'PARAMETERS',
key: 'parameters',
title: 'SOURCES',
Comment thread
keithchong marked this conversation as resolved.
key: 'sources',
content: (
<DataLoader
key='appDetails'
input={application}
load={app =>
services.repos.appDetails(AppUtils.getAppDefaultSource(app), app.metadata.name, app.spec.project).catch(() => ({
type: 'Directory' as AppSourceType,
path: AppUtils.getAppDefaultSource(app).path
}))
}>
{(details: RepoAppDetails) => (
<DataLoader key='appDetails' input={application} load={app => getSources(app)}>
{(details: RepoAppDetails[]) => (
<ApplicationParameters
save={(app: models.Application, query: {validate?: boolean}) => updateApp(app, query)}
application={application}
details={details}
details={details[0]}
detailsList={details}
pageNumber={pageNumber}
setPageNumber={setPageNumber}
/>
)}
</DataLoader>
Expand Down Expand Up @@ -368,3 +364,32 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
</div>
);
};

// Maintain compatibility with single source field. Remove else block when source field is removed
async function getSources(app: models.Application) {
const listOfDetails = new Array<RepoAppDetails & {type: AppSourceType; path: string}>();
const sources: models.ApplicationSource[] = app.spec.sources;
if (sources) {
const length = sources.length;
for (let i = 0; i < length; i++) {
const aSource = sources[i];
const repoDetail = await services.repos.appDetails(aSource, app.metadata.name, app.spec.project).catch(e => ({
type: 'Directory' as AppSourceType,
path: aSource.path
}));
if (repoDetail) {
listOfDetails.push(repoDetail);
}
}
return listOfDetails;
} else {
const repoDetail = await services.repos.appDetails(AppUtils.getAppDefaultSource(app), app.metadata.name, app.spec.project).catch(() => ({
type: 'Directory' as AppSourceType,
path: AppUtils.getAppDefaultSource(app).path
}));
if (repoDetail) {
listOfDetails.push(repoDetail);
}
return listOfDetails;
}
}
20 changes: 20 additions & 0 deletions ui/src/app/shared/components/editable-panel/editable-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,26 @@
right: 3em;
}

&__collapsible-button {
position: absolute;
top: 30px;
right: 30px;
}

&__sticky-title {
z-index: 10;
opacity: 75%;
position: sticky;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 5px;
text-align: center;
top: 0px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.form-field__select {
line-height: 15px;
padding: 0;
Expand Down
Loading