wip

]

@@ -0,0 +1,56 @@
+import { useSearch } from '@tanstack/react-router';
+
+import type { UseTreeDetailsWithoutVariant } from '@/api/treeDetails';
+import { useTreeDetails } from '@/api/treeDetails';
+import { useMemo, useState } from 'react';
+
+
+export const useTreeDetailsLazyLoadQuery = (
+  useTreeDetailsArgs: UseTreeDetailsWithoutVariant,
+) => {
+  const { fetchAll, setFetchAll } = useState(false);
+
+  const { data: summaryData, isLoading: summaryIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'summary',
+  });
+
+  const { data: summaryData, isLoading: summaryIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'builds',
+  });
+
+  const { data: boots, isLoading: bootsIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'boots',
+  });
+
+  const { data: testsData, isLoading: testIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'tests',
+  });
+  const { currentPageTab } = useSearch({
+    from: '/tree/$treeId/',
+  });
+
+  const canWeOpenTheGate = useMemo(() => {
+    if (currentPageTab === 'global.builds') {
+      return 'summary';
+    }
+    if (currentPageTab === 'global.boots') {
+      return 'builds';
+    }
+    if (currentPageTab === 'global.tests') {
+      return 'boots';
+    }
+    if (currentPageTab === 'tests') {
+      return 'tests';
+    }
+    return 'full';
+  }
+
+  return {
+    summaryData,
+    summaryIsLoading,
+  };
+};

dashboard/src/api/treeDetails.ts

