Display queue latency

ui/src/api.ts

@@ -254,6 +254,8 @@ export interface Queue {
   queue: string;
   paused: boolean;
   size: number;
+  latency_msec: number;
+  display_latency: string;
   memory_usage_bytes: number;
   active: number;
   pending: number;

ui/src/components/QueueInfoBanner.tsx

@@ -74,6 +74,15 @@ function QueueInfoBanner(props: Props & ReduxProps) {
         </Typography>
       </div>
 
+      <div className={classes.bannerItem}>
+        <Typography variant="subtitle2" color="textPrimary" gutterBottom>
+          Latency
+        </Typography>
+        <Typography color="textSecondary">
+          {queue ? queue.display_latency : "-"}
+        </Typography>
+      </div>
+
       <div className={classes.bannerItem}>
         <Typography variant="subtitle2" color="textPrimary" gutterBottom>
           Processed

ui/src/components/QueuesOverviewTable.tsx

@@ -50,6 +50,7 @@ enum SortBy {
   State,
   Size,
   MemoryUsage,
+  Latency,
   Processed,
   Failed,
   ErrorRate,
@@ -72,6 +73,12 @@ const colConfigs: SortableTableColumn<SortBy>[] = [
     sortBy: SortBy.MemoryUsage,
     align: "right",
   },
+  {
+    label: "Latency",
+    key: "latency",
+    sortBy: SortBy.Latency,
+    align: "right",
+  },
   {
     label: "Processed",
     key: "processed",
@@ -137,6 +144,10 @@ export default function QueuesOverviewTable(props: Props) {
         if (q1.memory_usage_bytes === q2.memory_usage_bytes) return 0;
         isQ1Smaller = q1.memory_usage_bytes < q2.memory_usage_bytes;
         break;
+      case SortBy.Latency:
+        if (q1.latency_msec === q2.latency_msec) return 0;
+        isQ1Smaller = q1.latency_msec < q2.latency_msec;
+        break;
       case SortBy.Processed:
         if (q1.processed === q2.processed) return 0;
         isQ1Smaller = q1.processed < q2.processed;
@@ -283,6 +294,7 @@ function Row(props: RowProps) {
       </TableCell>
       <TableCell align="right">{q.size}</TableCell>
       <TableCell align="right">{prettyBytes(q.memory_usage_bytes)}</TableCell>
+      <TableCell align="right">{q.display_latency}</TableCell>
       <TableCell align="right">{q.processed}</TableCell>
       <TableCell align="right">{q.failed}</TableCell>
       <TableCell align="right">{percentage(q.failed, q.processed)}</TableCell>