chore: add agent selector support in health check creation

[yashmehrotra]

Fixes: #2831

Summary by CodeRabbit

• New Features
  • Group canary checks by agent for improved organization and visibility.
  • Agent multi-select added to the canary spec editor for configuring multiple agents.
  • New "Agent" option in canary filters with its own icon and label.
  • Tabs and filtering now include a special "local" tab to show checks without an assigned agent.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
aws-preview	Ready	Preview	Feb 10, 2026 6:37am
flanksource-ui	Ready	Preview	Feb 10, 2026 6:37am

[coderabbitai]

Walkthrough

Adds agent-based UI and behavior: a new "agent" group option in the group-by dropdown, grouping logic for checks by agent (including "local"), a FormikAgentSelector component that fetches agent names and a conditional Agents field in the canary spec form, and agent-aware tab filtering including a "local" tab.

Changes

Cohort / File(s)	Summary
Agent Grouping UI & Options src/components/Canary/CanaryFilters/TopBar/ChecksGroupByDropdown.tsx	Added a new "agent" group option entry (id, name, icon HiOutlineServerStack, description, value, labelValue, key).
Agent Grouping Logic src/components/Canary/grouping.ts	Inserted a new branch to group checks by agent (check.agents?.name or "local"), executed before existing name-based grouping.
Agent Selector Component src/components/Forms/Formik/FormikAgentSelector.tsx	New Formik-connected multi-select component using useAllAgentNamesQuery to fetch agent names and sync selected agent names to Formik state.
Form Integration src/components/Forms/SpecEditorForm.tsx	Conditionally renders FormikAgentSelector for canary resources, bound to spec.agentSelector with label "Agents".
Tab Filtering by Agent src/components/Canary/CanaryTabs.tsx	When tabBy === "agent_id", builds tabs keyed by agent name and optionally includes a "local" tab for checks without an agent; merges these agent tabs with default tabs.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Selector as FormikAgentSelector
  participant API as AgentNamesAPI
  participant Formik as Formik State
  participant Filters as Filter State
  participant Grouping as grouping.ts
  participant Tabs as CanaryTabs
  participant Checks as ChecksList

  User->>Selector: open selector / choose agents
  Selector->>API: fetch agent names
  API-->>Selector: return names
  Selector->>Formik: update spec.agentSelector
  Formik->>Filters: apply agent filter
  Filters->>Grouping: request grouping by "agent"
  Grouping->>Checks: group checks by agent name or "local"
  Grouping-->>Tabs: produce tabs data
  Tabs->>Checks: render filtered/selected checks

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 40.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: adding agent selector support in health check creation, which directly aligns with the main objective of the PR.
Linked Issues check	✅ Passed	All changes implement the linked issue #2831 requirements: FormikAgentSelector enables agent selection, ChecksGroupByDropdown and grouping.ts support grouping by agent, and CanaryTabs handles agent-based filtering and tab display.
Out of Scope Changes check	✅ Passed	All changes are directly related to agent selector support: component creation, grouping logic, UI integration, and tab filtering—nothing is out of scope.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch agent-selector

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

src/components/Forms/Formik/FormikAgentSelector.tsx (3)

45-69: Missing Formik validation error display.

The component uses useField but destructures only [field, , helpers], discarding meta. If any validation is attached to this field, errors won't be visible to the user.

Proposed fix

- const [field, , helpers] = useField<string[]>({
+ const [field, meta, helpers] = useField<string[]>({
    name,
    type: "text"
  });

Then after the <p> helper text:

+      {meta.touched && meta.error && (
+        <p className="mt-1 text-xs text-red-500">{meta.error}</p>
+      )}

---

47-47: Label is not associated with the select control.

The <label> has no htmlFor (or wrapping relationship with a native input), so it doesn't programmatically link to the CreatableSelect. Since react-select supports inputId, you can wire them together for better accessibility.

Proposed fix

-      <label className="form-label">{label}</label>
+      <label htmlFor={`${name}-input`} className="form-label">{label}</label>
       <CreatableSelect
         isMulti
+        inputId={`${name}-input`}

---

25-34: Consider handling the error state from the query.

useAllAgentNamesQuery may fail, but only isLoading is destructured. If the fetch errors out, the user sees an empty dropdown with no feedback.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}