Gecko [ aodai.devttt.com ]

Name	Size	Permission	Action
dockerManager.js	72.56 KB	-rw-r--r--

Code Editor : dockerManager.js

app.controller('installDocker', function ($scope, $http, $timeout, $window) {
    $scope.installDockerStatus = true;
    $scope.installBoxGen = true;
    $scope.dockerInstallBTN = false;

$scope.installDocker = function () {

$scope.installDockerStatus = false;
        $scope.installBoxGen = true;
        $scope.dockerInstallBTN = true;

url = "/docker/installDocker";

var data = {};
        var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);

}

function cantLoadInitialDatas(response) {
            $scope.cyberPanelLoading = true;
            new PNotify({
                title: 'Operation Failed!',
                text: 'Could not connect to server, please refresh this page',
                type: 'error'
            });
        }

};

function getRequestStatus() {
        $scope.cyberPanelLoading = false;

url = "/serverstatus/switchTOLSWSStatus";

var data = {};

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);

}
        }

}

}
});

/* Java script code for docker management */
var delayTimer = null;

app.controller('dockerImages', function ($scope) {
    $scope.tagList = [];
    $scope.imageTag = {};
});

/* Java script code to install Container */

app.controller('runContainer', function ($scope, $http) {
    $scope.containerCreationLoading = false;
    $scope.installationDetailsForm = false;
    $scope.installationProgress = true;
    $scope.errorMessageBox = true;
    $scope.success = true;
    $scope.couldNotConnect = true;
    $scope.goBackDisable = true;

$scope.volList = {};
    $scope.volListNumber = 0;
    $scope.eport = {};
    $scope.iport = {};
    $scope.portType = {};
    $scope.envList = {};
    
    // Advanced Environment Variable Mode
    $scope.advancedEnvMode = false;
    $scope.advancedEnvText = '';
    $scope.advancedEnvCount = 0;
    $scope.parsedEnvVars = {};
    $scope.addVolField = function () {
        $scope.volList[$scope.volListNumber] = {'dest': '', 'src': ''};
        $scope.volListNumber = $scope.volListNumber + 1;
        console.log($scope.volList)
    };
    $scope.removeVolField = function () {
        delete $scope.volList[$scope.volListNumber - 1];
        $scope.volListNumber = $scope.volListNumber - 1;
    };

$scope.addEnvField = function () {
        var countEnv = Object.keys($scope.envList).length;
        $scope.envList[countEnv + 1] = {'name': '', 'value': ''};
    };

// Advanced Environment Variable Functions
    $scope.toggleEnvMode = function() {
        if ($scope.advancedEnvMode) {
            // Switching to advanced mode - convert existing envList to text format
            $scope.convertToAdvancedFormat();
        } else {
            // Switching to simple mode - convert advanced text to envList
            $scope.convertToSimpleFormat();
        }
    };

$scope.convertToAdvancedFormat = function() {
        var envLines = [];
        for (var key in $scope.envList) {
            if ($scope.envList[key].name && $scope.envList[key].value) {
                envLines.push($scope.envList[key].name + '=' + $scope.envList[key].value);
            }
        }
        $scope.advancedEnvText = envLines.join('\n');
        $scope.parseAdvancedEnv();
    };

$scope.convertToSimpleFormat = function() {
        $scope.parseAdvancedEnv();
        var newEnvList = {};
        var index = 0;
        for (var key in $scope.parsedEnvVars) {
            newEnvList[index] = {'name': key, 'value': $scope.parsedEnvVars[key]};
            index++;
        }
        $scope.envList = newEnvList;
    };

$scope.parseAdvancedEnv = function() {
        $scope.parsedEnvVars = {};
        $scope.advancedEnvCount = 0;
        
        if (!$scope.advancedEnvText) {
            return;
        }
        
        var lines = $scope.advancedEnvText.split('\n');
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i].trim();
            
            // Skip empty lines and comments
            if (!line || line.startsWith('#')) {
                continue;
            }
            
            // Parse KEY=VALUE format
            var equalIndex = line.indexOf('=');
            if (equalIndex > 0) {
                var key = line.substring(0, equalIndex).trim();
                var value = line.substring(equalIndex + 1).trim();
                
                // Remove quotes if present
                if ((value.startsWith('"') && value.endsWith('"')) || 
                    (value.startsWith("'") && value.endsWith("'"))) {
                    value = value.slice(1, -1);
                }
                
                if (key && key.match(/^[A-Za-z_][A-Za-z0-9_]*$/)) {
                    $scope.parsedEnvVars[key] = value;
                    $scope.advancedEnvCount++;
                }
            }
        }
    };

