Pernoise/Rocketmc
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Handle server upgrades (suspensions) in frontend (#3049)

Browse Source 
* chore: make serverlisting handle upgrading server state

Signed-off-by: Evan Song <theevansong@gmail.com>

* feat: more prominent suspension status bar in server listing

Signed-off-by: Evan Song <theevansong@gmail.com>

* feat: handle upgrading in root server page

Signed-off-by: Evan Song <theevansong@gmail.com>

---------

Signed-off-by: Evan Song <theevansong@gmail.com>
This commit is contained in:
Evan Song
2024-12-22 19:38:50 -07:00
committed by GitHub
parent 8457d1484b
commit ef08d8e538
3 changed files with 40 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/frontend/src/components/ui/servers/ServerListing.vue
View File

@@ -6,11 +6,13 @@
<div
v-tooltip="
status === 'suspended'
? `This server is suspended visit the billing page to learn more`
? suspension_reason === 'upgrading'
? 'This server is being transferred to a new node. It will be unavailable until this process finishes.'
: 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
: ''
"
class="flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
:class="status === 'suspended' ? 'opacity-50' : 'active:scale-95'"
:class="status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
data-pyro-server-listing
:data-pyro-server-listing-id="server_id"
>
@@ -51,6 +53,21 @@
/>
</div>
</div>
<div
v-if="status === 'suspended' && suspension_reason === 'upgrading'"
class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-blue p-4 text-sm font-bold text-contrast"
>
<UiServersPanelSpinner />
Your server's hardware is currently being upgraded and will be back online shortly.
</div>
<div
v-else-if="status === 'suspended'"
class="relative -mt-4 flex w-full flex-row items-center gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast"
>
<UiServersIconsPanelErrorIcon class="!size-5" />
Your server has been suspended due to a billing issue. Please visit your billing settings or
contact Modrinth Support for more information.
</div>
</NuxtLink>
</template>

23
apps/frontend/src/pages/servers/manage/[id].vue
View File

@@ -1,7 +1,25 @@
<template>
<div class="contents">
<div
v-if="serverData?.status === 'suspended'"
v-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
>
<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
<div class="flex flex-col items-center text-center">
<div class="flex flex-col items-center gap-4">
<div class="grid place-content-center rounded-full bg-bg-blue p-4">
<TransferIcon class="size-12 text-blue" />
</div>
<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Server Upgrading</h1>
</div>
<p class="text-lg text-secondary">
Your server's hardware is currently being upgraded and will be back online shortly.
</p>
</div>
</div>
</div>
<div
v-else-if="serverData?.status === 'suspended'"
class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
>
<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -24,7 +42,7 @@
</p>
</div>
<ButtonStyled size="large" color="brand" @click="() => router.push('/settings/billing')">
<button class="mt-6 !w-full">Go to billing</button>
<button class="mt-6 !w-full">Go to billing settings</button>
</ButtonStyled>
</div>
</div>
@@ -86,7 +104,6 @@
</ButtonStyled>
</div>
</div>
<!-- SERVER START -->
<div
v-else-if="serverData"

2
apps/frontend/src/pages/servers/manage/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
data-pyro-server-list-root
class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-3"
class="experimental-styles-within relative mx-auto flex min-h-screen w-full max-w-[1280px] flex-col px-6"
>
<div
v-if="serverList.length > 0 || isPollingForNewServers"