From 343937e12c5e1a50b2ea8952b739750e1c5271ad Mon Sep 17 00:00:00 2001
From: Salih Altun <salih@skyvern.com>
Date: Fri, 31 May 2024 21:36:44 +0300
Subject: [PATCH] Add task id to task tables (#399)

---
 .../src/routes/tasks/list/TaskHistory.tsx     | 23 +++++++++++++------
 .../src/routes/tasks/running/QueuedTasks.tsx  | 14 ++++++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx b/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
index 094f8758..4c692517 100644
--- a/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
+++ b/skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx
@@ -66,9 +66,10 @@ function TaskHistory() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="w-1/3">URL</TableHead>
-              <TableHead className="w-1/4">Status</TableHead>
-              <TableHead className="w-1/3">Created At</TableHead>
+              <TableHead className="w-1/4">ID</TableHead>
+              <TableHead className="w-1/4">URL</TableHead>
+              <TableHead className="w-1/6">Status</TableHead>
+              <TableHead className="w-1/4">Created At</TableHead>
               <TableHead className="w-1/12" />
             </TableRow>
           </TableHeader>
@@ -82,9 +83,17 @@ function TaskHistory() {
             ) : (
               tasks?.map((task) => {
                 return (
-                  <TableRow key={task.task_id} className="w-4">
+                  <TableRow key={task.task_id}>
                     <TableCell
-                      className="w-1/3 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
+                      className="w-1/4 cursor-pointer"
+                      onClick={() => {
+                        navigate(task.task_id);
+                      }}
+                    >
+                      {task.task_id}
+                    </TableCell>
+                    <TableCell
+                      className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
                       onClick={() => {
                         navigate(task.task_id);
                       }}
@@ -92,7 +101,7 @@ function TaskHistory() {
                       {task.request.url}
                     </TableCell>
                     <TableCell
-                      className="w-1/4 cursor-pointer"
+                      className="w-1/6 cursor-pointer"
                       onClick={() => {
                         navigate(task.task_id);
                       }}
@@ -100,7 +109,7 @@ function TaskHistory() {
                       <StatusBadge status={task.status} />
                     </TableCell>
                     <TableCell
-                      className="w-1/3 cursor-pointer"
+                      className="w-1/4 cursor-pointer"
                       onClick={() => {
                         navigate(task.task_id);
                       }}
diff --git a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
index 6efe9a57..fe1f633f 100644
--- a/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
+++ b/skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx
@@ -37,9 +37,10 @@ function QueuedTasks() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-1/3">URL</TableHead>
-            <TableHead className="w-1/3">Status</TableHead>
-            <TableHead className="w-1/3">Created At</TableHead>
+            <TableHead className="w-1/4">ID</TableHead>
+            <TableHead className="w-1/4">URL</TableHead>
+            <TableHead className="w-1/4">Status</TableHead>
+            <TableHead className="w-1/4">Created At</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -57,13 +58,14 @@ function QueuedTasks() {
                     navigate(task.task_id);
                   }}
                 >
-                  <TableCell className="w-1/3 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">
+                  <TableCell className="w-1/4">{task.task_id}</TableCell>
+                  <TableCell className="w-1/4 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">
                     {task.request.url}
                   </TableCell>
-                  <TableCell className="w-1/3">
+                  <TableCell className="w-1/4">
                     <StatusBadge status={task.status} />
                   </TableCell>
-                  <TableCell className="w-1/3">
+                  <TableCell className="w-1/4">
                     {basicTimeFormat(task.created_at)}
                   </TableCell>
                 </TableRow>