fix: format values for disk space health indicators in HealthDetails component

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.spec.ts

@@ -40,11 +40,21 @@ describe('HealthDetails', () => {
  exists: true,
  },
  },
+ diskSpace2: {
+ status: 'UP',
+ details: {
+ total: 1024,
+ free: 2048,
+ threshold: 4096,
+ exists: false,
+ },
+ },
  },
  };
 
  render(HealthDetails, {
  props: {
+ name: 'Name',
  health: healthMock,
  },
  });
@@ -67,6 +77,34 @@ describe('HealthDetails', () => {
  ).toHaveTextContent(status);
  },
  );
+
+ it('should format diskSpace details correctly', async () => {
+ const diskSpaceInfo = await screen.findByRole('definition', {
+ name: 'diskSpace2',
+ });
+
+ // Assert pretty-printed numbers via pretty-bytes and other primitive values
+ const dsi = within(diskSpaceInfo);
+ // total: 994662584320 bytes -> 995 GB (rounded)
+ expect(
+ await dsi.findByRole('definition', { name: 'total' }),
+ ).toHaveTextContent('1.02 kB');
+
+ // free: 300063879168 bytes -> 300 GB (rounded)
+ expect(
+ await dsi.findByRole('definition', { name: 'free' }),
+ ).toHaveTextContent('2.05 kB');
+
+ // threshold: 10485760 bytes -> 10 MB
+ expect(
+ await dsi.findByRole('definition', { name: 'threshold' }),
+ ).toHaveTextContent('4.1 kB');
+
+ // exists: boolean unchanged
+ expect(
+ await dsi.findByRole('definition', { name: 'exists' }),
+ ).toHaveTextContent('false');
+ });
  });
 
  describe('Health .components', () => {

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue

@@ -19,33 +19,42 @@
  class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
  :class="{ 'bg-white': index % 2 === 0, 'bg-gray-50': index % 2 !== 0 }"
  >
- <dt
- :id="'health-detail__' + name"
- class="text-sm font-medium text-gray-500"
- >
+ <dt :id="`health-${id}__${name}`" class="text-sm font-medium text-gray-500">
  {{ name }}
  </dt>
  <dd
  class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"
- :aria-labelledby="'health-detail__' + name"
+ :aria-labelledby="`health-${id}__` + name"
  >
  <sba-status-badge v-if="health.status" :status="health.status" />
 
  <dl v-if="details && details.length > 0" class="grid grid-cols-2 mt-2">
  <template v-for="detail in details" :key="detail.name">
- <dt class="font-medium" v-text="detail.name" />
+ <dt
+ class="font-medium"
+ :id="`health-detail-${id}__${detail.name}`"
+ v-text="detail.name"
+ />
  <dd
- v-if="name === 'diskSpace' && typeof detail.value === 'number'"
+ v-if="
+ name.toLowerCase().startsWith('diskspace') &&
+ typeof detail.value === 'number'
+ "
+ :aria-labelledby="`health-detail-${id}__${detail.name}`"
  v-text="prettyBytes(detail.value)"
  />
- <dd v-else-if="typeof detail.value === 'object'">
+ <dd
+ v-else-if="typeof detail.value === 'object'"
+ :aria-labelledby="`health-detail-${id}__${detail.name}`"
+ >
  <pre
  class="break-words whitespace-pre-wrap"
- v-text="toJson(detail.value)"
+ v-text="JSON.stringify(detail.value)"
  />
  </dd>
  <dd
  v-else
+ :aria-labelledby="`health-detail-${id}__${detail.name}`"
  class="break-words whitespace-pre-wrap"
  v-text="detail.value"
  />
@@ -63,52 +72,41 @@
  />
 </template>
 
-<script>
+<script lang="ts" setup>
 import prettyBytes from 'pretty-bytes';
+import { computed, useId } from 'vue';
+
+const id = useId();
 
 const isChildHealth = (value) => {
  return value !== null && typeof value === 'object' && 'status' in value;
 };
 
-export default {
- name: 'HealthDetails',
- props: {
- name: {
- type: String,
- required: true,
- },
- health: {
- type: Object,
- required: true,
- },
- index: {
- type: Number,
- default: 0,
- },
- },
- computed: {
- details() {
- if (this.health.details || this.health.components) {
- return Object.entries(this.health.details || this.health.components)
- .filter(([, value]) => !isChildHealth(value))
- .map(([name, value]) => ({ name, value }));
- }
- return [];
- },
- childHealth() {
- if (this.health.details || this.health.components) {
- return Object.entries(this.health.details || this.health.components)
- .filter(([, value]) => isChildHealth(value))
- .map(([name, value]) => ({ name, value }));
- }
- return [];
- },
- },
- methods: {
- prettyBytes,
- toJson(obj) {
- return JSON.stringify(obj, null, 2);
- },
- },
-};
+const {
+ health,
+ name,
+ index = 0,
+} = defineProps<{
+ name: string;
+ health: Record<string, any>;
+ index?: number;
+}>();
+
+const details = computed(() => {
+ if (health.details || health.components) {
+ return Object.entries(health.details || health.components)
+ .filter(([, value]) => !isChildHealth(value))
+ .map(([name, value]) => ({ name, value }));
+ }
+ return [];
+});
+
+const childHealth = computed(() => {
+ if (health.details || health.components) {
+ return Object.entries(health.details || health.components)
+ .filter(([, value]) => isChildHealth(value))
+ .map(([name, value]) => ({ name, value }));
+ }
+ return [];
+});
 </script>