1 files changed, 10 insertions, 22 deletions
diff --git a/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue b/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
index 66a01867ec0..e9683924ff8 100644
--- a/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
+++ b/app/assets/javascripts/usage_quotas/storage/components/usage_graph.vue
@@ -1,17 +1,10 @@
 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { PROJECT_STORAGE_TYPES } from '../constants';
 import { descendingStorageUsageSort } from '../utils';
 
 export default {
-  components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
   mixins: [glFeatureFlagMixin()],
   props: {
     rootStorageStatistics: {
@@ -36,7 +29,6 @@ export default {
         wikiSize,
         snippetsSize,
       } = this.rootStorageStatistics;
-      const artifactsSize = buildArtifactsSize + pipelineArtifactsSize;
 
       if (storageSize === 0) {
         return null;
@@ -69,9 +61,15 @@ export default {
         },
         {
           id: 'buildArtifactsSize',
-          style: this.usageStyle(this.barRatio(artifactsSize)),
-          class: 'gl-bg-data-viz-green-600',
-          size: artifactsSize,
+          style: this.usageStyle(this.barRatio(buildArtifactsSize)),
+          class: 'gl-bg-data-viz-green-500',
+          size: buildArtifactsSize,
+        },
+        {
+          id: 'pipelineArtifactsSize',
+          style: this.usageStyle(this.barRatio(pipelineArtifactsSize)),
+          class: 'gl-bg-data-viz-green-800',
+          size: pipelineArtifactsSize,
         },
         {
           id: 'wikiSize',
@@ -92,11 +90,10 @@ export default {
           const storageTypeExtraData = PROJECT_STORAGE_TYPES.find(
             (type) => storageType.id === type.id,
           );
-          const { name, tooltip } = storageTypeExtraData || {};
+          const name = storageTypeExtraData?.name;
 
           return {
             name,
-            tooltip,
             ...storageType,
           };
         });
@@ -148,15 +145,6 @@ 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>