From c8cbc49122d366f1a8c474460b605cc734294dd3 Mon Sep 17 00:00:00 2001
From: Ken Hibino <ken.hibino7@gmail.com>
Date: Wed, 1 Dec 2021 19:06:51 -0800
Subject: [PATCH] (ui): Fix QueueSizeMetricsChart

---
 ui/src/components/QueueSizeMetricsChart.tsx |  7 +++++++
 ui/src/views/MetricsView.tsx                | 12 +++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/QueueSizeMetricsChart.tsx b/ui/src/components/QueueSizeMetricsChart.tsx
index 4b503b5..ceacedc 100644
--- a/ui/src/components/QueueSizeMetricsChart.tsx
+++ b/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
diff --git a/ui/src/views/MetricsView.tsx b/ui/src/views/MetricsView.tsx
index 2219ed7..5977752 100644
--- a/ui/src/views/MetricsView.tsx
+++ b/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}>