Polish the create and link to table

src/app/[orgId]/settings/resources/proxy/[niceId]/general/page.tsx

@@ -583,6 +583,7 @@ export default function GeneralForm() {
                     <UptimeAlertSection
                         orgId={resource.orgId}
                         resourceId={resource.resourceId}
+                        startingName={resource.name}
                     />
                 )}
                 <SettingsSection>

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -117,6 +117,7 @@ export default function GeneralPage() {
                 <UptimeAlertSection
                     orgId={site.orgId}
                     siteId={site.siteId}
+                    startingName={site.name}
                 />
             )}
             <SettingsSection>

src/components/AlertingRulesTable.tsx

@@ -31,6 +31,8 @@ import { useDebouncedCallback } from "use-debounce";
 
 type AlertingRulesTableProps = {
     orgId: string;
+    siteId?: number;
+    resourceId?: number;
 };
 
 type AlertRuleRow = {
@@ -99,7 +101,7 @@ function triggerLabel(
     }
 }
 
-export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
+export default function AlertingRulesTable({ orgId, siteId, resourceId }: AlertingRulesTableProps) {
     const router = useRouter();
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
@@ -127,7 +129,7 @@ export default function AlertingRulesTable({ orgId }: AlertingRulesTableProps) {
         isLoading,
         refetch,
         isRefetching
-    } = useQuery(orgQueries.alertRules({ orgId, limit: pageSize, offset: pageIndex * pageSize, query }));
+    } = useQuery(orgQueries.alertRules({ orgId, limit: pageSize, offset: pageIndex * pageSize, query, siteId, resourceId }));
 
     const rows = data?.alertRules ?? [];
     const total = data?.pagination.total ?? 0;

src/components/UptimeAlertSection.tsx

@@ -35,6 +35,7 @@ import { orgQueries } from "@app/lib/queries";
 interface UptimeAlertSectionProps {
     orgId: string;
     siteId?: number;
+    startingName?: string;
     resourceId?: number;
     days?: number;
 }
@@ -42,6 +43,7 @@ interface UptimeAlertSectionProps {
 export default function UptimeAlertSection({
     orgId,
     siteId,
+    startingName,
     resourceId,
     days = 90
 }: UptimeAlertSectionProps) {
@@ -49,7 +51,7 @@ export default function UptimeAlertSection({
     const queryClient = useQueryClient();
 
     const [open, setOpen] = useState(false);
-    const [name, setName] = useState("Uptime Alert");
+    const [name, setName] = useState(`${siteId ? "Site" : "Resource"} ${startingName} Alert`);
     const [userTags, setUserTags] = useState<Tag[]>([]);
     const [roleTags, setRoleTags] = useState<Tag[]>([]);
     const [emailTags, setEmailTags] = useState<Tag[]>([]);
@@ -156,7 +158,7 @@ export default function UptimeAlertSection({
 
     const alertButton = alertRulesLoading ? null : hasRules ? (
         <Button variant="outline" size="sm" asChild>
-            <Link href={`/${orgId}/settings/alerting`}>
+            <Link href={`/${orgId}/settings/alerting?siteId=${siteId}&resourceId=${resourceId}`}>
                 <BellRing className="size-4 mr-2" />
                 View Alerts
             </Link>
@@ -297,4 +299,4 @@ export default function UptimeAlertSection({
             </Credenza>
         </>
     );
-}
+}

src/lib/queries.ts

@@ -260,20 +260,26 @@ export const orgQueries = {
         orgId,
         limit = 20,
         offset = 0,
-        query
+        query,
+        siteId,
+        resourceId
     }: {
         orgId: string;
         limit?: number;
         offset?: number;
         query?: string;
+        siteId?: number;
+        resourceId?: number;
     }) =>
         queryOptions({
-            queryKey: ["ORG", orgId, "ALERT_RULES", { limit, offset, query }] as const,
+            queryKey: ["ORG", orgId, "ALERT_RULES", { limit, offset, query, siteId, resourceId }] as const,
             queryFn: async ({ signal, meta }) => {
                 const sp = new URLSearchParams();
                 sp.set("limit", String(limit));
                 sp.set("offset", String(offset));
                 if (query) sp.set("query", query);
+                if (siteId != null) sp.set("siteId", String(siteId));
+                if (resourceId != null) sp.set("resourceId", String(resourceId));
                 const res = await meta!.api.get<
                     AxiosResponse<ListAlertRulesResponse>
                 >(`/org/${orgId}/alert-rules?${sp.toString()}`, { signal });