feat: add metrics components to frontend

package.json

@@ -23,5 +23,9 @@
         "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.4.13",
         "vite": "^5.4"
+    },
+    "dependencies": {
+        "chart.js": "^4.4.7",
+        "chartjs-adapter-moment": "^1.0.1"
     }
 }

resources/js/cachet.js

@@ -1,13 +1,20 @@
+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()

resources/views/components/component-group.blade.php

@@ -1,12 +1,15 @@
 @props(['componentGroup' => null])
 
 {{ \Cachet\Facades\CachetView::renderHook(\Cachet\View\RenderHook::STATUS_PAGE_COMPONENT_GROUPS_BEFORE) }}
-<div x-data x-disclosure {{ $attributes
-    ->merge(array_filter([
-        'default-open' => $componentGroup->isExpanded(),
-    ]))
-    ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
-    }}>
+<div x-data x-disclosure {{
+    $attributes
+        ->merge(
+            array_filter([
+                'default-open' => $componentGroup->isExpanded(),
+            ]),
+        )
+        ->class(['overflow-hidden rounded-lg border dark:border-zinc-700'])
+}}>
     <div class="flex items-center justify-between bg-white p-4 dark:border-zinc-700 dark:bg-white/5">
         <button x-disclosure:button class="flex items-center gap-2 text-zinc-500 dark:text-zinc-300">
             <h3 class="text-lg font-semibold">
@@ -15,17 +18,17 @@
             <x-heroicon-o-chevron-up ::class="!$disclosure.isOpen && 'rotate-180'" class="size-4 transition" />
         </button>
 