$scope.loadEnvTemplate = function() {
        var templates = {
            'web-app': 'NODE_ENV=production\nPORT=3000\nDATABASE_URL=postgresql://user:pass@localhost/db\nREDIS_URL=redis://localhost:6379\nJWT_SECRET=your-jwt-secret\nAPI_KEY=your-api-key',
            'database': 'POSTGRES_DB=myapp\nPOSTGRES_USER=user\nPOSTGRES_PASSWORD=password\nPOSTGRES_HOST=localhost\nPOSTGRES_PORT=5432',
            'api': 'API_HOST=0.0.0.0\nAPI_PORT=8080\nLOG_LEVEL=info\nCORS_ORIGIN=*\nRATE_LIMIT=1000\nAPI_KEY=your-secret-key',
            'monitoring': 'PROMETHEUS_PORT=9090\nGRAFANA_PORT=3000\nALERTMANAGER_PORT=9093\nRETENTION_TIME=15d\nSCRAPE_INTERVAL=15s'
        };
        
        var templateNames = Object.keys(templates);
        var templateChoice = prompt('Choose a template:\n' + templateNames.map((name, i) => (i + 1) + '. ' + name).join('\n') + '\n\nEnter number or template name:');
        
        if (templateChoice) {
            var templateIndex = parseInt(templateChoice) - 1;
            var selectedTemplate = null;
            
            if (templateIndex >= 0 && templateIndex < templateNames.length) {
                selectedTemplate = templates[templateNames[templateIndex]];
            } else {
                // Try to find by name
                var templateName = templateChoice.toLowerCase().replace(/\s+/g, '-');
                if (templates[templateName]) {
                    selectedTemplate = templates[templateName];
                }
            }
            
            if (selectedTemplate) {
                if ($scope.advancedEnvMode) {
                    $scope.advancedEnvText = selectedTemplate;
                    $scope.parseAdvancedEnv();
                } else {
                    // Convert template to simple format
                    var lines = selectedTemplate.split('\n');
                    $scope.envList = {};
                    var index = 0;
                    for (var i = 0; i < lines.length; i++) {
                        var line = lines[i].trim();
                        if (line && !line.startsWith('#')) {
                            var equalIndex = line.indexOf('=');
                            if (equalIndex > 0) {
                                $scope.envList[index] = {
                                    'name': line.substring(0, equalIndex).trim(),
                                    'value': line.substring(equalIndex + 1).trim()
                                };
                                index++;
                            }
                        }
                    }
                }
                
                new PNotify({
                    title: 'Template Loaded',
                    text: 'Environment variable template has been loaded successfully',
                    type: 'success'
                });
            }
        }
    };

// Docker Compose Functions for runContainer
    $scope.generateDockerCompose = function() {
        // Get container information from form
        var containerInfo = {
            name: $scope.name || 'my-container',
            image: $scope.image || 'nginx:latest',
            ports: $scope.eport || {},
            volumes: $scope.volList || {},
            environment: {}
        };
        
        // Collect environment variables
        if ($scope.advancedEnvMode && $scope.parsedEnvVars) {
            containerInfo.environment = $scope.parsedEnvVars;
        } else {
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    containerInfo.environment[$scope.envList[key].name] = $scope.envList[key].value;
                }
            }
        }
        
        // Generate docker-compose.yml content
        var composeContent = generateDockerComposeYml(containerInfo);
        
        // Create and download file
        var blob = new Blob([composeContent], { type: 'text/yaml' });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'docker-compose.yml';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        new PNotify({
            title: 'Docker Compose Generated',
            text: 'docker-compose.yml file has been generated and downloaded',
            type: 'success'
        });
    };

$scope.generateEnvFile = function() {
        var envText = '';
        
        if ($scope.advancedEnvMode && $scope.advancedEnvText) {
            envText = $scope.advancedEnvText;
        } else {
            // Convert simple mode to .env format
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    envText += $scope.envList[key].name + '=' + $scope.envList[key].value + '\n';
                }
            }
        }
        
        if (!envText.trim()) {
            new PNotify({
                title: 'Nothing to Generate',
                text: 'No environment variables to generate .env file',
                type: 'warning'
            });
            return;
        }
        
        // Create and download file
        var blob = new Blob([envText], { type: 'text/plain' });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = '.env';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        new PNotify({
            title: '.env File Generated',
            text: '.env file has been generated and downloaded',
            type: 'success'
        });
    };

$scope.showComposeHelp = function() {
        var helpContent = `
            <div class="compose-help-content">
                <h4><i class="fas fa-info-circle"></i> How to use Docker Compose with Environment Variables</h4>
                <div class="help-steps">
                    <h5>Step 1: Download Files</h5>
                    <p>Click "Generate docker-compose.yml" and "Generate .env file" to download both files.</p>
                    
                    <h5>Step 2: Place Files</h5>
                    <p>Place both files in the same directory on your server.</p>
                    
                    <h5>Step 3: Run Docker Compose</h5>
                    <p>Run the following commands in your terminal:</p>
                    <pre><code>docker compose up -d</code></pre>
                    
                    <h5>Step 4: Update Environment Variables</h5>
                    <p>To update environment variables:</p>
                    <ol>
                        <li>Edit the .env file</li>
                        <li>Run: <code>docker compose up -d</code></li>
                        <li>Only the environment variables will be reloaded (no container rebuild needed!)</li>
                    </ol>
                    
                    <h5>Benefits:</h5>
                    <ul>
                        <li>No need to recreate containers</li>
                        <li>Faster environment variable updates</li>
                        <li>Version control friendly</li>
                        <li>Easy to share configurations</li>
                    </ul>
                </div>
            </div>
        `;
        
        // Create modal for help
        var modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <i class="fas fa-question-circle"></i>
                            Docker Compose Help
                        </h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ${helpContent}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        $(modal).modal('show');
        
        // Remove modal when closed
        $(modal).on('hidden.bs.modal', function() {
            document.body.removeChild(modal);
        });
    };

$scope.loadEnvFromFile = function() {
        var input = document.createElement('input');
        input.type = 'file';
        input.accept = '.env,text/plain';
        input.onchange = function(event) {
            var file = event.target.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $scope.advancedEnvText = e.target.result;
                    $scope.parseAdvancedEnv();
                    $scope.$apply();
                    
                    new PNotify({
                        title: 'File Loaded',
                        text: 'Environment variables loaded from file successfully',
                        type: 'success'
                    });
                };
                reader.readAsText(file);
            }
        };
        input.click();
    };

