(ui): Fix QueueSizeMetricsChart

ui/src/components/QueueSizeMetricsChart.tsx

@@ -13,6 +13,10 @@ import { Metrics } from "../api";
 
 interface Props {
   data: Metrics[];
+
+  // both startTime and endTime are in unix time (seconds)
+  startTime: number;
+  endTime: number;
 }
 
 // interface that rechart understands.
@@ -58,9 +62,12 @@ function QueueSizeMetricsChart(props: Props) {
         <XAxis
           minTickGap={10}
           dataKey="timestamp"
+          domain={[props.startTime, props.endTime]}
           tickFormatter={(timestamp: number) =>
             new Date(timestamp * 1000).toLocaleTimeString()
           }
+          type="number"
+          scale="time"
         />
         <YAxis />
         <Tooltip

ui/src/views/MetricsView.tsx

@@ -140,6 +140,8 @@ function MetricsView(props: Props) {
     }
   }, [pollInterval, getMetricsAsync, durationSec, endTimeSec, endTimeOption]);
 
+  const now = currentUnixtime();
+
   return (
     <Container maxWidth="lg" className={classes.container}>
       <Grid container spacing={3}>
@@ -322,7 +324,15 @@ function MetricsView(props: Props) {
         </Grid>
         <Grid item xs={12}>
           <Typography>Queue Size</Typography>
-          <QueueSizeMetricsChart data={data?.data.result || []} />
+          <QueueSizeMetricsChart
+            data={data?.data.result || []}
+            endTime={endTimeOption === "real_time" ? now : endTimeSec}
+            startTime={
+              endTimeOption === "real_time"
+                ? now - durationSec
+                : endTimeSec - durationSec
+            }
+          />
         </Grid>
       </Grid>
       <Grid item xs={12}>