devpush 0.0.0-stage → 1.0.0-beta.4

package/src/features/projects/project-backup-utils.ts

@@ -0,0 +1,190 @@
+import { buildRuntimeId } from '#devpush/lib/runtime-id'
+import type {
+  ProjectBackupArtifact,
+  ProjectBackupConfig,
+  ProjectBackupRun,
+  ProjectBackupRestore,
+} from '#devpush/server/projects/types'
+
+export type BackupFilters = {
+  policy?: string
+  environment?: string
+  server?: string
+  status?: string
+  type?: string
+  time?: string
+}
+
+export const backupCronPresets = [
+  { label: 'Daily at 02:00 UTC', value: '0 2 * * *' },
+  { label: 'Every 6 hours', value: '0 */6 * * *' },
+  { label: 'Weekly on Sunday (UTC)', value: '0 2 * * 0' },
+  { label: 'Monthly on the 1st (UTC)', value: '0 2 1 * *' },
+]
+
+export function getSchedulePresetValue(cron: string) {
+  return backupCronPresets.some((preset) => preset.value === cron)
+    ? cron
+    : 'custom'
+}
+
+export function getLatestBackupRuns(runs: ProjectBackupRun[]) {
+  const latest = new Map<string, ProjectBackupRun>()
+  for (const run of runs) {
+    if (!run.configId) continue
+    const previous = latest.get(run.configId)
+    if (
+      !previous ||
+      run.createdAt > previous.createdAt ||
+      (run.createdAt === previous.createdAt && run.id > previous.id)
+    )
+      latest.set(run.configId, run)
+  }
+  return latest
+}
+
+export function getBackupActivity(
+  runs: ProjectBackupRun[],
+  restores: ProjectBackupRestore[],
+  filters: BackupFilters,
+  now = new Date(),
+) {
+  const since = getSinceDate(filters.time, now)
+  return [
+    ...runs.map((run) => ({
+      type: 'backup' as const,
+      record: run,
+      source: run,
+    })),
+    ...restores.map((restore) => ({
+      type: 'restore' as const,
+      record: restore,
+      source: runs.find((run) => run.id === restore.backupRunId),
+    })),
+  ]
+    .filter(
+      ({ type, record, source }) =>
+        (!filters.policy || source?.configId === filters.policy) &&
+        (!filters.type || filters.type === type) &&
+        (!filters.environment ||
+          record.environmentId === filters.environment) &&
+        (!filters.status || record.status === filters.status) &&
+        (!filters.server || record.serverId === filters.server) &&
+        (!since || new Date(record.startedAt ?? record.createdAt) >= since),
+    )
+    .sort(
+      (a, b) =>
+        new Date(b.record.startedAt ?? b.record.createdAt).getTime() -
+        new Date(a.record.startedAt ?? a.record.createdAt).getTime(),
+    )
+}
+
+export function formatBackupAge(value: string, now = Date.now()) {
+  const minutes = Math.max(
+    0,
+    Math.round((now - new Date(value).getTime()) / 60000),
+  )
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.round(minutes / 60)
+  return hours < 48 ? `${hours}h ago` : `${Math.round(hours / 24)}d ago`
+}
+
+export function formatBackupUtc(value: string) {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'long',
+    timeZone: 'UTC',
+  }).format(new Date(value))
+}
+
+export function getSinceDate(time: string | undefined, now = new Date()) {
+  const days = time === '24h' ? 1 : time === '7d' ? 7 : time === '30d' ? 30 : 0
+  if (!days) {
+    return null
+  }
+  const date = new Date(now)
+  date.setDate(date.getDate() - days)
+  return date
+}
+
+export function formatBackupSchedule(
+  schedule: ProjectBackupConfig['schedule'],
+) {
+  return (
+    backupCronPresets.find((preset) => preset.value === schedule.cron)?.label ??
+    schedule.cron
+  )
+}
+
+export function formatBackupStatus(status: ProjectBackupRun['status']) {
+  return status.charAt(0).toUpperCase() + status.slice(1)
+}
+
+function inferArtifactName(artifact: ProjectBackupArtifact) {
+  const fileName = artifact.objectKey.split('/').at(-1) ?? artifact.objectKey
+  return fileName
+    .replace(/^\d+-/, '')
+    .replace(/\.(sql|archive)\.gz$/, '')
+    .replace(/\.tar\.gz$/, '')
+    .replace(/\.json$/, '')
+}
+
+export function formatBytes(value: number) {
+  if (value < 1024) {
+    return `${value} B`
+  }
+  const units = ['KB', 'MB', 'GB', 'TB']
+  let size = value / 1024
+  let unitIndex = 0
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex += 1
+  }
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unitIndex]}`
+}
+
+export function getDatabaseServiceOptions({
+  databaseDumps,
+  services,
+}: {
+  databaseDumps: ProjectBackupConfig['databaseDumps']
+  services: Array<string>
+}) {
+  return Array.from(
+    new Set(
+      [...services, ...databaseDumps.map((dump) => dump.service)]
+        .map((service) => service.trim())
+        .filter(Boolean),
+    ),
+  ).sort()
+}
+
+export const backupDetailSections = [
+  { id: 'general', label: 'General' },
+  { id: 'destination', label: 'Remote backups' },
+  { id: 'retention', label: 'Retention' },
+  { id: 'volumes', label: 'Volumes' },
+  { id: 'databases', label: 'Databases' },
+  { id: 'danger', label: 'Danger' },
+]
+
+export function getComposeArtifactName(
+  artifact: ProjectBackupArtifact,
+  projectId: string,
+  environmentId: string,
+) {
+  const name = inferArtifactName(artifact)
+  return artifact.type === 'volume'
+    ? getComposeVolumeName(name, projectId, environmentId)
+    : name
+}
+
+export function getComposeVolumeName(
+  name: string,
+  projectId: string,
+  environmentId: string,
+) {
+  const prefix = buildRuntimeId({ projectId, environmentId }) + '_'
+  return name.startsWith(prefix) ? name.slice(prefix.length) : name
+}

package/src/features/projects/project-backups-pending.tsx

@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react'
+import { ClockIcon, PlusIcon, EllipsisVerticalIcon } from 'lucide-react'
+import { Button } from '#devpush/components/ui/button'
+import { ButtonGroup } from '#devpush/components/ui/button-group'
+import { Switch } from '#devpush/components/ui/switch'
+import { Skeleton } from '#devpush/components/ui/skeleton'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+} from '#devpush/components/ui/select'
+
+export function ProjectBackupsPending({
+  heading,
+  canManage,
+}: {
+  heading: ReactNode
+  canManage?: boolean
+}) {
+  return (
+    <div className="space-y-8" aria-label="Loading backups" aria-busy="true">
+      {heading}
+      <section className="space-y-4">
+        <header className="flex h-8 items-center justify-between gap-x-4">
+          <h2 className="text-base font-medium">Policies</h2>
+          {canManage !== false ? (
+            <Button disabled>
+              <PlusIcon data-icon="inline-start" />
+              Create policy
+            </Button>
+          ) : null}
+        </header>
+        <ul className="scrollbar overflow-x-auto rounded-xl border bg-card text-card-foreground">
+          <li className="flex h-11 min-w-[30rem] items-center gap-4 px-4 text-sm whitespace-nowrap">
+            <Switch disabled aria-label="Policy enabled loading" />
+            <Skeleton className="h-4 w-40" />
+
+            <span className="flex shrink-0 items-center gap-2">
+              <Skeleton className="size-2.5 shrink-0 rounded-full" />
+              <Skeleton className="h-4 w-20" />
+            </span>
+            <span className="hidden shrink-0 items-center gap-2 text-muted-foreground sm:flex">
+              <ClockIcon className="size-4 shrink-0 opacity-50" />
+              <Skeleton className="h-4 w-28" />
+            </span>
+            <div className="ml-auto shrink-0">
+              <ButtonGroup className="-mr-2" aria-label="Backup policy actions">
+                {canManage !== false ? (
+                  <Button variant="outline" size="sm" disabled>
+                    Run
+                  </Button>
+                ) : null}
+                <Button
+                  variant="outline"
+                  size="icon-sm"
+                  disabled
+                  aria-label="Policy actions"
+                >
+                  <EllipsisVerticalIcon />
+                </Button>
+              </ButtonGroup>
+            </div>
+          </li>
+        </ul>
+      </section>
+      <section className="space-y-4">
+        <header className="flex h-8 items-center justify-between gap-x-4">
+          <h2 className="text-base font-medium">Activity</h2>
+        </header>
+        <div className="flex flex-wrap items-center gap-2">
+          {[
+            'All policies',
+            'All types',
+            'All environments',
+            'All statuses',
+            'All servers',
+            'All dates',
+          ].map((label) => (
+            <Select disabled value="all" key={label}>
+              <SelectTrigger aria-label={label}>
+                <SelectValue>{label}</SelectValue>
+              </SelectTrigger>
+            </Select>
+          ))}
+        </div>
+        <ul
+          className="scrollbar overflow-x-auto rounded-xl border bg-card text-card-foreground"
+          aria-label="Backup activity"
+        >
+          {[0, 1, 2].map((row) => (
+            <li
+              key={row}
+              className="flex h-11 min-w-[36rem] items-center gap-4 border-b px-4 text-sm whitespace-nowrap md:min-w-[52rem] last:border-b-0"
+            >
+              <Skeleton className="size-4 shrink-0 rounded-full" />
+              <Skeleton className="h-5 w-20 rounded-full" />
+              <Skeleton className="h-4 w-14 shrink-0" />
+              <Skeleton className="h-4 w-28" />
+              <Skeleton className="h-4 w-16" />
+              <span className="inline-flex items-center gap-2">
+                <Skeleton className="size-2.5 shrink-0 rounded-full" />
+                <Skeleton className="h-4 w-20" />
+              </span>
+              <div className="ml-auto shrink-0">
+                <ButtonGroup
+                  className="-mr-2 shrink-0"
+                  aria-label="Operation actions"
+                >
+                  {canManage !== false ? (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      disabled
+                      className="ml-auto shrink-0"
+                      aria-label="Restore"
+                    >
+                      Restore
+                    </Button>
+                  ) : null}
+                  <Button
+                    variant="outline"
+                    size="icon-sm"
+                    disabled
+                    aria-label="Operation actions loading"
+                  >
+                    <EllipsisVerticalIcon />
+                  </Button>
+                </ButtonGroup>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  )
+}