$scope.copyEnvToClipboard = function() {
        var textToCopy = '';
        
        if ($scope.advancedEnvMode) {
            textToCopy = $scope.advancedEnvText;
        } else {
            // Convert simple format to text
            var envLines = [];
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    envLines.push($scope.envList[key].name + '=' + $scope.envList[key].value);
                }
            }
            textToCopy = envLines.join('\n');
        }
        
        if (textToCopy) {
            navigator.clipboard.writeText(textToCopy).then(function() {
                new PNotify({
                    title: 'Copied to Clipboard',
                    text: 'Environment variables copied to clipboard',
                    type: 'success'
                });
            }).catch(function(err) {
                // Fallback for older browsers
                var textArea = document.createElement('textarea');
                textArea.value = textToCopy;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                new PNotify({
                    title: 'Copied to Clipboard',
                    text: 'Environment variables copied to clipboard',
                    type: 'success'
                });
            });
        }
    };

$scope.clearAdvancedEnv = function() {
        $scope.advancedEnvText = '';
        $scope.parsedEnvVars = {};
        $scope.advancedEnvCount = 0;
    };

var statusFile;

// Watch for changes to validate ports
    $scope.$watchGroup(['name', 'dockerOwner', 'memory'], function() {
        $scope.updateFormValidity();
    });
    
    $scope.$watch('eport', function() {
        $scope.updateFormValidity();
    }, true);
    
    $scope.formIsValid = false;
    
    $scope.updateFormValidity = function() {
        // Basic required fields
        if (!$scope.name || !$scope.dockerOwner || !$scope.memory) {
            $scope.formIsValid = false;
            return;
        }
        
        // Check if all port mappings are filled (if they exist)
        if ($scope.portType && Object.keys($scope.portType).length > 0) {
            for (var port in $scope.portType) {
                if (!$scope.eport || !$scope.eport[port]) {
                    $scope.formIsValid = false;
                    return;
                }
            }
        }
        
        $scope.formIsValid = true;
    };

$scope.createContainer = function () {

$scope.containerCreationLoading = true;
        $scope.installationDetailsForm = true;
        $scope.installationProgress = false;
        $scope.errorMessageBox = true;
        $scope.success = true;
        $scope.couldNotConnect = true;
        $scope.goBackDisable = true;

$scope.currentStatus = "Starting creation..";

url = "/docker/submitContainerCreation";

var name = $scope.name;
        var tag = $scope.tag;
        var memory = $scope.memory;
        var dockerOwner = $scope.dockerOwner;
        var image = $scope.image;
        var numberOfEnv = Object.keys($scope.envList).length;

// Prepare environment variables based on mode
        var finalEnvList = {};
        if ($scope.advancedEnvMode && $scope.parsedEnvVars) {
            // Use parsed environment variables from advanced mode
            finalEnvList = $scope.parsedEnvVars;
        } else {
            // Convert simple envList to proper format
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    finalEnvList[$scope.envList[key].name] = $scope.envList[key].value;
                }
            }
        }

var data = {
            name: name,
            tag: tag,
            memory: memory,
            dockerOwner: dockerOwner,
            image: image,
            envList: finalEnvList,
            volList: $scope.volList,
            advancedEnvMode: $scope.advancedEnvMode

};

try {
            $.each($scope.portType, function (port, protocol) {
                data[port + "/" + protocol] = $scope.eport[port];
            });
        }
        catch (err) {
        }

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);

function ListInitialDatas(response) {

if (response.data.createContainerStatus === 1) {
                $scope.currentStatus = "Successful. Redirecting...";
                window.location.href = "/docker/view/" + $scope.name
            }
            else {

$scope.containerCreationLoading = true;
                $scope.installationDetailsForm = true;
                $scope.installationProgress = false;
                $scope.errorMessageBox = false;
                $scope.success = true;
                $scope.couldNotConnect = true;
                $scope.goBackDisable = false;

$scope.errorMessage = response.data.error_message;
            }

}

function cantLoadInitialDatas(response) {

$scope.containerCreationLoading = true;
            $scope.installationDetailsForm = true;
            $scope.installationProgress = false;
            $scope.errorMessageBox = true;
            $scope.success = true;
            $scope.couldNotConnect = false;
            $scope.goBackDisable = false;

}
    };
    $scope.goBack = function () {
        $scope.containerCreationLoading = true;
        $scope.installationDetailsForm = false;
        $scope.installationProgress = true;
        $scope.errorMessageBox = true;
        $scope.success = true;
        $scope.couldNotConnect = true;
        $scope.goBackDisable = true;
        $("#installProgress").css("width", "0%");
    };

});

/* Javascript code for listing containers */

