Make barchart clickable

ui/src/components/QueueSizeChart.tsx

@@ -9,6 +9,8 @@ import {
   Legend,
   ResponsiveContainer,
 } from "recharts";
+import { useHistory } from "react-router-dom";
+import { queueDetailsPath } from "../paths";
 
 interface Props {
   data: TaskBreakdown[];
@@ -24,9 +26,25 @@ interface TaskBreakdown {
 }
 
 function QueueSizeChart(props: Props) {
+  const handleClick = (params: { activeLabel?: string } | null) => {
+    const allQueues = props.data.map((b) => b.queue);
+    if (
+      params &&
+      params.activeLabel &&
+      allQueues.includes(params.activeLabel)
+    ) {
+      history.push(queueDetailsPath(params.activeLabel));
+    }
+  };
+  const history = useHistory();
   return (
     <ResponsiveContainer>
-      <BarChart data={props.data} maxBarSize={120}>
+      <BarChart
+        data={props.data}
+        maxBarSize={120}
+        onClick={handleClick}
+        style={{ cursor: "pointer" }}
+      >
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis dataKey="queue" />
         <YAxis />

ui/src/components/QueuesOverviewTable.tsx

@@ -196,6 +196,7 @@ export default function QueuesOverviewTable(props: Props) {
           <TableBody>
             {sortQueues(props.queues, cmpFunc).map((q) => (
               <Row
+                key={q.queue}
                 queue={q}
                 onPauseClick={() => props.onPauseClick(q.queue)}
                 onResumeClick={() => props.onResumeClick(q.queue)}