mirror of
https://github.com/modrinth/code.git
synced 2026-08-28 02:24:56 +00:00
feat: server management in app (#5628)
* 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 86e284c4bd.
* 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
co-authored by
Calum H.
tdgao
Calum H.
Calum H.
tdgao
Calum H.
parent
a2a97d1313
commit
693a371d61
@@ -0,0 +1,94 @@
|
||||
import type { Archon, UploadState } from '@modrinth/api-client'
|
||||
import type { Stats } from '@modrinth/utils'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
|
||||
import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
|
||||
import { provideModrinthServerContext } from '../../providers'
|
||||
import type { ModrinthServerContext } from '../../providers/server-context'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/EditServerIcon',
|
||||
component: EditServerIcon,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
setup() {
|
||||
const server = ref({
|
||||
server_id: 'story-server-id',
|
||||
upstream: null,
|
||||
} as Archon.Servers.v0.Server)
|
||||
|
||||
const stats = ref<Stats>({
|
||||
current: {
|
||||
cpu_percent: 0,
|
||||
ram_usage_bytes: 0,
|
||||
ram_total_bytes: 1,
|
||||
storage_usage_bytes: 0,
|
||||
storage_total_bytes: 0,
|
||||
},
|
||||
past: {
|
||||
cpu_percent: 0,
|
||||
ram_usage_bytes: 0,
|
||||
ram_total_bytes: 1,
|
||||
storage_usage_bytes: 0,
|
||||
storage_total_bytes: 0,
|
||||
},
|
||||
graph: {
|
||||
cpu: [],
|
||||
ram: [],
|
||||
},
|
||||
})
|
||||
|
||||
const uploadState = ref<UploadState>({
|
||||
isUploading: false,
|
||||
currentFileName: null,
|
||||
currentFileProgress: 0,
|
||||
uploadedBytes: 0,
|
||||
totalBytes: 0,
|
||||
completedFiles: 0,
|
||||
totalFiles: 0,
|
||||
})
|
||||
|
||||
const serverContext: ModrinthServerContext = {
|
||||
get serverId() {
|
||||
return 'story-server-id'
|
||||
},
|
||||
worldId: ref(null),
|
||||
server,
|
||||
isConnected: ref(true),
|
||||
isWsAuthIncorrect: ref(false),
|
||||
powerState: ref('running'),
|
||||
powerStateDetails: ref(undefined),
|
||||
isServerRunning: computed(() => true),
|
||||
stats,
|
||||
uptimeSeconds: ref(0),
|
||||
backupsState: reactive(new Map()),
|
||||
markBackupCancelled: () => {},
|
||||
isSyncingContent: ref(false),
|
||||
busyReasons: computed(() => []),
|
||||
fsAuth: ref(null),
|
||||
fsOps: ref<Archon.Websocket.v0.FilesystemOperation[]>([]),
|
||||
fsQueuedOps: ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([]),
|
||||
refreshFsAuth: async () => {},
|
||||
uploadState,
|
||||
cancelUpload: ref(null),
|
||||
activeOperations: computed(() => []),
|
||||
dismissOperation: async () => {},
|
||||
}
|
||||
|
||||
provideModrinthServerContext(serverContext)
|
||||
},
|
||||
template: '<div style="max-width: 320px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof EditServerIcon>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
@@ -0,0 +1,85 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import MedalServerListing from '../../components/servers/marketing/MedalServerListing.vue'
|
||||
|
||||
const baseMedalServer = {
|
||||
server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
|
||||
name: 'Medal Trial Server',
|
||||
status: 'available',
|
||||
game: 'Minecraft',
|
||||
mc_version: '1.21.5',
|
||||
loader: 'Fabric',
|
||||
loader_version: '0.16.14',
|
||||
net: {
|
||||
ip: '203.0.113.42',
|
||||
port: 25565,
|
||||
domain: 'play',
|
||||
},
|
||||
medal_expires: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
} as const
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/MedalServerListing',
|
||||
component: MedalServerListing,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
template: '<div style="max-width: 920px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof MedalServerListing>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
},
|
||||
}
|
||||
|
||||
export const ConfiguringNewServer: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'New Medal Server',
|
||||
flows: { intro: true },
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedUpgrading: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Upgrading Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'upgrading',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelled: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Expired Trial Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedWithReason: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Suspended Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'moderated',
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedGeneric: Story = {
|
||||
args: {
|
||||
...baseMedalServer,
|
||||
name: 'Suspended Server',
|
||||
status: 'suspended',
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import SaveBanner from '../../components/servers/SaveBanner.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/SaveBanner',
|
||||
component: SaveBanner,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
isVisible: true,
|
||||
isUpdating: false,
|
||||
restart: false,
|
||||
serverId: 'server_123',
|
||||
save: () => {},
|
||||
reset: () => {},
|
||||
},
|
||||
} satisfies Meta<typeof SaveBanner>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
|
||||
export const Saving: Story = {
|
||||
args: {
|
||||
isUpdating: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithRestart: Story = {
|
||||
args: {
|
||||
restart: true,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import ServerListEmpty from '../../components/servers/server-list-empty/ServerListEmpty.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerListEmpty',
|
||||
component: ServerListEmpty,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies Meta<typeof ServerListEmpty>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {}
|
||||
@@ -0,0 +1,158 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import ServerListing from '../../components/servers/ServerListing.vue'
|
||||
|
||||
const baseServer = {
|
||||
server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
|
||||
name: 'Survival SMP',
|
||||
status: 'available',
|
||||
game: 'Minecraft',
|
||||
mc_version: '1.21.5',
|
||||
loader: 'Fabric',
|
||||
loader_version: '0.16.14',
|
||||
net: {
|
||||
ip: '203.0.113.42',
|
||||
port: 25565,
|
||||
domain: 'play',
|
||||
},
|
||||
} as const
|
||||
|
||||
const pendingChange = {
|
||||
planSize: 'Performance 8 GB',
|
||||
cpu: 4,
|
||||
cpuBurst: 6,
|
||||
ramGb: 8,
|
||||
storageGb: 80,
|
||||
date: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
verb: 'Upgrade',
|
||||
} as const
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerListing',
|
||||
component: ServerListing,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
template: '<div style="max-width: 920px;"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof ServerListing>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
},
|
||||
}
|
||||
|
||||
export const ConfiguringNewServer: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Fresh Vanilla World',
|
||||
status: 'installing',
|
||||
flows: { intro: true },
|
||||
loader: 'Vanilla',
|
||||
loader_version: null,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithPendingDowngrade: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Competitive UHC',
|
||||
pendingChange: {
|
||||
...pendingChange,
|
||||
planSize: 'Small',
|
||||
ramGb: 4,
|
||||
storageGb: 40,
|
||||
cpuBurst: 4,
|
||||
verb: 'Downgrade',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedUpgrading: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Creative Build Team',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'upgrading',
|
||||
},
|
||||
}
|
||||
|
||||
export const Provisioning: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'My New Server',
|
||||
isProvisioning: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const SetToCancel: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Survival SMP',
|
||||
cancellationDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelled: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Old Event Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedCancelledFilesExpired: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
onDownloadBackup: null,
|
||||
name: 'Old Event Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'cancelled',
|
||||
cancellationDate: new Date(2025, 1, 17).toISOString(),
|
||||
onResubscribe: () => alert('Resubscribe clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedPaymentFailed: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Minigames Network',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'paymentfailed',
|
||||
cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedModerated: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Banned Server',
|
||||
status: 'suspended',
|
||||
suspension_reason: 'moderated',
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
|
||||
export const SuspendedGeneric: Story = {
|
||||
args: {
|
||||
...baseServer,
|
||||
name: 'Server with other suspension reason',
|
||||
status: 'suspended',
|
||||
onDownloadBackup: () => alert('Download backup clicked'),
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user