Package Exports

@uptime.link/statuspage
@uptime.link/statuspage/dist_ts_web/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uptime.link/statuspage) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@uptime.link/statuspage

a catalog with webcomponents for uptimelink dashboard

Install

To install the @uptime.link/statuspage module, you can use npm. Make sure you have Node.js and npm installed, then run:

npm install @uptime.link/statuspage

Usage

The @uptime.link/statuspage module provides a collection of web components to build a comprehensive status page for Uptime.link dashboards. This includes headers, status bars, asset selectors, status details, incident lists, and more.

Here’s a detailed guide on how to use each component in your TypeScript project with ESM syntax. We will walk through creating a complete status page using the provided components.

Step-by-Step Example

Setup Your Project:

Ensure you have a TypeScript project setup. Here's a minimal tsconfig.json to get started:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Import Components:

Create an index.ts file, and import the components you need:

import './elements/index.js';
import { page1 } from './pages/index.js';

Creating a Status Page:

Here, we'll create a simple status page using the imported components. We'll create individual components like headers, status bars, footers, etc., and combine them into a single page.

UplStatuspageHeader

import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';

const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);

UplStatuspageStatusbar

import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';

const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);

UplStatuspageAssetsselector

import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';

const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);

UplStatuspageStatusdetails

import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';

const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);

UplStatuspageStatusmonth

import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';

const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);

UplStatuspageIncidents

import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { uplInterfaces } from './plugins.js';

const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
  // Example incident data
  {
    id: "incident1",
    title: "Server Outage",
    description: "There was an outage on the main server.",
    status: "resolved",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

incidents.pastIncidences = [
  // Example past incident data
  {
    id: "incident2",
    title: "Database Maintenance",
    description: "Scheduled maintenance on the database.",
    status: "completed",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

document.body.appendChild(incidents);

UplStatuspageFooter

import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';

const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);

Full Example

Here’s how you can put it all together to create a full status page:

import './elements/index.js';
import { page1 } from './pages/index.js';
import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';
import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';
import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';
import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';
import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';
import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';
import { uplInterfaces } from './plugins.js';

const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);

const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);

const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);

const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);

const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);

const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
  {
    id: "incident1",
    title: "Server Outage",
    description: "There was an outage on the main server.",
    status: "resolved",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

incidents.pastIncidences = [
  {
    id: "incident2",
    title: "Database Maintenance",
    description: "Scheduled maintenance on the database.",
    status: "completed",
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
] as uplInterfaces.IIncident[];

document.body.appendChild(incidents);

const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);

This example uses all the components provided by @uptime.link/statuspage to create a functional status page. Modify the data, styles, and structure to suit your requirements. undefined