diff --git a/dashboard/src/components/Checkbox/Checkbox.tsx b/dashboard/src/components/Checkbox/Checkbox.tsx index 99e7db5c..c13619cb 100644 --- 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,12 +12,18 @@ 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 ( ); }; diff --git a/dashboard/src/pages/TreeDetails/TreeDetails.tsx b/dashboard/src/pages/TreeDetails/TreeDetails.tsx index 529306f6..37bd0bfc 100644 --- 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 {
- {data && isAllReady && !isAnyLoading && ( + {data ? ( - )} - {!isAllReady && isAnyLoading && ( + ) : ( )}
diff --git a/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx b/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx index cbcb6e67..fa5ce8a9 100644 --- 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; 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 ? ( - - - - ) : ( - <> - - - - )} + <> + + + ); };