Skip to content

Commit d96caa1

Browse files
ashu8912ashu8912
committed
flux: Fix overview page fetching resource classes
1 parent b77a25b commit d96caa1

File tree

2 files changed

+46
-127
lines changed

2 files changed

+46
-127
lines changed

‎flux/src/helpers/index.tsx

+18-11
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
import Event from '@kinvolk/headlamp-plugin/lib/K8s/event';
88
import { KubeObject, KubeObjectClass } from '@kinvolk/headlamp-plugin/lib/lib/k8s/cluster';
99
import { localeDate, timeAgo } from '@kinvolk/headlamp-plugin/lib/Utils';
10-
import React from 'react';
10+
import K8s from '@kinvolk/headlamp-plugin/lib/k8s';
11+
import React, { useEffect } from 'react';
1112
import Table from '../common/Table';
1213
import { PluralName } from './pluralName';
1314

@@ -196,29 +197,35 @@ export function NameLink(resourceClass: KubeObjectClass) {
196197
),
197198
};
198199
}
199-
export function useFluxCheck(sourceCRDs) {
200+
export function useFluxCheck() {
201+
const [crds] = K8s.ResourceClasses.CustomResourceDefinition.useList();
202+
const [fluxCRDs, setFluxCrds] = React.useState([]);
203+
useEffect(() => {
204+
if (!crds) return;
205+
setFluxCrds(crds?.filter(crd => crd.metadata.name.includes('fluxcd.')))
206+
}, [crds])
200207
const [gitRepoCRD, allCrdsSuccessful] = React.useMemo(() => {
201-
const gitRepoCRD = sourceCRDs.find(
202-
crd => crd?.metadata?.name === 'gitrepositories.source.toolkit.fluxcd.io'
208+
const gitRepoCRD = fluxCRDs.find(
209+
crd => crd?.jsonData?.metadata?.name === 'gitrepositories.source.toolkit.fluxcd.io'
203210
);
204-
const allCrdsSuccessful = sourceCRDs.every(crd => {
211+
const allCrdsSuccessful = fluxCRDs.every(crd => {
205212
if (!crd) return true;
206-
const conditions = crd.status?.conditions || [];
213+
const conditions = crd?.jsonData.status?.conditions || [];
207214
// Check if any condition has status "True"
208215
const isSuccess = conditions.some(cond => cond.status === 'True');
209216
return isSuccess;
210217
});
211218

212219
return [gitRepoCRD, allCrdsSuccessful];
213-
}, sourceCRDs);
220+
}, [fluxCRDs]);
214221

215222
const fluxCheck = React.useMemo(() => {
216223
const partOfLabel = 'app.kubernetes.io/part-of';
217224
const kustomizeLabel = 'kustomize.toolkit.fluxcd.io';
218-
const version = gitRepoCRD?.metadata.labels?.['app.kubernetes.io/version'] ?? '';
219-
const name = gitRepoCRD?.metadata.labels?.[kustomizeLabel + '/name'] ?? '';
220-
const namespace = gitRepoCRD?.metadata.labels?.[kustomizeLabel + '/namespace'] ?? '';
221-
const partOf = gitRepoCRD?.metadata.labels?.[partOfLabel] ?? '';
225+
const version = gitRepoCRD?.jsonData?.metadata.labels?.['app.kubernetes.io/version'] ?? '';
226+
const name = gitRepoCRD?.jsonData?.metadata.labels?.[kustomizeLabel + '/name'] ?? '';
227+
const namespace = gitRepoCRD?.jsonData?.metadata.labels?.[kustomizeLabel + '/namespace'] ?? '';
228+
const partOf = gitRepoCRD?.jsonData?.metadata.labels?.[partOfLabel] ?? '';
222229

223230
return {
224231
version,

‎flux/src/overview/index.tsx

+28-116
Original file line numberDiff line numberDiff line change
@@ -15,80 +15,32 @@ import React, { useEffect } from 'react';
1515
import SourceLink from '../common/Link';
1616
import Table from '../common/Table';
1717
import { useFluxCheck } from '../helpers';
18-
import { IMAGE_AUTOMATION_BETA_VERSION } from '../image-automation/ImageAutomationList';
18+
import { imagePolicyClass, imageRepositoriesClass, imageUpdateAutomationClass } from '../image-automation/ImageAutomationList';
19+
import { kustomizationClass } from '../kustomizations/KustomizationList';
20+
import { helmReleaseClass } from '../helm-releases/HelmReleaseList';
21+
import { bucketRepositoryClass, gitRepositoryClass, helmChartClass, helmRepositoryClass, ociRepositoryClass } from '../sources/SourceList';
22+
import { providerNotificationClass } from '../notifications/NotificationList';
23+
import { alertNotificationClass } from '../notifications/NotificationList';
24+
import { receiverNotificationClass } from '../notifications/NotificationList';
1925

2026
export function FluxOverview() {
21-
const [kustomizations] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
22-
'kustomizations.kustomize.toolkit.fluxcd.io'
23-
);
24-
const [helmReleases] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
25-
'helmreleases.helm.toolkit.fluxcd.io'
26-
);
27-
const [gitRepoCRD] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
28-
'gitrepositories.source.toolkit.fluxcd.io'
29-
);
30-
const [ociRepos] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
31-
'ocirepositories.source.toolkit.fluxcd.io'
32-
);
33-
const [bucketRepos] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
34-
'buckets.source.toolkit.fluxcd.io'
35-
);
36-
const [helmRepos] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
37-
'helmrepositories.source.toolkit.fluxcd.io'
38-
);
39-
const [helmCharts] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
40-
'helmcharts.source.toolkit.fluxcd.io'
41-
);
27+
const kustomizationResourceClass = kustomizationClass()
28+
const helmReleaseResourceClass = helmReleaseClass()
29+
const gitRepoResourceClass = gitRepositoryClass();
30+
const ociRepoResourceClass = ociRepositoryClass();
31+
const bucketRepoResourceClass = bucketRepositoryClass();
32+
const helmRepoResourceClass = helmRepositoryClass();
33+
const helmChartResourceClass = helmChartClass();
34+
const alertsResourceClass = alertNotificationClass();
35+
const providersResourceClass = providerNotificationClass();
36+
const receiversResourceClass = receiverNotificationClass();
4237

