“GUI for Kubernetes…”

Hello Guys,

Today, We are going to Learn about “How to Create a Dashboard for Kubernetes using HTML, CSS and JS…” First let’s get some information about Kubernetes.

# What is Containerization and why we use Containers ?

Containerization is the Upgraded version Of Virtualization which provides virtual OS in the form of Containers. These containers are the light weight OS which can be installed, Configured and Boot within a second. The need of Containerization comes when Virtualization cannot help us, if we want to do same setup in 1000 systems we have to install OS which is time consuming task and requires extra resources . Instead if we use Containers it saves time by quick deployment and saves resources.

We use Container Engine to run these Containers and one of mainly used Container Engine is Docker…

Docker is the great tool but there are many cases in which Docker(Container Tecnology) fails to fulfill our demands :

1. If one of the Container OS fails, Docker don’t come to know about it and it can show downtime in App deployed in that OS. Means it cannot monitor OS, we have to do it manually.
2. It requires time and efforts to deploy same setup again if previous OS setup fails and there are higher chances of Human errors .
3. Management of these containers become a challenge for us because we cannot see to it 24/7.

To solve these Issues we came up with a software soution which will Monitor our Containers 24/7 and has a capacity to Launch new container if previous one fails. That is the reason Kubernetes is called as Container Management Tool .

Why use Kubernetes?

Kubernetes helps you to control the resource allocation and traffic management for cloud applications and microservices. It also helps to simplify various aspects of service-oriented infrastructures. Kubernetes allows you to assure where and when containerized applications run and helps you to find resources and tools you want to work with.

Key Features Of Kubernetes :=

1. Kubernetes helps to manage containerized applications in various types of physical, virtual, and cloud environments.

2. Automated Scheduling

3. Self-Healing Capabilities

4. Automated rollouts & rollback

5. Horizontal Scaling & Load Balancing

6. Offers environment consistency for development, testing, and production

7. Infrastructure is loosely coupled to each component can act as a separate unit

8. Provides a higher density of resource utilization

9. Offers enterprise-ready features

10. Application-centric management

11. Auto-scalable infrastructure

12. You can create predictable infrastructure

Here is the architecture of Kubernetes :

Let’s Continue with the Demo and Functionalities of Our App…

Meet Google Drive - One place for all your files

Guys, See the above Video for the Initial page of Our WebApp…

In the Video You can see a Dashboard with Buttons named Pod, Deployment, Services, PVC and Replica Set…

These are some of the resources of Kubernetes which we have Automated in such a way that even a person who don’t know command can also handle the GUI very well.

Here as you can see there is some Number mentioned below every resource That is the count of Items of that resource. Eg: There are 0 deployments

This is a block of Code which will contact to our CGI server and Get the live Count of the Resources for us and display on the Screen .

Now, if we click on one of the Resources like if we click on Pod as a resource then, We will see Screen something as…

Menu of Launched pods

This is a list of Pods which we launched and if we want to do some more actions on pod like Expose, Describe, Delete then Click on the “menu” symbol on the Pod Tab…

The following Video will show you the Working of this tab…

2.mp4

Guys, Watch the Video…

Now in Video you can see the Dashboard having all the pods Listed and also if we click on “Describe” it will show us the details of the Pod. Similarly we can do it for all the other options…

<script>
var request = new XMLHttpRequest()
request.open('GET', "http://35.154.159.248/cgi-bin/podapi.py?verb=get", true)
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
data.forEach(element => {
var completelist= document.getElementById("glist");
//completelist.innerHTML += "<li>" + "<div class='googlemap'>" +  element['metadata']['name'] +  "</div>"+ "<div class='dropdown'><button class='dropbtn'><i class='material-icons'>list</i></button><div class='dropdown-content'><a href='#'>Link 1</a><a href='#'>Link 2</a><a href='#'>Link 3</a></div></div>" +
//"<div class='clearfix'></div></li>";
name=element['metadata']['name']
completelist.innerHTML += "<li>" + "<label class='Label' for='City'>"+ element['metadata']['name'] +"</label><span class ='dropdown'><i class='material-icons'>list</i><div class='dropdown-content'><span>Expose</span><span>Delete</span><span id=`${name}` onclick='openNav(this.id)'>Describe</span></div></span></li>";
});
} else {
console.log('error')
}
}
request.send()
function openNav(pname) {
podname="anydep-8554b488b5-6jkcd"
var request = new XMLHttpRequest()
url = "http://35.154.159.248/cgi-bin/podapi.py?verb=describe&podname="+podname;
request.open('GET', url, true)
request.onload = function () {
var  data = JSON.stringify(JSON.parse(this.response),null,'\t');
if (request.status >= 200 && request.status < 400) {
var desc= document.getElementById("mySidenav");
desc.innerHTML = "<a href='javascript:void(0)' class='closebtn' onclick='closeNav()''>&times;</a>" + data;
//completelist.innerHTML += "<li>" + "<div class='googlemap'>" +  element['metadata']['name'] +  "</div>"+ "<div class='dropdown'><button class='dropbtn'><i class='material-icons'>list</i></button><div class='dropdown-content'><a href='#'>Link 1</a><a href='#'>Link 2</a><a href='#'>Link 3</a></div></div>" +
} else {
console.log('error')
}
}
request.send()
document.getElementById("mySidenav").style.width = "700px";
document.getElementById("main").style.marginLeft = "700px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>

The Above Script will Open and Close the Pod Menu for us and Also it will connect with our Backend CGI server and Do the required operations on click on “Expose”, “Delete” or “Describe” pod options…

Like this we did for each resource and finally created a Dashboard for Kubernetes…

This was a Team Task, I would like to Thank all My Teammates for their Support…

Team Members : =

1. Kaustubh Chaudhari
2. Juzer Patanwala
3. Archishman Ghosh
4. Pranay Chinche
5. Deepak Saini

That’s it for the Day and stay tunned for more content…

Thank you!!!