I have created a container management panel using nodejs and html.In this panel whenever the page is loaded, it will display all the currently running docker containers,their status(up or exited) and the name of the image.I want to know how I can change the properties of the container such as the port ie, if a container is running on a particular port say 3000,then if the user wants to change it to another port say 8000,then he should be able to change the port in the panel itself.
I have created 3 buttons called Deploy, Decommission and Properties in the panel. The deploy and Decommison buttons should obviously deploy and decommission the containers respectively. The properties button/tab should allow the user to change the port of the container as mentioned and allow to re-run/restart the container on this new port. Currently, I haven't created any onlick events for any of these buttons because I was unsure of how I can achieve this using my existing code.
index.js
var express = require("express");
var fs = require("fs");
var app = express();
var path = require("path");
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
app.get('/out', function(req,res){
const {execSync} = require('child_process');
let output = execSync("docker ps -a --format 'table {{.Names}}\\t{{.Status}}\\t{{.Image}}'", { encoding: 'utf8'});
const array = [];
var lines = output.toString().split('\n').filter((column) => column.length != 0);
for(i=0; i<lines.length; i++) {
array.push(lines[i].split(' ').filter((column) => column.length != 0))
}
const response = {headers:array[0], rows:array.slice(1, array.length)};
res.type('json')
res.end(JSON.stringify(response));
});
app.listen(5000);
console.log("Server running at Port 5000");
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get("/out", function(data, status){
var html = '<table class="table table-striped">';
html += '<tr>';
$.each(data.headers, function(index, value){
html += '<th>'+ value+'</th>';
});
html += '</tr>';
$.each(data.rows, function(index, line){
html += '<tr>';
$.each(line, function(index, value){
html += '<td>'+ value+'</td>';
})
html += '<td>' + '<button onclick="myFunction()">Deploy</button>'+'</td>';
html += '<td>' + '<button onclick="myFunction()">Decommision</button>'+'</td>';
html += '<td>' + '<button onclick="myFunction()">Properties</button>'+'</td>';
html += '</tr>';
});
html += '</table>';
$("#content").append(html);
});
});
</script>
</head>
<body>
<div id="content"> </div>
</body>
</html>
How can I modify my code accordingly to achieve these functionalities. Kindly help by using my code as an example for better understanding please.
