mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
Working on retention policy and cron system.
This commit is contained in:
charlesgauthereau
@@ -1,9 +1,9 @@
|
||||
"use server";
|
||||
|
||||
import { userAction } from "@/safe-actions";
|
||||
import { z } from "zod";
|
||||
import { db } from "@/db";
|
||||
import { eq } from "drizzle-orm";
|
||||
import {userAction} from "@/safe-actions";
|
||||
import {z} from "zod";
|
||||
import {db} from "@/db";
|
||||
import {eq} from "drizzle-orm";
|
||||
import * as drizzleDb from "@/db";
|
||||
|
||||
export const updateDatabaseBackupPolicyAction = userAction
|
||||
@@ -13,7 +13,7 @@ export const updateDatabaseBackupPolicyAction = userAction
|
||||
backupPolicy: z.string(),
|
||||
})
|
||||
)
|
||||
.action(async ({ parsedInput }) => {
|
||||
.action(async ({parsedInput}) => {
|
||||
const cronPolicy = parsedInput.backupPolicy === "" ? null : parsedInput.backupPolicy;
|
||||
|
||||
const [updated] = await db
|
||||
@@ -25,6 +25,11 @@ export const updateDatabaseBackupPolicyAction = userAction
|
||||
.returning()
|
||||
.execute();
|
||||
|
||||
if (cronPolicy == null) {
|
||||
await db.delete(drizzleDb.schemas.retentionPolicy)
|
||||
.where(eq(drizzleDb.schemas.retentionPolicy.databaseId, parsedInput.databaseId)).execute();
|
||||
}
|
||||
|
||||
return {
|
||||
data: updated,
|
||||
};
|
||||
|
||||
+169
-171
@@ -9,11 +9,10 @@ import {
|
||||
FormMessage,
|
||||
useZodForm
|
||||
} from "@/components/ui/form";
|
||||
import {DatabaseType} from "@/components/wrappers/dashboard/database/database-form/form-database.schema";
|
||||
import {RetentionSettings, RetentionSettingsSchema} from "./backup-retention-settings.schema";
|
||||
import {useMutation} from "@tanstack/react-query";
|
||||
import {updateOrCreateBackupRetentionPolicyAction} from "./backup-retention-settings.action";
|
||||
import {Database, DatabaseWith, RetentionPolicy} from "@/db/schema/07_database";
|
||||
import {DatabaseWith, RetentionPolicy} from "@/db/schema/07_database";
|
||||
import {toast} from "sonner";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {RadioGroup, RadioGroupItem} from "@/components/ui/radio-group";
|
||||
@@ -23,29 +22,29 @@ import {Input} from "@/components/ui/input";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Calendar, Save} from "lucide-react";
|
||||
|
||||
|
||||
export type BackupRetentionSettingsFormProps = {
|
||||
defaultValues?: RetentionPolicy;
|
||||
database: DatabaseWith;
|
||||
};
|
||||
|
||||
|
||||
export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRetentionSettingsFormProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
const defaultValuesFormatted: RetentionSettings = {
|
||||
type: defaultValues?.type,
|
||||
count: defaultValues?.count ?? 7,
|
||||
days: defaultValues?.days ?? 30,
|
||||
gfs: {
|
||||
daily: defaultValues?.gfsDaily ?? 7,
|
||||
weekly: defaultValues?.gfsWeekly ?? 4,
|
||||
monthly: defaultValues?.gfsMonthly ?? 12,
|
||||
yearly: defaultValues?.gfsYearly ?? 3,
|
||||
},
|
||||
};
|
||||
|
||||
const form = useZodForm({
|
||||
schema: RetentionSettingsSchema,
|
||||
defaultValues: {
|
||||
type: defaultValues?.type ?? "gfs",
|
||||
count: defaultValues?.count ?? 7,
|
||||
days: defaultValues?.days ?? 30,
|
||||
gfs: {
|
||||
daily: defaultValues?.gfsDaily ?? 7,
|
||||
weekly: defaultValues?.gfsWeekly ?? 4,
|
||||
monthly: defaultValues?.gfsMonthly ?? 12,
|
||||
yearly: defaultValues?.gfsYearly ?? 3,
|
||||
},
|
||||
},
|
||||
defaultValues: defaultValuesFormatted,
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
@@ -56,7 +55,7 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
}),
|
||||
onSuccess: () => {
|
||||
toast.success("Retention policy updated successfully.");
|
||||
router.refresh()
|
||||
router.refresh();
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("An error occurred while updating retention policy.");
|
||||
@@ -64,10 +63,15 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
});
|
||||
|
||||
const calculateTotalFiles = (values: RetentionSettings) => {
|
||||
if (values.type === "gfs") {
|
||||
return values.gfs.daily + values.gfs.weekly + values.gfs.monthly + values.gfs.yearly;
|
||||
if (values.type === "gfs" && values.gfs) {
|
||||
return (
|
||||
(values.gfs.daily ?? 0) +
|
||||
(values.gfs.weekly ?? 0) +
|
||||
(values.gfs.monthly ?? 0) +
|
||||
(values.gfs.yearly ?? 0)
|
||||
);
|
||||
}
|
||||
return values.type === "count" ? values.count : values.days;
|
||||
return values.type === "count" ? values.count ?? 0 : values.type === "days" ? values.days ?? 0 : 0;
|
||||
};
|
||||
|
||||
const getStorageEstimate = (totalFiles: number) => {
|
||||
@@ -77,7 +81,7 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
};
|
||||
|
||||
return (
|
||||
<div className=" flex flex-col gap-3 py-0">
|
||||
<div className="flex flex-col gap-3 py-0">
|
||||
<div className="px-3">
|
||||
<Form
|
||||
form={form}
|
||||
@@ -94,61 +98,69 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
<FormLabel>Retention Policy Type</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={field.value}
|
||||
value={field.value ?? ""}
|
||||
onValueChange={field.onChange}
|
||||
className="grid grid-cols-1 gap-4"
|
||||
>
|
||||
<div
|
||||
className="flex items-center space-x-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
|
||||
<RadioGroupItem value="count" id="count"/>
|
||||
<div className="flex-1">
|
||||
<FormLabel htmlFor="count" className="font-medium cursor-pointer">
|
||||
Keep last N backups
|
||||
</FormLabel>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Simple count-based retention (e.g., keep last 10 backups)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{[
|
||||
{
|
||||
id: "count",
|
||||
label: "Keep last N backups",
|
||||
desc: "Simple count-based retention (e.g., keep last 10 backups)",
|
||||
},
|
||||
{
|
||||
id: "days",
|
||||
label: "Keep backups for X days",
|
||||
desc: "Time-based retention (e.g., keep backups for 30 days)",
|
||||
},
|
||||
{
|
||||
id: "gfs",
|
||||
label: "GFS Rotation",
|
||||
desc: "Grandfather-Father-Son rotation for enterprise/critical systems",
|
||||
badge: "Recommended",
|
||||
},
|
||||
].map((opt) => (
|
||||
<FormLabel
|
||||
key={opt.id}
|
||||
htmlFor={opt.id}
|
||||
className={`flex items-center space-x-3 rounded-lg border p-4 transition-colors cursor-pointer ${
|
||||
field.value === opt.id
|
||||
? "border-primary bg-primary/5"
|
||||
: "hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
<RadioGroupItem value={opt.id} id={opt.id}/>
|
||||
<div className="flex-1">
|
||||
<span className="font-medium flex items-center gap-2">
|
||||
{opt.label}
|
||||
{opt.badge && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{opt.badge}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
<p className="text-sm text-muted-foreground">{opt.desc}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex items-center space-x-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors">
|
||||
<RadioGroupItem value="days" id="days"/>
|
||||
<div className="flex-1">
|
||||
<FormLabel htmlFor="days" className="font-medium cursor-pointer">
|
||||
Keep backups for X days
|
||||
</FormLabel>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Time-based retention (e.g., keep backups for 30 days)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex items-center space-x-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors bg-accent/5">
|
||||
<RadioGroupItem value="gfs" id="gfs"/>
|
||||
<div className="flex-1">
|
||||
<FormLabel htmlFor="gfs"
|
||||
className="font-medium cursor-pointer flex items-center gap-2">
|
||||
GFS Rotation
|
||||
{database.retentionPolicy?.type === opt.id && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Recommended
|
||||
Actual
|
||||
</Badge>
|
||||
</FormLabel>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Grandfather-Father-Son rotation for enterprise/critical systems
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</FormLabel>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Separator/>
|
||||
{form.watch("type") && (
|
||||
<Separator/>
|
||||
)}
|
||||
|
||||
|
||||
{/* Count config */}
|
||||
{form.watch("type") === "count" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
@@ -157,7 +169,14 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
<FormItem>
|
||||
<FormLabel>Number of backups to keep</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={1} max={100} className="w-32" {...field} />
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={100}
|
||||
className="w-32"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.valueAsNumber)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Older backups beyond this count will be automatically deleted.
|
||||
@@ -168,7 +187,6 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Days config */}
|
||||
{form.watch("type") === "days" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
@@ -177,7 +195,14 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
<FormItem>
|
||||
<FormLabel>Retention period (days)</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={1} max={3650} className="w-32" {...field} />
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={3650}
|
||||
className="w-32"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.valueAsNumber)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Backups older than {field.value} days will be automatically deleted.
|
||||
@@ -188,119 +213,92 @@ export const BackupRetentionSettingsForm = ({defaultValues, database}: BackupRet
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* GFS config */}
|
||||
{form.watch("type") === "gfs" && (
|
||||
<div className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gfs.daily"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Daily backups</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={1} max={31} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Keep last N daily backups</FormDescription>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gfs.weekly"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Weekly backups</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={0} max={52} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Keep N weekly backups</FormDescription>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gfs.monthly"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Monthly backups</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={0} max={120} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Keep N monthly backups</FormDescription>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gfs.yearly"
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>Yearly backups</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" min={0} max={50} {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Keep N yearly backups</FormDescription>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{["daily", "weekly", "monthly", "yearly"].map((key) => (
|
||||
<FormField
|
||||
key={key}
|
||||
control={form.control}
|
||||
name={`gfs.${key}` as const}
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{key.charAt(0).toUpperCase() + key.slice(1)} backups
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={key === "yearly" ? 50 : key === "monthly" ? 120 : key === "weekly" ? 52 : 31}
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.valueAsNumber)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Keep N {key} backups
|
||||
</FormDescription>
|
||||
<FormMessage/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator/>
|
||||
|
||||
{/* Summary */}
|
||||
<div className="rounded-lg border p-4 space-y-3 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground"/>
|
||||
<span className="font-medium">Storage Impact Summary</span>
|
||||
{form.watch("type") && (
|
||||
<>
|
||||
<Separator/>
|
||||
<div className="rounded-lg border p-4 space-y-3 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground"/>
|
||||
<span className="font-medium">Storage Impact Summary</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const totalFiles = calculateTotalFiles(form.getValues());
|
||||
const estimate = getStorageEstimate(totalFiles);
|
||||
return (
|
||||
<Badge
|
||||
variant={
|
||||
estimate === "Low"
|
||||
? "default"
|
||||
: estimate === "Medium"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{estimate} Usage
|
||||
</Badge>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Estimated files per database:</span>
|
||||
<p className="font-medium">
|
||||
{calculateTotalFiles(form.getValues())} backup files
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Policy type:</span>
|
||||
<p className="font-medium capitalize">
|
||||
{form.watch("type") === "gfs"
|
||||
? "GFS Rotation"
|
||||
: form.watch("type") === "count"
|
||||
? "Count-based"
|
||||
: "Time-based"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{(() => {
|
||||
const totalFiles = calculateTotalFiles(form.getValues());
|
||||
const estimate = getStorageEstimate(totalFiles);
|
||||
return (
|
||||
<Badge
|
||||
variant={
|
||||
estimate === "Low"
|
||||
? "default"
|
||||
: estimate === "Medium"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{estimate} Usage
|
||||
</Badge>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Estimated files per database:</span>
|
||||
<p className="font-medium">{calculateTotalFiles(form.getValues())} backup files</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Policy type:</span>
|
||||
<p className="font-medium capitalize">
|
||||
{form.watch("type") === "gfs"
|
||||
? "GFS Rotation"
|
||||
: form.watch("type") === "count"
|
||||
? "Count-based"
|
||||
: "Time-based"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" disabled={mutation.isPending} className="w-full">
|
||||
<Save className="h-4 w-4 mr-2"/>
|
||||
{mutation.isPending ? "Saving Policy..." : "Save Retention Policy"}
|
||||
</Button>
|
||||
<Button type="submit" disabled={mutation.isPending} className="w-full">
|
||||
<Save className="h-4 w-4 mr-2"/>
|
||||
{mutation.isPending ? "Saving Policy..." : "Save Retention Policy"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
+6
-4
@@ -4,15 +4,17 @@ import {userAction} from "@/safe-actions"
|
||||
import {z} from "zod"
|
||||
import {db} from "@/db"
|
||||
import {eq} from "drizzle-orm"
|
||||
import {retentionSettingsSchema} from "@/components/wrappers/dashboard/database/retention-policy/schema";
|
||||
import * as drizzleDb from "@/db";
|
||||
import {
|
||||
RetentionSettingsSchema
|
||||
} from "@/components/wrappers/dashboard/database/retention-policy/backup-retention-settings.schema";
|
||||
|
||||
|
||||
export const updateOrCreateBackupRetentionPolicyAction = userAction
|
||||
.schema(
|
||||
z.object({
|
||||
databaseId: z.string(),
|
||||
settings: retentionSettingsSchema,
|
||||
settings: RetentionSettingsSchema,
|
||||
})
|
||||
)
|
||||
.action(async ({parsedInput}) => {
|
||||
@@ -44,11 +46,12 @@ export const updateOrCreateBackupRetentionPolicyAction = userAction
|
||||
.returning()
|
||||
} else {
|
||||
// Insert new policy
|
||||
|
||||
updated = await db
|
||||
.insert(drizzleDb.schemas.retentionPolicy)
|
||||
.values({
|
||||
databaseId,
|
||||
type: settings.type,
|
||||
type: settings.type ?? "gfs",
|
||||
count: settings.count,
|
||||
days: settings.days,
|
||||
gfsDaily: settings.gfs.daily,
|
||||
@@ -58,7 +61,6 @@ export const updateOrCreateBackupRetentionPolicyAction = userAction
|
||||
})
|
||||
.returning()
|
||||
}
|
||||
|
||||
return {
|
||||
data: updated[0],
|
||||
}
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ const GFSSettingsSchema = z.object({
|
||||
});
|
||||
|
||||
export const RetentionSettingsSchema = z.object({
|
||||
type: z.enum(["count", "days", "gfs"]),
|
||||
type: z.enum(["count", "days", "gfs"]).optional(),
|
||||
count: z.number().min(1).max(100),
|
||||
days: z.number().min(1).max(3650),
|
||||
gfs: GFSSettingsSchema,
|
||||
|
||||
+12
-8
@@ -1,9 +1,6 @@
|
||||
import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "@/components/ui/sheet";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Database, DatabaseZap} from "lucide-react";
|
||||
import {
|
||||
BackupRetentionSettings
|
||||
} from "@/components/wrappers/dashboard/database/retention-policy/backup-retention-settings";
|
||||
import {DatabaseWith as DbSchema, RetentionPolicy} from "@/db/schema/07_database";
|
||||
import {
|
||||
BackupRetentionSettingsForm
|
||||
@@ -13,7 +10,7 @@ type RetentionPolicySheetProps = {
|
||||
database: DbSchema
|
||||
}
|
||||
|
||||
export const RetentionPolicySheet = (props: RetentionPolicySheetProps) => {
|
||||
export const RetentionPolicySheet = ({database}: RetentionPolicySheetProps) => {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
@@ -35,10 +32,17 @@ export const RetentionPolicySheet = (props: RetentionPolicySheetProps) => {
|
||||
enterprise GFS rotation strategies.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<BackupRetentionSettingsForm database={props.database} defaultValues={props.database.retentionPolicy as RetentionPolicy}/>
|
||||
|
||||
{/*<BackupRetentionSettings database={props.database}/>*/}
|
||||
{database.backupPolicy !== null ?
|
||||
<BackupRetentionSettingsForm database={database}
|
||||
defaultValues={database.retentionPolicy as RetentionPolicy}/>
|
||||
:
|
||||
<div
|
||||
className="flex flex-col items-center justify-center text-center py-12 gap-4 border rounded-lg">
|
||||
<p className="text-muted-foreground">
|
||||
No backup policy configured yet. Please configure one !
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
// --- Zod Schema ---
|
||||
import {z} from "zod";
|
||||
|
||||
export const gfsSettingsSchema = z.object({
|
||||
daily: z.number().min(1).max(31),
|
||||
weekly: z.number().min(0).max(52),
|
||||
monthly: z.number().min(0).max(120),
|
||||
yearly: z.number().min(0).max(50),
|
||||
})
|
||||
|
||||
export const retentionSettingsSchema = z.object({
|
||||
type: z.enum(["count", "days", "gfs"]),
|
||||
count: z.number().min(1).max(100),
|
||||
days: z.number().min(1).max(3650),
|
||||
gfs: gfsSettingsSchema,
|
||||
})
|
||||
|
||||
export type RetentionSettings = z.infer<typeof retentionSettingsSchema>
|
||||
@@ -1,29 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import {Card, CardContent, CardHeader} from "@/components/ui/card";
|
||||
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
|
||||
import {formatDateLastContact} from "@/utils/date-formatting";
|
||||
import {Database} from "@/db/schema/07_database";
|
||||
import {DatabaseBackup, Server, CheckCircle, Clock} from "lucide-react";
|
||||
|
||||
export type DatabaseKpiPro = {
|
||||
successRate: any;
|
||||
database: Database;
|
||||
totalBackups: number;
|
||||
availableBackups: number;
|
||||
};
|
||||
|
||||
export const DatabaseKpi = (props: DatabaseKpiPro) => {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between gap-8 mb-6">
|
||||
<Card className="w-full sm:w-auto flex-1">
|
||||
<CardHeader className="font-bold text-xl">Backups</CardHeader>
|
||||
<CardContent>{props.totalBackups}</CardContent>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Available Backups</CardTitle>
|
||||
<DatabaseBackup className="h-4 w-4 text-muted-foreground"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{props.availableBackups}</div>
|
||||
<p className="text-xs text-muted-foreground">Backups currently available</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="w-full sm:w-auto flex-1">
|
||||
<CardHeader className="font-bold text-xl">Success rate</CardHeader>
|
||||
<CardContent>{props.successRate ? `${props.successRate} %` : "Unavailable for now."}</CardContent>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Total Backups</CardTitle>
|
||||
<Server className="h-4 w-4 text-muted-foreground"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">{props.totalBackups}</div>
|
||||
<p className="text-xs text-muted-foreground">Total backups recorded</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="w-full sm:w-auto flex-1">
|
||||
<CardHeader className="font-bold text-xl">Last contact</CardHeader>
|
||||
<CardContent>{formatDateLastContact(props.database.lastContact)}</CardContent>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Success Rate</CardTitle>
|
||||
<CheckCircle className="h-4 w-4 text-muted-foreground"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{props.successRate ? `${props.successRate.toFixed(0)} %` : "Unavailable"}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Backup success rate</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="w-full sm:w-auto flex-1">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Last Contact</CardTitle>
|
||||
<Clock className="h-4 w-4 text-muted-foreground"/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">
|
||||
{formatDateLastContact(props.database.lastContact)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">Time of last backup contact</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user