-        @if(($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
-        <span class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
-            {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
-        </span>
+        @if (($incidentCount = $componentGroup->components->sum('incidents_count')) > 0)
+            <span class="rounded border border-zinc-800 px-2 py-1 text-xs font-semibold text-zinc-800 dark:border-zinc-600 dark:text-zinc-400">
+                {{ trans_choice('cachet::component_group.incident_count', $incidentCount) }}
+            </span>
         @endif
     </div>
 
     <div x-disclosure:panel x-collapse class="flex flex-col divide-y bg-white dark:bg-white/5">
         <ul class="divide-y dark:divide-zinc-700">
-            @foreach($componentGroup->components as $component)
-            <x-cachet::component :component="$component" />
+            @foreach ($componentGroup->components as $component)
+                <x-cachet::component :component="$component" />
             @endforeach
         </ul>
     </div>

resources/views/components/metric.blade.php

@@ -0,0 +1,43 @@
+@props([
+    'metric',
+])
+
+@use('\Cachet\Enums\MetricViewEnum')
+
+<div x-data="chart">
+    <div class="flex flex-col gap-2">
+        <div class="flex items-center gap-1.5">
+            <div class="font-semibold leading-6">{{ $metric->name }}</div>
+
+            <div x-data x-popover class="flex items-center">
+                <button x-ref="anchor" x-popover:button>
+                    <x-heroicon-o-question-mark-circle class="size-4 text-zinc-500 dark:text-zinc-300" />
+                </button>
+                <div x-popover:panel x-cloak x-transition.opacity x-anchor.right.offset.8="$refs.anchor" class="rounded bg-white px-2 py-1 text-xs font-medium text-zinc-800 drop-shadow dark:text-zinc-800">
+                    <span class="pointer-events-none absolute -left-1 top-1.5 size-4 rotate-45 bg-white"></span>
+                    <p class="relative">{{ $metric->description }}</p>
+                </div>
+            </div>
+
+            <!-- Period Selector -->
+            <select x-model="period" class="ml-auto rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-zinc-800 dark:text-gray-100">
+                @foreach ([MetricViewEnum::last_hour, MetricViewEnum::today, MetricViewEnum::week, MetricViewEnum::month] as $value)
+                    <option value="{{ $value }}">{{ $value->getLabel() }}</option>
+                @endforeach
+            </select>
+        </div>
+        <canvas x-ref="canvas" height="380" class="text-gray rounded-md bg-white p-3 shadow-sm ring-1 ring-gray-900/5 dark:bg-zinc-800 dark:text-white dark:ring-gray-100/10"></canvas>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('chart', () => ({
+            metric: {{ Js::from($metric) }},
+            period: {{ Js::from($metric->default_view) }},
+            points: [[], [], [], []],
+            chart: null,
+            init,
+        }))
+    })
+</script>

resources/views/components/metrics.blade.php

@@ -0,0 +1,125 @@
+<script>
+    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)
+
+    const MetricView = {{
+        Js::from([
+            'last_hour' => \Cachet\Enums\MetricViewEnum::last_hour->value,
+            'today' => \Cachet\Enums\MetricViewEnum::today->value,
+            'week' => \Cachet\Enums\MetricViewEnum::week->value,
+            'month' => \Cachet\Enums\MetricViewEnum::month->value,
+        ])
+    }}
+
+    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 getThemeColors() {
+        const fontColor = getFontColor()
+        const accent = `rgba(${getCssVar('--accent')}, 1)`
+        const accentBackground = `rgba(${getCssVar('--accent-background')}, 0.2)`
+
+        return {
+            fontColor: fontColor,
+            backgroundColors: [accent, accentBackground],
+            borderColor: accent,
+        }
+    }
+
+    let themeColors = getThemeColors()
+
+    function init() {
+        // Parse metric points
+        const metricPoints = this.metric.metric_points.map((point) => {
+            return {
+                x: new Date(point.x),
+                y: point.y,
+            }
+        })
+
+        // Filter points based on the selected period
+        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)
+
+        // Initialize chart
+        const chart = new Chart(this.$refs.canvas, {
+            type: 'line',
+            data: {
+                datasets: [
+                    {
+                        label: this.metric.suffix,
+                        data: this.points[this.period],
+                        fill: false,
+                        backgroundColor: themeColors.backgroundColors,
+                        borderColor: themeColors.borderColor,
+                        tension: 0.1,
+                    },
+                ],
+            },
+            options: {
+                scales: {
+                    x: {
+                        ticks: {
+                            color: themeColors.fontColor,
+                        },
+                        type: 'timeseries',
+                    },
+                    y: {
+                        ticks: {
+                            color: themeColors.fontColor,
+                        },
+                    },
+                },
+            },
+        })
+
+        this.$watch('period', () => {
+            chart.data.datasets[0].data = this.points[this.period]
+            chart.options.scales.x.time.unit = getTimeUnit(this.period)
+
+            chart.update()
+        })
+
+        function getTimeUnit(period) {
+            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.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            themeColors = getThemeColors()
+
+            chart.data.datasets[0].backgroundColor = themeColors.backgroundColors
+            chart.data.datasets[0].borderColor = themeColors.borderColor
+            chart.options.plugins.legend.labels.color = themeColors.fontColor
+            chart.options.plugins.tooltip.bodyColor = themeColors.fontColor
+            chart.options.plugins.tooltip.titleColor = themeColors.fontColor
+            chart.options.scales.x.ticks.color = themeColors.fontColor
+            chart.options.scales.y.ticks.color = themeColors.fontColor
+
+            chart.update()
+        })
+    }
+</script>
+
+<div class="flex flex-col gap-8">
+    @foreach ($metrics as $metric)
+        <x-cachet::metric :metric="$metric" />
+    @endforeach
+</div>

resources/views/status-page/index.blade.php

@@ -1,21 +1,22 @@
 <x-cachet::cachet>
     <x-cachet::header />
 
-    <div class="container mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8 flex flex-col space-y-6">
+    <div class="container mx-auto flex max-w-5xl flex-col space-y-6 px-4 py-10 sm:px-6 lg:px-8">
         <x-cachet::status-bar />
 
         <x-cachet::about />
-
-        @foreach($componentGroups as $componentGroup)
-        <x-cachet::component-group :component-group="$componentGroup"/>
+        @foreach ($componentGroups as $componentGroup)
+            <x-cachet::component-group :component-group="$componentGroup" />
         @endforeach
 
-        @foreach($ungroupedComponents as $component)
-        <x-cachet::component-ungrouped :component="$component" />
+        @foreach ($ungroupedComponents as $component)
+            <x-cachet::component-ungrouped :component="$component" />
         @endforeach
 
-        @if($schedules->isNotEmpty())
-        <x-cachet::schedules :schedules="$schedules" />
+        <x-cachet::metrics />
+
+        @if ($schedules->isNotEmpty())
+            <x-cachet::schedules :schedules="$schedules" />
         @endif
 
         <x-cachet::incident-timeline />