Skip to content

On-Call Groups – Frontend

Technical documentation for the On-call groups frontend in Alan Home (eu-home-app). Intended for developers debugging or developing on the feature.

Routes and pages

Route Component Purpose
/on-call OncallRedirect Redirects to the first available group (user's group or first in list)
/on-call/:slugOrId OncallRoot Group selector (My groups / Favorites / Other) and tab layout
/on-call/:slugOrId (tabs) OncallScheduleTab, OncallRosterTab, OncallGroupSettings Schedule view, roster management, group settings

Tabs are rendered via Outlet; the selected group is identified by slugOrId (UUID or slug).

Data layer

Hooks (utils/oncall.ts)

  • Queries
  • useOncallGroups() – list all on-call groups
  • useOncallGroup(oncallGroupId) – single group
  • useOncallGroupsNextShifts(alanerId) – next shifts for an alaner
  • useOncallGroupShifts(oncallGroupId, startDate, endDate) – shifts for a group in a date range
  • Mutations
  • useOncallGroupMutation(oncallGroupId) – create (POST) or update (PATCH) a group
  • useOncallGroupShiftMutation(oncallGroupId) – update shift load (PATCH)
  • useAddToOncallGroupShiftMutation(oncallGroupId) – add alaner to a shift
  • useRemoveFromOncallGroupShiftMutation(oncallGroupId) – remove alaner from a shift

Types

Local interfaces in oncall.ts: OncallGroup, SmartGroup, OncallGroupShift, OncallGroupNextShift, OncallGroupShiftParams, OncallGroupParams. These mirror the API; migration to OpenAPI-generated types is in progress.

UI behaviour

  • Group list: Groups are split into "My groups", "Favorites", and "Other groups" using getAlanerGroups() (membership via currentAlaner.oncall_groups or roster smart group). Favorites are stored in localStorage (LOCAL_STORAGE_FAVORITE_ONCALL).
  • Schedule tab: Shows shifts in a date range; allows updating load and (where permitted) adding/removing alaners from shifts.
  • Roster tab: Manages roster (membership); integrates with user lifecycle / role grants where applicable.
  • Settings tab: Edits group configuration (rotation, strategy, Slack, calendar, etc.) via useOncallGroupMutation.

Permissions

Visibility and actions use useAlanerPermission and backend ABAC. Only users with the right permissions can edit groups, roster, or shifts. For the list of relevant permissions and ABAC policies, see the On-Call Groups backend documentation, User Lifecycle – Role Management, or the backend code.