feat(files): Quota in navigation

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

apps/files/appinfo/routes.php

@@ -75,11 +75,6 @@
  'verb' => 'GET',
  'root' => '',
  ],
- [
- 'name' => 'ajax#getStorageStats',
- 'url' => '/ajax/getstoragestats',
- 'verb' => 'GET',
- ],
  [
  'name' => 'API#getThumbnail',
  'url' => '/api/v1/thumbnail/{x}/{y}/{file}',
@@ -97,6 +92,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 DataResponse
+ */
+ 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/views/Navigation.vue

@@ -45,6 +45,18 @@
  <!-- Settings toggle -->
  <template #footer>
  <ul class="app-navigation-entry__settings">
+ <NcAppNavigationItem :aria-label="t('files', 'Storage informations')"
+ :loading="loadingStorageStats"
+ :title="storageStatsTitle"
+ class="app-navigation-entry__settings-quota"
+ data-cy-files-navigation-settings-quota
+ @click="updateStorageStats">
+ <ChartPie slot="icon" :size="20" />
+ <NcProgressBar v-if="storageStats.quota >= 0"
+ slot="extra"
+ :error="storageStats.relative > 80"
+ :value="storageStats.relative"/>
+ </NcAppNavigationItem>
  <NcAppNavigationItem :aria-label="t('files', 'Open the files app settings')"
  :title="t('files', 'Files settings')"
  data-cy-files-navigation-settings-button
@@ -63,25 +75,32 @@
 
 <script>
 import { emit, subscribe } from '@nextcloud/event-bus'
+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 Cog from 'vue-material-design-icons/Cog.vue'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+
+import ChartPie from 'vue-material-design-icons/ChartPie.vue'
+import Cog from 'vue-material-design-icons/Cog.vue'
 
 import logger from '../logger.js'
 import Navigation from '../services/Navigation.ts'
 import SettingsModal from './Settings.vue'
 
-import { translate } from '@nextcloud/l10n'
-
 export default {
  name: 'Navigation',
 
  components: {
+ ChartPie,
  Cog,
  NcAppNavigation,
  NcAppNavigationItem,
+ NcProgressBar,
  SettingsModal,
  },
 
@@ -95,6 +114,9 @@ export default {
 
  data() {
  return {
+ loadingStorageStats: false,
+ storageStats: loadState('files', 'storageStats'),
+
  settingsOpened: false,
  }
  },
@@ -134,6 +156,20 @@ export default {
  return list
  }, {})
  },
+ 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,
+ })
+ },
  },
 
  watch: {
@@ -150,6 +186,9 @@ export default {
  }
 
  subscribe('files:legacy-navigation:changed', this.onLegacyNavigationChanged)
+
+ // Update storage stats every minute
+ setTimeout(this.updateStorageStats, 60 * 1000)
  },
 
  methods: {
@@ -213,6 +252,7 @@ export default {
 
  /**
  * Generate the route to a view
+ *
  * @param {Navigation} view the view to toggle
  */
  generateToNavigation(view) {
@@ -223,6 +263,35 @@ export default {
  return { name: 'filelist', params: { view: view.id } }
  },
 
+ /**
+ * 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
+ } catch (error) {
+ logger.error('Could not refresh storage stats', error)
+ if (event) {
+ showError(t('files', 'Could not refresh storage stats'))
+ }
+ } finally {
+ this.loadingStorageStats = false
+ }
+ },
+
  /**
  * Open the settings modal
  */
@@ -260,5 +329,13 @@ export default {
  padding-top: 0 !important;
  // Prevent shrinking or growing
  flex: 0 0 auto;
+
+ // User storage stats display
+ &-quota progress {
+ position: absolute;
+ bottom: 4px;
+ margin-left: 44px;
+ width: calc(100% - 44px - 22px);
+ }
 }
 </style>