Skip to content

Server transfer admin UI #5116

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

Merged
Prospector merged 10 commits into from
Jan 15, 2026
Merged

Server transfer admin UI #5116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
39bf1fb
Initial frontend
fetchfern Jan 13, 2026
a898b2b
doc for opus (TO REMOVE)
fetchfern Jan 13, 2026
60da01b
Make better
fetchfern Jan 14, 2026
1c06476
Clarified language
fetchfern Jan 14, 2026
573056b
Remove agent docs
fetchfern Jan 14, 2026
457c0c3
No scss
fetchfern Jan 14, 2026
b7ddaad
Fmt
fetchfern Jan 14, 2026
fbc850e
Remove i18n
fetchfern Jan 14, 2026
75c520f
Fmt
fetchfern Jan 14, 2026
67d540d
Add transferred node tagging
fetchfern Jan 14, 2026
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
397 changes: 397 additions & 0 deletions apps/frontend/src/components/ui/admin/TransferModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,397 @@
<template>
<NewModal ref="modal">
<template #title>
<span class="text-lg font-extrabold text-contrast">Schedule transfer</span>
</template>
<div class="flex w-[550px] max-w-[90vw] flex-col gap-6">
<div class="flex flex-col gap-2">
<label class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Type </span>
<span>Select transfer type.</span>
</label>
<Combobox
v-model="mode"
:options="modeOptions"
placeholder="Select type"
class="max-w-[10rem]"
/>
</div>

<div v-if="mode === 'servers'" class="flex flex-col gap-2">
<label for="server-ids" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">
Server IDs
<span class="text-brand-red">*</span>
</span>
<span>Server IDs (one per line or comma-separated.)</span>
</label>
<div class="textarea-wrapper">
<textarea
id="server-ids"
v-model="serverIdsInput"
rows="4"
class="w-full bg-surface-3"
placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
/>
</div>
<span v-if="parsedServerIds.length" class="text-sm text-secondary">
{{ parsedServerIds.length }} server{{ parsedServerIds.length === 1 ? '' : 's' }} selected
</span>
</div>

<div v-else class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<label for="node-input" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">
Node hostnames
<span class="text-brand-red">*</span>
</span>
<span>Add nodes to transfer.</span>
</label>
<div class="flex items-center gap-2">
<input
id="node-input"
v-model="nodeInput"
class="w-40"
type="text"
autocomplete="off"
placeholder="us-vin200"
@keydown.enter.prevent="addNode"
/>
<ButtonStyled color="blue" color-fill="text">
<button class="shrink-0" @click="addNode">
<PlusIcon />
Add
</button>
</ButtonStyled>
</div>
<div v-if="selectedNodes.length" class="mt-1 flex flex-wrap gap-2">
<TagItem v-for="h in selectedNodes" :key="`node-${h}`" :action="() => removeNode(h)">
<XIcon />
{{ h }}
</TagItem>
</div>
</div>
<div class="flex flex-col gap-3">
<label for="cordon-nodes" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">Cordon nodes now</span>
<span>
Prevent new servers from being provisioned on the transferred nodes from now on.<br /><br />
Note that if this option isn't chosen, new servers provisioned onto transferred nodes
between now and the scheduled time will still be transferred.
</span>
</label>
<Toggle id="cordon-nodes" v-model="cordonNodes" />
</div>
<div class="flex flex-col gap-2">
<label for="tag-nodes" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">Tag transferred nodes</span>
<span>Optional tag to add to the transferred nodes.</span>
</label>
<input
id="tag-nodes"
v-model="tagNodes"
class="max-w-[12rem]"
type="text"
autocomplete="off"
/>
</div>
</div>

<div class="flex flex-col gap-2">
<label for="region-select" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Target region </span>
<span>Select the destination region for transferred servers.</span>
</label>
<Combobox
v-model="selectedRegion"
:options="regions"
placeholder="Select region"
class="max-w-[24rem]"
/>
</div>

<div class="flex flex-col gap-2">
<label for="tag-input" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Node tags </span>
<span>Optional preferred node tags for node selection.</span>
</label>
<div class="flex items-center gap-2">
<input
id="tag-input"
v-model="tagInput"
class="w-40"
type="text"
autocomplete="off"
placeholder="ovh-gen4"
@keydown.enter.prevent="addTag"
/>
<ButtonStyled color="blue" color-fill="text">
<button class="shrink-0" @click="addTag">
<PlusIcon />
Add
</button>
</ButtonStyled>
</div>
<div v-if="selectedTags.length" class="mt-1 flex flex-wrap gap-2">
<TagItem v-for="t in selectedTags" :key="`tag-${t}`" :action="() => removeTag(t)">
<XIcon />
{{ t }}
</TagItem>
</div>
</div>

<div class="flex flex-col gap-2">
<label class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast"> Schedule </span>
</label>
<Chips
v-model="scheduleOption"
:items="scheduleOptions"
:format-label="(item) => scheduleOptionLabels[item]"
:capitalize="false"
/>
<input
v-if="scheduleOption === 'later'"
v-model="scheduledDate"
type="datetime-local"
class="mt-2 max-w-[16rem]"
autocomplete="off"
/>
</div>

<div class="flex flex-col gap-2">
<label for="reason" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">
Reason
<span class="text-brand-red">*</span>
</span>
<span>Provide a reason for this transfer batch.</span>
</label>
<div class="textarea-wrapper">
<textarea
id="reason"
v-model="reason"
rows="2"
class="w-full bg-surface-3"
placeholder="Node maintenance scheduled"
/>
</div>
</div>

