Add snippets_size to namespace usage statistics

In this commit we introduce the total storage size
of snippets in the namespace storage statistics
graph.

ee/app/assets/javascripts/storage_counter/components/app.vue

@@ -2,7 +2,7 @@
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import Project from './project.vue';
 import UsageGraph from './usage_graph.vue';
-import query from '../queries/storage.graphql';
+import query from '../queries/storage.query.graphql';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 

ee/app/assets/javascripts/storage_counter/components/usage_graph.vue

@@ -22,6 +22,7 @@ export default {
         repositorySize,
         storageSize,
         wikiSize,
+        snippetsSize,
       } = this.rootStorageStatistics;
 
       if (storageSize === 0) {
@@ -59,6 +60,12 @@ export default {
           class: 'gl-bg-data-viz-magenta-500',
           size: wikiSize,
         },
+        {
+          name: s__('UsageQuota|Snippets'),
+          style: this.usageStyle(this.barRatio(snippetsSize)),
+          class: 'gl-bg-data-viz-orange-800',
+          size: snippetsSize,
+        },
       ]
         .filter(data => data.size !== 0)
         .sort((a, b) => b.size - a.size);

ee/app/assets/javascripts/storage_counter/queries/storage.graphql → ee/app/assets/javascripts/storage_counter/queries/storage.query.graphql

@@ -9,6 +9,7 @@ query getStorageCounter($fullPath: ID!) {
       buildArtifactsSize
       packagesSize
       wikiSize
+      snippetsSize
     }
     projects(includeSubgroups: true) {
       edges {

ee/changelogs/unreleased/fj-224656-show-snippets-size-in-group-statistics.yml

+---
+title: Add snippets_size to group usage statistics graph
+merge_request: 35608
+author:
+type: changed

ee/spec/frontend/storage_counter/components/usage_graph_spec.js

@@ -28,7 +28,8 @@ describe('Storage Counter usage graph component', () => {
         packagesSize: 3000,
         lfsObjectsSize: 2000,
         buildArtifactsSize: 1000,
-        storageSize: 15000,
+        snippetsSize: 2000,
+        storageSize: 17000,
       },
       limit: 2000,
     };
@@ -48,6 +49,7 @@ describe('Storage Counter usage graph component', () => {
       packagesSize,
       repositorySize,
       wikiSize,
+      snippetsSize,
     } = data.rootStorageStatistics;
 
     expect(types.at(0).text()).toMatchInterpolatedText(`Wikis ${numberToHumanSize(wikiSize)}`);
@@ -61,6 +63,9 @@ describe('Storage Counter usage graph component', () => {
       `LFS Objects ${numberToHumanSize(lfsObjectsSize)}`,
     );
     expect(types.at(4).text()).toMatchInterpolatedText(
+      `Snippets ${numberToHumanSize(snippetsSize)}`,
+    );
+    expect(types.at(5).text()).toMatchInterpolatedText(
       `Build Artifacts ${numberToHumanSize(buildArtifactsSize)}`,
     );
   });
@@ -95,11 +100,12 @@ describe('Storage Counter usage graph component', () => {
 
     it('sets correct flex values', () => {
       expect(findStorageTypeUsagesSerialized()).toStrictEqual([
-        '0.3333333333333333',
-        '0.26666666666666666',
-        '0.2',
-        '0.13333333333333333',
-        '0.06666666666666667',
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
       ]);
     });
   });
@@ -112,11 +118,12 @@ describe('Storage Counter usage graph component', () => {
 
     it('it does render correclty', () => {
       expect(findStorageTypeUsagesSerialized()).toStrictEqual([
-        '0.3333333333333333',
-        '0.26666666666666666',
-        '0.2',
-        '0.13333333333333333',
-        '0.06666666666666667',
+        '0.29411764705882354',
+        '0.23529411764705882',
+        '0.17647058823529413',
+        '0.11764705882352941',
+        '0.11764705882352941',
+        '0.058823529411764705',
       ]);
     });
   });