webui: Render hex strings using IdentifierComponent in json-tree

webui/src/app/json-tree/json-tree.component.html

@@ -91,9 +91,14 @@
         }"
     >
         <!-- Primitive value or empty, but not object -->
-        <ng-container *ngIf="(isPrimitive() || isEmpty()) && !isObject() && hasAssignedValue()">{{
-            value + ''
-        }}</ng-container>
+        <ng-container *ngIf="(isPrimitive() || isEmpty()) && !isObject() && hasAssignedValue()">
+            <ng-container *ngIf="isHexString(); else plainValue">
+                <app-identifier [hexValue]="value" [defaultHexFormat]="true" styleClass="word-break-all"></app-identifier>
+            </ng-container>
+            <ng-template #plainValue>
+                {{ value + '' }}
+            </ng-template>
+        </ng-container>
         <!-- Not assigned value yet -->
         <ng-container *ngIf="!hasAssignedValue()"><i class="fa fa-spinner fa-spin"></i></ng-container>
         <!-- Complex, but recursion level reached -->

webui/src/app/json-tree/json-tree.component.spec.ts

@@ -763,4 +763,34 @@ describe('JsonTreeComponent-ExternalTemplates', () => {
         const content = nativeElement.textContent
         expect(content).toBe('biz')
     })
+
+
+    describe('hex to ascii', () => {
+        it('should correctly identify hex strings', () => {
+            component.value = null
+            expect(component.isHexString()).toBeFalse()
+
+            component.value = '123'
+            expect(component.isHexString()).toBeFalse()
+
+            component.value = '1234'
+            expect(component.isHexString()).toBeFalse()
+
+            component.value = '0x1234'
+            expect(component.isHexString()).toBeTrue()
+
+            component.value = 'abcdef'
+            expect(component.isHexString()).toBeTrue()
+
+            // Hex string from kea dhcp
+            component.value = '00020000000005830100000038383A32383A66623A35663A38353A32630000'
+            expect(component.isHexString()).toBeTrue()
+
+            // Decimal looking string should not be considered hex unless prefixed
+            component.value = '1928374612341234'
+            expect(component.isHexString()).toBeFalse()
+        })
+
+
+    })
 })

webui/src/app/json-tree/json-tree.component.ts

@@ -2,6 +2,7 @@ import { KeyValue, NgIf, NgClass, NgTemplateOutlet, NgFor, SlicePipe, KeyValuePi
 import { Component, Input, TemplateRef } from '@angular/core'
 import { Paginator } from 'primeng/paginator'
 import { InputText } from 'primeng/inputtext'
+import { IdentifierComponent } from '../identifier/identifier.component'
 
 /**
  * Typing for page changed event of PrimeNG navigation.
@@ -31,7 +32,7 @@ interface PageChangedEvent {
     selector: 'app-json-tree',
     templateUrl: './json-tree.component.html',
     styleUrls: ['./json-tree.component.sass'],
-    imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, Paginator, InputText, SlicePipe, KeyValuePipe],
+    imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, Paginator, InputText, SlicePipe, KeyValuePipe, IdentifierComponent],
 })
 export class JsonTreeComponent {
     private _value: any = null
@@ -616,4 +617,23 @@ export class JsonTreeComponent {
     areChildrenLoading() {
         return this._childrenLoading
     }
+
+    /**
+     * Determines whether the evaluated value is a hexadecimal string.
+     *
+     * It checks if it contains only hexadecimal characters, its length is
+     * even and greater than 0. The value can contain an optional '0x' prefix.
+     */
+    isHexString(): boolean {
+        if (!this.isString()) {
+            return false
+        }
+        const hex = this._value.replace(/^0x/i, '')
+        // Exclude strings that are just decimal numbers unless they start with 0x
+        if (!/^0x/i.test(this._value) && /^\d+$/.test(hex)) {
+            return false
+        }
+        // At least 4 characters long (2 hex bytes) to reduce false positives
+        return hex.length > 3 && hex.length % 2 === 0 && /^[0-9a-fA-F]+$/.test(hex)
+    }
 }