WIP: Replace @mui/x-data-grid with material-react-table

src/components/RunList/index.tsx

@@ -13,107 +13,110 @@ 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<Run>[] = [
   {
-    field: "user",
+    accessorKey: "user",
+    header: "user",
+    size: 60,
   },
   {
-    field: "name",
-    headerName: "link",
-    width: 60,
-    renderCell: (params: GridRenderCellParams) => {
-      return (
-        <IconLink to={`/runs/${params.value}`}>
-          <OpenInNewIcon />
-        </IconLink>
-      );
-    },
+   accessorKey: "name",
+   header: "link",
+   size: 30,
+   Cell: ({ row }) => {
+     return (
+       <IconLink to={`/runs/${row.original.name}`}>
+         <OpenInNewIcon />
+       </IconLink>
+     );
+   },
   },
   {
-    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.updated);
+    id: "runtime",
+    header: "runtime",
+    accessorFn: (row: Run) => {
+      const start = Date.parse(row.started);
+      const end = Date.parse(row.updated);
       if (!end || !start) return null;
-      return Math.round((end - start) / 1000);
+      return formatDuration(Math.round((end - start) / 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,
   },
   {
-    field: "waiting",
-    valueGetter: resultsGetter,
-    width: 60,
+    accessorKey: "results.waiting",
+    header: "waiting",
+    width: 40,
   },
 ];
 
@@ -135,8 +138,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);
       }
     });
   }
@@ -146,7 +149,7 @@ export default function RunList({ params, setter }:RunListProps) {
     filterModel = {
       items: [
         {
-          field: "user",
+          accessorKey: "user",
           value: params.user,
           operator: "contains",
         },
@@ -156,10 +159,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 (
+    <Table
+      columns={columns}
+      rows={query.data || []}
+      pageSize={params.pageSize}
+      pageIndex={params.page}
+    />
+  )
   return (
     <DataGrid
       columns={columns}
@@ -169,7 +180,7 @@ export default function RunList({ params, setter }:RunListProps) {
         sorting: {
           sortModel: [
             {
-              field: "scheduled",
+              accessorKey: "scheduled",
               sort: "desc",
             },
           ],

src/components/Table/index.tsx

@@ -0,0 +1,38 @@
+import { MaterialReactTable } from 'material-react-table';
+
+
+export default function Table (props) {
+  return (
+    <MaterialReactTable
+      initialState={{
+        density: "compact",
+      }}
+      muiTableBodyRowProps={({row}) => {
+        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}
+    />
+  )
+};

src/index.tsx

@@ -22,6 +22,7 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 import type { QueryKey } from "./lib/paddles.d";
+import { colorTint } from "./lib/utils";
 
 Sentry.init({
   dsn: import.meta.env.VITE_SENTRY_DSN,
@@ -32,13 +33,15 @@ Sentry.init({
 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);
       },
     },
   },
@@ -78,6 +81,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) {

src/lib/paddles.d.ts

@@ -27,7 +27,13 @@ export type Job = {
 };
 
 export type RunResults = {
-  [key: string]: number | string;
+  // FIXME which is better
+  // [key: string]: number | string;
+  queued: number;
+  pass: number;
+  fail: number;
+  dead: number;
+  running: number;
 }
 
 export type Run = {
@@ -36,7 +42,15 @@ 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 Node = {