Skip to content

Commit f3f32e1

Browse files
krishagarwal278krishagarwal278
committed
CONSOLE-5028: Refactor dev-console and knative-plugin Packages to useK8sWatchResource(s)
1 parent c99c674 commit f3f32e1

17 files changed

Lines changed: 299 additions & 224 deletions

File tree

‎frontend/packages/dev-console/src/components/health-checks/HealthChecksPage.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
import type { FC } from 'react';
22
import { useParams } from 'react-router-dom-v5-compat';
3-
import { FirehoseResource, Firehose } from '@console/internal/components/utils';
3+
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
4+
import { K8sResourceKind } from '@console/internal/module/k8s';
45
import AddHealthChecksForm from './AddHealthChecksForm';
56

67
const HealthChecksPage: FC = () => {
78
const { ns, kind, name, containerName } = useParams();
8-
const resource: FirehoseResource[] = [
9-
{
10-
kind,
11-
namespace: ns,
12-
isList: false,
13-
name,
14-
prop: 'resource',
15-
},
16-
];
179

18-
return (
19-
<Firehose resources={resource}>
20-
<AddHealthChecksForm currentContainer={containerName} />
21-
</Firehose>
22-
);
10+
const [resourceData, loaded, loadError] = useK8sWatchResource<K8sResourceKind>({
11+
kind,
12+
namespace: ns,
13+
isList: false,
14+
name,
15+
});
16+
17+
const resource = {
18+
data: resourceData,
19+
loaded,
20+
loadError,
21+
};
22+
23+
return <AddHealthChecksForm resource={resource} currentContainer={containerName} />;
2324
};
2425

2526
export default HealthChecksPage;

‎frontend/packages/dev-console/src/components/import/DeployImage.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,16 @@ import { createOrUpdateDeployImageResources } from './deployImage-submit-utils';
1515
import { deployValidationSchema } from './deployImage-validation-utils';
1616
import DeployImageForm from './DeployImageForm';
1717
import { filterDeployedResources } from './import-submit-utils';
18-
import { DeployImageFormData, FirehoseList, Resources } from './import-types';
18+
import { DeployImageFormData, Resources } from './import-types';
1919
import { useUpdateKnScalingDefaultValues } from './serverless/useUpdateKnScalingDefaultValues';
2020

2121
export interface DeployImageProps {
2222
namespace: string;
23-
projects?: FirehoseList;
23+
projects?: {
24+
data: K8sResourceKind[];
25+
loaded: boolean;
26+
loadError?: any;
27+
};
2428
contextualSource?: string;
2529
}
2630

