fix: Page loadings (#481) (#482)

epam · Nov 13, 2024 · 40316af · 40316af
1 parent c64a624
commit 40316af
Show file tree

Hide file tree

Showing 24 changed files with 104 additions and 80 deletions.
diff --git a/src/k8s/groups/EDP/Codebase/hooks/useEnrichedApplicationsWithImageStreamsQuery.ts b/src/k8s/groups/EDP/Codebase/hooks/useEnrichedApplicationsWithImageStreamsQuery.ts
@@ -2,6 +2,7 @@ import React from 'react';
 import { UseQueryOptions } from 'react-query';
 import { CODEBASE_TYPES } from '../../../../../constants/codebaseTypes';
 import { KubeObjectListInterface } from '../../../../../types/k8s';
+import { getDefaultNamespace } from '../../../../../utils/getDefaultNamespace';
 import { CDPipelineKubeObjectInterface } from '../../CDPipeline/types';
 import { CodebaseImageStreamKubeObject } from '../../CodebaseImageStream';
 import { CodebaseImageStreamKubeObjectInterface } from '../../CodebaseImageStream/types';
@@ -48,7 +49,7 @@ export const useEnrichedApplicationsWithImageStreamsQuery = ({
   );
 
   const [codebaseImageStreams] = CodebaseImageStreamKubeObject.useList({
-    namespace: CDPipelineData?.metadata.namespace,
+    namespace: CDPipelineData?.metadata.namespace || getDefaultNamespace(),
   });
 
   return useCodebasesByTypeLabelQuery<EnrichedApplicationWithItsImageStreams[]>({

diff --git a/src/pages/cdpipeline-details/providers/DynamicData/provider.tsx b/src/pages/cdpipeline-details/providers/DynamicData/provider.tsx
@@ -21,6 +21,7 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
   const [CDPipeline, CDPipelineGetError] = CDPipelineKubeObject.useGet(name, namespace);
 
   const [stages, stagesError] = StageKubeObject.useList({
+    namespace,
     labelSelector: `${STAGE_LABEL_SELECTOR_CD_PIPELINE_NAME}=${name}`,
   });
 
@@ -33,10 +34,12 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
   }, [stages]);
 
   const [applications, applicationsError] = CodebaseKubeObject.useList({
+    namespace,
     labelSelector: `${CODEBASE_LABEL_SELECTOR_CODEBASE_TYPE}=${CODEBASE_TYPES.APPLICATION}`,
   });
 
   const [argoApplications, argoApplicationsError] = ApplicationKubeObject.useList({
+    namespace,
     labelSelector: `${APPLICATION_LABEL_SELECTOR_PIPELINE}=${name}`,
   });
 

diff --git a/...ls/components/CodebaseBranchesList/components/CodebaseBranch/components/Summary/index.tsx b/...ls/components/CodebaseBranchesList/components/CodebaseBranch/components/Summary/index.tsx
@@ -18,7 +18,7 @@ import { useTriggerTemplateByNameQuery } from '../../../../../../../../k8s/group
 import { LinkCreationService } from '../../../../../../../../services/link-creation';
 import { rem } from '../../../../../../../../utils/styling/rem';
 import { useTypedPermissions } from '../../../../../../hooks/useTypedPermissions';
-import { isDefaultBranch } from '../../../../utils';
+import { isDefaultBranch } from '../../../../../../utils';
 import { Actions } from '../Actions';
 import { useStyles } from './styles';
 import { SummaryProps } from './types';

diff --git a/src/pages/component-details/components/CodebaseBranchesList/index.tsx b/src/pages/component-details/components/CodebaseBranchesList/index.tsx
@@ -1,67 +1,32 @@
-import { CircularProgress, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import React from 'react';
 import { EmptyList } from '../../../../components/EmptyList';
 import { LearnMoreLink } from '../../../../components/LearnMoreLink';
 import { Section } from '../../../../components/Section';
 import { EDP_USER_GUIDE } from '../../../../constants/urls';
-import { CodebaseBranchKubeObject } from '../../../../k8s/groups/EDP/CodebaseBranch';
 import { CodebaseBranchKubeObjectInterface } from '../../../../k8s/groups/EDP/CodebaseBranch/types';
 import { useDialogContext } from '../../../../providers/Dialog/hooks';
 import { ManageCodebaseBranchDialog } from '../../../../widgets/dialogs/ManageCodebaseBranch';
 import { useDynamicDataContext } from '../../providers/DynamicData/hooks';
 import { CodebaseBranch } from './components/CodebaseBranch';
 import { TableHeaderActions } from './components/TableHeaderActions';
-import { isDefaultBranch } from './utils';
 
 export const CodebaseBranchesList = () => {
   const { setDialog } = useDialogContext();
   const {
     component: { data: component },
     pipelines: { data: pipelines },
+    codebaseBranches: { data: codebaseBranches },
   } = useDynamicDataContext();
 
-  const {
-    metadata: { name, namespace },
-  } = component;
-
-  const [currentCodebaseBranches, setCurrentCodebaseBranches] =
-    React.useState<CodebaseBranchKubeObjectInterface[]>(null);
-  const [, setError] = React.useState<Error>(null);
-  const [expandedPanel, setExpandedPanel] = React.useState<string>(null);
+  const [expandedPanel, setExpandedPanel] = React.useState<string>(
+    codebaseBranches?.length === 1 ? codebaseBranches[0].spec.branchName : null
+  );
 
   const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
     setExpandedPanel(isExpanded ? panel : null);
   };
 
-  const handleStoreCodebaseBranches = React.useCallback(
-    (data: CodebaseBranchKubeObjectInterface[]) => {
-      const sortedCodebaseBranches = data.sort((a) => (isDefaultBranch(component, a) ? -1 : 1));
-      setCurrentCodebaseBranches(sortedCodebaseBranches);
-
-      if (sortedCodebaseBranches.length === 1) {
-        setExpandedPanel(sortedCodebaseBranches[0].spec.branchName);
-      } else {
-        setExpandedPanel(null);
-      }
-    },
-    [setCurrentCodebaseBranches, component]
-  );
-
-  const handleError = React.useCallback((error: Error) => {
-    setError(error);
-  }, []);
-
-  React.useEffect(() => {
-    const cancelStream = CodebaseBranchKubeObject.streamListByCodebaseLabel(
-      name,
-      handleStoreCodebaseBranches,
-      handleError,
-      namespace
-    );
-
-    return () => cancelStream();
-  }, [name, namespace, handleStoreCodebaseBranches, handleError]);
-
   return (
     <Section
       title={
@@ -72,20 +37,14 @@ export const CodebaseBranchesList = () => {
             </Typography>
           </Grid>
           <Grid item style={{ marginLeft: 'auto' }}>
-            <TableHeaderActions codebase={component} defaultBranch={currentCodebaseBranches?.[0]} />
+            <TableHeaderActions codebase={component} defaultBranch={codebaseBranches?.[0]} />
           </Grid>
         </Grid>
       }
     >
-      {currentCodebaseBranches === null ? (
-        <Grid container justifyContent={'center'} alignItems={'center'}>
-          <Grid item>
-            <CircularProgress />
-          </Grid>
-        </Grid>
-      ) : currentCodebaseBranches.length ? (
+      {codebaseBranches.length ? (
         <>
-          {currentCodebaseBranches.map((codebaseBranchData: CodebaseBranchKubeObjectInterface) => {
+          {codebaseBranches.map((codebaseBranchData: CodebaseBranchKubeObjectInterface) => {
             const branchId = codebaseBranchData.spec.branchName;
 
             return (
@@ -96,7 +55,7 @@ export const CodebaseBranchesList = () => {
                 expandedPanel={expandedPanel}
                 codebaseData={component}
                 handlePanelChange={handleChange}
-                defaultBranch={currentCodebaseBranches?.[0]}
+                defaultBranch={codebaseBranches?.[0]}
                 pipelines={pipelines}
               />
             );
@@ -108,7 +67,7 @@ export const CodebaseBranchesList = () => {
           handleClick={() =>
             setDialog(ManageCodebaseBranchDialog, {
               codebase: component,
-              defaultBranch: currentCodebaseBranches?.[0],
+              defaultBranch: codebaseBranches?.[0],
               pipelines,
             })
           }

diff --git a/src/pages/component-details/hooks/usePageTabs.tsx b/src/pages/component-details/hooks/usePageTabs.tsx
@@ -7,7 +7,7 @@ import { Overview } from '../components/Overview';
 import { useDynamicDataContext } from '../providers/DynamicData/hooks';
 
 export const usePageTabs = () => {
-  const { component } = useDynamicDataContext();
+  const { component, codebaseBranches } = useDynamicDataContext();
 
   return React.useMemo(() => {
     return [
@@ -27,7 +27,7 @@ export const usePageTabs = () => {
         id: 'branches',
         component: (
           <Box sx={{ mt: (t) => t.typography.pxToRem(24) }}>
-            <LoadingWrapper isLoading={component.isLoading}>
+            <LoadingWrapper isLoading={component.isLoading || codebaseBranches.isLoading}>
               <ResourceActionListContextProvider>
                 <CodebaseBranchesList />
               </ResourceActionListContextProvider>
@@ -36,5 +36,5 @@ export const usePageTabs = () => {
         ),
       },
     ];
-  }, [component]);
+  }, [codebaseBranches.isLoading, component.isLoading]);
 };
diff --git a/src/pages/component-details/providers/Data/provider.tsx b/src/pages/component-details/providers/Data/provider.tsx
@@ -12,7 +12,6 @@ import {
   DependencyTrackApiService,
   SonarApiService,
 } from '../../../../services/api';
-import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace';
 import { MetricKey, SonarQubeMetricsResponse } from '../../../../widgets/SonarQubeMetrics/types';
 import { ComponentDetailsRouteParams } from '../../types';
 import { DataContext } from './context';
@@ -76,10 +75,7 @@ export const DataContextProvider: React.FC = ({ children }) => {
   const token = getToken(cluster);
   const { namespace, name } = useParams<ComponentDetailsRouteParams>();
 
-  const [EDPConfigMap] = ConfigMapKubeObject.useGet(
-    EDP_CONFIG_CONFIG_MAP_NAME,
-    getDefaultNamespace()
-  );
+  const [EDPConfigMap] = ConfigMapKubeObject.useGet(EDP_CONFIG_CONFIG_MAP_NAME, namespace);
 
   const { data: QuickLinksURLS } = useQuickLinksURLsQuery();
 

diff --git a/src/pages/component-details/providers/DynamicData/context.ts b/src/pages/component-details/providers/DynamicData/context.ts
@@ -10,4 +10,5 @@ const initialData = {
 export const DynamicDataContext = React.createContext<DynamicDataContextProviderValue>({
   component: initialData,
   pipelines: initialData,
+  codebaseBranches: initialData
 });
diff --git a/src/pages/component-details/providers/DynamicData/provider.tsx b/src/pages/component-details/providers/DynamicData/provider.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { CodebaseKubeObject } from '../../../../k8s/groups/EDP/Codebase';
+import { CodebaseBranchKubeObject } from '../../../../k8s/groups/EDP/CodebaseBranch';
+import { CODEBASE_BRANCH_LABEL_SELECTOR_CODEBASE_NAME } from '../../../../k8s/groups/EDP/CodebaseBranch/labels';
 import { useGitServerByCodebaseQuery } from '../../../../k8s/groups/EDP/GitServer/hooks/useGitServerByCodebaseQuery';
 import {
   generateBuildPipelineRef,
   generateReviewPipelineRef,
 } from '../../../../k8s/groups/Tekton/PipelineRun/utils';
 import { ComponentDetailsRouteParams } from '../../types';
+import { isDefaultBranch } from '../../utils';
 import { DynamicDataContext } from './context';
 
 export const DynamicDataContextProvider: React.FC = ({ children }) => {
@@ -28,6 +31,15 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
     component: component,
   });
 
+  const [codebaseBranches, codebaseBranchesError] = CodebaseBranchKubeObject.useList({
+    namespace,
+    labelSelector: `${CODEBASE_BRANCH_LABEL_SELECTOR_CODEBASE_NAME}=${name}`,
+  });
+
+  const sortedCodebaseBranches = codebaseBranches?.sort((a) =>
+    isDefaultBranch(component, a) ? -1 : 1
+  );
+
   const DataContextValue = React.useMemo(
     () => ({
       component: {
@@ -43,8 +55,21 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
         error: error,
         isLoading: component === null,
       },
+      codebaseBranches: {
+        data: sortedCodebaseBranches,
+        error: codebaseBranchesError,
+        isLoading: codebaseBranches === null,
+      },
     }),
-    [buildPipelineRefName, component, error, reviewPipelineRefName]
+    [
+      buildPipelineRefName,
+      codebaseBranches,
+      codebaseBranchesError,
+      component,
+      error,
+      reviewPipelineRefName,
+      sortedCodebaseBranches,
+    ]
   );
 
   return (

diff --git a/src/pages/component-details/providers/DynamicData/types.ts b/src/pages/component-details/providers/DynamicData/types.ts
@@ -1,4 +1,5 @@
 import { CodebaseKubeObjectInterface } from '../../../../k8s/groups/EDP/Codebase/types';
+import { CodebaseBranchKubeObjectInterface } from '../../../../k8s/groups/EDP/CodebaseBranch/types';
 import { DataProviderValue } from '../../../../types/pages';
 
 export interface DynamicDataContextProviderValue {
@@ -7,4 +8,5 @@ export interface DynamicDataContextProviderValue {
     review: string;
     build: string;
   }>;
+  codebaseBranches: DataProviderValue<CodebaseBranchKubeObjectInterface[]>;
 }
diff --git a/.../components/CodebaseBranchesList/utils.ts → src/pages/component-details/utils.ts b/.../components/CodebaseBranchesList/utils.ts → src/pages/component-details/utils.ts
@@ -1,5 +1,5 @@
-import { CodebaseKubeObjectInterface } from '../../../../k8s/groups/EDP/Codebase/types';
-import { CodebaseBranchKubeObjectInterface } from '../../../../k8s/groups/EDP/CodebaseBranch/types';
+import { CodebaseKubeObjectInterface } from '../../k8s/groups/EDP/Codebase/types';
+import { CodebaseBranchKubeObjectInterface } from '../../k8s/groups/EDP/CodebaseBranch/types';
 
 export const isDefaultBranch = (
   codebase: CodebaseKubeObjectInterface,

diff --git a/src/pages/configuration/pages/argocd/view.tsx b/src/pages/configuration/pages/argocd/view.tsx
@@ -32,6 +32,7 @@ import { useTypedPermissions } from './hooks/useTypedPermissions';
 
 export const PageView = () => {
   const [argoCDSecrets, argoCDSecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=${SYSTEM_QUICK_LINKS.ARGOCD}`,
   });
 

diff --git a/src/pages/configuration/pages/chat-assistant/view.tsx b/src/pages/configuration/pages/chat-assistant/view.tsx
@@ -26,6 +26,7 @@ import { useTypedPermissions } from './hooks/useTypedPermissions';
 
 export const PageView = () => {
   const [chatAssistantSecrets, chatAssistantSecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=chat-assistant`,
   });
   const chatAssistantSecret = chatAssistantSecrets?.[0]?.jsonData;

diff --git a/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx b/src/pages/configuration/pages/codemie/providers/DynamicData/provider.tsx
@@ -16,16 +16,25 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
     getDefaultNamespace()
   );
 
-  const [codemie, codemieError] = CodemieKubeObject.useList();
-  const [codemieProject, codemieProjectError] = CodemieProjectKubeObject.useList();
+  const [codemie, codemieError] = CodemieKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
+  const [codemieProject, codemieProjectError] = CodemieProjectKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
   const [codemieProjectSettings, codemieProjectSettingsError] =
-    CodemieProjectSettingsKubeObject.useList();
+    CodemieProjectSettingsKubeObject.useList({
+      namespace: getDefaultNamespace(),
+    });
 
   const [codemieSecrets, codemieSecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=codemie`,
   });
 
-  const [codemieApplications, codemieApplicationsError] = CodemieApplicationKubeObject.useList();
+  const [codemieApplications, codemieApplicationsError] = CodemieApplicationKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
 
   const codemieSecret = codemieSecrets?.[0];
 

diff --git a/src/pages/configuration/pages/defect-dojo/view.tsx b/src/pages/configuration/pages/defect-dojo/view.tsx
@@ -32,6 +32,7 @@ import { useTypedPermissions } from './hooks/useTypedPermissions';
 
 export const PageView = () => {
   const [defectDojoSecrets, defectDojoSecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=${SYSTEM_QUICK_LINKS.DEFECT_DOJO}`,
   });
 

diff --git a/src/pages/configuration/pages/dependency-track/view.tsx b/src/pages/configuration/pages/dependency-track/view.tsx
@@ -32,6 +32,7 @@ import { useTypedPermissions } from './hooks/useTypedPermissions';
 
 export const PageView = () => {
   const [dependencyTrackSecrets, dependencyTrackSecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=${SYSTEM_QUICK_LINKS.DEPENDENCY_TRACK}`,
   });
 

diff --git a/src/pages/configuration/pages/gitops/view.tsx b/src/pages/configuration/pages/gitops/view.tsx
@@ -47,7 +47,9 @@ export const PageView = () => {
   const status = gitOpsCodebase?.status?.status;
   const [icon, color, isRotating] = CodebaseKubeObject.getStatusIcon(status);
 
-  const [gitServers, gitServersError] = GitServerKubeObject.useList();
+  const [gitServers, gitServersError] = GitServerKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
   const history = useHistory();
 
   const gitServersConfigurationPageRoute = Router.createRouteURL(routeGitServerList.path);

diff --git a/src/pages/configuration/pages/gitservers/providers/DynamicData/provider.tsx b/src/pages/configuration/pages/gitservers/providers/DynamicData/provider.tsx
@@ -4,16 +4,25 @@ import { ConfigMapKubeObject } from '../../../../../../k8s/groups/default/Config
 import { SecretKubeObject } from '../../../../../../k8s/groups/default/Secret';
 import { SECRET_LABEL_SECRET_TYPE } from '../../../../../../k8s/groups/default/Secret/labels';
 import { GitServerKubeObject } from '../../../../../../k8s/groups/EDP/GitServer';
+import { getDefaultNamespace } from '../../../../../../utils/getDefaultNamespace';
 import { DynamicDataContext } from './context';
 
 export const DynamicDataContextProvider: React.FC = ({ children }) => {
-  const [configMaps, configMapsError] = ConfigMapKubeObject.useList();
+  const [configMaps, configMapsError] = ConfigMapKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
 
-  const [ingresses, ingressesError] = K8s.ingress.default.useList();
+  const [ingresses, ingressesError] = K8s.ingress.default.useList({
+    namespace: getDefaultNamespace(),
+  });
 
-  const [gitServers, gitServersError] = GitServerKubeObject.useList({});
+  const [gitServers, gitServersError] = GitServerKubeObject.useList({
+    namespace: getDefaultNamespace(),
+  });
 
   const [repositorySecrets, repositorySecretsError] = SecretKubeObject.useList({
+    namespace: getDefaultNamespace(),
+
     labelSelector: `${SECRET_LABEL_SECRET_TYPE}=repository`,
   });