51
loading...
PIP-OS-WebAPP
Hello everyone,
In this blog we are going to see how we can integrate JavaScript with technologies and can build something great.
PIP-OS is a WebAPP where user can work on Docker, Kubernetes and much more technologies in the future.
Prerequisite:
So now let's start with Docker
Docker WebAPP can run the Docker commands in browser and you can see the output on your screen.
Use case that is solves:
Tech Stack used:
For the front end part the main component created is input box that will take the docker command as an input.
Below is the HTML and CSS code for creating an input box.
<div class="center-docker">
<div class="d-flex justify-content-center">
<div class="searchbar text-white">
[root @localhost~]# <input id="inp" class="search_input text-white" type="text" name="" placeholder="Enter the command">
<a onclick="lw()" class="search_icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>Here we can see the input id = "inp" which is associated with the JavaScript code that will get the value with the following id from the Input box.
<script>
function lw() {
var i = document.getElementById("inp").value
var xhr = new XMLHttpRequest();
xhr.open("GET","http://localhostIP/cgi-bin/PIPOS/docker.py?x="+i,true);
xhr.send();
xhr.onload = function() {
var output = xhr.responseText;
document.getElementById("d1").innerHTML = output;
}
}
</script>here this part of code takes the input from the user through input box and send the input to the python script which is present in the cgi-bin directory.
Common Gateway interface(CGI) is a way of running the program from the webserver. For Detail
import cgi
import subprocess
import time
print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing
#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
cmd=f.getvalue("x")
#print(cmd)
o = subprocess.getoutput("sudo " +cmd)
print(o)So this cgi program will get the input from the server and run the command in the browser.
Subprocess is a library that is used to run the new application or program through the python code by creating the process.
so now start the server and open the webpage in the browser and run the docker commands in the browser.
Kubernetes WebAPP can run kubernetes command in the browser, it takes input as a language like we normally talk not commands and then it process that query and shows output accordingly.
Use case that it solves"
Tech stack Used:
For front end the main part is input box that will take the input as a query from the user.
To create the input box used HTML and CSS.
<div class="center-docker">
<div class="d-flex justify-content-center">
<div class="searchbar text-white">
[root @localhost~]# <input class="search_input text-white" id="inp1" type="text" name="" placeholder="Enter the command">
<a onclick="lw()" class="search_icon">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>here we can see the id associated with input box and function associated with the button. so as soon as user will input query and click in the button than function will get triggered that is associated with JavaScript code that will take input and sends that input to the cgi program that will process the input and shows output in the browser.
import cgi
import subprocess as sp
import time
print("context-type: text/html")
print()
#print("let's build something new Nitesh")#here now if now I change anything it will change in page without refreshing
#time.sleep(10) #this holds program for 10 seconds and then run the prog auto
f=cgi.FieldStorage()
#print(cmd)
#cmd = f.getvalue("x")
#o = subprocess.getoutput(cmd + " --kubeconfig admin.conf")
#print(o)
query = f.getvalue("x")
if "show pods" in query:
cmd = "kubectl get pods --kubeconfig admin.conf"
o=sp.getoutput(cmd)
print(o)
elif "show deployment" in query:
cmd = "kubectl get deployments --kubeconfig admin.conf"
o = sp.getoutput(cmd)
print(o)here is a program that will process input and show output in the browser as discussed above.
Here admin.conf file is a configuration file of kubernetes that will help to run the kubernetes in the Linux.
To watch the Demo video 👇
51