docs/static/v0.8/project/contributing/contributing-ui-notification-center/index.html
Prerequisite Reading
The Notification Center is a dedicated panel in Meshery’s UI that helps you monitor, understand, and respond to events across your system. It acts as a central place where you can see important updates related to your infrastructure, workloads, and Meshery’s internal operations.
Want to understand how users interact with the Notification Center? Learn more here.
The NotificationCenter component of Meshery UI Switching to Graphql subscriptions and implementing robust filtering. Events are persisted in Meshery Server and state management on client is done using Redux Toolkit and RTK.
Robust filtering support inspired by GitHub’s notification filtering style.
Proper hierarchial presentation of error details, including probable cause and suggested remeditation.
Support for notification status (notifications can be marked as read and unread)
Event-based notification via Graphql subscription (provided by Meshery Server and any upstream components or externally managed systems, like Kubernetes)
Infinite scroll for pagination.
Redux Tooltik and Rtk-queryBulk operations in the Notification Center allow users to perform actions like deleting multiple notifications or changing the status of multiple notifications in a batch. This documentation outlines the key features and functionality of bulk operations, including the restriction of performing only one bulk operation at a time, the disabling of buttons during ongoing operations, and the display of a loading icon to indicate ongoing activity.
When the server sends an event, it follows a consistent schema that contains metadata intended for user presentation. This metadata typically includes fields such as description, date, user_id, system_id, action, and the resources involved.
In some cases, the metadata may also contain more detailed information—such as a traceback, a summary, or a complete error log—which is dynamically generated at runtime and encapsulated within the event.
Presenting this structured information in a clear and accessible way is essential, as it provides valuable insights into system behavior and ongoing operations.
To accomplish this task, we employ metadata formatters that transform structured data into visually appealing formats. There are currently two types of formatters in use:
The BodySectionRenderer is responsible for formatting and rendering raw text strings into React components. During this process, it parses the string to replace external links with <Link> components and checks if the link matches predefined sites to render the link accordingly.
The ArrayRenderer is responsible for rendering an array of items in a recursive manner, presenting them as a bulletized list using the MetdataFormatter.
Object properties with string values are considered key-value pairs and are rendered as such.
Certain metadata, such as Kubernetes responses and Errors, hold high importance and have dedicated renderers. These dedicated renderers can still utilize the dynamic formatter to format specific parts of the response, such as DryRunResponse.
While this system was initially developed for our events and notification center, the components it comprises are highly reusable and can be employed in other contexts where dynamic formatting of structured data is required.
When a notification event is received from the server, it includes a metadata field containing structured, event-specific information. The purpose of formatters is to present this data in a clean, readable, and user-friendly format inside the expanded view of each notification.
The core logic for rendering metadata is handled by the FormattedMetadata component in metadata.js, which follows this decision tree:
Event-Specific Formatter Check
If a formatter exists for the event’s type (registered under EventTypeFormatters), that dedicated formatter is used to fully control how the metadata is displayed.
Fallback to Property-Based Formatting
If no event-specific formatter is found, the FormattedMetadata component falls back to the FormatStructuredData function (also in metadata.js).
This section outlines the essential files and folders that you’ll interact with when working on Notification Center metadata formatters.
NotificationCenter/ (Root Directory)NotificationCenterProvider), the drawer component (NotificationCenterDrawer), and orchestrates the overall structure.PropertyFormatters, LinkFormatters, PropertyLinkFormatters, and EventTypeFormatters. Contains the FormattedMetadata component which decides how to format the metadata based on event type or specific properties.formatters/ (NotificationCenter/formatters)This directory houses reusable formatter components dedicated to specific types of metadata or event types.
TitleLink, DataToFileLink, EmptyState.ErrorMetadataFormatter for displaying structured error details.ModelImportMessages, ModelImportedSection).DryRunResponseFormatter which utilizes components from DesignLifeCycle.RelationshipEvaluationEventFormatter responsible for rendering notifications related to the evaluation of relationships between components in a design.The following reusable components standardize how notification links, empty states, and downloadable traces are displayed:
TitleLink : Renders a styled title with an external link icon.
Props:
EmptyState : Displays a description when no specific data is available for an event.
Props:
DataToFileLink : Converts event data into a downloadable .txt file.
Props:
The ErrorMetadataFormatter is used for formatting error-related notifications in the Meshery UI Notification Center. It structures error details, probable causes, and suggested remediations in a readable format.
Props:
metadata (object): Contains error metadata fields such as:
LongDescription: Provides details about the error.ProbableCause: Lists possible reasons for the error.SuggestedRemediation: Suggests solutions to fix the error.event (object, optional): Contains the notification event data.
Path: ui/components/NotificationCenter/formatters/error.js
Example:
<ErrorMetadataFormatter
metadata={
LongDescription: "An unexpected error occurred while deploying the mesh.",
ProbableCause: "Misconfigured Kubernetes cluster.",
SuggestedRemediation: "Check your kubeconfig file and retry deployment.",
}
event={ description: "Mesh deployment failed" }
/>
When to Use:
The ErrorMetadataFormatter is used when dealing with structured error events that follow a pattern (description, cause, remediation). A new formatter should be created only if the error metadata deviates significantly from the ErrorMetadataFormatter metadata structure.
The Model Registration Formatter formats and displays model registration details, including components and relationships, in Meshery UI’s Notification Center. It ensures structured representation of imported models and error handling during the import process.
Path: ui/components/NotificationCenter/formatters/model_registration.js
Components:
UnsuccessfulEntityWithError : This component is used to handle error cases during model import. It identifies the type and count of entities that failed to import.
ModelImportedSection : Displays the details of the imported model along with components, relationships, and any errors that occur.
The Relationship Evaluation Formatter is responsible for rendering notifications related to the evaluation of relationships between components in a design. It provides a detailed breakdown of changes in components and relationships, such as additions, updates, and removals, during the evaluation process.
Path: ui/components/NotificationCenter/formatters/relationship_evaluation.js
RelationshipEvaluationTraceFormatter to display detailed traces.Props:
event (object): Contains:
componentsAdded (Array)componentsUpdated (Array)componentsRemoved (Array)relationshipsAdded (Array)relationshipsUpdated (Array)relationshipsRemoved (Array)The Relationship Evaluation Formatter is specifically designed to handle notifications related to changes in components and their relationships during an evaluation process. Use this formatter in the following scenarios:
trace object containing detailed information about the changes in components and relationships.Evaluation Summary :
The notification starts with a summary of the evaluation process.
Example:
"Relationship evaluation completed for design 'Deploy Meshery using Meshery-X' at version '0.0.11'"
This gives the user context about which design and version were evaluated.
Detailed Changes :
The notification breaks down the changes into categories:
Component Details :
For each component, the notification displays:
Relationship Details :
For each relationship, the notification displays:
The Dry Run Formatter is responsible for rendering notifications related to the dry run validation of a design. A dry run simulates the deployment or undeployment of a design to identify potential errors without actually applying the changes.
Path: ui/components/DesignLifeCycle/DryRun.js
Props:
dryRunErrors (array): An array of errors detected during the dry run. Each error includes:
type: The type of error (e.g., RequestError, ComponentError).fieldPath: The specific field in the design where the error occurred.message: A detailed error message.configurableComponentsCount (number): The number of configurable components in the design.
annotationComponentsCount (number): The number of annotation components in the design.
validationMachine (object): The state machine handling the dry run validation process.
currentComponentName (string): The name of the component currently being validated.
The Dry Run Formatter is used in the following scenarios:
The Deployment Summary Formatter is responsible for rendering notifications related to the deployment or undeployment of components in a design.
Path: ui/components/DesignLifeCycle/DeploymentSummary.js
Props:
deploy, undeploy).The Deployment Summary Formatter should be used in the following scenarios:
event.action is either deploy or undeploy and the event.metadata includes design_name.Purpose:
When an event does not match an event in EventTypeFormatters, PropertyFormatters and PropertyLinkFormatters are used to format and render specific metadata fields in a structured and visually appealing way.
ErrorMetadataFormatter to display structured error details.Use PropertyFormatters and PropertyLinkFormatters in the following scenarios:
EventTypeFormatter defined.