43-
const [alerts] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
44-
'alerts.notification.toolkit.fluxcd.io'
45-
);
46-
const [providers] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
47-
'providers.notification.toolkit.fluxcd.io'
48-
);
49-
const [receivers] = K8s.ResourceClasses.CustomResourceDefinition.useGet(
50-
'receivers.notification.toolkit.fluxcd.io'
51-
);
38+
const imageUpdateAutomationResourceClass = imageUpdateAutomationClass();
39+
const imagePolicyResourceClass = imagePolicyClass();
40+
const imageRepositoryResourceClass = imageRepositoriesClass();
5241

53-
const CRD = React.useMemo(() => {
54-
const CRD = K8s.ResourceClasses.CustomResourceDefinition;
55-
const isVersionAvailable = CRD.apiEndpoint.apiInfo.find(
56-
apiInfo => apiInfo.version === IMAGE_AUTOMATION_BETA_VERSION
57-
);
58-
if (!isVersionAvailable) {
59-
CRD.apiEndpoint = apiFactory(
60-
...CRD.apiEndpoint.apiInfo.map(apiInfo => {
61-
const params = [];
62-
params.push(apiInfo.group);
63-
params.push(apiInfo.version);
64-
params.push(apiInfo.resource);
65-
return params;
66-
}),
67-
['apiextensions.k8s.io', IMAGE_AUTOMATION_BETA_VERSION, 'customresourcedefinitions']
68-
);
69-
}
7042

71-
return CRD;
72-
}, []);
73-
74-
const [imageRepository] = CRD.useGet('imagerepositories.image.toolkit.fluxcd.io');
75-
const [imageUpdateAutomation] = CRD.useGet('imageupdateautomations.image.toolkit.fluxcd.io');
76-
const [imagePolicy] = CRD.useGet('imagepolicies.image.toolkit.fluxcd.io');
77-
78-
const fluxCheck = useFluxCheck([
79-
gitRepoCRD,
80-
ociRepos,
81-
bucketRepos,
82-
helmRepos,
83-
helmCharts,
84-
kustomizations,
85-
alerts,
86-
providers,
87-
receivers,
88-
imageRepository,
89-
imageUpdateAutomation,
90-
imagePolicy,
91-
]);
43+
const fluxCheck = useFluxCheck();
9244

