Rename DeadTask to ArchivedTask, and action Kill to Archive

2025-08-24 14:48:42 +08:00 · 2021-01-12 11:59:44 -08:00
parent 95eb3e0855
commit 34b6553d7d
19 changed files with 1071 additions and 650 deletions
--- a/ui/src/components/ArchivedTasksTable.tsx
+++ b/ui/src/components/ArchivedTasksTable.tsx
@@ -0,0 +1,389 @@
+import React, { useCallback, useState } from "react";
+import clsx from "clsx";
+import { connect, ConnectedProps } from "react-redux";
+import { makeStyles } from "@material-ui/core/styles";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import Checkbox from "@material-ui/core/Checkbox";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Tooltip from "@material-ui/core/Tooltip";
+import Paper from "@material-ui/core/Paper";
+import Box from "@material-ui/core/Box";
+import Collapse from "@material-ui/core/Collapse";
+import IconButton from "@material-ui/core/IconButton";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import DeleteIcon from "@material-ui/icons/Delete";
+import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
+import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+import Typography from "@material-ui/core/Typography";
+import TableFooter from "@material-ui/core/TableFooter";
+import TablePagination from "@material-ui/core/TablePagination";
+import Alert from "@material-ui/lab/Alert";
+import AlertTitle from "@material-ui/lab/AlertTitle";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
+import { AppState } from "../store";
+import {
+  batchDeleteArchivedTasksAsync,
+  batchRunArchivedTasksAsync,
+  deleteArchivedTaskAsync,
+  deleteAllArchivedTasksAsync,
+  listArchivedTasksAsync,
+  runArchivedTaskAsync,
+  runAllArchivedTasksAsync,
+} from "../actions/tasksActions";
+import TablePaginationActions, {
+  defaultPageSize,
+  rowsPerPageOptions,
+} from "./TablePaginationActions";
+import TableActions from "./TableActions";
+import { timeAgo, uuidPrefix } from "../utils";
+import { usePolling } from "../hooks";
+import { ArchivedTaskExtended } from "../reducers/tasksReducer";
+import { TableColumn } from "../types/table";
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 650,
+  },
+});
+
+const useRowStyles = makeStyles({
+  root: {
+    "& > *": {
+      borderBottom: "unset",
+    },
+  },
+  actionCell: {
+    width: "96px",
+  },
+  activeActionCell: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+});
+
+function mapStateToProps(state: AppState) {
+  return {
+    loading: state.tasks.archivedTasks.loading,
+    tasks: state.tasks.archivedTasks.data,
+    batchActionPending: state.tasks.archivedTasks.batchActionPending,
+    allActionPending: state.tasks.archivedTasks.allActionPending,
+    pollInterval: state.settings.pollInterval,
+  };
+}
+
+const mapDispatchToProps = {
+  listArchivedTasksAsync,
+  runArchivedTaskAsync,
+  runAllArchivedTasksAsync,
+  deleteArchivedTaskAsync,
+  deleteAllArchivedTasksAsync,
+  batchRunArchivedTasksAsync,
+  batchDeleteArchivedTasksAsync,
+};
+
+const connector = connect(mapStateToProps, mapDispatchToProps);
+
+type ReduxProps = ConnectedProps<typeof connector>;
+
+interface Props {
+  queue: string; // name of the queue.
+  totalTaskCount: number; // totoal number of archived tasks.
+}
+
+function ArchivedTasksTable(props: Props & ReduxProps) {
+  const { pollInterval, listArchivedTasksAsync, queue } = props;
+  const classes = useStyles();
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [activeTaskId, setActiveTaskId] = useState<string>("");
+
+  const handleChangePage = (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelected = props.tasks.map((t) => t.key);
+      setSelectedKeys(newSelected);
+    } else {
+      setSelectedKeys([]);
+    }
+  };
+
+  const handleRunAllClick = () => {
+    props.runAllArchivedTasksAsync(queue);
+  };
+
+  const handleDeleteAllClick = () => {
+    props.deleteAllArchivedTasksAsync(queue);
+  };
+
+  const handleBatchRunClick = () => {
+    props
+      .batchRunArchivedTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
+  const handleBatchDeleteClick = () => {
+    props
+      .batchDeleteArchivedTasksAsync(queue, selectedKeys)
+      .then(() => setSelectedKeys([]));
+  };
+
+  const fetchData = useCallback(() => {
+    const pageOpts = { page: page + 1, size: pageSize };
+    listArchivedTasksAsync(queue, pageOpts);
+  }, [page, pageSize, queue, listArchivedTasksAsync]);
+
+  usePolling(fetchData, pollInterval);
+
+  if (props.tasks.length === 0) {
+    return (
+      <Alert severity="info">
+        <AlertTitle>Info</AlertTitle>
+        No archived tasks at this time.
+      </Alert>
+    );
+  }
+
+  const columns: TableColumn[] = [
+    { key: "icon", label: "", align: "left" },
+    { key: "id", label: "ID", align: "left" },
+    { key: "type", label: "Type", align: "left" },
+    { key: "last_failed", label: "Last Failed", align: "left" },
+    { key: "last_error", label: "Last Error", align: "left" },
+    { key: "actions", label: "Actions", align: "center" },
+  ];
+
+  const rowCount = props.tasks.length;
+  const numSelected = selectedKeys.length;
+  return (
+    <div>
+      <TableActions
+        showIconButtons={numSelected > 0}
+        iconButtonActions={[
+          {
+            tooltip: "Delete",
+            icon: <DeleteIcon />,
+            onClick: handleBatchDeleteClick,
+            disabled: props.batchActionPending,
+          },
+          {
+            tooltip: "Run",
+            icon: <PlayArrowIcon />,
+            onClick: handleBatchRunClick,
+            disabled: props.batchActionPending,
+          },
+        ]}
+        menuItemActions={[
+          {
+            label: "Delete All",
+            onClick: handleDeleteAllClick,
+            disabled: props.allActionPending,
+          },
+          {
+            label: "Run All",
+            onClick: handleRunAllClick,
+            disabled: props.allActionPending,
+          },
+        ]}
+      />
+      <TableContainer component={Paper}>
+        <Table
+          stickyHeader={true}
+          className={classes.table}
+          aria-label="archived tasks table"
+          size="small"
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell padding="checkbox">
+                <Checkbox
+                  indeterminate={numSelected > 0 && numSelected < rowCount}
+                  checked={rowCount > 0 && numSelected === rowCount}
+                  onChange={handleSelectAllClick}
+                  inputProps={{
+                    "aria-label": "select all tasks shown in the table",
+                  }}
+                />
+              </TableCell>
+              {columns.map((col) => (
+                <TableCell key={col.key} align={col.align}>
+                  {col.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {props.tasks.map((task) => (
+              <Row
+                key={task.key}
+                task={task}
+                isSelected={selectedKeys.includes(task.key)}
+                onSelectChange={(checked: boolean) => {
+                  if (checked) {
+                    setSelectedKeys(selectedKeys.concat(task.key));
+                  } else {
+                    setSelectedKeys(
+                      selectedKeys.filter((key) => key !== task.key)
+                    );
+                  }
+                }}
+                onRunClick={() => {
+                  props.runArchivedTaskAsync(queue, task.key);
+                }}
+                onDeleteClick={() => {
+                  props.deleteArchivedTaskAsync(queue, task.key);
+                }}
+                allActionPending={props.allActionPending}
+                onActionCellEnter={() => setActiveTaskId(task.id)}
+                onActionCellLeave={() => setActiveTaskId("")}
+                showActions={activeTaskId === task.id}
+              />
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                rowsPerPageOptions={rowsPerPageOptions}
+                colSpan={columns.length + 1 /* checkbox col */}
+                count={props.totalTaskCount}
+                rowsPerPage={pageSize}
+                page={page}
+                SelectProps={{
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                }}
+                onChangePage={handleChangePage}
+                onChangeRowsPerPage={handleChangeRowsPerPage}
+                ActionsComponent={TablePaginationActions}
+              />
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}
+
+interface RowProps {
+  task: ArchivedTaskExtended;
+  isSelected: boolean;
+  onSelectChange: (checked: boolean) => void;
+  onRunClick: () => void;
+  onDeleteClick: () => void;
+  allActionPending: boolean;
+  showActions: boolean;
+  onActionCellEnter: () => void;
+  onActionCellLeave: () => void;
+}
+
+function Row(props: RowProps) {
+  const { task } = props;
+  const [open, setOpen] = useState(false);
+  const classes = useRowStyles();
+  return (
+    <React.Fragment>
+      <TableRow
+        key={task.id}
+        className={classes.root}
+        selected={props.isSelected}
+      >
+        <TableCell padding="checkbox">
+          <Checkbox
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              props.onSelectChange(event.target.checked)
+            }
+            checked={props.isSelected}
+          />
+        </TableCell>
+        <TableCell>
+          <Tooltip title={open ? "Hide Details" : "Show Details"}>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </IconButton>
+          </Tooltip>
+        </TableCell>
+        <TableCell component="th" scope="row">
+          {uuidPrefix(task.id)}
+        </TableCell>
+        <TableCell>{task.type}</TableCell>
+        <TableCell>{timeAgo(task.last_failed_at)}</TableCell>
+        <TableCell>{task.error_message}</TableCell>
+        <TableCell
+          align="center"
+          className={clsx(
+            classes.actionCell,
+            props.showActions && classes.activeActionCell
+          )}
+          onMouseEnter={props.onActionCellEnter}
+          onMouseLeave={props.onActionCellLeave}
+        >
+          {props.showActions ? (
+            <React.Fragment>
+              <Tooltip title="Delete">
+                <IconButton
+                  onClick={props.onDeleteClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Run">
+                <IconButton
+                  onClick={props.onRunClick}
+                  disabled={task.requestPending || props.allActionPending}
+                  size="small"
+                >
+                  <PlayArrowIcon fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </React.Fragment>
+          ) : (
+            <IconButton size="small" onClick={props.onActionCellEnter}>
+              <MoreHorizIcon fontSize="small" />
+            </IconButton>
+          )}
+        </TableCell>
+      </TableRow>
+      <TableRow selected={props.isSelected}>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={7}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box margin={1}>
+              <Typography variant="h6" gutterBottom component="div">
+                Payload
+              </Typography>
+              <SyntaxHighlighter language="json" style={syntaxHighlightStyle}>
+                {JSON.stringify(task.payload, null, 2)}
+              </SyntaxHighlighter>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  );
+}
+
+export default connector(ArchivedTasksTable);
--- a/ui/src/components/DeadTasksTable.tsx
+++ b/ui/src/components/DeadTasksTable.tsx
@@ -28,13 +28,13 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/github";
 import { AppState } from "../store";
 import {
-  batchDeleteDeadTasksAsync,
-  batchRunDeadTasksAsync,
-  deleteDeadTaskAsync,
-  deleteAllDeadTasksAsync,
-  listDeadTasksAsync,
-  runDeadTaskAsync,
-  runAllDeadTasksAsync,
+  batchDeleteArchivedTasksAsync,
+  batchRunArchivedTasksAsync,
+  deleteArchivedTaskAsync,
+  deleteAllArchivedTasksAsync,
+  listArchivedTasksAsync,
+  runArchivedTaskAsync,
+  runAllArchivedTasksAsync,
 } from "../actions/tasksActions";
 import TablePaginationActions, {
  defaultPageSize,
@@ -43,7 +43,7 @@ import TablePaginationActions, {
 import TableActions from "./TableActions";
 import { timeAgo, uuidPrefix } from "../utils";
 import { usePolling } from "../hooks";
-import { DeadTaskExtended } from "../reducers/tasksReducer";
+import { ArchivedTaskExtended } from "../reducers/tasksReducer";
 import { TableColumn } from "../types/table";

 const useStyles = makeStyles({
@@ -69,22 +69,22 @@ const useRowStyles = makeStyles({

 function mapStateToProps(state: AppState) {
  return {
-    loading: state.tasks.deadTasks.loading,
-    tasks: state.tasks.deadTasks.data,
-    batchActionPending: state.tasks.deadTasks.batchActionPending,
-    allActionPending: state.tasks.deadTasks.allActionPending,
+    loading: state.tasks.archivedTasks.loading,
+    tasks: state.tasks.archivedTasks.data,
+    batchActionPending: state.tasks.archivedTasks.batchActionPending,
+    allActionPending: state.tasks.archivedTasks.allActionPending,
    pollInterval: state.settings.pollInterval,
  };
 }

 const mapDispatchToProps = {
-  listDeadTasksAsync,
-  runDeadTaskAsync,
-  runAllDeadTasksAsync,
-  deleteDeadTaskAsync,
-  deleteAllDeadTasksAsync,
-  batchRunDeadTasksAsync,
-  batchDeleteDeadTasksAsync,
+  listArchivedTasksAsync,
+  runArchivedTaskAsync,
+  runAllArchivedTasksAsync,
+  deleteArchivedTaskAsync,
+  deleteAllArchivedTasksAsync,
+  batchRunArchivedTasksAsync,
+  batchDeleteArchivedTasksAsync,
 };

 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -93,11 +93,11 @@ type ReduxProps = ConnectedProps<typeof connector>;

 interface Props {
  queue: string; // name of the queue.
-  totalTaskCount: number; // totoal number of dead tasks.
+  totalTaskCount: number; // totoal number of archived tasks.
 }

-function DeadTasksTable(props: Props & ReduxProps) {
-  const { pollInterval, listDeadTasksAsync, queue } = props;
+function ArchivedTasksTable(props: Props & ReduxProps) {
+  const { pollInterval, listArchivedTasksAsync, queue } = props;
  const classes = useStyles();
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(defaultPageSize);
@@ -128,29 +128,29 @@ function DeadTasksTable(props: Props & ReduxProps) {
  };

  const handleRunAllClick = () => {
-    props.runAllDeadTasksAsync(queue);
+    props.runAllArchivedTasksAsync(queue);
  };

  const handleDeleteAllClick = () => {
-    props.deleteAllDeadTasksAsync(queue);
+    props.deleteAllArchivedTasksAsync(queue);
  };

  const handleBatchRunClick = () => {
    props
-      .batchRunDeadTasksAsync(queue, selectedKeys)
+      .batchRunArchivedTasksAsync(queue, selectedKeys)
      .then(() => setSelectedKeys([]));
  };

  const handleBatchDeleteClick = () => {
    props
-      .batchDeleteDeadTasksAsync(queue, selectedKeys)
+      .batchDeleteArchivedTasksAsync(queue, selectedKeys)
      .then(() => setSelectedKeys([]));
  };

  const fetchData = useCallback(() => {
    const pageOpts = { page: page + 1, size: pageSize };
-    listDeadTasksAsync(queue, pageOpts);
-  }, [page, pageSize, queue, listDeadTasksAsync]);
+    listArchivedTasksAsync(queue, pageOpts);
+  }, [page, pageSize, queue, listArchivedTasksAsync]);

  usePolling(fetchData, pollInterval);

@@ -158,7 +158,7 @@ function DeadTasksTable(props: Props & ReduxProps) {
    return (
      <Alert severity="info">
        <AlertTitle>Info</AlertTitle>
-        No dead tasks at this time.
+        No archived tasks at this time.
      </Alert>
    );
  }
@@ -209,7 +209,7 @@ function DeadTasksTable(props: Props & ReduxProps) {
        <Table
          stickyHeader={true}
          className={classes.table}
-          aria-label="dead tasks table"
+          aria-label="archived tasks table"
          size="small"
        >
          <TableHead>
@@ -247,10 +247,10 @@ function DeadTasksTable(props: Props & ReduxProps) {
                  }
                }}
                onRunClick={() => {
-                  props.runDeadTaskAsync(queue, task.key);
+                  props.runArchivedTaskAsync(queue, task.key);
                }}
                onDeleteClick={() => {
-                  props.deleteDeadTaskAsync(queue, task.key);
+                  props.deleteArchivedTaskAsync(queue, task.key);
                }}
                allActionPending={props.allActionPending}
                onActionCellEnter={() => setActiveTaskId(task.id)}
@@ -284,7 +284,7 @@ function DeadTasksTable(props: Props & ReduxProps) {
 }

 interface RowProps {
-  task: DeadTaskExtended;
+  task: ArchivedTaskExtended;
  isSelected: boolean;
  onSelectChange: (checked: boolean) => void;
  onRunClick: () => void;
@@ -386,4 +386,4 @@ function Row(props: RowProps) {
  );
 }

-export default connector(DeadTasksTable);
+export default connector(ArchivedTasksTable);
--- a/ui/src/components/QueueSizeChart.tsx
+++ b/ui/src/components/QueueSizeChart.tsx
@@ -20,7 +20,7 @@ interface TaskBreakdown {
  pending: number; // number of pending tasks in the queue.
  scheduled: number; // number of scheduled tasks in the queue.
  retry: number; // number of retry tasks in the queue.
-  dead: number; // number of dead tasks in the queue.
+  archived: number; // number of archived tasks in the queue.
 }

 function QueueSizeChart(props: Props) {
@@ -36,7 +36,7 @@ function QueueSizeChart(props: Props) {
        <Bar dataKey="pending" stackId="a" fill="#669df6" />
        <Bar dataKey="scheduled" stackId="a" fill="#fdd663" />
        <Bar dataKey="retry" stackId="a" fill="#f666a9" />
-        <Bar dataKey="dead" stackId="a" fill="#ac4776" />
+        <Bar dataKey="archived" stackId="a" fill="#ac4776" />
      </BarChart>
    </ResponsiveContainer>
  );
--- a/ui/src/components/QueuesOverviewTable.tsx
+++ b/ui/src/components/QueuesOverviewTable.tsx
@@ -67,7 +67,7 @@ enum SortBy {
  Pending,
  Scheduled,
  Retry,
-  Dead,
+  Archived,

  None, // no sort support
 }
@@ -84,7 +84,12 @@ const colConfigs: SortableTableColumn<SortBy>[] = [
    align: "right",
  },
  { label: "Retry", key: "retry", sortBy: SortBy.Retry, align: "right" },
-  { label: "Dead", key: "dead", sortBy: SortBy.Dead, align: "right" },
+  {
+    label: "Archived",
+    key: "archived",
+    sortBy: SortBy.Archived,
+    align: "right",
+  },
  { label: "Actions", key: "actions", sortBy: SortBy.None, align: "center" },
 ];

@@ -148,9 +153,9 @@ export default function QueuesOverviewTable(props: Props) {
        if (q1.retry === q2.retry) return 0;
        isQ1Smaller = q1.retry < q2.retry;
        break;
-      case SortBy.Dead:
-        if (q1.dead === q2.dead) return 0;
-        isQ1Smaller = q1.dead < q2.dead;
+      case SortBy.Archived:
+        if (q1.archived === q2.archived) return 0;
+        isQ1Smaller = q1.archived < q2.archived;
        break;
      default:
        // eslint-disable-next-line no-throw-literal
@@ -248,10 +253,10 @@ export default function QueuesOverviewTable(props: Props) {
                </TableCell>
                <TableCell align="right">
                  <Link
-                    to={queueDetailsPath(q.queue, "dead")}
+                    to={queueDetailsPath(q.queue, "archived")}
                    className={classes.linkCell}
                  >
-                    {q.dead}
+                    {q.archived}
                  </Link>
                </TableCell>
                <TableCell align="center">
@@ -318,7 +323,7 @@ export default function QueuesOverviewTable(props: Props) {
                {total.retry}
              </TableCell>
              <TableCell className={classes.footerCell} align="right">
-                {total.dead}
+                {total.archived}
              </TableCell>
            </TableRow>
          </TableFooter>
@@ -338,7 +343,7 @@ interface AggregateCounts {
  pending: number;
  scheduled: number;
  retry: number;
-  dead: number;
+  archived: number;
 }

 function getAggregateCounts(queues: Queue[]): AggregateCounts {
@@ -348,7 +353,7 @@ function getAggregateCounts(queues: Queue[]): AggregateCounts {
    pending: 0,
    scheduled: 0,
    retry: 0,
-    dead: 0,
+    archived: 0,
  };
  queues.forEach((q) => {
    total.size += q.size;
@@ -356,7 +361,7 @@ function getAggregateCounts(queues: Queue[]): AggregateCounts {
    total.pending += q.pending;
    total.scheduled += q.scheduled;
    total.retry += q.retry;
-    total.dead += q.dead;
+    total.archived += q.archived;
  });
  return total;
 }
--- a/ui/src/components/RetryTasksTable.tsx
+++ b/ui/src/components/RetryTasksTable.tsx
@@ -29,14 +29,14 @@ import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/
 import {
  batchDeleteRetryTasksAsync,
  batchRunRetryTasksAsync,
-  batchKillRetryTasksAsync,
+  batchArchiveRetryTasksAsync,
  deleteAllRetryTasksAsync,
  runAllRetryTasksAsync,
-  killAllRetryTasksAsync,
+  archiveAllRetryTasksAsync,
  listRetryTasksAsync,
  deleteRetryTaskAsync,
  runRetryTaskAsync,
-  killRetryTaskAsync,
+  archiveRetryTaskAsync,
 } from "../actions/tasksActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
@@ -69,14 +69,14 @@ function mapStateToProps(state: AppState) {
 const mapDispatchToProps = {
  batchDeleteRetryTasksAsync,
  batchRunRetryTasksAsync,
-  batchKillRetryTasksAsync,
+  batchArchiveRetryTasksAsync,
  deleteAllRetryTasksAsync,
  runAllRetryTasksAsync,
-  killAllRetryTasksAsync,
+  archiveAllRetryTasksAsync,
  listRetryTasksAsync,
  deleteRetryTaskAsync,
  runRetryTaskAsync,
-  killRetryTaskAsync,
+  archiveRetryTaskAsync,
 };

 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -127,8 +127,8 @@ function RetryTasksTable(props: Props & ReduxProps) {
    props.deleteAllRetryTasksAsync(queue);
  };

-  const handleKillAllClick = () => {
-    props.killAllRetryTasksAsync(queue);
+  const handleArchiveAllClick = () => {
+    props.archiveAllRetryTasksAsync(queue);
  };

  const handleBatchRunClick = () => {
@@ -143,9 +143,9 @@ function RetryTasksTable(props: Props & ReduxProps) {
      .then(() => setSelectedKeys([]));
  };

-  const handleBatchKillClick = () => {
+  const handleBatchArchiveClick = () => {
    props
-      .batchKillRetryTasksAsync(queue, selectedKeys)
+      .batchArchiveRetryTasksAsync(queue, selectedKeys)
      .then(() => setSelectedKeys([]));
  };

@@ -190,9 +190,9 @@ function RetryTasksTable(props: Props & ReduxProps) {
            disabled: props.batchActionPending,
          },
          {
-            tooltip: "Kill",
+            tooltip: "Archive",
            icon: <ArchiveIcon />,
-            onClick: handleBatchKillClick,
+            onClick: handleBatchArchiveClick,
            disabled: props.batchActionPending,
          },
          {
@@ -209,8 +209,8 @@ function RetryTasksTable(props: Props & ReduxProps) {
            disabled: props.allActionPending,
          },
          {
-            label: "Kill All",
-            onClick: handleKillAllClick,
+            label: "Archive All",
+            onClick: handleArchiveAllClick,
            disabled: props.allActionPending,
          },
          {
@@ -268,8 +268,8 @@ function RetryTasksTable(props: Props & ReduxProps) {
                onDeleteClick={() => {
                  props.deleteRetryTaskAsync(task.queue, task.key);
                }}
-                onKillClick={() => {
-                  props.killRetryTaskAsync(task.queue, task.key);
+                onArchiveClick={() => {
+                  props.archiveRetryTaskAsync(task.queue, task.key);
                }}
                onActionCellEnter={() => setActiveTaskId(task.id)}
                onActionCellLeave={() => setActiveTaskId("")}
@@ -322,7 +322,7 @@ interface RowProps {
  onSelectChange: (checked: boolean) => void;
  onDeleteClick: () => void;
  onRunClick: () => void;
-  onKillClick: () => void;
+  onArchiveClick: () => void;
  allActionPending: boolean;
  showActions: boolean;
  onActionCellEnter: () => void;
@@ -387,9 +387,9 @@ function Row(props: RowProps) {
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Tooltip>
-              <Tooltip title="Kill">
+              <Tooltip title="Archive">
                <IconButton
-                  onClick={props.onKillClick}
+                  onClick={props.onArchiveClick}
                  disabled={task.requestPending || props.allActionPending}
                  size="small"
                >
--- a/ui/src/components/ScheduledTasksTable.tsx
+++ b/ui/src/components/ScheduledTasksTable.tsx
@@ -30,14 +30,14 @@ import syntaxHighlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/
 import {
  batchDeleteScheduledTasksAsync,
  batchRunScheduledTasksAsync,
-  batchKillScheduledTasksAsync,
+  batchArchiveScheduledTasksAsync,
  deleteAllScheduledTasksAsync,
  runAllScheduledTasksAsync,
-  killAllScheduledTasksAsync,
+  archiveAllScheduledTasksAsync,
  listScheduledTasksAsync,
  deleteScheduledTaskAsync,
  runScheduledTaskAsync,
-  killScheduledTaskAsync,
+  archiveScheduledTaskAsync,
 } from "../actions/tasksActions";
 import { AppState } from "../store";
 import TablePaginationActions, {
@@ -70,13 +70,13 @@ const mapDispatchToProps = {
  listScheduledTasksAsync,
  batchDeleteScheduledTasksAsync,
  batchRunScheduledTasksAsync,
-  batchKillScheduledTasksAsync,
+  batchArchiveScheduledTasksAsync,
  deleteAllScheduledTasksAsync,
  runAllScheduledTasksAsync,
-  killAllScheduledTasksAsync,
+  archiveAllScheduledTasksAsync,
  deleteScheduledTaskAsync,
  runScheduledTaskAsync,
-  killScheduledTaskAsync,
+  archiveScheduledTaskAsync,
 };

 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -127,8 +127,8 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
    props.deleteAllScheduledTasksAsync(queue);
  };

-  const handleKillAllClick = () => {
-    props.killAllScheduledTasksAsync(queue);
+  const handleArchiveAllClick = () => {
+    props.archiveAllScheduledTasksAsync(queue);
  };

  const handleBatchRunClick = () => {
@@ -143,9 +143,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
      .then(() => setSelectedKeys([]));
  };

-  const handleBatchKillClick = () => {
+  const handleBatchArchiveClick = () => {
    props
-      .batchKillScheduledTasksAsync(queue, selectedKeys)
+      .batchArchiveScheduledTasksAsync(queue, selectedKeys)
      .then(() => setSelectedKeys([]));
  };

@@ -187,9 +187,9 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
            disabled: props.batchActionPending,
          },
          {
-            tooltip: "Kill",
+            tooltip: "Archive",
            icon: <ArchiveIcon />,
-            onClick: handleBatchKillClick,
+            onClick: handleBatchArchiveClick,
            disabled: props.batchActionPending,
          },
          {
@@ -206,8 +206,8 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
            disabled: props.allActionPending,
          },
          {
-            label: "Kill All",
-            onClick: handleKillAllClick,
+            label: "Archive All",
+            onClick: handleArchiveAllClick,
            disabled: props.allActionPending,
          },
          {
@@ -265,8 +265,8 @@ function ScheduledTasksTable(props: Props & ReduxProps) {
                onDeleteClick={() => {
                  props.deleteScheduledTaskAsync(queue, task.key);
                }}
-                onKillClick={() => {
-                  props.killScheduledTaskAsync(queue, task.key);
+                onArchiveClick={() => {
+                  props.archiveScheduledTaskAsync(queue, task.key);
                }}
                onActionCellEnter={() => setActiveTaskId(task.id)}
                onActionCellLeave={() => setActiveTaskId("")}
@@ -319,7 +319,7 @@ interface RowProps {
  onSelectChange: (checked: boolean) => void;
  onRunClick: () => void;
  onDeleteClick: () => void;
-  onKillClick: () => void;
+  onArchiveClick: () => void;
  allActionPending: boolean;
  showActions: boolean;
  onActionCellEnter: () => void;
@@ -381,9 +381,9 @@ function Row(props: RowProps) {
                  <DeleteIcon fontSize="small" />
                </IconButton>
              </Tooltip>
-              <Tooltip title="Kill">
+              <Tooltip title="Archive">
                <IconButton
-                  onClick={props.onKillClick}
+                  onClick={props.onArchiveClick}
                  disabled={task.requestPending || props.allActionPending}
                  size="small"
                >
--- a/ui/src/components/TasksTable.tsx
+++ b/ui/src/components/TasksTable.tsx
@@ -8,7 +8,7 @@ import ActiveTasksTable from "./ActiveTasksTable";
 import PendingTasksTable from "./PendingTasksTable";
 import ScheduledTasksTable from "./ScheduledTasksTable";
 import RetryTasksTable from "./RetryTasksTable";
-import DeadTasksTable from "./DeadTasksTable";
+import ArchivedTasksTable from "./ArchivedTasksTable";
 import { useHistory } from "react-router-dom";
 import { queueDetailsPath } from "../paths";
 import { Typography } from "@material-ui/core";
@@ -166,7 +166,7 @@ function mapStatetoProps(state: AppState, ownProps: Props) {
        pending: 0,
        scheduled: 0,
        retry: 0,
-        dead: 0,
+        archived: 0,
        processed: 0,
        failed: 0,
        timestamp: "n/a",
@@ -246,15 +246,15 @@ function TasksTable(props: Props & ReduxProps) {
            {...a11yProps("retry")}
          />
          <Tab
-            value="dead"
-            label="Dead"
-            icon={<TaskCount>{currentStats.dead}</TaskCount>}
+            value="archived"
+            label="Archived"
+            icon={<TaskCount>{currentStats.archived}</TaskCount>}
            classes={{
              root: classes.tabroot,
              wrapper: classes.tabwrapper,
              selected: classes.tabSelected,
            }}
-            {...a11yProps("dead")}
+            {...a11yProps("archived")}
          />
        </Tabs>
      </TabsContainer>
@@ -311,7 +311,7 @@ function TasksTable(props: Props & ReduxProps) {
          />
        </PanelContainer>
      </TabPanel>
-      <TabPanel value="dead" selected={props.selected}>
+      <TabPanel value="archived" selected={props.selected}>
        <PanelContainer>
          <PanelHeading
            queue={props.queue}
@@ -319,9 +319,9 @@ function TasksTable(props: Props & ReduxProps) {
            failed={currentStats.failed}
            paused={currentStats.paused}
          />
-          <DeadTasksTable
+          <ArchivedTasksTable
            queue={props.queue}
-            totalTaskCount={currentStats.dead}
+            totalTaskCount={currentStats.archived}
          />
        </PanelContainer>
      </TabPanel>