Improve status page frontend

database/seeders/DatabaseSeeder.php

@@ -192,7 +192,7 @@ public function run(): void
                 'message' => <<<'EOF'
 Our DNS provider has fixed the issue. We will continue to monitor the situation.
 
-For more information, please you can read our latest [blog post](https://blog.cachethq.io).
+For more information, read our latest [blog post](https://blog.cachethq.io).
 EOF
                 ,
                 'user_id' => $user->id,

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/cachet.css": {
-    "file": "assets/cachet-9iAcbFOX.css",
+    "file": "assets/cachet-BCO35y1t.css",
     "name": "cachet",
     "names": [
       "cachet.css"
@@ -18,9 +18,15 @@
     "isEntry": true
   },
   "resources/js/cachet.js": {
-    "file": "assets/cachet-CvVdW_W9.js",
+    "file": "assets/cachet-CHF_99gt.js",
     "name": "cachet",
     "src": "resources/js/cachet.js",
     "isEntry": true
+  },
+  "resources/js/metrics.js": {
+    "file": "assets/metrics-DzddGFQc.js",
+    "name": "metrics",
+    "src": "resources/js/metrics.js",
+    "isEntry": true
   }
 }

resources/js/cachet.js

@@ -1,20 +1,19 @@
-import Chart from 'chart.js/auto'
-import 'chartjs-adapter-moment'
-
 import Alpine from 'alpinejs'
 
 import Anchor from '@alpinejs/anchor'
 import Collapse from '@alpinejs/collapse'
 import Focus from '@alpinejs/focus'
 import Ui from '@alpinejs/ui'
 
-Chart.defaults.color = '#fff'
-window.Chart = Chart
-
 Alpine.plugin(Anchor)
 Alpine.plugin(Collapse)
 Alpine.plugin(Focus)
 Alpine.plugin(Ui)
 
 window.Alpine = Alpine
-Alpine.start()
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => Alpine.start())
+} else {
+    Alpine.start()
+}

resources/js/metrics.js

