feat: 【告警策略】数据预览格式化

bkmonitor/webpack/src/monitor-pc/pages/strategy-config/strategy-config-set/strategy-view/strategy-view-log.vue

@@ -63,17 +63,25 @@
       :width="700"
       :title="detailTitle"
     >
-      <pre class="log-content">
-        {{ logDetail }}
-      </pre>
+        <JsonViewer
+          class="log-content"
+          :preview-mode="true"
+          :value="logDetail"
+        />
     </bk-dialog>
   </div>
 </template>
 <script lang="ts">
 import dayjs from 'dayjs';
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
+import JsonViewer from 'vue-json-viewer';
 
-@Component({ name: 'strategy-view-log' })
+@Component({
+  name: 'strategy-view-log',
+  components: {
+    JsonViewer
+  }
+ })
 export default class StrategyViewLog extends Vue {
   @Prop({ default: () => [], type: Array }) private readonly data!: any[];
   @Prop({ default: false, type: Boolean }) private readonly isLast!: boolean;
@@ -104,7 +112,14 @@ export default class StrategyViewLog extends Vue {
     }
   }
   handleShowDetai(row) {
-    this.logDetail = row.content || row['event.content'];
+    const content = row.content || row['event.content']
+    this.logDetail = (() => {
+      try {
+        return JSON.parse(content);
+      } catch {
+        return content;
+      }
+    })();
     this.showLogDetail = true;
   }
 
@@ -135,11 +150,19 @@ export default class StrategyViewLog extends Vue {
 
   &-content {
     height: 380px;
-    padding: 15px 20px;
+    padding: 15px 20px;  
     overflow: auto;
     word-break: break-all;
     background: #f5f6fa;
     border-radius: 2px;
+
+    &.jv-light {
+      background: #f5f6fa;
+    }
+
+    :deep(.jv-code) {
+      padding: 0;
+    }
   }
 }