codecentric · SteKoe · May 5, 2026 · May 1, 2026 · May 5, 2026
@@ -19,7 +19,8 @@
     class="border-none sm:m-1 bg-transparent!"
     :title="title"
     size="xs"
-    v-on="$attrs"
+    v-bind="$attrs"
+    @click="$emit('click', $event)"
   >
     <font-awesome-icon :icon="icon" :size="size" :class="iconClass" />
   </sba-button>
@@ -49,6 +50,7 @@ export default {
       default: null,
     },
   },
+  emits: ['click'],
 };
 </script>
 

@@ -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);
+    },
+  };
+};
@@ -19,6 +19,7 @@
     "deleted": "Gelöscht",
     "duration": "Dauer",
     "epoch_time": "Epoch Zeit",
+    "percent": "Prozent",
     "event": "Ereignis",
     "ever": "immer",
     "executing": "Wird ausgeführt...",

@@ -24,6 +24,7 @@
     "deleted": "Deleted",
     "duration": "Duration",
     "epoch_time": "Epoch Time",
+    "percent": "Percent",
     "event": "Event",
     "ever": "ever",
     "execute": "Execute",

@@ -33,6 +33,7 @@
     "integer": "Entero",
     "milliseconds": "Milisegundos",
     "minutes": "{count} minuto | {count} minutos",
+    "percent": "por ciento",
     "name": "Nombre",
     "operations": "Operaciones",
     "save": "Guardar",

@@ -28,6 +28,7 @@
     "integer": "Entier",
     "milliseconds": "Millisecondes",
     "minutes": "{count} minute | {count} minutes",
+    "percent": "pour cent",
     "name": "Nom",
     "operations": "Opérations",
     "save": "Sauvegarder",

@@ -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",

@@ -43,6 +43,7 @@
     },
     "milliseconds": "Milliseconds",
     "minutes": "{count} 분 | {count} 분",
+    "percent": "퍼센트",
     "name": "이름",
     "operations": "Operations",
     "save": "저장",

@@ -28,6 +28,7 @@
     "integer": "Integer",
     "milliseconds": "Milissegundos",
     "minutes": "{count} minuto | {count} minutos",
+    "percent": "por cento",
     "name": "Nome",
     "operations": "Operações",
     "save": "Salvar",

@@ -28,6 +28,7 @@
     "integer": "Integer",
     "milliseconds": "Мс.",
     "minutes": "{count} мин. | {count} мин.",
+    "percent": "процент",
     "name": "Имя",
     "operations": "Операции",
     "save": "Сохранить",

@@ -28,6 +28,7 @@
     "integer": "整型",
     "milliseconds": "毫秒",
     "minutes": "{count} 分钟 | {count} 分钟",
+    "percent": "百分之",
     "name": "名称",
     "operations": "操作",
     "save": "保存",

@@ -24,6 +24,7 @@
     "deleted": "已刪除",
     "duration": "持續時間",
     "epoch_time": "Epoch 時間",
+    "percent": "百分之",
     "event": "事件",
     "ever": "任何時候",
     "execute": "執行",

@@ -0,0 +1,40 @@
+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,
+        },
+      },
+      props: {
+        metricName,
+        instance,
+        statisticTypes: {
+          [statisticType]: 'percent',
+        },
+      },
+      data() {
+        return {
+          statistics: [statisticType],
+          measurements: [[{ statistic: statisticType, value: 0.1234 }]],
+        };
+      },
+    });
+
+    expect(screen.getByText('12.34%')).toBeInTheDocument();
+  });
+});
@@ -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;
       }