update

package-lock.json

@@ -14,7 +14,9 @@
         "core-js": "^3.8.3",
         "echarts": "^5.5.1",
         "vue": "^3.2.13",
-        "vue-router": "^4.4.0"
+        "vue-json-pretty": "^2.4.0",
+        "vue-router": "^4.4.0",
+        "vue3-json-viewer": "^2.2.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -4476,6 +4478,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "license": "MIT",
+      "dependencies": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -5347,6 +5360,12 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "license": "MIT"
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -6937,6 +6956,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "license": "MIT",
+      "dependencies": {
+        "delegate": "^3.1.2"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -10413,6 +10441,12 @@
         "compute-scroll-into-view": "^1.0.20"
       }
     },
+    "node_modules/select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
+      "license": "MIT"
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -11418,6 +11452,12 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "node_modules/tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -11783,6 +11823,19 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-json-pretty": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-pretty/-/vue-json-pretty-2.4.0.tgz",
+      "integrity": "sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 5.0.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -11933,6 +11986,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vue3-json-viewer": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz",
+      "integrity": "sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A==",
+      "license": "ISC",
+      "dependencies": {
+        "clipboard": "^2.0.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
@@ -15995,6 +16060,16 @@
       "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -16622,6 +16697,11 @@
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -17819,6 +17899,14 @@
         "slash": "^3.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -20293,6 +20381,11 @@
         "compute-scroll-into-view": "^1.0.20"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -21081,6 +21174,11 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -21336,6 +21434,12 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-json-pretty": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-pretty/-/vue-json-pretty-2.4.0.tgz",
+      "integrity": "sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==",
+      "requires": {}
+    },
     "vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -21445,6 +21549,14 @@
         }
       }
     },
+    "vue3-json-viewer": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/vue3-json-viewer/-/vue3-json-viewer-2.2.2.tgz",
+      "integrity": "sha512-56l3XDGggnpwEqZieXsSMhNT4NhtO6d7zuSAxHo4i0UVxymyY2jRb7UMQOU1ztChKALZCAzX7DlgrsnEhxu77A==",
+      "requires": {
+        "clipboard": "^2.0.10"
+      }
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",

package.json

@@ -14,7 +14,9 @@
     "core-js": "^3.8.3",
     "echarts": "^5.5.1",
     "vue": "^3.2.13",
-    "vue-router": "^4.4.0"
+    "vue-json-pretty": "^2.4.0",
+    "vue-router": "^4.4.0",
+    "vue3-json-viewer": "^2.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/components/ServiceConfigurationActionLog.vue

@@ -13,7 +13,7 @@
 
     <a-modal v-model:open="reultDisplay" title="" width="90%" @ok="reultDisplay = false">
       <div class="border rounded p-3 whitespace-pre bg-white mb-3 h-0 grow overflow-y-auto" style="height:600px;">
-        <div class="">{{ JSON.stringify(props.log.response, null, 2) }}</div>
+        <vue-json-pretty :data="resultContent" :deep="1"></vue-json-pretty>
       </div>
     </a-modal>
 
@@ -25,6 +25,8 @@
 <script setup>
 import * as echarts from 'echarts';
 import { ref, nextTick, watch } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 /** @var {Object} */
 const props = defineProps({
   log: Object,
@@ -34,6 +36,7 @@ const chartContainer = ref(null);
 /** @var {Boolean} */
 const chartEnable = ref(false);
 const reultDisplay = ref(false);
+const resultContent = ref({});
 /** @var {echarts} */
 let chart = null;
 // watch log
@@ -137,6 +140,7 @@ async function handleLogChange() {
       }]
     });
   } else {
+    resultContent.value = props.log.response;
     reultDisplay.value = true;
   }
 }