> For the complete documentation index, see [llms.txt](https://asus-isg-aidc.gitbook.io/guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asus-isg-aidc.gitbook.io/guide/latest/portal/notification.md).

# Notification

| Developer | Last modified |
| --------- | ------------- |
| AIDC Team | 2026/08/20    |

## 1. Feature Overview

The system provides two ways to receive and manage notifications: **Notification Panel** and **Notification Center**. These two features help you stay informed about important events and status updates in the system.

### Notification Panel (Quick View)

![Notification Panel](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/notification-panel.png)

The Notification Panel is located in the bell icon at the top of the page, allowing you to quickly view recent notifications without leaving the current page.

**Main Purposes**:

* Quickly view recent notifications
* Receive instant notification alerts
* Click notifications to quickly jump to related pages
* View unread notification count

**Common Use Cases**:

* When you see a red number on the bell icon, it indicates new unread notifications
* Click the bell to quickly see what notifications you have
* Click on notifications of interest to jump directly to related pages
* Mark unnecessary notifications as read and continue working

### Notification Center (Complete Management)

The Notification Center is a dedicated full page that provides historical records of all notifications and advanced management features.

**Main Purposes**:

* View all historical notifications
* Search for specific notifications
* Filter notifications by category, status, and time
* Batch mark multiple notifications as read

**Common Use Cases**:

* Need to find notification records for a specific task
* Want to view all notifications from the past week
* Need to process multiple unread notifications at once
* Want to understand the complete history of system events

***

## 2. Notification Categories

Notifications in the system are divided into five categories, each with different icons and colors:

| Category         | Icon Color                                                                                                        | Description                                                      | Clickable                             |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------- |
| **Deployment**   | ![Deployment Icon](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/deployment-icon.png)   | Deployment task status updates (success, failure, timeout, etc.) | Yes, jumps to deployment details page |
| **ImageBuilder** | Purple                                                                                                            | Image build/processing status updates                            | Yes, jumps to image management        |
| **Marketplace**  | ![Marketplace Icon](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/marketplace-icon.png) | Software package or resource update notifications                | Yes, jumps to marketplace page        |
| **System**       | ![System Icon](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/system-icon.png)           | System maintenance, update notifications                         | No, only marks as read                |
| **Alert**        | Pink                                                                                                              | Important warnings requiring attention                           | No, only marks as read                |

**Tips**:

* Blue, purple, and yellow notifications can be clicked to jump to related pages
* Orange and pink notifications can only be marked as read, cannot jump

***

## 3. How to Use the Notification Panel

### Opening the Notification Panel

1. At the top right of any page, find the bell icon (🔔)
2. If there are unread notifications, a red number will appear next to the bell (such as "3")
3. Click the bell icon, and the notification panel will expand from above
4. Click the bell again or click outside the panel to close it

### Notification Panel Interface Description

When you open the notification panel, you will see:

**Top Section**

* Title displays "Notifications"
* Bottom has a "View All" button to enter the full notification center

![View All](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/view-all-btn.png)

**Notification List**

* Displays the most recent notifications
* Newest notifications appear at the top
* Each notification includes:
  * Icon: Displays the colored icon for the notification category
  * Category label: Displays notification type (such as "Deployment", "System")
  * Title: Main content of the notification
  * Time: How long ago it was received (such as "2 minutes ago", "1 hour ago")
  * Detailed message: Supplementary description of the notification

**Unread Notification Display**

* Unread notifications have a more prominent background color

***

## 4. Notification Panel Operations

### Operation 1: View New Notifications

**Scenario**: You notice a red number appears next to the bell icon

**Steps**:

1. Click the bell icon at the top of the page
2. The notification panel will expand, showing recent notifications
3. View notification content:
   * Title tells you what happened
   * Time tells you when it occurred
   * Detailed message provides more information

**Closing the Panel**:

* Click the bell icon again
* Or click anywhere outside the panel

***

### Operation 2: Click Notification to Jump to Related Page

![Jump to Related Page](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/clickable-msg.png)

**Scenario**: You receive a deployment completion notification and want to view detailed results

**Steps**:

1. Open the notification panel
2. Find that deployment notification (blue icon)
3. Click the notification item
4. The system will:
   * Automatically mark that notification as read
   * Close the notification panel
   * Jump to the deployment details page

**Applicable Notification Types**:

* Deployment notifications (blue) → Jump to deployment details
* Image notifications (purple) → Jump to image management
* Marketplace notifications (yellow) → Jump to marketplace page

***

### Operation 3: Mark System or Alert Notifications as Read

**Scenario**: You receive a system maintenance notification that you just need to be aware of

**Steps**:

1. Open the notification panel
2. Find that system notification (orange icon) or alert notification (pink icon)
3. Click the notification item
4. That notification will be marked as read
5. Notification background color changes to read status
6. Panel remains open, you can continue viewing other notifications

**Description**:

* System and alert notifications do not jump to pages
* Just let you know relevant information
* Marks as read after clicking

***

### Operation 4: Enter the Full Notification Center

**Scenario**: You want to view more historical notifications or perform advanced management

**Steps**:

1. Open the notification panel
2. Find the "View All" button at the bottom of the panel
3. Click the button
4. The system will:
   * Close the notification panel
   * Open the full notification center page

![Navigate Notification Center](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/goto-notification-center.png)

***

## 5. How to Use the Notification Center

### Entering the Notification Center Page

**Method 1: From Notification Panel**

1. Click the bell icon to open the notification panel
2. Click the "View All" button at the bottom of the panel

**Method 2: From Navigation Menu**

1. Find the navigation menu on the left side of the page
2. Find and click the "Notification Center" option
3. The screen will switch to the notification center page

### Notification Center Interface Description

When you open the notification center page, you will see the following areas:

**Top of Page**

* Title displays "Notification Center"
* Right side has a "Reset" button to clear all filter conditions

**Filter Toolbar**

The Notification Center provides multiple filtering methods to help you quickly find the notifications you need:

![Filter Options](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/filter-section.png)

| Filter            | Available Options                                         | Description                         |
| ----------------- | --------------------------------------------------------- | ----------------------------------- |
| **Category**      | All, Deployment, ImageBuilder, Marketplace, System, Alert | Filter by notification type         |
| **Deploy Status** | All, Completed, Failed, Timeout                           | quickly check the deployment status |
| **Read Status**   | All, Unread, Read                                         | Filter by read status               |
| **Time Range**    | All, Past 24 hours, Past 7 days, Past 30 days             | Filter by time range                |

**Search Bar**

* Can enter keywords to search notification titles or content
* Supports fuzzy search
* Displays search results in real-time after input

**Notification List**

Each notification item displays:

* Icon: Colored icon for notification category
* Title: Main content of the notification
* Message: Detailed description of the notification
* Time: Relative time (such as "2 minutes ago"), hover to see full time
* Category label: Displays notification type
* Unread indicator: Unread notifications have a red dot (●)

![Notification Detail](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/notification-detail.png)

**Pagination Control**

* Bottom displays current page number and total pages
* Can click "Previous" or "Next" buttons to switch pages
* Default display of 20 notifications per page

![Pagination Control](https://pub-f334ff01208c4e6195b80133ac6e6030.r2.dev/portal/notification/pagination-control.png)

**Batch Operations**

* "Mark All as Read" button: Marks all notifications in current filter results as read

***

## 6. Notification Center Operations

### Operation 1: View All Notifications

**Steps**:

1. Enter the notification center page
2. Wait for the page to finish loading

**You Will See**:

* All notifications sorted in reverse chronological order (newest on top)
* Default display of first page's 20 notifications
* Unread notifications marked with red dot
* Can scroll the page or switch pages to view more notifications

***

### Operation 2: Search for Specific Notifications

**Scenario**: You want to find notifications for a specific deployment task

**Steps**:

1. Enter keywords in the search bar (such as "deployment")
2. System will display notifications containing those keywords in real-time
3. Search scope includes notification titles and message content
4. List will immediately update to show search results

**Search Tips**:

* Can search for task numbers
* Can search for keywords (such as "failed", "completed")
* Search is case-insensitive
* Search can be combined with filters

**Clear Search**:

* Delete text in the search bar, list will restore to show all notifications

***

### Operation 3: Filter Notifications by Category

**Scenario**: You only want to view deployment-related notifications

**Steps**:

1. Click the "Category" dropdown menu
2. Select "Deployment" option
3. List will immediately update to show only deployment category notifications
4. If deployment category was previously selected, an additional "Deploy Status" filter will appear

**Other Category Options**:

* Select "ImageBuilder" to view image-related notifications
* Select "System" to view system maintenance notifications
* Select "Alert" to view important warnings
* Select "All" to display all categories

***

### Operation 4: Filter Notifications by Read Status

**Scenario**: You want to view only unread notifications

**Steps**:

1. Click the "Read Status" dropdown menu
2. Select "Unread" option
3. List will only display notifications you haven't viewed
4. These notifications will all have red dots next to them

**Other Status Options**:

* Select "Read" to view notifications you've already seen
* Select "All" to display all notifications

***

### Operation 5: Filter Notifications by Time Range

**Scenario**: You want to view notifications from the past week

**Steps**:

1. Click the "Time Range" dropdown menu
2. Select "Past 7 days" option
3. List will only display notifications from the last 7 days

**Time Range Options**:

* "Past 24 hours": View today's notifications
* "Past 7 days": View this week's notifications
* "Past 30 days": View this month's notifications
* "All": Display all historical notifications

***

### Operation 6: Combine Multiple Filter Conditions

**Scenario**: You want to view unread deployment failure notifications from the past week

**Steps**:

1. Category select "Deployment"
2. Read Status select "Unread"
3. Time Range select "Past 7 days"
4. Deploy Status select "Failed"
5. List will display notifications that meet all four conditions simultaneously

**Description**:

* All filters can be used simultaneously
* Only notifications meeting all conditions will be displayed
* Can adjust any filter at any time, list will update immediately

***

### Operation 7: Reset All Filter Conditions

**Scenario**: You've set multiple filter conditions and now want to restore viewing all notifications

**Steps**:

1. Click the "Reset" button in the upper right corner of the page
2. All filters will restore to "All"
3. Search bar will be cleared
4. List will reload and display all notifications

***

### Operation 8: Click Notification to Jump to Related Page

**Scenario**: You see a deployment completion notification in the notification list and want to view details

**Steps**:

1. Find that notification item
2. Click the notification
3. The system will:
   * Automatically mark that notification as read
   * Jump to the corresponding page (deployment details, image management, etc.)
4. Red dot next to the notification will disappear

**Clickable Notifications**:

* Deployment notifications (blue)
* ImageBuilder notifications (purple)
* Marketplace notifications (yellow)

**Non-clickable Notifications**:

* System notifications (orange)
* Alert notifications (pink)
* These notifications will only be marked as read after clicking, will not jump

***

## 7. Frequently Asked Questions

### Question 1: What does the red number on the bell icon mean?

**Answer**: The red number represents how many unread notifications you currently have. For example, if it displays "5", it means you have 5 notifications you haven't viewed yet. When you view or mark notifications as read, this number will decrease.

***

### Question 2: What's the difference between Notification Panel and Notification Center?

**Answer**:

| Feature         | Notification Panel               | Notification Center                            |
| --------------- | -------------------------------- | ---------------------------------------------- |
| Opening Method  | Click bell icon                  | Click "View All" from panel or navigation menu |
| Display Content | Recent notifications             | All historical notifications                   |
| Functions       | Quick view                       | Search, filter, batch management               |
| Usage Timing    | View new notifications instantly | Manage and search notifications                |

**Recommendation**:

* Use notification panel for daily quick viewing
* Use notification center when you need to find history or batch process

***

### Question 3: Why can some notifications be clicked and others cannot?

**Answer**: Whether a notification can be clicked depends on the notification category:

**Clickable Notifications**:

* Deployment notifications (blue) → Jump to deployment details
* ImageBuilder notifications (purple) → Jump to image management
* Marketplace notifications (yellow) → Jump to marketplace page

**Non-clickable Notifications**:

* System notifications (orange) → Only for informational purposes
* Alert notifications (pink) → Only for reminders

Non-clickable notifications will only be marked as read after clicking, will not jump to pages.

***

### Question 4: Can notifications marked as read be changed back to unread?

**Answer**: The system currently does not support changing read notifications back to unread status. Once a notification is marked as read, it will remain in read status. We suggest:

* Carefully review important notifications before marking them as read
* Or use the "Read" filter in the notification center to find previously viewed notifications

***

### Question 5: Do notifications update automatically?

**Answer**:

* **Notification Panel**: When you keep the panel open, new notifications will appear in real-time
* **Notification Center**: Requires manual page refresh or re-entering the notification center to update

We recommend regularly checking the unread number on the bell icon, which will update automatically when there are new notifications.

***

## 8. Important Notes

### Permission Related

**Need Appropriate Permissions**

* You must be logged into the system to receive notifications
* Some notifications may require specific feature permissions to view
* If you cannot view certain notifications, please contact the system administrator

### Notification Management

**Avoid Notification Overload**

* Regularly mark processed notifications as read
* Use filters to focus on important notifications
* Don't let unread notifications accumulate too much

***