Newer
Older
<template>
<div class="ui segment">
<h3 class="ui header"><translate>Current usage</translate></h3>
<div v-if="isLoading" :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
<div class="ui text loader"><translate>Loading usage data...</translate></div>
</div>
<div :class="['ui', {'success': progress < 60}, {'yellow': progress >= 60 && progress < 96}, {'error': progress >= 95}, 'progress']">
<div class="bar" :style="{width: `${progress}%`}">
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div class="progress">{{ progress }}%</div>
</div>
<div class="label" v-if="quotaStatus">
<translate :translate-params="{max: humanSize(quotaStatus.max * 1000 * 1000), current: humanSize(quotaStatus.current * 1000 * 1000)}">%{ current } used on %{ max } allowed</translate>
</div>
</div>
<div class="ui hidden divider"></div>
<div v-if="quotaStatus" class="ui stackable three column grid">
<div v-if="quotaStatus.pending > 0" class="column">
<div class="ui tiny yellow statistic">
<div class="value">
{{ humanSize(quotaStatus.pending * 1000 * 1000) }}
</div>
<div class="label">
<translate>Pending files</translate>
</div>
</div>
<div>
<router-link
class="ui basic blue tiny button"
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'pending'}])}}">
<translate>View files</translate>
</router-link>
<dangerous-button
color="grey"
class="basic tiny"
:action="purgePendingFiles">
<translate>Purge</translate>
<p slot="modal-header"><translate>Purge pending files?</translate></p>
<p slot="modal-content"><translate>This will remove tracks that were uploaded but not processed yet. This will remove those files completely and you will regain the corresponding quota.</translate></p>
<p slot="modal-confirm"><translate>Purge</translate></p>
</dangerous-button>
</div>
</div>
<div v-if="quotaStatus.skipped > 0" class="column">
<div class="ui tiny grey statistic">
<div class="value">
{{ humanSize(quotaStatus.skipped * 1000 * 1000) }}
</div>
<div class="label">
<translate>Skipped files</translate>
</div>
</div>
<div>
<router-link
class="ui basic blue tiny button"
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'skipped'}])}}">
<translate>View files</translate>
</router-link>
<dangerous-button
color="grey"
class="basic tiny"
:action="purgeSkippedFiles">
<translate>Purge</translate>
<p slot="modal-header"><translate>Purge skipped files?</translate></p>
<p slot="modal-content"><translate>This will remove tracks that were uploaded but skipped during import processes for various reasons. This will remove those files completely and you will regain the corresponding quota.</translate></p>
<p slot="modal-confirm"><translate>Purge</translate></p>
</dangerous-button>
</div>
</div>
<div v-if="quotaStatus.errored > 0" class="column">
<div class="ui tiny red statistic">
<div class="value">
{{ humanSize(quotaStatus.errored * 1000 * 1000) }}
</div>
<div class="label">
<translate>Errored files</translate>
</div>
</div>
<div>
<router-link
class="ui basic blue tiny button"
:to="{name: 'content.libraries.files', query: {q: compileTokens([{field: 'status', value: 'errored'}])}}">
<translate>View files</translate>
</router-link>
<dangerous-button
color="grey"
class="basic tiny"
:action="purgeErroredFiles">
<translate>Purge</translate>
<p slot="modal-header"><translate>Purge errored files?</translate></p>
<p slot="modal-content"><translate>This will remove tracks that were uploaded but failed to be process by the server. This will remove those files completely and you will regain the corresponding quota.</translate></p>
<p slot="modal-confirm"><translate>Purge</translate></p>
</dangerous-button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import {humanSize} from '@/filters'
import {compileTokens} from '@/search'
export default {
data () {
return {
quotaStatus: null,
isLoading: false,
humanSize,
compileTokens
}
},
created () {
this.fetch()
},
methods: {
fetch () {
let self = this
self.isLoading = true
axios.get('users/users/me/').then((response) => {
self.quotaStatus = response.data.quota_status
self.isLoading = false
})
},
purge (status) {
let self = this
let payload = {
action: 'delete',
objects: 'all',
filters: {
import_status: status
}
}
axios.post('uploads/action/', payload).then((response) => {
self.fetch()
})
},
purgeSkippedFiles () {
this.purge('skipped')
},
purgePendingFiles () {
this.purge('pending')
},
purgeErroredFiles () {
this.purge('errored')
},
},
computed: {
progress () {
if (!this.quotaStatus) {
return 0
}
return Math.min(parseInt(this.quotaStatus.current * 100 / this.quotaStatus.max), 100)
}
}
}
</script>