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.
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.
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.
This component uses the default slot to dynamically insert service status messages based on the current service states.
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.
The ServiceStatus
component is styled using CSS variables, allowing for extensive customization. Here are some of the variables you can override:
-
--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 calculationcalc(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 calculationcalc(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;
}
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
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.
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.
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.
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.
Genesis low-code platform