[Utilization] Setup API and UI Inital page (#6240)

# Description
Setup API and UI for utilization time series. 

Currently hooked with clickhouse fortesting tables to unblock UI
development while waiting for the datapipline code merged.

working api:
https://torchci-git-utiltest-fbopensource.vercel.app/api/utilization/12937937547/36088234580/1
working UI rendering:
https://torchci-git-utiltest-fbopensource.vercel.app/utilization/12937937547/36088234580/1

##Details
- set up sql, methods and API to fetch data from clickhouse
- Add unittest for complicated logics
- set up Page for utilization

.lintrunner.toml

@@ -365,6 +365,9 @@ include_patterns = [
     'torchci/clickhouse_queries/oss_ci_benchmark_branches/query.sql',
     'torchci/clickhouse_queries/oss_ci_benchmark_llms/query.sql',
     'torchci/clickhouse_queries/oss_ci_benchmark_names/query.sql',
+    'torchci/clickhouse_queries/oss_ci_util_metadata/query.sql',
+    'torchci/clickhouse_queries/oss_ci_util_ts/query.sql'
+
 ]
 exclude_patterns = [
 ]

torchci/clickhouse_queries/oss_ci_util_metadata/params.json

@@ -0,0 +1,10 @@
+{
+  "params": {
+    "workflowId": "UInt64",
+    "jobId": "UInt64",
+    "runAttempt": "UInt32",
+    "repo": "String",
+    "type": "String"
+  },
+  "tests":[]
+}

torchci/clickhouse_queries/oss_ci_util_metadata/query.sql

@@ -0,0 +1,21 @@
+--- This query is used by utilization dashboard
+-- TODO(): change to misc. once the pipeline is ready, currently fetch data from fortesting for development
+SELECT
+    usage_collect_interval AS collect_interval,
+    data_model_version AS model_version,
+    gpu_count,
+    cpu_count,
+    created_at,
+    workflow_name,
+    job_name,
+    start_at,
+    end_at,
+    segments,
+    tags
+FROM
+    fortesting.oss_ci_utilization_metadata
+WHERE
+    workflow_id = { workflowId: UInt64}
+    AND run_attempt = {runAttempt: UInt32}
+    AND job_id = {jobId: UInt64}
+    AND repo = {repo: String }

torchci/clickhouse_queries/oss_ci_util_ts/params.json

@@ -0,0 +1,10 @@
+{
+  "params": {
+    "workflowId": "UInt64",
+    "jobId": "UInt64",
+    "runAttempt": "UInt32",
+    "repo": "String",
+    "type": "String"
+  },
+  "tests":[]
+}

torchci/clickhouse_queries/oss_ci_util_ts/query.sql

@@ -0,0 +1,16 @@
+--- This query is used by utilization dashboard
+-- TODO(): change to misc. once the pipeline is ready, currently fetch data from fortesting for development
+SELECT
+    time_stamp AS ts,
+    tags,
+    json_data AS data
+FROM
+    fortesting.oss_ci_time_series
+WHERE
+    workflow_id = {workflowId: UInt64}
+    AND run_attempt = {runAttempt: UInt32}
+    AND job_id = {jobId: UInt64}
+    AND repo = {repo: String }
+    AND type = {type: String}
+ORDER BY
+    ts

torchci/lib/GeneralUtils.ts

@@ -2,6 +2,16 @@ import { Octokit } from "octokit";
 import { isFailure } from "./JobClassifierUtil";
 import { CommitData, JobData } from "./types";
 
+class ErrorWithStatusCode extends Error {
+  status: number;
+  info: any;
+  constructor(message: string, status: number, info: any) {
+    super(message);
+    this.status = status;
+    this.info = info;
+  }
+}
+
 export function includesCaseInsensitive(
   value: string,
   pattern: string
@@ -11,6 +21,20 @@ export function includesCaseInsensitive(
 
 export const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
+export const fetcherHandleError = async (url: string) => {
+  const res = await fetch(url);
+  if (!res.ok) {
+    const info = await res.json();
+    const error = new ErrorWithStatusCode(
+      `An error occurred while fetching the data`,
+      res.status,
+      info?.error
+    );
+    throw error;
+  }
+  return res.json();
+};
+
 export const getMessage = (
   message: string,
   classification: string,

torchci/lib/clickhouse.ts

@@ -43,6 +43,7 @@ export async function queryClickhouse(
    * @param params: Record<string, unknown>, the parameters to the query ex { sha: "abcd" }
    */
   const clickhouseClient = getClickhouseClient();
+
   const res = await clickhouseClient.query({
     query,
     format: "JSONEachRow",

torchci/lib/error_utils.ts

@@ -0,0 +1,28 @@
+// TypeScript defaults error type to unknown, this file is to handle error messages and types
+
+type ErrorWithMessage = {
+  message: string;
+};
+
+function isErrorWithMessage(error: unknown): error is ErrorWithMessage {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "message" in error &&
+    typeof (error as Record<string, unknown>).message === "string"
+  );
+}
+
+function toErrorWithMessage(candidate: unknown): ErrorWithMessage {
+  if (isErrorWithMessage(candidate)) {
+    return candidate;
+  }
+  try {
+    return new Error(JSON.stringify(candidate));
+  } catch {
+    return new Error(String(candidate));
+  }
+}
+export function getErrorMessage(error: unknown) {
+  return toErrorWithMessage(error).message;
+}