(ui): Update UI to use the user selected duration

ui/src/actions/metricsActions.ts

@@ -27,11 +27,11 @@ export type MetricsActionTypes =
   | GetMetricsSuccessAction
   | GetMetricsErrorAction;
 
-export function getMetricsAsync() {
+export function getMetricsAsync(endTime: number, duration: number) {
   return async (dispatch: Dispatch<MetricsActionTypes>) => {
     dispatch({ type: GET_METRICS_BEGIN });
     try {
-      const response = await getMetrics();
+      const response = await getMetrics(endTime, duration);
       dispatch({ type: GET_METRICS_SUCCESS, payload: response });
     } catch (error) {
       console.error(`getMetricsAsync: ${toErrorStringWithHttpStatus(error)}`);

ui/src/api.ts

@@ -876,10 +876,13 @@ export async function getRedisInfo(): Promise<RedisInfoResponse> {
   return resp.data;
 }
 
-export async function getMetrics(): Promise<MetricsResponse> {
+export async function getMetrics(
+  endTime: number,
+  duration: number
+): Promise<MetricsResponse> {
   const resp = await axios({
     method: "get",
-    url: `${BASE_URL}/metrics`,
+    url: `${BASE_URL}/metrics?end_time=${endTime}&duration=${duration}`,
   });
   return resp.data;
 }

ui/src/components/QueueSizeMetricsChart.tsx

@@ -74,6 +74,7 @@ function QueueSizeMetricsChart(props: Props) {
             type="monotone"
             dataKey={key}
             stroke={lineColors[idx % lineColors.length]}
+            dot={false}
           />
         ))}
       </LineChart>

ui/src/utils.ts

@@ -74,8 +74,8 @@ export function timeAgo(timestamp: string): string {
 }
 
 export function timeAgoUnix(unixtime: number): string {
-  if (unixtime === 0)  {
-    return ""
+  if (unixtime === 0) {
+    return "";
   }
   const duration = durationBetween(Date.now(), unixtime * 1000);
   return stringifyDuration(duration) + " ago";
@@ -103,14 +103,12 @@ export function percentage(numerator: number, denominator: number): string {
   return `${perc} %`;
 }
 
-
 export function isJsonPayload(p: string) {
   try {
     JSON.parse(p);
   } catch (error) {
     return false;
   }
-
   return true;
 }
 
@@ -118,6 +116,10 @@ export function prettifyPayload(p: string) {
   if (isJsonPayload(p)) {
     return JSON.stringify(JSON.parse(p), null, 2);
   }
-
   return p;
 }
+
+// Returns the number of seconds elapsed since January 1, 1970 00:00:00 UTC.
+export function currentUnixtime(): number {
+  return Math.floor(Date.now() / 1000);
+}

ui/src/views/MetricsView.tsx

@@ -13,8 +13,8 @@ import FormControl from "@material-ui/core/FormControl";
 import FormLabel from "@material-ui/core/FormLabel";
 import { getMetricsAsync } from "../actions/metricsActions";
 import { AppState } from "../store";
-import { usePolling } from "../hooks";
 import QueueSizeMetricsChart from "../components/QueueSizeMetricsChart";
+import { currentUnixtime } from "../utils";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -114,12 +114,15 @@ function MetricsView(props: Props) {
   const open = Boolean(anchorEl);
   const id = open ? "control-popover" : undefined;
 
-  //usePolling(getMetricsAsync, pollInterval);
   React.useEffect(() => {
-    const fetchMetrics = () => getMetricsAsync();
-    const id = setInterval(fetchMetrics, pollInterval * 1000);
+    console.log("DEBUG: GETTING metrics", currentUnixtime(), durationSec);
+    getMetricsAsync(currentUnixtime(), durationSec);
+    const id = setInterval(() => {
+      console.log("DEBUG: GETTING metrics", currentUnixtime(), durationSec);
+      getMetricsAsync(currentUnixtime(), durationSec);
+    }, pollInterval * 1000);
     return () => clearInterval(id);
-  }, [pollInterval, getMetricsAsync]);
+  }, [pollInterval, getMetricsAsync, durationSec]);
 
   return (
     <Container maxWidth="lg" className={classes.container}>