improve http request parameter display

Author: marle3003

api/handler_events_test.go

@@ -77,6 +77,57 @@ func TestHandler_Events(t *testing.T) {
 						event.Time.Format(time.RFC3339Nano))))
 			},
 		},
+		{
+			name: "get http event with header parameter as string",
+			fn: func(t *testing.T, h http.Handler, sm *events.StoreManager) {
+				sm.SetStore(1, events.NewTraits().WithNamespace("http"))
+
+				r := httptest.NewRequest("get", "http://localhost/foo", nil)
+				r.Header.Set("foo", "bar")
+
+				params := &openapi.RequestParameters{Header: map[string]openapi.RequestParameterValue{}}
+				v := "bar"
+				params.Header["Foo"] = openapi.RequestParameterValue{
+					Value: "bar",
+					Raw:   &v,
+				}
+				r = r.WithContext(openapi.NewContext(context.Background(), params))
+
+				_, err := openapi.NewLogEventContext(r, false, sm, events.NewTraits().WithNamespace("http"))
+				require.NoError(t, err)
+				try.Handler(t,
+					http.MethodGet,
+					"http://foo.api/api/events?namespace=http",
+					nil,
+					"",
+					h,
+					try.HasStatusCode(200),
+					try.AssertBody(func(t *testing.T, body string) {
+						var m []map[string]any
+						require.NoError(t, json.Unmarshal([]byte(body), &m))
+						require.Equal(t, map[string]interface{}{
+							"actions":    interface{}(nil),
+							"api":        "",
+							"deprecated": false,
+							"duration":   float64(0),
+							"path":       "",
+							"request": map[string]interface{}{
+								"method": "get",
+								"parameters": []interface{}{
+									map[string]interface{}{
+										"name":  "Foo",
+										"raw":   "bar",
+										"type":  "header",
+										"value": "\"bar\"",
+									},
+								},
+								"url": "http://localhost/foo",
+							},
+							"response": map[string]interface{}{"body": "", "size": float64(0), "statusCode": float64(0)}},
+							m[0]["data"])
+					}))
+			},
+		},
 		{
 			name: "get http event with header parameter as object",
 			fn: func(t *testing.T, h http.Handler, sm *events.StoreManager) {

webui/src/components/dashboard/http/HttpEventParameters.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type PropType } from 'vue';
+import { computed, ref, type PropType } from 'vue';
 
 const props = defineProps({
     parameters: { type: Object as PropType<HttpEventParameter[]>, required: true },
@@ -15,24 +15,44 @@ const sorted = computed(() => {
         return 1
     })
 })
+const showRaw = ref<{[name: string]: boolean}>({})
+function renderJsonValue(value: any) {
+    try {
+        const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+        if (typeof parsed === 'string') {
+            return parsed;
+        }
+        return JSON.stringify(parsed, null, 2);
+    } catch {
+        return value
+    }
+}
 </script>
 
 <template>
-    <table class="table dataTable">
+    <table class="table table.sm dataTable">
         <thead>
             <tr>
-                <th scope="col" class="text-left w-25">Name</th>
-                <th scope="col" class="text-left w-10">Type</th>
-                <th scope="col" class="text-center w-10">OpenAPI</th>
-                <th scope="col" class="text-left">Value</th>
+                <th scope="col" style="width:40px"></th>
+                <th scope="col" class="text-left w-20">Name</th>
+                <th scope="col" class="text-left" style="width:100px;">Type</th>
+                <th scope="col" class="text-center" style="width: 130px;">OpenAPI</th>
+                <th scope="col" class="text-left" style="width:70%">Value</th>
             </tr>
         </thead>
         <tbody>
             <tr v-for="p in sorted">
-                <td>{{ p.name }}</td>
-                <td>{{ p.type }}</td>
-                <td class="text-center">{{ p.value ? 'yes' : 'no' }}</td>
-                <td>{{ p.value ? p.value : p.raw }}</td>
+                <td>
+                    <button class="btn btn-sm btn-outline-secondary" style="--bs-btn-padding-y: .1rem; --bs-btn-padding-x: .25rem; --bs-btn-font-size: .75rem;"
+                        @click="showRaw[p.name] = !showRaw[p.name]">
+                        <i v-if="showRaw[p.name]" class="bi bi-layout-text-sidebar" title="Show parsed value"></i>
+                        <i v-else class="bi bi-code" title="Show raw value"></i>
+                    </button>
+                </td>
+                <td class="align-middle">{{ p.name }}</td>
+                <td class="align-middle">{{ p.type }}</td>
+                <td class="text-center align-middle">{{ p.value ? 'yes' : 'no' }}</td>
+                <td class="align-middle">{{ p.value ? (showRaw[p.name] ? p.raw : renderJsonValue(p.value)) : p.raw }}</td>
             </tr>
         </tbody>
     </table>
@@ -42,4 +62,7 @@ const sorted = computed(() => {
 .w-10{
     width: 10%;
 }
+.w-20{
+    width: 20%;
+}
 </style>