Skip to content

Commit 4c9b72d

Browse files
aali309aali309
committed
proper logic for matrix genertar
Signed-off-by: Atif Ali <atali@redhat.com> refactor and restructure code Signed-off-by: Atif Ali <atali@redhat.com>
1 parent 274bee9 commit 4c9b72d

26 files changed

+1082
-359
lines changed

‎src/gitops/components/application/ApplicationSetDetailsPage.tsx‎

Lines changed: 6 additions & 358 deletions
Large diffs are not rendered by default.

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.application-set-details-page {
2+
&__grid {
3+
display: grid;
4+
grid-template-columns: 1fr;
5+
gap: 20px;
6+
}
7+
8+
&__grid-item {
9+
background: #212427;
10+
border: 1px solid #393F44;
11+
border-radius: 8px;
12+
padding: 20px;
13+
}
14+
15+
&__header {
16+
margin-bottom: 20px;
17+
}
18+
19+
&__header-title {
20+
font-size: 18px;
21+
font-weight: 600;
22+
color: #ffffff;
23+
margin: 0;
24+
}
25+
26+
&__content {
27+
color: #ffffff;
28+
}
29+
30+
&__conditions {
31+
margin-top: 20px;
32+
}
33+
34+
&__conditions-title {
35+
font-size: 16px;
36+
font-weight: 600;
37+
color: #ffffff;
38+
margin-bottom: 12px;
39+
}
40+
41+
&__conditions-table {
42+
border: 1px solid #393F44;
43+
border-radius: 6px;
44+
overflow: hidden;
45+
}
46+
47+
&__conditions-table-header {
48+
display: grid;
49+
grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
50+
background: #1a1d21;
51+
border-bottom: 1px solid #393F44;
52+
}
53+
54+
&__conditions-table-header-cell {
55+
padding: 12px;
56+
font-weight: 600;
57+
color: #ffffff;
58+
font-size: 14px;
59+
60+
&--type {
61+
grid-column: 1;
62+
}
63+
64+
&--status {
65+
grid-column: 2;
66+
}
67+
68+
&--updated {
69+
grid-column: 3;
70+
}
71+
72+
&--reason {
73+
grid-column: 4;
74+
}
75+
76+
&--message {
77+
grid-column: 5;
78+
}
79+
}
80+
81+
&__conditions-table-row {
82+
display: grid;
83+
grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
84+
border-bottom: 1px solid #393F44;
85+
86+
&:last-child {
87+
border-bottom: none;
88+
}
89+
}
90+
91+
&__conditions-table-row-cell {
92+
padding: 12px;
93+
color: #ffffff;
94+
font-size: 14px;
95+
96+
&--type {
97+
grid-column: 1;
98+
font-weight: 500;
99+
}
100+
101+
&--status {
102+
grid-column: 2;
103+
}
104+
105+
&--updated {
106+
grid-column: 3;
107+
}
108+
109+
&--reason {
110+
grid-column: 4;
111+
}
112+
113+
&--message {
114+
grid-column: 5;
115+
}
116+
}
117+
}

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as React from 'react';
2+
import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
3+
import { ApplicationSetKind } from '../../models/ApplicationSetModel';
4+
import {
5+
Badge,
6+
PageSection,
7+
Title,
8+
DescriptionList,
9+
Grid,
10+
GridItem,
11+
} from '@patternfly/react-core';
12+
import ResourceDetailsAttributes from '../../utils/components/ResourceDetails/ResourceDetailsAttributes';
13+
import './AppSetDetailsTab.scss';
14+
15+
type AppSetDetailsTabProps = {
16+
obj?: ApplicationSetKind;
17+
namespace?: string;
18+
name?: string;
19+
};
20+
21+
const AppSetDetailsTab: React.FC<AppSetDetailsTabProps> = ({ obj }) => {
22+
if (!obj) return null;
23+
24+
const metadata = obj.metadata || {};
25+
const status = obj.status || {};
26+
27+
return (
28+
<>
29+
<PageSection>
30+
<Title headingLevel="h2" className="co-section-heading">
31+
ApplicationSet details
32+
</Title>
33+
<Grid hasGutter={true} span={2} sm={3} md={6} lg={6} xl={6} xl2={6}>
34+
<GridItem>
35+
<DescriptionList>
36+
<ResourceDetailsAttributes
37+
metadata={metadata}
38+
resource={obj}
39+
showOwner={true}
40+
showStatus={true}
41+
showGeneratedApps={true}
42+
showGenerators={true}
43+
showAppProject={true}
44+
showRepository={true}
45+
/>
46+
</DescriptionList>
47+
</GridItem>
48+
</Grid>
49+
</PageSection>
50+
51+
{status.conditions && status.conditions.length > 0 && (
52+
<PageSection>
53+
<Title headingLevel="h2" className="co-section-heading">
54+
Conditions
55+
</Title>
56+
<div className="application-set-details-page__conditions-table">
57+
<div className="application-set-details-page__conditions-table-header">
58+
<div className="application-set-details-page__conditions-table-header-cell application-set-details-page__conditions-table-header-cell--type">Type</div>
59+
<div className="application-set-details-page__conditions-table-header-cell application-set-details-page__conditions-table-header-cell--status">Status</div>
60+
<div className="application-set-details-page__conditions-table-header-cell application-set-details-page__conditions-table-header-cell--updated">Updated</div>
61+
<div className="application-set-details-page__conditions-table-header-cell application-set-details-page__conditions-table-header-cell--reason">Reason</div>
62+
<div className="application-set-details-page__conditions-table-header-cell application-set-details-page__conditions-table-header-cell--message">Message</div>
63+
</div>
64+
{status.conditions.map((condition: any, index: number) => (
65+
<React.Fragment key={index}>
66+
<div className="application-set-details-page__conditions-table-row">
67+
<div className="application-set-details-page__conditions-table-row-cell application-set-details-page__conditions-table-row-cell--type">{condition.type}</div>
68+
<div className="application-set-details-page__conditions-table-row-cell application-set-details-page__conditions-table-row-cell--status">
69+
<Badge isRead color={condition.status === 'True' ? 'green' : 'red'}>
70+
{condition.status}
71+
</Badge>
72+
</div>
73+
<div className="application-set-details-page__conditions-table-row-cell application-set-details-page__conditions-table-row-cell--updated">
74+
<Timestamp timestamp={condition.lastTransitionTime} />
75+
</div>
76+
<div className="application-set-details-page__conditions-table-row-cell application-set-details-page__conditions-table-row-cell--reason">{condition.reason || ''}</div>
77+
<div className="application-set-details-page__conditions-table-row-cell application-set-details-page__conditions-table-row-cell--message">{condition.message || ''}</div>
78+
</div>
79+
</React.Fragment>
80+
))}
81+
</div>
82+
</PageSection>
83+
)}
84+
</>
85+
);
86+
};
87+
88+
export default AppSetDetailsTab;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.application-set-details-page {
2+
&__main-section {
3+
display: flex;
4+
flex-direction: column;
5+
height: 100%;
6+
}
7+
8+
&__body {
9+
flex: 1;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
&__pane-body {
15+
flex: 1;
16+
padding: 20px;
17+
overflow-y: auto;
18+
}
19+
}

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import * as React from 'react';
2+
import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
3+
import { ApplicationSetKind, ApplicationSetModel } from '../../models/ApplicationSetModel';
4+
import {
5+
Spinner,
6+
Bullseye,
7+
Tabs,
8+
Tab,
9+
TabTitleText,
10+
} from '@patternfly/react-core';
11+
import { useApplicationSetActionsProvider } from '../../hooks/useApplicationSetActionsProvider';
12+
import ResourceDetailsTitle from '../../utils/components/DetailsPageTitle/ResourceDetailsTitle';
13+
import AppSetDetailsTab from './AppSetDetailsTab';
14+
import GeneratorsTab from './GeneratorsTab';
15+
import AppsTab from './AppsTab';
16+
import EventsTab from './EventsTab';
17+
import YAMLTab from './YAMLTab';
18+
import './AppSetNavPage.scss';
19+
20+
type AppSetPageProps = {
21+
name: string;
22+
namespace: string;
23+
kind: string;
24+
};
25+
26+
const AppSetNavPage: React.FC<AppSetPageProps> = ({ name, namespace, kind }) => {
27+
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
28+
29+
const [appSet, loaded, loadError] = useK8sWatchResource<ApplicationSetKind>({
30+
groupVersionKind: {
31+
group: 'argoproj.io',
32+
version: 'v1alpha1',
33+
kind: 'ApplicationSet',
34+
},
35+
name,
36+
namespace,
37+
});
38+
39+
const [actions] = useApplicationSetActionsProvider(appSet);
40+
41+
if (loadError) return <div>Error loading ApplicationSet details.</div>;
42+
if (!loaded || !appSet) return (
43+
<Bullseye>
44+
<Spinner size="xl" />
45+
</Bullseye>
46+
);
47+
48+
const handleTabClick = (event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => {
49+
setActiveTabKey(tabIndex);
50+
};
51+
52+
return (
53+
<div className="application-set-details-page__main-section">
54+
<ResourceDetailsTitle
55+
obj={appSet}
56+
model={ApplicationSetModel}
57+
name={name}
58+
namespace={namespace}
59+
actions={actions}
60+
iconText="AS"
61+
iconTitle="Argo CD ApplicationSet"
62+
resourcePrefix="Argo CD"
63+
/>
64+
65+
<div className="application-set-details-page__body">
66+
<div className="application-set-details-page__pane-body">
67+
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} className="pf-v6-c-tabs">
68+
<Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} className="pf-v6-c-tab-content">
69+
<AppSetDetailsTab obj={appSet} namespace={namespace} name={name} />
70+
</Tab>
71+
<Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} className="pf-v6-c-tab-content">
72+
<YAMLTab obj={appSet} namespace={namespace} name={name} />
73+
</Tab>
74+
<Tab eventKey={2} title={<TabTitleText>Generators</TabTitleText>} className="pf-v6-c-tab-content">
75+
<GeneratorsTab obj={appSet} namespace={namespace} name={name} />
76+
</Tab>
77+
<Tab eventKey={3} title={<TabTitleText>Applications</TabTitleText>} className="pf-v6-c-tab-content">
78+
<AppsTab obj={appSet} namespace={namespace} name={name} />
79+
</Tab>
80+
<Tab eventKey={4} title={<TabTitleText>Events</TabTitleText>} className="pf-v6-c-tab-content">
81+
<EventsTab obj={appSet} namespace={namespace} name={name} />
82+
</Tab>
83+
</Tabs>
84+
</div>
85+
</div>
86+
</div>
87+
);
88+
};
89+
90+
export default AppSetNavPage;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.application-set-details-page {
2+
&__apps-container {
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import { ApplicationSetKind } from '../../models/ApplicationSetModel';
3+
import { PageSection } from '@patternfly/react-core';
4+
import ApplicationList from '../shared/ApplicationList';
5+
import './AppsTab.scss';
6+
7+
type AppsTabProps = {
8+
obj?: ApplicationSetKind;
9+
namespace?: string;
10+
name?: string;
11+
};
12+
13+
const AppsTab: React.FC<AppsTabProps> = ({ obj, namespace }) => {
14+
if (!obj || !namespace) return null;
15+
16+
return (
17+
<PageSection>
18+
<ApplicationList
19+
namespace={namespace}
20+
hideNameLabelFilters={false}
21+
showTitle={false}
22+
appset={obj}
23+
/>
24+
</PageSection>
25+
);
26+
};
27+
28+
export default AppsTab;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.application-set-details-page {
2+
&__events-container {
3+
display: flex;
4+
flex-direction: column;
5+
gap: 12px;
6+
}
7+
}

0 commit comments

Comments
 (0)