mirror of
https://github.com/ruvnet/RuVector.git
synced 2026-05-24 22:15:18 +00:00
814f595995
Major additions: - Complete Next.js studio application with 1600+ components - Docker support (Dockerfile.combined, docker-compose.yml) - GCP deployment documentation and benchmarks - SQL benchmark scripts for performance testing - Sentry integration for monitoring - Comprehensive test suite and mocks Studio features: - Dashboard and admin interfaces - Data visualization components - Authentication and user management - API integration with RuVector backend - Static data and public assets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
88 lines
3 KiB
TypeScript
88 lines
3 KiB
TypeScript
import { useParams } from 'common'
|
|
import { Badge } from 'ui'
|
|
|
|
import { useInvalidateProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
|
|
import { Project, useInvalidateProjectDetailsQuery } from 'data/projects/project-detail-query'
|
|
import { useProjectStatusQuery } from 'data/projects/project-status-query'
|
|
import { PROJECT_STATUS } from 'lib/constants'
|
|
import { Circle, Loader } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export interface PausingStateProps {
|
|
project: Project
|
|
}
|
|
|
|
const PausingState = ({ project }: PausingStateProps) => {
|
|
const { ref } = useParams()
|
|
const [startPolling, setStartPolling] = useState(false)
|
|
|
|
const { invalidateProjectsQuery } = useInvalidateProjectsInfiniteQuery()
|
|
const { invalidateProjectDetailsQuery } = useInvalidateProjectDetailsQuery()
|
|
|
|
const { data: projectStatusData, isSuccess: isProjectStatusSuccess } = useProjectStatusQuery(
|
|
{ projectRef: ref },
|
|
{
|
|
enabled: startPolling,
|
|
refetchInterval: (data) => {
|
|
return data?.status === PROJECT_STATUS.INACTIVE ? false : 2000
|
|
},
|
|
}
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!isProjectStatusSuccess) return
|
|
if (projectStatusData?.status === PROJECT_STATUS.INACTIVE) {
|
|
if (ref) {
|
|
invalidateProjectDetailsQuery(ref)
|
|
}
|
|
invalidateProjectsQuery()
|
|
}
|
|
}, [
|
|
isProjectStatusSuccess,
|
|
projectStatusData,
|
|
ref,
|
|
invalidateProjectDetailsQuery,
|
|
invalidateProjectsQuery,
|
|
])
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => setStartPolling(true), 4000)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="mx-auto my-16 w-full max-w-7xl space-y-16">
|
|
<div className="mx-6 space-y-16">
|
|
<div className="flex flex-col space-y-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-6">
|
|
<h1 className="text-3xl">{project.name}</h1>
|
|
<div>
|
|
<Badge>
|
|
<div className="flex items-center gap-2">
|
|
<Loader className="animate-spin" size={12} />
|
|
<span>Pausing project</span>
|
|
</div>
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto mt-8 mb-16 w-full max-w-7xl">
|
|
<div className="flex h-[500px] items-center justify-center rounded border border-overlay bg-surface-100 p-8">
|
|
<div className="grid w-[380px] gap-4">
|
|
<div className="relative mx-auto max-w-[300px]">
|
|
<div className="absolute flex h-full w-full items-center justify-center">
|
|
<Loader className="animate-spin" size={20} strokeWidth={2} />
|
|
</div>
|
|
<Circle className="text-foreground-lighter" size={50} strokeWidth={1.5} />
|
|
</div>
|
|
<p className="text-center">Pausing {project.name}</p>
|
|
<p className="text-center text-sm text-foreground-light">
|
|
You may restore your project anytime thereafter, and your data will be restored to
|
|
when it was initially paused.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PausingState
|