Add status monitoring

2025-02-06 09:50:48 -05:00
parent 2ff728f7b8
commit 29b0bc6806
8 changed files with 367 additions and 48 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1 @@
+VITE_UPTIME_API_KEY=uk1_iMTE6cHqoyMJsch2K7607XsfYqtMIDRcemPp039p
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "@radix-ui/react-dropdown-menu": "^2.1.6",
        "@radix-ui/react-separator": "^1.1.2",
        "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.1.8",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "lucide-react": "^0.474.0",
@@ -1555,6 +1556,40 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
+      "integrity": "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-use-callback-ref": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1657,6 +1692,29 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/rect": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.474.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,11 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Separator } from "@/components/ui/separator"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
-import { Moon, Sun } from "lucide-react"
+import { Moon, Sun, Monitor, CheckCircle2, XCircle, AlertCircle, Clock } from "lucide-react"
 import { useTheme } from "@/components/theme-provider"
+import { useMetrics } from "./hooks/useMetrics"
+import { ServiceStatus } from "./types/metrics"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { 
  Server, 
  Box, 
@@ -30,6 +32,7 @@ interface ServiceCard {
  url: string
  icon: React.ReactNode
  category: 'system' | 'media' | 'monitoring' | 'tools' | 'acot' | 'home'
+  monitorName?: string // Optional monitor name that matches Uptime Kuma
 }

 const services: ServiceCard[] = [
@@ -59,7 +62,8 @@ const services: ServiceCard[] = [
    description: "Synology NAS",
    url: "https://diskstation.kent.pw",
    icon: <HardDrive className="h-6 w-6" />,
-    category: "system"
+    category: "system",
+    monitorName: "Synology Diskstation"
  },
  {
    name: "Plex",
@@ -101,21 +105,24 @@ const services: ServiceCard[] = [
    description: "Network Ad Blocking",
    url: "https://adguard.kent.pw",
    icon: <Shield className="h-6 w-6" />,
-    category: "system"
+    category: "system",
+    monitorName: "Adguard Home"
  },
  {
    name: "NocoDB",
    description: "Database Platform",
    url: "https://noco.kent.pw",
    icon: <Database className="h-6 w-6" />,
-    category: "tools"
+    category: "tools",
+    monitorName: "NocoDB"
  },
  {
    name: "IT Tools",
    description: "Developer Utilities",
    url: "https://ittools.kent.pw",
    icon: <Settings className="h-6 w-6" />,
-    category: "tools"
+    category: "tools",
+    monitorName: "IT Tools"
  },
  {
    name: "Firefox",
@@ -129,14 +136,16 @@ const services: ServiceCard[] = [
    description: "Network Speed Monitor",
    url: "https://speedtest.kent.pw",
    icon: <Gauge className="h-6 w-6" />,
-    category: "monitoring"
+    category: "monitoring",
+    monitorName: "Speedtest Tracker"
  },
  {
    name: "Drive",
    description: "File Storage",
    url: "https://drive.kent.pw",
    icon: <HardDrive className="h-6 w-6" />,
-    category: "tools"
+    category: "tools",
+    monitorName: "Synology Drive"
  },
  {
    name: "Dashboard",
@@ -169,33 +178,82 @@ const services: ServiceCard[] = [
 ]

 function ThemeToggle() {
-  const { setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
+
+  const cycleTheme = () => {
+    if (theme === 'light') setTheme('dark')
+    else if (theme === 'dark') setTheme('system')
+    else setTheme('light')
+  }

  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    <Button 
+      variant="outline" 
+      size="icon" 
+      onClick={cycleTheme}
+      className="relative w-10 h-10"
+    >
+      <Sun className={`h-[1.2rem] w-[1.2rem] transition-all ${
+        theme === 'light' ? 'scale-100 rotate-0' : 'scale-0 rotate-90'
+      }`} />
+      <Moon className={`absolute h-[1.2rem] w-[1.2rem] transition-all ${
+        theme === 'dark' ? 'scale-100 rotate-0' : 'scale-0 rotate-90'
+      }`} />
+      <Monitor className={`absolute h-[1.2rem] w-[1.2rem] transition-all ${
+        theme === 'system' ? 'scale-100 rotate-0' : 'scale-0 rotate-90'
+      }`} />
      <span className="sr-only">Toggle theme</span>
    </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
  )
 }

-function ServiceSection({ title, services }: { title: string, services: ServiceCard[] }) {
+function StatusIndicator({ status, responseTime, certDaysRemaining }: { 
+  status: ServiceStatus, 
+  responseTime: number,
+  certDaysRemaining: number 
+}) {
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'up':
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />
+      case 'down':
+        return <XCircle className="h-4 w-4 text-red-500" />
+      case 'pending':
+        return <Clock className="h-4 w-4 text-yellow-500" />
+      case 'maintenance':
+        return <AlertCircle className="h-4 w-4 text-blue-500" />
+    }
+  }
+
+  const getStatusText = () => {
+    const statusText = status.charAt(0).toUpperCase() + status.slice(1)
+    const responseTimeText = `Response time: ${responseTime}ms`
+    const certText = certDaysRemaining > 0 
+      ? `SSL cert expires in ${certDaysRemaining} days`
+      : 'SSL cert expired'
+
+    return `${statusText} • ${responseTimeText} • ${certText}`
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          {getStatusIcon()}
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{getStatusText()}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+function ServiceSection({ title, services, metrics }: { 
+  title: string, 
+  services: ServiceCard[],
+  metrics: Record<string, any>
+}) {
  return (
    <div className="space-y-4">
      <div className="flex items-center">
@@ -204,6 +262,12 @@ function ServiceSection({ title, services }: { title: string, services: ServiceC
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
        {services.map((service) => {
+          const serviceMetrics = metrics[service.monitorName || service.name] || {
+            status: 'pending',
+            responseTime: 0,
+            certDaysRemaining: 0
+          }
+
          // Get background color based on service
          const bgColor = (() => {
            switch (service.name) {
@@ -283,9 +347,16 @@ function ServiceSection({ title, services }: { title: string, services: ServiceC
              className="transition-transform hover:scale-105"
            >
              <Card className={bgColor}>
-                <CardHeader className="flex flex-row items-center space-y-0 pb-2">
+                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                  <div className="flex items-center">
                    <div className={iconColor}>{service.icon}</div>
                    <CardTitle className="ml-2">{service.name}</CardTitle>
+                  </div>
+                  <StatusIndicator 
+                    status={serviceMetrics.status}
+                    responseTime={serviceMetrics.responseTime}
+                    certDaysRemaining={serviceMetrics.certDaysRemaining}
+                  />
                </CardHeader>
                <CardContent>
                  <CardDescription>{service.description}</CardDescription>
@@ -300,6 +371,7 @@ function ServiceSection({ title, services }: { title: string, services: ServiceC
 }

 function App() {
+  const { metrics, loading, error } = useMetrics(import.meta.env.VITE_UPTIME_API_KEY)
  const systemServices = services.filter(s => s.category === 'system')
  const mediaServices = services.filter(s => s.category === 'media')
  const monitoringServices = services.filter(s => s.category === 'monitoring')
@@ -313,12 +385,12 @@ function App() {
        <h1 className="text-4xl font-bold">Kent.pw Homepage</h1>
        <ThemeToggle />
      </div>
-      <ServiceSection title="System" services={systemServices} />
-      <ServiceSection title="Media" services={mediaServices} />
-      <ServiceSection title="Monitoring" services={monitoringServices} />
-      <ServiceSection title="Tools" services={toolServices} />
-      <ServiceSection title="ACOT" services={acotServices} />
-      <ServiceSection title="Home" services={homeServices} />
+      <ServiceSection title="System" services={systemServices} metrics={metrics} />
+      <ServiceSection title="Media" services={mediaServices} metrics={metrics} />
+      <ServiceSection title="Monitoring" services={monitoringServices} metrics={metrics} />
+      <ServiceSection title="Tools" services={toolServices} metrics={metrics} />
+      <ServiceSection title="ACOT" services={acotServices} metrics={metrics} />
+      <ServiceSection title="Home" services={homeServices} metrics={metrics} />
    </div>
  )
 }
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/hooks/useMetrics.ts
+++ b/src/hooks/useMetrics.ts
@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react'
+import { MetricsData, ServiceMetrics } from '../types/metrics'
+
+const parseMetricsData = (data: string): MetricsData => {
+  const metrics: MetricsData = {}
+  const lines = data.split('\n')
+
+  // Helper to extract value from a metrics line
+  const getValue = (line: string) => {
+    const match = line.match(/\} (\d+(\.\d+)?)$/)
+    return match ? parseFloat(match[1]) : 0
+  }
+
+  // Helper to extract monitor name from a metrics line
+  const getMonitorName = (line: string) => {
+    const match = line.match(/monitor_name="([^"]+)"/)
+    return match ? match[1] : ''
+  }
+
+  lines.forEach(line => {
+    if (line.startsWith('#') || !line.trim()) return
+
+    if (line.includes('monitor_status{')) {
+      const name = getMonitorName(line)
+      const status = getValue(line)
+      
+      if (!metrics[name]) {
+        metrics[name] = {
+          name,
+          status: status === 1 ? 'up' : status === 0 ? 'down' : status === 2 ? 'pending' : 'maintenance',
+          responseTime: 0,
+          certDaysRemaining: 0,
+          certValid: false
+        }
+      } else {
+        metrics[name].status = status === 1 ? 'up' : status === 0 ? 'down' : status === 2 ? 'pending' : 'maintenance'
+      }
+    }
+
+    if (line.includes('monitor_response_time{')) {
+      const name = getMonitorName(line)
+      const responseTime = getValue(line)
+      
+      if (!metrics[name]) {
+        metrics[name] = {
+          name,
+          status: 'pending',
+          responseTime,
+          certDaysRemaining: 0,
+          certValid: false
+        }
+      } else {
+        metrics[name].responseTime = responseTime
+      }
+    }
+
+    if (line.includes('monitor_cert_days_remaining{')) {
+      const name = getMonitorName(line)
+      const days = getValue(line)
+      
+      if (!metrics[name]) {
+        metrics[name] = {
+          name,
+          status: 'pending',
+          responseTime: 0,
+          certDaysRemaining: days,
+          certValid: false
+        }
+      } else {
+        metrics[name].certDaysRemaining = days
+      }
+    }
+
+    if (line.includes('monitor_cert_is_valid{')) {
+      const name = getMonitorName(line)
+      const isValid = getValue(line) === 1
+      
+      if (!metrics[name]) {
+        metrics[name] = {
+          name,
+          status: 'pending',
+          responseTime: 0,
+          certDaysRemaining: 0,
+          certValid: isValid
+        }
+      } else {
+        metrics[name].certValid = isValid
+      }
+    }
+  })
+
+  return metrics
+}
+
+export function useMetrics(apiKey: string) {
+  const [metrics, setMetrics] = useState<MetricsData>({})
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      try {
+        const response = await fetch('/api/metrics')
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch metrics')
+        }
+
+        const data = await response.text()
+        const parsedMetrics = parseMetricsData(data)
+        setMetrics(parsedMetrics)
+        setError(null)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchMetrics()
+    const interval = setInterval(fetchMetrics, 30000) // Refresh every 30 seconds
+
+    return () => clearInterval(interval)
+  }, []) // Remove apiKey dependency since we're using it in the proxy
+
+  return { metrics, loading, error }
+} 
--- a/src/types/metrics.ts
+++ b/src/types/metrics.ts
@@ -0,0 +1,13 @@
+export interface ServiceMetrics {
+  name: string
+  status: 'up' | 'down' | 'pending' | 'maintenance'
+  responseTime: number
+  certDaysRemaining: number
+  certValid: boolean
+}
+
+export interface MetricsData {
+  [serviceName: string]: ServiceMetrics
+}
+
+export type ServiceStatus = 'up' | 'down' | 'pending' | 'maintenance' 
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,12 @@
 import path from "path"
 import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
+import { defineConfig, loadEnv } from "vite"

-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  const apiKey = env.VITE_UPTIME_API_KEY
+
+  return {
    plugins: [react()],
    resolve: {
      alias: {
@@ -11,5 +15,18 @@ export default defineConfig({
    },
    server: {
      port: 4444,
+      proxy: {
+        '/api/metrics': {
+          target: 'https://uptime.kent.pw',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+          configure: (proxy, options) => {
+            proxy.on('proxyReq', (proxyReq, req, res) => {
+              proxyReq.setHeader('Authorization', `Basic ${Buffer.from(':' + apiKey).toString('base64')}`)
+            })
+          }
+        }
+      }
+    }
  }
 })
				`@@ -0,0 +1 @@`
				`VITE_UPTIME_API_KEY=uk1_iMTE6cHqoyMJsch2K7607XsfYqtMIDRcemPp039p`