‎frontend/packages/dev-console/src/components/import/DeployImagePage.tsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import type { FunctionComponent } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useParams, useLocation } from 'react-router-dom-v5-compat';
4-
import { Firehose } from '@console/internal/components/utils';
4+
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
5+
import { K8sResourceKind } from '@console/internal/module/k8s';
56
import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
67
import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
78
import { QUERY_PROPERTIES } from '../../const';
@@ -15,19 +16,29 @@ const DeployImagePage: FunctionComponent = () => {
1516
const location = useLocation();
1617
const params = new URLSearchParams(location.search);
1718

19+
const [projectsData, loaded, loadError] = useK8sWatchResource<K8sResourceKind[]>({
20+
kind: 'Project',
21+
isList: true,
22+
});
23+
24+
const projects = {
25+
data: projectsData,
26+
loaded,
27+
loadError,
28+
};
29+
1830
return (
1931
<NamespacedPage disabled variant={NamespacedPageVariants.light}>
2032
<DocumentTitle>{t('devconsole~Deploy Image')}</DocumentTitle>
2133
<PageHeading title={t('devconsole~Deploy Image')} />
2234
<QueryFocusApplication>
2335
{(desiredApplication) => (
24-
<Firehose resources={[{ kind: 'Project', prop: 'projects', isList: true }]}>
25-
<DeployImage
26-
forApplication={desiredApplication}
27-
namespace={namespace}
28-
contextualSource={params.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
29-
/>
30-
</Firehose>
36+
<DeployImage
37+
forApplication={desiredApplication}
38+
namespace={namespace}
39+
contextualSource={params.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
40+
projects={projects}
41+
/>
3142
)}
3243
</QueryFocusApplication>
3344
</NamespacedPage>

‎frontend/packages/dev-console/src/components/import/ImportForm.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useActivePerspective } from '@console/dynamic-plugin-sdk';
88
import { GitProvider, ImportStrategy } from '@console/git-service/src';
99
import { history, AsyncComponent, StatusBox } from '@console/internal/components/utils';
1010
import { RouteModel } from '@console/internal/models';
11-
import { RouteKind } from '@console/internal/module/k8s';
11+
import { RouteKind, K8sResourceKind } from '@console/internal/module/k8s';
1212
import { getActiveApplication } from '@console/internal/reducers/ui';
1313
import { RootState } from '@console/internal/redux';
1414
import { ALL_APPLICATIONS_KEY, usePerspectives, useTelemetry } from '@console/shared';
@@ -38,7 +38,6 @@ import {
3838
} from './import-submit-utils';
3939
import {
4040
GitImportFormData,
41-
FirehoseList,
4241
ImportData,
4342
Resources,
4443
BaseFormData,
@@ -55,10 +54,15 @@ export interface ImportFormProps {
5554
namespace: string;
5655
importData: ImportData;
5756
contextualSource?: string;
58-
imageStreams?: FirehoseList;
57+
imageStreams?: {
58+
data: K8sResourceKind | K8sResourceKind[];
59+
loaded: boolean;
60+
loadError?: any;
61+
};
5962
projects?: {
63+
data: K8sResourceKind[];
6064
loaded: boolean;
61-
data: [];
65+
loadError?: any;
6266
};
6367
}
6468

@@ -153,7 +157,11 @@ const ImportForm: FC<ImportFormProps & StateProps> = ({
153157

154158
const initialVals = useUpdateKnScalingDefaultValues(initialValues);
155159
const builderImages: NormalizedBuilderImages =
156-
imageStreams && imageStreams.loaded && normalizeBuilderImages(imageStreams.data);
160+
imageStreams &&
161+
imageStreams.loaded &&
162+
normalizeBuilderImages(
163+
Array.isArray(imageStreams.data) ? imageStreams.data : [imageStreams.data],
164+
);
157165

158166
const handleSubmit = (values: GitImportFormData, actions) => {
159167
const imageStream = builderImages && builderImages[values.image.selected]?.obj;

‎frontend/packages/dev-console/src/components/import/ImportPage.tsx‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { FunctionComponent } from 'react';
2+
import { useMemo } from 'react';
23
import { TFunction } from 'i18next';
34
import { useTranslation } from 'react-i18next';
45
import { useParams, useLocation } from 'react-router-dom-v5-compat';
5-
import { Firehose, FirehoseResource } from '@console/internal/components/utils';
6+
import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook';
67
import { ImageStreamModel, ProjectModel } from '@console/internal/models';
8+
import { K8sResourceKind } from '@console/internal/module/k8s';
79
import DevPreviewBadge from '@console/shared/src/components/badges/DevPreviewBadge';
810
import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
911
import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
@@ -44,40 +46,47 @@ const ImportPage: FunctionComponent = () => {
4446
const preselectedNamespace = searchParams.get('preselected-ns');
4547
const importType = searchParams.get('importType');
4648

47-
let importData: ImportData;
48-
let resources: FirehoseResource[];
49-
if (imageStreamName && imageStreamNamespace) {
50-
importData = ImportFlows(t).s2i;
51-
resources = [
52-
{
53-
kind: ImageStreamModel.kind,
54-
prop: 'imageStreams',
55-
isList: false,
56-
name: imageStreamName,
57-
namespace: imageStreamNamespace,
58-
},
59-
{
60-
kind: ProjectModel.kind,
61-
prop: 'projects',
62-
isList: true,
63-
},
64-
];
65-
} else {
66-
importData = ImportFlows(t).git;
67-
resources = [
68-
{
69-
kind: ImageStreamModel.kind,
70-
prop: 'imageStreams',
71-
isList: true,
72-
namespace: 'openshift',
73-
},
74-
{
49+
const isS2i = !!(imageStreamName && imageStreamNamespace);
50+
const importData: ImportData = isS2i ? ImportFlows(t).s2i : ImportFlows(t).git;
51+
52+
const watchResources = useMemo(
53+
() => ({
54+
imageStreams: isS2i
55+
? {
56+
kind: ImageStreamModel.kind,
57+
isList: false,
58+
name: imageStreamName,
59+
namespace: imageStreamNamespace,
60+
}
61+
: {
62+
kind: ImageStreamModel.kind,
63+
isList: true,
64+
namespace: 'openshift',
65+
},
66+
projects: {
7567
kind: ProjectModel.kind,
76-
prop: 'projects',
7768
isList: true,
7869
},
79-
];
80-
}
70+
}),
71+
[isS2i, imageStreamName, imageStreamNamespace],
72+
);
73+
74+
const resources = useK8sWatchResources<{
75+
imageStreams: K8sResourceKind | K8sResourceKind[];
76+
projects: K8sResourceKind[];
77+
}>(watchResources);
78+
79+
const imageStreams = {
80+
data: resources.imageStreams.data,
81+
loaded: resources.imageStreams.loaded,
82+
loadError: resources.imageStreams.loadError,
83+
};
84+
85+
const projects = {
86+
data: resources.projects.data,
87+
loaded: resources.projects.loaded,
88+
loadError: resources.projects.loadError,
89+
};
8190

8291
return (
8392
<QueryFocusApplication>
@@ -88,14 +97,14 @@ const ImportPage: FunctionComponent = () => {
8897
title={importData.title}
8998
badge={importType === ImportTypes.devfile ? <DevPreviewBadge /> : null}
9099
/>
91-
<Firehose resources={resources}>
92-
<ImportForm
93-
forApplication={application}
94-
contextualSource={searchParams.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
95-
namespace={namespace || preselectedNamespace}
96-
importData={importData}
97-
/>
98-
</Firehose>
100+
<ImportForm
101+
forApplication={application}
102+
contextualSource={searchParams.get(QUERY_PROPERTIES.CONTEXT_SOURCE)}
103+
namespace={namespace || preselectedNamespace}
104+
importData={importData}
105+
imageStreams={imageStreams}
106+
projects={projects}
107+
/>
99108
</NamespacedPage>
100109
)}
101110
</QueryFocusApplication>

‎frontend/packages/dev-console/src/components/import/ImportSamplePage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
33
import { Formik } from 'formik';
44
import { useTranslation } from 'react-i18next';
55
import { useParams } from 'react-router-dom-v5-compat';
6-
import { FirehoseResource, LoadingBox, history } from '@console/internal/components/utils';
6+
import { LoadingBox, history } from '@console/internal/components/utils';
77
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
88
import { ImageStreamModel } from '@console/internal/models';
99
import { K8sResourceKind } from '@console/internal/module/k8s';
@@ -30,7 +30,7 @@ const ImportSamplePage: FC = () => {
3030
const { t } = useTranslation();
3131
const { ns: namespace, is: imageStreamName, isNs: imageStreamNamespace } = useParams();
3232

33-
const imageStreamResource: FirehoseResource = useMemo(
33+
const imageStreamResource = useMemo(
3434
() => ({
3535
kind: ImageStreamModel.kind,
3636
prop: 'imageStreams',

‎frontend/packages/dev-console/src/components/import/__tests__/DeployImage.spec.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,12 @@ jest.mock('../../QueryFocusApplication', () => ({
6262
},
6363
}));
6464

65+
jest.mock('@console/internal/components/utils/k8s-watch-hook', () => ({
66+
useK8sWatchResource: () => [[], true, null],
67+
}));
68+
6569
jest.mock('@console/internal/components/utils', () => ({
6670
...jest.requireActual('@console/internal/components/utils'),
67-
Firehose: (props) => {
68-
const mockProps = {
69-
projects: { data: [], loaded: true },
70-
};
71-
return props.children && typeof props.children === 'function'
72-
? props.children(mockProps)
73-
: 'Firehose Component';
74-
},
7571
usePreventDataLossLock: jest.fn(),
7672
}));
7773

‎frontend/packages/dev-console/src/components/import/import-types.ts‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ import { PipelineData } from '../pipeline-section/import-types';
1313

1414
export interface DeployImageFormProps {
1515
builderImages?: NormalizedBuilderImages;
16-
projects?: FirehoseList | WatchK8sResultsObject<K8sResourceKind[]>;
16+
projects?:
17+
| {
18+
data: K8sResourceKind[];
19+
loaded: boolean;
20+
loadError?: any;
21+
}
22+
| WatchK8sResultsObject<K8sResourceKind[]>;
1723
}
1824
export type ImageStreamPayload = boolean | K8sResourceKind;
1925

@@ -38,31 +44,34 @@ export interface ImageStreamContextProps {
3844
export interface SourceToImageFormProps {
3945
builderImages?: NormalizedBuilderImages;
4046
projects?: {
41-
data: [];
47+
data: K8sResourceKind[];
4248
loaded: boolean;
49+
loadError?: any;
4350
};
4451
}
4552

4653
export interface GitImportFormProps {
4754
builderImages?: NormalizedBuilderImages;
55+
imageStreams?: {
56+
data: K8sResourceKind | K8sResourceKind[];
57+
loaded: boolean;
58+
loadError?: any;
59+
};
4860
projects?: {
49-
data: [];
61+
data: K8sResourceKind[];
5062
loaded: boolean;
63+
loadError?: any;
5164
};
5265
}
5366
export interface DevfileImportFormProps {
5467
builderImages?: NormalizedBuilderImages;
5568
projects?: {
56-
data: [];
69+
data: K8sResourceKind[];
5770
loaded: boolean;
71+
loadError?: any;
5872
};
5973
}
6074

61-
export interface FirehoseList {
62-
data?: K8sResourceKind[];
63-
[key: string]: any;
64-
}
65-
6675
export interface DeployImageFormData {
6776
formType?: string;
6877
project: ProjectData;

‎frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
1616
import { Link } from 'react-router-dom-v5-compat';
1717
import { Alert } from '@console/dynamic-plugin-sdk';
1818
import { sortEvents } from '@console/internal/components/events';
19-
import { FirehoseResult, LoadingBox } from '@console/internal/components/utils';
19+
import { LoadingBox } from '@console/internal/components/utils';
2020
import { DeploymentConfigModel } from '@console/internal/models';
2121
import { K8sResourceKind, EventKind, PodKind } from '@console/internal/module/k8s';
2222
import { getFiringAlerts } from '@console/shared';
@@ -28,7 +28,11 @@ import './MonitoringOverview.scss';
2828
type MonitoringOverviewProps = {
2929
resource: K8sResourceKind;
3030
pods?: PodKind[];
31-
resourceEvents?: FirehoseResult<EventKind[]>;
31+
resourceEvents?: {
32+
data: EventKind[];
33+
loaded: boolean;
34+
loadError?: any;
35+
};
3236
monitoringAlerts: Alert[];
3337
};
3438

0 commit comments

Comments
 (0)