---
title: Status banner
description: Show a line in the app while a component on the status page is degraded or down.
order: 3
---

```vue
<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:

```ts
// 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:

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

| field | what it holds |
| --- | --- |
| `status` | the whole document: `state`, `components`, `incidents`, `generated_at` |
| `state` | the worst component state: `operational`, `degraded` or `down` |
| `degraded` | true while the state is `degraded` or `down` |
| `affected` | the components that are not operational |
| `busy` | true while a refresh runs |
| `error` | why the last refresh failed, in ops's own words when it gave any |
| `refresh()` | reads the document again |

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.