Integration commit for GlSingleStat

This commit handles updating the two occurances
of the GlSingleStat component - to match the new
specification.

app/assets/javascripts/monitoring/components/charts/single_stat.vue

@@ -45,12 +45,18 @@ export default {
       }
 
       if (this.graphData?.maxValue) {
-        formatter = getFormatter(SUPPORTED_FORMATS.percent);
-        return formatter(this.queryResult / Number(this.graphData.maxValue), defaultPrecision);
+        formatter = getFormatter(SUPPORTED_FORMATS.number);
+        return formatter(
+          (this.queryResult / Number(this.graphData.maxValue)) * 100,
+          defaultPrecision,
+        );
       }
 
       formatter = getFormatter(SUPPORTED_FORMATS.number);
-      return `${formatter(this.queryResult, defaultPrecision)}${this.queryInfo.unit ?? ''}`;
+      return `${formatter(this.queryResult, defaultPrecision)}`;
+    },
+    unit() {
+      return this.graphData?.maxValue ? '%' : this.queryInfo.unit;
     },
     graphTitle() {
       return this.queryInfo.label;
@@ -60,6 +66,6 @@ export default {
 </script>
 <template>
   <div>
-    <gl-single-stat :value="statValue" :title="graphTitle" variant="success" />
+    <gl-single-stat :value="statValue" :title="graphTitle" :unit="unit" variant="success" />
   </div>
 </template>

ee/app/assets/javascripts/threat_monitoring/components/statistics_summary.vue

@@ -22,14 +22,14 @@ export default {
         {
           key: 'anomalousTraffic',
           title: anomalous.title,
-          value: `${Math.round(anomalous.value * 100)}%`,
+          value: `${Math.round(anomalous.value * 100)}`,
+          unit: '%',
           variant: 'warning',
         },
         {
           key: 'totalTraffic',
           title: nominal.title,
           value: engineeringNotation(nominal.value),
-          variant: 'secondary',
         },
       ];
     },

ee/spec/frontend/threat_monitoring/components/__snapshots__/statistics_summary_spec.js.snap

@@ -4,7 +4,8 @@ exports[`StatisticsSummary component renders the anomalous traffic percentage 1`
 <gl-single-stat-stub
   class="col-sm-6 col-md-4 col-lg-3"
   title="Anomalous"
-  value="20%"
+  unit="%"
+  value="20"
   variant="warning"
 />
 `;
@@ -14,6 +15,6 @@ exports[`StatisticsSummary component renders the nominal traffic count 1`] = `
   class="col-sm-6 col-md-4 col-lg-3"
   title="Total"
   value="100"
-  variant="secondary"
+  variant="muted"
 />
 `;

package.json

@@ -45,7 +45,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.178.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "25.12.2",
+    "@gitlab/ui": "26.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-4",
     "@rails/ujs": "^6.0.3-4",

spec/frontend/monitoring/components/charts/single_stat_spec.js

@@ -27,8 +27,12 @@ describe('Single Stat Chart component', () => {
 
   describe('computed', () => {
     describe('statValue', () => {
-      it('should interpolate the value and unit props', () => {
-        expect(findChart().props('value')).toBe('1.00MB');
+      it('should display the correct value', () => {
+        expect(findChart().props('value')).toBe('1.00');
+      });
+
+      it('should display the correct value unit', () => {
+        expect(findChart().props('unit')).toBe('MB');
       });
 
       it('should change the value representation to a percentile one', () => {
@@ -36,7 +40,8 @@ describe('Single Stat Chart component', () => {
           graphData: singleStatGraphData({ max_value: 120 }, { value: 91 }),
         });
 
-        expect(findChart().props('value')).toContain('75.83%');
+        expect(findChart().props('value')).toBe('75.83');
+        expect(findChart().props('unit')).toBe('%');
       });
 
       it('should display NaN for non numeric maxValue values', () => {

yarn.lock

@@ -876,10 +876,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@25.12.2":
-  version "25.12.2"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-25.12.2.tgz#ad47680da4b067140e8d48a04e807352660b9cca"
-  integrity sha512-y+uks00z+4kivTYu+l2mrjYT3nfnBS+xKWIUQ9xrkZVCC069V+DffPK+jVRzzhQ67hOMP5LVdaUEOcUplgFvGA==
+"@gitlab/ui@26.0.0":
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-26.0.0.tgz#7fa93726478042b1570b2bd3b909217a31177b36"
+  integrity sha512-X22mc3qVBAkfAZ2DRqbPnJ6upzjWlzGLWmHR4l+3MhOBbMBi4EXIuF19nixC5u8bjCMGkK3wMIiZj3C3HsmQ7A==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"