[ez][HUD] Format time function, loading page height, onEvents for TimeSeriesPanel (#6271)

* Add a function for formatting time, generally used in tooltips in
charts and use it whenever possible
* Add an option for setting the height of a `LoadingPage` component
* Add an option for onEvents for TimeSeriesPanel so you can listen to
clicks etc on the chart

Author: clee2000

torchci/components/LoadingPage.tsx

@@ -12,10 +12,11 @@ const LoadingItem = styled("div")(({}) => ({
   margin: "10px",
 }));
 
-function LoadingPage() {
+function LoadingPage({ height }: { height?: number }) {
+  const style = height !== undefined ? { height: height } : {};
   return (
     <>
-      <LoadingContainer>
+      <LoadingContainer style={style}>
         <div>
           <em> Loading...</em>
         </div>

torchci/components/TimeUtils.tsx

@@ -67,3 +67,12 @@ export function durationDisplay(seconds: number): string {
   const days = hours / 24.0;
   return days.toFixed(1) + "d";
 }
+
+export const TIME_DISPLAY_FORMAT = "M/D h:mm:ss A";
+
+export function formatTimeForCharts(
+  time: string,
+  format = TIME_DISPLAY_FORMAT
+) {
+  return dayjs.utc(time).local().format(format);
+}

torchci/components/metrics/panels/TimeSeriesPanel.tsx

@@ -3,6 +3,7 @@
  */
 
 import { Paper, Skeleton } from "@mui/material";
+import { formatTimeForCharts, TIME_DISPLAY_FORMAT } from "components/TimeUtils";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { EChartsOption } from "echarts";
@@ -155,7 +156,7 @@ export function TimeSeriesPanelWithData({
   // as its own line.
   groupByFieldName,
   // Display format for the time field (ex "M/D h:mm:ss A")
-  timeFieldDisplayFormat = "M/D h:mm:ss A",
+  timeFieldDisplayFormat = TIME_DISPLAY_FORMAT,
   // Callback to render the y axis value in some nice way.
   yAxisRenderer,
   // What label to put on the y axis.
@@ -164,6 +165,7 @@ export function TimeSeriesPanelWithData({
   additionalOptions,
   // To avoid overlapping long legends and the chart
   legendPadding = 200,
+  onEvents,
 }: {
   data: any;
   series: any;
@@ -174,6 +176,7 @@ export function TimeSeriesPanelWithData({
   yAxisLabel?: string;
   additionalOptions?: EChartsOption;
   legendPadding?: number;
+  onEvents?: { [key: string]: any };
 }) {
   // Add extra padding when the legend is active
   const legend_padding = groupByFieldName !== undefined ? legendPadding : 48;
@@ -226,10 +229,10 @@ export function TimeSeriesPanelWithData({
         trigger: "item",
         formatter: (params: any) =>
           `${params.seriesName}` +
-          `<br/>${dayjs
-            .utc(params.value[0])
-            .local()
-            .format(timeFieldDisplayFormat)}<br/>` +
+          `<br/>${formatTimeForCharts(
+            params.value[0],
+            timeFieldDisplayFormat
+          )}<br/>` +
           `${getTooltipMarker(params.color)}` +
           `<b>${yAxisRenderer(params.value[1])}</b>` +
           // add total value to tooltip,
@@ -250,6 +253,7 @@ export function TimeSeriesPanelWithData({
         style={{ height: "100%", width: "100%" }}
         option={options}
         notMerge={true}
+        onEvents={onEvents}
       />
     </Paper>
   );
@@ -270,7 +274,7 @@ export default function TimeSeriesPanel({
   // What field name to treat as the time value.
   timeFieldName,
   // Display format for the time field (ex "M/D h:mm:ss A")
-  timeFieldDisplayFormat = "M/D h:mm:ss A",
+  timeFieldDisplayFormat = TIME_DISPLAY_FORMAT,
   // What field name to put on the y axis.
   yAxisFieldName,
   // Callback to render the y axis value in some nice way.

torchci/pages/query_execution_metrics.tsx

@@ -12,6 +12,7 @@ import {
   Granularity,
   TimeSeriesPanelWithData,
 } from "components/metrics/panels/TimeSeriesPanel";
+import { formatTimeForCharts } from "components/TimeUtils";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useEffect, useState } from "react";
@@ -129,10 +130,7 @@ export default function Page() {
                       : `${field.headerName}: ${data[field.field]}`
                   )
                   .join("<br>");
-                return `${dayjs
-                  .utc(data.time)
-                  .local()
-                  .format("M/D h:mm:ss A")}<br>${fieldInfo}`;
+                return `${formatTimeForCharts(data.time)}<br>${fieldInfo}`;
               },
             },
             yAxis: [

torchci/pages/reliability/[repoOwner]/[repoName]/[[...page]].tsx

@@ -8,6 +8,7 @@ import {
   Granularity,
   seriesWithInterpolatedTimes,
 } from "components/metrics/panels/TimeSeriesPanel";
+import { formatTimeForCharts } from "components/TimeUtils";
 import dayjs from "dayjs";
 import { EChartsOption } from "echarts";
 import ReactECharts from "echarts-for-react";
@@ -172,7 +173,7 @@ function GraphPanel({
       trigger: "item",
       formatter: (params: any) =>
         `${params.seriesName}` +
-        `<br/>${dayjs(params.value[0]).local().format("M/D h:mm:ss A")}<br/>` +
+        `<br/>${formatTimeForCharts(params.value[0])}<br/>` +
         `${getTooltipMarker(params.color)}` +
         `<b>${params.value[1]}</b>`,
     },

torchci/pages/tts/[repoOwner]/[repoName]/[branch]/[[...page]].tsx

@@ -6,7 +6,7 @@ import {
   Granularity,
   seriesWithInterpolatedTimes,
 } from "components/metrics/panels/TimeSeriesPanel";
-import { durationDisplay } from "components/TimeUtils";
+import { durationDisplay, formatTimeForCharts } from "components/TimeUtils";
 import dayjs from "dayjs";
 import { EChartsOption } from "echarts";
 import ReactECharts from "echarts-for-react";
@@ -59,7 +59,7 @@ function Panel({
       trigger: "item",
       formatter: (params: any) =>
         `${params.seriesName}` +
-        `<br/>${dayjs(params.value[0]).local().format("M/D h:mm:ss A")}<br/>` +
+        `<br/>${formatTimeForCharts(params.value[0])}<br/>` +
         `${getTooltipMarker(params.color)}` +
         `<b>${durationDisplay(params.value[1])}</b>`,
     },