Use uuid prefix in task table

ui/src/components/ActiveTasksTable.tsx

@@ -32,6 +32,7 @@ import TablePaginationActions, {
 } from "./TablePaginationActions";
 import { usePolling } from "../hooks";
 import { ActiveTaskExtended } from "../reducers/tasksReducer";
+import { uuidPrefix } from "../utils";
 
 const useStyles = makeStyles({
   table: {
@@ -177,7 +178,7 @@ function Row(props: { task: ActiveTaskExtended; onCancelClick: () => void }) {
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">
-          {task.id}
+          {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
         <TableCell align="center">

ui/src/components/DeadTasksTable.tsx

@@ -37,7 +37,7 @@ import TablePaginationActions, {
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
-import { timeAgo } from "../timeutil";
+import { timeAgo, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { DeadTaskExtended } from "../reducers/tasksReducer";
 
@@ -283,7 +283,7 @@ function Row(props: RowProps) {
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">
-          {task.id}
+          {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
         <TableCell>{timeAgo(task.last_failed_at)}</TableCell>

ui/src/components/PendingTasksTable.tsx

@@ -29,6 +29,7 @@ import { listPendingTasksAsync } from "../actions/tasksActions";
 import { AppState } from "../store";
 import { PendingTask } from "../api";
 import { usePolling } from "../hooks";
+import { uuidPrefix } from "../utils";
 
 const useStyles = makeStyles({
   table: {
@@ -166,7 +167,7 @@ function Row(props: { task: PendingTask }) {
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">
-          {task.id}
+          {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
         <TableCell>

ui/src/components/RetryTasksTable.tsx

@@ -40,7 +40,7 @@ import TablePaginationActions, {
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
-import { durationBefore } from "../timeutil";
+import { durationBefore, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { RetryTaskExtended } from "../reducers/tasksReducer";
 
@@ -307,7 +307,7 @@ function Row(props: RowProps) {
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">
-          {task.id}
+          {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
         <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/ScheduledTasksTable.tsx

@@ -40,7 +40,7 @@ import TablePaginationActions, {
   rowsPerPageOptions,
 } from "./TablePaginationActions";
 import TableActions from "./TableActions";
-import { durationBefore } from "../timeutil";
+import { durationBefore, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
 import { ScheduledTaskExtended } from "../reducers/tasksReducer";
 
@@ -304,7 +304,7 @@ function Row(props: RowProps) {
           </IconButton>
         </TableCell>
         <TableCell component="th" scope="row">
-          {task.id}
+          {uuidPrefix(task.id)}
         </TableCell>
         <TableCell>{task.type}</TableCell>
         <TableCell>{durationBefore(task.next_process_at)}</TableCell>

ui/src/components/SchedulerEntriesTable.tsx

@@ -14,7 +14,7 @@ import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/
 import { SortDirection, ColumnConfig } from "../types/table";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import { SchedulerEntry } from "../api";
-import { timeAgo, durationBefore } from "../timeutil";
+import { timeAgo, durationBefore } from "../utils";
 
 const useStyles = makeStyles((theme) => ({
   table: {

ui/src/reducers/snackbarReducer.ts

@@ -56,43 +56,37 @@ function snackbarReducer(
     case RUN_SCHEDULED_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Scheduled task ${action.taskKey} is now pending`,
+        message: `Scheduled task is now pending`,
       };
 
     case RUN_RETRY_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Retry task ${action.taskKey} is now pending`,
+        message: `Retry task is now pending`,
       };
 
     case RUN_DEAD_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Dead task ${action.taskKey} is now pending`,
+        message: `Dead task is now pending`,
       };
 
     case KILL_SCHEDULED_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Scheduled task ${action.taskKey} is now dead`,
+        message: `Scheduled task is now dead`,
       };
 
     case KILL_RETRY_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Retry task ${action.taskKey} is now dead`,
+        message: `Retry task is now dead`,
       };
 
     case DELETE_SCHEDULED_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Scheduled task ${action.taskKey} deleted`,
+        message: `Scheduled task deleted`,
       };
 
     case BATCH_RUN_SCHEDULED_TASKS_SUCCESS: {
@@ -142,8 +136,7 @@ function snackbarReducer(
     case DELETE_RETRY_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Retry task ${action.taskKey} deleted`,
+        message: `Retry task deleted`,
       };
 
     case BATCH_RUN_RETRY_TASKS_SUCCESS: {
@@ -191,8 +184,7 @@ function snackbarReducer(
     case DELETE_DEAD_TASK_SUCCESS:
       return {
         isOpen: true,
-        // TODO: show only task id
-        message: `Dead task ${action.taskKey} deleted`,
+        message: `Dead task deleted`,
       };
 
     case BATCH_RUN_DEAD_TASKS_SUCCESS: {

ui/src/utils.ts

@@ -51,3 +51,11 @@ export function getCurrentUTCDate(): string {
   const yyyy = today.getFullYear();
   return `${yyyy}-${mm}-${dd}`;
 }
+
+export function uuidPrefix(uuid: string): string {
+  const idx = uuid.indexOf("-");
+  if (idx === -1) {
+    return uuid;
+  }
+  return uuid.substr(0, idx);
+}

ui/src/views/DashboardView.tsx

@@ -17,7 +17,7 @@ import QueueSizeChart from "../components/QueueSizeChart";
 import ProcessedTasksChart from "../components/ProcessedTasksChart";
 import QueuesOverviewTable from "../components/QueuesOverviewTable";
 import Tooltip from "../components/Tooltip";
-import { getCurrentUTCDate } from "../timeutil";
+import { getCurrentUTCDate } from "../utils";
 import { usePolling } from "../hooks";
 
 const useStyles = makeStyles((theme) => ({