mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Revert "feat: add-healthcheck"
This commit is contained in:
Charles GTE
@@ -209,25 +209,14 @@ type UseZodFormProps<Z extends ZodSchema> = Exclude<
|
||||
};
|
||||
|
||||
|
||||
// const useZodForm = <Z extends ZodSchema>({
|
||||
// schema,
|
||||
// ...formProps
|
||||
// }: UseZodFormProps<Z>) =>
|
||||
// useForm({
|
||||
// ...formProps,
|
||||
// // @ts-ignore
|
||||
// resolver: zodResolver(schema),
|
||||
// });
|
||||
|
||||
|
||||
const useZodForm = <Z extends ZodSchema>({
|
||||
schema,
|
||||
...formProps
|
||||
}: UseZodFormProps<Z>): UseFormReturn<TypeOf<Z>> =>
|
||||
useForm<TypeOf<Z>>({
|
||||
...formProps,
|
||||
schema,
|
||||
...formProps
|
||||
}: UseZodFormProps<Z>) =>
|
||||
useForm({
|
||||
...formProps,
|
||||
// @ts-ignore
|
||||
resolver: zodResolver(schema),
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
export {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent} from "@/components/ui/card";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
|
||||
-149
@@ -1,149 +0,0 @@
|
||||
"use client"
|
||||
import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
|
||||
import {Info, Send} from "lucide-react";
|
||||
import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {Setting} from "@/db/schema/01_setting";
|
||||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {getChannelIcon} from "@/components/wrappers/dashboard/admin/channels/helpers/common";
|
||||
import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
|
||||
import {
|
||||
DefaultNotificationSchema, DefaultNotificationType
|
||||
} from "@/components/wrappers/dashboard/admin/settings/notification/settings-notification.schema";
|
||||
import {
|
||||
updateNotificationSettingsAction
|
||||
} from "@/components/wrappers/dashboard/admin/settings/notification/settings-notification.action";
|
||||
import {toast} from "sonner";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
|
||||
export type SettingsNotificationSectionProps = {
|
||||
settings: Setting;
|
||||
notificationChannels: NotificationChannelWith[];
|
||||
};
|
||||
|
||||
export const SettingsNotificationSection = ({settings, notificationChannels}: SettingsNotificationSectionProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
const form = useZodForm({
|
||||
schema: DefaultNotificationSchema,
|
||||
defaultValues: {
|
||||
notificationChannelId: settings.defaultNotificationChannelId ?? "",
|
||||
}
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (values: DefaultNotificationType) => {
|
||||
const result = await updateNotificationSettingsAction({name: "system", data: values})
|
||||
const inner = result?.data;
|
||||
if (inner?.success) {
|
||||
toast.success(inner.actionSuccess?.message);
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(inner?.actionError?.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Alert className="mt-3 flex items-start gap-2">
|
||||
<Info className="h-4 w-4 mt-1"/>
|
||||
<div>
|
||||
<AlertTitle>Informations</AlertTitle>
|
||||
<AlertDescription className="flex flex-wrap items-center gap-1">
|
||||
The default notification channel will be used to send
|
||||
<Badge>error_health_agent</Badge>
|
||||
<Badge>error_health_database</Badge>
|
||||
<Badge>error_backup</Badge>
|
||||
<Badge>error_restore</Badge>
|
||||
events. For more options like notify when success, please set policy at database level
|
||||
</AlertDescription>
|
||||
</div>
|
||||
</Alert>
|
||||
<div className="flex flex-col h-full py-4 gap-3">
|
||||
<Form
|
||||
className="space-y-4"
|
||||
form={form}
|
||||
onSubmit={async (values) => {
|
||||
await mutation.mutateAsync(values);
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="notificationChannelId"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-grow ">
|
||||
<FormLabel>Default Notification Provider</FormLabel>
|
||||
{notificationChannels.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">No channel available</div>
|
||||
) : (
|
||||
<Select
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
>
|
||||
<SelectTrigger className="w-full h-full mb-0">
|
||||
<SelectValue placeholder="Select a default channel" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{notificationChannels.map((channel) => (
|
||||
<SelectItem key={channel.id} value={channel.id}>
|
||||
<div className="flex items-center gap-2">
|
||||
{getChannelIcon(channel.provider)}
|
||||
<span className="font-medium">{channel.name}</span>
|
||||
<span className="text-[9px] uppercase bg-secondary px-1.5 py-0.5 rounded">
|
||||
{channel.provider}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
|
||||
{notificationChannels.length > 0 && (
|
||||
<ButtonWithLoading
|
||||
type="submit"
|
||||
>
|
||||
Confirm
|
||||
</ButtonWithLoading>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
{notificationChannels.length > 0 && form.getValues("notificationChannelId") ? (
|
||||
<ButtonWithLoading
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={async () => {
|
||||
form.setValue("notificationChannelId", "");
|
||||
await mutation.mutateAsync({
|
||||
notificationChannelId: null,
|
||||
});
|
||||
}}
|
||||
className="flex-shrink-0 w-full sm:w-auto"
|
||||
>
|
||||
Reset
|
||||
</ButtonWithLoading>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
-51
@@ -1,51 +0,0 @@
|
||||
"use server"
|
||||
|
||||
import {userAction} from "@/lib/safe-actions/actions";
|
||||
import {db} from "@/db";
|
||||
import * as drizzleDb from "@/db";
|
||||
import {eq} from "drizzle-orm";
|
||||
import {ServerActionResult} from "@/types/action-type";
|
||||
import {Setting} from "@/db/schema/01_setting";
|
||||
import {z} from "zod";
|
||||
import {
|
||||
DefaultNotificationSchema
|
||||
} from "@/components/wrappers/dashboard/admin/settings/notification/settings-notification.schema";
|
||||
|
||||
export const updateNotificationSettingsAction = userAction
|
||||
.schema(
|
||||
z.object({
|
||||
name: z.string(),
|
||||
data: DefaultNotificationSchema,
|
||||
})
|
||||
)
|
||||
.action(async ({parsedInput}): Promise<ServerActionResult<Setting>> => {
|
||||
const {name, data} = parsedInput;
|
||||
|
||||
try {
|
||||
const [updatedSettings] = await db
|
||||
.update(drizzleDb.schemas.setting)
|
||||
.set({
|
||||
defaultNotificationChannelId: data.notificationChannelId ?? null,
|
||||
})
|
||||
.where(eq(drizzleDb.schemas.setting.name, name))
|
||||
.returning();
|
||||
return {
|
||||
success: true,
|
||||
value: updatedSettings,
|
||||
actionSuccess: {
|
||||
message: "Settings successfully updated",
|
||||
},
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
actionError: {
|
||||
message: "Failed update settings.",
|
||||
status: 500,
|
||||
cause: error instanceof Error ? error.message : "Unknown error",
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
-7
@@ -1,7 +0,0 @@
|
||||
import {z} from "zod";
|
||||
|
||||
export const DefaultNotificationSchema = z.object({
|
||||
notificationChannelId: z.string().optional().nullable()
|
||||
});
|
||||
|
||||
export type DefaultNotificationType = z.infer<typeof DefaultNotificationSchema>;
|
||||
@@ -7,20 +7,14 @@ import {Setting} from "@/db/schema/01_setting";
|
||||
import {SettingsEmailSection} from "@/components/wrappers/dashboard/admin/settings/email/settings-email-section";
|
||||
import {SettingsStorageSection} from "@/components/wrappers/dashboard/admin/settings/storage/settings-storage-section";
|
||||
import {StorageChannelWith} from "@/db/schema/12_storage-channel";
|
||||
import {AlarmClock, MailboxIcon, Save} from "lucide-react";
|
||||
import {
|
||||
SettingsNotificationSection
|
||||
} from "@/components/wrappers/dashboard/admin/settings/notification/settings-notification-section";
|
||||
import {NotificationChannelWith} from "@/db/schema/09_notification-channel";
|
||||
import {MailboxIcon, Save} from "lucide-react";
|
||||
|
||||
export type SettingsTabsProps = {
|
||||
settings: Setting
|
||||
storageChannels: StorageChannelWith[],
|
||||
notificationChannels: NotificationChannelWith[];
|
||||
|
||||
storageChannels: StorageChannelWith[]
|
||||
};
|
||||
|
||||
export const SettingsTabs = ({settings, storageChannels, notificationChannels}: SettingsTabsProps) => {
|
||||
export const SettingsTabs = ({settings, storageChannels}: SettingsTabsProps) => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
@@ -53,15 +47,6 @@ export const SettingsTabs = ({settings, storageChannels, notificationChannels}:
|
||||
content: (
|
||||
<SettingsStorageSection storageChannels={storageChannels} settings={settings}/>
|
||||
|
||||
)
|
||||
},
|
||||
{
|
||||
name: 'Notification',
|
||||
value: 'notification',
|
||||
icon: AlarmClock,
|
||||
content: (
|
||||
<SettingsNotificationSection notificationChannels={notificationChannels} settings={settings}/>
|
||||
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
+1
-1
@@ -109,7 +109,7 @@ export const SettingsStorageSection = ({settings, storageChannels}: SettingsStor
|
||||
control={form.control}
|
||||
name="storageChannelId"
|
||||
render={({field}) => (
|
||||
<FormItem className="flex-grow">
|
||||
<FormItem className="flex-grow min-w-[200px] sm:flex-grow-0 sm:w-64">
|
||||
<FormLabel>Default Storage Provider</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger className="w-full h-full mb-0">
|
||||
|
||||
@@ -52,11 +52,6 @@ export const AgentCard = (props: agentCardProps) => {
|
||||
<Badge variant="secondary" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
|
||||
v{agent.version}
|
||||
</Badge>
|
||||
{agent.healthErrorCount && (
|
||||
<Badge variant="destructive" className="h-5 px-1.5 text-[10px] font-bold tracking-wider">
|
||||
down
|
||||
</Badge>
|
||||
)}
|
||||
{isUpdateAvailable && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
|
||||
@@ -17,8 +17,6 @@ import {Separator} from "@/components/ui/separator";
|
||||
import {Badge} from "@/components/ui/badge";
|
||||
import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
|
||||
import {AgentDatabaseCard} from "@/components/wrappers/dashboard/agent/agent-database-card";
|
||||
import {HealthCheckGraph} from "@/components/wrappers/dashboard/health/heath-grid";
|
||||
import {HealthcheckLog} from "@/db/schema/15_healthcheck-log";
|
||||
|
||||
type AgentContentPageProps = {
|
||||
edgeKey: string;
|
||||
@@ -34,8 +32,7 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
return result?.data;
|
||||
},
|
||||
initialData: {
|
||||
data: initialAgent,
|
||||
health: []
|
||||
data: initialAgent
|
||||
},
|
||||
staleTime: 0,
|
||||
gcTime: 0,
|
||||
@@ -43,15 +40,13 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
});
|
||||
|
||||
const agent = data?.data ?? initialAgent;
|
||||
const agentHealthLogs: HealthcheckLog[] = data?.health ?? [];
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between gap-6 ">
|
||||
<Card className="w-full sm:w-auto flex-1 transition-all border-border/50 bg-card ">
|
||||
<Card className="w-full sm:w-auto flex-1 border-none shadow-none bg-muted/30">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle
|
||||
className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Databases</CardTitle>
|
||||
<CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Databases</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground opacity-50"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@@ -60,34 +55,26 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="w-full sm:w-auto flex-1 transition-all border-border/50 bg-card ">
|
||||
<Card className="w-full sm:w-auto flex-1 border-none shadow-none bg-muted/30">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Last
|
||||
contact</CardTitle>
|
||||
<CardTitle className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">Last contact</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground opacity-50"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className="text-3xl font-bold tracking-tight">{formatDateLastContact(agent.lastContact)}</div>
|
||||
<div className="text-3xl font-bold tracking-tight">{formatDateLastContact(agent.lastContact)}</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">Status heartbeat</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{agent.lastContact && (
|
||||
<HealthCheckGraph logs={agentHealthLogs}/>
|
||||
)}
|
||||
|
||||
<div className="space-y-6">
|
||||
<Accordion type="single" collapsible defaultValue={!agent.lastContact ? "registration" : undefined}>
|
||||
<AccordionItem value="registration"
|
||||
className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300">
|
||||
<AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300">
|
||||
<AccordionTrigger className="hover:no-underline py-4 group">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl font-bold tracking-tight">Registration & Setup</span>
|
||||
{!agent.lastContact && (
|
||||
<Badge variant="outline"
|
||||
className="bg-orange-500/10 text-orange-600 border-orange-500/20 animate-pulse">
|
||||
<Badge variant="outline" className="bg-orange-500/10 text-orange-600 border-orange-500/20 animate-pulse">
|
||||
Action Required
|
||||
</Badge>
|
||||
)}
|
||||
@@ -104,23 +91,23 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
|
||||
</div>
|
||||
|
||||
{agent.databases.length > 0 && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Managed Databases</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Resources currently connected to this agent.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-1">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Managed Databases</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Resources currently connected to this agent.
|
||||
</p>
|
||||
</div>
|
||||
<Separator className="opacity-50"/>
|
||||
<CardsWithPagination
|
||||
cardsPerPage={4}
|
||||
numberOfColumns={2}
|
||||
data={agent.databases}
|
||||
cardItem={AgentDatabaseCard}
|
||||
/>
|
||||
</div>
|
||||
<Separator className="opacity-50" />
|
||||
<CardsWithPagination
|
||||
cardsPerPage={4}
|
||||
numberOfColumns={2}
|
||||
data={agent.databases}
|
||||
cardItem={AgentDatabaseCard}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -7,7 +7,6 @@ import * as drizzleDb from "@/db";
|
||||
import {BackupWith, Restoration} from "@/db/schema/07_database";
|
||||
import {getOrganizationChannels} from "@/db/services/notification-channel";
|
||||
import {getOrganizationStorageChannels} from "@/db/services/storage-channel";
|
||||
import {getHealthLast12hLogs} from "@/db/services/healthcheck";
|
||||
|
||||
export const getDatabaseDataAction = userAction
|
||||
.schema(
|
||||
@@ -51,9 +50,7 @@ export const getDatabaseDataAction = userAction
|
||||
const successfulBackups = backups.filter(b => b.status === "success").length;
|
||||
const successRate = totalBackups > 0 ? (successfulBackups / totalBackups) * 100 : null;
|
||||
|
||||
// @ts-ignore
|
||||
let activeOrganizationChannels = [];
|
||||
// @ts-ignore
|
||||
let activeOrganizationStorageChannels = [];
|
||||
|
||||
if (database?.project?.organizationId) {
|
||||
@@ -64,20 +61,16 @@ export const getDatabaseDataAction = userAction
|
||||
activeOrganizationStorageChannels = organizationStorageChannels.filter(channel => channel.enabled);
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
database,
|
||||
backups,
|
||||
restorations,
|
||||
// @ts-ignore
|
||||
activeOrganizationChannels,
|
||||
// @ts-ignore
|
||||
activeOrganizationStorageChannels,
|
||||
stats: {
|
||||
totalBackups,
|
||||
availableBackups,
|
||||
successRate
|
||||
},
|
||||
health: database ? await getHealthLast12hLogs({ id: database.id }) : []
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -37,6 +37,7 @@ import {backupOnly} from "@/components/wrappers/dashboard/projects/database/data
|
||||
type ChannelPoliciesFormProps = {
|
||||
onSuccess?: () => void;
|
||||
channels: NotificationChannel[] | StorageChannel[];
|
||||
organizationId: string;
|
||||
database: DatabaseWith;
|
||||
kind: ChannelKind
|
||||
};
|
||||
@@ -45,6 +46,7 @@ type ChannelPoliciesFormProps = {
|
||||
export const ChannelPoliciesForm = ({
|
||||
database,
|
||||
channels,
|
||||
organizationId,
|
||||
onSuccess,
|
||||
kind
|
||||
}: ChannelPoliciesFormProps) => {
|
||||
|
||||
@@ -65,6 +65,7 @@ export const ChannelPoliciesModal = ({icon, kind, database, channels, organizati
|
||||
</DialogDescription>
|
||||
<Separator className="mt-3 mb-3"/>
|
||||
<ChannelPoliciesForm
|
||||
organizationId={organizationId}
|
||||
channels={channels}
|
||||
database={database}
|
||||
onSuccess={() => setOpen(false)}
|
||||
|
||||
@@ -3,7 +3,7 @@ import {z} from "zod";
|
||||
export const PolicySchema = z.object({
|
||||
channelId: z.string().min(1, "Please select channel"),
|
||||
eventKinds: z.array(z.enum([
|
||||
'error_backup', 'error_restore', 'success_restore', 'success_backup', 'weekly_report', 'error_health_database'
|
||||
'error_backup', 'error_restore', 'success_restore', 'success_backup', 'weekly_report'
|
||||
]))
|
||||
.optional(),
|
||||
enabled: z.boolean().default(true),
|
||||
@@ -17,16 +17,16 @@ export const PoliciesSchema = z.object({
|
||||
export type PoliciesType = z.infer<typeof PoliciesSchema>;
|
||||
export type PolicyType = z.infer<typeof PolicySchema>;
|
||||
|
||||
export const EVENT_KIND_BACKUP_ONLY_OPTIONS = [
|
||||
{label: "Error Backup", value: "error_backup"},
|
||||
{label: "Success Backup", value: "success_backup"},
|
||||
{label: "Health Ping Fail", value: "error_health_database"},
|
||||
];
|
||||
|
||||
export const EVENT_KIND_OPTIONS = [
|
||||
...EVENT_KIND_BACKUP_ONLY_OPTIONS,
|
||||
{label: "Error Backup", value: "error_backup"},
|
||||
{label: "Error Restore", value: "error_restore"},
|
||||
{label: "Success Restore", value: "success_restore"},
|
||||
{label: "Success Backup", value: "success_backup"},
|
||||
// {label: "Weekly Report", value: "weekly_report"},
|
||||
];
|
||||
|
||||
export const EVENT_KIND_BACKUP_ONLY_OPTIONS = [
|
||||
{label: "Error Backup", value: "error_backup"},
|
||||
{label: "Success Backup", value: "success_backup"},
|
||||
];
|
||||
@@ -1,43 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {useState} from "react";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {DatabaseWith} from "@/db/schema/07_database";
|
||||
import {HeartPulse} from "lucide-react";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetTitle,
|
||||
SheetTrigger
|
||||
} from "@/components/ui/sheet";
|
||||
import {HealthcheckLog} from "@/db/schema/15_healthcheck-log";
|
||||
import {HealthCheckGraph} from "@/components/wrappers/dashboard/health/heath-grid";
|
||||
|
||||
type HealthModalProps = {
|
||||
database: DatabaseWith,
|
||||
healthLogs: HealthcheckLog[]
|
||||
}
|
||||
|
||||
export const HealthModal = ({database, healthLogs}: HealthModalProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" onClick={() => setOpen(true)}>
|
||||
<HeartPulse/>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="bottom">
|
||||
<div className="flex pl-5 pt-4">
|
||||
<SheetTitle>
|
||||
Database Health Status
|
||||
</SheetTitle>
|
||||
</div>
|
||||
<div className="px-4 pb-5">
|
||||
<HealthCheckGraph logs={healthLogs} />
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
@@ -1,204 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {useMemo} from "react"
|
||||
import {Card} from "@/components/ui/card"
|
||||
import {HealthcheckLog} from "@/db/schema/15_healthcheck-log"
|
||||
import {useIsMobile} from "@/hooks/use-mobile";
|
||||
|
||||
type HealthStatus = "healthy" | "degraded" | "down" | "unknown"
|
||||
|
||||
interface HealthCheckData {
|
||||
timestamp: Date
|
||||
status: HealthStatus
|
||||
}
|
||||
|
||||
interface Props {
|
||||
logs: HealthcheckLog[]
|
||||
}
|
||||
|
||||
const INTERVAL_MINUTES = 10
|
||||
const WINDOW_HOURS = 12
|
||||
|
||||
function roundDateToInterval(date: Date, intervalMinutes: number): Date {
|
||||
const ms = intervalMinutes * 60 * 1000
|
||||
return new Date(Math.floor(date.getTime() / ms) * ms)
|
||||
}
|
||||
|
||||
function buildTimeSeries(logs: HealthcheckLog[]): HealthCheckData[] {
|
||||
const intervalMs = INTERVAL_MINUTES * 60 * 1000
|
||||
const now = new Date()
|
||||
const roundedNow = roundDateToInterval(now, INTERVAL_MINUTES)
|
||||
|
||||
const buckets = (WINDOW_HOURS * 60) / INTERVAL_MINUTES
|
||||
const data: HealthCheckData[] = []
|
||||
const oldestLog = logs.length > 0 ? getOldestLog(logs) : null
|
||||
for (let i = buckets - 1; i >= 0; i--) {
|
||||
const start = new Date(roundedNow.getTime() - i * intervalMs)
|
||||
const end = new Date(start.getTime() + intervalMs)
|
||||
|
||||
const bucketLogs = logs.filter(
|
||||
(l) =>
|
||||
l.date &&
|
||||
new Date(l.date) >= start &&
|
||||
new Date(l.date) < end
|
||||
)
|
||||
|
||||
let status: HealthStatus = "unknown"
|
||||
|
||||
if (!oldestLog || new Date(oldestLog.date!) > start) {
|
||||
status = "unknown"
|
||||
} else if (new Date(oldestLog.date!) < start) {
|
||||
status = "down"
|
||||
}
|
||||
|
||||
if (bucketLogs.length > 0) {
|
||||
const hasFailure = bucketLogs.some((l) => l.status === "failed")
|
||||
const hasSuccess = bucketLogs.some((l) => l.status === "success")
|
||||
|
||||
if (hasFailure && hasSuccess) {
|
||||
status = "degraded"
|
||||
} else if (hasFailure) {
|
||||
status = "down"
|
||||
} else if (hasSuccess) {
|
||||
status = "healthy"
|
||||
}
|
||||
}
|
||||
|
||||
data.push({timestamp: start, status})
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
function getStatusColor(status: HealthStatus): string {
|
||||
switch (status) {
|
||||
case "healthy":
|
||||
return "bg-emerald-500"
|
||||
case "degraded":
|
||||
return "bg-emerald-700"
|
||||
case "down":
|
||||
return "bg-red-500"
|
||||
case "unknown":
|
||||
return "bg-zinc-700"
|
||||
}
|
||||
}
|
||||
|
||||
function getOldestLog(logs: HealthcheckLog[]): HealthcheckLog {
|
||||
console.log(logs)
|
||||
const validLogs = logs.filter(l => l.date)
|
||||
|
||||
return validLogs.reduce((oldest, current) =>
|
||||
new Date(current.date!) < new Date(oldest.date!) ? current : oldest
|
||||
)
|
||||
}
|
||||
|
||||
function formatTime(date: Date): string {
|
||||
return date.toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const HealthCheckGraph = ({logs}: Props) => {
|
||||
const data = useMemo(() => {
|
||||
return buildTimeSeries(logs)
|
||||
}, [logs])
|
||||
|
||||
const isMobile = useIsMobile()
|
||||
|
||||
|
||||
const hourLabels = useMemo(() => {
|
||||
if (data.length === 0) return []
|
||||
|
||||
|
||||
return data
|
||||
.map((item, index) => ({ item, index }))
|
||||
.filter(({ item }) => {
|
||||
const hours = item.timestamp.getHours()
|
||||
const minutes = item.timestamp.getMinutes()
|
||||
if (isMobile) {
|
||||
return minutes === 0 && hours % 3 === 0
|
||||
} else {
|
||||
return minutes === 0
|
||||
}
|
||||
})
|
||||
.map(({ item, index }) => ({
|
||||
hour: formatTime(item.timestamp),
|
||||
index,
|
||||
}))
|
||||
}, [data])
|
||||
|
||||
const healthyCount = data.filter((d) => d.status === "healthy").length
|
||||
|
||||
const uptimePercent =
|
||||
data.length > 0
|
||||
? ((healthyCount / data.length) * 100).toFixed(1)
|
||||
: "0.0"
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="w-full">
|
||||
<Card className="h-full flex flex-col p-4 border-border/50 bg-card gap-0">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Health</h2>
|
||||
<p className="text-zinc-500 text-sm">
|
||||
Last 12 hours • {INTERVAL_MINUTES} minute intervals
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-emerald-400 text-2xl font-bold">
|
||||
{uptimePercent}%
|
||||
</p>
|
||||
<p className="text-zinc-500 text-sm">Uptime</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="relative mb-1 h-4 text-xs text-zinc-500">
|
||||
{hourLabels.map((label, i) => {
|
||||
const left = (label.index / (data.length - 1)) * 100
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute -translate-x-1/2 whitespace-nowrap"
|
||||
style={{ left: `${left}%` }}
|
||||
>
|
||||
{label.hour}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex gap-0.5">
|
||||
{data.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex-1 h-8 rounded-sm ${getStatusColor(item.status)} hover:ring-2 hover:ring-zinc-400 transition-all cursor-pointer`}
|
||||
title={`${formatTime(item.timestamp)} - ${item.status}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-4 mt-4 text-xs text-zinc-500">
|
||||
<Legend color="bg-zinc-700" label="Unknown"/>
|
||||
<Legend color="bg-red-500" label="Down"/>
|
||||
<Legend color="bg-emerald-700" label="Degraded"/>
|
||||
<Legend color="bg-emerald-500" label="Healthy"/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Legend = ({color, label}: { color: string; label: string }) => (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className={`w-3 h-3 rounded-sm ${color}`}/>
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
)
|
||||
@@ -20,8 +20,6 @@ import { ChannelPoliciesModal } from "@/components/wrappers/dashboard/database/c
|
||||
import { HardDrive, Megaphone } from "lucide-react";
|
||||
import { ImportModal } from "@/components/wrappers/dashboard/database/import/import-modal";
|
||||
import { BackupButton } from "@/components/wrappers/dashboard/backup/backup-button/backup-button";
|
||||
import {HealthModal} from "@/components/wrappers/dashboard/database/health/health-modal";
|
||||
import {HealthcheckLog} from "@/db/schema/15_healthcheck-log";
|
||||
|
||||
export type DatabaseContentProps = {
|
||||
settings: Setting;
|
||||
@@ -36,7 +34,6 @@ export type DatabaseContentProps = {
|
||||
organizationId: string;
|
||||
activeOrganizationChannels: any[];
|
||||
activeOrganizationStorageChannels: any[];
|
||||
databaseHealthLogs: HealthcheckLog[]
|
||||
};
|
||||
|
||||
export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
@@ -67,7 +64,6 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
availableBackups: props.availableBackups,
|
||||
successRate: props.successRate,
|
||||
},
|
||||
health: props.databaseHealthLogs
|
||||
},
|
||||
staleTime: 0,
|
||||
gcTime: 0,
|
||||
@@ -122,13 +118,10 @@ export const DatabaseContent = (props: DatabaseContentProps) => {
|
||||
organizationId={props.organizationId}
|
||||
/>
|
||||
<ImportModal database={database} />
|
||||
<HealthModal database={database} healthLogs={data?.health ?? []}/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<BackupButton
|
||||
disable={isAlreadyBackup || !database.lastContact}
|
||||
disable={isAlreadyBackup}
|
||||
databaseId={database.id}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user