when clicking row item, should print raw json

frontend/angular.json

@@ -23,14 +23,14 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "allowedCommonJsDependencies": ["chart.js"],
+            "allowedCommonJsDependencies": ["chart.js", "highlight.js"],
             "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss",
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/@panva/oauth4webapi/build/index.js"

frontend/package.json

@@ -36,6 +36,7 @@
     "moment": "^2.29.4",
     "ng2-charts": "^2.3.0",
     "ngx-dropzone": "^3.1.0",
+    "ngx-highlightjs": "^7.0.1",
     "rxjs": "~6.5.4",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.8"

frontend/src/app/app.module.ts

@@ -24,6 +24,7 @@ import {FastenApiService} from './services/fasten-api.service';
 import {Router} from '@angular/router';
 import { SourceDetailComponent } from './pages/source-detail/source-detail.component';
 import {ResourceListComponent} from './components/resource-list/resource-list.component';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 @NgModule({
   declarations: [
@@ -46,7 +47,8 @@ import {ResourceListComponent} from './components/resource-list/resource-list.co
     HttpClientModule,
     NgbModule,
     ChartsModule,
-    NgxDropzoneModule
+    NgxDropzoneModule,
+    HighlightModule
   ],
   providers: [
     {
@@ -55,7 +57,17 @@ import {ResourceListComponent} from './components/resource-list/resource-list.co
       multi: true,
       deps: [FastenApiService, Router]
     },
-    CanActivateAuthGuard
+    CanActivateAuthGuard,
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        coreLibraryLoader: () => import('highlight.js/lib/core'),
+        lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
+        languages: {
+          json: () => import('highlight.js/lib/languages/json')
+        },
+      }
+    }
   ],
   bootstrap: [AppComponent]
 })

frontend/src/app/pages/resource-detail/resource-detail.component.html

@@ -1,6 +1,7 @@
 <div class="az-content az-content-app pd-b-0">
   <div class="container">
     <div class="az-content-body">
+      <pre *ngIf="resource"><code  [highlight]="resource.payload | json"></code></pre>
 
     </div><!-- az-content-body -->
   </div>

frontend/src/styles.scss

@@ -231,3 +231,4 @@
 @import '~@swimlane/ngx-datatable/themes/bootstrap.css';
 @import '~@swimlane/ngx-datatable/assets/icons.css';
 
+@import '~highlight.js/styles/github.css';

frontend/yarn.lock

@@ -4037,6 +4037,16 @@ hdr-histogram-percentiles-obj@^3.0.0:
   resolved "https://registry.yarnpkg.com/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz#9409f4de0c2dda78e61de2d9d78b1e9f3cba283c"
   integrity sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==
 
+highlight.js@^11.5.1:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
+  integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
+
+highlightjs-line-numbers.js@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/highlightjs-line-numbers.js/-/highlightjs-line-numbers.js-2.8.0.tgz#479ea8cff0c31fadc1578a66fa03e38b801f9ca6"
+  integrity sha512-TEf1gw0c8mb8nan0QwliqS7obT4cpUd9hzsGzsZLweteNnWea/VIqy5/aQqsa5wnz9lnvmtAkS1ZtDTjB/goYQ==
+
 hosted-git-info@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-5.1.0.tgz#9786123f92ef3627f24abc3f15c20d98ec4a6594"
@@ -5193,6 +5203,15 @@ ngx-dropzone@^3.1.0:
   dependencies:
     tslib "^2.0.0"
 
+ngx-highlightjs@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/ngx-highlightjs/-/ngx-highlightjs-7.0.1.tgz#52bef4e26a9707893cc2bbee20fbaff2a5f9a77a"
+  integrity sha512-ZmA6RUBRB0tqAlsGYR21kCna9ror51FZwpV7Y94yCuyVv24u5bhg9nfLnFPDBJJ1u1vfNKV1R1TNTXUm/SiRjw==
+  dependencies:
+    highlight.js "^11.5.1"
+    highlightjs-line-numbers.js "^2.8.0"
+    tslib "^2.0.0"
+
 nice-napi@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nice-napi/-/nice-napi-1.0.2.tgz#dc0ab5a1eac20ce548802fc5686eaa6bc654927b"