Introduction


Status Page is a serverless alternative to allow for custom designed status pages at a cheap price by utilising the APIs from services such as UptimeRobot and hosting through Github Pages. Its design is based upon Atlassian's Status Page.


Features


  • Polling of external APIs through providers
  • Incident reporting
  • Light and Dark mode

Configuration



Theme Options

timezone: "Europe/London", // The timezone which all times should be converted to from UTC
pageLimit: 10,             // The amount of incidents or monitors which should be displayed on a single page

title: {
  prefixed: "{prefix} | Status Page", // The title in the browser window
  default: "Status Page"              // If a prefixed title isn't possible
},

incidents: {
  overallDateFormat: "MMM D, YYYY",   // The time format for a quick view of the incident
  updateDateFormat: "MMM D, hh:mm zz",// The time format for incident updates

  fullPageDateFormat: "MMM D, YYYY, hh:mm zz" // The time format for a full page incident
},

header: {
  logo: "", // Should be a path to an image, if none is specified then it will use the name below
  name: "Status Page", // Name of the page

  link: "/", // Where clicking on the header banner should lead to, use false for nothing.
  internalLink: true, // If the link is internal or not

  showOverallStatus: false, // Whether an overall uptime for all monitors should be calculated and displayed.
}

Provider Options

provider: {
  enabled: true,            // If the provider should be used

  name: 'uptimerobot',      // The name of the provider to use
  apikey: '{READ_ONLY_KEY}' // The access key for the API of the provider

  // More options may be required here depending upon the provider.
}

Monitors

Specifying a Single Monitor

monitors: [
  [
    {
      name: "CDN", // The name of the monitor
      description: "We serve our content via a CDN, this makes it load as fast as possible.", // An optional description of the monitor
      provider_id: 782849159 // An ID which is required by the UptimeRobot Provider
    }
  ]
]

Specifying a Monitor Group

monitors: [
  {
    group_name: "Services",                                  // Name of the group
    description: "These services are core to our business.", // Optional description of the group

    collapsible: true, // If the group should be collapsible 
    collapsed: false,  // If the group should start collapsed

    monitors: [        // Monitors which belong to the group
      {
        name: "Demos",
        provider_id: 779382341
      },
      {
        name: "Images",
        description: "We host all of our images in a central location.",
        provider_id: 779428955
      }
    ]
  }
]


Developers



Building Providers

Providers consist of two main functions:

async init({ axios, config }) {
  // This function takes the axios instance and the config for the panel.
  // It's designed to setup some initial variables which can help reduce load on calls to fetchMonitor.
}

async fetchMonitor({ monitor }) {
  // This function receives the config of the specified monitor from the config, its response is detailed below.
}

The fetchMonitor function should return a response such as:

{
  numOfDays: 7,    // The amount of days to return with (from the current day)
  uptimeRatios: [  // The uptime of each individual day
    100.00,
    100.00,
    100.00,
    100.00
    88.35,
    100.00,
    75.35
  ],
  averageUptimes: { // The average uptime for certain timespans
    90: 100.0,
    60: 100.0,
    30: 100.0
  }

  latency: {        // Latency of the monitor
    timestamps: ["20:53","21:03","21:18","21:43","21:58"],
    latency: [16,0,16,0,11]
  }
}