app.controller('listContainers', function ($scope, $http) {
    $scope.activeLog = "";
    $scope.assignActive = "";
    $scope.dockerOwner = "";

$scope.assignContainer = function (name) {
        console.log('assignContainer called with:', name);
        $scope.assignActive = name;
        console.log('assignActive set to:', $scope.assignActive);
        $("#assign").modal("show");
    };
    
    // Test function to verify scope is working
    $scope.testScope = function() {
        alert('Scope is working! assignActive: ' + $scope.assignActive + ', dockerOwner: ' + $scope.dockerOwner);
    };

$scope.submitAssignContainer = function () {
        console.log('submitAssignContainer called');
        console.log('dockerOwner:', $scope.dockerOwner);
        console.log('assignActive:', $scope.assignActive);
        
        if (!$scope.dockerOwner) {
            new PNotify({
                title: 'Error',
                text: 'Please select an owner',
                type: 'error'
            });
            return;
        }
        
        if (!$scope.assignActive) {
            new PNotify({
                title: 'Error', 
                text: 'No container selected',
                type: 'error'
            });
            return;
        }

url = "/docker/assignContainer";

var data = {name: $scope.assignActive, admin: $scope.dockerOwner};

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {

if (response.data.assignContainerStatus === 1) {
                new PNotify({
                    title: 'Container assigned successfully',
                    type: 'success'
                });
                window.location.href = '/docker/listContainers';
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });
            }
            $("#assign").modal("hide");
        }

function cantLoadInitialData(response) {
            console.log("not good");
            new PNotify({
                title: 'Unable to complete request',
                type: 'error'
            });
            $("#assign").modal("hide");
        }
    };

$scope.delContainer = function (name, unlisted=false) {
        (new PNotify({
            title: 'Confirmation Needed',
            text: 'Are you sure?',
            icon: 'fa fa-question-circle',
            hide: false,
            confirm: {
                confirm: true
            },
            buttons: {
                closer: false,
                sticker: false
            },
            history: {
                history: false
            }
        })).get().on('pnotify.confirm', function () {
            $('#imageLoading').show();
            url = "/docker/delContainer";

var data = {name: name, unlisted: unlisted};

var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
                console.log(response);

if (response.data.delContainerStatus === 1) {
                    location.reload();
                }
                else if (response.data.delContainerStatus === 2) {
                    (new PNotify({
                        title: response.data.error_message,
                        text: 'Delete anyway?',
                        icon: 'fa fa-question-circle',
                        hide: false,
                        confirm: {
                            confirm: true
                        },
                        buttons: {
                            closer: false,
                            sticker: false
                        },
                        history: {
                            history: false
                        }
                    })).get().on('pnotify.confirm', function () {
                        url = "/docker/delContainer";

var data = {name: name, unlisted: unlisted, force: 1};

var config = {
                            headers: {
                                'X-CSRFToken': getCookie('csrftoken')
                            }
                        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function cantLoadInitialData(response) {
                            $('#imageLoading').hide();
                        }
                    })
                }
                else {
                    $("#listFail").fadeIn();
                    $scope.errorMessage = response.data.error_message;
                }
                $('#imageLoading').hide();
            }

function cantLoadInitialData(response) {
                $('#imageLoading').hide();
            }
        })
    }

$scope.showLog = function (name, refresh = false) {
        $scope.logs = "";
        if (refresh === false) {
            $('#logs').modal('show');
            $scope.activeLog = name;
        }
        else {
            name = $scope.activeLog;
        }
        $scope.logs = "Loading...";

url = "/docker/getContainerLogs";

var data = {name: name};

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            console.log(response);

if (response.data.containerLogStatus === 1) {
                $scope.logs = response.data.containerLog;
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });

}
        }

function cantLoadInitialData(response) {
            new PNotify({
                title: 'Unable to complete request',
                type: 'error'
            });
        }
    };

url = "/docker/getContainerList";

var data = {page: 1};

var config = {
        headers: {
            'X-CSRFToken': getCookie('csrftoken')
        }
    };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
        console.log(response);

if (response.data.listContainerStatus === 1) {

var finalData = JSON.parse(response.data.data);
            $scope.ContainerList = finalData;
            console.log($scope.ContainerList);
            $("#listFail").hide();
        }
        else {
            $("#listFail").fadeIn();
            $scope.errorMessage = response.data.error_message;

}
    }

function cantLoadInitialData(response) {
        console.log("not good");
    }

$scope.getFurtherContainersFromDB = function (pageNumber) {

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

var data = {page: pageNumber};

dataurl = "/docker/getContainerList";

$http.post(dataurl, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            if (response.data.listContainerStatus === 1) {

var finalData = JSON.parse(response.data.data);
                $scope.ContainerList = finalData;
                $("#listFail").hide();
            }
            else {
                $("#listFail").fadeIn();
                $scope.errorMessage = response.data.error_message;
                console.log(response.data);

}
        }

function cantLoadInitialData(response) {
            console.log("not good");
        }

};
});

/* Java script code for containerr home page */

