MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: server management in app (#5628)

Browse Source 
* start new server settings tabs

* update properties tab to match design

* better stying in general tab

* feat: add suffix input for hostname field

* implement tables for allocations and DNS records

* add tags for dns record type

* small gap adjustment

* polish advanced page

* adjust properties page hierarchy

* fix searching properties, empty state and projection radius appearing

* pnpm prepr

* update copy to match designs

* fix suffix input component

* style fixes and match heading size

* small fix

* fix search allocations placeholder

* adjust table styles

* move all installation settings helper text to below input

* update icon to use overflow menu buttons

* fix modal to be consistent

* open advanced properties when search

* remove other and custom properties, and update styles

* remove hide/show all java versions

* handle mc 26

* refactor: move server settings pages into /ui and add app ServerSettingsModal

* hook up server pages for app

* add server page header to app

* hook up server settings modal

* use large size

* fix card box shadow style

* fix hostname input for app

* fix app/website card containers

* implement external tabs for billing and admin billing

* fix save banner fixed to parent instead of page body

* remove unused prop to FriendsList causing warning in app

* fix client-only not available for app

* fix bottom cut off

* wire node auth

* implement full copy buttons

* dedup copy button tailwind styles

* fix hover class not working in @apply

* fix spacing

* fix error validation styles

* apply consistent styles and spacing

* feat: update hosting server card (#5609)

* fix type errors

* fix some stylesheets not imported for storybook

* add server listing stories

* add fix for frontend stylesheet imports

* remove props.

* convert copy code to use tailwind

* update server listing component styles

* update server info label styles

* start status/player count info label, more style updates and fixes

* add new server card buttons

* hook up server cards and implement updated styles

* hook up on download button

* fix tauri throwing error when api returns 204 No Content

* hook up purchase server modal in app

* fix upgrading state loading icon

* pnpm prepr

* filter out servers past 30 days after cancellation

* do not apply opacity on lock or spiner icons

* fix disabled server icon background

* update pending change stage

* handle known suspension states

* refactor: reduce code duplication for server listing

* update disabled state text color

* fix loading icon color

* clean up copy

* fix disabled opacity for server card

* update server listing files kept to be countdown

* implement resubscribe modal

* implement proper provisioning state for resubscribe

* fix duplicate attribute and pnpm prepr

* feat: add shared UI package auth DI

* feat: update purchase server flow (#5714)

* implement server list empty state component

* fix stories and adjust spacing

* implement select plan design refresh

* implement auth for empty server list

* use refs instead of reactive

* pnpm prepr

* fix auth usage for empty servers list

* move app auth provider setup to src/providers/setup

* pnpm prepr

* fix max height

* style fix

* fix getCreds no auth is blocking api client

* implement servers guest plan modal and signin which redirects back to modal's next step

* refactor guest plan select logic into provider

* implement sign in or create account popup

* remove force empty serverList

* add download button for suspended mod and generic

* add handling for when user logs out

* QA pass style fixes

* more consistent page styles

* fix duplicate export

* refactor: remove all fallback stuff from resubscribe modal

* implement shared download latest backup util

* i18n pass

* pnpm prepr

* fix region being selected if ping failed

* pnpm prepr

* feat: servers in app finalization (#5744)

* feat: start on shared console implementation into logs and overview pages

* fix: terminal gap issues

* feat: swap word wrap for full screen

* fix: stats cards alignment

* fix: stats

* feat: fix console clear + remove copy

* fix: lint

* fix: use reset not clear

* feat: shared server header & overview page for app and website (#5736)

* feat: implement shared server header for app and website

* feat: implement wrapped overview page with shared composable and hook it up

* pnpm prepr

* fix: bugs

* qa: cleanup

* feat: root.vue shared layout

* feat: delete old options pages + fix discovery frontend

* fix: discovery

* fix: misc style/layout issues

* fix page padding

* fix: modal height jankiness

* feat: implement server install content in app and server setup modal with DI

* fix: spacing

* remove servers in app feature flag

* Revert "remove servers in app feature flag"

This reverts commit 86e284c4bdd6fa42c3c8fbaf1efbec41f4d1c6d2.

* fix: qa

* feat: remove legacy components from apps/frontend/src/components/ui/servers

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

* qa pass (#5738)

* fix: qa

* feat: qa

* fix: server icon fetch fails due to global node auth race condition overriding each other

* fix: lint

* fix: server icon upload/sync and centralize logic

* fix: server settings modal not closing for server reset

* fix: better server sorting

* feat: copy address in server listing card

* fix: notification panel in modal and when overlapping with action bar

* fix: empty server list empty state flashing when refresh, fixed by adding isReady auth flag

* feat: use floating action bar for save banner

* fix: saving state in save bar

* fix: edit server icon styling

* fix: confirm modal to have consistent buttons

* feat: loading animation for server panel + caching improvements for app

* pnpm prepr

* feat: search page deduplication (#5754)

* fix: action bar behind modal

* fix: remove warning modal for stopping

* fix: server cards states

* we hate webkit we hate webkit

* fix: update allocation creation to not use modal

* fix: properties tab spacing and styles

* feat: add files tab copy

* fix: advanced properties icon

* fix: remove back to all servers link

* feat: add files tab link in copy

* fix: server header styles to be consistent with instance

* fix: add header icons back

* feat: update instance settings icon to be consistent

* fix: icon container

* feat: upload state persistence across tabs

* fix: server labels text wrapping

* fix: use surface-5 border

* fix: loading spinner showing with onboarding below

* feat: new server button shows purchase modal in website

* fix: billing page not showing quarterly interval

* fix: server downgrade not showing updated subscription notification

* fix: server settings invalidate saved state and remove server context provider since its already provided in the page

* pnpm prepr

* add stripe publishable key to app build

* feat: console highlighting

* fix: rename servers title to modrinth hosting

* feat: search fix

* fix: qa/styles

* fix: ip click active and remove power dont ask again

* fix: qa

* feat: highlighting fix console

* fix: disable conflicts action

* fix: error dismiss bug

* feat: modal clarification

* fix: files perms issue

* fix: lint

* feat: modal fix

* enable show uptime

* fix: add loading state to edit server icon

* fix: notification panel take in has sidebar from settings

* fix: consistency pass on app settings

* fix: consistency pass on instance settings

* pnpm prepr

* fix: nagivate to billing button in app to go to website

* fix: stripe return url in app causing app to open modrinth.com in tauri

* refactor: better show polling UI code

* fix: new server polling comparison to use server ids instead of length

* fix: buttonstyled story

* fix: button styling

* fix: content.vue regression

* feat: project url redirects

* fix: breadcrumbs

* fix: purchase with newly added card

* fix: console ordering problems

* fix: app-frontend missing env config and staging environment

* fix: log syncing for instances and server panel accidentally

* fix: QA issues

* fix: server page loading state

* fix: stats card logic

* fix: lint

* fix: qa

* fix: console height padding

* fix: terminal padding + loading indicator

* feat: update medal server listing styling

* fix: no upgrade button for medal server listing in app

* fix: go to overview instead of content tab after onboarding

* fix: qa

* fix: teleport modals to body

* fix: logs tab + qa

* fix: local storage for user preferences

* fix: qa loading indic

* feat: considitonal debug and trace

* fix: jump to top on install bug

* feat: swap out server hard drive icon to server stack icon

* feat: servers in app feature flag default true

* fix: highlight row ufll

* fix: webkit thing onto a tag

* fix: input field

* fix: clear fix

* fix: lint

* fix: fmt

* feat: improve share modal and bring it back for sharing log

* pnpm prepr

* fix: menu overflowing

* feat: remove servers in app feature flag

* fix: server stat charts no longer showing color

* fix: library nav no primary state

* fix: better modal height and width

* fix: highlighting bugs

* fix: empty states

* fix: delay import to fix overview page slow load on MacOS

* fix: medal server listing too bright on light mode

* fix: admon analysis + fix logs

* fix: bug

* fix: clear purchase intent from sign-in after closing modal

* performance: improve server manage stats loading by splitting reactivity

* fix: deploy + admon + disable highlighting

* fix: clippy

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Truman Gao <106889354+tdgao@users.noreply.github.com>

* feat: temp wrangler

* fix: lint

* fix: logs upload

* fix: console empty state and admon regressions

* fix: fields

* feat: log deleting + prefetch for Logs.vue

* feat: move delete before share

* feat: clear endpoint

* feat: we ball!

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Truman Gao
2026-04-12 15:38:08 -06:00
committed by GitHub
parent a2a97d1313
commit 693a371d61
278 changed files with 15974 additions and 12608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
packages/ui/src/layouts/shared/console/layout.vue Normal file
View File

@@ -0,0 +1,357 @@
<template>
<div
class="flex min-h-0 flex-1 flex-col gap-4"
:class="isFullscreen ? `fixed inset-0 z-50 bg-surface-1 p-6 py-8 ${isApp ? 'pt-12' : ''}` : ''"
>
<CollapsibleAdmonition
v-if="ctx.crashAnalysis?.value"
type="critical"
:header="crashHeader"
:items="crashItems"
dismissible
@dismiss="ctx.onDismissCrash?.()"
/>
<div class="flex items-center gap-2">
<StyledInput
v-model="searchQuery"
:icon="SearchIcon"
placeholder="Search logs"
wrapper-class="flex-1"
input-class="!h-10"
clearable
/>
<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
<Combobox
:model-value="ctx.activeLogSourceIndex.value"
:options="logSourceOptions"
@update:model-value="(v) => (ctx.activeLogSourceIndex!.value = v)"
/>
</div>
</div>
<div class="flex items-center justify-between">
<ConsoleFilterPills
v-model="activeFilters"
:present-levels="presentLevels"
@toggle="handleFilterToggle"
/>
<ConsoleActionButtons
:show-clear="isLiveSource"
:has-logs="hasLogs"
:share-disabled="resolvedShareDisabled"
:sharing="isSharing"
:fullscreen="isFullscreen"
:show-delete="showDelete"
:delete-disabled="resolvedDeleteDisabled"
:delete-disabled-tooltip="ctx.deleteDisabledTooltip"
@clear="handleClear"
@share="handleShare"
@toggle-fullscreen="toggleFullscreen"
@delete="handleDelete"
/>
</div>
<BaseTerminal
ref="terminalRef"
class="min-h-0 flex-1"
:show-input="resolvedShowInput"
:disable-input="resolvedDisableInput"
:fullscreen="isFullscreen"
:empty-state-type="ctx.emptyStateType"
@command="handleCommand"
@ready="handleTerminalReady"
/>
</div>
<ShareModal ref="shareModal" header="Share Logs" link :social-buttons="false" />
<NewModal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
<div class="flex flex-col gap-6">
<Admonition type="critical" header="This is irreversible">
Deleting this log file cannot be undone. Are you sure you want to continue?
</Admonition>
</div>
<template #actions>
<div class="flex justify-end gap-2">
<ButtonStyled type="outlined">
<button class="!border !border-surface-4" @click="deleteModal?.hide()">
<XIcon />
Cancel
</button>
</ButtonStyled>
<ButtonStyled color="red">
<button :disabled="isDeleting" @click="confirmDelete">
<TrashIcon />
Delete
</button>
</ButtonStyled>
</div>
</template>
</NewModal>
</template>
<script setup lang="ts">
import { SearchIcon, TrashIcon, XIcon } from '@modrinth/assets'
import type { Terminal } from '@xterm/xterm'
import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleAdmonition.vue'
import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
import Combobox from '#ui/components/base/Combobox.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import ShareModal from '#ui/components/modal/ShareModal.vue'
import { injectModrinthClient } from '#ui/providers'
import { injectModalBehavior } from '#ui/providers/modal-behavior'
import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
import { colorize, rewriteTerminal, useConsoleFilters } from './composables'
import type { ConditionalLevel } from './composables/console-filtering'
import { injectConsoleManager } from './providers'
import type { LogLevel, LogLine } from './types'
const ctx = injectConsoleManager()
const client = injectModrinthClient()
const modalBehavior = injectModalBehavior()
const { addNotification } = injectNotificationManager()
const crashHeader = computed(() => {
const problems = ctx.crashAnalysis?.value?.analysis.problems ?? []
const count = problems.length
return `${count} problem${count !== 1 ? 's' : ''} detected`
})
const crashItems = computed<CollapsibleAdmonitionItem[]>(() => {
const problems = ctx.crashAnalysis?.value?.analysis.problems ?? []
return problems.map((p) => ({
title: p.message,
descriptions: p.solutions.map((s) => s.message),
}))
})
const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
const shareModal = ref<InstanceType<typeof ShareModal> | null>(null)
const deleteModal = ref<InstanceType<typeof NewModal> | null>(null)
const isDeleting = ref(false)
const searchQuery = ref('')
const isFullscreen = ref(false)
const isApp =
typeof window !== 'undefined' && !!(window as Record<string, unknown>).__TAURI_INTERNALS__
const isSharing = ref(false)
const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters()
const hasLogs = computed(() => ctx.logLines.value.length > 0)
const presentLevels = computed(() => {
const levels = new Set<ConditionalLevel>()
for (const line of ctx.logLines.value) {
if (line.level === 'debug') levels.add('debug')
if (line.level === 'trace') levels.add('trace')
if (levels.size === 2) break
}
return levels
})
const isLiveSource = computed(() => {
const sources = ctx.logSources?.value
const index = ctx.activeLogSourceIndex?.value
if (!sources || index === undefined) return true
return sources[index]?.live ?? true
})
const logSourceOptions = computed(() =>
(ctx.logSources?.value ?? []).map((s, i) => ({ value: i, label: s.name })),
)
function buildCombinedPredicate(): ((line: LogLine) => boolean) | null {
const levelPred = buildFilterPredicate()
const query = searchQuery.value.trim().toLowerCase()
if (!levelPred && !query) return null
return (line: LogLine) => {
if (levelPred && !levelPred(line)) return false
if (query && !line.text.toLowerCase().includes(query)) return false
return true
}
}
onBeforeUnmount(() => {
if (isFullscreen.value) {
document.body.style.overflow = ''
modalBehavior?.onHide?.()
}
})
let lastWrittenIndex = 0
let searchDebounce: ReturnType<typeof setTimeout> | null = null
const resolvedShowInput = computed(() => {
const v = ctx.showCommandInput
if (v === undefined) return false
if (typeof v === 'boolean') return v
return isRef(v) ? v.value : v
})
const resolvedDisableInput = computed(() => {
const v = ctx.disableCommandInput
if (!v) return false
return isRef(v) ? v.value : v
})
const resolvedShareDisabled = computed(() => {
const v = ctx.shareDisabled
if (!v) return false
return isRef(v) ? v.value : v
})
const showDelete = computed(() => !isLiveSource.value && ctx.onDelete != null)
const resolvedDeleteDisabled = computed(() => {
const v = ctx.deleteDisabled
if (!v) return false
return isRef(v) ? v.value : v
})
function handleTerminalReady(_terminal: Terminal) {
rewriteFiltered()
}
function handleFilterToggle(value: LogLevel | 'all') {
toggleFilter(value)
rewriteFiltered()
}
function activeSearchQuery(): string {
return searchQuery.value.trim().toLowerCase()
}
function rewriteFiltered() {
const term = terminalRef.value?.terminal
if (!term) return
const lines = ctx.logLines.value
if (lines.length === 0 && isLiveSource.value) {
writeEmptyState()
return
}
terminalRef.value?.clearEmptyState()
const predicate = buildCombinedPredicate()
rewriteTerminal(term, lines, predicate, activeSearchQuery())
lastWrittenIndex = lines.length
}
function toggleFullscreen() {
isFullscreen.value = !isFullscreen.value
if (isFullscreen.value) {
document.body.style.overflow = 'hidden'
modalBehavior?.onShow?.()
} else {
document.body.style.overflow = ''
modalBehavior?.onHide?.()
}
nextTick(() => {
terminalRef.value?.fit()
})
}
function writeEmptyState() {
terminalRef.value?.writeEmptyState()
lastWrittenIndex = 0
}
watch(ctx.logLines, (lines, oldLines) => {
const term = terminalRef.value?.terminal
if (!term) return
if (lines.length === 0 && isLiveSource.value) {
writeEmptyState()
return
}
if (
terminalRef.value?.showingEmptyState ||
lines !== oldLines ||
lines.length < lastWrittenIndex
) {
terminalRef.value?.clearEmptyState()
rewriteFiltered()
return
}
const predicate = buildCombinedPredicate()
const query = activeSearchQuery()
const newLines: string[] = []
for (let i = lastWrittenIndex; i < lines.length; i++) {
if (!predicate || predicate(lines[i])) {
newLines.push(colorize(lines[i], query))
}
}
if (newLines.length > 0) {
const buffer = term.buffer.active
const onFreshLine = buffer.cursorX === 0
const data = onFreshLine ? newLines.join('\r\n') : '\r\n' + newLines.join('\r\n')
term.write(data)
}
lastWrittenIndex = lines.length
})
watch(searchQuery, () => {
if (searchDebounce) clearTimeout(searchDebounce)
searchDebounce = setTimeout(() => {
rewriteFiltered()
}, 200)
})
function handleCommand(cmd: string) {
ctx.sendCommand?.(cmd)
}
function handleClear() {
terminalRef.value?.reset()
lastWrittenIndex = 0
ctx.onClear?.()
}
function handleDelete() {
deleteModal.value?.show()
}
async function confirmDelete() {
if (!ctx.onDelete) return
isDeleting.value = true
try {
await ctx.onDelete()
deleteModal.value?.hide()
} catch (err) {
console.error('Failed to delete log file:', err)
addNotification({
type: 'error',
title: 'Failed to delete log file',
text: typeof err === 'string' ? err : 'Unknown error.',
})
} finally {
isDeleting.value = false
}
}
async function handleShare() {
const predicate = buildCombinedPredicate()
const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
const content = lines.map((l) => l.text).join('\n')
isSharing.value = true
try {
const data = await client.mclogs.logs_v1.create(content)
if (data.url) {
shareModal.value?.show(data.url)
}
} catch (err) {
console.error('Failed to share logs:', err)
addNotification({
type: 'error',
title: 'Failed to share logs',
text: typeof err === 'string' ? err : 'Unknown error.',
})
} finally {
isSharing.value = false
}
}
</script>