[HUD][CH] Move TimeSeriesPanel to only use CH (#6032)

This is part of an effort to remove all references to Rockset after the
migration is finished.

The torchci/pages/_githubrunnersutilization.tsx page has not yet been
migrated, so I copied the old component into a new file to be used by
that page. There's a lot of code duplication but this file will be
deleted after jan 1 2025 and if this page still depends on it, I will
leave the page broken

Author: clee2000

torchci/components/metrics/panels/TimeSeriesPanel.tsx

@@ -8,7 +8,6 @@ import utc from "dayjs/plugin/utc";
 import { EChartsOption } from "echarts";
 import ReactECharts from "echarts-for-react";
 import { fetcher } from "lib/GeneralUtils";
-import { RocksetParam } from "lib/rockset";
 import _ from "lodash";
 import useSWR from "swr";
 dayjs.extend(utc);
@@ -256,11 +255,9 @@ export function TimeSeriesPanelWithData({
 export default function TimeSeriesPanel({
   // Human-readable title of the panel.
   title,
-  // Query lambda collection in Rockset.
-  queryCollection = "metrics",
-  // Query lambda name in Rockset.
+  // Query name
   queryName,
-  // Rockset query parameters
+  // Query parameters
   queryParams,
   // Granularity of the time buckets.
   granularity,
@@ -279,7 +276,6 @@ export default function TimeSeriesPanel({
   yAxisLabel,
   // Additional EChartsOption (ex max y value)
   additionalOptions,
-  useClickHouse = false,
   smooth = true,
   chartType = "line",
   sort_by = "name",
@@ -290,9 +286,8 @@ export default function TimeSeriesPanel({
   dataReader = undefined,
 }: {
   title: string;
-  queryCollection?: string;
   queryName: string;
-  queryParams: RocksetParam[] | {};
+  queryParams: { [key: string]: any };
   granularity: Granularity;
   groupByFieldName?: string;
   timeFieldName: string;
@@ -301,7 +296,6 @@ export default function TimeSeriesPanel({
   yAxisRenderer: (_value: any) => string;
   yAxisLabel?: string;
   additionalOptions?: EChartsOption;
-  useClickHouse?: boolean;
   smooth?: boolean;
   chartType?: ChartType;
   sort_by?: "total" | "name";
@@ -313,19 +307,12 @@ export default function TimeSeriesPanel({
   // - Granularity
   // - Group by
   // - Time field
-  const url = useClickHouse
-    ? `/api/clickhouse/${queryName}?parameters=${encodeURIComponent(
-        JSON.stringify({
-          ...(queryParams as {}),
-          granularity: granularity as string,
-        })
-      )}`
-    : `/api/query/${queryCollection}/${queryName}?parameters=${encodeURIComponent(
-        JSON.stringify([
-          ...(queryParams as RocksetParam[]),
-          { name: "granularity", type: "string", value: granularity },
-        ])
-      )}`;
+  const url = `/api/clickhouse/${queryName}?parameters=${encodeURIComponent(
+    JSON.stringify({
+      ...queryParams,
+      granularity: granularity as string,
+    })
+  )}`;
 
   const { data: rawData } = useSWR(url, fetcher, {
     refreshInterval: auto_refresh ? 5 * 60 * 1000 : 0,
@@ -336,21 +323,11 @@ export default function TimeSeriesPanel({
   }
   const data = dataReader ? dataReader(rawData) : rawData;
 
-  let startTime, stopTime;
-  if (useClickHouse) {
-    startTime = (queryParams as any)["startTime"];
-    stopTime = (queryParams as any)["stopTime"];
-  } else {
-    startTime = (queryParams as RocksetParam[]).find(
-      (p) => p.name === "startTime"
-    )?.value;
-    stopTime = (queryParams as RocksetParam[]).find(
-      (p) => p.name === "stopTime"
-    )?.value;
-  }
+  let startTime = queryParams["startTime"];
+  let stopTime = queryParams["stopTime"];
 
   // Clamp to the nearest granularity (e.g. nearest hour) so that the times will
-  // align with the data we get from Rockset
+  // align with the data we get from the database
   startTime = dayjs.utc(startTime).startOf(granularity);
   stopTime = dayjs.utc(stopTime).endOf(granularity);