app.controller('viewContainer', function ($scope, $http, $interval, $timeout) {
    $scope.cName = "";
    $scope.status = "";
    $scope.savingSettings = false;
    $scope.loadingTop = false;
    $scope.statusInterval = null;
    $scope.statsInterval = null;
    
    // Advanced Environment Variable Functions for viewContainer
    $scope.advancedEnvMode = false;
    $scope.advancedEnvText = '';
    $scope.advancedEnvCount = 0;
    $scope.parsedEnvVars = {};
    
    // Auto-refresh status every 5 seconds
    $scope.startStatusMonitoring = function() {
        $scope.statusInterval = $interval(function() {
            $scope.refreshStatus(true); // Silent refresh
        }, 5000);
    };
    
    // Stop monitoring on scope destroy
    $scope.$on('$destroy', function() {
        if ($scope.statusInterval) {
            $interval.cancel($scope.statusInterval);
        }
        if ($scope.statsInterval) {
            $interval.cancel($scope.statsInterval);
        }
    });
    
    // Start monitoring when controller loads
    $timeout(function() {
        $scope.startStatusMonitoring();
    }, 1000);

$scope.recreate = function () {
        (new PNotify({
            title: 'Confirmation Needed',
            text: 'Are you sure?',
            icon: 'fa fa-question-circle',
            hide: false,
            confirm: {
                confirm: true
            },
            buttons: {
                closer: false,
                sticker: false
            },
            history: {
                history: false
            }
        })).get().on('pnotify.confirm', function () {
            $('#infoLoading').show();

url = "/docker/recreateContainer";
            var data = {name: $scope.cName};
            var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);
            function ListInitialData(response) {
                if (response.data.recreateContainerStatus === 1) {
                    new PNotify({
                        title: 'Action completed!',
                        text: 'Redirecting...',
                        type: 'success'
                    });
                    location.reload();
                }
                else {
                    new PNotify({
                        title: 'Unable to complete request',
                        text: response.data.error_message,
                        type: 'error'
                    });

}
                $('#infoLoading').hide();
            }

function cantLoadInitialData(response) {
                PNotify.error({
                    title: 'Unable to complete request',
                    text: "Problem in connecting to server"
                });
                $('#actionLoading').hide();
            }
        })
    };

$scope.addEnvField = function () {
        var countEnv = Object.keys($scope.envList).length;
        $scope.envList[countEnv + 1] = {'name': '', 'value': ''};
    };

// Advanced Environment Variable Functions for viewContainer
    $scope.toggleEnvMode = function() {
        if ($scope.advancedEnvMode) {
            // Switching to advanced mode - convert existing envList to text format
            $scope.convertToAdvancedFormat();
        } else {
            // Switching to simple mode - convert advanced text to envList
            $scope.convertToSimpleFormat();
        }
    };

// Import/Export Functions
    $scope.importEnvFromContainer = function() {
        // Show modal to select container to import from
        $scope.showContainerImportModal = true;
        $scope.loadContainersForImport();
    };

$scope.loadContainersForImport = function() {
        $scope.importLoading = true;
        $scope.importContainers = [];
        
        $http.get('/dockerManager/loadContainersForImport/', {
            params: {
                currentContainer: $scope.cName
            }
        }).then(function(response) {
            $scope.importContainers = response.data.containers || [];
            $scope.importLoading = false;
        }).catch(function(error) {
            new PNotify({
                title: 'Import Failed',
                text: 'Failed to load containers for import',
                type: 'error'
            });
            $scope.importLoading = false;
        });
    };

$scope.selectContainerForImport = function(container) {
        $scope.selectedImportContainer = container;
        $scope.loadEnvFromContainer(container.name);
    };

$scope.loadEnvFromContainer = function(containerName) {
        $scope.importEnvLoading = true;
        
        $http.get('/dockerManager/getContainerEnv/', {
            params: {
                containerName: containerName
            }
        }).then(function(response) {
            if (response.data.success) {
                var envVars = response.data.envVars || {};
                
                if ($scope.advancedEnvMode) {
                    // Convert to .env format
                    var envText = '';
                    for (var key in envVars) {
                        envText += key + '=' + envVars[key] + '\n';
                    }
                    $scope.advancedEnvText = envText;
                    $scope.parseAdvancedEnv();
                } else {
                    // Convert to simple mode
                    $scope.envList = {};
                    var index = 0;
                    for (var key in envVars) {
                        $scope.envList[index] = {'name': key, 'value': envVars[key]};
                        index++;
                    }
                }
                
                $scope.showContainerImportModal = false;
                new PNotify({
                    title: 'Import Successful',
                    text: 'Environment variables imported from ' + containerName,
                    type: 'success'
                });
            } else {
                new PNotify({
                    title: 'Import Failed',
                    text: response.data.message || 'Failed to import environment variables',
                    type: 'error'
                });
            }
            $scope.importEnvLoading = false;
        }).catch(function(error) {
            new PNotify({
                title: 'Import Failed',
                text: 'Failed to import environment variables',
                type: 'error'
            });
            $scope.importEnvLoading = false;
        });
    };

$scope.exportEnvToFile = function() {
        var envText = '';
        
        if ($scope.advancedEnvMode && $scope.advancedEnvText) {
            envText = $scope.advancedEnvText;
        } else {
            // Convert simple mode to .env format
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    envText += $scope.envList[key].name + '=' + $scope.envList[key].value + '\n';
                }
            }
        }
        
        if (!envText.trim()) {
            new PNotify({
                title: 'Nothing to Export',
                text: 'No environment variables to export',
                type: 'warning'
            });
            return;
        }
        
        // Create and download file
        var blob = new Blob([envText], { type: 'text/plain' });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = $scope.cName + '_environment.env';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        new PNotify({
            title: 'Export Successful',
            text: 'Environment variables exported to file',
            type: 'success'
        });
    };

// Docker Compose Functions
    $scope.generateDockerCompose = function() {
        // Get container information
        var containerInfo = {
            name: $scope.cName,
            image: $scope.image || 'nginx:latest',
            ports: $scope.ports || {},
            volumes: $scope.volList || {},
            environment: {}
        };
        
        // Collect environment variables
        if ($scope.advancedEnvMode && $scope.parsedEnvVars) {
            containerInfo.environment = $scope.parsedEnvVars;
        } else {
            for (var key in $scope.envList) {
                if ($scope.envList[key].name && $scope.envList[key].value) {
                    containerInfo.environment[$scope.envList[key].name] = $scope.envList[key].value;
                }
            }
        }
        
        // Generate docker-compose.yml content
        var composeContent = generateDockerComposeYml(containerInfo);
        
        // Create and download file
        var blob = new Blob([composeContent], { type: 'text/yaml' });
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'docker-compose.yml';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        new PNotify({
            title: 'Docker Compose Generated',
            text: 'docker-compose.yml file has been generated and downloaded',
            type: 'success'
        });
    };

