update detailed event view

FINTLabs · Jan 7, 2025 · ed14d9d · ed14d9d
1 parent 3907f2a
commit ed14d9d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 38 deletions.
diff --git a/app/routes/hendelser._index.tsx b/app/routes/hendelser._index.tsx
@@ -57,7 +57,7 @@ export default function FintEventTable() {
     return (
         <div className="flex flex-col h-full justify-between gap-4">
             <Modal
-                width={10000}
+                width={"60%"}
                 open={modal.open}
                 header={{heading: String(modal.event?.corrId)}}
                 closeOnBackdropClick
@@ -66,19 +66,21 @@ export default function FintEventTable() {
                 <Modal.Body>
                   <BodyLong>
                     <HGrid columns={2}>
-                      <HStack style={{backgroundColor: "lightgray"}} width={"50‰"}>
-                        {formatRequestEvent(modal.event)}
-                      </HStack>
-                      <HStack
-                          style={{backgroundColor: "lightgray", marginLeft: "10px"}}
-                          width={"50‰"}
-                      >
-                        {formatResponseEvent(modal.event)}
-                      </HStack>
+                        <HStack width={"50‰"}>
+                            <pre className="bg-gray-100 p-3 rounded max-w-full max-h-96 overflow-auto text-sm">
+                                {formatRequestEvent(modal.event)}
+                            </pre>
+                        </HStack>
+                        <HStack
+                            width={"50‰"}>
+                             <pre className="bg-gray-100 p-3 rounded max-w-full max-h-96 overflow-auto text-sm">
+                                {formatResponseEvent(modal.event)}
+                            </pre>
+                        </HStack>
                     </HGrid>
-                    <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
-                      <ClockIcon/>
-                      <span>{timeSince(modal.event?.requestEvent?.created, modal.event?.responseEvent?.handledAt)}</span>
+                      <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
+                          <ClockIcon/>
+                          <span>{timeSince(modal.event?.requestEvent?.created, modal.event?.responseEvent?.handledAt)}</span>
                     </div>
                     <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
                       <Buildings3Icon />

diff --git a/app/types/Event.ts b/app/types/Event.ts
@@ -19,6 +19,7 @@ export interface RequestFintEvent {
   operationType: OperationType;
   created: number;
   timeToLive: number;
+  value: string;
 }
 
 export interface ResponseFintEvent {

diff --git a/app/types/ModalBody.tsx b/app/types/ModalBody.tsx
@@ -1,34 +1,20 @@
-import {FintEvent, timeSince} from "~/types/Event";
+import {FintEvent} from "~/types/Event";
 
 export interface ModalBody {
     open: boolean;
     event: FintEvent | null;
 }
 
-export function formatRequestEvent(event: FintEvent | null): JSX.Element {
-    return <div>
-        <code>
-        <p>domainName: {event?.requestEvent?.domainName}</p>
-        <p>packageName: {event?.requestEvent?.packageName}</p>
-        <p>resourceName: {event?.requestEvent?.resourceName}</p>
-        <p>OperationType: {event?.requestEvent?.operationType}</p>
-        <p>Created: {timeSince(event?.requestEvent?.created)}</p>
-        <p>TimeToLive: {new Date(String(event?.requestEvent?.timeToLive)).toLocaleTimeString()}</p>
-        </code>
-    </div>
+export function formatRequestEvent(event: FintEvent | null): { JSON: undefined } {
+    delete event?.requestEvent?.value;
+    return (
+        JSON.stringify(event?.requestEvent, null, 2)
+    );
 }
 
-export function formatResponseEvent(event: FintEvent | null): JSX.Element {
-    return <div>
-        <code>
-            <p>Adapterid: {event?.responseEvent?.adapterId}</p>
-            <p>HandledAt: {event?.responseEvent?.handledAt ? new Date(Number(event.responseEvent.handledAt) * 1000).toLocaleTimeString() : "N/A"}</p>
-            <p>OperationType: {event?.responseEvent?.operationType}</p>
-            <p>Failed: {event?.responseEvent?.failed} Not failed</p>
-            <p>ErrorMessage: {event?.responseEvent?.errorMessage} No error message</p>
-            <p>recjected: {event?.responseEvent?.rejected} Not receted</p>
-            <p>OperationType: {event?.responseEvent?.rejectReason} No reject reason</p>
-
-        </code>
-    </div>
+export function formatResponseEvent(event: FintEvent | null): { JSON: undefined } {
+    delete event?.responseEvent?.value;
+    return (
+        JSON.stringify(event?.responseEvent, null, 2)
+    );
 }