mirror of https://github.com/nextcloud/server.git
feat(files): Quota in navigation
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>pull/36002/head
John Molakvoæ
1 year ago
parent
9af7ee8d11
commit
b9906fb21e
@ -1,57 +0,0 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
/**
|
||||
* @copyright Copyright (c) 2018, Roeland Jago Douma <roeland@famdouma.nl>
|
||||
*
|
||||
* @author Roeland Jago Douma <roeland@famdouma.nl>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
namespace OCA\Files\Controller;
|
||||
|
||||
use OCA\Files\Helper;
|
||||
use OCP\AppFramework\Controller;
|
||||
use OCP\AppFramework\Http\JSONResponse;
|
||||
use OCP\Files\NotFoundException;
|
||||
use OCP\IRequest;
|
||||
|
||||
class AjaxController extends Controller {
|
||||
public function __construct(string $appName, IRequest $request) {
|
||||
parent::__construct($appName, $request);
|
||||
}
|
||||
|
||||
/**
|
||||
* @NoAdminRequired
|
||||
*/
|
||||
public function getStorageStats(string $dir = '/'): JSONResponse {
|
||||
try {
|
||||
return new JSONResponse([
|
||||
'status' => 'success',
|
||||
'data' => Helper::buildFileStorageStatistics($dir),
|
||||
]);
|
||||
} catch (NotFoundException $e) {
|
||||
return new JSONResponse([
|
||||
'status' => 'error',
|
||||
'data' => [
|
||||
'message' => 'Folder not found'
|
||||
],
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<NcAppNavigationItem v-if="storageStats"
|
||||
:aria-label="t('files', 'Storage informations')"
|
||||
:class="{ 'app-navigation-entry__settings-quota--not-unlimited': storageStats.quota >= 0}"
|
||||
:loading="loadingStorageStats"
|
||||
:name="storageStatsTitle"
|
||||
:title="storageStatsTooltip"
|
||||
class="app-navigation-entry__settings-quota"
|
||||
data-cy-files-navigation-settings-quota
|
||||
@click.stop.prevent="debounceUpdateStorageStats">
|
||||
<ChartPie slot="icon" :size="20" />
|
||||
|
||||
<!-- Progress bar -->
|
||||
<NcProgressBar v-if="storageStats.quota >= 0"
|
||||
slot="extra"
|
||||
:error="storageStats.relative > 80"
|
||||
:value="Math.min(storageStats.relative, 100)" />
|
||||
</NcAppNavigationItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatFileSize } from '@nextcloud/files'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
import { debounce, throttle } from 'throttle-debounce'
|
||||
import { translate } from '@nextcloud/l10n'
|
||||
import axios from '@nextcloud/axios'
|
||||
import ChartPie from 'vue-material-design-icons/ChartPie.vue'
|
||||
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
|
||||
import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
|
||||
|
||||
import logger from '../logger.js'
|
||||
import { subscribe } from '@nextcloud/event-bus'
|
||||
|
||||
export default {
|
||||
name: 'NavigationQuota',
|
||||
|
||||
components: {
|
||||
ChartPie,
|
||||
NcAppNavigationItem,
|
||||
NcProgressBar,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loadingStorageStats: false,
|
||||
storageStats: loadState('files', 'storageStats', null),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
storageStatsTitle() {
|
||||
const usedQuotaByte = formatFileSize(this.storageStats?.used)
|
||||
const quotaByte = formatFileSize(this.storageStats?.quota)
|
||||
|
||||
// If no quota set
|
||||
if (this.storageStats?.quota < 0) {
|
||||
return this.t('files', '{usedQuotaByte} used', { usedQuotaByte })
|
||||
}
|
||||
|
||||
return this.t('files', '{used} of {quota} used', {
|
||||
used: usedQuotaByte,
|
||||
quota: quotaByte,
|
||||
})
|
||||
},
|
||||
storageStatsTooltip() {
|
||||
if (!this.storageStats.relative) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return this.t('files', '{relative}% used', this.storageStats)
|
||||
},
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
/**
|
||||
* Update storage stats every minute
|
||||
* TODO: remove when all views are migrated to Vue
|
||||
*/
|
||||
setInterval(this.throttleUpdateStorageStats, 60 * 1000)
|
||||
|
||||
subscribe('files:file:created', this.throttleUpdateStorageStats)
|
||||
subscribe('files:file:deleted', this.throttleUpdateStorageStats)
|
||||
subscribe('files:file:moved', this.throttleUpdateStorageStats)
|
||||
subscribe('files:file:updated', this.throttleUpdateStorageStats)
|
||||
|
||||
subscribe('files:folder:created', this.throttleUpdateStorageStats)
|
||||
subscribe('files:folder:deleted', this.throttleUpdateStorageStats)
|
||||
subscribe('files:folder:moved', this.throttleUpdateStorageStats)
|
||||
subscribe('files:folder:updated', this.throttleUpdateStorageStats)
|
||||
},
|
||||
|
||||
methods: {
|
||||
// From user input
|
||||
debounceUpdateStorageStats: debounce(200, function(event) {
|
||||
this.updateStorageStats(event)
|
||||
}),
|
||||
// From interval or event bus
|
||||
throttleUpdateStorageStats: throttle(1000, function(event) {
|
||||
this.updateStorageStats(event)
|
||||
}),
|
||||
|
||||
/**
|
||||
* Update the storage stats
|
||||
* Throttled at max 1 refresh per minute
|
||||
*
|
||||
* @param {Event} [event = null] if user interaction
|
||||
*/
|
||||
async updateStorageStats(event = null) {
|
||||
if (this.loadingStorageStats) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loadingStorageStats = true
|
||||
try {
|
||||
const response = await axios.get(generateUrl('/apps/files/api/v1/stats'))
|
||||
if (!response?.data?.data) {
|
||||
throw new Error('Invalid storage stats')
|
||||
}
|
||||
this.storageStats = response.data.data
|
||||
} catch (error) {
|
||||
logger.error('Could not refresh storage stats', { error })
|
||||
// Only show to the user if it was manually triggered
|
||||
if (event) {
|
||||
showError(t('files', 'Could not refresh storage stats'))
|
||||
}
|
||||
} finally {
|
||||
this.loadingStorageStats = false
|
||||
}
|
||||
},
|
||||
|
||||
t: translate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// User storage stats display
|
||||
.app-navigation-entry__settings-quota {
|
||||
// Align title with progress and icon
|
||||
&--not-unlimited::v-deep .app-navigation-entry__title {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
progress {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
margin-left: 44px;
|
||||
width: calc(100% - 44px - 22px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue