update

src/components/ServiceConfigurationStatusViewer.vue

@@ -1,25 +1,27 @@
 <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="{ minWidth: group.minWidth } ">
-    <fieldset class="border " >
-      <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">
-            <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" :style="{ maxHeight: '20vh', overflowY: 'auto' }"></vue-json-pretty>
-            </template>
-            <span v-else>{{ item.value }}</span>
-          </td>
-        </tr>
-      </table>
-    </fieldset>
+  <div class="flex flex-row flex-wrap p-5 bg-white">
+    <div v-for="group in statuses" :key="group.name" class="p-1" :style="{ minWidth: group.minWidth }">
+      <fieldset class="border ">
+        <legend class="px-3">{{ group.name }}&nbsp;</legend>
+        <table class="">
+          <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">
+              <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"
+                  :style="{ maxHeight: '20vh', overflowY: 'auto' }"></vue-json-pretty>
+              </template>
+              <textarea v-else class="wrap-text max-height" :rows="15" :cols="80"  readonly v-model=item.value></textarea>
+            </td>
+          </tr>
+        </table>
+      </fieldset>
+    </div>
   </div>
-</div>
 </template>
 <script setup>
 import ApiClient from '@/utils/ApiClient';
@@ -30,7 +32,7 @@ import 'vue-json-pretty/lib/styles.css';
 
 /** @var {Object} */
 const props = defineProps({
-    serviceKey : String,
+  serviceKey: String,
 });
 /** @var {Array} */
 const statuses = ref([]);
@@ -40,63 +42,79 @@ let statusRefreshTimer = null;
 watch(() => props.serviceKey, handleServiceKeyChange);
 // on unmounted
 onUnmounted(() => {
-    if ( null !== statusRefreshTimer ) {
-        clearTimeout(statusRefreshTimer);
-        statusRefreshTimer = false;
-    }
+  if (null !== statusRefreshTimer) {
+    clearTimeout(statusRefreshTimer);
+    statusRefreshTimer = false;
+  }
 });
 
 // handle 
 async function handleServiceKeyChange() {
-    if ( null !== statusRefreshTimer ) {
-        clearTimeout(statusRefreshTimer);
-        statusRefreshTimer = null;
-    }
-    if ( null === props.serviceKey ) {
-        return ;
-    }
-    await refreshServiceStatusList();
+  if (null !== statusRefreshTimer) {
+    clearTimeout(statusRefreshTimer);
+    statusRefreshTimer = null;
+  }
+  if (null === props.serviceKey) {
+    return;
+  }
+  await refreshServiceStatusList();
 }
 
 // refresh service status list
 async function refreshServiceStatusList() {
-    try {
-        let client = ApiClient.getClient();
-        let list = await client.call('service-config/service-status-list', {serviceKey:props.serviceKey});
-        
-        statuses.value = [];
-        for ( var item of list ) {
-            let gname = item.group;
-            let group = statuses.value.find(g => g.name == item.group);
-            if ( undefined === group ) {
-                group = {name:gname, order:item.order, items:[], minWidth: item.minWidth};
-                statuses.value.push(group);
-            }
-            group.order = Math.max(group.order, item.order);
-            group.items.push(item);
-            group.items.sort((a,b) => a.order - b.order);
-        }
-        statuses.value.sort((a,b) => a.order - b.order);
-        if ( false !== statusRefreshTimer ) {
-            statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
-        }
-    } catch ( e ) {
-        console.error(e);
+  try {
+    let client = ApiClient.getClient();
+    let list = await client.call('service-config/service-status-list', { serviceKey: props.serviceKey });
+
+    statuses.value = [];
+    for (var item of list) {
+      let gname = item.group;
+      let group = statuses.value.find(g => g.name == item.group);
+      if (undefined === group) {
+        group = { name: gname, order: item.order, items: [], minWidth: item.minWidth };
+        statuses.value.push(group);
+      }
+      group.order = Math.max(group.order, item.order);
+      group.items.push(item);
+      group.items.sort((a, b) => a.order - b.order);
+    }
+    statuses.value.sort((a, b) => a.order - b.order);
+    if (false !== statusRefreshTimer) {
+      statusRefreshTimer = setTimeout(refreshServiceStatusList, 1000);
     }
+  } catch (e) {
+    console.error(e);
+  }
 }
 
 // is boolean
-function isBoolean( value ) {
-    return 'boolean' === typeof(value);
+function isBoolean(value) {
+  return 'boolean' === typeof (value);
 }
 
 // is object
 function isObject(value) {
-    return value && typeof value === 'object' ;
+  return value && typeof value === 'object';
+}
+
+// is string
+function isString(value) {
+  return 'string' === typeof (value);
 }
 
 // format object
 function formatObject(value) {
-    return JSON.stringify(value, null, 2);
+  return JSON.stringify(value, null, 2);
 }
 </script>
+<style scoped>
+.wrap-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.max-height {
+  max-height: 20vh;
+  overflow-y: auto;
+}
+</style>