[HUD] Add option to filter jobs on main page by regex (#6986)

Add a button toggle to filter jobs by regex on the main HUD page based
off the one in the cost analysis page

Follow up PR for the cost analysis page to also use the component:
#6986

Reason:
* Sometimes I want to search for something kind of specific that the
current job filtering doesn't handle, like "linux jobs but only on pull"

Changes:
* Add new component for the regex toggle button
* Changes the styling of the input text box and search button to be
larger
  * The HUD table is shifted slightly down but not by much

Old:
<img width="472" height="78" alt="image"
src="https://github.com/user-attachments/assets/d0362f72-1021-4169-88f8-f5e350317d74"
/>

New:
<img width="549" height="92" alt="image"
src="https://github.com/user-attachments/assets/e2c51871-0c14-444b-8431-b71c46eb310e"
/>

Author: clee2000

torchci/components/common/RegexButton.tsx

@@ -0,0 +1,36 @@
+import { Button, Tooltip } from "@mui/material";
+
+/**
+ * RegexButton component for toggling regex search.  Example can be seen on the
+ * HUD main page in the job filter.
+ * @param isRegex Whether the regex search is enabled
+ * @param setIsRegex Function to toggle the regex search state
+ * @returns
+ */
+export default function RegexButton({
+  isRegex,
+  setIsRegex,
+}: {
+  isRegex: boolean;
+  setIsRegex: (value: boolean) => void;
+}) {
+  return (
+    <Tooltip title={isRegex ? "Disable regex search" : "Enable regex search"}>
+      <Button
+        size="small"
+        style={{
+          minWidth: 0,
+          textTransform: "none",
+          borderColor: "transparent",
+          fontFamily: "monospace",
+          color: "inherit",
+          backgroundColor: isRegex ? "rgba(63, 81, 181, 0.1)" : "transparent",
+        }}
+        variant="outlined"
+        onClick={() => setIsRegex(!isRegex)}
+      >
+        .*
+      </Button>
+    </Tooltip>
+  );
+}

torchci/components/hud/GroupHudTableHeaders.tsx

@@ -7,9 +7,13 @@ import {
 import React, { useContext } from "react";
 import { BsFillCaretDownFill, BsFillCaretRightFill } from "react-icons/bs";
 
-function groupingIncludesJobFilter(jobNames: string[], filter: string) {
+function groupingIncludesJobFilter(
+  jobNames: string[],
+  filter: string,
+  useRegex: boolean
+) {
   for (const jobName of jobNames) {
-    if (includesCaseInsensitive(jobName, filter)) {
+    if (includesCaseInsensitive(jobName, filter, useRegex)) {
       return true;
     }
   }
@@ -19,12 +23,17 @@ function groupingIncludesJobFilter(jobNames: string[], filter: string) {
 export function passesGroupFilter(
   filter: string | null,
   name: string,
-  groupNameMapping: Map<string, string[]>
+  groupNameMapping: Map<string, string[]>,
+  useRegex: boolean
 ) {
   return (
     filter === null ||
-    includesCaseInsensitive(name, filter) ||
-    groupingIncludesJobFilter(groupNameMapping.get(name) ?? [], filter)
+    includesCaseInsensitive(name, filter, useRegex) ||
+    groupingIncludesJobFilter(
+      groupNameMapping.get(name) ?? [],
+      filter,
+      useRegex
+    )
   );
 }
 

torchci/components/job/JobFilterInput.tsx

@@ -1,3 +1,8 @@
+import { Button, TextField } from "@mui/material";
+import { Stack } from "@mui/system";
+import RegexButton from "components/common/RegexButton";
+import { formatHudUrlForRoute, packHudParams } from "lib/types";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 export default function JobFilterInput({
@@ -11,36 +16,75 @@ export default function JobFilterInput({
   handleFocus?: () => void;
   width?: string;
 }) {
+  const router = useRouter();
+  const params = packHudParams(router.query);
+  const [useRegexFilter, setuseRegexFilter] = useState(
+    params.useRegexFilter || false
+  );
+
   const [currVal, setCurrVal] = useState<string>(currentFilter ?? "");
   useEffect(() => {
     // something about hydration and states is making it so that currVal remains
     // as "" when currentFilter changes
     setCurrVal(currentFilter ?? "");
   }, [currentFilter]);
+
+  useEffect(() => {
+    router.push(
+      formatHudUrlForRoute("hud", { ...params, useRegexFilter }),
+      undefined,
+      {
+        shallow: true,
+      }
+    );
+  }, [useRegexFilter]);
+
   return (
     <div style={{ margin: 0 }}>
       <form
         onSubmit={(e) => {
           e.preventDefault();
           handleSubmit(currVal);
         }}
-        style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
       >
-        <label
-          htmlFor="name_filter"
-          style={{ margin: 0, whiteSpace: "nowrap" }}
-        >
-          Job filter:
-        </label>
-        <input
-          style={{ width: width || "150px" }}
-          type="text"
-          name="name_filter"
-          value={currVal}
-          onChange={(e) => setCurrVal(e.target.value)}
-          onFocus={handleFocus}
-        />
-        <input type="submit" value="Go" />
+        <Stack direction="row" spacing={1} alignItems="center">
+          <label htmlFor="name_filter">Job filter:</label>
+          <TextField
+            id="name_filter"
+            name="name_filter"
+            variant="outlined"
+            size="small"
+            value={currVal}
+            onChange={(e) => setCurrVal(e.target.value)}
+            onFocus={handleFocus}
+            slotProps={{
+              input: {
+                endAdornment: (
+                  <RegexButton
+                    isRegex={useRegexFilter}
+                    setIsRegex={setuseRegexFilter}
+                  />
+                ),
+              },
+            }}
+          />
+          <Button
+            size="large"
+            style={{
+              minWidth: 0,
+              textTransform: "none",
+              font: "inherit",
+              backgroundColor: "transparent",
+              borderColor: "transparent",
+              color: "inherit",
+            }}
+            variant="outlined"
+            type="submit"
+            onClick={() => handleSubmit(currVal)}
+          >
+            Go
+          </Button>
+        </Stack>
       </form>
     </div>
   );

torchci/lib/GeneralUtils.ts

@@ -16,8 +16,18 @@ class ErrorWithStatusCode extends Error {
 
 export function includesCaseInsensitive(
   value: string,
-  pattern: string
+  pattern: string,
+  useRegex: boolean
 ): boolean {
+  if (useRegex) {
+    try {
+      const regex = new RegExp(pattern, "i");
+      return regex.test(value);
+    } catch (error) {
+      console.error("Invalid regex pattern:", error);
+      return false;
+    }
+  }
   return value.toLowerCase().includes(pattern.toLowerCase());
 }
 

torchci/lib/types.ts

@@ -127,6 +127,7 @@ export interface HudParams {
   filter_reruns: boolean;
   filter_unstable: boolean;
   mergeEphemeralLF?: boolean;
+  useRegexFilter?: boolean;
 }
 
 export interface PRData {
@@ -274,6 +275,7 @@ export function packHudParams(input: any) {
     filter_reruns: input.filter_reruns ?? (false as boolean),
     filter_unstable: input.filter_unstable ?? (false as boolean),
     mergeEphemeralLF: input.mergeEphemeralLF as boolean,
+    useRegexFilter: input.useRegexFilter === "true",
   };
 }
 
@@ -314,6 +316,10 @@ function formatHudURL(
     base += `&name_filter=${encodeURIComponent(params.nameFilter)}`;
   }
 
+  if (params.useRegexFilter && keepFilter) {
+    base += `&useRegexFilter=true`;
+  }
+
   if (params.mergeEphemeralLF) {
     base += `&mergeEphemeralLF=true`;
   }

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

@@ -662,7 +662,14 @@ function GroupedHudTable({
 
   names = names.filter((name) => {
     // Filter by job filter text first
-    if (!passesGroupFilter(jobFilter, name, groupNameMapping)) {
+    if (
+      !passesGroupFilter(
+        jobFilter,
+        name,
+        groupNameMapping,
+        params.useRegexFilter || false
+      )
+    ) {
       return false;
     }