Skip to content

Commit b88a4d3

Browse files
aali309aali309
committed
applied Keith's latest changes
Signed-off-by: Atif Ali <atali@redhat.com>
1 parent 2ac7dac commit b88a4d3

File tree

11 files changed

+173
-486
lines changed

11 files changed

+173
-486
lines changed

‎src/gitops/components/appset/AppSetDetailsTab.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,3 +115,16 @@
115115
}
116116
}
117117
}
118+
119+
// Force dashed border styling for labels in ApplicationSet details
120+
.pf-c-description-list__description .co-label-group {
121+
border: 1px dashed var(--pf-v6-global--BorderColor--200) !important;
122+
border-radius: var(--pf-v6-global--BorderRadius--sm) !important;
123+
padding: var(--pf-v6-global--spacer--sm) !important;
124+
min-height: var(--pf-v6-global--spacer--lg) !important;
125+
display: flex !important;
126+
align-items: center !important;
127+
width: fit-content !important;
128+
max-width: 100% !important;
129+
}
130+

‎src/gitops/components/appset/AppSetDetailsTab.tsx‎

Lines changed: 63 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,23 @@ import {
66
PageSection,
77
Title,
88
DescriptionList,
9-
DescriptionListGroup,
10-
DescriptionListDescription,
11-
DescriptionListTermHelpText,
12-
DescriptionListTermHelpTextButton,
13-
Popover,
14-
Grid,
15-
GridItem,
9+
Flex,
10+
FlexItem,
1611
} from '@patternfly/react-core';
17-
import BaseDetailsSummary from '../shared/BaseDetailsSummary/BaseDetailsSummary';
12+
import BaseDetailsSummary, { DetailsDescriptionGroup } from '../shared/BaseDetailsSummary/BaseDetailsSummary';
1813
import { getAppSetGeneratorCount, getAppSetStatus } from '../../utils/gitops';
19-
import { ApplicationSetStatus } from '../../utils/constants';
20-
import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
14+
import { useK8sWatchResource, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
2115
import { ApplicationKind, ApplicationModel } from '../../models/ApplicationModel';
22-
import {
23-
HealthHealthyIcon,
24-
HealthDegradedIcon,
25-
HealthUnknownIcon,
26-
} from '../../utils/components/Icons/Icons';
2716
import { Conditions } from '../../utils/components/Conditions/Conditions';
17+
import Status from '../shared/Status/Status';
2818
import './AppSetDetailsTab.scss';
2919

3020
type AppSetDetailsTabProps = RouteComponentProps<{ ns: string; name: string }> & {
3121
obj?: ApplicationSetKind;
32-
namespace?: string;
33-
name?: string;
3422
};
3523

36-
const AppSetDetailsTab: React.FC<AppSetDetailsTabProps> = ({ obj, namespace }) => {
24+
const AppSetDetailsTab: React.FC<AppSetDetailsTabProps> = ({ obj }) => {
25+
const namespace = obj?.metadata?.namespace;
3726
if (!obj) return null;
3827

3928
const status = obj.status || {};
@@ -65,134 +54,68 @@ const AppSetDetailsTab: React.FC<AppSetDetailsTabProps> = ({ obj, namespace }) =
6554
<Title headingLevel="h2" className="co-section-heading">
6655
Argo CD ApplicationSet details
6756
</Title>
68-
<Grid hasGutter={true}>
69-
<GridItem span={12} sm={12} md={6} lg={6} xl={6} xl2={6}>
70-
<BaseDetailsSummary obj={obj} model={ApplicationSetModel} />
71-
</GridItem>
72-
<GridItem span={12} sm={12} md={6} lg={6} xl={6} xl2={6}>
73-
<DescriptionList className="pf-c-description-list">
74-
{/* Status */}
75-
<DescriptionListGroup>
76-
<DescriptionListTermHelpText>
77-
<Popover
78-
headerContent={<div>Status</div>}
79-
bodyContent={
80-
<div>
81-
<div>Current status of the ApplicationSet</div>
82-
<div style={{ fontSize: '14px', color: '#ffffff', borderTop: '1px solid #4f5255', paddingTop: '8px', marginTop: '8px', fontWeight: '500' }}>
83-
ApplicationSet {'>'} status
84-
</div>
85-
</div>
86-
}
87-
>
88-
<DescriptionListTermHelpTextButton>Status</DescriptionListTermHelpTextButton>
89-
</Popover>
90-
</DescriptionListTermHelpText>
91-
<DescriptionListDescription>
92-
<span>
93-
{appSetStatus === ApplicationSetStatus.HEALTHY && <HealthHealthyIcon />}
94-
{appSetStatus === ApplicationSetStatus.ERROR && <HealthDegradedIcon />}
95-
{appSetStatus === ApplicationSetStatus.UNKNOWN && <HealthUnknownIcon />}
96-
{' '}{appSetStatus === ApplicationSetStatus.HEALTHY ? 'Healthy' :
97-
appSetStatus === ApplicationSetStatus.ERROR ? 'Error' : 'Unknown'}
98-
</span>
99-
</DescriptionListDescription>
100-
</DescriptionListGroup>
57+
<Flex
58+
justifyContent={{ default: 'justifyContentSpaceEvenly' }}
59+
direction={{ default: 'column', lg: 'row' }}
60+
>
61+
<Flex flex={{ default: 'flex_2' }}>
62+
<FlexItem>
63+
<BaseDetailsSummary obj={obj} model={ApplicationSetModel} />
64+
</FlexItem>
65+
</Flex>
66+
<Flex flex={{ default: 'flex_2' }} direction={{ default: 'column' }}>
67+
<FlexItem>
68+
<DescriptionList className="pf-c-description-list">
69+
<DetailsDescriptionGroup
70+
title="Status"
71+
help="Current health status of the ApplicationSet."
72+
>
73+
<Status status={appSetStatus} />
74+
</DetailsDescriptionGroup>
10175

102-
{/* Generated Apps */}
103-
<DescriptionListGroup>
104-
<DescriptionListTermHelpText>
105-
<Popover
106-
headerContent={<div>Generated Apps</div>}
107-
bodyContent={
108-
<div>
109-
<div>Number of applications generated by this ApplicationSet</div>
110-
<div style={{ fontSize: '14px', color: '#ffffff', borderTop: '1px solid #4f5255', paddingTop: '8px', marginTop: '8px', fontWeight: '500' }}>
111-
ApplicationSet {'>'} status {'>'} applications
112-
</div>
113-
</div>
114-
}
115-
>
116-
<DescriptionListTermHelpTextButton>Generated Apps</DescriptionListTermHelpTextButton>
117-
</Popover>
118-
</DescriptionListTermHelpText>
119-
<DescriptionListDescription>
120-
<Badge isRead color="blue">{generatedAppsCount} application{generatedAppsCount !== 1 ? 's' : ''}</Badge>
121-
</DescriptionListDescription>
122-
</DescriptionListGroup>
76+
<DetailsDescriptionGroup
77+
title="Generated Apps"
78+
help="Number of applications generated by this ApplicationSet."
79+
>
80+
<Badge isRead color="blue">{generatedAppsCount} application{generatedAppsCount !== 1 ? 's' : ''}</Badge>
81+
</DetailsDescriptionGroup>
12382

124-
{/* Generators */}
125-
<DescriptionListGroup>
126-
<DescriptionListTermHelpText>
127-
<Popover
128-
headerContent={<div>Generators</div>}
129-
bodyContent={
130-
<div>
131-
<div>Number of generators configured in this ApplicationSet</div>
132-
<div style={{ fontSize: '14px', color: '#ffffff', borderTop: '1px solid #4f5255', paddingTop: '8px', marginTop: '8px', fontWeight: '500' }}>
133-
ApplicationSet {'>'} spec {'>'} generators
134-
</div>
135-
</div>
136-
}
137-
>
138-
<DescriptionListTermHelpTextButton>Generators</DescriptionListTermHelpTextButton>
139-
</Popover>
140-
</DescriptionListTermHelpText>
141-
<DescriptionListDescription>
142-
<Badge isRead color="grey">{totalGenerators} generator{totalGenerators !== 1 ? 's' : ''}</Badge>
143-
</DescriptionListDescription>
144-
</DescriptionListGroup>
83+
<DetailsDescriptionGroup
84+
title="Generators"
85+
help="Number of generators configured in this ApplicationSet."
86+
>
87+
<Badge isRead color="grey">{totalGenerators} generator{totalGenerators !== 1 ? 's' : ''}</Badge>
88+
</DetailsDescriptionGroup>
14589

146-
{/* App Project */}
147-
<DescriptionListGroup>
148-
<DescriptionListTermHelpText>
149-
<Popover
150-
headerContent={<div>App Project</div>}
151-
bodyContent={
152-
<div>
153-
<div>Argo CD project that this ApplicationSet belongs to</div>
154-
<div style={{ fontSize: '14px', color: '#ffffff', borderTop: '1px solid #4f5255', paddingTop: '8px', marginTop: '8px', fontWeight: '500' }}>
155-
ApplicationSet {'>'} spec {'>'} template {'>'} spec {'>'} project
156-
</div>
157-
</div>
158-
}
159-
>
160-
<DescriptionListTermHelpTextButton>App Project</DescriptionListTermHelpTextButton>
161-
</Popover>
162-
</DescriptionListTermHelpText>
163-
<DescriptionListDescription>
164-
<Badge isRead color="blue" style={{ backgroundColor: '#73bcf7', color: '#003a70' }}>AP</Badge> {spec.template?.spec?.project || 'default'}
165-
</DescriptionListDescription>
166-
</DescriptionListGroup>
90+
<DetailsDescriptionGroup
91+
title="App Project"
92+
help="Argo CD project that this ApplicationSet belongs to."
93+
>
94+
<ResourceLink
95+
namespace={obj?.metadata?.namespace}
96+
groupVersionKind={{
97+
group: 'argoproj.io',
98+
version: 'v1alpha1',
99+
kind: 'AppProject',
100+
}}
101+
name={spec.template?.spec?.project || 'default'}
102+
/>
103+
</DetailsDescriptionGroup>
167104

168-
{/* Repository */}
169105
{spec.template?.spec?.source?.repoURL && (
170-
<DescriptionListGroup>
171-
<DescriptionListTermHelpText>
172-
<Popover
173-
headerContent={<div>Repository</div>}
174-
bodyContent={
175-
<div>
176-
<div>Git repository URL where the ApplicationSet configuration is stored</div>
177-
<div style={{ fontSize: '14px', color: '#ffffff', borderTop: '1px solid #4f5255', paddingTop: '8px', marginTop: '8px', fontWeight: '500' }}>
178-
ApplicationSet {'>'} spec {'>'} template {'>'} spec {'>'} source {'>'} repoURL
179-
</div>
180-
</div>
181-
}
182-
>
183-
<DescriptionListTermHelpTextButton>Repository</DescriptionListTermHelpTextButton>
184-
</Popover>
185-
</DescriptionListTermHelpText>
186-
<DescriptionListDescription>
187-
<a href={spec.template.spec.source.repoURL} target="_blank" rel="noopener noreferrer">
188-
{spec.template.spec.source.repoURL}
189-
</a>
190-
</DescriptionListDescription>
191-
</DescriptionListGroup>
106+
<DetailsDescriptionGroup
107+
title="Repository"
108+
help="Git repository URL where the ApplicationSet configuration is stored."
109+
>
110+
<a href={spec.template.spec.source.repoURL} target="_blank" rel="noopener noreferrer">
111+
{spec.template.spec.source.repoURL}
112+
</a>
113+
</DetailsDescriptionGroup>
192114
)}
193-
</DescriptionList>
194-
</GridItem>
195-
</Grid>
115+
</DescriptionList>
116+
</FlexItem>
117+
</Flex>
118+
</Flex>
196119
</PageSection>
197120

198121
<PageSection>

‎src/gitops/components/appset/AppSetNavPage.scss‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

0 commit comments

Comments
 (0)