Frontend: Soft limits- add warnings for large audits to prevent resource issues

Author: heythisischris

apps/frontend/src/components/AuditPagesInput.tsx

@@ -4,8 +4,11 @@ import { StyledButton } from "./StyledButton";
 import { AuditPagesInputTable } from "./AuditPagesInputTable";
 import { StyledLabeledInput } from "./StyledLabeledInput";
 import { Card } from "./Card";
+import { TbAlertTriangle } from "react-icons/tb";
 import style from "./AuditPagesInput.module.scss";
 
+const URL_SOFT_LIMIT = 10_000;
+
 interface Page {
   url: string;
   type: "html" | "pdf";
@@ -129,6 +132,18 @@ export const AuditPagesInput: React.FC<ChildProps> = ({
         }));
       }
 
+      // Soft limit warning for large URL counts
+      const totalAfterAdd = pages.length + newPages.length;
+      if (newPages.length > 0 && totalAfterAdd >= URL_SOFT_LIMIT) {
+        const proceed = window.confirm(
+          `Adding these URLs will bring your total to ${totalAfterAdd.toLocaleString()} URLs. Large audits take significantly longer to scan. Continue?`
+        );
+        if (!proceed) {
+          e.target.value = "";
+          return;
+        }
+      }
+
       // Add all valid URLs to the pages
       if (newPages.length > 0) {
         setPages(prev => [...prev, ...newPages]);
@@ -390,6 +405,14 @@ export const AuditPagesInput: React.FC<ChildProps> = ({
             isShared={isShared}
             updatePageType={updatePageType}
           />
+          {pages.length >= URL_SOFT_LIMIT && (
+            <Card variant="short-error">
+              <TbAlertTriangle className="icon-small" />
+              <div className="font-small">
+                <b>Large audit:</b> This audit has {pages.length.toLocaleString()} URLs. Large audits take significantly longer to scan.
+              </div>
+            </Card>
+          )}
           {!isShared && (
             <Card variant="inset-light">
               <h3>Add URLs to Scan</h3>

apps/frontend/src/components/AuditRemoteCsvInput.tsx

@@ -7,8 +7,11 @@ import { useDebouncedCallback } from "use-debounce";
 
 import * as API from "aws-amplify/api";
 import { MdCheckCircle, MdError } from "react-icons/md";
+import { TbAlertTriangle } from "react-icons/tb";
 import { AuditPagesInputTable } from "./AuditPagesInputTable";
 
+const URL_SOFT_LIMIT = 10_000;
+
 interface Page {
   url: string;
   type: "html" | "pdf";
@@ -162,6 +165,14 @@ export const AuditRemoteCsvInput: React.FC<ChildProps> = ({ csvUrl, setCsvUrl, v
         {validCsv &&
           <Card variant="short-success"><MdCheckCircle className="icon-small" /><div className="font-small"><b>CSV Found!</b></div></Card>
         }
+        {validCsv && pages.length >= URL_SOFT_LIMIT && (
+          <Card variant="short-error">
+            <TbAlertTriangle className="icon-small" />
+            <div className="font-small">
+              <b>Large audit:</b> This CSV contains {pages.length.toLocaleString()} URLs. Large audits take significantly longer to scan.
+            </div>
+          </Card>
+        )}
         {pages.length > 0 &&
           <AuditPagesInputTable
             pages={pages}

apps/frontend/src/routes/Audit.tsx

@@ -299,7 +299,15 @@ export const Audit = () => {
     }
   };
 
+  const URL_SOFT_LIMIT = 10_000;
+
   const updateAuditInterval = async (newValue: string) => {
+    if (newValue === "Daily" && pages.length >= URL_SOFT_LIMIT) {
+      const proceed = window.confirm(
+        `Setting daily scans for an audit with ${pages.length.toLocaleString()} URLs will use significant resources. Continue?`
+      );
+      if (!proceed) return;
+    }
     console.log("Updating audit interval:", newValue);
     const updatedInterval = await apiClient.graphql({
       query: `mutation ($audit_id:uuid, $interval: String) {

apps/frontend/src/routes/BuildAudit.tsx

@@ -1,5 +1,6 @@
 import React, { useState, FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { useUser } from "../queries";
 import * as API from "aws-amplify/api";
 import {
@@ -13,7 +14,7 @@ import { createLog } from "#src/utils/createLog.ts";
 import { StyledLabeledInput } from "#src/components/StyledLabeledInput.tsx";
 import { Card } from "#src/components/Card.tsx";
 import { CgOptions } from "react-icons/cg";
-import { TbList, TbMail } from "react-icons/tb";
+import { TbAlertTriangle, TbMail } from "react-icons/tb";
 import { StyledButton } from "#src/components/StyledButton.tsx";
 import { LuClipboardCheck, LuClipboardPaste, LuImport } from "react-icons/lu";
 import styles from "./BuildAudit.module.scss";
@@ -27,6 +28,10 @@ interface Page {
   type: "html" | "pdf";
 }
 
+const apiClient = API.generateClient();
+const URL_SOFT_LIMIT = 10_000;
+const AUDIT_SOFT_LIMIT = 10_000;
+
 export const BuildAudit = () => {
   const navigate = useNavigate();
   const { setAnnounceMessage } = useGlobalStore();
@@ -38,9 +43,20 @@ export const BuildAudit = () => {
   const [auditNameValid, setAuditNameValid] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [isSavingAndRunning, setIsSavingAndRunning] = useState(false);
+  const [scanFrequency, setScanFrequency] = useState("Manually");
 
   const [validRemoteCsv, setValidRemoteCsv] = useState(false);
 
+  const { data: auditCount } = useQuery({
+    queryKey: ["auditCount"],
+    queryFn: async () => {
+      const result = (await apiClient.graphql({
+        query: `{ audits_aggregate(where: {interval: {_neq: "Quick Scan"}}) { aggregate { count } } }`,
+      })) as any;
+      return result?.data?.audits_aggregate?.aggregate?.count ?? 0;
+    },
+  });
+
   const defaultEmailList = {
     emails: [
       /* {
@@ -152,6 +168,14 @@ export const BuildAudit = () => {
       {/* <Link to="..">← Go Back</Link>
        */}
       <h1 className="initial-focus-element">Audit Builder</h1>
+      {auditCount >= AUDIT_SOFT_LIMIT && (
+        <Card variant="short-error">
+          <TbAlertTriangle className="icon-small" />
+          <div className="font-small">
+            <b>Large number of audits:</b> Your account has {auditCount.toLocaleString()} audits. Having a large number of audits may affect system performance.
+          </div>
+        </Card>
+      )}
       <form onSubmit={saveAndRunAudit}>
         <div className="cards-38-62">
           <Card variant="light">
@@ -178,15 +202,20 @@ export const BuildAudit = () => {
                 id="scanFrequency"
                 name="scanFrequency"
                 className={styles["input-element"]}
+                value={scanFrequency}
+                onChange={(e) => setScanFrequency(e.target.value)}
               >
                 <option>Manually</option>
                 <option>Daily</option>
                 <option>Weekly</option>
                 <option>Monthly</option>
-                {/* 
-              <option>On Monitor Update</option> */}
               </select>
             </StyledLabeledInput>
+            {scanFrequency === "Daily" && pages.length >= URL_SOFT_LIMIT && (
+              <p className="font-small" style={{ color: "#b45309", display: "flex", alignItems: "center", gap: "4px" }}>
+                <TbAlertTriangle /> Daily scans for audits with {pages.length.toLocaleString()} URLs will use significant resources.
+              </p>
+            )}
           </Card>
           <Card variant="light">
             <h2>