Status banner

<template>
  <OpsStatusBanner :poll="60" />
</template>

<OpsStatusBanner> reads the public status page and renders a line naming the affected components while anything is degraded or down. It renders nothing while everything is operational, while it is loading, and when the status cannot be read: a banner announcing its own failure would be noise on every page.

poll is the number of seconds between refreshes. The default is 60; 0 reads once.

The banner and the composable are auto imported. Turn both off with banner: false.

It reads from your own domain

The browser fetches <url>/api/v1/status/public, and ops answers that route without cross origin headers. Serve the path from your app's own domain and point url at the app. With Nuxt's route rules:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@syncronet/nuxt-ops'],
  ops: { url: 'https://bjarup.example' },
  routeRules: {
    '/api/v1/status/public': { proxy: 'https://ops.syncronet.dev/api/v1/status/public' },
  },
})

The document holds states and timestamps only, and no credential is sent.

Your own banner

useOpsStatus() gives you the same data:

const { status, state, degraded, affected, busy, error, refresh } = useOpsStatus()
await refresh()

Each component carries slug, name, state and since; each incident slug, name, state, started_at and resolved_at, which is null while it is ongoing.