From 89f20b83f29ce224fdb26c41b8f9b9bb8cdf5cae Mon Sep 17 00:00:00 2001
From: Vallari Agrawal <val.agl002@gmail.com>
Date: Thu, 8 Aug 2024 20:30:32 +0530
Subject: [PATCH 1/2] Add border to table cells

It makes it easier to read tables like RunList and JobList.

Signed-off-by: Vallari Agrawal <val.agl002@gmail.com>
---
 src/lib/table.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/table.ts b/src/lib/table.ts
index 1feb95d..4db9d87 100644
--- a/src/lib/table.ts
+++ b/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,

From a4c1cf181c05f2ff92b8d3c8bafc70728ed1620a Mon Sep 17 00:00:00 2001
From: Vallari Agrawal <val.agl002@gmail.com>
Date: Thu, 8 Aug 2024 20:31:30 +0530
Subject: [PATCH 2/2] Improve column sizes in RunList

Also move "link" column to left most.

Signed-off-by: Vallari Agrawal <val.agl002@gmail.com>
---
 src/components/JobList/index.tsx |  4 +--
 src/components/RunList/index.tsx | 54 +++++++++++++++++++-------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/JobList/index.tsx b/src/components/JobList/index.tsx
index 8fba7d1..54fba02 100644
--- a/src/components/JobList/index.tsx
+++ b/src/components/JobList/index.tsx
@@ -39,7 +39,7 @@ 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 ? (
@@ -47,7 +47,7 @@ const columns: MRT_ColumnDef<Job>[] = [
               <img
                 src={`${sentryIcon}`}
                 alt="Sentry icon"
-                style={{height: '20px', width: '20px'}}
+                style={{height: '20px', width: '20px', marginLeft: '5px'}}
               />
             </IconLink>
           ) : null}
diff --git a/src/components/RunList/index.tsx b/src/components/RunList/index.tsx
index 1d09428..0ff6115 100644
--- a/src/components/RunList/index.tsx
+++ b/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,25 +54,15 @@ 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",
@@ -66,7 +70,11 @@ const columns: MRT_ColumnDef<Run>[] = [
     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,
   },
 ];