Merge pull request #80 from ceph/add-table-cell-border

Add table cell border (and other table UI improvements)

Author: zmc

src/components/JobList/index.tsx

@@ -39,15 +39,15 @@ const columns: MRT_ColumnDef<Job>[] = [
         <div>
           {log_url? (
             <IconLink to={dirName(log_url)}>
-              <DescriptionIcon fontSize="small" />
+              <DescriptionIcon fontSize="small" style={{marginLeft: '5px'}} />
             </IconLink>
           ) : null}
           {sentry_url ? (
             <IconLink to={sentry_url}>
               <img
                 src={`${sentryIcon}`}
                 alt="Sentry icon"
-                style={{height: '20px', width: '20px'}}
+                style={{height: '20px', width: '20px', marginLeft: '5px'}}
               />
             </IconLink>
           ) : null}

src/components/RunList/index.tsx

@@ -32,6 +32,20 @@ const NON_FILTER_PARAMS = [
 ];
 
 const columns: MRT_ColumnDef<Run>[] = [
+  {
+    accessorKey: "name",
+    header: "link",
+    maxSize: 12,
+    enableColumnFilter: false,
+    enableColumnActions: false,
+    Cell: ({ row }) => {
+      return (
+        <IconLink to={`/runs/${row.original.name}`}>
+          <OpenInNewIcon fontSize="small" style={{marginLeft: "5px"}} />
+        </IconLink>
+      );
+    },
+  },
   {
     header: "status",
     accessorKey: "status",
@@ -40,33 +54,27 @@ const columns: MRT_ColumnDef<Run>[] = [
       return row.original.status.replace("finished ", "");
     },
     filterSelectOptions: Object.values(RunStatuses),
+    size: 40,
+    enableColumnActions: false,
   },
   {
     accessorKey: "user",
     header: "user",
-    size: 60,
-    enableColumnFilter: false,
-  },
-  {
-    accessorKey: "name",
-    header: "link",
-    size: 30,
+    maxSize: 45,
     enableColumnFilter: false,
-    Cell: ({ row }) => {
-      return (
-        <IconLink to={`/runs/${row.original.name}`}>
-          <OpenInNewIcon fontSize="small" />
-        </IconLink>
-      );
-    },
+    enableColumnActions: false,
   },
   {
     id: "scheduled",
     header: "scheduled",
     accessorFn: (row: Run) => formatDate(row.scheduled),
     filterVariant: 'date',
     sortingFn: "datetime",
-    size: 125,
+    Cell: ({ row }) => {
+      const date_: string[] = row.original.scheduled.split(" ");
+      return <div> {date_[0]} <br /> {date_[1]} </div>
+    },
+    size: 50,
   },
   {
     id: "started",
@@ -95,7 +103,7 @@ const columns: MRT_ColumnDef<Run>[] = [
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    size: 70,
+    size: 30,
   },
   {
     accessorKey: "suite",
@@ -115,8 +123,10 @@ const columns: MRT_ColumnDef<Run>[] = [
   {
     accessorKey: "sha1",
     header: "hash",
-    size: 30,
-    maxSize: 50,
+    maxSize: 30,
+    Cell: ({ row }) => {
+      return row.original.sha1.slice(0, 8);
+    },
   },
   {
     accessorKey: "results.queued",
@@ -133,25 +143,25 @@ const columns: MRT_ColumnDef<Run>[] = [
   {
     accessorKey: "results.fail",
     header: "fail",
-    size: 40,
+    size: 30,
     enableColumnFilter: false,
   },
   {
     accessorKey: "results.dead",
     header: "dead",
-    size: 40,
+    size: 30,
     enableColumnFilter: false,
   },
   {
     accessorKey: "results.running",
     header: "running",
-    size: 40,
+    size: 30,
     enableColumnFilter: false,
   },
   {
     accessorKey: "results.waiting",
     header: "waiting",
-    size: 40,
+    size: 30,
     enableColumnFilter: false,
   },
 ];

src/lib/table.ts

@@ -38,6 +38,7 @@ export default function useDefaultTableOptions<TData extends MRT_RowData>(): Par
           paddingRight: 0,
           paddingTop: '5px',
           color: "black",
+          borderLeft: "0.3px solid " + theme.palette.background.default,
         },
         'tr td:has(svg)': {
           padding: 0,