Included pipeline artifacts in usage quota

Include pipeline artifacts size in the usage
quota by combining it with the build artifacts
size and changing the label to just "Artifacts".

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

 <script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 
 export default {
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     rootStorageStatistics: {
       required: true,
@@ -17,6 +24,7 @@ export default {
     storageTypes() {
       const {
         buildArtifactsSize,
+        pipelineArtifactsSize,
         lfsObjectsSize,
         packagesSize,
         repositorySize,
@@ -24,6 +32,7 @@ export default {
         wikiSize,
         snippetsSize,
       } = this.rootStorageStatistics;
+      const artifactsSize = buildArtifactsSize + pipelineArtifactsSize;
 
       if (storageSize === 0) {
         return null;
@@ -49,10 +58,11 @@ export default {
           size: packagesSize,
         },
         {
-          name: s__('UsageQuota|Build Artifacts'),
-          style: this.usageStyle(this.barRatio(buildArtifactsSize)),
+          name: s__('UsageQuota|Artifacts'),
+          style: this.usageStyle(this.barRatio(artifactsSize)),
           class: 'gl-bg-data-viz-green-600',
-          size: buildArtifactsSize,
+          size: artifactsSize,
+          tooltip: s__('UsageQuota|Artifacts is a sum of build and pipeline artifacts.'),
         },
         {
           name: s__('UsageQuota|Wikis'),
@@ -116,6 +126,15 @@ export default {
         <span class="gl-text-gray-500 gl-font-sm">
           {{ formatSize(storageType.size) }}
         </span>
+        <span
+          v-if="storageType.tooltip"
+          v-gl-tooltip
+          :title="storageType.tooltip"
+          :aria-label="storageType.tooltip"
+          class="gl-ml-2"
+        >
+          <gl-icon name="question" :size="12" />
+        </span>
       </div>
     </div>
   </div>

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

@@ -14,6 +14,7 @@ query getStorageCounter($fullPath: ID!, $withExcessStorageData: Boolean = false)
       repositorySize
       lfsObjectsSize
       buildArtifactsSize
+      pipelineArtifactsSize
       packagesSize
       wikiSize
       snippetsSize

ee/changelogs/unreleased/sh-pipeline-artifacts-size.yml

+---
+title: Include pipeline artifacts size on storage usage page
+merge_request: 44645
+author:
+type: added

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

@@ -27,7 +27,8 @@ describe('Storage Counter usage graph component', () => {
         repositorySize: 4000,
         packagesSize: 3000,
         lfsObjectsSize: 2000,
-        buildArtifactsSize: 1000,
+        buildArtifactsSize: 500,
+        pipelineArtifactsSize: 500,
         snippetsSize: 2000,
         storageSize: 17000,
       },
@@ -45,6 +46,7 @@ describe('Storage Counter usage graph component', () => {
 
     const {
       buildArtifactsSize,
+      pipelineArtifactsSize,
       lfsObjectsSize,
       packagesSize,
       repositorySize,
@@ -66,7 +68,7 @@ describe('Storage Counter usage graph component', () => {
       `Snippets ${numberToHumanSize(snippetsSize)}`,
     );
     expect(types.at(5).text()).toMatchInterpolatedText(
-      `Build Artifacts ${numberToHumanSize(buildArtifactsSize)}`,
+      `Artifacts ${numberToHumanSize(buildArtifactsSize + pipelineArtifactsSize)}`,
     );
   });
 

locale/gitlab.pot

@@ -28156,7 +28156,7 @@ msgstr ""
 msgid "UsageQuota|Artifacts"
 msgstr ""
 
-msgid "UsageQuota|Build Artifacts"
+msgid "UsageQuota|Artifacts is a sum of build and pipeline artifacts."
 msgstr ""
 
 msgid "UsageQuota|Buy additional minutes"