@@ -99,17 +99,22 @@ const fetchTreeDetails = async ({
 type TreeDetailsResponse<T extends keyof TreeDetailsResponseTable> =
   TreeDetailsResponseTable[T];
 
+export type UseTreeDetailsWithoutVariant = {
+  treeId: string;
+  filter?: TFilter;
+  enabled?: boolean;
+};
+
+type UseTreeDetailsParameters<T extends TreeDetailsVariants> = {
+  variant: T;
+} & UseTreeDetailsWithoutVariant;
+
 export const useTreeDetails = <T extends TreeDetailsVariants>({
   treeId,
   filter = {},
   enabled = true,
   variant,
-}: {
-  treeId: string;
-  filter?: TFilter;
-  enabled?: boolean;
-  variant: T;
-}): UseQueryResult<TreeDetailsResponse<T>> => {
+}: UseTreeDetailsParameters<T>): UseQueryResult<TreeDetailsResponse<T>> => {
   const testFilter = getTargetFilter(filter, 'test');
   const treeDetailsFilter = getTargetFilter(filter, 'treeDetails');
   const treeSearchParameters = useTreeSearchParameters();

dashboard/src/pages/TreeDetails/TreeDetails.tsx

@@ -33,7 +33,6 @@ import {
 
 import {
   sanitizeArchs,
-  sanitizeBuilds,
   sanitizeBuildsSummary,
   sanitizeConfigs,
 } from '@/utils/utils';
@@ -65,7 +64,6 @@ export interface ITreeDetails {
   architectures: ISummaryItem[];
   configs: IListingItem[];
   buildsSummary: BuildStatus;
-  builds: AccordionItemBuilds[];
   buildsIssues: TIssue[];
   failedBuildsWithUnknownIssues?: number;
 }
@@ -148,6 +146,7 @@ function TreeDetails(): JSX.Element {
   const { isLoading, data, status, isPlaceholderData, error } = useTreeDetails({
     treeId: treeId ?? '',
     filter: reqFilter,
+    variant: 'summary',
   });
 
   const onFilterChange = useCallback(
@@ -228,7 +227,6 @@ function TreeDetails(): JSX.Element {
     () => ({
       architectures: sanitizeArchs(data?.summary.builds.architectures),
       configs: sanitizeConfigs(data?.summary.builds.configs),
-      builds: sanitizeBuilds(data?.builds),
       buildsSummary: sanitizeBuildsSummary(data?.summary.builds.status),
       buildsIssues: data?.summary.builds.issues || [],
       failedBuildsWithUnknownIssues: data?.summary.builds.unknown_issues,

dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx

@@ -140,6 +140,7 @@ const TreeDetailsFilter = ({
 
   const { data, isLoading } = useTreeDetails({
     treeId,
+    // TODO : use  tree details summary
     variant: 'full',
   });
 

dashboard/src/pages/useTreeDetailsLazyLoadQuery.ts

@@ -0,0 +1,101 @@
+import { useSearch } from '@tanstack/react-router';
+
+import { useEffect, useState } from 'react';
+
+import type { UseTreeDetailsWithoutVariant } from '@/api/treeDetails';
+import { useTreeDetails } from '@/api/treeDetails';
+import type {
+  PossibleTabs,
+  TreeDetailsBoots,
+  TreeDetailsBuilds,
+  TreeDetailsSummary,
+  TreeDetailsTests,
+} from '@/types/tree/TreeDetails';
+
+const canWeFetchAll = (
+  summaryIsLoading: boolean,
+  currentPageTab: PossibleTabs,
+  statusTable: Record<PossibleTabs, boolean>,
+): boolean => {
+  if (summaryIsLoading) {
+    return false;
+  }
+
+  return statusTable[currentPageTab] ?? false;
+};
+
+export const useTreeDetailsLazyLoadQuery = (
+  useTreeDetailsArgs: UseTreeDetailsWithoutVariant,
+): {
+  summaryData?: TreeDetailsSummary;
+  summaryIsLoading: boolean;
+  buildsData?: TreeDetailsBuilds;
+  buildsIsLoading: boolean;
+  bootsData?: TreeDetailsBoots;
+  bootsIsLoading: boolean;
+  testsData?: TreeDetailsTests;
+  testIsLoading: boolean;
+} => {
+  const [fetchAll, setFetchAll] = useState(false);
+
+  const { data: summaryData, isLoading: summaryIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'summary',
+  });
+
+  const { currentPageTab } = useSearch({
+    from: '/tree/$treeId/',
+  });
+
+  const { data: buildsData, isLoading: buildsIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'builds',
+    enabled:
+      (!summaryIsLoading && currentPageTab === 'global.builds') || fetchAll,
+  });
+
+  const { data: bootsData, isLoading: bootsIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'boots',
+    enabled:
+      (!summaryIsLoading && currentPageTab === 'global.boots') || fetchAll,
+  });
+
+  const { data: testsData, isLoading: testsIsLoading } = useTreeDetails({
+    ...useTreeDetailsArgs,
+    variant: 'tests',
+    enabled:
+      (!summaryIsLoading && currentPageTab === 'global.tests') || fetchAll,
+  });
+
+  useEffect(() => {
+    if (
+      canWeFetchAll(summaryIsLoading, currentPageTab, {
+        'global.builds': buildsIsLoading,
+        'global.boots': bootsIsLoading,
+        'global.tests': testsIsLoading,
+      })
+    ) {
+      setFetchAll(true);
+    }
+  }, [
+    bootsIsLoading,
+    buildsIsLoading,
+    currentPageTab,
+    fetchAll,
+    setFetchAll,
+    summaryIsLoading,
+    testsIsLoading,
+  ]);
+
+  return {
+    summaryData,
+    summaryIsLoading,
+    buildsData,
+    buildsIsLoading,
+    bootsData,
+    bootsIsLoading,
+    testsData,
+    testIsLoading,
+  };
+};

dashboard/src/types/tree/TreeDetails.tsx

@@ -101,7 +101,7 @@ export type TTreeTestsFullData = {
 };
 
 export type TreeDetailsSummary = {
-  tests: Summary;
+  summary: Summary;
 };
 
 export type TreeDetailsBuilds = {
@@ -151,6 +151,8 @@ export const zPossibleTabValidator = z
   .default(defaultValidadorValues.tab)
   .catch(defaultValidadorValues.tab);
 
+export type PossibleTabs = z.infer<typeof zPossibleTabValidator>;
+
 export const zBuildsTableFilterValidator = z
   .enum(possibleBuildsTableFilter)
   .catch(defaultValidadorValues.buildsTableFilter);