|
| 1 | +<script lang="ts"> |
| 2 | + import { browser } from '$app/environment'; |
| 3 | + import { onMount } from 'svelte'; |
| 4 | + import { trackEvent } from '$lib/actions/analytics'; |
| 5 | + import { |
| 6 | + fetchAppwriteCloudAggregateState, |
| 7 | + type AppwriteCloudAggregateState |
| 8 | + } from '$lib/status/fetch-appwrite-cloud-aggregate-state'; |
| 9 | +
|
| 10 | + const STATUS_PAGE_URL = 'https://status.appwrite.online'; |
| 11 | + const REFRESH_MS = 60_000; |
| 12 | +
|
| 13 | + let aggregateState: AppwriteCloudAggregateState = 'operational'; |
| 14 | +
|
| 15 | + function labelFor(state: AppwriteCloudAggregateState): string { |
| 16 | + switch (state) { |
| 17 | + case 'maintenance': |
| 18 | + return 'Maintenance in progress'; |
| 19 | + case 'downtime': |
| 20 | + return 'Major service disruption'; |
| 21 | + case 'degraded': |
| 22 | + return 'Some services affected'; |
| 23 | + default: |
| 24 | + return 'All systems normal'; |
| 25 | + } |
| 26 | + } |
| 27 | +
|
| 28 | + onMount(() => { |
| 29 | + if (!browser) { |
| 30 | + return; |
| 31 | + } |
| 32 | +
|
| 33 | + let cancelled = false; |
| 34 | +
|
| 35 | + const refresh = () => { |
| 36 | + void fetchAppwriteCloudAggregateState().then((next) => { |
| 37 | + if (!cancelled) { |
| 38 | + aggregateState = next; |
| 39 | + } |
| 40 | + }); |
| 41 | + }; |
| 42 | +
|
| 43 | + /** Defer first fetch until idle (or short deadline) so it never competes with first paint. */ |
| 44 | + let idleId: number | undefined; |
| 45 | + let fallbackId: ReturnType<typeof setTimeout> | undefined; |
| 46 | + if (typeof requestIdleCallback !== 'undefined') { |
| 47 | + idleId = requestIdleCallback(() => refresh(), { timeout: 2000 }); |
| 48 | + } else { |
| 49 | + fallbackId = setTimeout(() => refresh(), 0); |
| 50 | + } |
| 51 | +
|
| 52 | + const interval = window.setInterval(refresh, REFRESH_MS); |
| 53 | +
|
| 54 | + return () => { |
| 55 | + cancelled = true; |
| 56 | + window.clearInterval(interval); |
| 57 | + if (idleId !== undefined && typeof cancelIdleCallback !== 'undefined') { |
| 58 | + cancelIdleCallback(idleId); |
| 59 | + } |
| 60 | + if (fallbackId !== undefined) { |
| 61 | + clearTimeout(fallbackId); |
| 62 | + } |
| 63 | + }; |
| 64 | + }); |
| 65 | +</script> |
| 66 | + |
| 67 | +<a |
| 68 | + class="web-footer-cloud-status web-icon-button is-more-content" |
| 69 | + href={STATUS_PAGE_URL} |
| 70 | + target="_blank" |
| 71 | + rel="noopener noreferrer" |
| 72 | + data-state={aggregateState} |
| 73 | + aria-label="{labelFor(aggregateState)}. Opens the public status page in a new tab." |
| 74 | + onclick={() => trackEvent('footer-cloud-status-badge-click')} |
| 75 | +> |
| 76 | + <span class="web-footer-cloud-status__mark" aria-hidden="true"> |
| 77 | + {#if aggregateState === 'operational'} |
| 78 | + <span class="web-icon-check web-footer-cloud-status__glyph"></span> |
| 79 | + {:else if aggregateState === 'maintenance'} |
| 80 | + <svg |
| 81 | + class="web-footer-cloud-status__svg" |
| 82 | + viewBox="0 0 24 24" |
| 83 | + fill="none" |
| 84 | + aria-hidden="true" |
| 85 | + > |
| 86 | + <path |
| 87 | + d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" |
| 88 | + fill="currentColor" |
| 89 | + /> |
| 90 | + </svg> |
| 91 | + {:else} |
| 92 | + <svg class="web-footer-cloud-status__svg" viewBox="0 0 24 24" aria-hidden="true"> |
| 93 | + <path |
| 94 | + fill="currentColor" |
| 95 | + d="M12 3 2 20h20L12 3zm0 3.5L17.5 18h-11L12 6.5zM11 10h2v5h-2v-5zm0 6h2v2h-2v-2z" |
| 96 | + /> |
| 97 | + </svg> |
| 98 | + {/if} |
| 99 | + </span> |
| 100 | + <span class="web-footer-cloud-status__label">{labelFor(aggregateState)}</span> |
| 101 | +</a> |
| 102 | + |
| 103 | +<style lang="scss"> |
| 104 | + @use '$scss/abstract' as *; |
| 105 | +
|
| 106 | + /* Same chrome as `.web-icon-button.is-more-content`, extended for label + status tint */ |
| 107 | + .web-footer-cloud-status.web-icon-button.is-more-content { |
| 108 | + position: relative; |
| 109 | + display: inline-flex; |
| 110 | + max-inline-size: 100%; |
| 111 | + align-items: center; |
| 112 | + gap: pxToRem(6); |
| 113 | + min-block-size: pxToRem(26); |
| 114 | + padding-block: pxToRem(1); |
| 115 | + padding-inline: pxToRem(5) pxToRem(7); |
| 116 | + text-decoration: none; |
| 117 | + inline-size: fit-content; |
| 118 | + /* Slightly smaller than footer link copy so the chip reads as secondary */ |
| 119 | + font-size: calc(var(--web-footer-nav-link-font-size, var(--text-caption)) * 0.9); |
| 120 | + font-weight: var(--font-weight-regular); |
| 121 | + line-height: var(--web-footer-nav-link-line-height, var(--text-caption--line-height)); |
| 122 | + letter-spacing: var( |
| 123 | + --web-footer-nav-link-letter-spacing, |
| 124 | + var(--text-caption--letter-spacing) |
| 125 | + ); |
| 126 | + /* |
| 127 | + * `web-icon.css` matches `[class*=' web-icon-']` — that substring appears inside the |
| 128 | + * token `web-icon-button`, so the whole anchor wrongly gets `font-family: web-icon !important`. |
| 129 | + * Reset to body UI font; keep icon font only on the glyph span. |
| 130 | + */ |
| 131 | + font-family: var(--web-font-family-inter), arial, sans-serif !important; |
| 132 | +
|
| 133 | + .web-footer-cloud-status__label { |
| 134 | + white-space: nowrap; |
| 135 | + } |
| 136 | +
|
| 137 | + .web-footer-cloud-status__mark { |
| 138 | + display: flex; |
| 139 | + width: pxToRem(16); |
| 140 | + height: pxToRem(16); |
| 141 | + flex-shrink: 0; |
| 142 | + align-items: center; |
| 143 | + justify-content: center; |
| 144 | + border-radius: pxToRem(6); |
| 145 | + background-color: hsl(var(--web-color-smooth)); |
| 146 | + color: hsl(var(--web-color-secondary)); |
| 147 | + } |
| 148 | +
|
| 149 | + .web-footer-cloud-status__glyph { |
| 150 | + font-family: 'web-icon' !important; |
| 151 | + font-size: pxToRem(9); |
| 152 | + line-height: 1; |
| 153 | + } |
| 154 | +
|
| 155 | + .web-footer-cloud-status__svg { |
| 156 | + width: pxToRem(10); |
| 157 | + height: pxToRem(10); |
| 158 | + } |
| 159 | +
|
| 160 | + &[data-state='operational'] .web-footer-cloud-status__mark { |
| 161 | + background-color: hsl(var(--web-color-mint-500) / 0.14); |
| 162 | + color: hsl(var(--web-color-mint-500)); |
| 163 | + } |
| 164 | +
|
| 165 | + &[data-state='degraded'] .web-footer-cloud-status__mark { |
| 166 | + background-color: hsl(var(--web-color-yellow-500) / 0.14); |
| 167 | + color: hsl(var(--web-color-yellow-700)); |
| 168 | + } |
| 169 | +
|
| 170 | + &[data-state='downtime'] .web-footer-cloud-status__mark { |
| 171 | + background-color: hsl(var(--web-color-red-500) / 0.14); |
| 172 | + color: hsl(var(--web-color-red-700)); |
| 173 | + } |
| 174 | +
|
| 175 | + &[data-state='maintenance'] .web-footer-cloud-status__mark { |
| 176 | + background-color: hsl(var(--web-color-blue-500) / 0.14); |
| 177 | + color: hsl(var(--web-color-blue-700)); |
| 178 | + } |
| 179 | + } |
| 180 | +</style> |
0 commit comments