Skip to content

Commit 5505134

Browse files
aali309aali309
authored
Merge pull request #254 from keithchong/10082-ViewInArgoCD
`View in Argo CD` action disabled (#10082)
2 parents 9086cb7 + 5461244 commit 5505134

12 files changed

Lines changed: 148 additions & 222 deletions

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

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
33
import classNames from 'classnames';
44

5+
import { useArgoServer } from '@gitops/hooks/useArgoServer';
56
import {
67
ApplicationKind,
78
ApplicationModel,
@@ -11,11 +12,11 @@ import Revision from '@gitops/Revision/Revision';
1112
import HealthStatus from '@gitops/Statuses/HealthStatus';
1213
import { OperationState } from '@gitops/Statuses/OperationState';
1314
import SyncStatus from '@gitops/Statuses/SyncStatus';
14-
import { ArgoServer, getArgoServer, getFriendlyClusterName } from '@gitops/utils/gitops';
15+
import { getApplicationArgoUrl, getFriendlyClusterName } from '@gitops/utils/gitops';
1516
import { labelControllerNamespaceKey } from '@gitops/utils/gitops';
1617
import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
1718
import { useObjectModifyPermissions } from '@gitops/utils/utils';
18-
import { k8sUpdate, ResourceLink, useK8sModel } from '@openshift-console/dynamic-plugin-sdk';
19+
import { k8sUpdate, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
1920
import { Label as PfLabel, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
2021
import {
2122
DescriptionList,
@@ -43,22 +44,10 @@ type ApplicationDetailsTabProps = RouteComponentProps<{
4344

4445
const ApplicationDetailsTab: React.FC<ApplicationDetailsTabProps> = ({ obj }) => {
4546
const { t } = useGitOpsTranslation();
46-
const [model] = useK8sModel({ group: 'route.openshift.io', version: 'v1', kind: 'Route' });
4747

4848
const [canPatch, canUpdate] = useObjectModifyPermissions(obj, ApplicationModel);
49-
50-
const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
51-
React.useEffect(() => {
52-
(async () => {
53-
getArgoServer(model, obj)
54-
.then((server) => {
55-
setArgoServer(server);
56-
})
57-
.catch((err) => {
58-
console.error('Error:', err);
59-
});
60-
})();
61-
}, [model, obj]);
49+
const argoServer = useArgoServer(obj);
50+
const argoUrl = getApplicationArgoUrl(argoServer, obj);
6251

6352
const onChangeAutomated = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
6453
const id = event.currentTarget.id;
@@ -142,21 +131,7 @@ const ApplicationDetailsTab: React.FC<ApplicationDetailsTabProps> = ({ obj }) =>
142131
<BaseDetailsSummary
143132
obj={obj}
144133
model={ApplicationModel}
145-
nameLink={
146-
<>
147-
<ArgoCDLink
148-
href={
149-
argoServer.protocol +
150-
'://' +
151-
argoServer.host +
152-
'/applications/' +
153-
obj?.metadata?.namespace +
154-
'/' +
155-
obj?.metadata?.name
156-
}
157-
/>
158-
</>
159-
}
134+
nameLink={argoUrl ? <ArgoCDLink href={argoUrl} /> : undefined}
160135
/>
161136
</FlexItem>
162137
</Flex>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import * as React from 'react';
22

33
import { useApplicationActionsProvider } from '@gitops/hooks/useApplicationActionsProvider';
4+
import { useArgoServer } from '@gitops/hooks/useArgoServer';
45
import { ApplicationKind, ApplicationModel } from '@gitops/models/ApplicationModel';
6+
import { getApplicationArgoUrl } from '@gitops/utils/gitops';
57
import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
68
import { HorizontalNav, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
79
import { Bullseye, Spinner } from '@patternfly/react-core';
@@ -35,7 +37,9 @@ const ApplicationNavPage: React.FC<ApplicationPageProps> = ({ name, namespace, k
3537
namespace,
3638
});
3739

38-
const [actions] = useApplicationActionsProvider(application);
40+
const argoServer = useArgoServer(application);
41+
const argoUrl = getApplicationArgoUrl(argoServer, application);
42+
const [actions] = useApplicationActionsProvider(application, argoUrl);
3943

4044
const pages = React.useMemo(
4145
() => [

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

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
33
import classNames from 'classnames';
44

5+
import { useArgoServer } from '@gitops/hooks/useArgoServer';
56
import { useResourceActionsProvider } from '@gitops/hooks/useResourceActionsProvider';
67
import HealthStatus from '@gitops/Statuses/HealthStatus';
78
import SyncStatus from '@gitops/Statuses/SyncStatus';
@@ -15,7 +16,6 @@ import {
1516
ResourceLink,
1617
RowFilter,
1718
RowFilterItem,
18-
useK8sModel,
1919
useListPageFilter,
2020
} from '@openshift-console/dynamic-plugin-sdk';
2121
import {
@@ -33,7 +33,7 @@ import { DataViewTh, DataViewTr } from '@patternfly/react-data-view/dist/esm/Dat
3333
import { CubesIcon } from '@patternfly/react-icons';
3434
import { Tbody, Td, Tr } from '@patternfly/react-table';
3535

36-
import { ArgoServer, getArgoServer } from '../../utils/gitops';
36+
import { getApplicationArgoUrl } from '../../utils/gitops';
3737
import ArgoCDLink from '../shared/ArgoCDLink/ArgoCDLink';
3838
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
3939

@@ -47,21 +47,8 @@ type ApplicationResourcesTabProps = RouteComponentProps<{
4747
};
4848

4949
const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }) => {
50-
const [model] = useK8sModel({ group: 'route.openshift.io', version: 'v1', kind: 'Route' });
51-
52-
const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
53-
54-
React.useEffect(() => {
55-
(async () => {
56-
getArgoServer(model, obj)
57-
.then((server) => {
58-
setArgoServer(server);
59-
})
60-
.catch((err) => {
61-
console.error('Error:', err);
62-
});
63-
})();
64-
}, [model, obj]);
50+
const argoServer = useArgoServer(obj);
51+
const argoUrl = getApplicationArgoUrl(argoServer, obj);
6552

6653
let resources: ApplicationResourceStatus[];
6754
if (obj?.status?.resources) {
@@ -91,17 +78,7 @@ const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }
9178
const memoizedFilteredResources = React.useMemo(() => [...filteredData], [filteredData]);
9279
const isEmptyResources = memoizedFilteredResources.length === 0;
9380

94-
const rows = useResourceRowsDV(
95-
memoizedFilteredResources,
96-
obj,
97-
argoServer.protocol +
98-
'://' +
99-
argoServer.host +
100-
'/applications/' +
101-
obj?.metadata?.namespace +
102-
'/' +
103-
obj?.metadata?.name,
104-
);
81+
const rows = useResourceRowsDV(memoizedFilteredResources, obj, argoUrl);
10582

10683
const empty = (
10784
<Tbody>
@@ -134,19 +111,7 @@ const ApplicationResourcesTab: React.FC<ApplicationResourcesTabProps> = ({ obj }
134111
</Flex>
135112
<PageBody>
136113
<Flex style={{ marginTop: '15px' }} flex={{ default: 'flexDefault' }}>
137-
<FlexItem>
138-
<ArgoCDLink
139-
href={
140-
argoServer.protocol +
141-
'://' +
142-
argoServer.host +
143-
'/applications/' +
144-
obj?.metadata?.namespace +
145-
'/' +
146-
obj?.metadata?.name
147-
}
148-
/>
149-
</FlexItem>
114+
<FlexItem>{argoUrl ? <ArgoCDLink href={argoUrl} /> : <></>}</FlexItem>
150115
</Flex>
151116
<>
152117
{obj.metadata && (

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

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
33

4+
import { useArgoServer } from '@gitops/hooks/useArgoServer';
45
import { ApplicationKind, ApplicationSource } from '@gitops/models/ApplicationModel';
56
import ExternalLink from '@gitops/utils/components/ExternalLink/ExternalLink';
67
import { GitIcon } from '@gitops/utils/components/Icons/GitIcon';
78
import { HelmIcon } from '@gitops/utils/components/Icons/HelmIcon';
89
import { OciIcon } from '@gitops/utils/components/Icons/OciIcon';
9-
import { ArgoServer, getArgoServer } from '@gitops/utils/gitops';
10+
import { ArgoServer, getApplicationArgoUrl } from '@gitops/utils/gitops';
1011
import { t } from '@gitops/utils/hooks/useGitOpsTranslation';
1112
import { repoUrl, revisionUrl } from '@gitops/utils/urls';
12-
import { useK8sModel } from '@openshift-console/dynamic-plugin-sdk';
1313
import {
1414
EmptyState,
1515
EmptyStateBody,
@@ -182,6 +182,7 @@ export const useRowsDV = (sources: ApplicationSource[]): DataViewTr[] => {
182182
export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer }) => {
183183
const columns = useColumnsDV();
184184
const rows = useRowsDV(sources);
185+
const argoUrl = getApplicationArgoUrl(argoServer, obj);
185186
const empty = (
186187
<Tbody>
187188
<Tr key="loading" ouiaId="table-tr-loading">
@@ -197,23 +198,19 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
197198
);
198199
return (
199200
<>
200-
<ArgoCDLink
201-
href={
202-
argoServer.protocol +
203-
'://' +
204-
argoServer.host +
205-
'/applications/' +
206-
obj?.metadata?.namespace +
207-
'/' +
208-
obj?.metadata?.name +
209-
'?resource=&node=argoproj.io%2FApplication%2F' +
210-
obj?.metadata?.namespace +
211-
'%2F' +
212-
obj?.metadata?.name +
213-
'%2F' +
214-
'&tab=parameters'
215-
}
216-
/>
201+
{argoUrl && (
202+
<ArgoCDLink
203+
href={
204+
argoUrl +
205+
'?resource=&node=argoproj.io%2FApplication%2F' +
206+
obj?.metadata?.namespace +
207+
'%2F' +
208+
obj?.metadata?.name +
209+
'%2F' +
210+
'&tab=parameters'
211+
}
212+
/>
213+
)}
217214
<GitOpsDataViewTable
218215
rows={rows}
219216
columns={columns}
@@ -225,7 +222,7 @@ export const SourceList: React.FC<SourceListProps> = ({ sources, obj, argoServer
225222
};
226223

227224
const ApplicationSourcesTab: React.FC<ApplicationDetailsTabProps> = ({ obj }) => {
228-
const [model] = useK8sModel({ group: 'route.openshift.io', version: 'v1', kind: 'Route' });
225+
const argoServer = useArgoServer(obj);
229226

230227
let sources: ApplicationSource[];
231228
if (obj?.spec?.source) {
@@ -237,20 +234,6 @@ const ApplicationSourcesTab: React.FC<ApplicationDetailsTabProps> = ({ obj }) =>
237234
sources = [];
238235
}
239236

240-
const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
241-
242-
React.useEffect(() => {
243-
(async () => {
244-
getArgoServer(model, obj)
245-
.then((server) => {
246-
setArgoServer(server);
247-
})
248-
.catch((err) => {
249-
console.error('Error:', err);
250-
});
251-
})();
252-
}, [model, obj]);
253-
254237
return (
255238
<div>
256239
<PageSection

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

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import * as React from 'react';
22
import { RouteComponentProps } from 'react-router';
33
import classNames from 'classnames';
44

5+
import { useArgoServer } from '@gitops/hooks/useArgoServer';
56
import { useResourceActionsProvider } from '@gitops/hooks/useResourceActionsProvider';
67
import { OperationState } from '@gitops/Statuses/OperationState';
78
import SyncStatus from '@gitops/Statuses/SyncStatus';
89
import ActionDropDown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
9-
import { ArgoServer, getArgoServer, getDuration } from '@gitops/utils/gitops';
10+
import { getApplicationArgoUrl, getDuration } from '@gitops/utils/gitops';
1011
import { t } from '@gitops/utils/hooks/useGitOpsTranslation';
1112
import { ApplicationKind, ApplicationResourceStatus } from '@gitops-models/ApplicationModel';
1213
import {
1314
Action,
1415
K8sGroupVersionKind,
1516
ResourceLink,
1617
Timestamp,
17-
useK8sModel,
1818
} from '@openshift-console/dynamic-plugin-sdk';
1919
import {
2020
DescriptionList,
@@ -49,21 +49,8 @@ type ApplicationSyncStatusTabProps = RouteComponentProps<{
4949
};
5050

5151
const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj }) => {
52-
const [model] = useK8sModel({ group: 'route.openshift.io', version: 'v1', kind: 'Route' });
53-
54-
const [argoServer, setArgoServer] = React.useState<ArgoServer>({ host: '', protocol: '' });
55-
56-
React.useEffect(() => {
57-
(async () => {
58-
getArgoServer(model, obj)
59-
.then((server) => {
60-
setArgoServer(server);
61-
})
62-
.catch((err) => {
63-
console.error('Error:', err);
64-
});
65-
})();
66-
}, [model, obj]);
52+
const argoServer = useArgoServer(obj);
53+
const argoUrl = getApplicationArgoUrl(argoServer, obj);
6754

6855
let resources: ApplicationResourceStatus[];
6956
if (obj?.status?.operationState?.syncResult?.resources) {
@@ -83,17 +70,7 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
8370
return sortData(resources, sortBy, direction);
8471
}, [resources, sortBy, direction]);
8572

86-
const rows = useResourceRowsDV(
87-
sortedResources,
88-
obj,
89-
argoServer.protocol +
90-
'://' +
91-
argoServer.host +
92-
'/applications/' +
93-
obj?.metadata?.namespace +
94-
'/' +
95-
obj?.metadata?.name,
96-
);
73+
const rows = useResourceRowsDV(sortedResources, obj, argoUrl);
9774

9875
const empty = (
9976
<Tbody>

0 commit comments

Comments
 (0)