kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
fix(front): upload quota
ArneBo
rodzic
5acdb39f59
commit
4d31386944
|
|
@ -24,7 +24,7 @@ export function humanSize (bytes: number, isSI = true) {
|
|||
const threshold = isSI ? 1000 : 1024
|
||||
|
||||
if (Math.abs(bytes) < threshold) {
|
||||
return `${bytes} B`
|
||||
return `${Math.floor(bytes)}`
|
||||
}
|
||||
|
||||
const units = HUMAN_UNITS[isSI ? 'SI' : 'powerOf2']
|
||||
|
|
|
|||
|
|
@ -59,25 +59,8 @@ const libraryCreated = (library: Library) => {
|
|||
:h1="t('views.content.libraries.Home.header.libraries')"
|
||||
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 />
|
||||
</Section>
|
||||
<Spacer />
|
||||
<Section
|
||||
v-if="libraries.length > 0"
|
||||
|
|
|
|||
|
|
@ -62,29 +62,22 @@ const purgeErroredFiles = () => purge('errored')
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Section
|
||||
:h3="t('views.content.libraries.Quota.header.currentUsage')"
|
||||
<Loader v-if="isLoading" />
|
||||
<Alert
|
||||
data-percent="progress"
|
||||
:green="progress < 60"
|
||||
:yellow="progress >= 60 && progress < 96"
|
||||
:red="progress >= 95"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
: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"
|
||||
>
|
||||
<h3>{{ t('views.content.libraries.Quota.header.currentUsage') }}</h3>
|
||||
<div :class="['ui', {'success': progress < 60}, {'warning': progress >= 60 && progress < 96}, {'error': progress >= 95}, 'progress']">
|
||||
<div
|
||||
class="bar"
|
||||
:style="{width: `${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
|
||||
|
|
@ -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)}) }}
|
||||
</div>
|
||||
</Alert>
|
||||
<Layout
|
||||
v-if="quotaStatus"
|
||||
flex
|
||||
</div>
|
||||
</Alert>
|
||||
<Layout
|
||||
v-if="quotaStatus"
|
||||
flex
|
||||
>
|
||||
<Alert
|
||||
v-if="quotaStatus.pending > 0"
|
||||
yellow
|
||||
>
|
||||
<Alert
|
||||
v-if="quotaStatus.pending > 0"
|
||||
yellow
|
||||
>
|
||||
<div class="statistic">
|
||||
<div class="value">
|
||||
{{ humanSize(quotaStatus.pending * 1000 * 1000) }}
|
||||
</div>
|
||||
<div class="label">
|
||||
{{ t('views.content.libraries.Quota.label.pending') }}
|
||||
</div>
|
||||
<div class="statistic">
|
||||
<div class="value">
|
||||
{{ humanSize(quotaStatus.pending * 1000 * 1000) }}
|
||||
</div>
|
||||
<Spacer />
|
||||
<Layout flex>
|
||||
<Link
|
||||
primary
|
||||
solid
|
||||
low-height
|
||||
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
|
||||
>
|
||||
{{ t('views.content.libraries.Quota.link.viewFiles') }}
|
||||
</Link>
|
||||
<div class="label">
|
||||
{{ t('views.content.libraries.Quota.label.pending') }}
|
||||
</div>
|
||||
</div>
|
||||
<Spacer />
|
||||
<Layout flex>
|
||||
<Link
|
||||
primary
|
||||
solid
|
||||
low-height
|
||||
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}"
|
||||
>
|
||||
{{ t('views.content.libraries.Quota.link.viewFiles') }}
|
||||
</Link>
|
||||
|
||||
<dangerous-button
|
||||
low-height
|
||||
:action="purgePendingFiles"
|
||||
:title="t('views.content.libraries.Quota.modal.purgePending.header')"
|
||||
>
|
||||
<dangerous-button
|
||||
low-height
|
||||
:action="purgePendingFiles"
|
||||
: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') }}
|
||||
<template #modal-content>
|
||||
{{ t('views.content.libraries.Quota.modal.purgePending.content.description') }}
|
||||
</template>
|
||||
<template #modal-confirm>
|
||||
{{ t('views.content.libraries.Quota.button.purge') }}
|
||||
</template>
|
||||
</dangerous-button>
|
||||
</Layout>
|
||||
</Alert>
|
||||
<Alert
|
||||
v-if="quotaStatus.skipped > 0"
|
||||
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>
|
||||
</template>
|
||||
</dangerous-button>
|
||||
</Layout>
|
||||
</Alert>
|
||||
<Alert
|
||||
v-if="quotaStatus.skipped > 0"
|
||||
yellow
|
||||
>
|
||||
<div class="ui tiny statistic">
|
||||
<div class="value">
|
||||
{{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
|
||||
</div>
|
||||
<Spacer />
|
||||
<Layout flex>
|
||||
<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 class="label">
|
||||
{{ t('views.content.libraries.Quota.label.skipped') }}
|
||||
</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')"
|
||||
>
|
||||
</div>
|
||||
<Spacer />
|
||||
<Layout flex>
|
||||
<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 #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>
|
||||
</Section>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue