[Developer] #424 show ORDS request response details

Refs #424

src/main/resources/static/css/app.css

@@ -105,3 +105,37 @@ body {
   gap: 1rem;
   margin-bottom: .75rem;
 }
+
+.probe-exchange-grid {
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  margin: 1rem 0;
+}
+
+.probe-exchange {
+  border: 1px solid #e4e7ec;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.probe-exchange h3 {
+  background: #f2f4f7;
+  border-bottom: 1px solid #e4e7ec;
+  font-size: .85rem;
+  font-weight: 700;
+  margin: 0;
+  padding: .55rem .75rem;
+}
+
+.probe-exchange pre {
+  background: #101828;
+  color: #f9fafb;
+  font-size: .78rem;
+  margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  padding: .75rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

src/main/resources/templates/fragments/probe-result.html

@@ -20,6 +20,25 @@
     </span>
   </div>
 
+  <div class="probe-exchange-grid">
+    <section class="probe-exchange">
+      <h3>Request Headers</h3>
+      <pre th:text="${result.requestHeaders()} ?: '{}'">{}</pre>
+    </section>
+    <section class="probe-exchange">
+      <h3>Request Payload</h3>
+      <pre th:text="${result.requestPayload()} ?: '{}'">{}</pre>
+    </section>
+    <section class="probe-exchange">
+      <h3>Response Headers</h3>
+      <pre th:text="${result.responseHeaders()} ?: '{}'">{}</pre>
+    </section>
+    <section class="probe-exchange">
+      <h3>Response Body</h3>
+      <pre th:text="${result.responseBody()} ?: ''"></pre>
+    </section>
+  </div>
+
   <div class="table-responsive" th:if="${!#lists.isEmpty(result.rows())}">
     <table class="table table-sm table-striped align-middle">
       <thead>