From dbb1d2dfc6985009a5bedae240035d98128893cf Mon Sep 17 00:00:00 2001 From: Zack Cerza Date: Fri, 11 Aug 2023 15:43:02 -0600 Subject: [PATCH] WIP: Replace @mui/x-data-grid with material-react-table --- src/components/RunList/index.tsx | 139 +++++++++++++++++-------------- src/components/Table/index.tsx | 38 +++++++++ src/index.tsx | 20 ++++- src/lib/paddles.d.ts | 17 ++++ 4 files changed, 147 insertions(+), 67 deletions(-) create mode 100644 src/components/Table/index.tsx diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx index 8b63608..f42212e 100644 --- a/src/components/RunList/index.tsx +++ b/src/components/RunList/index.tsx @@ -13,102 +13,105 @@ import type { GridRenderCellParams, GridColDef, } from "@mui/x-data-grid"; +import { type MRT_ColumnDef } from 'material-react-table'; import { useRuns } from "../../lib/paddles"; import { formatDate, formatDuration } from "../../lib/utils"; import DataGrid from "../DataGrid"; +import Table from "../Table"; import IconLink from "../../components/IconLink"; +import type { Run } from "../../lib/paddles.d"; -function resultsGetter(params: GridValueGetterParams) { - return params.row.results[params.field]; -} - -const columns: GridColDef[] = [ +const columns: MRT_ColumnDef[] = [ { - field: "user", + accessorKey: "user", + header: "user", + size: 60, }, { - field: "name", - headerName: "link", - width: 60, - renderCell: (params: GridRenderCellParams) => { - return ( - - - - ); - }, + accessorKey: "name", + header: "link", + size: 30, + Cell: ({ row }) => { + return ( + + + + ); + }, }, { - field: "scheduled", - type: "date", - valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value), - width: 125, + id: "scheduled", + header: "scheduled", + accessorFn: (row: Run) => formatDate(row.scheduled), + size: 125, }, { - field: "started", - type: "date", - valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value), - width: 125, + id: "started", + header: "started", + accessorFn: (row: Run) => formatDate(row.started), + size: 125, }, { - headerName: "updated", - field: "posted", - type: "date", - valueFormatter: (row: GridValueFormatterParams) => formatDate(row.value), - width: 125, + id: "posted", + header: "posted", + accessorFn: (row: Run) => formatDate(row.posted), + size: 125, }, { - headerName: "runtime", - field: "", - valueGetter: (params: GridValueGetterParams) => { - const start = Date.parse(params.row.started); - const end = Date.parse(params.row.posted); + id: "runtime", + header: "runtime", + accessorFn: (row: Run) => { + const start = Date.parse(row.started); + const end = Date.parse(row.posted); if (!end || !start) return null; - return Math.round((start - end) / 1000); + return formatDuration(Math.round((start - end) / 1000)); }, - valueFormatter: (row: GridValueFormatterParams) => formatDuration(row.value), - width: 70, + size: 70, }, { - field: "suite", + accessorKey: "suite", + header: "suite", + size: 70, }, { - field: "branch", + accessorKey: "branch", + header: "branch", }, { - field: "machine_type", - width: 90, + accessorKey: "machine_type", + header: "machine_type", + size: 30, }, { - field: "sha1", - headerName: "hash", - width: 75, + accessorKey: "sha1", + header: "hash", + size: 30, }, { - field: "queued", - valueGetter: resultsGetter, - width: 60, + accessorKey: "results.queued", + header: "queued", + size: 40, }, { - field: "pass", - valueGetter: resultsGetter, - width: 60, + accessorKey: "results.pass", + header: "pass", + size: 40, }, { - field: "fail", - valueGetter: resultsGetter, - width: 60, + accessorKey: "results.fail", + header: "fail", + size: 40, }, { - field: "dead", - valueGetter: resultsGetter, - width: 60, + accessorKey: "results.dead", + header: "dead", + size: 40, }, { - field: "running", - valueGetter: resultsGetter, - width: 60, + accessorKey: "results.running", + header: "running", + size: 40, }, ]; @@ -130,8 +133,8 @@ export default function RunList({ params, setter }:RunListProps) { ...query.data.map((item) => item.branch.length) ); columns.forEach((item) => { - if (item.field === "branch") { - item.width = Math.max(100, branchLength * 7); + if (item.accessorKey === "branch") { + item.size = Math.max(100, branchLength * 7); } }); } @@ -141,7 +144,7 @@ export default function RunList({ params, setter }:RunListProps) { filterModel = { items: [ { - field: "user", + accessorKey: "user", value: params.user, operator: "contains", }, @@ -151,10 +154,18 @@ export default function RunList({ params, setter }:RunListProps) { const onFilterModelChange = (model: GridFilterModel) => { const params: QueryParamConfigMap = {}; model.items.forEach((item) => { - params[item.field] = item.value || null; + params[item.accessorKey] = item.value || null; }); setter(params); }; + return ( + + ) return ( { + const colors = { + "finished fail": "error", + "running": "warning", + "finished pass": "success", + }; + const backgroundColor = colors[row.original.status] || "info"; + return {sx: { + color: "black", + backgroundColor: backgroundColor + ".main", + "&:hover": { + backgroundColor: backgroundColor + ".light", + }, + "&:selected": { + backgroundColor: backgroundColor + ".dark", + }, + }}; + }} + muiTableBodyCellProps={{ + sx: { + color: "black", + fontSize: "0.75rem", + } + }} + data={props.rows} + {...props} + /> + ) +}; diff --git a/src/index.tsx b/src/index.tsx index 359b55b..cdb59b9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,17 +19,20 @@ import App from "./App"; import reportWebVitals from "./reportWebVitals"; import type { QueryKey } from "./lib/paddles.d"; +import { colorTint } from "./lib/utils"; const queryClient = new QueryClient({ defaultOptions: { queries: { + //networkMode: "offlineFirst", + retry: false, keepPreviousData: true, refetchOnWindowFocus: false, - staleTime: 0, - cacheTime: 0, + staleTime: Infinity, + cacheTime: 6 * 60 * 60 * 1000, queryFn: async (params) => { const queryKey = params.queryKey as QueryKey; - return axios.get(queryKey[1].url).then((resp) => resp.data); + return axios.get(queryKey[1].url, {timeout: 5000}).then((resp) => resp.data); }, }, }, @@ -69,6 +72,17 @@ export default function Root() { theme.palette.background.default = "#181818"; theme.palette.background.paper = "#303030"; } + console.log(theme.palette.info); + ["info", "success", "error", "warning"].forEach(color => { + theme.palette[color].main = colorTint(theme.palette[color].main, 10); + theme.palette[color].light = colorTint(theme.palette[color].light, 30); + theme.palette[color].dark = colorTint(theme.palette[color].dark, -30); + }); + console.log(theme.palette.info); + // theme.palette.info.main = colorTint(theme.palette.info.main, 5); + // theme.palette.success.main = colorTint(theme.palette.success.main, 5); + // theme.palette.error.main = colorTint(theme.palette.error.main, 5); + // theme.palette.warning.main = colorTint(theme.palette.warning.main, 5); return theme; }, [darkMode]); if (darkMode === undefined) { diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts index 449a293..cf28fb7 100644 --- a/src/lib/paddles.d.ts +++ b/src/lib/paddles.d.ts @@ -28,4 +28,21 @@ export type Run = { suite: string; jobs: Job[]; scheduled: string; + user: string; + started: string; + posted: string; + updated: string; + started: string; + runtime: string; + sha1: string; + results: RunResults; + machine_type: string; }; + +export type RunResults = { + queued: number; + pass: number; + fail: number; + dead: number; + running: number; +} \ No newline at end of file