Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: migrations #101

Merged
merged 4 commits into from
Jul 2, 2024
Merged

feat: migrations #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8097e6e
feat: wip migrations
Jun 28, 2024
1503238
feat: missing files
Jun 28, 2024
935481f
feat: working migration tool
Jul 1, 2024
da53925
fix: needs edge runtime for some reason
Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.18",
"@ipld/car": "^5.2.4",
"@ipld/dag-json": "^10.2.2",
"@ipld/dag-ucan": "^3.4.0",
"@ucanto/client": "^9.0.0",
"@ucanto/core": "^9.0.0",
Expand All @@ -33,11 +34,14 @@
"blueimp-md5": "^2.19.0",
"multiformats": "^12.1.3",
"next": "^13.5.4",
"nft.storage": "^7.1.1",
"p-retry": "^6.2.0",
"react": "latest",
"react-dom": "latest",
"react-hook-form": "^7.51.3",
"react-hot-toast": "^2.4.1",
"swr": "^2.2.4"
"swr": "^2.2.4",
"web3.storage": "^4.5.5"
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.6.3",
Expand Down
1,305 changes: 1,283 additions & 22 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added public/nftstorage-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/web3storage-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import './globals.css'
import type { Metadata } from 'next'
import Provider from '@/components/W3UIProvider'
import Toaster from '@/components/Toaster'
import { Provider as MigrationsProvider } from '@/components/MigrationsProvider'

