@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

1. 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
  }
}

2. Import Components:

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

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

3. 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