Skip to content

feat/tables default ordering #2019

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alanpeixinho wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat/tables default ordering #2019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98aa4f2
feat: show default platform sort on hardware listing
alanpeixinho Jul 22, 2026
6e39e3d
feat: default sort on builds, boots, and tests tables
alanpeixinho Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion dashboard/src/components/BootsTable/BootsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,9 @@ export function BootsTable({
updatePathFilter,
currentPathFilter,
}: IBootsTable): JSX.Element {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([
{ id: 'path', desc: false },
]);
const { pagination, paginationUpdater } = usePaginationState(tableKey);
const [globalFilter, setGlobalFilter] = useState<string | undefined>(
currentPathFilter,
Expand Down Expand Up @@ -183,6 +185,7 @@ export function BootsTable({
const table = useReactTable({
data: testsData,
columns,
enableSortingRemoval: false,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
Expand Down
5 changes: 4 additions & 1 deletion dashboard/src/components/BuildsTable/BuildsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ export function BuildsTable({
onClickFilter,
getRowLink,
}: IBuildsTable): JSX.Element {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([
{ id: 'config', desc: false },
]);
const { pagination, paginationUpdater } = usePaginationState(tableKey);

const intl = useIntl();
Expand Down Expand Up @@ -87,6 +89,7 @@ export function BuildsTable({
const table = useReactTable({
data: rawData,
columns,
enableSortingRemoval: false,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
Expand Down
16 changes: 2 additions & 14 deletions dashboard/src/components/Table/TableHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';

import { z } from 'zod';

import { useCallback, type JSX } from 'react';
import type { JSX } from 'react';

import type { MessagesKey } from '@/locales/messages';

Expand Down Expand Up @@ -39,24 +39,12 @@ export const TableHeader = <T,>({
intlKey,
tooltipId,
}: ITableHeader<T>): JSX.Element => {
const headerSort = useCallback(() => {
if (sortable) {
if (column.getIsSorted() === 'asc') {
column.toggleSorting(true);
} else if (column.getIsSorted() === 'desc') {
column.clearSorting();
} else {
column.toggleSorting(false);
}
}
}, [column, sortable]);

return (
<span className="flex">
<Button
variant="ghost"
className="justify-start px-2"
onClick={headerSort}
onClick={sortable ? column.getToggleSortingHandler() : undefined}
>
<FormattedMessage key={intlKey} id={intlKey} />

Expand Down
5 changes: 4 additions & 1 deletion dashboard/src/components/TestsTable/IndividualTestsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,14 @@ export function IndividualTestsTable({
columns,
getRowLink,
}: IIndividualTestsTable): JSX.Element {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([
{ id: 'path', desc: false },
]);

const table = useReactTable({
data,
columns,
enableSortingRemoval: false,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
Expand Down
5 changes: 4 additions & 1 deletion dashboard/src/components/TestsTable/TestsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@ export function TestsTable({
updatePathFilter,
currentPathFilter,
}: ITestsTable): JSX.Element {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([
{ id: 'path_group', desc: false },
]);
const [expanded, setExpanded] = useState<ExpandedState>({});
const pathFilter = currentPathFilter?.trim();

Expand Down Expand Up @@ -105,6 +107,7 @@ export function TestsTable({
const table = useReactTable({
data,
columns,
enableSortingRemoval: false,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
Expand Down
41 changes: 8 additions & 33 deletions dashboard/src/components/TreeListingPage/TreeListingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,39 +30,14 @@ const TreeListingPage = ({
return [];
}

return data
.filter(tree => {
return (
matchesRegexOrIncludes(tree.git_commit_hash, inputFilter) ||
matchesRegexOrIncludes(tree.git_repository_branch, inputFilter) ||
matchesRegexOrIncludes(tree.git_repository_url, inputFilter) ||
matchesRegexOrIncludes(tree.tree_name, inputFilter)
);
})
.sort((a, b) => {
const currentATreeName = a.tree_name ?? '';
const currentBTreeName = b.tree_name ?? '';
const treeNameComparison =
currentATreeName.localeCompare(currentBTreeName);

if (treeNameComparison !== 0) {
return treeNameComparison;
}

const currentABranch = a.git_repository_branch ?? '';
const currentBBranch = b.git_repository_branch ?? '';
const branchComparison = currentABranch.localeCompare(currentBBranch);
if (branchComparison !== 0) {
return branchComparison;
}

if (a.start_time === undefined || b.start_time === undefined) {
return 0;
}
return (
new Date(b.start_time).getTime() - new Date(a.start_time).getTime()
);
});
return data.filter(tree => {
return (
matchesRegexOrIncludes(tree.git_commit_hash, inputFilter) ||
matchesRegexOrIncludes(tree.git_repository_branch, inputFilter) ||
matchesRegexOrIncludes(tree.git_repository_url, inputFilter) ||
matchesRegexOrIncludes(tree.tree_name, inputFilter)
);
});
}, [data, inputFilter]);

const kcidevComponent = useMemo(
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/TreeListingPage/treeTableUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const commonTreeTableColumns: ColumnDef<TreeListingItem>[] = [
export const sortTreesWithPinnedFirst = <T extends TreeListingItem>(
treeTableRows: T[],
): T[] => {
return treeTableRows.sort((a, b) => {
return [...treeTableRows].sort((a, b) => {

@MarceloRobert MarceloRobert Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you have to spread it if it is already an array (as per treeTableRows: T[] on old line 89)?

@alanpeixinho alanpeixinho Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might have been overzealous here. It was mostly because javascript sort in done inplace, and I wanted to avoid side effects here.

@felipebergamin felipebergamin Jul 29, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can use .toSorted() if you don't want to change the original array

@alanpeixinho alanpeixinho Jul 30, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice hint. But unfortunately, for what I checked, toSorted is only available at ES2023. And we are using ES2020.
We could take a look on the impact of bumping ES version, so we can access a wider library.

const aKey = makeTreeIdentifierKey({
treeName: valueOrEmpty(a.tree_name),
gitRepositoryBranch: valueOrEmpty(a.git_repository_branch),
Expand Down
3 changes: 1 addition & 2 deletions dashboard/src/pages/Hardware/HardwareListingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,8 +188,7 @@ const HardwareListingPage = ({
test_status_summary: hardware.test_status_summary,
boot_status_summary: hardware.boot_status_summary,
};
})
.sort((a, b) => a.platform.localeCompare(b.platform));
});
}, [activeListing.data, activeListing.error, inputFilter]);

const selectedRevision =
Expand Down
11 changes: 5 additions & 6 deletions dashboard/src/pages/Hardware/HardwareTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,26 +397,25 @@ export function HardwareTable({
const { listingSize, intervalInDays } = useSearch({ strict: false });
const navigate = useNavigate({ from: navigateFrom });

const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([
{ id: 'platform', desc: false },
]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const { pagination, paginationUpdater } = usePaginationState(
'hardwareListing',
listingSize,
);

const data = useMemo(() => {
return treeTableRows;
}, [treeTableRows]);
Comment on lines -407 to -409

@MarceloRobert MarceloRobert Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... 😅


const columns = useMemo(
() =>
getColumns(startTimestampInSeconds, endTimestampInSeconds, navigateFrom),
[startTimestampInSeconds, endTimestampInSeconds, navigateFrom],
);

const table = useReactTable({
data,
data: treeTableRows,
columns,
enableSortingRemoval: false,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
Expand Down