Skip to content

perf(ui): lazily render the alert list with Html.Lazy and Html.Keyed #5357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wbh1 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

perf(ui): lazily render the alert list with Html.Lazy and Html.Keyed #5357

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a63b871
perf(ui): lazily render the alert list with Html.Lazy and Html.Keyed
wbh1 Jul 1, 2026
526506d
perf(ui): drop group-level keyed rendering without a unique key
wbh1 Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions ui/app/src/Views/AlertList/Views.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Dict
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Keyed
import Html.Lazy exposing (lazy4)
import Set exposing (Set)
import Types exposing (Msg(..))
import Utils.Filter exposing (Filter)
Expand Down Expand Up @@ -83,10 +85,15 @@ view { alertGroups, groupBar, filterBar, receiverBar, tab, activeId, activeGroup
[ i [ class "fa fa-plus mr-3" ] [], text "Expand all groups" ]
)
]
, Utils.Views.apiData (defaultAlertGroups activeId activeGroups expandAll) alertGroups
, lazy4 alertGroupsView activeId activeGroups expandAll alertGroups
]


alertGroupsView : Maybe String -> Set Int -> Bool -> ApiData (List AlertGroup) -> Html Msg
alertGroupsView activeId activeGroups expandAll alertGroups =
Utils.Views.apiData (defaultAlertGroups activeId activeGroups expandAll) alertGroups


defaultAlertGroups : Maybe String -> Set Int -> Bool -> List AlertGroup -> Html Msg
defaultAlertGroups activeId activeGroups expandAll groups =
case groups of
Expand Down Expand Up @@ -178,7 +185,8 @@ alertGroup activeId activeGroups receiver labels routeLabels alerts groupId expa
div []
[ div [ class "mb-3" ] (expandButton :: labels_ ++ routeLabels_ ++ alertEl)
, if groupActive then
ul [ class "list-group mb-0" ] (List.map (AlertView.view labels activeId) alerts)
Html.Keyed.ul [ class "list-group mb-0" ]
(List.map (\alert -> ( alert.fingerprint, AlertView.view labels activeId alert )) alerts)

else
text ""
Expand Down
Loading