Integrating Kubernetes commands that can be run through webUI
Code —
<!DOCTYPE html>
<html>
<head>
<title> Kubernetes WebApp</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}.topnav {
overflow: hidden;
background-color: #050303;
}.topnav a {
float: left;
display: block;
color: rgb(255, 254, 254);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}.topnav a:hover {
background-color: dodgerblue;
color: #000;
}.topnav a.active {
background-color: dodgerblue;
color: #000;
}.topnav .icon {
display: none;
}@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body><div class=”topnav” id=”myTopnav”>
<a href=”#home” class=”active”>Home</a>
<a href=”https://kubernetes.io/docs/home/">Documentation</a>
<a href=”https://kubernetes.io/docs/reference/kubectl/cheatsheet/">CheatSheet</a>
<a href=”javascript:void(0);” class=”icon” onclick=”myFunction()”>
<i class=”fa fa-bars”></i>
</a>
</div><script>
function myFunction() {
var x = document.getElementById(“myTopnav”);
if (x.className === “topnav”) {
x.className += “ responsive”;
} else {
x.className = “topnav”;
}
}
</script></body>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<style>
body {
background-color: black;
font-family: Cursive;
}.glow {
font-size: 80px;
color: #fff;
text-align: center;
animation: glow 1s ease-in-out infinite alternate;
}@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px dodgerblue, 0 0 40px rgb(38, 145, 253), 0 0 50px rgb(53, 152, 250), 0 0 60px rgb(58, 156, 255), 0 0 70px dodgerblue;
}to {
text-shadow: 0 0 20px #fff, 0 0 30px rgb(95, 172, 248), 0 0 40px rgb(150, 200, 250), 0 0 50px rgb(193, 224, 255), 0 0 60px rgb(136, 193, 250), 0 0 70px dodgerblue, 0 0 80px dodgerblue;
}
}
</style>
</head>
<body><h1 class=”glow”, style=”font-family:Comic sans MS;”>KUBERNETES</h1>
</body>
</html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<! — Add icon library →
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
height:50px;
}.icon {
padding: 10px;
background: dodgerblue;
color: rgb(10, 1, 1);
min-width: 50px;
text-align: center;
}.input-field {
font-weight: bold;
font-size:20px;
border-radius:10px;
width: 100%;
padding: 10px;
outline: none;
}.input-field:focus {
border: 2px solid dodgerblue;
}/* Set a style for the submit button */
.btn {
background-color: dodgerblue;
color: white;
padding: 15px 20px;
border-radius: 10px;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: 20px;
font-weight: bold;
}.btn:hover {
opacity: 1;
color: dodgerblue;
background-color: #fff;
}
</style>
</head>
<body><! — <form action=”/action_page.php” style=”max-width:500px;margin:auto”> →
<h1 style=”color:dodgerblue;font-family:cursive;” > Enter Your Requirements </h1>
<div class=”input-container”>
<i class=”fa fa-info-circle icon”></i>
<input id=”n1" class=”input-field” placeholder=”Command” >
</div><script>
function run( p2 , p3)
{
var xhr = new XMLHttpRequest();
var i = document.getElementById(“n1”).value.toLowerCase();
xhr.open(“GET”, `http://192.168.225.163/cgi-bin/k8s/k8s-server.py?x=${i}&n=${p2}&a=${p3}`, true);
xhr.send();
xhr.onload = function()
{
var output = xhr.responseText;
document.getElementById(“p1”).innerHTML = output;
}
};function launchPodDep() {
var image = prompt(‘Enter image name:’);
var name = prompt(‘Enter pod/Deployment name :’);
run(name , image);
};
function deletePodDep() {
var delp = prompt(‘Enter Deployment/Pod Name you want to delete’);
run(delp);
};
function showpods(){
run();
};
function scale(){
var name = prompt(“Enter Your Deployment name : “);
var count = prompt(“Enter no. copies you want : “);
run(name,count);
};function exposePodDep(){
var name = prompt(“Enter Your Deployment/Pod name : “);
var port = prompt(“Enter the Port No. For Exposing Deployment : “);
run(name , port);
};function deleteAll(){
run();
}function ask() {
var str = document.getElementById(‘n1’).value
var lowercase = str.toLowerCase();
var arr = lowercase.split(“ “);if (((arr.indexOf(“deploy”) > -1) || (arr.indexOf(“deployment”) > -1) || (arr.indexOf(“pod”) > -1) || (arr.indexOf(“container”) > -1) ) && ((arr.indexOf(“launch”) > -1) || (arr.indexOf(“create”) > -1))) {
alert(“pod”)
launchPodDep();
}else if (((arr.indexOf(“delete”) > -1) || (arr.indexOf(“remove”) > -1) || (arr.indexOf(“destroy”) > -1)) && ((arr.indexOf(“pod”) > -1) || (arr.indexOf(“container”) > -1) ||(arr.indexOf(“deploy”) > -1) || (arr.indexOf(“deployment”) > -1) || (arr.indexOf(“rc”) > -1) || (arr.indexOf(“svc”) > -1) || (arr.indexOf(“service”) > -1))) {
deletePodDep();
}else if (((arr.indexOf(“show”) > -1) || (arr.indexOf(“list”) > -1) || (arr.indexOf(“display”) > -1)) && ((arr.indexOf(“pod”) > -1) || (arr.indexOf(“pods”) > -1) || (arr.indexOf(“container”) > -1) ||(arr.indexOf(“deploy”) > -1) || (arr.indexOf(“deployment”) > -1) || (arr.indexOf(“service”) > -1) || (arr.indexOf(“svc”) > -1) || (arr.indexOf(“rc”) > -1) || (arr.indexOf(“nodes”) > -1))) {
showpods();
}else if (((arr.indexOf(“create”) > -1) || (arr.indexOf(“scale”) > -1) || (arr.indexOf(“replicate”) > -1)) && ((arr.indexOf(“deploy”) > -1) || (arr.indexOf(“deployment”) > -1))) {
scale();
}else if (((arr.indexOf(“expose”) > -1) || (arr.indexOf(“create”) > -1) || (arr.indexOf(“disclose”) > -1)) && ((arr.indexOf(“loadbalancer”) > -1) || (arr.indexOf(“deploy”) > -1) || (arr.indexOf(“deployment”) > -1) || (arr.indexOf(“service”) > -1) || (arr.indexOf(“pod”) > -1) || (arr.indexOf(“pods”) > -1))) {
exposePodDep();
}else if (((arr.indexOf(“delete”) > -1) || (arr.indexOf(“destroy”) > -1) || (arr.indexOf(“clean”) > -1)) && ((arr.indexOf(“all”) > -1) || (arr.indexOf(“environment”) > -1) || (arr.indexOf(“infrastructure”) > -1))) {
deleteAll();
}else {
alert(“The syntax is wrong…try again!!”)
}
};</script>
<button onclick=”ask();” class=”btn”>Submit</button>
<! — </form> →</body>
</html>
<div> w</div>
<div> w</div>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 20px;
border: none;
outline: none;
background-color: dodgerblue;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}#myBtn:hover {
background-color: #fff;
color:dodgerblue;
}
</style>
</head>
<body><button onclick=”topFunction()” id=”myBtn” title=”Go to top”>Top</button>
<div style=”background-color:dodgerblue;color:white;padding:20px;font-weight:bold;text-align:center;”>Output</div>
<div id=’p1' style=”background-color:lightgrey;padding:30px 30px 2500px”>Here is your
<strong>Output..!</strong>.</div><script>
//Get the button
var mybutton = document.getElementById(“myBtn”);// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = “block”;
} else {
mybutton.style.display = “none”;
}
}// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script></body>
</html>
Next python in CGI-bin
code —
#!/usr/bin/python3
import cgi
import subprocess as spprint(“content-type: text/html”)
print(“Access-Control-Allow-Origin:*”)
print()cmd = cgi.FieldStorage().getvalue(“x”)
n = cgi.FieldStorage().getvalue(“n”) #n will mostly have the name
a = cgi.FieldStorage().getvalue(“a”) #a will take extra arguments# get pods deploy svc rc
if (“show” in cmd or “list” in cmd or “display” in cmd) and (“deploy” in cmd or “deployment” in cmd or “pod” in cmd or “container” in cmd or “svc” in cmd or “service” in cmd or “rc” in cmd):
if (“deploy” in cmd or “deployement” in cmd):
op = sp.getoutput(“sudo kubectl get deployment”) #list deploymentelif (“pod” in cmd or “containers” in cmd or “pods” in cmd):
op = sp.getoutput(“sudo kubectl get pods”) #list pods.elif (“rc” in cmd):
op = sp.getoutput(“sudo kubectl get rc”) # list rcelse:
op = sp.getoutput(“sudo kubectl get svc”) # list svc# create pods deploy
elif (“create” in cmd or “launch” in cmd or “build” in cmd ) and (“deployment” in cmd or “deploy” in cmd or “pod” in cmd or “container” in cmd):
if (“deployment” in cmd or “deploy” in cmd):
op = sp.getoutput(f”sudo kubectl create deployment {n} — image={a}”) #create deploymentelse:
op = sp.getoutput(f”sudo kubectl run {n} — image={a}”) #create a pod# get nodes
elif (“list” in cmd or “show” in cmd or “display” in cmd) and (“nodes” in cmd):
op = sp.getoutput(“sudo kubectl get nodes”)# kubectl expose deployment pods
elif (“expose” in cmd or “disclose” in cmd or “create” in cmd) and (“pods”in cmd or “pod” in cmd or “container” in cmd or “deploy” in cmd or “deployment” in cmd or “loadbalancer” in cmd) :
if (“deployment” in cmd or “deploy” in cmd):
op = sp.getoutput(f”sudo kubectl expose deployment {n} — port={a} — type=NodePort”)else:
op = sp.getoutput(f”sudo kubectl expose pod {n} — port={a} — type=NodePort”)# scale the deployment
elif (“create” in cmd or “scale” in cmd or “replicate” in cmd) and (“deploy” in cmd or “deployment” in cmd or “replica” in cmd or “replicas” in cmd):
op = sp.getoutput(f”sudo kubectl scale deployment {n} — replicas={a}”)# delete the pod deploy svc
elif (“delete” in cmd or “remove” in cmd ) and (“deploy” in cmd or “deployment” in cmd or “pod” in cmd or “container” in cmd or “svc” in cmd or “service” in cmd):if (“deploy” in cmd or “deployement” in cmd):
op = sp.getoutput(f”sudo kubectl delete deployment {n}”)elif (“pod” in cmd or “pods” in cmd or “container” in cmd):
op = sp.getoutput(f”sudo kubectl delete pod {n} “)else:
op = sp.getoutput(f”sudo kubectl delete svc {n} “)# delete entire infrastructure
elif (“delete” in cmd or “remove” in cmd or “destroy” in cmd or “clean” in cmd) and (“infrastructure” in cmd or “all” in cmd or “environment” in cmd):
op = sp.getoutput(“sudo kubectl delete all — all”)else:
print(“Your requirement is not satisfied !”)print(“<pre>”)
print(“<b>”)
print(op)
print(“</b>”)
print(“</pre>”)
Thanks!!
