Skip to content

Commit 653e738

Browse files
TimothyAsirJeyasingTimothyAsirJeyasing
committed
Add seperate provider for context and pass as childern
red-hat-storage#672 Signed-off-by: Timothy Asir Jeyasingh <[email protected]>
1 parent f87daa4 commit 653e738

File tree

2 files changed

+176
-125
lines changed

2 files changed

+176
-125
lines changed

‎packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx

+20-8
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,22 @@ const aggregateAppsMap = (
7171
return acc;
7272
}, {});
7373

74-
const MonitoringDashboard: React.FC = () => {
74+
const CSVStatusesProvider: React.FC = ({ children }) => {
7575
const [csvData, csvError, csvLoading] = useCustomPrometheusPoll({
7676
endpoint: 'api/v1/query' as any,
7777
query: STATUS_QUERIES[StorageDashboard.CSV_STATUS_ALL_WHITELISTED],
7878
basePath: ACM_ENDPOINT,
7979
cluster: HUB_CLUSTER_NAME,
8080
});
8181

82+
return (
83+
<CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
84+
{children}
85+
</CSVStatusesContext.Provider>
86+
);
87+
};
88+
89+
const DRResourcesProvider: React.FC = ({ children }) => {
8290
const [managedClusters, managedClusterLoaded, managedClusterLoadError] =
8391
useK8sWatchResource<ACMManagedClusterKind[]>(
8492
getManagedClusterResourceObj()
@@ -122,17 +130,21 @@ const MonitoringDashboard: React.FC = () => {
122130
loadError,
123131
};
124132

125-
// ToDo(Sanjal): combime multiple Context together to make it scalable
126-
// refer: https://javascript.plainenglish.io/how-to-combine-context-providers-for-cleaner-react-code-9ed24f20225e
127133
return (
128-
<CSVStatusesContext.Provider value={{ csvData, csvError, csvLoading }}>
129-
<DRResourcesContext.Provider value={dRResourcesContext}>
130-
<UpperSection />
131-
</DRResourcesContext.Provider>
132-
</CSVStatusesContext.Provider>
134+
<DRResourcesContext.Provider value={dRResourcesContext}>
135+
{children}
136+
</DRResourcesContext.Provider>
133137
);
134138
};
135139

140+
const MonitoringDashboard: React.FC = () => (
141+
<CSVStatusesProvider>
142+
<DRResourcesProvider>
143+
<UpperSection />
144+
</DRResourcesProvider>
145+
</CSVStatusesProvider>
146+
);
147+
136148
const DRDashboard: React.FC = () => {
137149
const isMonitoringEnabled = useFlag(ACM_OBSERVABILITY_FLAG);
138150

‎packages/odf/components/topology/Topology.tsx

+156-117
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ import {
1818
createNode,
1919
defaultLayoutFactory,
2020
stylesComponentFactory,
21+
TopologyViewLevel,
22+
} from '@odf/shared/topology';
23+
import {
2124
TopologyDataContext,
2225
TopologySearchContext,
23-
TopologyViewLevel,
2426
} from '@odf/shared/topology';
2527
import {
2628
ClusterServiceVersionKind,
@@ -99,6 +101,151 @@ type SideBarProps = {
99101
isExpanded: boolean;
100102
};
101103

104+
const Error = ({ error }) => <>{error}</>;
105+
106+
const TopologyDataProvider: React.FC<{
107+
children: React.ReactNode;
108+
visualizationLevel: TopologyViewLevel;
109+
activeNode: string;
110+
setActiveNode: React.Dispatch<React.SetStateAction<string>>;
111+
}> = ({ children, visualizationLevel, activeNode, setActiveNode }) => {
112+
const [nodes, nodesLoaded, nodesError] =
113+
useK8sWatchResource<NodeKind[]>(nodeResource);
114+
const { odfNamespace, isODFNsLoaded, odfNsLoadError } =
115+
useODFNamespaceSelector();
116+
const [storageClusters, storageClustersLoaded, storageClustersError] =
117+
useK8sWatchResource<StorageClusterKind[]>(storageClusterResource);
118+
const [selectedElement, setSelectedElement] =
119+
React.useState<GraphElement | null>(null);
120+
121+
// ToDo (epic 4422): This will work as Internal mode cluster will only be created in ODF install namespace.
122+
// Still, make this generic so that this works even if it gets created in a different namespace.
123+
const storageCluster = getStorageClusterInNs(storageClusters, odfNamespace);
124+
const storageLabel = cephStorageLabel(odfNamespace);
125+
const odfNodes = nodes.filter((node) =>
126+
_.has(node.metadata.labels, storageLabel)
127+
);
128+
129+
const [deployments, deploymentsLoaded, deploymentsError] =
130+
useSafeK8sWatchResource<DeploymentKind[]>(odfDeploymentsResource);
131+
132+
const [pods, podsLoaded, podsError] =
133+
useSafeK8sWatchResource<PodKind[]>(odfPodsResource);
134+
135+
const [statefulSets, statefulSetLoaded, statefulSetError] =
136+
useSafeK8sWatchResource<K8sResourceCommon[]>(odfStatefulSetResource);
137+
138+
const [replicaSets, replicaSetsLoaded, replicaSetsError] =
139+
useSafeK8sWatchResource<K8sResourceCommon[]>(odfReplicaSetResource);
140+
141+
const [daemonSets, daemonSetsLoaded, daemonSetError] =
142+
useSafeK8sWatchResource<K8sResourceCommon[]>(odfDaemonSetResource);
143+
144+
const memoizedNodes = useDeepCompareMemoize(odfNodes, true);
145+
const memoizedDeployments = useDeepCompareMemoize(deployments, true);
146+
const memoizedPods = useDeepCompareMemoize(pods, true);
147+
const memoizedStatefulSets = useDeepCompareMemoize(statefulSets, true);
148+
const memoizedReplicaSets = useDeepCompareMemoize(replicaSets, true);
149+
const memoizedDaemonSets = useDeepCompareMemoize(daemonSets, true);
150+
const zones = memoizedNodes.map(getTopologyDomain);
151+
152+
const nodeDeploymentMap = React.useMemo(
153+
() =>
154+
generateNodeDeploymentsMap(
155+
memoizedNodes,
156+
memoizedPods,
157+
memoizedDeployments,
158+
...memoizedReplicaSets,
159+
...memoizedDaemonSets,
160+
...memoizedStatefulSets,
161+
...memoizedDeployments
162+
),
163+
[
164+
memoizedDaemonSets,
165+
memoizedDeployments,
166+
memoizedNodes,
167+
memoizedPods,
168+
memoizedReplicaSets,
169+
memoizedStatefulSets,
170+
]
171+
);
172+
173+
const value = {
174+
nodes: memoizedNodes,
175+
storageCluster,
176+
zones: zones,
177+
deployments: memoizedDeployments,
178+
visualizationLevel: visualizationLevel,
179+
activeNode,
180+
setActiveNode,
181+
nodeDeploymentMap,
182+
selectedElement,
183+
setSelectedElement,
184+
};
185+
186+
const loading =
187+
!nodesLoaded ||
188+
!storageClustersLoaded ||
189+
!deploymentsLoaded ||
190+
!podsLoaded ||
191+
!statefulSetLoaded ||
192+
!replicaSetsLoaded ||
193+
!daemonSetsLoaded ||
194+
!isODFNsLoaded;
195+
196+
const error =
197+
deploymentsError ||
198+
podsError ||
199+
statefulSetError ||
200+
replicaSetsError ||
201+
daemonSetError;
202+
203+
return (
204+
<>
205+
{loading || error ? (
206+
<HandleErrorAndLoading
207+
loading={loading}
208+
error={
209+
storageClustersError ||
210+
nodesError ||
211+
deploymentsError ||
212+
podsError ||
213+
replicaSetsError ||
214+
daemonSetError ||
215+
statefulSetError ||
216+
odfNsLoadError
217+
}
218+
ErrorMessage={Error}
219+
/>
220+
) : (
221+
<TopologyDataContext.Provider value={value}>
222+
{children}
223+
</TopologyDataContext.Provider>
224+
)}
225+
</>
226+
);
227+
};
228+
229+
const TopologySearchProvider: React.FC<{ children: React.ReactNode }> = ({
230+
children,
231+
}) => {
232+
const [activeItemsUID, setActiveItemsUID] = React.useState<string[]>([]);
233+
const [activeItem, setActiveItem] = React.useState<string>('');
234+
235+
const value = {
236+
activeItemsUID,
237+
setActiveItemsUID,
238+
activeItem,
239+
setActiveItem,
240+
};
241+
242+
return (
243+
<TopologySearchContext.Provider value={value}>
244+
{children}
245+
</TopologySearchContext.Provider>
246+
);
247+
};
248+
102249
const Sidebar: React.FC<SideBarProps> = ({ onClose, isExpanded }) => {
103250
const { selectedElement: element } = React.useContext(TopologyDataContext);
104251
const data = element?.getData();
@@ -458,81 +605,11 @@ const TopologyViewComponent: React.FC = () => {
458605
);
459606
};
460607

461-
const Error = ({ error }) => <>{error}</>;
462-
463608
const Topology: React.FC = () => {
464-
const { odfNamespace, isODFNsLoaded, odfNsLoadError } =
465-
useODFNamespaceSelector();
466-
467609
const [controller, setController] = React.useState<Visualization>(null);
468610
const [visualizationLevel, setVisualizationLevel] =
469611
React.useState<TopologyViewLevel>(TopologyViewLevel.NODES);
470-
const [activeItemsUID, setActiveItemsUID] = React.useState<string[]>([]);
471-
const [activeItem, setActiveItem] = React.useState<string>('');
472612
const [activeNode, setActiveNode] = React.useState('');
473-
const [selectedElement, setSelectedElement] =
474-
React.useState<GraphElement>(null);
475-
476-
const [nodes, nodesLoaded, nodesError] =
477-
useK8sWatchResource<NodeKind[]>(nodeResource);
478-
479-
const [storageClusters, storageClustersLoaded, storageClustersError] =
480-
useK8sWatchResource<StorageClusterKind[]>(storageClusterResource);
481-
482-
const [deployments, deploymentsLoaded, deploymentsError] =
483-
useSafeK8sWatchResource<DeploymentKind[]>(odfDeploymentsResource);
484-
485-
const [pods, podsLoaded, podsError] =
486-
useSafeK8sWatchResource<PodKind[]>(odfPodsResource);
487-
488-
const [statefulSets, statefulSetLoaded, statefulSetError] =
489-
useSafeK8sWatchResource<K8sResourceCommon[]>(odfStatefulSetResource);
490-
491-
const [replicaSets, replicaSetsLoaded, replicaSetsError] =
492-
useSafeK8sWatchResource<K8sResourceCommon[]>(odfReplicaSetResource);
493-
494-
const [daemonSets, daemonSetsLoaded, daemonSetError] =
495-
useSafeK8sWatchResource<K8sResourceCommon[]>(odfDaemonSetResource);
496-
497-
// ToDo (epic 4422): This will work as Internal mode cluster will only be created in ODF install namespace.
498-
// Still, make this generic so that this works even if it gets created in a different namespace.
499-
const storageCluster: StorageClusterKind = getStorageClusterInNs(
500-
storageClusters,
501-
odfNamespace
502-
);
503-
504-
const storageLabel = cephStorageLabel(odfNamespace);
505-
const odfNodes = nodes.filter((node) =>
506-
_.has(node.metadata.labels, storageLabel)
507-
);
508-
509-
const memoizedNodes = useDeepCompareMemoize(odfNodes, true);
510-
const memoizedDeployments = useDeepCompareMemoize(deployments, true);
511-
const memoizedPods = useDeepCompareMemoize(pods, true);
512-
const memoizedStatefulSets = useDeepCompareMemoize(statefulSets, true);
513-
const memoizedReplicaSets = useDeepCompareMemoize(replicaSets, true);
514-
const memoizedDaemonSets = useDeepCompareMemoize(daemonSets, true);
515-
516-
const nodeDeploymentMap = React.useMemo(
517-
() =>
518-
generateNodeDeploymentsMap(
519-
memoizedNodes,
520-
memoizedPods,
521-
memoizedDeployments,
522-
...memoizedReplicaSets,
523-
...memoizedDaemonSets,
524-
...memoizedStatefulSets,
525-
...memoizedDeployments
526-
),
527-
[
528-
memoizedDaemonSets,
529-
memoizedDeployments,
530-
memoizedNodes,
531-
memoizedPods,
532-
memoizedReplicaSets,
533-
memoizedStatefulSets,
534-
]
535-
);
536613

537614
const onStepInto = (args) => {
538615
const nodeName = args.label;
@@ -559,59 +636,21 @@ const Topology: React.FC = () => {
559636
};
560637
}, []);
561638

562-
const loading =
563-
!nodesLoaded ||
564-
!storageClustersLoaded ||
565-
!deploymentsLoaded ||
566-
!podsLoaded ||
567-
!statefulSetLoaded ||
568-
!replicaSetsLoaded ||
569-
!daemonSetsLoaded ||
570-
!isODFNsLoaded;
571-
572-
const zones = memoizedNodes.map(getTopologyDomain);
573-
574639
return (
575-
<TopologyDataContext.Provider
576-
value={{
577-
nodes: memoizedNodes,
578-
storageCluster: storageCluster,
579-
zones,
580-
deployments: memoizedDeployments,
581-
visualizationLevel: visualizationLevel,
582-
activeNode,
583-
setActiveNode,
584-
nodeDeploymentMap,
585-
selectedElement,
586-
setSelectedElement: setSelectedElement as any,
587-
}}
640+
<TopologyDataProvider
641+
visualizationLevel={visualizationLevel}
642+
activeNode={activeNode}
643+
setActiveNode={setActiveNode}
588644
>
589-
<TopologySearchContext.Provider
590-
value={{ activeItemsUID, setActiveItemsUID, activeItem, setActiveItem }}
591-
>
645+
<TopologySearchProvider>
592646
<VisualizationProvider controller={controller}>
593647
<div className="odf__topology-view" id="odf-topology">
594648
<TopologyTopBar />
595-
<HandleErrorAndLoading
596-
loading={loading}
597-
error={
598-
storageClustersError ||
599-
nodesError ||
600-
deploymentsError ||
601-
podsError ||
602-
replicaSetsError ||
603-
daemonSetError ||
604-
statefulSetError ||
605-
odfNsLoadError
606-
}
607-
ErrorMessage={Error}
608-
>
609-
<TopologyViewComponent />
610-
</HandleErrorAndLoading>
649+
<TopologyViewComponent />
611650
</div>
612651
</VisualizationProvider>
613-
</TopologySearchContext.Provider>
614-
</TopologyDataContext.Provider>
652+
</TopologySearchProvider>
653+
</TopologyDataProvider>
615654
);
616655
};
617656

0 commit comments

Comments
 (0)