Skip to content

Commit 65876af

Browse files
aali309aali309
committed
add filter logic for generated apps to display on appset details page
Signed-off-by: Atif Ali <atali@redhat.com> restore Applist Signed-off-by: Atif Ali <atali@redhat.com> reapply filter logic keeping the empty state when no apps are available Signed-off-by: Atif Ali <atali@redhat.com> rename ApplicationDetailsTitle and move it to where DetailsPageTitle Signed-off-by: Atif Ali <atali@redhat.com> remove border on the pages Signed-off-by: Atif Ali <atali@redhat.com> fix formatting Signed-off-by: Atif Ali <atali@redhat.com>
1 parent 1e613ed commit 65876af

File tree

3 files changed

+68
-70
lines changed

3 files changed

+68
-70
lines changed

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

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@ import { useK8sWatchResource, Timestamp } from '@openshift-console/dynamic-plugi
33
import { useParams } from 'react-router-dom-v5-compat';
44
import { ApplicationSetKind, ApplicationSetModel } from '../../models/ApplicationSetModel';
55
import {
6-
Card,
7-
CardBody,
8-
CardTitle,
9-
CardHeader,
106
Spinner,
117
Badge,
128
Label,
@@ -20,7 +16,7 @@ import {
2016
import { PencilAltIcon } from '@patternfly/react-icons';
2117
import * as _ from 'lodash';
2218
import { useApplicationSetActionsProvider } from '../../hooks/useApplicationSetActionsProvider';
23-
import ApplicationDetailsTitle from './ApplicationDetailsTitle';
19+
import ResourceDetailsTitle from '../../utils/components/DetailsPageTitle/ResourceDetailsTitle';
2420
import { useLabelsModal, useAnnotationsModal } from '@openshift-console/dynamic-plugin-sdk';
2521

2622
import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
@@ -61,12 +57,15 @@ const ApplicationSetDetailsPage: React.FC = () => {
6157

6258
return (
6359
<div className="pf-v6-c-page__main-section pf-m-no-padding pf-m-fill pf-v6-c-page__main-section--no-gap pf-v6-u-flex-shrink-1">
64-
<ApplicationDetailsTitle
60+
<ResourceDetailsTitle
6561
obj={appSet}
6662
model={ApplicationSetModel}
6763
name={name}
6864
namespace={ns}
6965
actions={actions}
66+
iconText="AS"
67+
iconTitle="Argo CD ApplicationSet"
68+
resourcePrefix="Argo CD"
7069
/>
7170

7271
{/* Main Content */}
@@ -78,11 +77,10 @@ const ApplicationSetDetailsPage: React.FC = () => {
7877
<div className="co-m-pane__body">
7978
<div className="pf-v6-l-grid pf-m-gutter">
8079
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
81-
<Card>
82-
<CardHeader>
83-
<CardTitle>ApplicationSet details</CardTitle>
84-
</CardHeader>
85-
<CardBody>
80+
<div style={{ marginBottom: '24px', paddingLeft: '24px', paddingTop: '24px' }}>
81+
<h2 style={{ fontSize: '20px', fontWeight: '600', marginBottom: '16px' }}>Argo CD ApplicationSet details</h2>
82+
</div>
83+
<div style={{ paddingLeft: '24px' }}>
8684
<DescriptionList data-test-id="resource-summary">
8785
<div className="pf-v6-c-description-list__group">
8886
<dt className="pf-v6-c-description-list__term" data-test-selector="details-item-label_Name">
@@ -349,8 +347,7 @@ const ApplicationSetDetailsPage: React.FC = () => {
349347
</div>
350348
</div>
351349
)}
352-
</CardBody>
353-
</Card>
350+
</div>
354351
</div>
355352
</div>
356353
</div>
@@ -383,14 +380,12 @@ const ApplicationSetDetailsPage: React.FC = () => {
383380
</Tab>
384381

385382
<Tab eventKey={2} title={<TabTitleText>Generators</TabTitleText>} className="pf-v6-c-tab-content">
386-
<div className="co-m-pane__body">
387-
<div className="pf-v6-l-grid pf-m-gutter">
388-
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
389-
<Card>
390-
<CardHeader>
391-
<CardTitle>Generators</CardTitle>
392-
</CardHeader>
393-
<CardBody>
383+
<div className="pf-v6-l-grid pf-m-gutter">
384+
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
385+
<div style={{ marginBottom: '24px', paddingLeft: '24px', paddingTop: '24px' }}>
386+
<h2 style={{ fontSize: '20px', fontWeight: '600', marginBottom: '16px' }}>Generators</h2>
387+
</div>
388+
<div style={{ paddingLeft: '24px' }}>
394389
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
395390
{appSet.spec?.generators?.map((generator: any, index: number) => {
396391
const generatorType = Object.keys(generator)[0];
@@ -515,11 +510,9 @@ const ApplicationSetDetailsPage: React.FC = () => {
515510
</div>
516511
)}
517512
</div>
518-
</CardBody>
519-
</Card>
513+
</div>
520514
</div>
521515
</div>
522-
</div>
523516
</Tab>
524517

525518
<Tab eventKey={3} title={<TabTitleText>Applications</TabTitleText>} className="pf-v6-c-tab-content">
@@ -539,11 +532,10 @@ const ApplicationSetDetailsPage: React.FC = () => {
539532
<div className="co-m-pane__body">
540533
<div className="pf-v6-l-grid pf-m-gutter">
541534
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
542-
<Card>
543-
<CardHeader>
544-
<CardTitle>Events</CardTitle>
545-
</CardHeader>
546-
<CardBody>
535+
<div style={{ marginBottom: '24px', paddingLeft: '24px', paddingTop: '24px' }}>
536+
<h2 style={{ fontSize: '20px', fontWeight: '600', marginBottom: '16px' }}>Events</h2>
537+
</div>
538+
<div style={{ paddingLeft: '24px' }}>
547539
{status.conditions && status.conditions.length > 0 ? (
548540
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
549541
{status.conditions.map((condition: any, index: number) => (
@@ -620,8 +612,7 @@ const ApplicationSetDetailsPage: React.FC = () => {
620612
</div>
621613
</div>
622614
)}
623-
</CardBody>
624-
</Card>
615+
</div>
625616
</div>
626617
</div>
627618
</div>

‎src/gitops/components/shared/ApplicationList.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
import {
2+
DataViewTable,
3+
DataViewTh,
4+
DataViewTr,
5+
} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
6+
import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
7+
import { Spinner, Flex, FlexItem, EmptyState, EmptyStateBody } from '@patternfly/react-core';
8+
import { CubesIcon } from '@patternfly/react-icons';
9+
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
10+
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
111
import * as React from 'react';
212
import { useTranslation } from 'react-i18next';
313
import { useSearchParams } from 'react-router-dom-v5-compat';
@@ -15,17 +25,6 @@ import {
1525
useK8sWatchResource,
1626
useListPageFilter,
1727
} from '@openshift-console/dynamic-plugin-sdk';
18-
import { ErrorState } from '@patternfly/react-component-groups';
19-
import { EmptyState, EmptyStateBody, Flex, FlexItem, Spinner } from '@patternfly/react-core';
20-
import {
21-
DataViewTable,
22-
DataViewTh,
23-
DataViewTr,
24-
} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
25-
import { useDataViewSort } from '@patternfly/react-data-view/dist/dynamic/Hooks';
26-
import DataView, { DataViewState } from '@patternfly/react-data-view/dist/esm/DataView';
27-
import { CubesIcon } from '@patternfly/react-icons';
28-
import { Tbody, Td, ThProps, Tr } from '@patternfly/react-table';
2928

3029
import { useApplicationActionsProvider } from '../..//hooks/useApplicationActionsProvider';
3130
import RevisionFragment from '../..//Revision/Revision';
@@ -126,7 +125,7 @@ const ApplicationList: React.FC<ApplicationProps> = ({
126125
return sortData(applications, sortBy, direction);
127126
}, [applications, sortBy, direction]);
128127
// TODO: use alternate filter since it is deprecated. See DataTableView potentially
129-
const [data, filteredData, onFilterChange] = useListPageFilter(sortedApplications, filters);
128+
const [, filteredData, onFilterChange] = useListPageFilter(sortedApplications, filters);
130129
// Filter applications by project or appset before rendering rows
131130
const filteredByOwner = React.useMemo(
132131
() => filteredData.filter(filterApp(project, appset)),
@@ -150,10 +149,11 @@ const ApplicationList: React.FC<ApplicationProps> = ({
150149
<Tbody>
151150
<Tr key="loading" ouiaId={'table-tr-loading'}>
152151
<Td colSpan={columnsDV.length}>
153-
<ErrorState
154-
titleText="Unable to load data"
155-
bodyText="There was an error retrieving applications. Check your connection and reload the page."
156-
/>
152+
<EmptyState headingLevel="h4" icon={CubesIcon} titleText="Unable to load data">
153+
<EmptyStateBody>
154+
There was an error retrieving applications. Check your connection and reload the page.
155+
</EmptyStateBody>
156+
</EmptyState>
157157
</Td>
158158
</Tr>
159159
</Tbody>
@@ -180,7 +180,7 @@ const ApplicationList: React.FC<ApplicationProps> = ({
180180
<ListPageBody>
181181
{!hideNameLabelFilters && (
182182
<ListPageFilter
183-
data={data.filter(filterApp(project, appset))}
183+
data={applications.filter(filterApp(project, appset))}
184184
loaded={loaded}
185185
rowFilters={filters}
186186
onFilterChange={onFilterChange}
@@ -476,4 +476,4 @@ export const filters: RowFilter[] = [
476476
},
477477
];
478478

479-
export default ApplicationList;
479+
export default ApplicationList;

‎src/gitops/components/application/ApplicationDetailsTitle.tsx‎ renamed to ‎src/gitops/utils/components/DetailsPageTitle/ResourceDetailsTitle.tsx‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
11
import * as React from 'react';
22
import { Link } from 'react-router-dom-v5-compat';
3-
import DevPreviewBadge from '../../../components/import/badges/DevPreviewBadge';
4-
import { DEFAULT_NAMESPACE } from '../../utils/constants';
5-
import { isApplicationRefreshing } from '../../utils/gitops';
6-
import { useGitOpsTranslation } from '../../utils/hooks/useGitOpsTranslation';
3+
import DevPreviewBadge from '../../../../components/import/badges/DevPreviewBadge';
4+
import { DEFAULT_NAMESPACE } from '../../../utils/constants';
5+
import { isApplicationRefreshing } from '../../../utils/gitops';
6+
import { useGitOpsTranslation } from '../../../utils/hooks/useGitOpsTranslation';
77
import { Action, K8sModel, K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk';
88
import { Breadcrumb, BreadcrumbItem, Spinner, Title } from '@patternfly/react-core';
9-
import ActionsDropdown from '../../utils/components/ActionDropDown/ActionDropDown';
10-
import DetailsPageTitle, { PaneHeading } from '../../utils/components/DetailsPageTitle/DetailsPageTitle';
11-
import './application-details-title.scss';
9+
import ActionsDropdown from '../../../utils/components/ActionDropDown/ActionDropDown';
10+
import DetailsPageTitle, { PaneHeading } from './DetailsPageTitle';
1211

13-
type ApplicationPageTitleProps = {
12+
type ResourceDetailsTitleProps = {
1413
obj: K8sResourceCommon;
1514
model: K8sModel;
1615
name: string;
1716
namespace: string;
1817
actions: Action[];
18+
// Configurable properties for different resource types
19+
iconText: string;
20+
iconTitle: string;
21+
resourcePrefix?: string; // e.g., "Argo CD" for Applications/ApplicationSets
22+
showDevPreviewBadge?: boolean;
23+
showRefreshSpinner?: boolean;
1924
};
2025

21-
const ApplicationDetailsTitle: React.FC<ApplicationPageTitleProps> = ({
26+
const ResourceDetailsTitle: React.FC<ResourceDetailsTitleProps> = ({
2227
obj,
2328
model,
2429
name,
2530
namespace,
2631
actions,
32+
iconText,
33+
iconTitle,
34+
resourcePrefix = '',
35+
showDevPreviewBadge = true,
36+
showRefreshSpinner = true,
2737
}) => {
2838
const { t } = useGitOpsTranslation();
2939

30-
// Determine the correct icon text and styling based on the model
31-
const isApplicationSet = model.kind === 'ApplicationSet';
32-
const iconText = isApplicationSet ? 'AS' : 'A';
33-
const iconTitle = isApplicationSet ? 'Argo CD ApplicationSet' : 'Argo CD Application';
34-
3540
return (
3641
<>
3742
<div>
@@ -44,10 +49,10 @@ const ApplicationDetailsTitle: React.FC<ApplicationPageTitleProps> = ({
4449
model.apiGroup + '~' + model.apiVersion + '~' + model.kind
4550
}`}
4651
>
47-
Argo CD {t(model.labelPlural)}
52+
{resourcePrefix} {t(model.labelPlural)}
4853
</Link>
4954
</BreadcrumbItem>
50-
<BreadcrumbItem>Argo CD {t(model.labelPlural + ' Details')}</BreadcrumbItem>
55+
<BreadcrumbItem>{resourcePrefix} {t(model.labelPlural + ' Details')}</BreadcrumbItem>
5156
</Breadcrumb>
5257
}
5358
>
@@ -61,11 +66,13 @@ const ApplicationDetailsTitle: React.FC<ApplicationPageTitleProps> = ({
6166
</span>
6267
<span className="co-resource-item__resource-name">
6368
{name ?? obj?.metadata?.name}{' '}
64-
{isApplicationRefreshing(obj) ? <Spinner size="md" /> : <span></span>}
65-
</span>
66-
<span style={{ marginLeft: '10px', marginBottom: '3px' }}>
67-
<DevPreviewBadge />
69+
{showRefreshSpinner && isApplicationRefreshing(obj) ? <Spinner size="md" /> : <span></span>}
6870
</span>
71+
{showDevPreviewBadge && (
72+
<span style={{ marginLeft: '10px', marginBottom: '3px' }}>
73+
<DevPreviewBadge />
74+
</span>
75+
)}
6976
</Title>
7077
<div className="co-actions">
7178
<ActionsDropdown actions={actions} isKebabToggle={false} />
@@ -77,4 +84,4 @@ const ApplicationDetailsTitle: React.FC<ApplicationPageTitleProps> = ({
7784
);
7885
};
7986

80-
export default ApplicationDetailsTitle;
87+
export default ResourceDetailsTitle;

0 commit comments

Comments
 (0)