[Utilization] Fix bugs and context (#6292)

fix the frame to fit chart, and modify content for sections

Author: yangw-dev

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

@@ -8,6 +8,7 @@ import ChartCheckboxGroups from "./helpers/ChartCheckboxGroups";
 import { CheckboxItem } from "./helpers/CheckboxGroup";
 import DropList from "./helpers/DropList";
 import styles from "./RenderLineChartComponents.module.css";
+const defaultCategory = "all";
 
 const RenderLinePickerOptions = ({
   lines,
@@ -18,25 +19,30 @@ const RenderLinePickerOptions = ({
   setLines: (line: any[]) => void;
   lineFilterConfig: PickerConfig[];
 }) => {
-  const [category, setCategory] = useState<string>("");
+  const [category, setCategory] = useState<string>(defaultCategory);
   const [options, setOptions] = useState<any>([]);
   const [groups, setGroups] = useState<any>([]);
 
   useEffect(() => {
+    renderOptions();
     render();
   }, [lines, lineFilterConfig]);
 
-  function render() {
+  function renderOptions() {
     let options = lineFilterConfig.map((config) => {
       return { value: config.category, name: config.category };
     });
     setOptions(options);
+  }
 
+  function render() {
     const config = lineFilterConfig.find((item) => item.category == category);
     if (!config) {
       setGroups([]);
       return;
     }
+
+    // render checkboxes
     const res = config.types.map((type) => {
       return {
         parentName: type.name,
@@ -46,16 +52,28 @@ const RenderLinePickerOptions = ({
     setGroups(res);
   }
 
-  function resetLines() {
+  function resetLines(category: string) {
+    // clear all lines
     const newLines = lines.map((line) => {
       line.hidden = true;
       return line;
     });
+    // show all lines in the selected category
+    const config = lineFilterConfig.find((item) => item.category == category);
+    if (config) {
+      config.types.forEach((type) => {
+        newLines.forEach((line) => {
+          if (containsAllSubstrings(line.id, type.tags)) {
+            line.hidden = false;
+          }
+        });
+      });
+    }
     setLines(newLines);
   }
 
   useEffect(() => {
-    resetLines();
+    resetLines(category);
     render();
   }, [category]);
 
@@ -95,7 +113,11 @@ const RenderLinePickerOptions = ({
       {options.length > 0 && (
         <div className={styles.rowFlexCenter}>
           <div>Group by:</div>
-          <DropList onChange={changeLineCateory} options={options}></DropList>
+          <DropList
+            onChange={changeLineCateory}
+            options={options}
+            defaultValue={defaultCategory}
+          ></DropList>
         </div>
       )}
       {groups.length > 0 && (

torchci/components/charts/line_rect_chart/component/helpers/DropList.tsx

@@ -9,21 +9,24 @@ import { useState } from "react";
 export default function DropList({
   onChange,
   options,
+  defaultValue,
 }: {
   onChange: (value: string) => void;
   options: { value: string; name: string }[];
+  defaultValue?: string;
 }) {
-  const [value, setValue] = useState<string>("unselect");
+  const [value, setValue] = useState<string>(defaultValue ?? "unselect");
 
   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>
-          <MenuItem value={"unselect"}>{"unselect"}</MenuItem>
+          {defaultValue ?? <MenuItem value={"unselect"}>{"unselect"}</MenuItem>}
           {options.map((option, idx) => {
             return (
               <MenuItem key={idx} value={option.value}>

torchci/components/utilization/UtilizationPage.tsx

@@ -96,7 +96,7 @@ export const UtilizationPage = ({
           <Divider />
           <LineRectChart
             inputLines={timeSeriesList}
-            chartWidth={1200}
+            chartWidth={1400}
             disableLineTooltip={false}
             disableRect={true}
             lineFilterConfig={lineFilters}

torchci/components/utilization/components/TestSectionView/SingleTestView.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material";
+import { Divider, styled } from "@mui/material";
 import LineRectChart from "components/charts/line_rect_chart/LineRectChart";
 import {
   formatSeconds,
@@ -28,7 +28,6 @@ const GraphGroupSection = styled("div")({
 const SingleGraphSection = styled("div")({
   margin: "5px",
   padding: "10px",
-  border: "1px solid #ccc",
 });
 
 export const SingleTestView = ({
@@ -71,7 +70,8 @@ export const SingleTestView = ({
 
   return (
     <div>
-      <h1>Selected Test Details</h1>
+      <h1>Selected Test Segment Details</h1>
+      <Divider />
       <InfoCard>
         <InfoSection>
           <InfoTitle>Test Name:</InfoTitle>
@@ -105,7 +105,7 @@ export const SingleTestView = ({
           {testTimeSeries && (
             <LineRectChart
               inputLines={testTimeSeries}
-              chartWidth={1200}
+              chartWidth={1000}
               disableLineTooltip={false}
               disableRect={true}
               lineFilterConfig={lineFilters}
@@ -116,7 +116,7 @@ export const SingleTestView = ({
           <div> Location of the test: </div>
           <LineRectChart
             inputLines={timeSeriesList}
-            chartWidth={800}
+            chartWidth={700}
             rects={[testSegment]}
             disableLineTooltip={true}
             disableRect={false}

torchci/components/utilization/components/TestSectionView/TestSectionView.tsx

@@ -1,4 +1,3 @@
-import { Paper } from "@mui/material";
 import { getDuration } from "components/utilization/helper";
 import { Segment } from "lib/utilization/types";
 import { useEffect, useState } from "react";
@@ -34,9 +33,9 @@ export const TestSectionView = ({
       <h3>Detected python test details</h3>
       <Divider />
       <div>
-        <InfoTitle>Tests ({renderSegments.length}) </InfoTitle>
+        <InfoTitle>Potential Python Tests ({renderSegments.length}) </InfoTitle>
         <Description>
-          {`We detected (${renderSegments.length}) tests on PYTHON_CMD level`}
+          {`We detected (${renderSegments.length}) segments that are potentially tests on PYTHON_CMD level`}
         </Description>
         {renderSegments.length > 0 && timeSeriesList.length > 0 && (
           <ToggleTestsGroup
@@ -47,12 +46,12 @@ export const TestSectionView = ({
         )}
         <div>
           {pickedSegment ? (
-            <Paper>
+            <div>
               <SingleTestView
                 testSegment={pickedSegment}
                 timeSeriesList={timeSeriesList}
               />
-            </Paper>
+            </div>
           ) : (
             <Blank></Blank>
           )}

torchci/components/utilization/components/TestSectionView/ToggleTestsGroup.tsx

@@ -14,14 +14,14 @@ import { useState } from "react";
 import { RankTestView } from "./RankTestView/RankTestView";
 
 const toggleItems = [
-  {
-    name: "list view",
-    value: "list",
-  },
   {
     name: "chart view",
     value: "chart",
   },
+  {
+    name: "list view",
+    value: "list",
+  },
   {
     name: "rank view",
     value: "rank",
@@ -35,7 +35,7 @@ export const TestList = styled(Paper)({
   overflow: "auto",
   backgroundColor: "#f5f5f5",
 });
-const defaultTestViewValue = "list";
+const defaultTestViewValue = "chart";
 
 export const ToggleTestsGroup = ({
   pickSegment,
@@ -81,7 +81,7 @@ export const ToggleTestsGroup = ({
   return (
     <div>
       <ToggleGroup
-        defaultValue={"list"}
+        defaultValue={defaultTestViewValue}
         items={toggleItems}
         onChange={handleToggleTestView}
       />
@@ -118,18 +118,16 @@ export const ToggleTestsGroup = ({
             </TestList>
           </div>
           <div>
-            {showSegmentLocation && (
-              <div>
-                <div> Location of the test: </div>
-                <LineRectChart
-                  inputLines={timeSeriesList}
-                  chartWidth={800}
-                  rects={[showSegmentLocation]}
-                  disableLineTooltip={true}
-                  disableRect={false}
-                ></LineRectChart>
-              </div>
-            )}
+            <div>
+              <div> Location of the test: </div>
+              <LineRectChart
+                inputLines={timeSeriesList}
+                chartWidth={800}
+                rects={showSegmentLocation ? [showSegmentLocation] : []}
+                disableLineTooltip={true}
+                disableRect={false}
+              ></LineRectChart>
+            </div>
           </div>
         </FlexSection>
       )}

torchci/components/utilization/components/UtilizationJobSummary/UtilizationJobSummary.tsx

@@ -69,8 +69,8 @@ const JobUtilizationSummary = ({
     const duration = getDurationMetrics(
       new Date(metadata.start_at),
       new Date(metadata.end_at),
-      "Job Duration",
-      "job|duration"
+      "Test Duration",
+      "duration"
     );
     const numeric_metrics = getMetadataStats(metadata);
     const mdm = [duration, ...numeric_metrics];
@@ -106,7 +106,7 @@ const JobUtilizationSummary = ({
         </MetadataGroupSection>
       </ContainerSection>
       <StatsTable>
-        <SectionTitle> Job Metrics Summary Table</SectionTitle>
+        <SectionTitle> Test Job Metrics Summary Table</SectionTitle>
         <UtilizationStatsTable data={tableData} />
       </StatsTable>
     </div>

torchci/pages/utilization/[workflowId]/[jobId]/[attempt]/[[...page]].tsx

@@ -1,3 +1,4 @@
+import LoadingPage from "components/LoadingPage";
 import { UtilizationPage } from "components/utilization/UtilizationPage";
 import { fetcherHandleError } from "lib/GeneralUtils";
 import { UtilizationAPIResponse } from "lib/utilization/types";
@@ -22,7 +23,7 @@ const Utilization = () => {
   }
 
   if (!data) {
-    return <div>loading...</div>;
+    return <LoadingPage />;
   }
 
   return (