[Utilization] Set up Job level profile, and test detail mechanism (#6264)

# Description
show job profile information such as duration, cpu, gpu count etc.
show the total statisctics table for the whole job.
show detected testsand tests' segmented Statistics Table 

Currently we only show max aggregate data, 

the max agg: we get the max of a utilization percentage during the 5 sec
collect interval.
the avg agg: we get the avg of all utilization percentage during the 5
sec collect interval

## Statistics Table 
show all hardware's max aggregated data for avg, 10p,90p and 90%
utilizaiton spike info.
Will add analysis seciton for the statistics in next step

## Demo
working vercel demo link: 
Job with GPU:
https://torchci-qrqc2igy4-fbopensource.vercel.app/utilization/13143119394/36681447812/1
Job without GPU:
https://torchci-qrqc2igy4-fbopensource.vercel.app/utilization/12937937547/36088234580/1

### Job Profile Details
workflow and job information, duration, hardware count information
a statisctics table shows how the whole job's utilization behaves.


![testProfile](https://github.com/user-attachments/assets/d996b752-3bfd-420c-b54c-3169acfb240b)

### View Tests
Two options to view detected test details:
- list view: click on test based on test name 
- chart view: click on test segment in chart

#### Choose single test from list view

![listView](https://github.com/user-attachments/assets/097ec959-f2ad-41d9-a8f4-5ee60a52ec98)
### choose singl test from chart view

![chartview](https://github.com/user-attachments/assets/08d4e942-1feb-4011-9a3a-d34e2df83d2a)


## Other
remove .curve(d3.curveBasis) from the svg since it does not render svg
accurate


## Next step
add more test related rendering and table for test improvement
recommendation

Author: yangw-dev

torchci/components/charts/line_rect_chart/LineRectChart.tsx

@@ -11,13 +11,14 @@ import { processLineData, processRectData, setDimensions } from "./lib/utils";
 import styles from "./LineChart.module.css";
 
 type Props = {
-  onDataChange?: (data: any) => void;
+  onClickedRect?: (id: string) => void;
   inputLines?: TimeSeriesWrapper[];
   rects?: {
     name: string;
     start_at: string;
     end_at: string;
     color?: string;
+    opacity?: number;
   }[];
   chartWidth?: number;
   disableRect?: boolean;
@@ -27,7 +28,7 @@ type Props = {
 };
 
 const LineRectChart = ({
-  onDataChange = (data: any) => void {},
+  onClickedRect = (id: string) => void {},
   inputLines,
   rects,
   chartWidth,
@@ -144,6 +145,7 @@ const LineRectChart = ({
               setLineTooltip={setLineTooltip}
             />
             <RenderSvgRects
+              onClickedRect={onClickedRect}
               setRectTooltip={setRectTooltip}
               rectangles={rectangles}
               disableRect={disableRect}

torchci/components/charts/line_rect_chart/component/RenderLineChartComponents.module.css

@@ -17,13 +17,9 @@
   opacity: 0.7;
 }
 
-.rect {
-  opacity: 0.2;
-}
-
 .rect:hover {
   fill: blue;
-  opacity: 0.5;
+  opacity: 0.7;
 }
 .rect:active {
   fill: red;

torchci/components/charts/line_rect_chart/component/RenderSvgLine.tsx

@@ -17,9 +17,7 @@ const RenderSvgLines = ({
   const lineGenerator = d3
     .line<D3LineRecord>()
     .x((d: D3LineRecord) => scales.xScale(d.date))
-    .y((d: D3LineRecord) => scales.yScale(d.value))
-    .curve(d3.curveBasis);
-
+    .y((d: D3LineRecord) => scales.yScale(d.value));
   return (
     <g className="lines-group">
       {lines.map((line, i) => {

torchci/components/charts/line_rect_chart/component/RenderSvgRect.tsx

@@ -5,6 +5,7 @@ import { formatDate } from "../lib/utils";
 import styles from "./RenderLineChartComponents.module.css";
 
 const RenderSvgRects = ({
+  onClickedRect,
   setRectTooltip,
   rectangles,
   disableRect,
@@ -21,6 +22,7 @@ const RenderSvgRects = ({
       };
     }>
   >;
+  onClickedRect: (id: any) => void;
   rectangles: RectangleData[];
   disableRect?: boolean;
   dimensions: any;
@@ -45,7 +47,9 @@ const RenderSvgRects = ({
     rectData: RectangleData
   ) => {
     if (disableRect) return;
-    //onDataChange(): todo handle the onclick event
+
+    console.log("RenderSvgRects", rectData);
+    onClickedRect(rectData.name);
   };
 
   // handle rect svg events
@@ -68,6 +72,7 @@ const RenderSvgRects = ({
           <rect
             key={i}
             className={`${styles.rect} rect`}
+            opacity={rec.opacity ? rec.opacity : 0.5}
             fill={rec.color ? rec.color : getRandomColor(i)}
             id={rec.name}
             display={disableRect ? "none" : "block"}

torchci/components/charts/line_rect_chart/lib/types.ts

@@ -3,6 +3,7 @@ export interface RectangleData {
   start: Date;
   end: Date;
   color?: string;
+  opacity?: number;
 }
 
 export interface TimeData {

torchci/components/charts/line_rect_chart/lib/utils.ts

@@ -42,6 +42,7 @@ export function processRectData(
     start_at: string;
     end_at: string;
     color?: string;
+    opacity?: number;
   }[]
 ) {
   if (!rectangles || rectangles.length == 0) {
@@ -54,6 +55,7 @@ export function processRectData(
       start: convertDate(el.start_at),
       end: convertDate(el.end_at),
       color: el.color,
+      opacity: el.opacity,
     };
   });
 }

torchci/components/common/DropDownList.tsx

@@ -0,0 +1,50 @@
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+} from "@mui/material";
+import { useEffect, useState } from "react";
+
+export default function DropDownList({
+  onChange,
+  defaultValue,
+  options,
+}: {
+  onChange: (value: string) => void;
+  defaultValue?: string;
+  options: { value: string; name: string }[];
+}) {
+  const [value, setValue] = useState<string>("");
+
+  useEffect(() => {
+    if (defaultValue) {
+      setValue(defaultValue);
+    } else {
+      setValue("none");
+    }
+  }, [defaultValue]);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(event.target.value);
+    onChange(event.target.value);
+  };
+  return (
+    <div>
+      <FormControl sx={{ m: 1, minWidth: 80 }}>
+        <Select value={value} onChange={handleChange} autoWidth>
+          {defaultValue == undefined ? (
+            <MenuItem value="none">None</MenuItem>
+          ) : null}
+          {options.map((option, idx) => {
+            return (
+              <MenuItem key={idx} value={option.value}>
+                {option.name}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}

torchci/components/common/ToggleGroup.tsx

@@ -0,0 +1,56 @@
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import React, { useEffect } from "react";
+
+interface ToggleGroupProps {
+  defaultValue: string;
+  items: ToggleButtonItem[];
+  onChange?: (value: string) => void;
+}
+
+interface ToggleButtonItem {
+  name: string;
+  value: string;
+}
+
+export const ToggleGroup = ({
+  defaultValue,
+  items,
+  onChange = () => {},
+}: ToggleGroupProps) => {
+  const [alignment, setAlignment] = React.useState("");
+
+  const handleChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string
+  ) => {
+    setAlignment(newAlignment);
+    onChange(newAlignment);
+  };
+
+  useEffect(() => {
+    if (defaultValue) {
+      setAlignment(defaultValue);
+    } else {
+      setAlignment("none");
+    }
+  }, [defaultValue, items]);
+
+  return (
+    <ToggleButtonGroup
+      color="primary"
+      value={alignment}
+      exclusive
+      onChange={handleChange}
+      aria-label="Platform"
+    >
+      {!defaultValue && <ToggleButton value="none">None</ToggleButton>}
+      {items.map((item) => {
+        return (
+          <ToggleButton key={item.name} value={item.value}>
+            {item.name}
+          </ToggleButton>
+        );
+      })}
+    </ToggleButtonGroup>
+  );
+};