@@ -0,0 +1,136 @@
+import Chart from 'chart.js/auto'
+import 'chartjs-adapter-moment'
+
+Chart.defaults.color = '#fff'
+
+const now = new Date()
+const previousHour = new Date(now - 60 * 60 * 1000)
+const previous24Hours = new Date(now - 24 * 60 * 60 * 1000)
+const previous7Days = new Date(now - 7 * 24 * 60 * 60 * 1000)
+const previous30Days = new Date(now - 30 * 24 * 60 * 60 * 1000)
+
+function getCssVar(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+function getFontColor() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
+        return `rgba(${getCssVar('--gray-100')}, 1)`
+    }
+
+    return `rgba(${getCssVar('--gray-800')}, 1)`
+}
+
+function withAlpha(color, alpha) {
+    return color.replace(/\)\s*$/, ` / ${alpha})`)
+}
+
+function getThemeColors() {
+    const fontColor = getFontColor()
+    const accent = getCssVar('--accent')
+    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    const gridColor = isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.05)'
+    const mutedColor = isDark ? 'rgba(161, 161, 170, 1)' : 'rgba(113, 113, 122, 1)'
+
+    return {
+        fontColor,
+        mutedColor,
+        gridColor,
+        fillColor: withAlpha(accent, 0.12),
+        borderColor: accent,
+    }
+}
+
+function getTimeUnit(period, metricView) {
+    if (period === metricView.last_hour) return 'minute'
+    if (period === metricView.today) return 'hour'
+    if (period === metricView.week) return 'week'
+    if (period === metricView.month) return 'month'
+
+    return 'day'
+}
+
+window.cachetMetricChart = function () {
+    const metricPoints = this.metric.metric_points.map((point) => ({
+        x: new Date(point.x),
+        y: point.y,
+    }))
+
+    this.points[0] = metricPoints.filter((point) => point.x >= previousHour)
+    this.points[1] = metricPoints.filter((point) => point.x >= previous24Hours)
+    this.points[2] = metricPoints.filter((point) => point.x >= previous7Days)
+    this.points[3] = metricPoints.filter((point) => point.x >= previous30Days)
+
+    let themeColors = getThemeColors()
+    const chart = new Chart(this.$refs.canvas, {
+        type: 'line',
+        data: {
+            datasets: [
+                {
+                    label: this.metric.suffix,
+                    data: this.points[this.period],
+                    fill: true,
+                    backgroundColor: themeColors.fillColor,
+                    borderColor: themeColors.borderColor,
+                    borderWidth: 2,
+                    tension: 0.35,
+                    pointRadius: 0,
+                    pointHoverRadius: 5,
+                    pointHoverBackgroundColor: themeColors.borderColor,
+                    pointHoverBorderColor: '#fff',
+                    pointHoverBorderWidth: 2,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: { intersect: false, mode: 'index' },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    backgroundColor: 'rgba(24, 24, 27, 0.95)',
+                    titleColor: '#fafafa',
+                    bodyColor: '#fafafa',
+                    borderColor: 'rgba(255, 255, 255, 0.08)',
+                    borderWidth: 1,
+                    padding: 10,
+                    cornerRadius: 6,
+                    displayColors: false,
+                    titleFont: { weight: '500', size: 11 },
+                    bodyFont: { weight: '600', size: 12 },
+                },
+            },
+            scales: {
+                x: {
+                    type: 'timeseries',
+                    border: { display: false },
+                    grid: { display: false },
+                    ticks: { color: themeColors.mutedColor, font: { size: 11 }, maxRotation: 0, autoSkipPadding: 16 },
+                },
+                y: {
+                    border: { display: false },
+                    grid: { color: themeColors.gridColor, drawTicks: false },
+                    ticks: { color: themeColors.mutedColor, font: { size: 11 }, padding: 8, maxTicksLimit: 5 },
+                },
+            },
+        },
+    })
+
+    this.$watch('period', () => {
+        chart.data.datasets[0].data = this.points[this.period]
+        chart.options.scales.x.time.unit = getTimeUnit(this.period, this.metricView)
+        chart.update()
+    })
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        themeColors = getThemeColors()
+        chart.data.datasets[0].backgroundColor = themeColors.fillColor
+        chart.data.datasets[0].borderColor = themeColors.borderColor
+        chart.data.datasets[0].pointHoverBackgroundColor = themeColors.borderColor
+        chart.options.scales.x.ticks.color = themeColors.mutedColor
+        chart.options.scales.y.ticks.color = themeColors.mutedColor
+        chart.options.scales.y.grid.color = themeColors.gridColor
+        chart.update()
+    })
+}

resources/lang/de/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Abonnenten insgesamt',
         'verified_subscribers_description' => ':count verifiziert',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Abonnieren',
+        ],
+    ],
 ];

resources/lang/de_AT/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Abonnenten insgesamt',
         'verified_subscribers_description' => ':count verifiziert',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Abonnieren',
+        ],
+    ],
 ];

resources/lang/de_CH/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Abonnenten insgesamt',
         'verified_subscribers_description' => ':count verifiziert',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Abonnieren',
+        ],
+    ],
 ];

resources/lang/en/component.php

@@ -21,6 +21,7 @@
         ],
     ],
     'last_updated' => 'Last updated :timestamp',
+    'description_label' => 'About :component',
     'view_details' => 'View details',
     'form' => [
         'name_label' => 'Name',

resources/lang/en/incident.php

@@ -18,6 +18,9 @@
         'past_incidents_header' => 'Past incidents',
         'recent_incidents_header' => 'Recent incidents',
         'no_incidents_reported_between' => 'No incidents reported between :from and :to',
+        'date_range_label' => 'Incident date range',
+        'from_label' => 'From',
+        'to_label' => 'To',
         'navigate' => [
             'previous' => 'Previous',
             'today' => 'Today',

resources/lang/en/metric.php

@@ -43,6 +43,8 @@
     ],
     'sum_label' => 'Sum',
     'average_label' => 'Average',
+    'description_label' => 'About :metric',
+    'chart_label' => ':metric chart',
     'view_labels' => [
         'last_hour' => 'Last hour',
         'today' => 'Today',

resources/lang/en/subscriber.php

@@ -40,7 +40,7 @@
             'description' => 'Get an email whenever incidents are reported or maintenance is scheduled.',
             'consent' => 'We\'ll send you a confirmation email. You can unsubscribe at any time.',
             'back' => 'Back to status page',
-            'button_label' => 'Subscribe to updates',
+            'button_label' => 'Subscribe',
             'subscribed_heading' => 'Check your email',
             'subscribed_body' => 'If this email address isn\'t already subscribed, you\'ll receive an email with a link to confirm your subscription.',
             'verified_heading' => 'Subscription confirmed',

resources/lang/es_ES/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Total de Suscriptores',
         'verified_subscribers_description' => ':count verificados',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Suscribirse',
+        ],
+    ],
 ];

