MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(front): upload quota

This commit is contained in:
ArneBo 2025-04-07 10:56:13 +02:00
parent 5acdb39f59
commit 4d31386944
3 changed files with 212 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/utils/filters.ts
View File

@ -24,7 +24,7 @@ export function humanSize (bytes: number, isSI = true) {
const threshold = isSI ? 1000 : 1024 const threshold = isSI ? 1000 : 1024
if (Math.abs(bytes) < threshold) { if (Math.abs(bytes) < threshold) {
return `${bytes} B` return `${Math.floor(bytes)}`
} }
const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2'] const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2']

19
front/src/views/content/libraries/Home.vue
View File

@ -59,25 +59,8 @@ const libraryCreated = (library: Library) => {
:h1="t('views.content.libraries.Home.header.libraries')" :h1="t('views.content.libraries.Home.header.libraries')"
page-header page-header
> >
<Alert
v-if="libraries.length == 0"
yellow
>
{{ t('views.content.libraries.Home.empty.noLibrary') }}
<Button
:aria-expanded="!hiddenForm"
:icon="hiddenForm ? 'bi-plus' : 'bi-minus'"
@click.prevent="hiddenForm = !hiddenForm"
>
{{ t('views.content.libraries.Home.link.createLibrary') }}
</Button>
</Alert>
<library-form
v-if="!hiddenForm"
@created="libraryCreated"
/>
</Section>
<quota /> <quota />
</Section>
<Spacer /> <Spacer />
<Section <Section
v-if="libraries.length > 0" v-if="libraries.length > 0"

339
front/src/views/content/libraries/Quota.vue
View File

@ -62,29 +62,22 @@ const purgeErroredFiles = () => purge('errored')
</script> </script>
<template> <template>
<Section <Loader v-if="isLoading" />
:h3="t('views.content.libraries.Quota.header.currentUsage')" <Alert
data-percent="progress"
:green="progress < 60"
:yellow="progress >= 60 && progress < 96"
:red="progress >= 95"
style="width: 100%;"
> >
<div <h3>{{ t('views.content.libraries.Quota.header.currentUsage') }}</h3>
v-if="isLoading" <div :class="['ui', {'success': progress < 60}, {'warning': progress >= 60 && progress < 96}, {'error': progress >= 95}, 'progress']">
:class="['ui', {'active': isLoading}, 'inverted', 'dimmer']"
>
<div class="ui text loader">
{{ t('views.content.libraries.Quota.loading.currentUsage') }}
</div>
</div>
<Alert
data-percent="progress"
:green="progress < 60"
:yellow="progress >= 60 && progress < 96"
:red="progress >= 95"
>
<div <div
class="bar" class="bar"
:style="{width: `${progress}%`}" :style="{width: `${progress}%`}"
> >
<div class="progress"> <div class="progress">
{{ t('views.content.libraries.Quota.label.percentUsed', {progress: progress}) }} {{ t('views.content.libraries.Quota.label.percentUsed', {progress: humanSize(progress)}) }}
</div> </div>
</div> </div>
<div <div
@ -93,123 +86,211 @@ const purgeErroredFiles = () => purge('errored')
> >
{{ t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), currentAmount: humanSize(quotaStatus.current * 1000 * 1000)}) }} {{ t('views.content.libraries.Quota.label.currentUsage', {max: humanSize(quotaStatus.max * 1000 * 1000), currentAmount: humanSize(quotaStatus.current * 1000 * 1000)}) }}
</div> </div>
</Alert> </div>
<Layout </Alert>
v-if="quotaStatus" <Layout
flex v-if="quotaStatus"
flex
>
<Alert
v-if="quotaStatus.pending > 0"
yellow
> >
<Alert <div class="statistic">
v-if="quotaStatus.pending > 0" <div class="value">
yellow {{ humanSize(quotaStatus.pending * 1000 * 1000) }}
>
<div class="statistic">
<div class="value">
{{ humanSize(quotaStatus.pending * 1000 * 1000) }}
</div>
<div class="label">
{{ t('views.content.libraries.Quota.label.pending') }}
</div>
</div> </div>
<Spacer /> <div class="label">
<Layout flex> {{ t('views.content.libraries.Quota.label.pending') }}
<Link </div>
primary </div>
solid <Spacer />
low-height <Layout flex>
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}" <Link
> primary
{{ t('views.content.libraries.Quota.link.viewFiles') }} solid
</Link> low-height
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
>
{{ t('views.content.libraries.Quota.link.viewFiles') }}
</Link>
<dangerous-button <dangerous-button
low-height low-height
:action="purgePendingFiles" :action="purgePendingFiles"
:title="t('views.content.libraries.Quota.modal.purgePending.header')" :title="t('views.content.libraries.Quota.modal.purgePending.header')"
> >
{{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content>
{{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
</template>
<template #modal-confirm>
{{ t('views.content.libraries.Quota.button.purge') }} {{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content> </template>
{{ t('views.content.libraries.Quota.modal.purgePending.content.description') }} </dangerous-button>
</template> </Layout>
<template #modal-confirm> </Alert>
{{ t('views.content.libraries.Quota.button.purge') }} <Alert
</template> v-if="quotaStatus.skipped > 0"
</dangerous-button> yellow
</Layout> >
</Alert> <div class="ui tiny statistic">
<Alert <div class="value">
v-if="quotaStatus.skipped > 0" {{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
yellow
>
<div class="ui tiny statistic">
<div class="value">
{{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
</div>
<div class="label">
{{ t('views.content.libraries.Quota.label.skipped') }}
</div>
</div> </div>
<Spacer /> <div class="label">
<Layout flex> {{ t('views.content.libraries.Quota.label.skipped') }}
<Link
primary
solid
low-height
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
>
{{ t('views.content.libraries.Quota.link.viewFiles') }}
</Link>
<dangerous-button
low-height
:action="purgeSkippedFiles"
:title="t('views.content.libraries.Quota.modal.purgeSkipped.header')"
>
{{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content>
{{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
</template>
<template #modal-confirm>
{{ t('views.content.libraries.Quota.button.purge') }}
</template>
</dangerous-button>
</Layout>
</Alert>
<Alert
v-if="quotaStatus.errored > 0"
red
>
<div class="ui tiny danger statistic">
<div class="value">
{{ humanSize(quotaStatus.errored * 1000 * 1000) }}
</div>
<div class="label">
{{ t('views.content.libraries.Quota.label.errored') }}
</div>
</div> </div>
<Spacer /> </div>
<Layout flex> <Spacer />
<Link <Layout flex>
primary <Link
solid primary
low-height solid
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}" low-height
> :to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}"
{{ t('views.content.libraries.Quota.link.viewFiles') }} >
</Link> {{ t('views.content.libraries.Quota.link.viewFiles') }}
<dangerous-button </Link>
low-height <dangerous-button
:action="purgeErroredFiles" low-height
:title="t('views.content.libraries.Quota.modal.purgeErrored.header')" :action="purgeSkippedFiles"
> :title="t('views.content.libraries.Quota.modal.purgeSkipped.header')"
>
{{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content>
{{ t('views.content.libraries.Quota.modal.purgeSkipped.content.description') }}
</template>
<template #modal-confirm>
{{ t('views.content.libraries.Quota.button.purge') }} {{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content> </template>
{{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }} </dangerous-button>
</template> </Layout>
<template #modal-confirm> </Alert>
{{ t('views.content.libraries.Quota.button.purge') }} <Alert
</template> v-if="quotaStatus.errored > 0"
</dangerous-button> red
</Layout> >
</Alert> <div class="ui tiny danger statistic">
</Layout> <div class="value">
</Section> {{ humanSize(quotaStatus.errored * 1000 * 1000) }}
</div>
<div class="label">
{{ t('views.content.libraries.Quota.label.errored') }}
</div>
</div>
<Spacer />
<Layout flex>
<Link
primary
solid
low-height
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}"
>
{{ t('views.content.libraries.Quota.link.viewFiles') }}
</Link>
<dangerous-button
low-height
:action="purgeErroredFiles"
:title="t('views.content.libraries.Quota.modal.purgeErrored.header')"
>
{{ t('views.content.libraries.Quota.button.purge') }}
<template #modal-content>
{{ t('views.content.libraries.Quota.modal.purgeErrored.content.description') }}
</template>
<template #modal-confirm>
{{ t('views.content.libraries.Quota.button.purge') }}
</template>
</dangerous-button>
</Layout>
</Alert>
</Layout>
</template> </template>
<style lang="scss" scoped>
.ui.progress {
position: relative;
display: -webkit-box;
display: flex;
width: 100%;
height: 20px;
border: none;
margin: 1em 0 2.5em;
box-shadow: none;
background: rgba(0,0,0,.1);
padding: 0;
border-radius: .28571429rem
}
.ui.progress .bar {
display: block;
line-height: 1;
position: relative;
width: 0;
min-width: 2em;
background: #888;
border-radius: .28571429rem;
-webkit-transition: width .1s ease,background-color .1s ease;
transition: width .1s ease,background-color .1s ease;
overflow: hidden
}
.ui.progress .bar>.progress {
white-space: nowrap;
position: absolute;
width: auto;
font-size: .92857143em;
top: 50%;
right: .5em;
left: auto;
bottom: auto;
color: var(--background-color);
text-shadow: none;
margin-top: -.5em;
font-weight: 700;
text-align: left
}
.ui.progress>.label {
position: absolute;
width: 100%;
font-size: 1em;
top: 100%;
right: auto;
left: 0;
bottom: auto;
font-weight: 700;
text-shadow: none;
margin-top: .2em;
text-align: center;
-webkit-transition: color .4s ease;
transition: color .4s ease
}
.ui.progress.success .bar {
background-color: var(--success-color)
}
.ui.progress.success .bar,.ui.progress.success .bar:after {
-webkit-animation: none;
animation: none
}
.ui.progress.warning .bar {
background-color: var(--warning-color)
}
.ui.progress.warning .bar,.ui.progress.warning .bar:after {
-webkit-animation: none;
animation: none
}
.ui.progress.error .bar {
background-color: var(--danger-color)
}
.ui.progress.error .bar,.ui.progress.error .bar:after {
-webkit-animation: none;
animation: none
}
</style>