Genesis Foundation SystemHealthAlerts Component Documentation

API Docs

Overview

The SystemHealthAlerts component is designed to display real-time updates on the status of various services in the application, the status of the server and the application itself. For this purpose it uses "NetworkMonitor" from '@genesislcap/foundation-comms'

• SystemHealthAlertsService
• SystemHealthAlertsServer

SystemHealthAlertsService

The component can display two types of service status messages:

• Restored: Indicates a service that was previously down or unavailable is now back online and functioning normally.
• Failed: Signifies a service is currently experiencing issues, such as an outage or technical difficulties.

Events

SystemHealthAlertsService emits several custom events to notify other parts of your application about status changes:

• servicesChanged: Fired when there's any change in the service messages array, indicating an addition or removal of service status messages.
• serviceFail: Dispatched when a service changes its status to failed.
• serviceRestored: Dispatched when a service changes its status to restored.

Slots

This component uses the default slot to dynamically insert service status messages based on the current service states.

Example Usage

Here's how to use the SystemHealthAlertsService component with different attributes for customization:

<zero-system-health-alerts-service
  resource-name="ALL_PROCESSES_STATUS"
  auto-close="true"
  close-timeout="10000"
  max-messages="1">
</zero-system-health-alerts-service>

• auto-close: Enables or disables automatic closing of status messages.
• close-timeout: Determines the timeout duration (in milliseconds) before a message is automatically closed.
• max-messages: Limits the number of messages displayed at any given time.
• message-restored: Specifies the message to be displayed when a service is restored. The placeholder [SERVICE_NAME] or [SERVICE_ID] can be used to dynamically insert the name or id of the service.
• message-failed: Specifies the message to be displayed when a service is experiencing technical difficulties. The placeholder [SERVICE_NAME] or [SERVICE_ID] can be used to dynamically insert the name or id of the service.
• title-restored: Specifies the title to be displayed when a service is restored. The placeholder [SERVICE_NAME] or [SERVICE_ID] can be used to dynamically insert the name or id of the service.
• title-failed: Specifies the title to be displayed when a service is experiencing technical difficulties. The placeholder [SERVICE_NAME] or [SERVICE_ID] can be used to dynamically insert the name or id of the service.

CSS Customization and Variables

The SystemHealthAlertsService component is styled using CSS variables, allowing for extensive customization. Here are some of the variables you can override:

CSS Variables Description

• --success-text-color: Sets the text color for successful service status messages, ensuring optimal readability against the background. Default is #fff (white).

• --success-bg-color: Defines the background color for successful (restored or operational) service status messages. The default #2b4c42 is a dark green, indicating success.

• --success-border-color: Determines the border color for successful service status messages, providing a visual indicator of message status. The default #48e89a is a lighter green, complementing the background color.

• --failed-bg-color: Specifies the background color for failed service status messages, signaling an error or problem. The default #7c6040 is a muted brown, indicating an issue.

• --failed-border-color: Controls the border color for failed service status messages. The default #ffb660 is a contrasting orange, drawing attention to the message.

• --wrapper-width: Sets the width of the service status messages, calculated dynamically to fit within its container while allowing for padding. The calculation calc(100% - (var(--design-unit) * 2px)) ensures consistent spacing.

• --wrapper-left: Adjusts the left position of the service status messages, ensuring proper alignment within its container. The calculation calc(var(--design-unit) * 1px) is used for slight offsetting.

You can redefine these variables in your CSS to match your application's theme:

zero-system-health-alerts-service {
  --success-bg-color: #4caf50;
  --failed-bg-color: #f44336;
}

SystemHealthAlertsServer

Events

SystemHealthAlertsServer emits several custom events to notify other parts of your application about server status changes:

• changed: is emitted when there is a change in the status of the server itself
• up: fired when the server has recovered from an outage or disruption and has returned to normal operational status
• down: triggered when the server experiences an outage or goes into a non-operational state. This event indicates that the server is currently down and unable to perform its expected functions, signaling a need for immediate attention to restore server.
• alert-close: emitted when an informational popup or alert about the server’s status is manually closed or automatically dismissed

Slots

This component uses the default slot to dynamically insert server status messages based on the current status.

Example Usage

Here's how to use the SystemHealthAlertsServer component with different attributes for customization:

<zero-system-health-alerts-server
  auto-close="true"
  close-timeout="10000">
</zero-system-health-alerts-server>

• auto-close: Enables or disables automatic closing of status messages.
• close-timeout: Determines the timeout duration (in milliseconds) before a message is automatically closed.
• display-on-change: Whether a message should be displayed when the status changes (default true).
• message-restored: Specifies the message to be displayed when a server is restored.
• message-failed: Specifies the message to be displayed when a server is down.
• title-restored: Specifies the title to be displayed when a server is restored.
• title-failed: Specifies the title to be displayed when a server is down.

CSS Customization and Variables

The SystemHealthAlertsServer component is styled using CSS variables, allowing for extensive customization. Here are some of the variables you can override:

CSS Variables Description

• --dialog-max-width: Specifies the maximum width of the server status dialog box. The default is 415px, ensuring that the dialog remains readable and well-proportioned across devices.
• --overlay-bg: Sets the background color for the server status overfloay.
• --restored-text-color: Determines the text color for message indicating that the server has been restored or is operational.
• --restored-bg-color: Defines the background color for message about the server being restored to operational status.
• --restored-border-color: Controls the border color for restored server status message.
• --failed-bg-color: Specifies the background color for server status message that indicate a failure or problem.
• --failed-border-color: Sets the border color for failed server status message.
• --wrapper-width: Sets the width of the server status message, calculated dynamically to fit within its container while allowing for padding.
• --wrapper-left: Adjusts the left position of the server status message, ensuring proper alignment within its container.

You can redefine these variables in your CSS to match your application's theme:

zero-system-health-alerts-server {
  --restored-bg-color: #4caf50;
  --failed-bg-color: #f44336;
}

Installation and Usage

Installation

To integrate the SystemHealthAlertsService or SystemHealthAlertsServer component into your application, you need to first add it to your project. Assuming you're using a package manager like npm or yarn, you can import the component by adding @genesislcap/foundation-system-health-alerts to your dependencies:

npm install @genesislcap/foundation-system-health-alerts
# or
yarn add @genesislcap/foundation-system-health-alerts

Importing the Component

Once installed, you can import the SystemHealthAlertsService or SystemHealthAlertsServer component into your application like so:

import { ZeroSystemHealthAlertsService, ZeroSystemHealthAlertsServer } from '@genesislcap/foundation-system-health-alerts';

ZeroSystemHealthAlertsService;
ZeroSystemHealthAlertsServer;

This makes the SystemHealthAlertsService and SystemHealthAlertsServer component available for use in your project.

Using the Component

After importing, you can use the SystemHealthAlertsService and SystemHealthAlertsServer component, specifically its zero-system-health-alerts-service and zero-system-health-alerts-server element, in your application's HTML or template files:

<zero-system-health-alerts-service auto-close="false"></zero-system-health-alerts-service>
<zero-system-health-alerts-server auto-close="false"></zero-system-health-alerts-server>

This example uses the zero-system-health-alerts-service/zero-system-health-alerts-server custom element with the auto-close attribute set to false. Customize these attributes based on your application's requirements.

Summary

By following these installation and usage instructions, you can easily integrate and utilize the SystemHealthAlertsService/SystemHealthAlertsServer component within your application to display real-time service status messages. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform