You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Refactors alert UI pages by moving listing, details, create, and edit logic into reusable hooks and smaller components while keeping the existing OpenMetadata/Collate-side UI behavior unchanged.
Extracts observability alert listing state/actions into useObservabilityAlerts with smaller header, table, and row-action components.
Extracts add/edit alert form state/actions into useObservabilityAlertForm, resource/template hooks, and reusable form components.
Extracts alert details state/actions into useAlertDetailsPage, permission hooks, and reusable details content components.
Keeps alert source/filter/action typing focused on the UI contracts consumed by the reusable components.
Leaves the AskCollate AI-mode visual redesign for alerts to a separate PR.
Type of change:
Improvement
High-level design:
The refactor keeps the existing route/page entry points intact while moving reusable alert page logic into hooks. Page components now compose smaller presentational components with hook outputs, making the alert UI easier to reuse and customize in future AskCollate AI-mode flows without duplicating fetch, permission, pagination, save, update, owner, description, and delete behavior.
Tests:
Use cases covered
Observability alerts list renders data, empty state, create action, edit/delete permissions, pagination, and delete modal behavior.
Add/edit observability alert page renders breadcrumbs, form sections, source/filter/action fields, destination fields, save/cancel actions, and extension points.
This PR references the Collate tracking ticket using Ref only.
For JSON Schema changes: Not applicable.
For UI visual changes: Not applicable. This PR is a structural refactor with no intended visual behavior change.
I have added tests (unit / integration / Playwright as applicable) and listed them above.
Summary by Gitar
Refactored UI logic:
Split alert details, list, and form logic into custom hooks useAlertDetailsPage, useObservabilityAlerts, and useObservabilityAlertForm to improve maintainability and reuse.
Decoupled presentational logic by introducing focused components like AlertDetailsContent and ObservabilityAlertsTable.
Fixed UI behavior:
Enabled proper re-fetching of alert details in AlertDetailsPage when the fqn prop changes by updating the hook dependencies.
Added unit test in AlertDetailsPage.test.tsx to verify correct data refetching on fqn updates.
This will update automatically on new commits.
Greptile Summary
This PR refactors the observability alert UI pages by extracting listing, create/edit form, and details logic into reusable hooks (useObservabilityAlerts, useObservabilityAlertForm, useAlertDetailsPage) and smaller presentational components, while keeping the existing route entry-points and visible behavior identical.
Three new hook families are introduced under their respective page directories — each hook encapsulates data-fetching, permissions, pagination, and action handlers that were previously inlined in the page component.
Three page components (ObservabilityAlertsPage, AddObservabilityPage, AlertDetailsPage) now simply call a hook and spread the result into a single presentational child component.
Previously flagged issues (stale fqn on prop change, as unknown as double-cast, unused viewPermission dep) are resolved by the useCallback/[fqn] dep pattern, explicit enum mapping in ObservabilityAlertForm.utils.ts, and a cleaned-up tabItems memo.
Confidence Score: 5/5
Safe to merge — the change is a pure structural refactor with no functional modifications; all existing alert page behavior is preserved through thin shell components that compose the extracted hooks.
The three previously reported bugs (stale fqn on prop change, double-cast type suppression, spurious viewPermission memo dep) are all addressed. The remaining findings are exhaustive-deps omissions in useObservabilityAlerts that have no observable runtime impact given the stability of the affected dependencies.
openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/hooks/useObservabilityAlerts.ts has two useEffect dependency arrays that are missing their respective useCallback references.
Core hook for alert details; previously reported stale-fqn bug is fixed — fetchAlertDetails and fetchAlertEventDiagnosticCounts are now useCallbacks with [fqn] deps so the effect re-runs on fqn changes. breadcrumb and callback deps also corrected.
Extracts permission fetching into its own hook using the ref-escape-hatch pattern; fetchResourcePermission re-runs when fqn changes, cleanly exposing a loading flag to the caller.
Extracts all listing state/actions; fetchAlerts is missing from the second useEffect's dependency array, which will trigger react-hooks/exhaustive-deps warnings even though the practical impact is minimal.
Replaces the monolithic AddObservabilityPage logic with a composable hook; correctly delegates to useObservabilityAlertResources and useObservabilityAlertTemplates, and handles both fqn-prop and route-param sourcing.
Resolves the previously reported double-cast issue with explicit enum-to-enum mapping functions; all EventFilterRule fields are mapped exhaustively with optional spreading.
Adds a regression test that re-renders with a different fqn prop and asserts that both API calls fire with the new fqn, directly covering the previously reported stale-data bug.
Extracted table rendering with new onViewAlert support for Collate AI-mode; falls back to Link navigation when onViewAlert is not provided, preserving existing behavior.
Features/ContextCenterPermission.spec.ts › user with deleteAll permission can see delete action but not restore action on an archived document, and can delete it (shard 2, 2 retries)
shah-harshit
changed the title
refactor(ui): split alert page logic into hooks
refactor(ui): split alerts into reusable hooks and components
Jul 3, 2026
Refactors observability alert logic into reusable hooks and components, improving maintainability while fixing a detail refetching issue upon FQN changes. Addresses the ComponentProps casting finding by updating the filter-item prop type checks.
✅ 1 resolved✅ Quality: as ComponentProps cast suppresses filter-item prop type checks
📄 openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/components/ObservabilityAlertFormFields.tsx:46-49📄 openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/components/ObservabilityAlertFormFields.tsx:84-88
In ObservabilityAlertFormFields.tsx, observabilityFormFiltersItemProps is assembled from the locally-narrowed containerEntities/supportedFilters types and then cast with as ComponentProps<typeof ObservabilityFormFiltersItem> before being spread into <ObservabilityFormFiltersItem />. If the component's declared prop types are stricter than the local ObservabilityAlertFormFieldsProps shapes (e.g. supportedFilters expects the full generated EventFilterRule shape rather than the narrowed local one), the cast will silently suppress a genuine type mismatch that TypeScript would otherwise catch. Prefer passing the props inline (<ObservabilityFormFiltersItem containerEntities={containerEntities} supportedFilters={supportedFilters} />) so the compiler verifies the shapes at the call site; if that surfaces an incompatibility, reconcile the types rather than casting.
Options
Display: compact → Showing less information.
Comment with these commands to change the behavior for this request:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
safe to testAdd this label to run secure Github workflows on PRsskip-pr-checksBypass PR metadata validation checkUIUI specific issues
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
shah-harshit
added
UI
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
Describe your changes:
Ref: openmetadata-collate#4839
Refactors alert UI pages by moving listing, details, create, and edit logic into reusable hooks and smaller components while keeping the existing OpenMetadata/Collate-side UI behavior unchanged.
useObservabilityAlertswith smaller header, table, and row-action components.useObservabilityAlertForm, resource/template hooks, and reusable form components.useAlertDetailsPage, permission hooks, and reusable details content components.Type of change:
High-level design:
The refactor keeps the existing route/page entry points intact while moving reusable alert page logic into hooks. Page components now compose smaller presentational components with hook outputs, making the alert UI easier to reuse and customize in future AskCollate AI-mode flows without duplicating fetch, permission, pagination, save, update, owner, description, and delete behavior.
Tests:
Use cases covered
Unit tests
src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.test.tsxsrc/pages/AddObservabilityPage/AddObservabilityPage.test.tsxsrc/pages/AlertDetailsPage/AlertDetailsPage.test.tsxsrc/components/Alerts/AlertFormSourceItem/AlertFormSourceItem.test.tsxsrc/components/Alerts/ObservabilityFormFiltersItem/ObservabilityFormFiltersItem.test.tsxBackend integration tests
Ingestion integration tests
Playwright (UI) tests
Manual testing performed
./node_modules/.bin/jest src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.test.tsx src/pages/AddObservabilityPage/AddObservabilityPage.test.tsx src/pages/AlertDetailsPage/AlertDetailsPage.test.tsx src/components/Alerts/AlertFormSourceItem/AlertFormSourceItem.test.tsx src/components/Alerts/ObservabilityFormFiltersItem/ObservabilityFormFiltersItem.test.tsx --runInBand --silent--max-warnings=0.git diff --check.UI screen recording / screenshots:
Not applicable. Structural UI refactor with no intended visual behavior change.
Checklist:
Refonly.Summary by Gitar
useAlertDetailsPage,useObservabilityAlerts, anduseObservabilityAlertFormto improve maintainability and reuse.AlertDetailsContentandObservabilityAlertsTable.AlertDetailsPagewhen thefqnprop changes by updating the hook dependencies.AlertDetailsPage.test.tsxto verify correct data refetching onfqnupdates.This will update automatically on new commits.
Greptile Summary
This PR refactors the observability alert UI pages by extracting listing, create/edit form, and details logic into reusable hooks (
useObservabilityAlerts,useObservabilityAlertForm,useAlertDetailsPage) and smaller presentational components, while keeping the existing route entry-points and visible behavior identical.ObservabilityAlertsPage,AddObservabilityPage,AlertDetailsPage) now simply call a hook and spread the result into a single presentational child component.fqnon prop change,as unknown asdouble-cast, unusedviewPermissiondep) are resolved by theuseCallback/[fqn]dep pattern, explicit enum mapping inObservabilityAlertForm.utils.ts, and a cleaned-uptabItemsmemo.Confidence Score: 5/5
Safe to merge — the change is a pure structural refactor with no functional modifications; all existing alert page behavior is preserved through thin shell components that compose the extracted hooks.
The three previously reported bugs (stale fqn on prop change, double-cast type suppression, spurious viewPermission memo dep) are all addressed. The remaining findings are exhaustive-deps omissions in useObservabilityAlerts that have no observable runtime impact given the stability of the affected dependencies.
openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/hooks/useObservabilityAlerts.ts has two useEffect dependency arrays that are missing their respective useCallback references.
Important Files Changed
Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[ObservabilityAlertsPage] --> B[useObservabilityAlerts] A --> C[ObservabilityAlertsHeader] A --> D[ObservabilityAlertsTable] D --> E[ObservabilityAlertActions] B --> F[usePaging] B --> G[usePermissionProvider] B --> H[useLimitStore] I[AddObservabilityPage] --> J[useObservabilityAlertForm] I --> K[ObservabilityAlertForm] K --> L[ObservabilityAlertFormFields] J --> M[useObservabilityAlertResources] J --> N[useObservabilityAlertTemplates] M --> O[ObservabilityAlertForm.utils: toObservabilityFilterResourceDescriptor] P[AlertDetailsPage] --> Q[useAlertDetailsPage] P --> R[AlertDetailsContent] Q --> S[useAlertDetailsPermissions] Q --> T[observabilityAPI / alertsAPI]%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A[ObservabilityAlertsPage] --> B[useObservabilityAlerts] A --> C[ObservabilityAlertsHeader] A --> D[ObservabilityAlertsTable] D --> E[ObservabilityAlertActions] B --> F[usePaging] B --> G[usePermissionProvider] B --> H[useLimitStore] I[AddObservabilityPage] --> J[useObservabilityAlertForm] I --> K[ObservabilityAlertForm] K --> L[ObservabilityAlertFormFields] J --> M[useObservabilityAlertResources] J --> N[useObservabilityAlertTemplates] M --> O[ObservabilityAlertForm.utils: toObservabilityFilterResourceDescriptor] P[AlertDetailsPage] --> Q[useAlertDetailsPage] P --> R[AlertDetailsContent] Q --> S[useAlertDetailsPermissions] Q --> T[observabilityAPI / alertsAPI]Reviews (7): Last reviewed commit: "fix(ui): refetch alert details on fqn ch..." | Re-trigger Greptile