Status Widgets

This project provides status widgets that can easily be embedded in web applications.

Table of Contents

• Components
  • StatusBadge
  • AlertBanner
• Development
• Building Components
• Deploying Changes to Status Widgets
• Embedding the Widgets
• Configuration

Components

StatusBadge

Provides a status badge that can be used to display the status of a selection of services.

AlertBanner

Provides an alert banner that can be used to display important messages to the user.

Development

To view components locally, run yarn run dev and navigate to http://localhost:5173.

Building Components

Components can be built for production with yarn run build.

The output of the build process should include:

1. A dist folder containing the compiled JavaScript code for the React components in a file called status-widgets.js.
2. A style.css file containing the CSS modules for the components.

Deploying Changes to Status Widgets

The widgets are currently deployed to NPM and changes can be deployed by running npm publish from the status directory. You can version your changes in the package.json file.

Accessing the Widgets

The latest version can be accessed at inmusic-status-widgets on NPM. All versions of this package are also automatically distributed on unpkg. For the latest version, the file can be accessed from https://unpkg.com/inmusic-status-widgets/dist/status-widgets.js.

Individual versions can be accessed from npm, e.g. https://www.npmjs.com/package/inmusic-status-widgets/v/1.0.0 and unpkg, e.g. https://unpkg.com/[email protected]/dist/status-widgets.js.

Embedding the Widgets

The widgets can be embedded into a web page using a script tag. For example:

<script>
  const statusWidgetsConfig = {
    statusPageId: "",
    statusPageDomain: "",
    alertBanner: {
      enabled: true,
      colourOverrides: {
        text: "#ffffff",
        majorIncidentBackground: "#ff3333",
        minorIncidentBackground: "#ffa228",
      },
    },
    statusBadge: {
      enabled: true,
      colourOverrides: {
        operational: {
          background: "#008000",
          text: "#ffffff",
          border: "#2ab57d",
        },
        degraded: {
          background: "#ffa228",
          text: "#ffffff",
          border: "#ffc575",
        },
        offline: {
          background: "#ff3333",
          text: "#ffffff",
          border: "#ff9e9e",
        },
      },
    },
  }
  window.statusWidgetsConfig = statusWidgetsConfig
</script>
<script
  type="module"
  src="https://unpkg.com/inmusic-status-widgets/dist/status-widgets.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/inmusic-status-widgets/dist/style.css"
></link>

Configuration

The configuration for the widgets is passed to the widget via a global window.statusWidgetsConfig object.

The configuration object is used to pass the status page ID and domain to the widget.

The alertBanner and statusBadge objects are used to configure the appearance and behaviour of the widgets.

The statusBadge object has the following properties:

• enabled: Whether the status badge is enabled.
• colourOverrides: An object that can be used to override the default colours for the status badge.

The alertBanner object has the following properties:

• enabled: Whether the alert banner is enabled.
• colourOverrides: An object that can be used to override the default colours for the alert banner.