-
-
- {children}
-
-
+ return (
+
+
+
+ {children}
+
- )
- }
+
+ )
+}
+export function CustomDashboardLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
return (
)
}
+
+export default function DashboardLayoutWrapper({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const pathname = usePathname()
+ const config = getDashboardLayoutConfig(pathname)
+
+ if (config.type === 'default') {
+ return {children}
+ }
+
+ return {children}
+}
diff --git a/src/features/dashboard/loading-layout.tsx b/src/features/dashboard/loading-layout.tsx
index b916cd40c..a0d073ffc 100644
--- a/src/features/dashboard/loading-layout.tsx
+++ b/src/features/dashboard/loading-layout.tsx
@@ -1,9 +1,11 @@
-import { Loader } from '@/ui/primitives/loader_d'
+'use client'
+
+import { Loader } from '@/ui/primitives/loader'
export default function LoadingLayout() {
return (
-
+
)
}
diff --git a/src/features/dashboard/sandbox/inspect/context.tsx b/src/features/dashboard/sandbox/inspect/context.tsx
index 1359ed0b6..b80283bf5 100644
--- a/src/features/dashboard/sandbox/inspect/context.tsx
+++ b/src/features/dashboard/sandbox/inspect/context.tsx
@@ -37,7 +37,7 @@ interface SandboxInspectProviderProps {
seedEntries?: EntryInfo[]
}
-export function SandboxInspectProvider({
+export default function SandboxInspectProvider({
children,
rootPath,
seedEntries,
@@ -232,8 +232,7 @@ export function SandboxInspectProvider({
sandboxManagerRef.current = new SandboxManager(
storeRef.current,
sandbox,
- rootPath,
- sandboxInfo.envdAccessToken !== undefined
+ rootPath
)
trackInteraction('started_watching', {
diff --git a/src/features/dashboard/sandbox/inspect/sandbox-manager.ts b/src/features/dashboard/sandbox/inspect/sandbox-manager.ts
index 1aa5364a0..974ad4941 100644
--- a/src/features/dashboard/sandbox/inspect/sandbox-manager.ts
+++ b/src/features/dashboard/sandbox/inspect/sandbox-manager.ts
@@ -25,7 +25,6 @@ export class SandboxManager {
private readonly rootPath: string
private store: FilesystemStore
private sandbox: Sandbox
- private readonly isSandboxSecure: boolean = false
private static readonly LOAD_DEBOUNCE_MS = 250
private static readonly READ_DEBOUNCE_MS = 250
@@ -50,16 +49,10 @@ export class SandboxManager {
}
> = new Map()
- constructor(
- store: FilesystemStore,
- sandbox: Sandbox,
- rootPath: string,
- isSandboxSecure: boolean
- ) {
+ constructor(store: FilesystemStore, sandbox: Sandbox, rootPath: string) {
this.store = store
this.sandbox = sandbox
this.rootPath = normalizePath(rootPath)
- this.isSandboxSecure = isSandboxSecure
// immediately start a single recursive watcher at the root
void this.startRootWatcher()
@@ -360,11 +353,8 @@ export class SandboxManager {
const downloadUrl = await this.sandbox.downloadUrl(normalizedPath, {
user: 'root',
- useSignature: this.isSandboxSecure || undefined,
})
- console.log('downloadUrl', downloadUrl)
-
return downloadUrl
}
diff --git a/src/features/dashboard/sandbox/inspect/view.tsx b/src/features/dashboard/sandbox/inspect/view.tsx
index 83de3254a..ccc3f9867 100644
--- a/src/features/dashboard/sandbox/inspect/view.tsx
+++ b/src/features/dashboard/sandbox/inspect/view.tsx
@@ -1,6 +1,6 @@
'use client'
-import { SandboxInspectProvider } from '@/features/dashboard/sandbox/inspect/context'
+import SandboxInspectProvider from '@/features/dashboard/sandbox/inspect/context'
import SandboxInspectFilesystem from '@/features/dashboard/sandbox/inspect/filesystem'
import SandboxInspectViewer from '@/features/dashboard/sandbox/inspect/viewer'
import { cn } from '@/lib/utils'
diff --git a/src/features/dashboard/sandboxes/list/table-cells.tsx b/src/features/dashboard/sandboxes/list/table-cells.tsx
index 36d66b520..5bae0c898 100644
--- a/src/features/dashboard/sandboxes/list/table-cells.tsx
+++ b/src/features/dashboard/sandboxes/list/table-cells.tsx
@@ -2,7 +2,7 @@
import { PROTECTED_URLS } from '@/configs/urls'
import ResourceUsage from '@/features/dashboard/common/resource-usage'
-import { useTemplateTableStore } from '@/features/dashboard/templates/stores/table-store'
+import { useTemplateTableStore } from '@/features/dashboard/templates/list/stores/table-store'
import {
defaultErrorToast,
defaultSuccessToast,
diff --git a/src/features/dashboard/templates/builds/constants.ts b/src/features/dashboard/templates/builds/constants.ts
new file mode 100644
index 000000000..c7bd04dca
--- /dev/null
+++ b/src/features/dashboard/templates/builds/constants.ts
@@ -0,0 +1,7 @@
+import { BuildStatusDTO } from '@/server/api/models/builds.models'
+
+export const INITIAL_BUILD_STATUSES: BuildStatusDTO[] = [
+ 'building',
+ 'failed',
+ 'success',
+]
diff --git a/src/features/dashboard/templates/builds/empty.tsx b/src/features/dashboard/templates/builds/empty.tsx
new file mode 100644
index 000000000..e4e643463
--- /dev/null
+++ b/src/features/dashboard/templates/builds/empty.tsx
@@ -0,0 +1,24 @@
+import { cn } from '@/lib/utils'
+import { BuildIcon } from '@/ui/primitives/icons'
+
+interface BuildsEmptyProps {
+ error?: string
+}
+
+export default function BuildsEmpty({ error }: BuildsEmptyProps) {
+ return (
+
+
+
+ {error ? error : 'No template builds found'}
+
+
+ {sortedStatuses.map((status, i) => (
+
+ ))}
+
+ )
+}
+
+const STATUS_OPTIONS: Array<{ value: BuildStatusDTO; label: string }> = [
+ { value: 'building', label: 'Building' },
+ { value: 'success', label: 'Success' },
+ { value: 'failed', label: 'Failed' },
+]
+
+export default function BuildsHeader() {
+ const { statuses, setStatuses, buildIdOrTemplate, setBuildIdOrTemplate } =
+ useFilters()
+
+ const [localBuildIdOrTemplate, setLocalBuildIdOrTemplate] = useState(
+ buildIdOrTemplate ?? ''
+ )
+
+ const [localStatuses, setLocalStatuses] = useState(statuses)
+
+ useEffect(() => {
+ setLocalBuildIdOrTemplate(buildIdOrTemplate ?? '')
+ }, [buildIdOrTemplate])
+
+ useEffect(() => {
+ setLocalStatuses(statuses)
+ }, [statuses])
+
+ const toggleStatus = (status: BuildStatusDTO) => {
+ const isSelected = localStatuses.includes(status)
+
+ if (isSelected && localStatuses.length === 1) {
+ return
+ }
+
+ const newStatuses = isSelected
+ ? localStatuses.filter((s) => s !== status)
+ : [...localStatuses, status]
+
+ setLocalStatuses(newStatuses)
+ setStatuses(newStatuses)
+ }
+
+ const selectAllStatuses = () => {
+ const allStatuses = STATUS_OPTIONS.map((s) => s.value)
+ setLocalStatuses(allStatuses)
+ setStatuses(allStatuses)
+ }
+
+ return (
+
+ {
+ setLocalBuildIdOrTemplate(e.target.value)
+ setBuildIdOrTemplate(e.target.value)
+ }}
+ />
+
+
+
+
+
+
+ e.preventDefault()}
+ >
+ All
+
+
+ {STATUS_OPTIONS.map((option) => (
+ toggleStatus(option.value)}
+ onSelect={(e) => e.preventDefault()}
+ >
+
+
+ ))}
+
+
+
+ )
+}
diff --git a/src/features/dashboard/templates/builds/table-cells.tsx b/src/features/dashboard/templates/builds/table-cells.tsx
new file mode 100644
index 000000000..e6fa1a83a
--- /dev/null
+++ b/src/features/dashboard/templates/builds/table-cells.tsx
@@ -0,0 +1,242 @@
+'use client'
+
+import { PROTECTED_URLS } from '@/configs/urls'
+import { useTemplateTableStore } from '@/features/dashboard/templates/list/stores/table-store'
+import { useClipboard } from '@/lib/hooks/use-clipboard'
+import { cn } from '@/lib/utils'
+import {
+ formatDurationCompact,
+ formatTimeAgoCompact,
+} from '@/lib/utils/formatting'
+import type {
+ BuildStatusDTO,
+ ListedBuildDTO,
+} from '@/server/api/models/builds.models'
+import { Badge } from '@/ui/primitives/badge'
+import { Button } from '@/ui/primitives/button'
+import { CheckIcon, CloseIcon } from '@/ui/primitives/icons'
+import { Loader } from '@/ui/primitives/loader'
+import { ArrowUpRight } from 'lucide-react'
+import { useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+function CopyableCell({
+ value,
+ children,
+ className,
+}: {
+ value: string
+ children: React.ReactNode
+ className?: string
+}) {
+ const [wasCopied, copy] = useClipboard()
+
+ return (
+
+ )
+}
+
+export function BuildId({ id }: { id: string }) {
+ return (
+
+ {id}
+
+ )
+}
+
+export function Template({
+ name,
+ templateId,
+}: {
+ name: string
+ templateId: string
+}) {
+ const router = useRouter()
+ const { teamIdOrSlug } =
+ useParams<
+ Awaited['params']>
+ >()
+
+ return (
+
+ )
+}
+
+export function LoadMoreButton({
+ isLoading,
+ onLoadMore,
+}: {
+ isLoading: boolean
+ onLoadMore: () => void
+}) {
+ if (isLoading) {
+ return (
+
+
+ Loading...
+
+ )
+ }
+ return (
+
+ )
+}
+
+export function BackToTopButton({ onBackToTop }: { onBackToTop: () => void }) {
+ return (
+
+ )
+}
+
+export function Duration({
+ createdAt,
+ finishedAt,
+ isBuilding,
+}: {
+ createdAt: number
+ finishedAt: number | null
+ isBuilding: boolean
+}) {
+ const [now, setNow] = useState(() => Date.now())
+
+ useEffect(() => {
+ if (!isBuilding) return
+
+ const interval = setInterval(() => {
+ setNow(Date.now())
+ }, 1000)
+
+ return () => clearInterval(interval)
+ }, [isBuilding])
+
+ const duration = isBuilding
+ ? now - createdAt
+ : (finishedAt ?? now) - createdAt
+ const iso = finishedAt ? new Date(finishedAt).toISOString() : null
+
+ if (isBuilding || !iso) {
+ return (
+
+ {formatDurationCompact(duration)}
+
+ )
+ }
+
+ return (
+
+ {formatDurationCompact(duration)}
+
+ )
+}
+
+export function StartedAt({ timestamp }: { timestamp: number }) {
+ const iso = new Date(timestamp).toISOString()
+ const elapsed = Date.now() - timestamp
+
+ return (
+
+ {formatTimeAgoCompact(elapsed)}
+
+ )
+}
+
+interface StatusProps {
+ status: BuildStatusDTO
+}
+
+export function Status({ status }: StatusProps) {
+ const config: Record<
+ BuildStatusDTO,
+ {
+ label: string
+ variant: 'default' | 'positive' | 'error'
+ icon: React.ReactNode
+ }
+ > = {
+ building: {
+ label: 'Building',
+ variant: 'default',
+ icon: null,
+ },
+ success: {
+ label: 'Success',
+ variant: 'positive',
+ icon: ,
+ },
+ failed: {
+ label: 'Failed',
+ variant: 'error',
+ icon: ,
+ },
+ }
+
+ const { label, icon, variant } = config[status]
+
+ return (
+
+
+ {icon}
+ {label}
+
+
+ )
+}
+
+export function Reason({
+ statusMessage,
+}: {
+ statusMessage: ListedBuildDTO['statusMessage']
+}) {
+ if (!statusMessage) return null
+
+ return (
+
+ {statusMessage}
+
+ )
+}
diff --git a/src/features/dashboard/templates/builds/table.tsx b/src/features/dashboard/templates/builds/table.tsx
new file mode 100644
index 000000000..db1e9604d
--- /dev/null
+++ b/src/features/dashboard/templates/builds/table.tsx
@@ -0,0 +1,341 @@
+'use client'
+
+import type {
+ ListedBuildDTO,
+ RunningBuildStatusDTO,
+} from '@/server/api/models/builds.models'
+import { useTRPC } from '@/trpc/client'
+import { ArrowDownIcon } from '@/ui/primitives/icons'
+import { Loader } from '@/ui/primitives/loader'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from '@/ui/primitives/table'
+import {
+ keepPreviousData,
+ useInfiniteQuery,
+ useQuery,
+ useQueryClient,
+} from '@tanstack/react-query'
+import { useParams } from 'next/navigation'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import BuildsEmpty from './empty'
+import {
+ BackToTopButton,
+ BuildId,
+ Duration,
+ LoadMoreButton,
+ Reason,
+ StartedAt,
+ Status,
+ Template,
+} from './table-cells'
+import useFilters from './use-filters'
+
+const BUILDS_REFETCH_INTERVAL_MS = 15_000
+const RUNNING_BUILD_POLL_INTERVAL_MS = 3_000
+const MAX_CACHED_PAGES = 3
+
+const COLUMN_WIDTHS = {
+ id: 132,
+ status: 96,
+ template: 192,
+ started: 156,
+ duration: 96,
+} as const
+
+const BuildsTable = () => {
+ const trpc = useTRPC()
+ const queryClient = useQueryClient()
+ const scrollContainerRef = useRef(null)
+
+ const { teamIdOrSlug } =
+ useParams<
+ Awaited['params']>
+ >()
+ const { statuses, buildIdOrTemplate } = useFilters()
+ const { isFilterRefetching, clearFilterRefetching } = useFilterChangeTracking(
+ statuses,
+ buildIdOrTemplate
+ )
+
+ // Builds list query
+ const {
+ data: paginatedBuilds,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isFetching: isFetchingBuilds,
+ isPending: isInitialLoad,
+ error: buildsError,
+ } = useInfiniteQuery(
+ trpc.builds.list.infiniteQueryOptions(
+ { teamIdOrSlug, statuses, buildIdOrTemplate },
+ {
+ getNextPageParam: (page) => page.nextCursor ?? undefined,
+ placeholderData: keepPreviousData,
+ retry: 3,
+ refetchInterval: BUILDS_REFETCH_INTERVAL_MS,
+ refetchIntervalInBackground: false,
+ maxPages: MAX_CACHED_PAGES,
+ }
+ )
+ )
+
+ const builds = useMemo(
+ () => paginatedBuilds?.pages.flatMap((p) => p.data) ?? [],
+ [paginatedBuilds]
+ )
+
+ const hasScrolledPastInitialPages =
+ paginatedBuilds?.pageParams[0] !== undefined
+
+ useEffect(() => {
+ if (!isFetchingBuilds && isFilterRefetching) {
+ clearFilterRefetching()
+ }
+ }, [isFetchingBuilds, isFilterRefetching, clearFilterRefetching])
+
+ // Running builds status polling
+ const runningBuildIds = useMemo(
+ () => builds.filter((b) => b.status === 'building').map((b) => b.id),
+ [builds]
+ )
+
+ const { data: runningStatusesData } = useQuery(
+ trpc.builds.runningStatuses.queryOptions(
+ { teamIdOrSlug, buildIds: runningBuildIds },
+ {
+ enabled: runningBuildIds.length > 0,
+ refetchInterval: (query) => {
+ const hasRunningBuilds = query.state.data?.some(
+ (s) => s.status === 'building'
+ )
+ return hasRunningBuilds ? RUNNING_BUILD_POLL_INTERVAL_MS : false
+ },
+ refetchIntervalInBackground: false,
+ refetchOnWindowFocus: 'always',
+ retry: false,
+ }
+ )
+ )
+
+ const buildsWithLiveStatus = useMemo(
+ () => mergeBuildsWithLiveStatuses(builds, runningStatusesData),
+ [builds, runningStatusesData]
+ )
+
+ // Handlers
+ const buildsQueryKey = trpc.builds.list.infiniteQueryOptions({
+ teamIdOrSlug,
+ statuses,
+ buildIdOrTemplate,
+ }).queryKey
+
+ const handleLoadMore = useCallback(() => {
+ fetchNextPage()
+ }, [fetchNextPage])
+
+ const handleBackToTop = useCallback(() => {
+ queryClient.resetQueries({ queryKey: buildsQueryKey })
+ if (scrollContainerRef.current) {
+ scrollContainerRef.current.scrollTop = 0
+ }
+ }, [queryClient, buildsQueryKey])
+
+ // Derived UI state
+ const hasData = buildsWithLiveStatus.length > 0
+ const showLoader = isInitialLoad && !hasData
+ const showEmpty = !isInitialLoad && !isFetchingBuilds && !hasData
+ const showFilterRefetchingOverlay = isFilterRefetching && hasData
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Build ID
+ Status
+ Template
+
+
+ Started
+
+
+
+ Duration
+ |
+
+
+
+
+ {showLoader && (
+
+
+
+
+
+
+
+ )}
+
+ {showEmpty && (
+
+
+
+
+
+ )}
+
+ {hasData && (
+ <>
+ {hasScrolledPastInitialPages && (
+
+
+
+
+
+ )}
+
+ {buildsWithLiveStatus.map((build) => {
+ const isBuilding = build.status === 'building'
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ })}
+
+ {hasNextPage && (
+
+
+
+
+
+ )}
+
+ )}
+
+
+
+