export const metadata: Metadata = {
title: 'w3up console',
Expand All @@ -17,7 +18,9 @@ export default function RootLayout ({
<html lang="en">
<body className='bg-grad min-h-screen'>
<Provider>
<>{children}</>
<MigrationsProvider>
{children}
</MigrationsProvider>
</Provider>
<Toaster />
</body>
Expand Down
168 changes: 168 additions & 0 deletions src/app/migration/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
'use client'

import { useEffect, useRef, useState } from 'react'
import { Dialog } from '@headlessui/react'
import { TrashIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
import { H1, H2 } from '@/components/Text'
import { useMigrations } from '@/components/MigrationsProvider'
import { DidIcon } from '@/components/DidIcon'
import { CheckCircleIcon, ClockIcon, FlagIcon } from '@heroicons/react/20/solid'
import { Migration, MigrationProgress } from '@/lib/migrations/api'
import { useRouter } from 'next/navigation'

interface PageProps {
params: {
id: string
}
}

const progressStyles = `
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
height: 15px;
border-radius: 20px;
background-color: #fff;
color: #2563eb;
}
progress::-webkit-progress-bar {
background-color: #fff;
border-radius: 20px;
}
progress::-webkit-progress-value {
background-color: #2563eb;
border-radius: 20px;
}
progress::-moz-progress-bar {
background-color: #2563eb;
border-radius: 20px;
}
`

export default function MigrationPage ({ params }: PageProps): JSX.Element {
const [{ migrations, logs }, { removeMigration }] = useMigrations()
const [isRemoveConfirmModalOpen, setRemoveConfirmModalOpen] = useState(false)
const router = useRouter()
const migration = migrations.find(m => m.id === params.id)
if (!migration) return <H1>Migration not found</H1>

const handleRemove = () => {
removeMigration(migration.id)
router.replace('/')
}

return (
<div>
<H1>Migrating from {migration.source}</H1>
<div className='flex mb-4'>
<div className='flex-auto'>
<H2>Target</H2>
<p className='font-mono text-xs'>
<DidIcon did={migration.space} width={5} display='inline-block' /> {migration.space}
</p>
</div>
<div className='flex-auto'>
<H2>Status</H2>
<MigrationStatus migration={migration} />
</div>
</div>
<H2>Progress</H2>
<ProgressBar progress={migration.progress} />
<H2>Log</H2>
<LogLines lines={logs[migration.id] ?? []} />
<button onClick={e => { e.preventDefault(); setRemoveConfirmModalOpen(true) }} className={`inline-block bg-zinc-950 text-white font-bold text-sm pl-4 pr-6 py-2 rounded-full whitespace-nowrap hover:bg-red-700 hover:outline`}>
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> Remove
</button>
<RemoveConfirmModal
isOpen={isRemoveConfirmModalOpen}
onConfirm={handleRemove}
onCancel={() => setRemoveConfirmModalOpen(false)}
/>
</div>
)
}

const MigrationStatus = ({ migration }: { migration: Migration }) => {
let Icon = ClockIcon
let text = 'Running'
if (!migration.progress) {
Icon = FlagIcon
text = 'Starting'
} else if (!migration.progress.pending) {
Icon = CheckCircleIcon
text = 'Complete'
}
return (
<p className='text-xs'>
<Icon className='h-5 w-5 inline-block align-middle'/> {text}
</p>
)
}

const LogLines = ({ lines }: { lines: string[] }) => {
const ref = useRef<null | HTMLDivElement>(null)
useEffect(() => {
ref.current?.scrollIntoView({ block: 'end', behavior: 'smooth' })
})
return (
<pre className='text-xs p-4 h-96 bg-white/60 overflow-y-auto mb-4'>
{lines.map(line => `${line}\n`)}
{lines.length ? '' : 'No logs yet!'}
<div ref={ref} className='py-2'></div>
</pre>
)
}

const ProgressBar = ({ progress }: { progress?: MigrationProgress }) => {
const attempted = progress ? progress.succeeded + progress.failed.length : 0
const total = progress ? attempted + progress.pending : 0
const percentage = progress ? Math.round((attempted / total) * 100) : 0
return (
<div className='mb-4'>
<style scoped>{progressStyles}</style>
<progress max='100' value={percentage} className='w-full shadow rounded-xl my-2 block'></progress>
<div className='flex justify-between'>
<div className='font-mono text-xs'>{progress?.current?.toString() ?? 'No current item'}</div>
<div className='text-xs'>{attempted.toLocaleString()} of {total ? total.toLocaleString() : '?'}</div>
</div>
</div>
)
}

interface RemoveConfirmModalProps {
isOpen: boolean
onConfirm: () => void
onCancel: () => void
}

function RemoveConfirmModal ({ isOpen, onConfirm, onCancel }: RemoveConfirmModalProps) {
const [confirmed, setConfirmed] = useState(false)
return (
<Dialog open={isOpen} onClose={() => { setConfirmed(false); onCancel() }} className='relative z-50'>
<div className='fixed inset-0 flex w-screen items-center justify-center bg-black/70' aria-hidden='true'>
<Dialog.Panel className='bg-grad p-4 shadow-lg rounded-lg'>
<Dialog.Title className='text-lg font-semibold leading-5 text-black text-center my-3'>
<ExclamationTriangleIcon className='h-10 w-10 inline-block' /><br/>
Confirm remove
</Dialog.Title>
<Dialog.Description className='py-2'>
Are you sure you want to remove this migration?
</Dialog.Description>

<p className='py-2'>You will have to restart this migration if it has not completed.</p>

<div className='py-2 text-center'>
<button onClick={e => { e.preventDefault(); setConfirmed(true); onConfirm() }} className={`inline-block bg-red-700 text-white font-bold text-sm pl-4 pr-6 py-2 mr-3 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
<TrashIcon className='h-5 w-5 inline-block mr-1 align-middle' style={{marginTop: -4}} /> {confirmed ? 'Removing...' : 'Remove'}
</button>
<button onClick={e => { e.preventDefault(); setConfirmed(false); onCancel() }} className={`inline-block bg-zinc-950 text-white font-bold text-sm px-8 py-2 rounded-full whitespace-nowrap ${confirmed ? 'opacity-50' : 'hover:outline'}`} disabled={confirmed}>
Cancel
</button>
</div>
</Dialog.Panel>
</div>
</Dialog>
)
}
Loading
Loading