// Helper function to generate Docker Compose YAML
    function generateDockerComposeYml(containerInfo) {
        var yml = 'version: \'3.8\'\n\n';
        yml += 'services:\n';
        yml += '  ' + containerInfo.name + ':\n';
        yml += '    image: ' + containerInfo.image + '\n';
        yml += '    container_name: ' + containerInfo.name + '\n';
        
        // Add ports
        var ports = Object.keys(containerInfo.ports);
        if (ports.length > 0) {
            yml += '    ports:\n';
            for (var i = 0; i < ports.length; i++) {
                var port = ports[i];
                if (containerInfo.ports[port]) {
                    yml += '      - "' + containerInfo.ports[port] + ':' + port + '"\n';
                }
            }
        }
        
        // Add volumes
        var volumes = Object.keys(containerInfo.volumes);
        if (volumes.length > 0) {
            yml += '    volumes:\n';
            for (var i = 0; i < volumes.length; i++) {
                var volume = volumes[i];
                if (containerInfo.volumes[volume]) {
                    yml += '      - ' + containerInfo.volumes[volume] + ':' + volume + '\n';
                }
            }
        }
        
        // Add environment variables
        var envVars = Object.keys(containerInfo.environment);
        if (envVars.length > 0) {
            yml += '    environment:\n';
            for (var i = 0; i < envVars.length; i++) {
                var envVar = envVars[i];
                yml += '      - ' + envVar + '=' + containerInfo.environment[envVar] + '\n';
            }
        }
        
        // Add restart policy
        yml += '    restart: unless-stopped\n';
        
        return yml;
    }

// Helper function to generate Docker Compose YAML (for runContainer)
    function generateDockerComposeYml(containerInfo) {
        var yml = 'version: \'3.8\'\n\n';
        yml += 'services:\n';
        yml += '  ' + containerInfo.name + ':\n';
        yml += '    image: ' + containerInfo.image + '\n';
        yml += '    container_name: ' + containerInfo.name + '\n';
        
        // Add ports
        var ports = Object.keys(containerInfo.ports);
        if (ports.length > 0) {
            yml += '    ports:\n';
            for (var i = 0; i < ports.length; i++) {
                var port = ports[i];
                if (containerInfo.ports[port]) {
                    yml += '      - "' + containerInfo.ports[port] + ':' + port + '"\n';
                }
            }
        }
        
        // Add volumes
        var volumes = Object.keys(containerInfo.volumes);
        if (volumes.length > 0) {
            yml += '    volumes:\n';
            for (var i = 0; i < volumes.length; i++) {
                var volume = volumes[i];
                if (containerInfo.volumes[volume]) {
                    yml += '      - ' + containerInfo.volumes[volume] + ':' + volume + '\n';
                }
            }
        }
        
        // Add environment variables
        var envVars = Object.keys(containerInfo.environment);
        if (envVars.length > 0) {
            yml += '    environment:\n';
            for (var i = 0; i < envVars.length; i++) {
                var envVar = envVars[i];
                yml += '      - ' + envVar + '=' + containerInfo.environment[envVar] + '\n';
            }
        }
        
        // Add restart policy
        yml += '    restart: unless-stopped\n';
        
        return yml;
    }

$scope.showTop = function () {
        $scope.topHead = [];
        $scope.topProcesses = [];
        $scope.loadingTop = true;
        $("#processes").modal("show");

url = "/docker/getContainerTop";
        var data = {name: $scope.cName};
        var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);
        function ListInitialData(response) {
            if (response.data.containerTopStatus === 1) {
                $scope.topHead = response.data.processes.Titles;
                $scope.topProcesses = response.data.processes.Processes;
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });

}
            $scope.loadingTop = false;
        }

function cantLoadInitialData(response) {
            PNotify.error({
                title: 'Unable to complete request',
                text: "Problem in connecting to server"
            });
            $scope.loadingTop = false;
        }

};

