Initial Release

2025-05-09 21:28:07 +07:00
commit 0c6cd18e6f
244 changed files with 50633 additions and 0 deletions
@@ -0,0 +1,74 @@
+
+import { useState, useEffect } from "react";
+import { 
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "@/components/ui/dialog";
+import { Service } from "@/types/service.types";
+import { ServiceUptimeHistory } from "@/components/services/ServiceUptimeHistory";
+import { useTheme } from "@/contexts/ThemeContext";
+import { DateRangeFilter, DateRangeOption } from "@/components/services/DateRangeFilter";
+
+interface ServiceHistoryDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedService: Service | null;
+}
+
+export const ServiceHistoryDialog = ({
+  isOpen,
+  onOpenChange,
+  selectedService,
+}: ServiceHistoryDialogProps) => {
+  const { theme } = useTheme();
+  const [startDate, setStartDate] = useState<Date>(new Date(Date.now() - 24 * 60 * 60 * 1000)); // Default to 24h ago
+  const [endDate, setEndDate] = useState<Date>(new Date());
+  
+  // Reset date range when dialog opens to ensure fresh data
+  useEffect(() => {
+    if (isOpen) {
+      setStartDate(new Date(Date.now() - 24 * 60 * 60 * 1000));
+      setEndDate(new Date());
+    }
+  }, [isOpen]);
+  
+  // Handle date range filter changes
+  const handleDateRangeChange = (start: Date, end: Date, option: DateRangeOption) => {
+    console.log(`ServiceHistoryDialog: Date range changed to ${start.toISOString()} - ${end.toISOString()}`);
+    setStartDate(start);
+    setEndDate(end);
+  };
+  
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className={`${theme === 'dark' ? 'bg-black text-white border-gray-800' : 'bg-background text-foreground border-border'} sm:max-w-[800px]`}>
+        <DialogHeader>
+          <DialogTitle className="text-xl">
+            {selectedService?.name} - Uptime History
+          </DialogTitle>
+          <DialogDescription className={theme === 'dark' ? 'text-gray-400' : 'text-muted-foreground'}>
+            Showing the most recent uptime checks for this service.
+            {selectedService?.interval && (
+              <span> Checked every {selectedService.interval} seconds.</span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="mb-4">
+          <DateRangeFilter onRangeChange={handleDateRangeChange} />
+        </div>
+        
+        {selectedService && (
+          <ServiceUptimeHistory 
+            serviceId={selectedService.id} 
+            startDate={startDate}
+            endDate={endDate}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};