tc

Author: clee2000

torchci/components/HudGroupingSettings/MainPageSettings.tsx

@@ -1,18 +1,17 @@
 import {
   closestCenter,
   DndContext,
-  KeyboardSensor,
   PointerSensor,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
 import {
   SortableContext,
-  sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { DragHandle } from "@mui/icons-material";
 import {
   Button,
   Dialog,
@@ -35,7 +34,6 @@ import {
   isDupName,
   saveTreeData,
 } from "./mainPageSettingsUtils";
-import { DragHandle } from "@mui/icons-material";
 
 function validRegex(value: string) {
   try {
@@ -63,7 +61,13 @@ function EditSectionDialog({
 
   return (
     <>
-      <Button onClick={() => {setOpen(true)}}>Edit</Button>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Edit
+      </Button>
       <Dialog
         open={open}
         closeAfterTransition={false}
@@ -124,6 +128,54 @@ function EditSectionDialog({
   );
 }
 
+function ResetButton({ onConfirm }: { onConfirm: () => void }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        Reset
+      </Button>
+      <Dialog
+        open={open}
+        closeAfterTransition={false}
+        onClose={() => setOpen(false)}
+        aria-modal
+      >
+        <DialogContent>
+          <Stack spacing={2}>
+            <Typography>
+              Are you sure you want to reset to default group settings?
+            </Typography>
+            <Stack direction="row" spacing={2}>
+              <Button
+                onClick={() => {
+                  onConfirm();
+                  setOpen(false);
+                }}
+                color="error"
+              >
+                Yes
+              </Button>
+              <Button
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                No
+              </Button>
+            </Stack>
+          </Stack>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 export default function SettingsModal({
   visible,
   handleClose,
@@ -140,9 +192,7 @@ export default function SettingsModal({
     return a.filterPriority - b.filterPriority;
   });
 
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-  );
+  const sensors = useSensors(useSensor(PointerSensor));
 
   function addSection() {
     setTreeData([
@@ -164,7 +214,25 @@ export default function SettingsModal({
   }
 
   function removeSection(name: string) {
-    setTreeData(treeData.filter((node) => node.name !== name));
+    const removedNode = treeData.find((node) => node.name === name);
+    const filterPriority = removedNode!.filterPriority;
+    const displayPriority = removedNode!.displayPriority;
+    const newTreeData = treeData
+      .filter((node) => node.name !== name)
+      .map((node) => {
+        return {
+          ...node,
+          filterPriority:
+            node.filterPriority > filterPriority
+              ? node.filterPriority - 1
+              : node.filterPriority,
+          displayPriority:
+            node.displayPriority > displayPriority
+              ? node.displayPriority - 1
+              : node.displayPriority,
+        };
+      });
+    setTreeData(newTreeData);
   }
 
   function setItem(name: string, newName: string, regex: string) {
@@ -274,7 +342,10 @@ export default function SettingsModal({
       open={visible}
       fullWidth={true}
       maxWidth="xl"
-      onClose={handleClose}
+      onClose={() => {
+        saveTreeData(treeData);
+        handleClose();
+      }}
       onClick={(e) => e.stopPropagation()}
     >
       <Stack
@@ -293,14 +364,12 @@ export default function SettingsModal({
           >
             Save
           </Button>
-          <Button
-            onClick={() => {
+          <ResetButton
+            onConfirm={() => {
               saveTreeData(getDefaultGroupSettings());
               setTreeData(getDefaultGroupSettings());
             }}
-          >
-            Reset
-          </Button>
+          />
           <Button
             onClick={() =>
               setOrderBy(orderBy == "display" ? "filter" : "display")
@@ -310,7 +379,7 @@ export default function SettingsModal({
           </Button>
         </Stack>
         <Button onClick={handleClose} color={"error"}>
-          Close
+          Close without Saving
         </Button>
       </Stack>
 
@@ -325,7 +394,7 @@ export default function SettingsModal({
             strategy={verticalListSortingStrategy}
           >
             {treeDataOrdered.map((id) => (
-              <Node key={id.name} data={id}/>
+              <Node key={id.name} data={id} />
             ))}
           </SortableContext>
         </DndContext>

torchci/components/HudGroupingSettings/hudGroupingSettings.ts

@@ -69,6 +69,7 @@ export function getGroupingData(
   }
 
   return {
+    shaGrid,
     groupNameMapping,
     jobsWithFailures,
     groupsWithFailures,

torchci/components/HudGroupingSettings/mainPageSettingsUtils.ts

@@ -39,10 +39,10 @@ export function getStoredTreeData(): Group[] {
 
 export function getNonDupNewName(treeData: Group[]) {
   let i = 0;
-  while (isDupName(treeData, `New Group ${i}`)) {
+  while (isDupName(treeData, `NEW GROUP ${i}`)) {
     i++;
   }
-  return `New Group ${i}`;
+  return `NEW GROUP ${i}`;
 }
 
 export function isDupName(treeData: Group[], name: string): boolean {

torchci/lib/JobClassifierUtil.ts

@@ -1,6 +1,7 @@
 import { GroupedJobStatus, JobStatus } from "components/job/GroupJobConclusion";
 import { getOpenUnstableIssues } from "lib/jobUtils";
 import { IssueData, RowData } from "./types";
+import { Group } from "components/HudGroupingSettings/mainPageSettingsUtils";
 
 const GROUP_MEMORY_LEAK_CHECK = "Memory Leak Check";
 const GROUP_RERUN_DISABLED_TESTS = "Rerun Disabled Tests";
@@ -157,48 +158,19 @@ export const groups = [
   },
 ];
 
-// Jobs on HUD home page will be sorted according to this list, with anything left off at the end
-// Reorder elements in this list to reorder the groups on the HUD
-const HUD_GROUP_SORTING = [
-  GROUP_LINT,
-  GROUP_LINUX,
-  GROUP_WINDOWS,
-  GROUP_IOS,
-  GROUP_MAC,
-  GROUP_ROCM,
-  GROUP_XPU,
-  GROUP_XLA,
-  GROUP_OTHER_VIABLE_STRICT_BLOCKING, // placed after the last group that tends to have viable/strict blocking jobs
-  GROUP_VLLM,
-  GROUP_PARALLEL,
-  GROUP_LIBTORCH,
-  GROUP_ANDROID,
-  GROUP_BINARY_LINUX,
-  GROUP_DOCKER,
-  GROUP_CALC_DOCKER_IMAGE,
-  GROUP_CI_DOCKER_IMAGE_BUILDS,
-  GROUP_CI_CIRCLECI_PYTORCH_IOS,
-  GROUP_PERIODIC,
-  GROUP_SLOW,
-  GROUP_DOCS,
-  GROUP_INDUCTOR,
-  GROUP_INDUCTOR_PERIODIC,
-  GROUP_ANNOTATIONS_AND_LABELING,
-  GROUP_BINARY_WINDOWS,
-  GROUP_MEMORY_LEAK_CHECK,
-  GROUP_RERUN_DISABLED_TESTS,
-  // These two groups should always be at the end
-  GROUP_OTHER,
-  GROUP_UNSTABLE,
-];
 
 // Accepts a list of group names and returns that list sorted according to
 // the order defined in HUD_GROUP_SORTING
-export function sortGroupNamesForHUD(groupNames: string[]): string[] {
+export function sortGroupNamesForHUD(
+  groupNames: string[],
+  groupSettings: Group[]
+): string[] {
   let result: string[] = [];
-  for (const group of HUD_GROUP_SORTING) {
-    if (groupNames.includes(group)) {
-      result.push(group);
+  for (const group of groupSettings.sort(
+    (a, b) => a.displayPriority - b.displayPriority
+  )) {
+    if (groupNames.includes(group.name)) {
+      result.push(group.name);
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { Button } from "@mui/material";
 import CheckBoxSelector from "components/common/CheckBoxSelector";
 import CopyLink from "components/common/CopyLink";
 import LoadingPage from "components/common/LoadingPage";
@@ -10,13 +11,15 @@ import {
   GroupHudTableHeader,
   passesGroupFilter,
 } from "components/hud/GroupHudTableHeaders";
+import { getGroupingData } from "components/HudGroupingSettings/hudGroupingSettings";
+import SettingsModal from "components/HudGroupingSettings/MainPageSettings";
 import HudGroupedCell from "components/job/GroupJobConclusion";
 import JobConclusion from "components/job/JobConclusion";
 import JobFilterInput from "components/job/JobFilterInput";
 import JobTooltip from "components/job/JobTooltip";
 import SettingsPanel from "components/SettingsPanel";
 import { fetcher } from "lib/GeneralUtils";
-import { isUnstableGroup } from "lib/JobClassifierUtil";
+import { isUnstableGroup, sortGroupNamesForHUD } from "lib/JobClassifierUtil";
 import {
   isFailedJob,
   isRerunDisabledTestsJob,
@@ -285,6 +288,7 @@ function FiltersAndSettings({}: {}) {
   const { jobFilter, handleSubmit } = useTableFilter(params);
   const [mergeEphemeralLF, setMergeEphemeralLF] = useContext(MergeLFContext);
   const [settingsPanelOpen, setSettingsPanelOpen] = useState(false);
+  const [groupingSettingsOpen, setGroupingSettingsOpen] = useState(false);
   const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
   const [hideGreenColumns, setHideGreenColumns] =
     useHideGreenColumnsPreference();
@@ -340,6 +344,11 @@ function FiltersAndSettings({}: {}) {
         isOpen={settingsPanelOpen}
         onToggle={() => setSettingsPanelOpen(!settingsPanelOpen)}
       />
+      <Button onClick={() => setGroupingSettingsOpen(true)}>Groupings</Button>
+      <SettingsModal
+        visible={groupingSettingsOpen}
+        handleClose={() => setGroupingSettingsOpen(false)}
+      />
     </div>
   );
 }
@@ -557,13 +566,18 @@ function GroupedHudTable({ params }: { params: HudParams }) {
   const [hideGreenColumns] = useHideGreenColumnsPreference();
   const [useGrouping] = useGroupingPreference(params.nameFilter);
 
-  const { shaGrid, groupNameMapping, jobsWithFailures, groupsWithFailures } =
-    getGroupingData(
-      data ?? [],
-      jobNames,
-      (!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
-      unstableIssuesData ?? []
-    );
+  const {
+    shaGrid,
+    groupNameMapping,
+    jobsWithFailures,
+    groupsWithFailures,
+    groupSettings,
+  } = getGroupingData(
+    data ?? [],
+    jobNames,
+    (!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
+    unstableIssuesData ?? []
+  );
 
   const [expandedGroups, setExpandedGroups] = useState(new Set<string>());