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

* 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

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>