9345
const [pods] = K8s.ResourceClasses.Pod.useList({
9446
namespace: fluxCheck.namespace,
@@ -121,46 +73,6 @@ export function FluxOverview() {
12173
);
12274
}, [pods]);
12375

124-
const kustomizationResourceClass = React.useMemo(() => {
125-
return kustomizations?.makeCRClass();
126-
}, [kustomizations]);
127-
128-
const helmReleaseResourceClass = React.useMemo(() => {
129-
return helmReleases?.makeCRClass();
130-
}, [helmReleases]);
131-
132-
const gitRepoResourceClass = React.useMemo(() => {
133-
return gitRepoCRD?.makeCRClass();
134-
}, [gitRepoCRD]);
135-
136-
const ociRepoResourceClass = React.useMemo(() => {
137-
return ociRepos?.makeCRClass();
138-
}, [ociRepos]);
139-
140-
const bucketRepoResourceClass = React.useMemo(() => {
141-
return bucketRepos?.makeCRClass();
142-
}, [bucketRepos]);
143-
144-
const helmRepoResourceClass = React.useMemo(() => {
145-
return helmRepos?.makeCRClass();
146-
}, [helmRepos]);
147-
148-
const helmChartResourceClass = React.useMemo(() => {
149-
return helmCharts?.makeCRClass();
150-
}, [helmCharts]);
151-
152-
const imageRepositoryClass = React.useMemo(() => {
153-
return imageRepository?.makeCRClass();
154-
}, [imageRepository]);
155-
156-
const imageUpdateAutomationClass = React.useMemo(() => {
157-
return imageUpdateAutomation?.makeCRClass();
158-
}, [imageUpdateAutomation]);
159-
160-
const imagePolicyClass = React.useMemo(() => {
161-
return imagePolicy?.makeCRClass();
162-
}, [imagePolicy]);
163-
16476
return (
16577
<>
16678
<SectionBox title="Flux Overview">
@@ -199,23 +111,23 @@ export function FluxOverview() {
199111
{helmChartResourceClass && <FluxOverviewChart resourceClass={helmChartResourceClass} />}
200112
</Box>
201113
<Box width="300px" m={2}>
202-
{alerts && <FluxOverviewChart resourceClass={alerts.makeCRClass()} />}
114+
{alertsResourceClass && <FluxOverviewChart resourceClass={alertsResourceClass} />}
203115
</Box>
204116
<Box width="300px" m={2}>
205-
{providers && <FluxOverviewChart resourceClass={providers.makeCRClass()} />}
117+
{providersResourceClass && <FluxOverviewChart resourceClass={providersResourceClass} />}
206118
</Box>
207119
<Box width="300px" m={2}>
208-
{receivers && <FluxOverviewChart resourceClass={receivers.makeCRClass()} />}
120+
{receiversResourceClass && <FluxOverviewChart resourceClass={receiversResourceClass} />}
209121
</Box>
210122
<Box width="300px" m={2}>
211-
{imageRepositoryClass && <FluxOverviewChart resourceClass={imageRepositoryClass} />}
123+
{imageRepositoryResourceClass && <FluxOverviewChart resourceClass={imageRepositoryResourceClass} />}
212124
</Box>
213125
<Box width="300px" m={2}>
214-
{imagePolicyClass && <FluxOverviewChart resourceClass={imagePolicyClass} />}
126+
{imagePolicyResourceClass && <FluxOverviewChart resourceClass={imagePolicyResourceClass} />}
215127
</Box>
216128
<Box width="300px" m={2}>
217-
{imageUpdateAutomationClass && (
218-
<FluxOverviewChart resourceClass={imageUpdateAutomationClass} />
129+
{imageUpdateAutomationResourceClass && (
130+
<FluxOverviewChart resourceClass={imageUpdateAutomationResourceClass} />
219131
)}
220132
</Box>
221133
</Box>

0 commit comments

Comments
 (0)