Skip to content

Split getNamespaceStorageStatistics query on Storage Usage Quotas

Kos Palchyk requested to merge 431177-error-budget-improve-getnamespacestoragestatistics-performance into master

What does this MR do and why?

This MR splits FE GraphQL query to the BE, to separate namespace storage info and project list storage info. Since project list info generation can be a heavy operation, this could result in improvement of perceived page load speed (as main info would load faster). Also, pagination would now work without reloading namespace info. Related to [Error Budget] Improve `getNamespaceStorageStat... (#431177).

Since this MR touches fixture generation, I decided to also largely address Use GraphQL fixture to generate `mockedNamespac... (#417978 - closed).

Screenshots or screen recordings

No visual changes.

Well... almost. There's a change in error state: previously only cards persisted in loading state if error occurred while data fetching, now loading state persists for all UI components:

before after
image image

How to set up and validate locally

Open storage Storage Usage Quotas page for a namespace (e.g. http://localhost:3000/groups/gitlab-org/-/usage_quotas#storage-quota-tab)

See if both namespace info (cards atop) and project list (table below) have loaded. Try paginating through the project list

diff to lower pagination limit 
diff --git a/ee/app/assets/javascripts/usage_quotas/storage/init_namespace_storage.js b/ee/app/assets/javascripts/usage_quotas/storage/init_namespace_storage.js
index 4a9d293568cd..38ba6491ae8e 100644
--- a/ee/app/assets/javascripts/usage_quotas/storage/init_namespace_storage.js
+++ b/ee/app/assets/javascripts/usage_quotas/storage/init_namespace_storage.js
@@ -49,7 +49,7 @@ export default () => {
       namespaceId,
       namespacePath,
       userNamespace: parseBoolean(userNamespace),
-      defaultPerPage: Number(defaultPerPage),
+      defaultPerPage: 1,
       namespacePlanName,
       perProjectStorageLimit,
       namespaceStorageLimit,

Storybook

You can also access the application through Storybook. You'll need to generate fixtures for that bundle exec rspec ee/spec/frontend/fixtures/namespace.rb

Then start storybook: npm run storybook:start, and visit http://localhost:9002/?path=/story/ee-usage-quotas-storage-namespace-storage-app--saas-loading-error .

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Kos Palchyk

Merge request reports