Feat/download logs for pods (#896)

priyanshuharshbodhi1 · web-flow · commit 2cc0192d93c3 · 2025-06-04T12:54:11.000Z
* feat: Simplify DownloadLogsButton for client-side log downloads

* feat: Update LogModal to pass log content to download button

* feat: Update panels to pass log content to download button

* feat: Add modal to display file size before downloading logs

* feat: add download logs button for pod resources in list view

* style: Standardize toast message styling to match application patterns
diff --git a/src/components/DownloadLogsButton.tsx b/src/components/DownloadLogsButton.tsx
@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { Download } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import DownloadLogsModal from './DownloadLogsModal';
+import useTheme from '../stores/themeStore';
+
+interface DownloadLogsButtonProps {
+  cluster: string;
+  namespace: string;
+  podName: string;
+  className?: string;
+  previous?: boolean;
+  logContent?: string; // Added prop to receive current log content
+}
+
+const DownloadLogsButton: React.FC<DownloadLogsButtonProps> = ({
+  cluster,
+  namespace,
+  podName,
+  className = '',
+  logContent = '', // Default to empty string if not provided
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const theme = useTheme(state => state.theme);
+
+  // Function to download logs directly from the browser
+  const downloadLogs = async () => {
+    try {
+      setIsLoading(true);
+
+      // Create filename with timestamp to avoid duplicates
+      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+      const filename = `logs-${cluster}-${podName}-${timestamp}.log`;
+
+      // Use the log content directly or fetch it if not provided
+      let content = logContent;
+
+      // If no content was provided, create a placeholder message
+      if (!content || content.trim() === '') {
+        content =
+          `Logs for pod ${podName} in namespace ${namespace} on cluster ${cluster}\n` +
+          `Generated at: ${new Date().toLocaleString()}\n\n` +
+          `Log content not available directly. Please use the streaming logs feature.`;
+      }
+
+      // Create a blob with the content
+      const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+
+      // Create object URL from blob
+      const url = URL.createObjectURL(blob);
+
+      // Create download link
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename;
+      link.style.display = 'none';
+
+      // Append to document, click, then remove
+      document.body.appendChild(link);
+      link.click();
+
+      // Clean up
+      setTimeout(() => {
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+      }, 100);
+
+      // Show success notification
+      toast.success(`Downloaded logs for ${podName}`, {
+        duration: 3000,
+      });
+    } catch (error) {
+      console.error('Error downloading logs:', error);
+      toast.error('Failed to download logs', {
+        duration: 3000,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Function to calculate the size of the log content
+  const calculateSize = () => {
+    const contentSize = new Blob([logContent], { type: 'text/plain' }).size;
+    setShowModal(true);
+    return contentSize;
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => calculateSize()}
+        disabled={isLoading}
+        className={`${
+          theme === 'dark'
+            ? 'bg-gray-700 text-white hover:bg-gray-600'
+            : 'bg-gray-300 text-gray-800 hover:bg-gray-200'
+        } rounded px-2 py-1 transition-colors ${className}`}
+        title="Download logs"
+      >
+        {isLoading ? <span className="inline-block animate-spin">⟳</span> : <Download size={16} />}
+      </button>
+
+      {showModal && (
+        <DownloadLogsModal
+          size={new Blob([logContent], { type: 'text/plain' }).size}
+          onClose={() => setShowModal(false)}
+          onSave={downloadLogs}
+        />
+      )}
+    </>
+  );
+};
+
+export default DownloadLogsButton;
diff --git a/src/components/DownloadLogsModal.tsx b/src/components/DownloadLogsModal.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import useTheme from '../stores/themeStore';
+
+interface DownloadLogsModalProps {
+  size: number;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+const DownloadLogsModal: React.FC<DownloadLogsModalProps> = ({ size, onClose, onSave }) => {
+  const theme = useTheme(state => state.theme);
+
+  // Format file size
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return '0 B';
+
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm">
+      <div
+        className={`w-80 rounded-lg p-5 shadow-xl ${
+          theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
+        }`}
+      >
+        <div className="mb-3 flex items-center justify-between">
+          <h2 className="text-lg font-medium">Download Logs</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="mb-4">
+          <p className="mb-2 text-sm">File size: {formatSize(size)}</p>
+          <div className="h-1 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+            <div className="h-1 rounded-full bg-blue-500" style={{ width: '100%' }}></div>
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2">
+          <button
+            onClick={onClose}
+            className={`rounded px-3 py-1.5 text-sm ${
+              theme === 'dark'
+                ? 'bg-gray-700 text-white hover:bg-gray-600'
+                : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
+            }`}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onSave}
+            className="rounded bg-blue-500 px-3 py-1.5 text-sm text-white hover:bg-blue-600"
+          >
+            Download
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DownloadLogsModal;
diff --git a/src/components/DynamicDetailsPanel.tsx b/src/components/DynamicDetailsPanel.tsx
@@ -29,6 +29,7 @@ import useTheme from '../stores/themeStore'; // Import the useTheme hook
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import { api } from '../lib/api';
 import { useResourceLogsWebSocket } from '../hooks/useWebSocket';
+import DownloadLogsButton from './DownloadLogsButton';
 
 interface DynamicDetailsProps {
   namespace: string;
@@ -819,20 +820,33 @@ const DynamicDetailsPanel = ({
                 </Box>
               )}
               {tabValue === 2 && (
-                <Box
-                  sx={{
-                    maxHeight: '500px',
-                    bgcolor: theme === 'dark' ? '#1E1E1E' : '#FFFFFF',
-                    borderRadius: 1,
-                    p: 1,
-                    overflow: 'auto',
-                  }}
-                >
-                  <div
-                    ref={terminalRef}
-                    style={{ height: '100%', width: '100%', overflow: 'auto' }}
-                  />
-                </Box>
+                <>
+                  {/* Add download logs button if the resource is a pod */}
+                  {type.toLowerCase() === 'pod' && (
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 2 }}>
+                      <DownloadLogsButton
+                        cluster={(resourceData?.cluster as string) || 'default'}
+                        namespace={namespace}
+                        podName={name}
+                        logContent={logs.join('\n')}
+                      />
+                    </Box>
+                  )}
+                  <Box
+                    sx={{
+                      maxHeight: '500px',
+                      bgcolor: theme === 'dark' ? '#1E1E1E' : '#FFFFFF',
+                      borderRadius: 1,
+                      p: 1,
+                      overflow: 'auto',
+                    }}
+                  >
+                    <div
+                      ref={terminalRef}
+                      style={{ height: '100%', width: '100%', overflow: 'auto' }}
+                    />
+                  </Box>
+                </>
               )}
             </Box>
           </Box>
diff --git a/src/components/ListViewComponent.tsx b/src/components/ListViewComponent.tsx
@@ -1,8 +1,9 @@
-import { Box, Typography, Button } from '@mui/material';
+import { Box, Typography, Button, Tooltip } from '@mui/material';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import useTheme from '../stores/themeStore';
 import ListViewSkeleton from './ui/ListViewSkeleton';
 import { api } from '../lib/api';
+import DownloadLogsButton from './DownloadLogsButton';
 
 // Define the response interfaces
 export interface ResourceItem {
@@ -720,19 +721,35 @@ const ListViewComponent = ({
                 >
                   {/* Name and namespace section */}
                   <Box sx={{ overflow: 'hidden' }}>
-                    <Typography
-                      sx={{
-                        color: theme === 'dark' ? '#fff' : '#6B7280',
-                        fontWeight: 500,
-                        fontSize: '1rem',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}
-                    >
-                      {resource.name}
-                    </Typography>
-                    {resource.namespace != '' && (
+                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                      <Typography
+                        sx={{
+                          color: theme === 'dark' ? '#fff' : '#6B7280',
+                          fontWeight: 500,
+                          fontSize: '1rem',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                        }}
+                      >
+                        {resource.name}
+                      </Typography>
+
+                      {/* Add download logs button for pod resources */}
+                      {resource.kind.toLowerCase() === 'pod' && (
+                        <Tooltip title="Download logs">
+                          <span className="ml-2">
+                            <DownloadLogsButton
+                              cluster={resource.context || 'default'}
+                              namespace={resource.namespace}
+                              podName={resource.name}
+                            />
+                          </span>
+                        </Tooltip>
+                      )}
+                    </Box>
+
+                    {resource.namespace !== '' && (
                       <Typography
                         sx={{
                           color: theme === 'dark' ? '#A5ADBA' : '#6B7280',
diff --git a/src/components/LogModal.tsx b/src/components/LogModal.tsx
@@ -4,18 +4,21 @@ import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import 'xterm/css/xterm.css';
 import useTheme from '../stores/themeStore';
+import DownloadLogsButton from './DownloadLogsButton';
 
 interface LogModalProps {
   namespace: string;
   deploymentName: string;
   onClose: () => void;
+  cluster?: string; // Added cluster prop
 }
 
-const LogModal = ({ namespace, deploymentName, onClose }: LogModalProps) => {
+const LogModal = ({ namespace, deploymentName, onClose, cluster = 'default' }: LogModalProps) => {
   const terminalRef = useRef<HTMLDivElement>(null);
   const terminalInstance = useRef<Terminal | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [logContent, setLogContent] = useState<string>('');
   const theme = useTheme(state => state.theme);
 
   useEffect(() => {
@@ -56,7 +59,10 @@ const LogModal = ({ namespace, deploymentName, onClose }: LogModalProps) => {
     };
 
     socket.onmessage = event => {
+      // Add the log line to the terminal
       term.writeln(event.data);
+      // Also append to our captured log content
+      setLogContent(prev => prev + event.data + '\n');
       setError(null);
     };
 
@@ -93,16 +99,25 @@ const LogModal = ({ namespace, deploymentName, onClose }: LogModalProps) => {
           <h2 className="text-2xl font-bold">
             Logs: <span className="text-2xl text-blue-400">{deploymentName}</span>
           </h2>
-          <button
-            onClick={onClose}
-            className={`transition duration-200 ${
-              theme === 'dark'
-                ? 'bg-gray-900 hover:text-red-600'
-                : 'border-none bg-white hover:text-red-600'
-            }`}
-          >
-            <X size={22} />
-          </button>
+          <div className="flex items-center space-x-2">
+            <DownloadLogsButton
+              cluster={cluster}
+              namespace={namespace}
+              podName={deploymentName}
+              className="mr-2"
+              logContent={logContent}
+            />
+            <button
+              onClick={onClose}
+              className={`transition duration-200 ${
+                theme === 'dark'
+                  ? 'bg-gray-900 hover:text-red-600'
+                  : 'border-none bg-white hover:text-red-600'
+              }`}
+            >
+              <X size={22} />
+            </button>
+          </div>
         </div>
 
         {/* Terminal Section */}
diff --git a/src/components/WecsDetailsPanel.tsx b/src/components/WecsDetailsPanel.tsx
