@genesislcap/foundation-services-status

Genesis Foundation ServiceStatus Component Documentation

API Docs

Overview

The ServiceStatus component is designed to display real-time status updates for various services within your application. It listens for status changes from a backend data source and presents these updates through customizable messages.

Display Status Types

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 Emitted

ServiceStatus 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 ServiceStatus component with different attributes for customization:

<zero-services-status 
  resource-name="ALL_PROCESSES_STATUS"
  auto-close="true"
  close-timeout="10000"
  max-messages="1">
</zero-services-status>

• resource-name: Specifies the resource to monitor for status updates.
• 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 ServiceStatus component is styled using CSS variables, allowing for extensive customization. Here are some of the variables you can override:

CSS Variables Description

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

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

• --service-status-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.

• --service-status-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.

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

• --serivce-status-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.

• --serivce-status-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-services-status {
  --service-status-success-bg-color: #4caf50;
  --service-status-failed-bg-color: #f44336;
}

Installation and Usage

Installation

To integrate the ServiceStatus 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-services-status to your dependencies:

npm install @genesislcap/foundation-services-status
# or
yarn add @genesislcap/foundation-services-status

Importing the Component

Once installed, you can import the ServiceStatus component into your application like so:

import { ServicesStatus } from '@genesislcap/foundation-services-status';

ServicesStatus;

This makes the ServicesStatus component available for use in your project.

Using the Component

After importing, you can use the ServiceStatus component, specifically its zero-services-status element, in your application's HTML or template files:

<zero-services-status auto-close="false"></zero-services-status>

This example uses the zero-services-status 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 ServiceStatus 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