diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx index 65e1c1d..2b1db6e 100644 --- a/src/components/RunList/index.tsx +++ b/src/components/RunList/index.tsx @@ -1,4 +1,7 @@ +import { useState } from "react"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; +import Grid from '@mui/material/Grid'; +import Button from '@mui/material/Button'; import type { DecodedValueMap, QueryParamConfigMap, @@ -8,6 +11,7 @@ import { useDebounce } from "usehooks-ts"; import { useMaterialReactTable, MaterialReactTable, + MRT_TableHeadCellFilterContainer, type MRT_ColumnDef, type MRT_PaginationState, type MRT_Updater, @@ -30,6 +34,14 @@ const NON_FILTER_PARAMS = [ "page", "pageSize", ]; +const FILTER_COLUMNS = [ + "status", + "scheduled", + "suite", + "branch", + "machine_type", + "sha1", +] const columns: MRT_ColumnDef[] = [ { @@ -37,7 +49,6 @@ const columns: MRT_ColumnDef[] = [ header: "link", maxSize: 12, enableColumnFilter: false, - enableColumnActions: false, Cell: ({ row }) => { return ( @@ -54,15 +65,13 @@ const columns: MRT_ColumnDef[] = [ return row.original.status.replace("finished ", ""); }, filterSelectOptions: Object.values(RunStatuses), - size: 40, - enableColumnActions: false, + maxSize: 25, }, { accessorKey: "user", header: "user", maxSize: 45, enableColumnFilter: false, - enableColumnActions: false, }, { id: "scheduled", @@ -74,7 +83,7 @@ const columns: MRT_ColumnDef[] = [ const date_: string[] = row.original.scheduled.split(" "); return
{date_[0]}
{date_[1]}
}, - size: 50, + size: 35, }, { id: "started", @@ -82,7 +91,7 @@ const columns: MRT_ColumnDef[] = [ accessorFn: (row: Run) => formatDate(row.started), enableColumnFilter: false, sortingFn: "datetime", - size: 125, + size: 35, }, { id: "posted", @@ -90,7 +99,7 @@ const columns: MRT_ColumnDef[] = [ accessorFn: (row: Run) => formatDate(row.posted), enableColumnFilter: false, sortingFn: "datetime", - size: 125, + maxSize: 35, }, { id: "runtime", @@ -108,12 +117,12 @@ const columns: MRT_ColumnDef[] = [ { accessorKey: "suite", header: "suite", - size: 70, + size: 50, }, { accessorKey: "branch", header: "branch", - maxSize: 75, + maxSize: 70, }, { accessorKey: "machine_type", @@ -187,6 +196,11 @@ type RunListProps = { } export default function RunList(props: RunListProps) { + const [openFilterMenu, setOpenFilterMenu] = useState(false); + + const toggleFilterMenu = (isOpen: boolean) => () => { + setOpenFilterMenu(isOpen); + }; const { params, setter, tableOptions } = props; const options = useDefaultTableOptions(); const debouncedParams = useDebounce(params, 500); @@ -239,12 +253,17 @@ export default function RunList(props: RunListProps) { data: data, manualPagination: true, manualFiltering: true, + enableColumnActions: false, onPaginationChange, rowCount: Infinity, muiPaginationProps: { showLastButton: false, }, onColumnFiltersChange, + columnFilterDisplayMode: 'custom', + muiFilterTextFieldProps: ({ column }) => ({ + label: `Filter by ${column.columnDef.header}`, + }), initialState: { ...options.initialState, columnVisibility: { @@ -271,5 +290,32 @@ export default function RunList(props: RunListProps) { ...tableOptions, }); if (query.isError) return null; - return + return ( +
+ { openFilterMenu? ( + + {table.getLeafHeaders().map((header) => { + console.log(header.id) + if (FILTER_COLUMNS.includes(header.id)) { + return ( + + + + ) + } + })} + ) + : ""} + + +
+ ) } diff --git a/src/lib/table.ts b/src/lib/table.ts index 4db9d87..7cbc21f 100644 --- a/src/lib/table.ts +++ b/src/lib/table.ts @@ -24,6 +24,19 @@ export default function useDefaultTableOptions(): Par mrtTheme: { baseBackgroundColor: theme.palette.background.default, }, + muiTableHeadCellProps: { + sx: { + '& .Mui-TableHeadCell-Content': { + fontSize: "0.8em", + }, + '& .MuiTableSortLabel-root': { + display: "none", + }, + '&:hover .MuiTableSortLabel-root': { + display: "block", + }, + }, + }, muiTableBodyCellProps: { sx: { color: "black",