feat: backups page cleanup before worlds (#5844)
* feat: card alignment + fix modals * feat: change admon title in restore alert modal * fix: lint * feat: backups queue api into api-client * feat: impl backup queue api endpoints into frontend * feat: ack fix * feat: bulk actions * feat: bulk delete impl * fix: lint * fix: align error states * fix: transition group * feat: ready for qa * fix: lint * feat: qa * feat: stacked admonitions component * fix: issues with stacking * feat: hook up admonition stacking + fix app csp for staging kyros nodes * fix: logs.vue * qa: close stack on admonitions click * fix: all problems with stacked admonitions * qa: admonition cleanup and copy overhaul draft * fix: qa issues padding * fix: padding bug * feat: qa * fix: intercom in app csp bug * fix: positioning intercom * feat: loading overlay on top of console + admon consistency changes * feat: scroll indicator fade in backup delete modal + admon timestamp fix * feat: move action bar behind modal * fix: lint + i18n * fix: server ping spam on filter (cache but clear on unmount) * fix: 1 admon fade in flicker issue * chore: temp staging undo * qa: changes * fix: lint * chore: revert staging to use staging * fix: scoping
This commit is contained in:
Calum H.
@@ -1,8 +1,8 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Admonition from '../../components/base/Admonition.vue'
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import ProgressBar from '../../components/base/ProgressBar.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Admonition',
|
||||
@@ -57,37 +57,56 @@ export const Dismissible: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const HeaderWithTimestamp: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition },
|
||||
setup() {
|
||||
const t = ref(Date.now() - 3600_000)
|
||||
return { t }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Creating backup"
|
||||
:timestamp="t"
|
||||
>
|
||||
Saving world data for my-world.
|
||||
</Admonition>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const WithTopRightActions: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled },
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<Admonition type="info" header="Uploading files (2/5)">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Uploading files (2/5)"
|
||||
:dismissible="false"
|
||||
>
|
||||
Uploading server files...
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="critical" header="Extraction failed">
|
||||
<Admonition
|
||||
type="critical"
|
||||
header="Extraction failed"
|
||||
:dismissible="true"
|
||||
>
|
||||
Something went wrong while extracting the archive.
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled color="red">
|
||||
<button>Retry</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="red">
|
||||
<button>✕</button>
|
||||
<button type="button">Retry</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="success" header="Extraction complete">
|
||||
<Admonition type="success" header="Extraction complete" :dismissible="true">
|
||||
All files have been extracted successfully.
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
|
||||
<button>✕</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</div>
|
||||
`,
|
||||
@@ -96,41 +115,55 @@ export const WithTopRightActions: Story = {
|
||||
|
||||
export const WithProgressBar: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled, ProgressBar },
|
||||
components: { Admonition, ButtonStyled },
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<Admonition type="info" header="Uploading files (2/5)">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Uploading files (2/5)"
|
||||
:dismissible="false"
|
||||
:progress="0.45"
|
||||
progress-color="blue"
|
||||
>
|
||||
128 KB / 1.2 MB (45%)
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="0.45" :max="1" color="blue" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="info" header="Extracting modpack.zip">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Extracting modpack.zip"
|
||||
:dismissible="false"
|
||||
:progress="0.7"
|
||||
progress-color="blue"
|
||||
>
|
||||
24 MB extracted — config/settings.yml
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="0.7" :max="1" color="blue" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="success" header="Extraction complete — Done">
|
||||
<Admonition
|
||||
type="success"
|
||||
header="Extraction complete — Done"
|
||||
:dismissible="true"
|
||||
:progress="1"
|
||||
progress-color="green"
|
||||
>
|
||||
56 MB extracted
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
|
||||
<button>✕</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="1" :max="1" color="green" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Waiting for upload"
|
||||
:dismissible="false"
|
||||
:progress="0"
|
||||
progress-color="blue"
|
||||
waiting
|
||||
>
|
||||
Queued and waiting for available bandwidth.
|
||||
</Admonition>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -40,6 +40,14 @@ export const Indeterminate: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const LabelClass: Story = {
|
||||
args: {
|
||||
label: 'Custom label class',
|
||||
labelClass: 'text-brand font-bold',
|
||||
modelValue: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const AllStates: StoryObj = {
|
||||
render: () => ({
|
||||
components: { Checkbox },
|
||||
|
||||
507
packages/ui/src/stories/base/StackedAdmonitions.stories.ts
Normal file
507
packages/ui/src/stories/base/StackedAdmonitions.stories.ts
Normal file
@@ -0,0 +1,507 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Admonition from '../../components/base/Admonition.vue'
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import StackedAdmonitionsRaw, {
|
||||
type StackedAdmonitionItem,
|
||||
} from '../../components/base/StackedAdmonitions.vue'
|
||||
|
||||
// The generic type signature of StackedAdmonitions breaks Storybook's Meta
|
||||
// inference and Vue's components record type. Cast to `any` for story wiring;
|
||||
// runtime behavior is unchanged.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const StackedAdmonitions = StackedAdmonitionsRaw as any
|
||||
|
||||
interface DemoItem extends StackedAdmonitionItem {
|
||||
header: string
|
||||
body: string
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Base/StackedAdmonitions',
|
||||
component: StackedAdmonitions,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const initialItems: DemoItem[] = [
|
||||
{
|
||||
id: 'backup-failed',
|
||||
type: 'critical',
|
||||
header: 'Backup failed',
|
||||
body: 'Something went wrong while creating your backup. Try again or contact support.',
|
||||
},
|
||||
{
|
||||
id: 'storage-nearly-full',
|
||||
type: 'warning',
|
||||
header: 'Storage nearly full',
|
||||
body: 'Your server is using 92% of available storage.',
|
||||
},
|
||||
{
|
||||
id: 'scheduled-maintenance',
|
||||
type: 'info',
|
||||
header: 'Scheduled maintenance',
|
||||
body: 'Routine maintenance will begin in 30 minutes.',
|
||||
},
|
||||
]
|
||||
|
||||
const variedHeightItems: DemoItem[] = [
|
||||
initialItems[0],
|
||||
{
|
||||
id: 'storage-nearly-full',
|
||||
type: 'warning',
|
||||
header: 'Storage nearly full',
|
||||
body: 'Your server is using 92% of available storage. Large world backups, installation artifacts, and cached uploads are all contributing here, so this card is intentionally taller to exercise the collapse animation between mixed-height banners.',
|
||||
},
|
||||
initialItems[2],
|
||||
]
|
||||
|
||||
const completedBackupItem: DemoItem = {
|
||||
id: 'backup-completed',
|
||||
type: 'success',
|
||||
header: 'Backup completed',
|
||||
body: 'Backup 38298832 finished successfully.',
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
template: /* html */ `
|
||||
<div style="min-height: 4rem;">
|
||||
<StackedAdmonitions :items="[]">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
<p style="color: var(--color-secondary); margin-top: 1rem;">
|
||||
Nothing should render above this line.
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const SingleItem: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([completedBackupItem])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function reset() {
|
||||
items.value = [completedBackupItem]
|
||||
}
|
||||
return { items, dismiss, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TwoItems: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(initialItems.slice(0, 2))
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const FiveItems: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([
|
||||
...initialItems,
|
||||
{
|
||||
id: 'update-available',
|
||||
type: 'success',
|
||||
header: 'Update available',
|
||||
body: 'A new version of your server software is ready to install.',
|
||||
},
|
||||
{
|
||||
id: 'memory-pressure',
|
||||
type: 'warning',
|
||||
header: 'High memory usage',
|
||||
body: 'Your server is using 89% of allocated memory.',
|
||||
},
|
||||
])
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const MixedTypes: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([
|
||||
{
|
||||
id: 'critical',
|
||||
type: 'critical',
|
||||
header: 'Critical admonition',
|
||||
body: 'Red background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'warning',
|
||||
type: 'warning',
|
||||
header: 'Warning admonition',
|
||||
body: 'Orange background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'info',
|
||||
type: 'info',
|
||||
header: 'Info admonition',
|
||||
body: 'Blue background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'success',
|
||||
type: 'success',
|
||||
header: 'Success admonition',
|
||||
body: 'Green background placeholder when not front.',
|
||||
},
|
||||
])
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const VariedHeights: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(variedHeightItems)
|
||||
const expanded = ref(false)
|
||||
let nextId = 1
|
||||
|
||||
function addAlert() {
|
||||
const type = ['info', 'warning', 'critical', 'success'][nextId % 4] as DemoItem['type']
|
||||
items.value = [
|
||||
...items.value,
|
||||
{
|
||||
id: `new-alert-${nextId}`,
|
||||
type,
|
||||
header: `New alert ${nextId}`,
|
||||
body:
|
||||
nextId % 2 === 0
|
||||
? 'A short dynamically added alert.'
|
||||
: 'A dynamically added alert with a longer body so the stack can exercise measurement updates when new mixed-height items enter.',
|
||||
},
|
||||
]
|
||||
nextId += 1
|
||||
}
|
||||
|
||||
function reset() {
|
||||
items.value = variedHeightItems
|
||||
expanded.value = false
|
||||
nextId = 1
|
||||
}
|
||||
|
||||
return { items, expanded, addAlert, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<button
|
||||
type="button"
|
||||
style="padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="addAlert"
|
||||
>
|
||||
Add alert
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
style="padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
<StackedAdmonitions
|
||||
:items="items"
|
||||
:expanded="expanded"
|
||||
@update:expanded="expanded = $event"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const ForceExpanded: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(variedHeightItems)
|
||||
const expanded = ref(true)
|
||||
return { items, expanded }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items" :expanded="expanded" @update:expanded="expanded = $event">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const DismissIndividual: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function reset() {
|
||||
items.value = [...initialItems]
|
||||
}
|
||||
return { items, dismiss, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const DismissAll: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissAll() {
|
||||
items.value = []
|
||||
}
|
||||
function reset() {
|
||||
items.value = [...initialItems]
|
||||
}
|
||||
return { items, dismiss, dismissAll, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items" @dismiss-all="dismissAll">
|
||||
<template #item="{ item, dismissible }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
:dismissible="dismissible"
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
interface RichItem extends StackedAdmonitionItem {
|
||||
header: string
|
||||
body: string
|
||||
progress?: number
|
||||
canRetry?: boolean
|
||||
canCancel?: boolean
|
||||
}
|
||||
|
||||
export const RichContent: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition, ButtonStyled },
|
||||
setup() {
|
||||
const items = ref<RichItem[]>([
|
||||
{
|
||||
id: 'upload-1',
|
||||
type: 'info',
|
||||
header: 'Uploading files (2/5)',
|
||||
body: '128 KB / 1.2 MB (45%)',
|
||||
progress: 0.45,
|
||||
canCancel: true,
|
||||
},
|
||||
{
|
||||
id: 'extract-1',
|
||||
type: 'critical',
|
||||
header: 'Extraction failed',
|
||||
body: 'Something went wrong while extracting the archive.',
|
||||
canRetry: true,
|
||||
},
|
||||
{
|
||||
id: 'install-1',
|
||||
type: 'success',
|
||||
header: 'Installation complete',
|
||||
body: 'All files have been installed successfully.',
|
||||
},
|
||||
])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissAll() {
|
||||
items.value = []
|
||||
}
|
||||
return { items, dismiss, dismissAll }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items" @dismiss-all="dismissAll">
|
||||
<template #item="{ item, dismissible }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:dismissible="dismissible && !item.canCancel"
|
||||
:progress="item.progress"
|
||||
progress-color="blue"
|
||||
@dismiss="dismiss(item.id)"
|
||||
>
|
||||
{{ item.body }}
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled v-if="item.canCancel" type="outlined" color="blue">
|
||||
<button class="!border" type="button" @click="dismiss(item.id)">Cancel</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="item.canRetry" color="red">
|
||||
<button type="button" @click="dismiss(item.id)">Retry</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const KeyboardAndA11y: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
return { items, dismiss }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<p style="color: var(--color-secondary); margin-bottom: 0.75rem; font-size: 0.875rem;">
|
||||
Tab to the stack and press <kbd>Enter</kbd> or <kbd>Space</kbd> to expand.
|
||||
While collapsed, only the front card's buttons are focusable (inert on back cards).
|
||||
</p>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TwoInstances: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const stackA = ref<DemoItem[]>([initialItems[0], initialItems[1]])
|
||||
const stackB = ref<DemoItem[]>([initialItems[2]])
|
||||
function dismissA(id: string) {
|
||||
stackA.value = stackA.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissB(id: string) {
|
||||
stackB.value = stackB.value.filter((i) => i.id !== id)
|
||||
}
|
||||
return { stackA, stackB, dismissA, dismissB }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
||||
<StackedAdmonitions :items="stackA">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" dismissible @dismiss="dismissA(item.id)" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
<StackedAdmonitions :items="stackB">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" dismissible @dismiss="dismissB(item.id)" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
99
packages/ui/src/stories/servers/BackupItem.stories.ts
Normal file
99
packages/ui/src/stories/servers/BackupItem.stories.ts
Normal file
@@ -0,0 +1,99 @@
|
||||
import type { Archon } from '@modrinth/api-client'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import BackupItem from '../../components/servers/backups/BackupItem.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/BackupItem',
|
||||
component: BackupItem,
|
||||
args: {
|
||||
preview: false,
|
||||
showCopyIdAction: false,
|
||||
showDebugInfo: false,
|
||||
restoreDisabled: undefined,
|
||||
},
|
||||
} satisfies Meta<typeof BackupItem>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
function makeBackup(
|
||||
overrides: Partial<Archon.BackupsQueue.v1.BackupQueueBackup> = {},
|
||||
): Archon.BackupsQueue.v1.BackupQueueBackup {
|
||||
return {
|
||||
id: 'backup-001',
|
||||
name: 'Backup #5',
|
||||
created_at: new Date(Date.now() - 1000 * 60 * 10).toISOString(),
|
||||
automated: false,
|
||||
status: 'done',
|
||||
locked: false,
|
||||
history: [],
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
export const Default: Story = {
|
||||
name: 'Default (manual)',
|
||||
args: {
|
||||
backup: makeBackup({ name: 'Base finished!!' }),
|
||||
},
|
||||
}
|
||||
|
||||
export const Automated: Story = {
|
||||
name: 'Automated',
|
||||
args: {
|
||||
backup: makeBackup({ automated: true, name: 'Backup #2' }),
|
||||
},
|
||||
}
|
||||
|
||||
export const Preview: Story = {
|
||||
name: 'Preview (compact, used in delete modal)',
|
||||
args: {
|
||||
backup: makeBackup({ name: 'Base finished!!' }),
|
||||
preview: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const RestoreDisabled: Story = {
|
||||
name: 'Restore disabled (server running)',
|
||||
args: {
|
||||
backup: makeBackup({ name: 'Backup #5', automated: true }),
|
||||
restoreDisabled: 'Cannot restore backup while server is running',
|
||||
},
|
||||
}
|
||||
|
||||
export const CommonStates: Story = {
|
||||
render: () => ({
|
||||
components: { BackupItem },
|
||||
setup() {
|
||||
const now = new Date(Date.now() - 1000 * 60 * 10).toISOString()
|
||||
|
||||
function makeBackup(
|
||||
overrides: Partial<Archon.BackupsQueue.v1.BackupQueueBackup>,
|
||||
): Archon.BackupsQueue.v1.BackupQueueBackup {
|
||||
return {
|
||||
id: 'backup-001',
|
||||
name: 'Backup #5',
|
||||
created_at: now,
|
||||
automated: false,
|
||||
status: 'done',
|
||||
locked: false,
|
||||
history: [],
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
manual: makeBackup({ name: 'Base finished!!' }),
|
||||
automated: makeBackup({ automated: true, name: 'Backup #2' }),
|
||||
}
|
||||
},
|
||||
template: /* html */ `
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 900px;">
|
||||
<BackupItem :backup="manual" />
|
||||
<BackupItem :backup="automated" />
|
||||
<BackupItem :backup="manual" preview />
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
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 { computed, ref } from 'vue'
|
||||
|
||||
import EditServerIcon from '../../components/servers/edit-server-icon/EditServerIcon.vue'
|
||||
import { provideModrinthServerContext } from '../../providers'
|
||||
@@ -66,8 +66,6 @@ const meta = {
|
||||
isServerRunning: computed(() => true),
|
||||
stats,
|
||||
uptimeSeconds: ref(0),
|
||||
backupsState: reactive(new Map()),
|
||||
markBackupCancelled: () => {},
|
||||
isSyncingContent: ref(false),
|
||||
busyReasons: computed(() => []),
|
||||
fsAuth: ref(null),
|
||||
|
||||
@@ -23,6 +23,15 @@ export const WithProgress: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const IndeterminateLoaderInstall: Story = {
|
||||
args: {
|
||||
progress: {
|
||||
phase: 'InstallingLoader',
|
||||
percent: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const InstallingModpack: Story = {
|
||||
args: {
|
||||
progress: {
|
||||
@@ -97,6 +106,7 @@ export const AllStates: Story = {
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<InstallingBanner />
|
||||
<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 0 }" />
|
||||
<InstallingBanner :progress="{ phase: 'InstallingLoader', percent: 45 }" />
|
||||
<InstallingBanner :content-error="{ step: 'modloader', description: 'the specified version may be incorrect' }" />
|
||||
<InstallingBanner :content-error="{ step: 'modloader', description: 'this version is not yet supported' }" />
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
import { RotateCounterClockwiseIcon } from '@modrinth/assets'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
|
||||
import Admonition from '../../components/base/Admonition.vue'
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
|
||||
type AdmonitionType = 'info' | 'warning' | 'critical' | 'success'
|
||||
type ActionType = 'Cancel' | 'Retry' | 'Dismiss'
|
||||
type ProgressColor = 'blue' | 'green' | 'red'
|
||||
|
||||
interface CopyExample {
|
||||
title: string
|
||||
body: string
|
||||
type: AdmonitionType
|
||||
action?: ActionType
|
||||
dismissible?: boolean
|
||||
progress?: number
|
||||
progressColor?: ProgressColor
|
||||
waiting?: boolean
|
||||
}
|
||||
|
||||
interface CopySection {
|
||||
title: string
|
||||
items: CopyExample[]
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerPanelAdmonitionCopyDraft',
|
||||
component: Admonition,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
} satisfies Meta<typeof Admonition>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
const sections: CopySection[] = [
|
||||
{
|
||||
title: 'Installation and content sync',
|
||||
items: [
|
||||
{
|
||||
type: 'info',
|
||||
title: "We're preparing your server",
|
||||
body: 'Installing platform...',
|
||||
progress: 45,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
title: "We're preparing your server",
|
||||
body: 'Installing modpack...',
|
||||
progress: 72,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'critical',
|
||||
title: 'Installation failed',
|
||||
body: 'The specified loader or Minecraft version could not be installed. It may be invalid or unsupported.',
|
||||
action: 'Retry',
|
||||
dismissible: true,
|
||||
},
|
||||
{
|
||||
type: 'critical',
|
||||
title: 'Installation failed',
|
||||
body: 'This modpack version does not include a downloadable file. It may have been packaged incorrectly.',
|
||||
action: 'Retry',
|
||||
dismissible: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Uploads and file operations',
|
||||
items: [
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Uploading resourcepack.zip (1/3)',
|
||||
body: '20 KB / 100 KB (20%)',
|
||||
action: 'Cancel',
|
||||
progress: 0.2,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Extracting story-modpack.mrpack',
|
||||
body: '2 MB extracted. Current file: server.properties',
|
||||
action: 'Cancel',
|
||||
progress: 0.35,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
title: 'Extracting story-modpack.mrpack finished',
|
||||
body: '12 MB extracted',
|
||||
progress: 1,
|
||||
progressColor: 'green',
|
||||
},
|
||||
{
|
||||
type: 'critical',
|
||||
title: 'Extracting story-modpack.mrpack failed',
|
||||
body: '2 MB extracted',
|
||||
action: 'Dismiss',
|
||||
dismissible: true,
|
||||
progress: 0.35,
|
||||
progressColor: 'red',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Backup creation',
|
||||
items: [
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Backup queued',
|
||||
body: 'World backup is queued and will start shortly.',
|
||||
action: 'Cancel',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Creating backup',
|
||||
body: 'Saving world data and server configuration for World backup. This can take a few minutes.',
|
||||
action: 'Cancel',
|
||||
progress: 0.42,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'critical',
|
||||
title: 'Backup failed',
|
||||
body: 'Something went wrong while creating World backup. Please try again or contact support if the issue continues.',
|
||||
action: 'Retry',
|
||||
dismissible: true,
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
title: 'Backup finished',
|
||||
body: 'World backup finished successfully.',
|
||||
action: 'Dismiss',
|
||||
dismissible: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Backup restore',
|
||||
items: [
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Restore queued',
|
||||
body: 'Restoring from World backup is queued and will start shortly.',
|
||||
action: 'Cancel',
|
||||
},
|
||||
{
|
||||
type: 'info',
|
||||
title: 'Restoring from backup',
|
||||
body: 'Restoring your server from World backup. This may take a couple of minutes.',
|
||||
action: 'Cancel',
|
||||
progress: 0.65,
|
||||
progressColor: 'blue',
|
||||
},
|
||||
{
|
||||
type: 'critical',
|
||||
title: 'Restore failed',
|
||||
body: 'Something went wrong while restoring from World backup. Please try again or contact support if the issue continues.',
|
||||
action: 'Retry',
|
||||
dismissible: true,
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
title: 'Restore finished',
|
||||
body: 'Your server has been restored to World backup and is ready to start.',
|
||||
action: 'Dismiss',
|
||||
dismissible: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Busy states',
|
||||
items: [
|
||||
{
|
||||
type: 'warning',
|
||||
title: 'Background task running',
|
||||
body: 'Please wait for the operation to complete before editing content.',
|
||||
},
|
||||
{
|
||||
type: 'warning',
|
||||
title: 'Background task running',
|
||||
body: 'File operations are disabled while the operation is in progress.',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const AllCopy: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
|
||||
setup() {
|
||||
return { sections }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div style="height: 100vh; overflow-y: auto; padding: 1rem 1rem 4rem 0;">
|
||||
<div style="display: flex; max-width: 840px; flex-direction: column; gap: 2rem;">
|
||||
<section v-for="section in sections" :key="section.title">
|
||||
<h2 style="margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700;">
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
|
||||
<Admonition
|
||||
v-for="item in section.items"
|
||||
:key="item.title + item.body"
|
||||
:type="item.type"
|
||||
:header="item.title"
|
||||
:dismissible="item.dismissible"
|
||||
:progress="item.progress != null ? (item.progress > 1 ? item.progress / 100 : item.progress) : undefined"
|
||||
:progress-color="item.progressColor"
|
||||
:waiting="item.waiting"
|
||||
>
|
||||
{{ item.body }}
|
||||
<template
|
||||
v-if="
|
||||
item.action === 'Cancel' ||
|
||||
item.action === 'Retry'
|
||||
"
|
||||
#top-right-actions
|
||||
>
|
||||
<ButtonStyled v-if="item.action === 'Cancel'" type="outlined" color="blue">
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled
|
||||
v-else
|
||||
type="outlined"
|
||||
color="red"
|
||||
>
|
||||
<button class="!border" type="button">
|
||||
<RotateCounterClockwiseIcon class="size-5" />
|
||||
Retry
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TitleTreatmentExperiment: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled, RotateCounterClockwiseIcon },
|
||||
template: /* html */ `
|
||||
<div style="max-width: 840px;">
|
||||
<Admonition
|
||||
type="critical"
|
||||
header="Backup failed"
|
||||
dismissible
|
||||
>
|
||||
Something went wrong while creating World backup. Please try again or contact support if the issue continues.
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="red">
|
||||
<button class="!border" type="button">
|
||||
<RotateCounterClockwiseIcon class="size-5" />
|
||||
Retry
|
||||
</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import type { Archon, UploadState } from '@modrinth/api-client'
|
||||
import type { Stats } from '@modrinth/utils'
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import ServerPanelAdmonitions from '../../components/servers/admonitions/ServerPanelAdmonitions.vue'
|
||||
import { defineMessage } from '../../composables/i18n'
|
||||
import type { FileOperation } from '../../layouts/shared/files-tab/types'
|
||||
import { provideModrinthServerContext } from '../../providers'
|
||||
import type { ModrinthServerContext } from '../../providers/server-context'
|
||||
|
||||
const meta = {
|
||||
title: 'Servers/ServerPanelAdmonitions',
|
||||
component: ServerPanelAdmonitions,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
},
|
||||
decorators: [
|
||||
(story) => ({
|
||||
components: { story },
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
onMounted(() => {
|
||||
router.replace('/hosting/manage/demo-server/content')
|
||||
})
|
||||
|
||||
const server = ref({
|
||||
server_id: 'demo-server',
|
||||
status: 'running',
|
||||
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: true,
|
||||
currentFileName: 'resourcepack.zip',
|
||||
currentFileProgress: 0.2,
|
||||
uploadedBytes: 20_000,
|
||||
totalBytes: 100_000,
|
||||
completedFiles: 1,
|
||||
totalFiles: 3,
|
||||
})
|
||||
|
||||
const fileOp = ref<FileOperation[]>([
|
||||
{
|
||||
id: 'fs-op-1',
|
||||
op: 'extract',
|
||||
src: 'story-modpack.mrpack',
|
||||
state: 'running',
|
||||
progress: 0.35,
|
||||
bytes_processed: 2_000_000,
|
||||
},
|
||||
])
|
||||
|
||||
const serverContext: ModrinthServerContext = {
|
||||
get serverId() {
|
||||
return 'demo-server'
|
||||
},
|
||||
worldId: ref(null),
|
||||
server,
|
||||
isConnected: ref(true),
|
||||
isWsAuthIncorrect: ref(false),
|
||||
powerState: ref('running'),
|
||||
powerStateDetails: ref(undefined),
|
||||
isServerRunning: computed(() => true),
|
||||
stats,
|
||||
uptimeSeconds: ref(0),
|
||||
isSyncingContent: ref(false),
|
||||
busyReasons: computed(() => [
|
||||
{ reason: defineMessage({ id: 's.bg', defaultMessage: 'Background task running' }) },
|
||||
]),
|
||||
fsAuth: ref(null),
|
||||
fsOps: ref<Archon.Websocket.v0.FilesystemOperation[]>([]),
|
||||
fsQueuedOps: ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([]),
|
||||
refreshFsAuth: async () => {},
|
||||
uploadState,
|
||||
cancelUpload: ref(() => {
|
||||
uploadState.value = { ...uploadState.value, isUploading: false }
|
||||
}),
|
||||
activeOperations: computed(() => fileOp.value),
|
||||
dismissOperation: async (id) => {
|
||||
fileOp.value = fileOp.value.filter((o) => o.id !== id)
|
||||
},
|
||||
}
|
||||
|
||||
provideModrinthServerContext(serverContext)
|
||||
return {}
|
||||
},
|
||||
template: '<div style="max-width: 720px"><story /></div>',
|
||||
}),
|
||||
],
|
||||
} satisfies Meta<typeof ServerPanelAdmonitions>
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const WithUploadFileOpAndBusy: Story = {}
|
||||
Reference in New Issue
Block a user