Merge pull request #36 from operacle/develop
feat: Implement Operational and Public Status Page Feature
This commit is contained in:
Tola Leng
+18
-14
@@ -1,17 +1,21 @@
|
|||||||
The MIT License (MIT)
|
MIT License
|
||||||
Copyright (c) 2025, Tola Leng
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
Copyright (c) 2025 Tola Leng
|
||||||
and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
||||||
including without limitation the rights to use, copy, modify, merge, publish, distribute,
|
|
||||||
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
|
|
||||||
is furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all copies or
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
substantial portions of the Software.
|
of this software and associated documentation files (the “Software”), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
|
The above copyright notice and this permission notice shall be included in all
|
||||||
BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
copies or substantial portions of the Software.
|
||||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
|
|
||||||
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|||||||
@@ -28,8 +28,15 @@ CheckCle is an Open Source solution for seamless, real-time monitoring of full-s
|
|||||||
* ✅ x86_64 PCs, laptops, servers (amd64)
|
* ✅ x86_64 PCs, laptops, servers (amd64)
|
||||||
* ✅ Modern Raspberry Pi 3/4/5 with (64-bit OS), Apple Silicon Macs (arm64)
|
* ✅ Modern Raspberry Pi 3/4/5 with (64-bit OS), Apple Silicon Macs (arm64)
|
||||||
|
|
||||||
### Installation with Docker Run and Compose
|
### Install CheckCle using one of the options below.
|
||||||
1. Copy ready docker run command
|
|
||||||
|
|
||||||
|
1. CheckCle One-Click Installation - Just copy and run on terminal
|
||||||
|
```bash
|
||||||
|
curl -fsSL https://checkcle.io/install.sh | bash
|
||||||
|
|
||||||
|
```
|
||||||
|
2. Install with docker run. Just copy ready docker run command below
|
||||||
```bash
|
```bash
|
||||||
docker run -d \
|
docker run -d \
|
||||||
--name checkcle \
|
--name checkcle \
|
||||||
@@ -40,7 +47,7 @@ docker run -d \
|
|||||||
operacle/checkcle:latest
|
operacle/checkcle:latest
|
||||||
|
|
||||||
```
|
```
|
||||||
2. Docker Compose - Recommended
|
3. Install with Docker compose Configuration.
|
||||||
```bash
|
```bash
|
||||||
|
|
||||||
version: '3.9'
|
version: '3.9'
|
||||||
@@ -87,7 +94,7 @@ services:
|
|||||||
- ✅ Incident Management
|
- ✅ Incident Management
|
||||||
- [ ] Uptime monitoring (PING - Inprogress)
|
- [ ] Uptime monitoring (PING - Inprogress)
|
||||||
- [ ] Infrastructure Server Monitoring
|
- [ ] Infrastructure Server Monitoring
|
||||||
- [ ] Operational Status / Public Status Pages
|
- ✅ Operational Status / Public Status Pages
|
||||||
- [ ] Uptime monitoring (TCP, PING, DNS)
|
- [ ] Uptime monitoring (TCP, PING, DNS)
|
||||||
- ✅ System Setting Panel and Mail Settings
|
- ✅ System Setting Panel and Mail Settings
|
||||||
- ✅ User Permission Roles
|
- ✅ User Permission Roles
|
||||||
|
|||||||
@@ -17,6 +17,8 @@ import Profile from "./pages/Profile";
|
|||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
import SslDomain from "./pages/SslDomain";
|
import SslDomain from "./pages/SslDomain";
|
||||||
import ScheduleIncident from "./pages/ScheduleIncident";
|
import ScheduleIncident from "./pages/ScheduleIncident";
|
||||||
|
import OperationalPage from "./pages/OperationalPage";
|
||||||
|
import PublicStatusPage from "./pages/PublicStatusPage";
|
||||||
|
|
||||||
// Create a Protected route component
|
// Create a Protected route component
|
||||||
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
|
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
|
||||||
@@ -111,6 +113,16 @@ const App = () => {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/operational-page"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<OperationalPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{/* Public status page route */}
|
||||||
|
<Route path="/status/:slug" element={<PublicStatusPage />} />
|
||||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react";
|
import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react";
|
||||||
import { useTheme } from "@/contexts/ThemeContext";
|
import { useTheme } from "@/contexts/ThemeContext";
|
||||||
import { Link, useLocation } from "react-router-dom";
|
import { Link, useLocation } from "react-router-dom";
|
||||||
@@ -71,10 +70,10 @@ export const Sidebar = ({
|
|||||||
<Calendar className={`${mainIconSize} text-emerald-400`} />
|
<Calendar className={`${mainIconSize} text-emerald-400`} />
|
||||||
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("scheduleIncident")}</span>}
|
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("scheduleIncident")}</span>}
|
||||||
</Link>
|
</Link>
|
||||||
<div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
|
<Link to="/operational-page" className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${location.pathname === '/operational-page' ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
|
||||||
<BarChart2 className={`${mainIconSize} text-amber-400`} />
|
<BarChart2 className={`${mainIconSize} text-amber-400`} />
|
||||||
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("operationalPage")}</span>}
|
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("operationalPage")}</span>}
|
||||||
</div>
|
</Link>
|
||||||
<div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
|
<div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
|
||||||
<LineChart className={`${mainIconSize} text-rose-400`} />
|
<LineChart className={`${mainIconSize} text-rose-400`} />
|
||||||
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("reports")}</span>}
|
{!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("reports")}</span>}
|
||||||
|
|||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Plus, X, Server, Shield, AlertTriangle } from 'lucide-react';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { serviceService } from '@/services/serviceService';
|
||||||
|
|
||||||
|
interface ComponentsSelectorProps {
|
||||||
|
selectedComponents: Partial<StatusPageComponentRecord>[];
|
||||||
|
onComponentsChange: (components: Partial<StatusPageComponentRecord>[]) => void;
|
||||||
|
onComponentDelete?: (componentId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const componentTypes = [
|
||||||
|
{ value: 'uptime', label: 'Uptime Service', icon: Server },
|
||||||
|
{ value: 'ssl', label: 'SSL Certificate', icon: Shield },
|
||||||
|
{ value: 'incident', label: 'Incident Monitoring', icon: AlertTriangle },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ComponentsSelector = ({ selectedComponents, onComponentsChange, onComponentDelete }: ComponentsSelectorProps) => {
|
||||||
|
const [showAddForm, setShowAddForm] = useState(false);
|
||||||
|
const [newComponent, setNewComponent] = useState({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
service_id: '',
|
||||||
|
server_id: '',
|
||||||
|
display_order: selectedComponents.length + 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch uptime services for the dropdown
|
||||||
|
const { data: services = [] } = useQuery({
|
||||||
|
queryKey: ['services'],
|
||||||
|
queryFn: serviceService.getServices,
|
||||||
|
});
|
||||||
|
|
||||||
|
const addComponent = () => {
|
||||||
|
if (!newComponent.name.trim()) return;
|
||||||
|
|
||||||
|
const component: Partial<StatusPageComponentRecord> = {
|
||||||
|
...newComponent,
|
||||||
|
operational_status_id: '', // Will be set when page is created
|
||||||
|
};
|
||||||
|
|
||||||
|
onComponentsChange([...selectedComponents, component]);
|
||||||
|
setNewComponent({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
service_id: '',
|
||||||
|
server_id: '',
|
||||||
|
display_order: selectedComponents.length + 2,
|
||||||
|
});
|
||||||
|
setShowAddForm(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeComponent = async (index: number) => {
|
||||||
|
const component = selectedComponents[index];
|
||||||
|
|
||||||
|
// If component has an ID, it exists in database and needs to be deleted
|
||||||
|
if (component.id && onComponentDelete) {
|
||||||
|
await onComponentDelete(component.id);
|
||||||
|
} else {
|
||||||
|
// For new components not yet saved, just remove from local state
|
||||||
|
const updated = selectedComponents.filter((_, i) => i !== index);
|
||||||
|
onComponentsChange(updated);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Server className="h-5 w-5" />
|
||||||
|
Status Page Components
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Add monitoring components like uptime services, SSL certificates, and incident tracking
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{selectedComponents.length > 0 && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Selected Components</Label>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{selectedComponents.map((component, index) => (
|
||||||
|
<div key={component.id || index} className="flex items-center justify-between p-3 border rounded-lg">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium">{component.name}</div>
|
||||||
|
{component.description && (
|
||||||
|
<div className="text-sm text-muted-foreground">{component.description}</div>
|
||||||
|
)}
|
||||||
|
<div className="flex gap-2 mt-1">
|
||||||
|
{component.service_id && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
Service: {services.find(s => s.id === component.service_id)?.name || component.service_id}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{component.server_id && (
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
Server: {component.server_id}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => removeComponent(index)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!showAddForm ? (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowAddForm(true)}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Component
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="border rounded-lg p-4 space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="component-name">Component Name</Label>
|
||||||
|
<Input
|
||||||
|
id="component-name"
|
||||||
|
placeholder="e.g., Main Website"
|
||||||
|
value={newComponent.name}
|
||||||
|
onChange={(e) => setNewComponent({ ...newComponent, name: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="display-order">Display Order</Label>
|
||||||
|
<Input
|
||||||
|
id="display-order"
|
||||||
|
type="number"
|
||||||
|
value={newComponent.display_order}
|
||||||
|
onChange={(e) => setNewComponent({ ...newComponent, display_order: parseInt(e.target.value) || 1 })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="component-description">Description (Optional)</Label>
|
||||||
|
<Textarea
|
||||||
|
id="component-description"
|
||||||
|
placeholder="Brief description of this component"
|
||||||
|
value={newComponent.description}
|
||||||
|
onChange={(e) => setNewComponent({ ...newComponent, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="service-id">Uptime Service (Optional)</Label>
|
||||||
|
<Select onValueChange={(value) => setNewComponent({ ...newComponent, service_id: value })}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select an uptime service" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="z-50 bg-white border shadow-lg">
|
||||||
|
{services.map((service) => (
|
||||||
|
<SelectItem key={service.id} value={service.id}>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className={`w-2 h-2 rounded-full ${
|
||||||
|
service.status === 'up' ? 'bg-green-500' :
|
||||||
|
service.status === 'down' ? 'bg-red-500' :
|
||||||
|
'bg-yellow-500'
|
||||||
|
}`} />
|
||||||
|
{service.name}
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label htmlFor="server-id">Server ID (Optional)</Label>
|
||||||
|
<Input
|
||||||
|
id="server-id"
|
||||||
|
placeholder="server_456"
|
||||||
|
value={newComponent.server_id}
|
||||||
|
onChange={(e) => setNewComponent({ ...newComponent, server_id: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={addComponent} disabled={!newComponent.name.trim()}>
|
||||||
|
Add Component
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => setShowAddForm(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<Label>Quick Add Templates</Label>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-2">
|
||||||
|
{componentTypes.map((type) => {
|
||||||
|
const Icon = type.icon;
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={type.value}
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
const component: Partial<StatusPageComponentRecord> = {
|
||||||
|
name: type.label,
|
||||||
|
description: `Monitor ${type.label.toLowerCase()}`,
|
||||||
|
service_id: '',
|
||||||
|
server_id: '',
|
||||||
|
display_order: selectedComponents.length + 1,
|
||||||
|
operational_status_id: '',
|
||||||
|
};
|
||||||
|
onComponentsChange([...selectedComponents, component]);
|
||||||
|
}}
|
||||||
|
className="justify-start"
|
||||||
|
>
|
||||||
|
<Icon className="h-4 w-4 mr-2" />
|
||||||
|
{type.label}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,280 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { useCreateOperationalPage } from '@/hooks/useOperationalPage';
|
||||||
|
import { useCreateStatusPageComponent } from '@/hooks/useStatusPageComponents';
|
||||||
|
import { ComponentsSelector } from './ComponentsSelector';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
title: z.string().min(1, 'Title is required'),
|
||||||
|
description: z.string().min(1, 'Description is required'),
|
||||||
|
slug: z.string().min(1, 'Slug is required'),
|
||||||
|
theme: z.string().min(1, 'Theme is required'),
|
||||||
|
status: z.enum(['operational', 'degraded', 'maintenance', 'major_outage']),
|
||||||
|
is_public: z.boolean(),
|
||||||
|
logo_url: z.string().optional(),
|
||||||
|
custom_domain: z.string().optional(),
|
||||||
|
custom_css: z.string().optional(),
|
||||||
|
page_style: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
export const CreateOperationalPageDialog = () => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
|
||||||
|
const createMutation = useCreateOperationalPage();
|
||||||
|
const createComponentMutation = useCreateStatusPageComponent();
|
||||||
|
|
||||||
|
const form = useForm<FormData>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
slug: '',
|
||||||
|
theme: 'default',
|
||||||
|
status: 'operational',
|
||||||
|
is_public: true,
|
||||||
|
logo_url: '',
|
||||||
|
custom_domain: '',
|
||||||
|
custom_css: '',
|
||||||
|
page_style: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (data: FormData) => {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
title: data.title,
|
||||||
|
description: data.description,
|
||||||
|
slug: data.slug,
|
||||||
|
theme: data.theme,
|
||||||
|
status: data.status,
|
||||||
|
is_public: data.is_public ? 'true' : 'false',
|
||||||
|
logo_url: data.logo_url || '',
|
||||||
|
custom_domain: data.custom_domain || '',
|
||||||
|
custom_css: data.custom_css || '',
|
||||||
|
page_style: data.page_style || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Creating operational page with payload:', payload);
|
||||||
|
const createdPage = await createMutation.mutateAsync(payload);
|
||||||
|
console.log('Created page:', createdPage);
|
||||||
|
|
||||||
|
// Create components after page is created
|
||||||
|
if (selectedComponents.length > 0) {
|
||||||
|
console.log('Creating components for page:', createdPage.id);
|
||||||
|
for (const component of selectedComponents) {
|
||||||
|
const componentPayload = {
|
||||||
|
operational_status_id: createdPage.id,
|
||||||
|
name: component.name || '',
|
||||||
|
description: component.description || '',
|
||||||
|
service_id: component.service_id || '',
|
||||||
|
server_id: component.server_id || '',
|
||||||
|
display_order: component.display_order || 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Creating component with payload:', componentPayload);
|
||||||
|
await createComponentMutation.mutateAsync(componentPayload);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setOpen(false);
|
||||||
|
form.reset();
|
||||||
|
setSelectedComponents([]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating operational page:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="gap-2">
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Create Page
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Operational Page</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Create a new operational status page to monitor your services and components.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Title</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="My Service Status" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="slug"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Slug</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="my-service-status" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Description</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
placeholder="A brief description of your operational page"
|
||||||
|
className="min-h-[80px]"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="theme"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Theme</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select theme" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="default">Default</SelectItem>
|
||||||
|
<SelectItem value="dark">Dark</SelectItem>
|
||||||
|
<SelectItem value="light">Light</SelectItem>
|
||||||
|
<SelectItem value="blue">Blue</SelectItem>
|
||||||
|
<SelectItem value="green">Green</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="status"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Initial Status</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="operational">Operational</SelectItem>
|
||||||
|
<SelectItem value="degraded">Degraded Performance</SelectItem>
|
||||||
|
<SelectItem value="maintenance">Under Maintenance</SelectItem>
|
||||||
|
<SelectItem value="major_outage">Major Outage</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="is_public"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>Public Page</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
Make this page publicly accessible
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="custom_domain"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Custom Domain (Optional)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="status.yourdomain.com" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Custom domain for your status page
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ComponentsSelector
|
||||||
|
selectedComponents={selectedComponents}
|
||||||
|
onComponentsChange={setSelectedComponents}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 pt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={createMutation.isPending || createComponentMutation.isPending}
|
||||||
|
>
|
||||||
|
{createMutation.isPending || createComponentMutation.isPending ? 'Creating...' : 'Create Page'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,353 @@
|
|||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { useUpdateOperationalPage } from '@/hooks/useOperationalPage';
|
||||||
|
import { useCreateStatusPageComponent, useStatusPageComponentsByOperationalId, useDeleteStatusPageComponent } from '@/hooks/useStatusPageComponents';
|
||||||
|
import { ComponentsSelector } from './ComponentsSelector';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
title: z.string().min(1, 'Title is required'),
|
||||||
|
description: z.string().min(1, 'Description is required'),
|
||||||
|
slug: z.string().min(1, 'Slug is required'),
|
||||||
|
theme: z.string().min(1, 'Theme is required'),
|
||||||
|
status: z.enum(['operational', 'degraded', 'maintenance', 'major_outage']),
|
||||||
|
is_public: z.boolean(),
|
||||||
|
logo_url: z.string().optional(),
|
||||||
|
custom_domain: z.string().optional(),
|
||||||
|
custom_css: z.string().optional(),
|
||||||
|
page_style: z.string().optional(),
|
||||||
|
});
|
||||||
|
|
||||||
|
type FormData = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
interface EditOperationalPageDialogProps {
|
||||||
|
page: OperationalPageRecord | null;
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EditOperationalPageDialog = ({ page, open, onOpenChange }: EditOperationalPageDialogProps) => {
|
||||||
|
const [selectedComponents, setSelectedComponents] = useState<Partial<StatusPageComponentRecord>[]>([]);
|
||||||
|
const [existingComponents, setExistingComponents] = useState<StatusPageComponentRecord[]>([]);
|
||||||
|
const [isFormSubmitting, setIsFormSubmitting] = useState(false);
|
||||||
|
const updateMutation = useUpdateOperationalPage();
|
||||||
|
const createComponentMutation = useCreateStatusPageComponent();
|
||||||
|
const deleteComponentMutation = useDeleteStatusPageComponent();
|
||||||
|
|
||||||
|
// Fetch existing components for this operational page
|
||||||
|
const { data: components = [] } = useStatusPageComponentsByOperationalId(page?.id || '');
|
||||||
|
|
||||||
|
const form = useForm<FormData>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
defaultValues: {
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
slug: '',
|
||||||
|
theme: 'default',
|
||||||
|
status: 'operational',
|
||||||
|
is_public: true,
|
||||||
|
logo_url: '',
|
||||||
|
custom_domain: '',
|
||||||
|
custom_css: '',
|
||||||
|
page_style: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (page) {
|
||||||
|
form.reset({
|
||||||
|
title: page.title,
|
||||||
|
description: page.description,
|
||||||
|
slug: page.slug,
|
||||||
|
theme: page.theme,
|
||||||
|
status: page.status,
|
||||||
|
is_public: page.is_public === 'true',
|
||||||
|
logo_url: page.logo_url || '',
|
||||||
|
custom_domain: page.custom_domain || '',
|
||||||
|
custom_css: page.custom_css || '',
|
||||||
|
page_style: page.page_style || '',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [page, form]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (components && components.length > 0) {
|
||||||
|
console.log('Loading existing components:', components);
|
||||||
|
setExistingComponents(components);
|
||||||
|
// Convert existing components to the format expected by ComponentsSelector
|
||||||
|
const existingComponentsForSelector = components.map(comp => ({
|
||||||
|
id: comp.id,
|
||||||
|
name: comp.name,
|
||||||
|
description: comp.description,
|
||||||
|
service_id: comp.service_id,
|
||||||
|
server_id: comp.server_id,
|
||||||
|
display_order: comp.display_order,
|
||||||
|
operational_status_id: comp.operational_status_id,
|
||||||
|
}));
|
||||||
|
setSelectedComponents(existingComponentsForSelector);
|
||||||
|
} else {
|
||||||
|
setExistingComponents([]);
|
||||||
|
setSelectedComponents([]);
|
||||||
|
}
|
||||||
|
}, [components]);
|
||||||
|
|
||||||
|
const handleComponentDelete = async (componentId: string) => {
|
||||||
|
try {
|
||||||
|
console.log('Deleting component:', componentId);
|
||||||
|
await deleteComponentMutation.mutateAsync(componentId);
|
||||||
|
|
||||||
|
// Update local state to remove the deleted component
|
||||||
|
setSelectedComponents(prev => prev.filter(comp => comp.id !== componentId));
|
||||||
|
setExistingComponents(prev => prev.filter(comp => comp.id !== componentId));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting component:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (data: FormData) => {
|
||||||
|
if (!page) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setIsFormSubmitting(true);
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
title: data.title,
|
||||||
|
description: data.description,
|
||||||
|
slug: data.slug,
|
||||||
|
theme: data.theme,
|
||||||
|
status: data.status,
|
||||||
|
is_public: data.is_public ? 'true' : 'false',
|
||||||
|
logo_url: data.logo_url || '',
|
||||||
|
custom_domain: data.custom_domain || '',
|
||||||
|
custom_css: data.custom_css || '',
|
||||||
|
page_style: data.page_style || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Updating operational page with payload:', payload);
|
||||||
|
await updateMutation.mutateAsync({ id: page.id, data: payload });
|
||||||
|
|
||||||
|
// Handle component changes
|
||||||
|
const currentComponentIds = existingComponents.map(c => c.id);
|
||||||
|
const newComponentsToCreate = selectedComponents.filter(comp => !comp.id);
|
||||||
|
const componentsToKeep = selectedComponents.filter(comp => comp.id && currentComponentIds.includes(comp.id));
|
||||||
|
const componentsToDelete = existingComponents.filter(comp => !selectedComponents.some(selected => selected.id === comp.id));
|
||||||
|
|
||||||
|
// Delete removed components (only if not already deleted via handleComponentDelete)
|
||||||
|
for (const component of componentsToDelete) {
|
||||||
|
if (selectedComponents.some(selected => selected.id === component.id)) {
|
||||||
|
continue; // Skip if already handled by handleComponentDelete
|
||||||
|
}
|
||||||
|
console.log('Deleting component during save:', component.id);
|
||||||
|
await deleteComponentMutation.mutateAsync(component.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new components
|
||||||
|
for (const component of newComponentsToCreate) {
|
||||||
|
const componentPayload = {
|
||||||
|
operational_status_id: page.id,
|
||||||
|
name: component.name || '',
|
||||||
|
description: component.description || '',
|
||||||
|
service_id: component.service_id || '',
|
||||||
|
server_id: component.server_id || '',
|
||||||
|
display_order: component.display_order || 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('Creating component with payload:', componentPayload);
|
||||||
|
await createComponentMutation.mutateAsync(componentPayload);
|
||||||
|
}
|
||||||
|
|
||||||
|
onOpenChange(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating operational page:', error);
|
||||||
|
} finally {
|
||||||
|
setIsFormSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit Operational Page</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Update your operational status page settings and manage components.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Title</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="My Service Status" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="slug"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Slug</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="my-service-status" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Description</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
placeholder="A brief description of your operational page"
|
||||||
|
className="min-h-[80px]"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="theme"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Theme</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select theme" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="default">Default</SelectItem>
|
||||||
|
<SelectItem value="dark">Dark</SelectItem>
|
||||||
|
<SelectItem value="light">Light</SelectItem>
|
||||||
|
<SelectItem value="blue">Blue</SelectItem>
|
||||||
|
<SelectItem value="green">Green</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="status"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Status</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="operational">Operational</SelectItem>
|
||||||
|
<SelectItem value="degraded">Degraded Performance</SelectItem>
|
||||||
|
<SelectItem value="maintenance">Under Maintenance</SelectItem>
|
||||||
|
<SelectItem value="major_outage">Major Outage</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="is_public"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<FormLabel>Public Page</FormLabel>
|
||||||
|
<FormDescription>
|
||||||
|
Make this page publicly accessible
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<Switch
|
||||||
|
checked={field.value}
|
||||||
|
onCheckedChange={field.onChange}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="custom_domain"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Custom Domain (Optional)</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="status.yourdomain.com" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Custom domain for your status page
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ComponentsSelector
|
||||||
|
selectedComponents={selectedComponents}
|
||||||
|
onComponentsChange={setSelectedComponents}
|
||||||
|
onComponentDelete={handleComponentDelete}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 pt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending}
|
||||||
|
>
|
||||||
|
{isFormSubmitting || updateMutation.isPending || createComponentMutation.isPending ? 'Updating...' : 'Update Page'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { StatusBadge } from './StatusBadge';
|
||||||
|
import { Globe, ExternalLink, Eye, Settings, Trash2 } from 'lucide-react';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
|
||||||
|
interface OperationalPageCardProps {
|
||||||
|
page: OperationalPageRecord;
|
||||||
|
onEdit?: (page: OperationalPageRecord) => void;
|
||||||
|
onView?: (page: OperationalPageRecord) => void;
|
||||||
|
onDelete?: (page: OperationalPageRecord) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const OperationalPageCard = ({ page, onEdit, onView, onDelete }: OperationalPageCardProps) => {
|
||||||
|
return (
|
||||||
|
<Card className="hover:shadow-lg transition-shadow duration-200">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex-1">
|
||||||
|
<CardTitle className="text-lg font-semibold mb-1">{page.title}</CardTitle>
|
||||||
|
<CardDescription className="text-sm text-muted-foreground">
|
||||||
|
{page.description}
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
<StatusBadge status={page.status} />
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-muted-foreground">Slug:</span>
|
||||||
|
<p className="mt-1">{page.slug}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-muted-foreground">Theme:</span>
|
||||||
|
<p className="mt-1 capitalize">{page.theme}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-muted-foreground">Public:</span>
|
||||||
|
<p className="mt-1">
|
||||||
|
<Badge variant={page.is_public === 'true' ? 'default' : 'secondary'}>
|
||||||
|
{page.is_public === 'true' ? 'Yes' : 'No'}
|
||||||
|
</Badge>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium text-muted-foreground">Updated:</span>
|
||||||
|
<p className="mt-1">{format(new Date(page.updated), 'MMM dd, yyyy')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{page.custom_domain && (
|
||||||
|
<div className="flex items-center gap-2 p-2 bg-muted rounded-md">
|
||||||
|
<Globe className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span className="text-sm font-medium">{page.custom_domain}</span>
|
||||||
|
<ExternalLink className="h-3 w-3 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2 pt-2">
|
||||||
|
{onView && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onView(page)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
<Eye className="h-4 w-4 mr-2" />
|
||||||
|
View
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{onEdit && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onEdit(page)}
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
<Settings className="h-4 w-4 mr-2" />
|
||||||
|
Edit
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{onDelete && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onDelete(page)}
|
||||||
|
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,211 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useOperationalPages, useDeleteOperationalPage } from '@/hooks/useOperationalPage';
|
||||||
|
import { CreateOperationalPageDialog } from './CreateOperationalPageDialog';
|
||||||
|
import { EditOperationalPageDialog } from './EditOperationalPageDialog';
|
||||||
|
import { OperationalPageCard } from './OperationalPageCard';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { Activity, Plus, RefreshCw } from 'lucide-react';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/components/ui/alert-dialog';
|
||||||
|
|
||||||
|
export const OperationalPageContent = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { data: pages, isLoading, error, refetch, isRefetching } = useOperationalPages();
|
||||||
|
const deleteMutation = useDeleteOperationalPage();
|
||||||
|
|
||||||
|
const [editingPage, setEditingPage] = useState<OperationalPageRecord | null>(null);
|
||||||
|
const [editDialogOpen, setEditDialogOpen] = useState(false);
|
||||||
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||||
|
const [pageToDelete, setPageToDelete] = useState<OperationalPageRecord | null>(null);
|
||||||
|
|
||||||
|
const handleEdit = (page: OperationalPageRecord) => {
|
||||||
|
setEditingPage(page);
|
||||||
|
setEditDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleView = (page: OperationalPageRecord) => {
|
||||||
|
if (page.custom_domain) {
|
||||||
|
window.open(`https://${page.custom_domain}`, '_blank');
|
||||||
|
} else {
|
||||||
|
// Navigate to the public status page route
|
||||||
|
window.open(`/status/${page.slug}`, '_blank');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (page: OperationalPageRecord) => {
|
||||||
|
setPageToDelete(page);
|
||||||
|
setDeleteDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmDelete = async () => {
|
||||||
|
if (pageToDelete) {
|
||||||
|
try {
|
||||||
|
await deleteMutation.mutateAsync(pageToDelete.id);
|
||||||
|
setDeleteDialogOpen(false);
|
||||||
|
setPageToDelete(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting page:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Activity className="h-12 w-12 text-muted-foreground mx-auto" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold mb-2">Failed to load operational pages</h3>
|
||||||
|
<p className="text-muted-foreground mb-4">
|
||||||
|
There was an error loading your operational pages. Please try again.
|
||||||
|
</p>
|
||||||
|
<Button onClick={() => refetch()} variant="outline">
|
||||||
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||||||
|
Try Again
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight mb-2">Operational Pages</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Manage your public status pages and monitor service health
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 mt-4 sm:mt-0">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => refetch()}
|
||||||
|
disabled={isRefetching}
|
||||||
|
>
|
||||||
|
<RefreshCw className={`h-4 w-4 mr-2 ${isRefetching ? 'animate-spin' : ''}`} />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
<CreateOperationalPageDialog />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{[...Array(6)].map((_, i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<div className="p-6">
|
||||||
|
<Skeleton className="h-6 w-3/4 mb-2" />
|
||||||
|
<Skeleton className="h-4 w-full mb-4" />
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-4 w-1/2" />
|
||||||
|
<Skeleton className="h-4 w-1/3" />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 mt-4">
|
||||||
|
<Skeleton className="h-8 flex-1" />
|
||||||
|
<Skeleton className="h-8 flex-1" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Empty State */}
|
||||||
|
{!isLoading && (!pages || pages.length === 0) && (
|
||||||
|
<Card className="p-12">
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<div className="mb-4">
|
||||||
|
<Activity className="h-12 w-12 text-muted-foreground mx-auto" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold mb-2">No operational pages found</h3>
|
||||||
|
<p className="text-muted-foreground mb-6">
|
||||||
|
Create your first operational page to start monitoring your services and communicate status to your users.
|
||||||
|
</p>
|
||||||
|
<CreateOperationalPageDialog />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pages Grid */}
|
||||||
|
{!isLoading && pages && pages.length > 0 && (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{pages.map((page) => (
|
||||||
|
<OperationalPageCard
|
||||||
|
key={page.id}
|
||||||
|
page={page}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onView={handleView}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats Footer */}
|
||||||
|
{!isLoading && pages && pages.length > 0 && (
|
||||||
|
<div className="mt-8 pt-6 border-t">
|
||||||
|
<div className="flex flex-wrap gap-6 text-sm text-muted-foreground">
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Total Pages:</span> {pages.length}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Public Pages:</span>{' '}
|
||||||
|
{pages.filter(p => p.is_public === 'true').length}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Operational:</span>{' '}
|
||||||
|
{pages.filter(p => p.status === 'operational').length}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Dialog */}
|
||||||
|
<EditOperationalPageDialog
|
||||||
|
page={editingPage}
|
||||||
|
open={editDialogOpen}
|
||||||
|
onOpenChange={setEditDialogOpen}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete Operational Page</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Are you sure you want to delete "{pageToDelete?.title}"? This action cannot be undone and will permanently remove the operational page and all its components.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={confirmDelete}
|
||||||
|
className="bg-red-600 hover:bg-red-700"
|
||||||
|
disabled={deleteMutation.isPending}
|
||||||
|
>
|
||||||
|
{deleteMutation.isPending ? 'Deleting...' : 'Delete'}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
|
||||||
|
interface StatusBadgeProps {
|
||||||
|
status: OperationalPageRecord['status'];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatusBadge = ({ status }: StatusBadgeProps) => {
|
||||||
|
const getStatusConfig = (status: OperationalPageRecord['status']) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'operational':
|
||||||
|
return {
|
||||||
|
label: 'Operational',
|
||||||
|
className: 'bg-green-100 text-green-800 hover:bg-green-200',
|
||||||
|
};
|
||||||
|
case 'degraded':
|
||||||
|
return {
|
||||||
|
label: 'Degraded Performance',
|
||||||
|
className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-200',
|
||||||
|
};
|
||||||
|
case 'maintenance':
|
||||||
|
return {
|
||||||
|
label: 'Under Maintenance',
|
||||||
|
className: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
|
||||||
|
};
|
||||||
|
case 'major_outage':
|
||||||
|
return {
|
||||||
|
label: 'Major Outage',
|
||||||
|
className: 'bg-red-100 text-red-800 hover:bg-red-200',
|
||||||
|
};
|
||||||
|
default:
|
||||||
|
return {
|
||||||
|
label: 'Unknown',
|
||||||
|
className: 'bg-gray-100 text-gray-800 hover:bg-gray-200',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = getStatusConfig(status);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Badge className={config.className}>
|
||||||
|
{config.label}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Server } from 'lucide-react';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
import { Service, UptimeData } from '@/types/service.types';
|
||||||
|
import { UptimeHistoryRenderer } from './UptimeHistoryRenderer';
|
||||||
|
|
||||||
|
interface ComponentsStatusSectionProps {
|
||||||
|
components: StatusPageComponentRecord[];
|
||||||
|
services: Service[];
|
||||||
|
uptimeData: Record<string, UptimeData[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ComponentsStatusSection = ({ components, services, uptimeData }: ComponentsStatusSectionProps) => {
|
||||||
|
const getServiceForComponent = (component: StatusPageComponentRecord) => {
|
||||||
|
return services.find(service => service.id === component.service_id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getComponentStatus = (component: StatusPageComponentRecord) => {
|
||||||
|
const service = getServiceForComponent(component);
|
||||||
|
return service?.status || 'unknown';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUptimePercentage = (serviceId: string) => {
|
||||||
|
const history = uptimeData[serviceId] || [];
|
||||||
|
if (history.length === 0) return 100;
|
||||||
|
|
||||||
|
const upCount = history.filter(record => record.status === 'up').length;
|
||||||
|
return Math.round((upCount / history.length) * 100 * 100) / 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (components.length === 0) {
|
||||||
|
return (
|
||||||
|
<Card className="mb-8 bg-card border-border">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-card-foreground">Services</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-foreground">Core Services</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">All core functionality</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-foreground">API Services</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">REST and GraphQL APIs</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-foreground">Database</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">Data storage and retrieval</p>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="mb-8 bg-card border-border">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-card-foreground">Components</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{components
|
||||||
|
.sort((a, b) => a.display_order - b.display_order)
|
||||||
|
.map((component) => {
|
||||||
|
const service = getServiceForComponent(component);
|
||||||
|
const status = getComponentStatus(component);
|
||||||
|
const uptime = service?.id ? getUptimePercentage(component.service_id) : 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={component.id} className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between p-4 rounded-lg border border-border bg-background/50">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Server className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-foreground">{component.name}</h3>
|
||||||
|
{component.description && (
|
||||||
|
<p className="text-sm text-muted-foreground">{component.description}</p>
|
||||||
|
)}
|
||||||
|
{service && (
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<span className="text-xs text-muted-foreground">Uptime: {uptime}%</span>
|
||||||
|
{service.responseTime > 0 && (
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
Response: {service.responseTime}ms
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
className={`${
|
||||||
|
status === 'up'
|
||||||
|
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||||
|
: status === 'down'
|
||||||
|
? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||||
|
: status === 'paused'
|
||||||
|
? 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
|
||||||
|
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{status === 'up' ? 'Operational' :
|
||||||
|
status === 'down' ? 'Down' :
|
||||||
|
status === 'paused' ? 'Paused' : 'Warning'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Individual component uptime history */}
|
||||||
|
{component.service_id && (
|
||||||
|
<UptimeHistoryRenderer
|
||||||
|
serviceId={component.service_id}
|
||||||
|
uptimeData={uptimeData}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Shield, Clock } from 'lucide-react';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
import { Service } from '@/types/service.types';
|
||||||
|
|
||||||
|
interface CurrentStatusSectionProps {
|
||||||
|
page: OperationalPageRecord;
|
||||||
|
components: StatusPageComponentRecord[];
|
||||||
|
services: Service[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const getActualStatus = (components: StatusPageComponentRecord[], services: Service[]) => {
|
||||||
|
if (components.length === 0) {
|
||||||
|
return 'operational'; // Default if no components
|
||||||
|
}
|
||||||
|
|
||||||
|
let hasDown = false;
|
||||||
|
let hasDegraded = false;
|
||||||
|
let hasMaintenance = false;
|
||||||
|
|
||||||
|
components.forEach(component => {
|
||||||
|
const service = services.find(s => s.id === component.service_id);
|
||||||
|
if (service) {
|
||||||
|
switch (service.status) {
|
||||||
|
case 'down':
|
||||||
|
hasDown = true;
|
||||||
|
break;
|
||||||
|
case 'warning':
|
||||||
|
hasDegraded = true;
|
||||||
|
break;
|
||||||
|
case 'paused':
|
||||||
|
hasMaintenance = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Priority: down > degraded > maintenance > operational
|
||||||
|
if (hasDown) return 'major_outage';
|
||||||
|
if (hasDegraded) return 'degraded';
|
||||||
|
if (hasMaintenance) return 'maintenance';
|
||||||
|
return 'operational';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusMessage = (status: OperationalPageRecord['status']) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'operational':
|
||||||
|
return 'All systems are operational';
|
||||||
|
case 'degraded':
|
||||||
|
return 'Some systems are experiencing degraded performance';
|
||||||
|
case 'maintenance':
|
||||||
|
return 'Systems are currently under maintenance';
|
||||||
|
case 'major_outage':
|
||||||
|
return 'We are experiencing a major service outage';
|
||||||
|
default:
|
||||||
|
return 'Status unknown';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: OperationalPageRecord['status']) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'operational':
|
||||||
|
return 'text-green-600 dark:text-green-400';
|
||||||
|
case 'degraded':
|
||||||
|
return 'text-yellow-600 dark:text-yellow-400';
|
||||||
|
case 'maintenance':
|
||||||
|
return 'text-blue-600 dark:text-blue-400';
|
||||||
|
case 'major_outage':
|
||||||
|
return 'text-red-600 dark:text-red-400';
|
||||||
|
default:
|
||||||
|
return 'text-muted-foreground';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CurrentStatusSection = ({ page, components, services }: CurrentStatusSectionProps) => {
|
||||||
|
const actualStatus = getActualStatus(components, services);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="mb-8 bg-card border-border">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-card-foreground">
|
||||||
|
<Shield className="h-5 w-5" />
|
||||||
|
Current Status
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<div className={`h-3 w-3 rounded-full ${
|
||||||
|
actualStatus === 'operational' ? 'bg-green-500' :
|
||||||
|
actualStatus === 'degraded' ? 'bg-yellow-500' :
|
||||||
|
actualStatus === 'maintenance' ? 'bg-blue-500' : 'bg-red-500'
|
||||||
|
}`}></div>
|
||||||
|
<span className={`text-lg font-medium ${getStatusColor(actualStatus)}`}>
|
||||||
|
{getStatusMessage(actualStatus)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<Clock className="h-4 w-4" />
|
||||||
|
<span>Last updated {format(new Date(page.updated), 'MMM dd, yyyy HH:mm')} UTC</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { UptimeData } from '@/types/service.types';
|
||||||
|
import { UptimeHistoryRenderer } from './UptimeHistoryRenderer';
|
||||||
|
|
||||||
|
interface OverallUptimeSectionProps {
|
||||||
|
uptimeData: Record<string, UptimeData[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const OverallUptimeSection = ({ uptimeData }: OverallUptimeSectionProps) => {
|
||||||
|
const getOverallUptime = () => {
|
||||||
|
const allHistories = Object.values(uptimeData);
|
||||||
|
if (allHistories.length === 0) return 99.9;
|
||||||
|
|
||||||
|
let totalRecords = 0;
|
||||||
|
let upRecords = 0;
|
||||||
|
|
||||||
|
allHistories.forEach(history => {
|
||||||
|
totalRecords += history.length;
|
||||||
|
upRecords += history.filter(record => record.status === 'up').length;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (totalRecords === 0) return 99.9;
|
||||||
|
return Math.round((upRecords / totalRecords) * 100 * 100) / 100;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="mb-8 bg-card border-border">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-card-foreground">Overall Uptime History (Last 90 days)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-1 mb-4">
|
||||||
|
{Object.keys(uptimeData).length > 0 ?
|
||||||
|
<UptimeHistoryRenderer serviceId={Object.keys(uptimeData)[0]} uptimeData={uptimeData} /> :
|
||||||
|
<UptimeHistoryRenderer serviceId="overall" uptimeData={uptimeData} />}
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm text-muted-foreground">
|
||||||
|
<span>90 days ago</span>
|
||||||
|
<span>Today</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||||
|
<div className="text-2xl font-bold text-green-600 dark:text-green-400">{getOverallUptime()}%</div>
|
||||||
|
<div className="text-sm text-green-700 dark:text-green-300">Overall uptime</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { usePublicStatusPageData } from './hooks/usePublicStatusPageData';
|
||||||
|
import { StatusPageHeader } from './StatusPageHeader';
|
||||||
|
import { CurrentStatusSection } from './CurrentStatusSection';
|
||||||
|
import { ComponentsStatusSection } from './ComponentsStatusSection';
|
||||||
|
import { OverallUptimeSection } from './OverallUptimeSection';
|
||||||
|
import { PublicStatusPageFooter } from './PublicStatusPageFooter';
|
||||||
|
|
||||||
|
export const PublicStatusPage = () => {
|
||||||
|
const { slug } = useParams<{ slug: string }>();
|
||||||
|
const { page, components, services, uptimeData, loading, error } = usePublicStatusPageData(slug);
|
||||||
|
|
||||||
|
// Apply theme to document
|
||||||
|
useEffect(() => {
|
||||||
|
if (page) {
|
||||||
|
const root = document.documentElement;
|
||||||
|
if (page.theme === 'dark') {
|
||||||
|
root.classList.add('dark');
|
||||||
|
root.classList.remove('light');
|
||||||
|
} else {
|
||||||
|
root.classList.add('light');
|
||||||
|
root.classList.remove('dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cleanup on unmount
|
||||||
|
return () => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
root.classList.remove('dark', 'light');
|
||||||
|
};
|
||||||
|
}, [page?.theme]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||||
|
<p className="text-muted-foreground">Loading status page...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !page) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-2xl font-bold text-foreground mb-2">Page Not Found</h1>
|
||||||
|
<p className="text-muted-foreground mb-4">{error || 'The requested status page could not be found.'}</p>
|
||||||
|
<Button onClick={() => window.history.back()}>Go Back</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background text-foreground">
|
||||||
|
{/* Header */}
|
||||||
|
<StatusPageHeader page={page} />
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||||
|
{/* Current Status */}
|
||||||
|
<CurrentStatusSection page={page} components={components} services={services} />
|
||||||
|
|
||||||
|
{/* Components Status */}
|
||||||
|
<ComponentsStatusSection
|
||||||
|
components={components}
|
||||||
|
services={services}
|
||||||
|
uptimeData={uptimeData}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Overall Uptime History */}
|
||||||
|
<OverallUptimeSection uptimeData={uptimeData} />
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<PublicStatusPageFooter page={page} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Custom CSS */}
|
||||||
|
{page.custom_css && (
|
||||||
|
<style dangerouslySetInnerHTML={{ __html: page.custom_css }} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
|
||||||
|
import { Globe } from 'lucide-react';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
|
||||||
|
interface PublicStatusPageFooterProps {
|
||||||
|
page: OperationalPageRecord;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PublicStatusPageFooter = ({ page }: PublicStatusPageFooterProps) => {
|
||||||
|
return (
|
||||||
|
<div className="text-center text-sm text-muted-foreground">
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-2">
|
||||||
|
<Globe className="h-4 w-4" />
|
||||||
|
{page.custom_domain ? (
|
||||||
|
<span>Status page hosted at {page.custom_domain}</span>
|
||||||
|
) : (
|
||||||
|
<span>Status page</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p>© {new Date().getFullYear()} {page.title}. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
|
||||||
|
import { StatusBadge } from '@/components/operational-page/StatusBadge';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
|
||||||
|
interface StatusPageHeaderProps {
|
||||||
|
page: OperationalPageRecord;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatusPageHeader = ({ page }: StatusPageHeaderProps) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-card shadow-sm border-b border-border">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 py-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{page.logo_url && (
|
||||||
|
<img src={page.logo_url} alt="Logo" className="h-8 w-8 rounded" />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-card-foreground">{page.title}</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{page.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<StatusBadge status={page.status} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,182 @@
|
|||||||
|
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
|
||||||
|
import { format } from 'date-fns';
|
||||||
|
import { UptimeData } from '@/types/service.types';
|
||||||
|
|
||||||
|
interface UptimeHistoryRendererProps {
|
||||||
|
serviceId: string;
|
||||||
|
uptimeData: Record<string, UptimeData[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UptimeHistoryRenderer = ({ serviceId, uptimeData }: UptimeHistoryRendererProps) => {
|
||||||
|
const renderUptimeHistory = (serviceId: string) => {
|
||||||
|
const history = uptimeData[serviceId] || [];
|
||||||
|
|
||||||
|
// Generate array for the last 90 days
|
||||||
|
const days = Array.from({ length: 90 }, (_, i) => {
|
||||||
|
const daysSinceToday = 90 - i - 1;
|
||||||
|
const date = new Date();
|
||||||
|
date.setDate(date.getDate() - daysSinceToday);
|
||||||
|
date.setHours(0, 0, 0, 0); // Set to start of day for comparison
|
||||||
|
return date;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (history.length === 0) {
|
||||||
|
// Generate mock data if no real data - showing mostly operational with some realistic incidents
|
||||||
|
return days.map((date, i) => {
|
||||||
|
// Simulate some realistic patterns - mostly up with occasional incidents
|
||||||
|
const isUp = Math.random() > 0.02; // 98% uptime simulation
|
||||||
|
const responseTime = isUp ? Math.floor(Math.random() * 200) + 50 : 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TooltipProvider key={i}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div
|
||||||
|
className={`h-8 w-1 rounded-sm cursor-pointer ${
|
||||||
|
isUp ? 'bg-green-500 hover:bg-green-600' : 'bg-red-500 hover:bg-red-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-medium">{format(date, 'MMM dd, yyyy')}</div>
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Status: {isUp ? 'Operational' : 'Incident - Down'}
|
||||||
|
</div>
|
||||||
|
{isUp && (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Response: {responseTime}ms
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isUp && (
|
||||||
|
<div className="text-muted-foreground text-red-400">
|
||||||
|
Service outage detected
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a map of dates to status records for efficient lookup and incident tracking
|
||||||
|
const dateToRecordMap = new Map();
|
||||||
|
const incidentsByDate = new Map();
|
||||||
|
|
||||||
|
history.forEach(record => {
|
||||||
|
const recordDate = new Date(record.timestamp);
|
||||||
|
recordDate.setHours(0, 0, 0, 0); // Normalize to start of day
|
||||||
|
const dateKey = recordDate.toDateString();
|
||||||
|
|
||||||
|
// Track incidents for this date
|
||||||
|
if (!incidentsByDate.has(dateKey)) {
|
||||||
|
incidentsByDate.set(dateKey, []);
|
||||||
|
}
|
||||||
|
incidentsByDate.get(dateKey).push(record);
|
||||||
|
|
||||||
|
// Keep the latest record for each day (or aggregate if needed)
|
||||||
|
if (!dateToRecordMap.has(dateKey) ||
|
||||||
|
new Date(record.timestamp) > new Date(dateToRecordMap.get(dateKey).timestamp)) {
|
||||||
|
dateToRecordMap.set(dateKey, record);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Use real uptime data mapped to the correct days with incident details
|
||||||
|
return days.map((date, i) => {
|
||||||
|
const dateKey = date.toDateString();
|
||||||
|
const record = dateToRecordMap.get(dateKey);
|
||||||
|
const incidents = incidentsByDate.get(dateKey) || [];
|
||||||
|
|
||||||
|
// Calculate uptime percentage for the day
|
||||||
|
const uptimePercentage = incidents.length > 0 ?
|
||||||
|
Math.round((incidents.filter(inc => inc.status === 'up').length / incidents.length) * 100) : 100;
|
||||||
|
|
||||||
|
// Determine color based on actual status and incident history
|
||||||
|
const getStatusColor = (status: string, incidents: UptimeData[]) => {
|
||||||
|
const downIncidents = incidents.filter(inc => inc.status === 'down').length;
|
||||||
|
const warningIncidents = incidents.filter(inc => inc.status === 'warning').length;
|
||||||
|
|
||||||
|
if (downIncidents > 0) return 'bg-red-500 hover:bg-red-600';
|
||||||
|
if (warningIncidents > 0) return 'bg-yellow-500 hover:bg-yellow-600';
|
||||||
|
|
||||||
|
switch (status) {
|
||||||
|
case 'up':
|
||||||
|
return 'bg-green-500 hover:bg-green-600';
|
||||||
|
case 'down':
|
||||||
|
return 'bg-red-500 hover:bg-red-600';
|
||||||
|
case 'paused':
|
||||||
|
return 'bg-gray-400 hover:bg-gray-500';
|
||||||
|
case 'warning':
|
||||||
|
return 'bg-yellow-500 hover:bg-yellow-600';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColor = record ? getStatusColor(record.status, incidents) : 'bg-gray-300 dark:bg-gray-600';
|
||||||
|
const statusText = record ?
|
||||||
|
record.status === 'up' ? (incidents.some(inc => inc.status === 'down') ? 'Recovered' : 'Operational') :
|
||||||
|
record.status === 'down' ? 'Incident - Down' :
|
||||||
|
record.status === 'paused' ? 'Paused' :
|
||||||
|
record.status === 'warning' ? 'Incident - Degraded' : 'Unknown'
|
||||||
|
: 'No Data';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TooltipProvider key={i}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<div
|
||||||
|
className={`h-8 w-1 rounded-sm cursor-pointer ${statusColor}`}
|
||||||
|
/>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-medium">
|
||||||
|
{format(date, 'MMM dd, yyyy')}
|
||||||
|
</div>
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Status: {statusText}
|
||||||
|
</div>
|
||||||
|
{incidents.length > 0 && (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Uptime: {uptimePercentage}% ({incidents.length} checks)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{incidents.filter(inc => inc.status === 'down').length > 0 && (
|
||||||
|
<div className="text-red-400 text-xs">
|
||||||
|
{incidents.filter(inc => inc.status === 'down').length} incident(s) detected
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{record && record.status === 'up' && record.responseTime > 0 && (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Response: {record.responseTime}ms
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{record && (
|
||||||
|
<div className="text-muted-foreground">
|
||||||
|
Last Check: {format(new Date(record.timestamp), 'HH:mm')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="ml-8 p-3 bg-background/30 rounded-lg border border-border/50">
|
||||||
|
<div className="text-sm font-medium text-foreground mb-2">90-day uptime history</div>
|
||||||
|
<div className="flex items-center gap-1 mb-2">
|
||||||
|
{renderUptimeHistory(serviceId)}
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-muted-foreground">
|
||||||
|
<span>90 days ago</span>
|
||||||
|
<span>Today</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
import { Service, UptimeData } from '@/types/service.types';
|
||||||
|
import { operationalPageService } from '@/services/operationalPageService';
|
||||||
|
import { statusPageComponentsService } from '@/services/statusPageComponentsService';
|
||||||
|
import { serviceService } from '@/services/serviceService';
|
||||||
|
import { uptimeService } from '@/services/uptimeService';
|
||||||
|
|
||||||
|
export const usePublicStatusPageData = (slug: string | undefined) => {
|
||||||
|
const [page, setPage] = useState<OperationalPageRecord | null>(null);
|
||||||
|
const [components, setComponents] = useState<StatusPageComponentRecord[]>([]);
|
||||||
|
const [services, setServices] = useState<Service[]>([]);
|
||||||
|
const [uptimeData, setUptimeData] = useState<Record<string, UptimeData[]>>({});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchPublicPage = async () => {
|
||||||
|
if (!slug) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// Fetch operational page
|
||||||
|
const pages = await operationalPageService.getOperationalPages();
|
||||||
|
const foundPage = pages.find(p => p.slug === slug && p.is_public === 'true');
|
||||||
|
|
||||||
|
if (!foundPage) {
|
||||||
|
setError('Status page not found or not public');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setPage(foundPage);
|
||||||
|
|
||||||
|
// Fetch components for this page
|
||||||
|
const pageComponents = await statusPageComponentsService.getStatusPageComponentsByOperationalId(foundPage.id);
|
||||||
|
setComponents(pageComponents);
|
||||||
|
|
||||||
|
// Fetch all services
|
||||||
|
const allServices = await serviceService.getServices();
|
||||||
|
setServices(allServices);
|
||||||
|
|
||||||
|
// Fetch uptime data for each component that has a service
|
||||||
|
const uptimePromises = pageComponents
|
||||||
|
.filter(component => component.service_id)
|
||||||
|
.map(async (component) => {
|
||||||
|
try {
|
||||||
|
const endDate = new Date();
|
||||||
|
const startDate = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000); // Last 90 days
|
||||||
|
const history = await uptimeService.getUptimeHistory(component.service_id, 2000, startDate, endDate);
|
||||||
|
return { serviceId: component.service_id, history };
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error fetching uptime for service ${component.service_id}:`, error);
|
||||||
|
return { serviceId: component.service_id, history: [] };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const uptimeResults = await Promise.all(uptimePromises);
|
||||||
|
const uptimeMap: Record<string, UptimeData[]> = {};
|
||||||
|
uptimeResults.forEach(result => {
|
||||||
|
uptimeMap[result.serviceId] = result.history;
|
||||||
|
});
|
||||||
|
setUptimeData(uptimeMap);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error fetching public page:', err);
|
||||||
|
setError('Failed to load status page');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchPublicPage();
|
||||||
|
}, [slug]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
page,
|
||||||
|
components,
|
||||||
|
services,
|
||||||
|
uptimeData,
|
||||||
|
loading,
|
||||||
|
error
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { operationalPageService } from '@/services/operationalPageService';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
import { toast } from '@/hooks/use-toast';
|
||||||
|
|
||||||
|
export const useOperationalPages = () => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['operational-pages'],
|
||||||
|
queryFn: operationalPageService.getOperationalPages,
|
||||||
|
staleTime: 30000,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useOperationalPage = (id: string) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['operational-page', id],
|
||||||
|
queryFn: () => operationalPageService.getOperationalPage(id),
|
||||||
|
enabled: !!id,
|
||||||
|
staleTime: 30000,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useUpdateOperationalPage = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }: { id: string; data: Partial<OperationalPageRecord> }) =>
|
||||||
|
operationalPageService.updateOperationalPage(id, data),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['operational-page', data.id] });
|
||||||
|
toast({
|
||||||
|
title: 'Success',
|
||||||
|
description: 'Operational page updated successfully',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to update operational page',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCreateOperationalPage = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: operationalPageService.createOperationalPage,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
|
||||||
|
toast({
|
||||||
|
title: 'Success',
|
||||||
|
description: 'Operational page created successfully',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to create operational page',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDeleteOperationalPage = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: operationalPageService.deleteOperationalPage,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['operational-pages'] });
|
||||||
|
toast({
|
||||||
|
title: 'Success',
|
||||||
|
description: 'Operational page deleted successfully',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to delete operational page',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { statusPageComponentsService } from '@/services/statusPageComponentsService';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
import { toast } from '@/hooks/use-toast';
|
||||||
|
|
||||||
|
export const useStatusPageComponents = () => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['status-page-components'],
|
||||||
|
queryFn: statusPageComponentsService.getStatusPageComponents,
|
||||||
|
staleTime: 30000,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useStatusPageComponentsByOperationalId = (operationalStatusId: string) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['status-page-components', operationalStatusId],
|
||||||
|
queryFn: () => statusPageComponentsService.getStatusPageComponentsByOperationalId(operationalStatusId),
|
||||||
|
enabled: !!operationalStatusId,
|
||||||
|
staleTime: 30000,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCreateStatusPageComponent = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: statusPageComponentsService.createStatusPageComponent,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['status-page-components'] });
|
||||||
|
toast({
|
||||||
|
title: 'Success',
|
||||||
|
description: 'Status page component created successfully',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to create status page component',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDeleteStatusPageComponent = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: statusPageComponentsService.deleteStatusPageComponent,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['status-page-components'] });
|
||||||
|
toast({
|
||||||
|
title: 'Success',
|
||||||
|
description: 'Status page component deleted successfully',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: 'Error',
|
||||||
|
description: 'Failed to delete status page component',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
@@ -2,4 +2,4 @@ import { createRoot } from 'react-dom/client'
|
|||||||
import App from './App.tsx'
|
import App from './App.tsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
createRoot(document.getElementById("root")!).render(<App />);
|
createRoot(document.getElementById("root")!).render(<App />);
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Header } from "@/components/dashboard/Header";
|
||||||
|
import { Sidebar } from "@/components/dashboard/Sidebar";
|
||||||
|
import { OperationalPageContent } from '@/components/operational-page/OperationalPageContent';
|
||||||
|
import { authService } from "@/services/authService";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const OperationalPage = () => {
|
||||||
|
// State for sidebar collapse functionality
|
||||||
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||||
|
const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
|
||||||
|
|
||||||
|
// Get current user
|
||||||
|
const currentUser = authService.getCurrentUser();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
// Handle logout
|
||||||
|
const handleLogout = () => {
|
||||||
|
authService.logout();
|
||||||
|
navigate("/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen overflow-hidden bg-background text-foreground">
|
||||||
|
<Sidebar collapsed={sidebarCollapsed} />
|
||||||
|
<div className="flex flex-col flex-1">
|
||||||
|
<Header
|
||||||
|
currentUser={currentUser}
|
||||||
|
onLogout={handleLogout}
|
||||||
|
sidebarCollapsed={sidebarCollapsed}
|
||||||
|
toggleSidebar={toggleSidebar}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 overflow-auto">
|
||||||
|
<OperationalPageContent />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OperationalPage;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { PublicStatusPage as PublicStatusPageContent } from '@/components/public/PublicStatusPage';
|
||||||
|
|
||||||
|
const PublicStatusPage = () => {
|
||||||
|
return <PublicStatusPageContent />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PublicStatusPage;
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
|
||||||
|
import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
|
||||||
|
import { OperationalPageRecord } from '@/types/operational.types';
|
||||||
|
|
||||||
|
export const operationalPageService = {
|
||||||
|
async getOperationalPages(): Promise<OperationalPageRecord[]> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/operational_page/records`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result.items || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching operational pages:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getOperationalPage(id: string): Promise<OperationalPageRecord> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/operational_page/records/${id}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching operational page:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateOperationalPage(id: string, data: Partial<OperationalPageRecord>): Promise<OperationalPageRecord> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/operational_page/records/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating operational page:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async createOperationalPage(data: Omit<OperationalPageRecord, 'id' | 'collectionId' | 'collectionName' | 'created' | 'updated'>): Promise<OperationalPageRecord> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/operational_page/records`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating operational page:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteOperationalPage(id: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/operational_page/records/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting operational page:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
|
||||||
|
import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
|
||||||
|
import { StatusPageComponentRecord } from '@/types/statusPageComponents.types';
|
||||||
|
|
||||||
|
export const statusPageComponentsService = {
|
||||||
|
async getStatusPageComponents(): Promise<StatusPageComponentRecord[]> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/status_page_components/records`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result.items || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching status page components:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async getStatusPageComponentsByOperationalId(operationalStatusId: string): Promise<StatusPageComponentRecord[]> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/status_page_components/records?filter=(operational_status_id='${operationalStatusId}')`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
return result.items || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching status page components by operational ID:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async createStatusPageComponent(data: {
|
||||||
|
operational_status_id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
service_id: string;
|
||||||
|
server_id: string;
|
||||||
|
display_order: number;
|
||||||
|
}): Promise<StatusPageComponentRecord> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Creating status page component with data:', data);
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/status_page_components/records`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers,
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorText = await response.text();
|
||||||
|
console.error('Error response:', errorText);
|
||||||
|
throw new Error(`HTTP error! status: ${response.status} - ${errorText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
console.log('Created component:', result);
|
||||||
|
return result;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating status page component:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteStatusPageComponent(id: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
const authToken = pb.authStore.token;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
|
||||||
|
if (authToken) {
|
||||||
|
headers['Authorization'] = `Bearer ${authToken}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const baseUrl = getCurrentEndpoint();
|
||||||
|
const response = await fetch(`${baseUrl}/api/collections/status_page_components/records/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting status page component:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
export interface OperationalPageRecord {
|
||||||
|
collectionId: string;
|
||||||
|
collectionName: string;
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
is_public: string;
|
||||||
|
slug: string;
|
||||||
|
theme: string;
|
||||||
|
logo_url: string;
|
||||||
|
custom_domain: string;
|
||||||
|
custom_css: string;
|
||||||
|
page_style: string;
|
||||||
|
status: 'operational' | 'degraded' | 'maintenance' | 'major_outage';
|
||||||
|
created: string;
|
||||||
|
updated: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OperationalPageState {
|
||||||
|
data: OperationalPageRecord | null;
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
export interface StatusPageComponentRecord {
|
||||||
|
collectionId: string;
|
||||||
|
collectionName: string;
|
||||||
|
id: string;
|
||||||
|
operational_status_id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
service_id: string;
|
||||||
|
server_id: string;
|
||||||
|
display_order: number;
|
||||||
|
created: string;
|
||||||
|
updated: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StatusPageComponentState {
|
||||||
|
data: StatusPageComponentRecord[] | null;
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user