Add container exec to cyclops UI

cyclops-ui/src/components/k8s-resources/common/ExecModal.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from 'react';
+import { Modal } from 'antd';
+import { Terminal } from 'xterm';
+import 'xterm/css/xterm.css';
+
+interface ExecModalProps {
+  visible: boolean;
+  onCancel: () => void;
+  podName: string;
+  containerName: string;
+  namespace: string;
+}
+
+const ExecModal: React.FC<ExecModalProps> = ({
+  visible,
+  onCancel,
+  podName,
+  containerName,
+  namespace,
+}) => {
+  const terminalRef = useRef<HTMLDivElement | null>(null);
+  const xtermRef = useRef<Terminal | null>(null);
+
+  useEffect(() => {
+    if (visible && terminalRef.current) {
+      // Initialize the terminal
+      const terminal = new Terminal();
+      terminal.open(terminalRef.current);
+      xtermRef.current = terminal;
+
+      // Connect to the backend via WebSocket
+      const ws = new WebSocket(`wss://your-backend-url/exec?pod=${podName}&container=${containerName}&namespace=${namespace}`);
+
+      ws.onopen = () => {
+        console.log('WebSocket connection established');
+        terminal.write('Welcome to the terminal!\r\n');
+      };
+
+      ws.onmessage = (event) => {
+        terminal.write(event.data);
+      };
+
+      ws.onerror = (error) => {
+        console.error('WebSocket error:', error);
+        terminal.write('Error: Could not connect to the terminal.\r\n');
+      };
+
+      ws.onclose = () => {
+        console.log('WebSocket connection closed');
+        terminal.write('Connection closed.\r\n');
+      };
+
+      terminal.onData((data) => {
+        ws.send(data);
+      });
+
+      return () => {
+        ws.close();
+        if (xtermRef.current) {
+          xtermRef.current.dispose();
+        }
+      };
+    }
+  }, [visible, podName, containerName, namespace]);
+
+  return (
+    <Modal
+      title={`Exec Terminal - Pod: ${podName}, Container: ${containerName}`}
+      visible={visible}
+      onCancel={onCancel}
+      footer={null}
+      width={800}
+      bodyStyle={{ height: '60vh', padding: 0 }}
+    >
+      <div ref={terminalRef} style={{ height: '100%' }}></div>
+    </Modal>
+  );
+};
+
+export default ExecModal;

cyclops-ui/src/components/k8s-resources/common/PodTable.tsx

@@ -15,11 +15,7 @@ import axios from "axios";
 import { formatPodAge } from "../../../utils/pods";
 import ReactAce from "react-ace";
 import { mapResponseError } from "../../../utils/api/errors";
-
-interface Props {
-  namespace: string;
-  pods: any[];
-}
+import ExecModal from './ExecModal'; // Import the ExecModal component
 
 const PodTable = ({ pods, namespace }: Props) => {
   const [logs, setLogs] = useState("");
@@ -30,6 +26,11 @@ const PodTable = ({ pods, namespace }: Props) => {
     containers: [],
     initContainers: [],
   });
+  const [execModal, setExecModal] = useState({ // Added state for ExecModal
+    on: false,
+    podName: "",
+    containerName: "",
+  });
   const [error, setError] = useState({
     message: "",
     description: "",
@@ -46,6 +47,14 @@ const PodTable = ({ pods, namespace }: Props) => {
     setLogs("");
   };
 
+  const handleCancelExec = () => { // Added handler for closing ExecModal
+    setExecModal({
+      on: false,
+      podName: "",
+      containerName: "",
+    });
+  };
+
   const downloadLogs = (container: string) => {
     return function () {
       window.location.href =
@@ -73,7 +82,6 @@ const PodTable = ({ pods, namespace }: Props) => {
             <Col>
               <Button
                 type="primary"
-                // icon={<DownloadOutlined />}
                 onClick={downloadLogs(container.name)}
                 disabled={logs === "No logs available"}
               >
@@ -101,7 +109,6 @@ const PodTable = ({ pods, namespace }: Props) => {
             <Col>
               <Button
                 type="primary"
-                // icon={<DownloadOutlined />}
                 onClick={downloadLogs(container.name)}
                 disabled={logs === "No logs available"}
               >
@@ -151,6 +158,14 @@ const PodTable = ({ pods, namespace }: Props) => {
       });
   };
 
+  const openExecModal = (podName: string, containerName: string) => { // Added function to open ExecModal
+    setExecModal({
+      on: true,
+      podName: podName,
+      containerName: containerName,
+    });
+  };
+
   return (
     <div>
       <Table dataSource={pods}>
@@ -252,6 +267,14 @@ const PodTable = ({ pods, namespace }: Props) => {
               >
                 View Logs
               </Button>
+              <Button
+                type="primary"
+                onClick={() => openExecModal(pod.name, pod.containers[0].name)} // Added button for Exec
+                style={{ marginTop: '10px' }}
+                block
+              >
+                Exec
+              </Button>
             </>
           )}
         />
@@ -281,6 +304,13 @@ const PodTable = ({ pods, namespace }: Props) => {
         )}
         <Tabs items={getTabItems()} onChange={onLogsTabsChange} />
       </Modal>
+      <ExecModal // Added ExecModal component
+        visible={execModal.on}
+        onCancel={handleCancelExec}
+        podName={execModal.podName}
+        containerName={execModal.containerName}
+        namespace={namespace}
+      />
     </div>
   );
 };