<div class="flex gap-2">
<ButtonStyled color="brand">
<button :disabled="submitDisabled || submitting" @click="submit">
<SendIcon aria-hidden="true" />
{{ submitting ? 'Scheduling...' : 'Schedule transfer' }}
</button>
</ButtonStyled>
<ButtonStyled>
<button @click="modal?.hide?.()">
<XIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
</template>

<script setup lang="ts">
import { PlusIcon, SendIcon, XIcon } from '@modrinth/assets'
import {
ButtonStyled,
Chips,
Combobox,
injectNotificationManager,
NewModal,
TagItem,
Toggle,
} from '@modrinth/ui'
import dayjs from 'dayjs'
import { computed, ref } from 'vue'

import { useServersFetch } from '~/composables/servers/servers-fetch.ts'

const emit = defineEmits<{
success: []
}>()

const { addNotification } = injectNotificationManager()

const modal = ref<InstanceType<typeof NewModal>>()

const modeOptions = [
{ value: 'servers', label: 'Servers' },
{ value: 'nodes', label: 'Nodes' },
]
const mode = ref<string>('servers')

const serverIdsInput = ref('')
const parsedServerIds = computed(() => {
const input = serverIdsInput.value.trim()
if (!input) return []
return input
.split(/[\n,\s]+/)
.map((s) => s.trim())
.filter((s) => s.length > 0)
})

const nodeInput = ref('')
const selectedNodes = ref<string[]>([])
const cordonNodes = ref(true)
const tagNodes = ref('')

type RegionOpt = { value: string; label: string }
const regions = ref<RegionOpt[]>([])
const selectedRegion = ref<string | null>(null)
const nodeHostnames = ref<string[]>([])

const tagInput = ref('')
const selectedTags = ref<string[]>([])

const scheduleOptions: ('now' | 'later')[] = ['now', 'later']
const scheduleOptionLabels: Record<string, string> = {
now: 'Now',
later: 'Schedule for later',
}
const scheduleOption = ref<'now' | 'later'>('now')
const scheduledDate = ref<string>('')

const reason = ref('')

const submitting = ref(false)

function show(event?: MouseEvent) {
void ensureOverview()
mode.value = 'servers'
serverIdsInput.value = ''
selectedNodes.value = []
cordonNodes.value = true
tagNodes.value = `migration${dayjs().format('YYYYMMDD')}`
selectedTags.value = []
tagInput.value = ''
nodeInput.value = ''
scheduleOption.value = 'now'
scheduledDate.value = ''
reason.value = ''
modal.value?.show(event)
}

function hide() {
modal.value?.hide()
}

function addNode() {
const v = nodeInput.value.trim()
if (!v) return
if (!nodeHostnames.value.includes(v)) {
addNotification({
title: 'Unknown node',
text: "This hostname doesn't exist",
type: 'error',
})
return
}
if (!selectedNodes.value.includes(v)) selectedNodes.value.push(v)
nodeInput.value = ''
}

function removeNode(v: string) {
selectedNodes.value = selectedNodes.value.filter((x) => x !== v)
}

function addTag() {
const v = tagInput.value.trim()
if (!v) return
if (!selectedTags.value.includes(v)) selectedTags.value.push(v)
tagInput.value = ''
}

function removeTag(v: string) {
selectedTags.value = selectedTags.value.filter((x) => x !== v)
}

const submitDisabled = computed(() => {
if (!reason.value.trim()) return true
if (mode.value === 'servers') {
if (parsedServerIds.value.length === 0) return true
} else {
if (selectedNodes.value.length === 0) return true
}
if (scheduleOption.value === 'later' && !scheduledDate.value) return true
return false
})

async function ensureOverview() {
if (regions.value.length || nodeHostnames.value.length) return
try {
const data = await useServersFetch<any>('/nodes/overview', { version: 'internal' })
regions.value = (data.regions || []).map((r: any) => ({
value: r.key,
label: `${r.display_name} (${r.key})`,
}))
nodeHostnames.value = data.node_hostnames || []
if (!selectedRegion.value && regions.value.length) {
selectedRegion.value = regions.value[0].value
}
} catch (err) {
addNotification({ title: 'Failed to load nodes overview', text: String(err), type: 'error' })
}
}

async function submit() {
if (submitDisabled.value || submitting.value) return

submitting.value = true
try {
const scheduledAt =
scheduleOption.value === 'now' ? undefined : dayjs(scheduledDate.value).toISOString()

if (mode.value === 'servers') {
await useServersFetch('/transfers/schedule/servers', {
version: 'internal',
method: 'POST',
body: {
server_ids: parsedServerIds.value,
scheduled_at: scheduledAt,
target_region: selectedRegion.value || undefined,
node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
reason: reason.value.trim(),
},
})
} else {
await useServersFetch('/transfers/schedule/nodes', {
version: 'internal',
method: 'POST',
body: {
node_hostnames: selectedNodes.value.slice(),
scheduled_at: scheduledAt,
target_region: selectedRegion.value || undefined,
node_tags: selectedTags.value.length > 0 ? selectedTags.value : undefined,
reason: reason.value.trim(),
cordon_nodes: cordonNodes.value,
tag_nodes: tagNodes.value.trim() || undefined,
},
})
}

addNotification({ title: 'Transfer scheduled', type: 'success' })
emit('success')
modal.value?.hide()
} catch (err: any) {
addNotification({
title: 'Error scheduling transfer',
text: err?.data?.description ?? err?.message ?? String(err),
type: 'error',
})
} finally {
submitting.value = false
}
}

defineExpose({
show,
hide,
})
</script>
Loading