feat(#5320): Add 'percent' as available unit in the metrics view

cdprete · cdprete · commit 8b3597e151ef · 2026-05-05T08:44:58.000+02:00
diff --git a/spring-boot-admin-server-ui/src/main/frontend/composables/useNumberFormatter.ts b/spring-boot-admin-server-ui/src/main/frontend/composables/useNumberFormatter.ts
@@ -0,0 +1,28 @@
+export const useNumberFormatter = (options?: Intl.NumberFormatOptions) => {
+  const userLocale = navigator.languages
+    ? navigator.languages[0]
+    : navigator.language;
+
+  const numberFormat = new Intl.NumberFormat(userLocale, options);
+
+  return {
+    formatNumber: (value: number) => {
+      return numberFormat.format(value);
+    },
+  };
+};
+
+export const usePercentFormatter = (options?: Intl.NumberFormatOptions) => {
+  const { formatNumber } = useNumberFormatter({
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+    ...options,
+    style: 'percent',
+  });
+
+  return {
+    formatPercent: (value: number) => {
+      return formatNumber(value);
+    },
+  };
+};
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
@@ -19,6 +19,7 @@
     "deleted": "Gelöscht",
     "duration": "Dauer",
     "epoch_time": "Epoch Zeit",
+    "percent": "Prozent",
     "event": "Ereignis",
     "ever": "immer",
     "executing": "Wird ausgeführt...",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
@@ -24,6 +24,7 @@
     "deleted": "Deleted",
     "duration": "Duration",
     "epoch_time": "Epoch Time",
+    "percent": "Percent",
     "event": "Event",
     "ever": "ever",
     "execute": "Execute",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.es.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.es.json
@@ -33,6 +33,7 @@
     "integer": "Entero",
     "milliseconds": "Milisegundos",
     "minutes": "{count} minuto | {count} minutos",
+    "percent": "por ciento",
     "name": "Nombre",
     "operations": "Operaciones",
     "save": "Guardar",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.fr.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.fr.json
@@ -28,6 +28,7 @@
     "integer": "Entier",
     "milliseconds": "Millisecondes",
     "minutes": "{count} minute | {count} minutes",
+    "percent": "pour cent",
     "name": "Nom",
     "operations": "Opérations",
     "save": "Sauvegarder",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.is.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.is.json
@@ -28,6 +28,7 @@
     "integer": "Integer",
     "milliseconds": "Millisekúndar",
     "minutes": "{count} Mínúta | {count} Mínútur",
+    "percent": "prósent",
     "name": "Nafn",
     "operations": "Rökaðgerðir",
     "save": "Vista",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.ko.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.ko.json
@@ -43,6 +43,7 @@
     },
     "milliseconds": "Milliseconds",
     "minutes": "{count} 분 | {count} 분",
+    "percent": "퍼센트",
     "name": "이름",
     "operations": "Operations",
     "save": "저장",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.pt-BR.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.pt-BR.json
@@ -28,6 +28,7 @@
     "integer": "Integer",
     "milliseconds": "Milissegundos",
     "minutes": "{count} minuto | {count} minutos",
+    "percent": "por cento",
     "name": "Nome",
     "operations": "Operações",
     "save": "Salvar",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.ru.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.ru.json
@@ -28,6 +28,7 @@
     "integer": "Integer",
     "milliseconds": "Мс.",
     "minutes": "{count} мин. | {count} мин.",
+    "percent": "процент",
     "name": "Имя",
     "operations": "Операции",
     "save": "Сохранить",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.zh-CN.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.zh-CN.json
@@ -28,6 +28,7 @@
     "integer": "整型",
     "milliseconds": "毫秒",
     "minutes": "{count} 分钟 | {count} 分钟",
+    "percent": "百分之",
     "name": "名称",
     "operations": "操作",
     "save": "保存",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.zh-TW.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.zh-TW.json
@@ -24,6 +24,7 @@
     "deleted": "已刪除",
     "duration": "持續時間",
     "epoch_time": "Epoch 時間",
+    "percent": "百分之",
     "event": "事件",
     "ever": "任何時候",
     "execute": "執行",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/metrics/metric.spec.ts b/spring-boot-admin-server-ui/src/main/frontend/views/instances/metrics/metric.spec.ts
@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, it } from 'vitest';
+
+import i18n from '@/i18n/index';
+import { applications } from '@/mocks/applications/data';
+import Application from '@/services/application';
+import Metric from '@/views/instances/metrics/metric.vue';
+
+describe('Metric', () => {
+  it('renders the metric with percent format', () => {
+    const metricName = 'percent.test';
+    const statisticType = 'VALUE';
+    const application = new Application(applications[0]);
+    const instance = application.instances[0];
+
+    render(Metric, {
+      global: {
+        plugins: [i18n],
+        stubs: {
+          FontAwesomeIcon: true,
+          /*
+            To prevent:
+            [Vue warn]: Wrong type passed as event handler to onClass - did you forget @ or : in front of your prop?
+            Expected function or array of functions, received type string.
+              at <SbaButton class="border-none sm:m-1 bg-transparent! self-end" title=null size="xs"  ... >
+              at <SbaIconButton icon="trash" class="self-end" onClick=fn >
+              at <Anonymous header-sticks-below="#navigation" title="percent.test" >
+              at <Metric metricName="percent.test" instance= Instance { ... } statisticTypes= { VALUE: 'percent' }  ... >
+              at <VTUROOT>
+           */
+          SbaButton: {
+            inheritAttrs: false,
+            template: '<button><slot /></button>',
+          },
+        },
+      },
+      props: {
+        metricName,
+        instance,
+        statisticTypes: {
+          [statisticType]: 'percent',
+        },
+      },
+      data() {
+        return {
+          statistics: [statisticType],
+          measurements: [[{ statistic: statisticType, value: 0.1234 }]],
+        };
+      },
+    });
+
+    expect(screen.getByText('12.34%')).toBeInTheDocument();
+  });
+});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/metrics/metric.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/metrics/metric.vue
@@ -61,6 +61,10 @@
                 :value="MetricValueType.EPOCH_TIME"
                 v-text="$t('term.epoch_time')"
               />
+              <option
+                :value="MetricValueType.PERCENT"
+                v-text="$t('term.percent')"
+              />
             </select>
           </div>
         </div>
@@ -122,11 +126,13 @@ import SbaIconButton from '@/components/sba-icon-button.vue';
 import SbaPanel from '@/components/sba-panel.vue';
 
 import { useDateTimeFormatter } from '@/composables/useDateTimeFormatter';
+import { usePercentFormatter } from '@/composables/useNumberFormatter';
 import subscribing from '@/mixins/subscribing';
 import Instance from '@/services/instance';
 import { concatMap, delay, from, retryWhen, timer } from '@/utils/rxjs';
 
 const { formatDateTime } = useDateTimeFormatter();
+const { formatPercent } = usePercentFormatter();
 
 enum MetricValueType {
   INTEGER = 'integer',
@@ -135,6 +141,7 @@ enum MetricValueType {
   MILLIS = 'millis',
   BYTES = 'bytes',
   EPOCH_TIME = 'epoch_time',
+  PERCENT = 'percent',
 }
 
 enum BaseUnit {
@@ -258,6 +265,8 @@ export default {
           return formatDateTime(
             new Date(toMillis(measurement.value, this.baseUnit)),
           );
+        case MetricValueType.PERCENT:
+          return formatPercent(measurement.value);
         default:
           return measurement.value;
       }
