fix(tree-details-filters): remove extra query

Closes #792
kernelci · Jan 22, 2025 · b6e88ca · b6e88ca
1 parent 22eeefc
commit b6e88ca
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 48 deletions.
diff --git a/dashboard/src/components/Checkbox/Checkbox.tsx b/dashboard/src/components/Checkbox/Checkbox.tsx
@@ -1,5 +1,7 @@
 import cls from 'classnames';
 
+import { isUrl, truncateBigText, truncateUrl } from '@/lib/string';
+
 interface ICheckbox {
   onToggle: () => void;
   isChecked?: boolean;
@@ -10,20 +12,26 @@ interface ICheckbox {
 const containerClass =
   'min-w-[300px] p-4 border-[2px] border-darkGray rounded cursor-pointer text-dimGray';
 
+const maxCheckboxLength = 30;
+
 const Checkbox = ({
   text,
   onToggle,
   className,
   isChecked = false,
 }: ICheckbox): JSX.Element => {
+  let truncatedText = text;
+  if (isUrl(text)) truncatedText = truncateUrl(text);
+  else truncatedText = truncateBigText(text, maxCheckboxLength);
+
   return (
     <label
       className={cls(containerClass, className, {
         'border-blue': isChecked,
       })}
     >
       <input type="checkbox" checked={isChecked} onChange={onToggle} />
-      <span className="ml-4">{text}</span>
+      <span className="ml-4">{truncatedText}</span>
     </label>
   );
 };

diff --git a/dashboard/src/pages/TreeDetails/TreeDetails.tsx b/dashboard/src/pages/TreeDetails/TreeDetails.tsx
@@ -132,7 +132,6 @@ function TreeDetails(): JSX.Element {
     filter: reqFilter,
   });
 
-  const { isAllReady, isAnyLoading } = treeDetailsLazyLoaded.common;
   const {
     data,
     isLoading,
@@ -275,13 +274,13 @@ function TreeDetails(): JSX.Element {
         <div className="flex flex-col pb-2">
           <div className="sticky top-[4.5rem] z-10">
             <div className="absolute right-0 top-2 py-4">
-              {data && isAllReady && !isAnyLoading && (
+              {data ? (
                 <TreeDetailsFilter
                   paramFilter={diffFilter}
                   treeUrl={data.common.tree_url}
+                  data={data}
                 />
-              )}
-              {!isAllReady && isAnyLoading && (
+              ) : (
                 <LoadingCircle className="mr-8 mt-6" />
               )}
             </div>

diff --git a/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx b/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx
@@ -1,16 +1,13 @@
 import { useCallback, useMemo, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 
-import { useNavigate, useParams } from '@tanstack/react-router';
+import { useNavigate } from '@tanstack/react-router';
 
 import { status as testStatuses } from '@/utils/constants/database';
 import type { IDrawerLink } from '@/components/Filter/Drawer';
 import FilterDrawer from '@/components/Filter/Drawer';
-import type { TTreeTestsFullData } from '@/types/tree/TreeDetails';
+import type { TreeDetailsSummary } from '@/types/tree/TreeDetails';
 import type { ISectionItem } from '@/components/Filter/CheckboxSection';
 
-import { Skeleton } from '@/components/Skeleton';
-
 import {
   MemoizedCheckboxSection,
   MemoizedTimeRangeSection,
@@ -19,16 +16,15 @@ import {
 import { isTFilterObjectKeys, type TFilter } from '@/types/general';
 import { cleanFalseFilters } from '@/components/Tabs/tabsUtils';
 
-import { useTreeDetails } from '@/api/treeDetails';
-
 type TFilterValues = Record<string, boolean>;
 
 interface ITreeDetailsFilter {
   paramFilter: TFilter;
   treeUrl: string;
+  data: TreeDetailsSummary;
 }
 
-export const createFilter = (data: TTreeTestsFullData | undefined): TFilter => {
+export const createFilter = (data: TreeDetailsSummary | undefined): TFilter => {
   const buildStatus = { Success: false, Failed: false, Inconclusive: false };
 
   const bootStatus: TFilterValues = {};
@@ -49,17 +45,17 @@ export const createFilter = (data: TTreeTestsFullData | undefined): TFilter => {
   const hardware: TFilterValues = {};
 
   if (data) {
-    data.builds.forEach(b => {
-      configs[b.config_name ?? 'Unknown'] = false;
-      archs[b.architecture ?? 'Unknown'] = false;
-      compilers[b.compiler ?? 'Unknown'] = false;
-    });
+    data.filters.all.configs.forEach(config => (configs[config] = false));
+    data.filters.all.architectures.forEach(arch => (archs[arch] = false));
+    data.filters.all.compilers.forEach(
+      compiler => (compilers[compiler] = false),
+    );
 
     data.common.hardware.forEach(h => (hardware[h] = false));
 
-    data.summary.builds.issues.forEach(i => (buildIssue[i.id] = false));
-    data.summary.boots.issues.forEach(i => (bootIssue[i.id] = false));
-    data.summary.tests.issues.forEach(i => (testIssue[i.id] = false));
+    data.filters.builds.issues.forEach(i => (buildIssue[i] = false));
+    data.filters.boots.issues.forEach(i => (bootIssue[i] = false));
+    data.filters.tests.issues.forEach(i => (testIssue[i] = false));
   }
 
   return {
@@ -135,15 +131,8 @@ const sectionTrees: ISectionItem[] = [
 const TreeDetailsFilter = ({
   paramFilter,
   treeUrl,
+  data,
 }: ITreeDetailsFilter): JSX.Element => {
-  const { treeId } = useParams({ from: '/tree/$treeId' });
-
-  const { data, isLoading } = useTreeDetails({
-    treeId,
-    // TODO : use  tree details summary
-    variant: 'full',
-  });
-
   const navigate = useNavigate({
     from: '/tree/$treeId',
   });
@@ -193,25 +182,19 @@ const TreeDetailsFilter = ({
       onOpenChange={handleOpenChange}
       onCancel={onClickCancel}
     >
-      {isLoading ? (
-        <Skeleton>
-          <FormattedMessage id="global.loading" />
-        </Skeleton>
-      ) : (
-        <>
-          <MemoizedCheckboxSection
-            sections={sectionTrees}
-            setDiffFilter={setDiffFilter}
-            diffFilter={diffFilter}
-            filter={filter}
-            isTFilterObjectKeys={isTFilterObjectKeys}
-          />
-          <MemoizedTimeRangeSection
-            setDiffFilter={setDiffFilter}
-            diffFilter={diffFilter}
-          />
-        </>
-      )}
+      <>
+        <MemoizedCheckboxSection
+          sections={sectionTrees}
+          setDiffFilter={setDiffFilter}
+          diffFilter={diffFilter}
+          filter={filter}
+          isTFilterObjectKeys={isTFilterObjectKeys}
+        />
+        <MemoizedTimeRangeSection
+          setDiffFilter={setDiffFilter}
+          diffFilter={diffFilter}
+        />
+      </>
     </FilterDrawer>
   );
 };