update

src/components/ServiceConfigurationStatusViewer.vue

@@ -1,15 +1,18 @@
 <template>
 <div class="flex flex-row flex-wrap p-5 bg-white">
-  <div v-for="group in statuses" :key="group.name" class="p-1" style="min-width: 25%;">
+  <div v-for="group in statuses" :key="group.name" class="p-1" style="min-width: 20%;">
     <fieldset class="border h-full">
       <legend class="px-3">{{ group.name }}&nbsp;</legend>
       <table class="w-full">
         <tr v-for="item in group.items" :key="item.key">
-          <td class="py-1 px-2">{{ item.name }} : </td>
+          <td class="py-1 px-2">{{ item.name }} </td>
           <td class="py-1 px-2">
             <template v-if="isBoolean(item.value)">
               <BulbOutlined class="align-text-bottom" :class="{'text-green-400':item.value}"/>
             </template>
+            <template v-else-if="isObject(item.value)">
+              <vue-json-pretty :data="item.value" :deep="1" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18"></vue-json-pretty>
+            </template>
             <span v-else>{{ item.value }}</span>
           </td>
         </tr>
@@ -22,6 +25,9 @@
 import ApiClient from '@/utils/ApiClient';
 import { BulbOutlined } from '@ant-design/icons-vue'
 import { onUnmounted, watch, ref } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+
 /** @var {Object} */
 const props = defineProps({
     serviceKey : String,
@@ -83,4 +89,14 @@ async function refreshServiceStatusList() {
 function isBoolean( value ) {
     return 'boolean' === typeof(value);
 }
+
+// is object
+function isObject(value) {
+    return value && typeof value === 'object' && !Array.isArray(value);
+}
+
+// format object
+function formatObject(value) {
+    return JSON.stringify(value, null, 2);
+}
 </script>