Add HTTP event view

backend/src/ee/services/pam-session/pam-session-schemas.ts

@@ -30,16 +30,14 @@ export const HttpBaseEventSchema = z.object({
 export const HttpRequestEventSchema = HttpBaseEventSchema.extend({
   eventType: z.literal(HttpEventTypeSchema.Values.request),
   method: z.string(),
-  url: z.string(),
+  url: z.string()
   // TODO: optional for now
-  body: z.string().optional()
 });
 
 export const HttpResponseEventSchema = HttpBaseEventSchema.extend({
   eventType: z.literal(HttpEventTypeSchema.Values.response),
-  status: z.string(),
+  status: z.string()
   // TODO: optional for now
-  body: z.string().optional()
 });
 
 export const HttpEventSchema = z.discriminatedUnion("eventType", [HttpRequestEventSchema, HttpResponseEventSchema]);

frontend/src/hooks/api/pam/types/index.ts

@@ -44,7 +44,26 @@ export type TTerminalEvent = {
   elapsedTime: number; // Seconds since session start (for replay)
 };
 
-export type TPamSessionLog = TPamCommandLog | TTerminalEvent;
+export type THttpRequestEvent = {
+  timestamp: string;
+  requestId: string;
+  eventType: "request";
+  headers: Record<string, string[]>;
+  method: string;
+  url: string;
+};
+
+export type THttpResponseEvent = {
+  timestamp: string;
+  requestId: string;
+  eventType: "response";
+  headers: Record<string, string[]>;
+  status: string;
+};
+
+export type THttpEvent = THttpRequestEvent | THttpResponseEvent;
+
+export type TPamSessionLog = TPamCommandLog | TTerminalEvent | THttpEvent;
 
 export type TPamSession = {
   id: string;

frontend/src/pages/pam/PamSessionsByIDPage/components/HttpEventView.tsx

@@ -0,0 +1,138 @@
+import { useMemo, useState } from "react";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Input } from "@app/components/v2";
+import { HighlightText } from "@app/components/v2/HighlightText";
+import { THttpEvent } from "@app/hooks/api/pam";
+
+type Props = {
+  events: THttpEvent[];
+};
+
+export const HttpEventView = ({ events }: Props) => {
+  const [search, setSearch] = useState("");
+
+  const filteredEvents = useMemo(
+    () =>
+      events.filter((event) => {
+        const searchValue = search.trim().toLowerCase();
+        if (!searchValue) return true;
+
+        if (event.eventType === "request") {
+          return (
+            event.method.toLowerCase().includes(searchValue) ||
+            event.url.toLowerCase().includes(searchValue) ||
+            event.requestId.toLowerCase().includes(searchValue) ||
+            Object.keys(event.headers).some((key) => key.toLowerCase().includes(searchValue)) ||
+            Object.values(event.headers).some((values) =>
+              values.some((value) => value.toLowerCase().includes(searchValue))
+            )
+          );
+        }
+        return (
+          event.status.toLowerCase().includes(searchValue) ||
+          event.requestId.toLowerCase().includes(searchValue) ||
+          Object.keys(event.headers).some((key) => key.toLowerCase().includes(searchValue)) ||
+          Object.values(event.headers).some((values) =>
+            values.some((value) => value.toLowerCase().includes(searchValue))
+          )
+        );
+      }),
+    [events, search]
+  );
+
+  const formatHeaders = (headers: Record<string, string[]>) => {
+    return Object.entries(headers)
+      .map(([key, values]) => `${key}: ${values.join(", ")}`)
+      .join("\n");
+  };
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search HTTP events..."
+          className="flex-1 bg-mineshaft-800"
+          containerClassName="bg-transparent"
+        />
+      </div>
+
+      <div className="flex grow flex-col gap-2 overflow-y-auto text-xs">
+        {filteredEvents.length > 0 ? (
+          filteredEvents.map((event, index) => {
+            const eventKey = `${event.timestamp}-${event.requestId}-${index}`;
+            const isRequest = event.eventType === "request";
+
+            return (
+              <div
+                key={eventKey}
+                className="flex w-full flex-col rounded-md border border-mineshaft-700 bg-mineshaft-800 p-3"
+              >
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex items-center gap-2 text-xs">
+                    <span
+                      className={`px-2 py-0.5 rounded ${
+                        isRequest
+                          ? "bg-blue-500/20 text-blue-400"
+                          : "bg-green-500/20 text-green-400"
+                      }`}
+                    >
+                      {isRequest ? "REQUEST" : "RESPONSE"}
+                    </span>
+                    <span>{new Date(event.timestamp).toLocaleString()}</span>
+                    <span className="text-bunker-500">•</span>
+                    <span className="font-mono text-xs">{event.requestId}</span>
+                  </div>
+                </div>
+
+                <div className="mt-2 space-y-2">
+                  {isRequest ? (
+                    <div className="font-mono text-bunker-100">
+                      <span className="font-semibold text-bunker-200">{event.method}</span>{" "}
+                      <HighlightText text={event.url} highlight={search} />
+                    </div>
+                  ) : (
+                    <div className="font-mono text-bunker-100">
+                      <span className="font-semibold text-bunker-200">Status:</span>{" "}
+                      <HighlightText text={event.status} highlight={search} />
+                    </div>
+                  )}
+
+                  {Object.keys(event.headers).length > 0 && (
+                    <div className="mt-2 pt-2 border-t border-mineshaft-700">
+                      <div className="text-bunker-400 text-xs mb-1">Headers:</div>
+                      <div className="font-mono whitespace-pre-wrap text-bunker-300 text-xs">
+                        <HighlightText text={formatHeaders(event.headers)} highlight={search} />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            );
+          })
+        ) : (
+          <div className="flex grow items-center justify-center text-bunker-300">
+            {search.length ? (
+              <div className="text-center">
+                <div className="mb-2">No HTTP events match search criteria</div>
+              </div>
+            ) : (
+              <div className="text-center">
+                <div className="mb-2">HTTP session logs are not yet available</div>
+                <div className="text-xs text-bunker-400">
+                  Logs will be uploaded after the session duration has elapsed.
+                  <br />
+                  If logs do not appear after some time, please contact your Gateway administrators.
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx

@@ -1,6 +1,13 @@
-import { PamResourceType, TPamCommandLog, TPamSession, TTerminalEvent } from "@app/hooks/api/pam";
+import {
+  PamResourceType,
+  THttpEvent,
+  TPamCommandLog,
+  TPamSession,
+  TTerminalEvent
+} from "@app/hooks/api/pam";
 
 import { CommandLogView } from "./CommandLogView";
+import { HttpEventView } from "./HttpEventView";
 import { TerminalEventView } from "./TerminalEventView";
 
 type Props = {
@@ -13,6 +20,7 @@ export const PamSessionLogsSection = ({ session }: Props) => {
   const isDatabaseSession =
     session.resourceType === PamResourceType.Postgres ||
     session.resourceType === PamResourceType.MySQL;
+  const isHttpSession = session.resourceType === PamResourceType.Kubernetes;
   const hasLogs = session.logs.length > 0;
 
   return (
@@ -23,6 +31,7 @@ export const PamSessionLogsSection = ({ session }: Props) => {
 
       {isDatabaseSession && hasLogs && <CommandLogView logs={session.logs as TPamCommandLog[]} />}
       {isSSHSession && hasLogs && <TerminalEventView events={session.logs as TTerminalEvent[]} />}
+      {isHttpSession && hasLogs && <HttpEventView events={session.logs as THttpEvent[]} />}
       {!hasLogs && (
         <div className="flex grow items-center justify-center text-bunker-300">
           <div className="text-center">