$scope.cRemove = function () {
        (new PNotify({
            title: 'Confirmation Needed',
            text: 'Are you sure?',
            icon: 'fa fa-question-circle',
            hide: false,
            confirm: {
                confirm: true
            },
            buttons: {
                closer: false,
                sticker: false
            },
            history: {
                history: false
            }
        })).get().on('pnotify.confirm', function () {
            $('#actionLoading').show();

url = "/docker/delContainer";
            var data = {name: $scope.cName, unlisted: false};
            var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);
            function ListInitialData(response) {
                if (response.data.delContainerStatus === 1) {
                    new PNotify({
                        title: 'Container deleted!',
                        text: 'Redirecting...',
                        type: 'success'
                    });
                    window.location.href = '/docker/listContainers';
                }
                else {
                    new PNotify({
                        title: 'Unable to complete request',
                        text: response.data.error_message,
                        type: 'error'
                    });
                }
                $('#actionLoading').hide();
            }

$scope.refreshStatus = function (silent) {
        url = "/docker/getContainerStatus";
        var data = {name: $scope.cName};
        var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);
        function ListInitialData(response) {
            if (response.data.containerStatus === 1) {
                var oldStatus = $scope.status;
                $scope.status = response.data.status;
                
                // Animate status change
                if (oldStatus !== $scope.status && !silent) {
                    // Add animation class
                    var statusBadge = document.querySelector('.status-badge');
                    if (statusBadge) {
                        statusBadge.classList.add('status-changed');
                        setTimeout(function() {
                            statusBadge.classList.remove('status-changed');
                        }, 600);
                    }
                    
                    new PNotify({
                        title: 'Status Updated',
                        text: 'Container is now ' + $scope.status,
                        type: 'info',
                        delay: 2000
                    });
                }
            }
            else {
                if (!silent) {
                    new PNotify({
                        title: 'Unable to complete request',
                        text: response.data.error_message,
                        type: 'error'
                    });
                }
            }
        }

function cantLoadInitialData(response) {
            if (!silent) {
                PNotify.error({
                    title: 'Unable to complete request',
                    text: "Problem in connecting to server"
                });
            }
        }
    };

$scope.addVolField = function () {
        $scope.volList[$scope.volListNumber] = {'dest': '', 'src': ''};
        $scope.volListNumber = $scope.volListNumber + 1;
    };
    $scope.removeVolField = function () {
        delete $scope.volList[$scope.volListNumber - 1];
        $scope.volListNumber = $scope.volListNumber - 1;
    };

$scope.saveSettings = function () {
        $('#containerSettingLoading').show();
        url = "/docker/saveContainerSettings";
        $scope.savingSettings = true;

var data = {
            name: $scope.cName,
            memory: $scope.memory,
            startOnReboot: $scope.startOnReboot,
            envConfirmation: $scope.envConfirmation,
            envList: finalEnvList,
            volList: $scope.volList,
            advancedEnvMode: $scope.advancedEnvMode
        };

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);
        function ListInitialData(response) {
            if (response.data.saveSettingsStatus === 1) {
                if ($scope.envConfirmation) {
                    new PNotify({
                        title: 'Done. Redirecting...',
                        type: 'success'
                    });
                    location.reload();
                }
                else {
                    new PNotify({
                        title: 'Settings Saved',
                        type: 'success'
                    });
                }
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });

}
            $('#containerSettingLoading').hide();
            $scope.savingSettings = false;
        }

function cantLoadInitialData(response) {
            new PNotify({
                title: 'Unable to complete request',
                text: "Problem in connecting to server",
                type: 'error'
            });
            $('#containerSettingLoading').hide();
            $scope.savingSettings = false;
        }

if ($scope.startOnReboot === true) {
            $scope.rPolicy = "Yes";
        }
        else {
            $scope.rPolicy = "No";
        }

};

$scope.cAction = function (action) {
        $('#actionLoading').show();
        url = "/docker/doContainerAction";
        var data = {name: $scope.cName, action: action};
        var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            console.log(response);

if (response.data.containerActionStatus === 1) {
                new PNotify({
                    title: 'Success!',
                    text: 'Action completed',
                    type: 'success'
                });
                $scope.status = response.data.status;
                $scope.refreshStatus()
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });

}
            $('#actionLoading').hide();
        }

function cantLoadInitialData(response) {
            PNotify.error({
                title: 'Unable to complete request',
                text: "Problem in connecting to server"
            });
            $('#actionLoading').hide();
        }

};

$scope.loadLogs = function (name) {
        $scope.logs = "Loading...";

url = "/docker/getContainerLogs";

var data = {name: name};

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            console.log(response);

if (response.data.containerLogStatus === 1) {
                $scope.logs = response.data.containerLog;
            }
            else {
                $scope.logs = response.data.error_message;

}
        }

function cantLoadInitialData(response) {
            console.log("not good");
            $scope.logs = "Error loading log";
        }
    };

// Command execution functionality
    $scope.commandToExecute = '';
    $scope.executingCommand = false;
    $scope.commandOutput = null;
    $scope.commandHistory = [];

$scope.showCommandModal = function() {
        $scope.commandToExecute = '';
        $scope.commandOutput = null;
        $("#commandModal").modal("show");
    };

$scope.executeCommand = function() {
        if (!$scope.commandToExecute.trim()) {
            new PNotify({
                title: 'Error',
                text: 'Please enter a command to execute',
                type: 'error'
            });
            return;
        }

$scope.executingCommand = true;
        $scope.commandOutput = null;

url = "/docker/executeContainerCommand";
        var data = {
            name: $scope.cName,
            command: $scope.commandToExecute.trim()
        };

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            console.log(response);
            $scope.executingCommand = false;

if (response.data.commandStatus === 1) {
                $scope.commandOutput = {
                    command: response.data.command,
                    output: response.data.output,
                    exit_code: response.data.exit_code
                };

// Add to command history
                $scope.commandHistory.unshift({
                    command: response.data.command,
                    timestamp: new Date()
                });

// Keep only last 10 commands
                if ($scope.commandHistory.length > 10) {
                    $scope.commandHistory = $scope.commandHistory.slice(0, 10);
                }

// Show success notification
                new PNotify({
                    title: 'Command Executed',
                    text: 'Command completed with exit code: ' + response.data.exit_code,
                    type: response.data.exit_code === 0 ? 'success' : 'warning'
                });
            }
            else {
                new PNotify({
                    title: 'Command Execution Failed',
                    text: response.data.error_message,
                    type: 'error'
                });
            }
        }

function cantLoadInitialData(response) {
            $scope.executingCommand = false;
            new PNotify({
                title: 'Command Execution Failed',
                text: 'Could not connect to server',
                type: 'error'
            });
        }
    };

$scope.selectCommand = function(command) {
        $scope.commandToExecute = command;
    };

$scope.clearOutput = function() {
        $scope.commandOutput = null;
    };

});

