fix(#2628): add breaking to health details panel (#2629)

codecentric · Aug 4, 2023 · 648261e · 648261e
1 parent cd2cb83
commit 648261e
Showing 1 changed file with 37 additions and 36 deletions.
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue
@@ -15,45 +15,46 @@
   -->
 
 <template>
-  <div>
-    <dl
-      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 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">
-        <sba-status-badge :status="health.status" />
+  <dl
+    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 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">
+      <sba-status-badge :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" />
-            <dd
-              v-if="name === 'diskSpace'"
-              v-text="
-                typeof detail.value === 'number'
-                  ? prettyBytes(detail.value)
-                  : detail.value
-              "
+      <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" />
+          <dd
+            v-if="name === 'diskSpace'"
+            v-text="
+              typeof detail.value === 'number'
+                ? prettyBytes(detail.value)
+                : detail.value
+            "
+          />
+          <dd v-else-if="typeof detail.value === 'object'">
+            <pre
+              class="break-words whitespace-pre-wrap"
+              v-text="toJson(detail.value)"
             />
-            <dd v-else-if="typeof detail.value === 'object'">
-              <pre class="is-breakable" v-text="toJson(detail.value)" />
-            </dd>
-            <dd v-else class="is-breakable" v-text="detail.value" />
-          </template>
-        </dl>
-      </dd>
-    </dl>
+          </dd>
+          <dd v-else class="break-words whitespace-pre-wrap" v-text="detail.value" />
+        </template>
+      </dl>
+    </dd>
+  </dl>
 
-    <health-details
-      v-for="(child, idx) in childHealth"
-      :key="child.name"
-      :index="idx + 1"
-      :name="child.name"
-      :health="child.value"
-    />
-  </div>
+  <health-details
+    v-for="(child, idx) in childHealth"
+    :key="child.name"
+    :index="idx + 1"
+    :name="child.name"
+    :health="child.value"
+  />
 </template>
 
 <script>