Feat: Add Heatmap button to service detail page

- Adds a "Heatmap" button to the service detail page, displaying a monthly health heatmap of the service, with statuses color-coded as green, red, and warning (yellow/orange).
2025-07-21 00:57:04 +07:00
parent c098ecb6bf
commit e5afe276ee
4 changed files with 356 additions and 62 deletions
@@ -0,0 +1,97 @@
+
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { HeatmapChart } from "./HeatmapChart";
+import { UptimeData } from "@/types/service.types";
+import { addMonths, subMonths, format } from "date-fns";
+
+interface HeatmapDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  serviceName: string;
+  uptimeData: UptimeData[];
+}
+
+export const HeatmapDialog = ({
+  open,
+  onOpenChange,
+  serviceName,
+  uptimeData
+}: HeatmapDialogProps) => {
+  const [selectedMonth, setSelectedMonth] = useState(new Date());
+
+  const handlePreviousMonth = () => {
+    setSelectedMonth(prev => subMonths(prev, 1));
+  };
+
+  const handleNextMonth = () => {
+    setSelectedMonth(prev => addMonths(prev, 1));
+  };
+
+  const handleCurrentMonth = () => {
+    setSelectedMonth(new Date());
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto bg-slate-900 border-slate-700">
+        <DialogHeader className="pb-4">
+          <DialogTitle className="text-xl font-semibold text-white">
+            Health Heatmap - {serviceName}
+          </DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Monthly overview of service health status with daily breakdown
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-6">
+          {/* Month Navigation */}
+          <div className="flex items-center justify-between">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePreviousMonth}
+              className="flex items-center gap-2 bg-slate-800 border-slate-600 text-white hover:bg-slate-700"
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Previous
+            </Button>
+            
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleCurrentMonth}
+              className="bg-slate-700 text-white hover:bg-slate-600"
+            >
+              Current Month
+            </Button>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNextMonth}
+              className="flex items-center gap-2 bg-slate-800 border-slate-600 text-white hover:bg-slate-700"
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+          
+          {/* Heatmap Chart */}
+          <HeatmapChart 
+            uptimeData={uptimeData} 
+            selectedMonth={selectedMonth}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};