feat: container env vars tab

src-tauri/src/commands/container.rs

@@ -279,6 +279,23 @@ pub async fn get_container_processes(state: tauri::State<'_, AppState>, containe
 
     let result = state.docker.top_processes(&container, options).await;
 
+    match result {
+        Ok(processes) => {
+            Ok(processes.processes.expect("Failed to get processes from docker container"))
+        },
+        Err(e) => return Err(e.to_string()),
+    }
+}
+
+
+#[tauri::command]
+pub async fn get_container_env_vars(state: tauri::State<'_, AppState>, container: String) -> Result<Vec<Vec<String>>, String> {
+    let options = Some(TopOptions {
+        ps_args: "aux",
+    });
+
+    let result = state.docker.top_processes(&container, options).await;
+
     match result {
         Ok(processes) => {
             Ok(processes.processes.expect("Failed to get processes from docker container"))

src/components/Containers/ContainerDetails.jsx

@@ -21,6 +21,7 @@ import ContainerNameWidget from "./ContainerNameWidget.jsx";
 import Swal from "sweetalert2";
 import toast from "../../utils/toast.js";
 import ContainerProcesses from "./ContainerProcesses.jsx";
+import ContainerEnvVars from "./ContainerEnvVars.jsx";
 
 
 function ContainerDetails() {
@@ -210,6 +211,8 @@ function ContainerDetails() {
 
             case 'PROCESSES':
                 return <ContainerProcesses/>
+            case 'ENV_VARS':
+                return <ContainerEnvVars/>
             default:
                 return null;
         }
@@ -315,6 +318,9 @@ function ContainerDetails() {
                 <button className={`mr-4 pb-2 ${activeTab === 'PROCESSES' ? 'border-b-2 border-base-content' : ''}`}
                         onClick={() => setActiveTab('PROCESSES')}>PROCESSES
                 </button>
+                <button className={`mr-4 pb-2 ${activeTab === 'ENV_VARS' ? 'border-b-2 border-base-content' : ''}`}
+                        onClick={() => setActiveTab('ENV_VARS')}>ENV VARS
+                </button>
             </div>
             <div className="flex-1 overflow-auto text-black p-2 rounded">
                 {renderContent()}

src/components/Containers/ContainerEnvVars.jsx

@@ -0,0 +1,56 @@
+import React, {useEffect, useState} from 'react';
+import {invoke} from "@tauri-apps/api";
+import {useContainers} from "../../state/ContainerContext.jsx";
+
+const ContainerEnvVars = () => {
+    const {selectedContainer} = useContainers();
+
+    const [envVars, setEnvVars] = useState({})
+
+
+    function getInfo() {
+        invoke('fetch_container_info', {cId: selectedContainer.Id}).then((info) => {
+            let envVars = info?.Config?.Env;
+
+            let envObj = {}
+
+            envVars.forEach(envVar => {
+                let keyVal = envVar.split("=")
+                envObj[keyVal[0]] = keyVal[1]
+            })
+            setEnvVars(envObj)
+
+        }).catch((error) => {
+            console.error("Error fetching container info:", error);
+        });
+    }
+
+    useEffect(() => {
+        getInfo()
+    }, [selectedContainer]);
+
+
+    return (
+        <div className="overflow-x-auto h-full">
+            <table className="table table-sm w-full bg-base-100 text-base">
+                <thead>
+                <tr>
+                    <th>VARIABLE</th>
+                    <th>VALUE</th>
+
+                </tr>
+                </thead>
+                <tbody>
+                {envVars && Object.entries(envVars).map(([key, value]) => (
+                    <tr key={key} className="text-base-content">
+                        <td>{key}</td>
+                        <td>{value}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default ContainerEnvVars;