resources/lang/fr/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Nombre total d’abonnés',
         'verified_subscribers_description' => ':count vérifiés',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'S’abonner',
+        ],
+    ],
 ];

resources/lang/ko/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => '총 구독자 수',
         'verified_subscribers_description' => ':count명 인증됨',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => '구독',
+        ],
+    ],
 ];

resources/lang/nl/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Totaal aantal abonnees',
         'verified_subscribers_description' => ':count geverifieerd',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Abonneren',
+        ],
+    ],
 ];

resources/lang/ph/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Kabuuang mga Subscriber',
         'verified_subscribers_description' => ':count ang nakumpirma',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Mag-subscribe',
+        ],
+    ],
 ];

resources/lang/pt_BR/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => 'Total de Inscritos',
         'verified_subscribers_description' => ':count verificados',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => 'Inscrever-se',
+        ],
+    ],
 ];

resources/lang/zh_CN/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => '总订阅者数',
         'verified_subscribers_description' => ':count 位已验证',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => '订阅',
+        ],
+    ],
 ];

resources/lang/zh_TW/subscriber.php

@@ -31,4 +31,9 @@
         'total_subscribers_label' => '總訂閱者數',
         'verified_subscribers_description' => ':count 位已驗證',
     ],
+    'status_page' => [
+        'subscribe' => [
+            'button_label' => '訂閱',
+        ],
+    ],
 ];

resources/views/components/component.blade.php

@@ -22,7 +22,7 @@
 
             @if($component->description)
                 <div x-data x-popover class="relative flex shrink-0 items-center">
-                    <button type="button" x-ref="anchor" x-popover:button class="flex items-center justify-center text-zinc-400 transition hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-200">
+                    <button type="button" x-ref="anchor" x-popover:button aria-label="{{ __('cachet::component.description_label', ['component' => $component->name]) }}" class="flex size-10 items-center justify-center rounded-full text-zinc-400 transition hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-200">
                         <x-heroicon-o-information-circle class="size-4" />
                     </button>
                     <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="z-10 w-max max-w-sm rounded-md bg-zinc-900 px-3 py-2 text-xs font-medium text-white shadow-lg dark:bg-zinc-100 dark:text-zinc-900">
@@ -42,15 +42,17 @@
                  class="relative shrink-0">
                 <div x-ref="badgeAnchor">
                     @if ($component->impacting_incident)
-                        <a href="{{ route('cachet.status-page.incident', [$component->impacting_incident]) }}" class="inline-flex text-sm font-semibold tracking-tight {{ $component->latest_status->getTextColorClasses() }}">
+                        <a href="{{ route('cachet.status-page.incident', [$component->impacting_incident]) }}" aria-describedby="component-{{ $component->id }}-updated" class="inline-flex text-sm font-semibold tracking-tight {{ $component->latest_status->getTextColorClasses() }}">
                             {{ $component->latest_status->getLabel() }}
                         </a>
                     @else
-                        <span class="text-sm font-semibold tracking-tight {{ $component->latest_status->getTextColorClasses() }}">{{ $component->latest_status->getLabel() }}</span>
+                        <span tabindex="0" aria-describedby="component-{{ $component->id }}-updated" class="text-sm font-semibold tracking-tight {{ $component->latest_status->getTextColorClasses() }}">{{ $component->latest_status->getLabel() }}</span>
                     @endif
                 </div>
 
                 <div x-show="tooltipOpen"
+                     id="component-{{ $component->id }}-updated"
+                     role="tooltip"
                      x-cloak
                      x-transition.opacity
                      x-anchor.left.offset.8="$refs.badgeAnchor"
@@ -61,4 +63,4 @@ class="pointer-events-none z-10 w-max max-w-sm rounded-md bg-zinc-900 px-3 py-2
         @endunless
     </div>
 </li>
-{{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_BODY_AFTER) }}
+{{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENTS_AFTER) }}