44 :to =" status === 'suspended' ? '' : `/servers/manage/${props.server_id}`"
55 >
66 <div
7- v-tooltip ="
8- status === 'suspended'
9- ? suspension_reason === 'upgrading'
10- ? 'This server is being transferred to a new node. It will be unavailable until this process finishes.'
11- : 'This server has been suspended. Please visit your billing settings or contact Modrinth Support for more information.'
12- : ''
13- "
14- class =" flex cursor-pointer flex-row items-center overflow-x-hidden rounded-3xl bg-bg-raised p-4 transition-transform duration-100"
15- :class =" status === 'suspended' ? '!rounded-b-none opacity-75' : 'active:scale-95'"
7+ class =" -mb-2 flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-4 transition-transform duration-100"
8+ :class =" {
9+ '!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
10+ 'opacity-75': status === 'suspended',
11+ 'active:scale-95': status !== 'suspended' && !pendingChange,
12+ }"
1613 data-pyro-server-listing
1714 :data-pyro-server-listing-id =" server_id"
1815 >
1916 <ServerIcon v-if =" status !== 'suspended'" :image =" image"
2017 <div
2118 v-else
22- class =" bg-bg-secondary flex size-24 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
19+ class =" bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
2320 >
24- <LockIcon class =" size-20 text-secondary"
21+ <LockIcon class =" size-12 text-secondary"
2522 </div >
26- <div class =" ml-8 flex flex-col gap-2.5"
23+ <div class =" ml-4 flex flex-col gap-2.5"
2724 <div class =" flex flex-row items-center gap-2"
2825 <h2 class =" m-0 text-xl font-bold text-contrast" h2 >
2926 <ChevronRightIcon />
4138 />
4239 Using {{ projectData?.title || 'Unknown' }}
4340 </div >
44- <div v-else class =" min-h-[20px]" div >
4541
4642 <div
4743 v-if =" isConfiguring"
5955 />
6056 </div >
6157 </div >
62- <div
63- v-if =" status === 'suspended' && suspension_reason === 'upgrading'"
64- 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"
65- >
66- <PanelSpinner />
67- Your server's hardware is currently being upgraded and will be back online shortly.
58+ </NuxtLink >
59+ <div
60+ v-if =" status === 'suspended' && suspension_reason === 'upgrading'"
61+ class =" relative -mt-2 flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
62+ >
63+ <PanelSpinner />
64+ Your server's hardware is currently being upgraded and will be back online shortly.
65+ </div >
66+ <div
67+ v-else-if =" status === 'suspended' && suspension_reason === 'cancelled'"
68+ class =" relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
69+ >
70+ <div class =" flex flex-row gap-2"
71+ <PanelErrorIcon class =" !size-5"
72+ information or contact Modrinth Support for more information.
6873 </div >
69- <div
70- v-else-if = " status === 'suspended' && suspension_reason === 'cancelled' "
71- class = " relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast "
72- >
73- < div class =" flex flex-row gap-2" >
74- < PanelErrorIcon class = " !size-5 " /> Your server has been cancelled. Please update your
75- billing information or contact Modrinth Support for more information.
76- </ div >
77- < CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
74+ <CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
75+ </ div >
76+ < div
77+ v-else-if = " status === 'suspended' && suspension_reason "
78+ class =" relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast "
79+ >
80+ < div class = " flex flex-row gap-2 " >
81+ <PanelErrorIcon class = " !size-5 " /> Your server has been suspended: {{ suspension_reason }}.
82+ Please update your billing information or contact Modrinth Support for more information.
7883 </div >
79- <div
80- v-else-if = " status === 'suspended' && suspension_reason "
81- class = " relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast "
82- >
83- < div class =" flex flex-row gap-2" >
84- < PanelErrorIcon class = " !size-5 " /> Your server has been suspended: {{ suspension_reason }}.
85- Please update your billing information or contact Modrinth Support for more information.
86- </ div >
87- < CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
84+ <CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
85+ </ div >
86+ < div
87+ v-else-if = " status === 'suspended' "
88+ class =" -mt-2flex relative w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast "
89+ >
90+ < div class = " flex flex-row gap-2 " >
91+ <PanelErrorIcon class = " !size-5 " /> Your server has been suspended. Please update your billing
92+ information or contact Modrinth Support for more information.
8893 </div >
89- <div
90- v-else-if = " status === 'suspended' "
91- class = " relative -mt-4 flex w-full flex-col gap-2 rounded-b-3xl bg-bg-red p-4 text-sm font-bold text-contrast "
92- >
93- < div class =" flex flex-row gap-2" >
94- < PanelErrorIcon class = " !size-5 " /> Your server has been suspended. Please update your
95- billing information or contact Modrinth Support for more information.
96- </ div >
97- < CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
94+ <CopyCode :text = " `${props.server_id}` " class = " ml-auto " />
95+ </ div >
96+ < div
97+ v-if = " pendingChange && status !== 'suspended' "
98+ class =" relative -mt-2 flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-orange bg-bg-orange p-4 text-sm font-bold text-contrast "
99+ >
100+ < div >
101+ Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{ pendingChange.planSize }}"
102+ plan on {{ formatDate(pendingChange.date) }}.
98103 </div >
99- </NuxtLink >
104+ <ServersSpecs
105+ class =" !font-normal !text-contrast"
106+ :ram =" Math.round((pendingChange.ramGb ?? 0) * 1024)"
107+ :storage =" Math.round((pendingChange.storageGb ?? 0) * 1024)"
108+ :cpus =" pendingChange.cpuBurst"
109+ bursting-link =" https://docs.modrinth.com/servers/bursting"
110+ />
111+ </div >
100112</template >
101113
102114<script setup lang="ts">
103115import { ChevronRightIcon , LockIcon , SparklesIcon } from ' @modrinth/assets'
104- import { Avatar , CopyCode } from ' @modrinth/ui'
116+ import { Avatar , CopyCode , ServersSpecs } from ' @modrinth/ui'
105117import type { Project , Server } from ' @modrinth/utils'
118+ import dayjs from ' dayjs'
106119
107120import { useModrinthServers } from ' ~/composables/servers/modrinth-servers.ts'
108121
@@ -111,7 +124,19 @@ import PanelSpinner from './PanelSpinner.vue'
111124import ServerIcon from ' ./ServerIcon.vue'
112125import ServerInfoLabels from ' ./ServerInfoLabels.vue'
113126
114- const = defineProps <Partial <Server >>()
127+ type PendingChange = {
128+ planSize: string
129+ cpu: number
130+ cpuBurst: number
131+ ramGb: number
132+ swapGb? : number
133+ storageGb? : number
134+ date: string | number | Date
135+ intervalChange? : string | null
136+ verb: string
137+ }
138+
139+ const = defineProps <Partial <Server > & { pendingChange? : PendingChange }>()
115140
116141if (props .server_id && props .status === ' available'
117142 // Necessary only to get server icon
@@ -138,4 +163,12 @@ if (props.upstream) {
138163const = useState <string | undefined >(` server-icon-${props .server_id } ` , () => undefined )
139164const = computed (() => projectData .value ?.icon_url || undefined )
140165const = computed (() => props .flows ?.intro )
166+
167+ const = (d : unknown ) => {
168+ try {
169+ return dayjs (d as any ).format (' MMMM D, YYYY'
170+ } catch {
171+ return ' '
172+ }
173+ }
141174script >
0 commit comments