Merge remote-tracking branch 'origin/main' into misc/allow-connecting-to-dbs-with-ssl-via-proxy

.github/workflows/release-standalone-docker-img-postgres-offical.yml

@@ -65,6 +65,15 @@ jobs:
                       INFISICAL_PLATFORM_VERSION=${{ steps.extract_version.outputs.version }}
                       DD_GIT_REPOSITORY_URL=${{ github.server_url }}/${{ github.repository }}
                       DD_GIT_COMMIT_SHA=${{ github.sha }}
+            - name: Snyk to check Docker image for vulnerabilities
+              continue-on-error: true 
+              uses: snyk/actions/docker@master
+              env:
+                SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+              with:
+                image: infisical/infisical:${{ steps.extract_version.outputs.version }}
+                command: monitor
+                args: --file=Dockerfile.standalone-infisical
 
     infisical-fips-standalone:
         name: Build infisical standalone image postgres

frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx

@@ -21,16 +21,16 @@ const Page = () => {
   return (
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {session && (
-        <div className="mx-auto mb-6 w-full max-w-7xl">
+        <div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
           <PageHeader
             title={`${session.accountName} Session`}
             description={`View details for this ${session.accountName} session.`}
           />
           <div className="flex">
-            <div className="mr-4 w-96">
+            <div className="mr-4 flex h-fit w-96">
               <PamSessionDetailsSection session={session} />
             </div>
-            <div className="w-full">
+            <div className="flex w-full min-w-0">
               <PamSessionLogsSection session={session} />
             </div>
           </div>

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

@@ -1,4 +1,5 @@
-import { faTerminal } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TPamSession } from "@app/hooks/api/pam";
@@ -8,28 +9,64 @@ type Props = {
 };
 
 export const PamSessionLogsSection = ({ session }: Props) => {
+  const [expandedLogTimestamps, setExpandedLogTimestamps] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (timestamp: string) => {
+    setExpandedLogTimestamps((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(timestamp)) {
+        newSet.delete(timestamp);
+      } else {
+        newSet.add(timestamp);
+      }
+      return newSet;
+    });
+  };
+
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="flex h-full w-full flex-col gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="flex items-center border-b border-mineshaft-400 pb-4">
         <h3 className="text-lg font-semibold text-mineshaft-100">Session Logs</h3>
       </div>
-      <div className="flex grow flex-col gap-8 overflow-y-auto text-xs">
+      <div className="flex flex-col gap-2 overflow-y-auto text-xs">
         {session.commandLogs.length > 0 ? (
-          session.commandLogs.map((log) => (
+          session.commandLogs.map((log) => {
-            <div key={log.timestamp} className="flex flex-col">
+            const isExpanded = expandedLogTimestamps.has(log.timestamp);
-              <div className="flex items-center gap-1.5 text-bunker-400">
+            return (
-                <FontAwesomeIcon icon={faTerminal} className="size-3" />
+              <button
-                <span>{new Date(log.timestamp).toLocaleString()}</span>
+                type="button"
-              </div>
+                key={log.timestamp}
+                className={`flex w-full flex-col rounded-md border border-mineshaft-700 p-3 text-left focus:outline-none focus:ring-2 focus:ring-mineshaft-400 ${
+                  isExpanded ? "bg-mineshaft-700" : "bg-mineshaft-800 hover:bg-mineshaft-700"
+                }`}
+                onClick={() => toggleExpand(log.timestamp)}
+              >
+                <div className="flex items-center justify-between text-bunker-400">
+                  <div className="flex select-none items-center gap-2">
+                    <FontAwesomeIcon
+                      icon={isExpanded ? faChevronDown : faChevronRight}
+                      className="size-3 transition-transform duration-200"
+                    />
+                    <span>{new Date(log.timestamp).toLocaleString()}</span>
+                  </div>
+                </div>
 
-              <div className="overflow-hidden whitespace-pre-wrap break-all font-mono">
+                <div
-                {log.input}
+                  className={`mt-2 font-mono ${
-              </div>
+                    isExpanded ? "whitespace-pre-wrap break-all" : "truncate"
-              <div className="overflow-hidden whitespace-pre-wrap break-all font-mono text-bunker-300">
+                  }`}
-                {log.output}
+                >
-              </div>
+                  {log.input}
-            </div>
+                </div>
-          ))
+
+                {isExpanded && log.output && (
+                  <div className="mt-2 whitespace-pre-wrap break-all border-t border-mineshaft-700 pt-2 font-mono text-bunker-300">
+                    {log.output}
+                  </div>
+                )}
+              </button>
+            );
+          })
         ) : (
           <div className="flex w-full grow items-center justify-center text-bunker-300">
             No session logs

frontend/src/pages/pam/PamSessionsPage/components/PamSessionRow.tsx

@@ -167,10 +167,10 @@ export const PamSessionRow = ({ session, search, filteredCommandLogs }: Props) =
                 </div>
 
                 <div className="font-mono">
-                  <HighlightText text={log.input} highlight={search} />
+                  <HighlightText text={log.input.trim()} highlight={search} />
                 </div>
                 <div className="font-mono text-bunker-300">
-                  <HighlightText text={log.output} highlight={search} />
+                  <HighlightText text={log.output.trim()} highlight={search} />
                 </div>
               </div>
             ))}