Show deadline data in ActiveTasksTable

ui/src/api.ts

@@ -249,6 +249,7 @@ export interface ActiveTask extends BaseTask {
   id: string;
   queue: string;
   start_time: string;
+  deadline: string;
   max_retry: number;
   retried: number;
   error_message: string;

ui/src/components/ActiveTasksTable.tsx

@@ -37,7 +37,7 @@ import TablePaginationActions, {
 import TableActions from "./TableActions";
 import { usePolling } from "../hooks";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
-import { timeAgo, uuidPrefix } from "../utils";
+import { durationBefore, timeAgo, uuidPrefix } from "../utils";
 import { TableColumn } from "../types/table";
 
 const useStyles = makeStyles((theme) => ({
@@ -412,7 +412,9 @@ function Row(props: RowProps) {
                         className={classes.noBottomBorder}
                         align="right"
                       >
-                        TODO: In 30s
+                        {task.deadline === "-"
+                          ? "-"
+                          : durationBefore(task.deadline)}
                       </TableCell>
                     </TableRow>
                   </TableBody>