User Notifications Page

Page Overview

The User Notifications page displays a chronological list of notifications for the currently logged-in user. This page serves as a notification feed where users can view various types of alerts and updates related to their activities within the system. The notifications include build status updates from continuous integration systems, tracker item assignments and removals, and other project-related activities that involve the user.

The page is organized into two main sections: a filtering panel on the left side and the main notifications list on the right. The filtering panel allows users to narrow down their notifications based on various criteria such as who posted the notification, the item section type, reference IDs, comments, and projects. Users can apply filters to find specific notifications more easily, and they can also sort the results by different fields including notification date, posted by, item section, item reference, and project.

The main content area displays notifications in a feed-like format, with each notification showing the avatar and name of the person or system that generated it, along with a timestamp and the project context. Each notification includes a brief description of the action that occurred, such as build failures, tracker item assignments, or user removals from items. Links are provided within notifications to allow users to navigate directly to the relevant tracker items or other resources mentioned in the notification.

The page includes pagination controls both above and below the notifications list, allowing users to navigate through multiple pages of notifications and adjust the number of items displayed per page. The interface maintains consistency with the overall system design while providing efficient access to important user-specific information.

UI Elements

Page Header

  • User Name and Page Title: Located at the top of the page, displays the user's name followed by "Notifications" to indicate the current page context
  • Active Status Badge: Positioned in the upper right of the header, shows a green "active" badge indicating the user's current status
  • User Navigation Dropdown: Bell icon button in the header that opens a dropdown menu with user-related navigation options including Home, To-Do, Notifications, My Reports, Edit Profile, SSH Keys, and Change Password

Left Sidebar – Filter Panel

  • Filter Criteria Section: Collapsible panel showing current sort criteria ("Sort By: Notification Date DESC")
  • Apply Button: Green button to apply selected filter criteria
  • Reset Button: Gray button to clear all applied filters
  • Sort Button: Dropdown button with caret for accessing sorting options
  • Main Fields Section: Expandable panel containing filter input fields
  • Posted By Filter: Text input field for filtering notifications by the person who posted them
  • Item Section Filter: Dropdown menu for selecting notification types (Any, Forum, Trackeritem, Build, Project)
  • Item Reference Id Filter: Text input field for filtering by specific item reference numbers
  • Comment Filter: Text input field for filtering notifications containing specific comment text
  • Project Filter: Text input field for filtering notifications by project name

Main Content Area

  • Notifications Heading: "Notifications" title displayed prominently above the notification list
  • Pagination Controls (Top): Located above the notifications list, showing page navigation with left/right arrows, current page indicator, and page size dropdown (10, 20, 50, 100 options)
  • Notifications List: Central feed displaying individual notification items in chronological order
  • Individual Notification Items: Each containing:
    • User avatar (small circular image on the left)
    • User/system name
    • Timestamp and project context
    • Notification message with potential links to tracker items
    • Horizontal separator line between notifications
  • Pagination Controls (Bottom): Duplicate of the top pagination controls, positioned below the notifications list for easy access after scrolling through the content