feat(files): Quota in navigation

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

.eslintrc.js

@@ -8,8 +8,15 @@ module.exports = {
  oc_userconfig: true,
  dayNames: true,
  firstDay: true,
+ 'cypress/globals': true,
  },
- extends: ['@nextcloud'],
+ plugins: [
+ 'cypress',
+ ],
+ extends: [
+ '@nextcloud',
+ 'plugin:cypress/recommended',
+ ],
  rules: {
  'no-tabs': 'warn',
  // TODO: make sure we fix this as this is bad vue coding style.

apps/files/appinfo/routes.php

@@ -61,11 +61,6 @@
  'verb' => 'GET',
  'root' => '',
  ],
- [
- 'name' => 'ajax#getStorageStats',
- 'url' => '/ajax/getstoragestats',
- 'verb' => 'GET',
- ],
  [
  'name' => 'API#getThumbnail',
  'url' => '/api/v1/thumbnail/{x}/{y}/{file}',
@@ -83,6 +78,11 @@
  'url' => '/api/v1/recent/',
  'verb' => 'GET'
  ],
+ [
+ 'name' => 'API#getStorageStats',
+ 'url' => '/api/v1/stats',
+ 'verb' => 'GET'
+ ],
  [
  'name' => 'API#setConfig',
  'url' => '/api/v1/config/{key}',

apps/files/lib/Controller/ApiController.php

@@ -257,6 +257,20 @@ public function getRecentFiles() {
  return new DataResponse(['files' => $files]);
  }
 
+
+ /**
+ * Returns the current logged-in user's storage stats.
+ *
+ * @NoAdminRequired
+ *
+ * @param ?string $dir the directory to get the storage stats from
+ * @return JSONResponse
+ */
+ public function getStorageStats($dir = '/'): JSONResponse {
+ $storageInfo = \OC_Helper::getStorageInfo($dir);
+ return new JSONResponse(['message' => 'ok', 'data' => $storageInfo]);
+ }
+
  /**
  * Change the default sort mode
  *

apps/files/lib/Controller/ViewController.php

@@ -254,6 +254,7 @@ public function index($dir = '', $view = '', $fileid = null, $fileNotFound = fal
  $contentItems = [];
 
  $this->initialState->provideInitialState('navigation', $navItems);
+ $this->initialState->provideInitialState('storageStats', \OC_Helper::getStorageInfo($view === 'files' ? ($dir ?: '/') : '/' ));
  $this->initialState->provideInitialState('config', $this->userConfig->getConfigs());
 
  // render the container content for every navigation item

apps/files/src/components/NavigationQuota.vue

@@ -0,0 +1,134 @@
+<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="updateStorageStats">
+ <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 { 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'
+
+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
+ */
+ setTimeout(this.updateStorageStats, 60 * 1000)
+ },
+
+ methods: {
+ /**
+ * Update the storage stats
+ *
+ * @param {Event} [event = null] if user interaction
+ */
+ async updateStorageStats(event = null) {
+ event?.preventDefault()
+ event?.stopPropagation()
+ 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
+ this.$el.querySelector('.app-navigation-entry__title').title = this.storageStatsTooltip
+ } catch (error) {
+ logger.error('Could not refresh storage stats', error)
+ 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>