/* Java script code for docker image management */
app.controller('manageImages', function ($scope, $http) {
    $scope.tagList = [];
    $scope.showingSearch = false;
    $("#searchResult").hide();

$scope.pullImage = function (image, tag) {
        function ListInitialDatas(response) {
            if (response.data.installImageStatus === 1) {
                new PNotify({
                    title: 'Image pulled successfully',
                    text: 'Reloading...',
                    type: 'success'
                });
                location.reload()
            }
            else {
                new PNotify({
                    title: 'Failed to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });
            }

$('#imageLoading').hide();

}

function cantLoadInitialDatas(response) {
            $('#imageLoading').hide();
            new PNotify({
                title: 'Failed to complete request',
                type: 'error'
            });
        }

if (image && tag) {
            $('#imageLoading').show();

url = "/docker/installImage";
            var data = {
                image: image,
                tag: tag
            };
            var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);

}
        else {
            new PNotify({
                title: 'Unable to complete request',
                text: 'Please select a tag',
                type: 'info'
            });
        }

}

$scope.searchImages = function () {
        console.log($scope.searchString);
        if (!$scope.searchString) {
            $("#searchResult").hide();
        }
        else {
            $("#searchResult").show();
        }
        clearTimeout(delayTimer);
        delayTimer = setTimeout(function () {
            $('#imageLoading').show();

url = "/docker/searchImage";
            var data = {
                string: $scope.searchString
            };
            var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialDatas, cantLoadInitialDatas);

function ListInitialDatas(response) {
                if (response.data.searchImageStatus === 1) {
                    $scope.images = response.data.matches;
                    console.log($scope.images)
                }
                else {
                    new PNotify({
                        title: 'Failed to complete request',
                        text: response.data.error,
                        type: 'error'
                    });
                }

$('#imageLoading').hide();

}

function cantLoadInitialDatas(response) {
                $('#imageLoading').hide();
                new PNotify({
                    title: 'Failed to complete request',
                    type: 'error'
                });
            }
        }, 500);
    }

function populateTagList(image, page) {
        $('imageLoading').show();
        url = "/docker/getTags"
        var data = {
            image: image,
            page: page + 1
        };

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };
        $http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {

if (response.data.getTagsStatus === 1) {
                $scope.tagList[image].splice(-1, 1);
                $scope.tagList[image] = $scope.tagList[image].concat(response.data.list);

if (response.data.next != null) {
                    $scope.tagList[image].push("Load more");
                }
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });
            }
            $('#imageLoading').hide();
        }

function cantLoadInitialData(response) {
            new PNotify({
                title: 'Unable to complete request',
                text: response.data.error_message,
                type: 'error'
            });
            $('#imageLoading').hide();
        }
    }

$scope.runContainer = function (image) {
        $("#errorMessage").hide();
        if ($scope.imageTag[image] !== undefined) {
            $("#imageList").css("pointer-events", "none");
        }
        else {
            $("#errorMessage").show();
            $scope.errorMessage = "Please select a tag";
        }
    }

$scope.loadTags = function (event) {
        var pagesloaded = $(event.target).data('pageloaded');
        var image = event.target.id;

if (!pagesloaded) {
            $scope.tagList[image] = ['Loading...'];
            $(event.target).data('pageloaded', 1);

populateTagList(image, pagesloaded);
//             $("#"+image+" option:selected").prop("selected", false);
        }
    }

$scope.selectTag = function () {
        var image = event.target.id;
        var selectedTag = $('#' + image).find(":selected").text();

if (selectedTag == 'Load more') {
            var pagesloaded = $(event.target).data('pageloaded');
            $(event.target).data('pageloaded', pagesloaded + 1);

populateTagList(image, pagesloaded);
        }
    }

$scope.getHistory = function (counter) {
        $('#imageLoading').show();
        var name = $("#" + counter).val()

url = "/docker/getImageHistory";

var data = {name: name};

var config = {
            headers: {
                'X-CSRFToken': getCookie('csrftoken')
            }
        };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
            console.log(response);

if (response.data.imageHistoryStatus === 1) {
                $('#history').modal('show');
                $scope.historyList = response.data.history;
            }
            else {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });
            }
            $('#imageLoading').hide();
        }

$scope.rmImage = function (counter) {

(new PNotify({
            title: 'Confirmation Needed',
            text: 'Are you sure?',
            icon: 'fa fa-question-circle',
            hide: false,
            confirm: {
                confirm: true
            },
            buttons: {
                closer: false,
                sticker: false
            },
            history: {
                history: false
            }
        })).get().on('pnotify.confirm', function () {
            $('#imageLoading').show();

if (counter == '0') {
                var name = 0;
            }
            else {
                var name = $("#" + counter).val()
            }

url = "/docker/removeImage";

var data = {name: name};

var config = {
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            };

$http.post(url, data, config).then(ListInitialData, cantLoadInitialData);

function ListInitialData(response) {
                console.log(response);

if (response.data.removeImageStatus === 1) {
                    new PNotify({
                        title: 'Image(s) removed',
                        type: 'success'
                    });
                    window.location.href = "/docker/manageImages";
                }
                else {
                    new PNotify({
                        title: 'Unable to complete request',
                        text: response.data.error_message,
                        type: 'error'
                    });
                }
                $('#imageLoading').hide();
            }

function cantLoadInitialData(response) {
                new PNotify({
                    title: 'Unable to complete request',
                    text: response.data.error_message,
                    type: 'error'
                });
                $('#imageLoading').hide();
            }

})
    }
});

${this.title}

Code Editor : dockerManager.js