docklet/web/templates/monitor/hosts.html

{% extends 'base_AdminLTE.html' %}

{% block title %}Docklet | Hosts{% endblock %}

{% block panel_title %}Hosts Info{% endblock %}

{% block panel_list %}
<ol class="breadcrumb">
  <li>
      <a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
  </li>
      <li class="active">
      <strong>HostsInfo</strong>
  </li>
</ol>
{% endblock %}

{% block content %}
<ul class="nav nav-tabs" role="tablist" id="myTabs">
{% for master in allmachines %}
{% if loop.index == 1%}
<li role="presentation" class="active"><a href="#{{master.split("@")[1]}}" data-toggle="tab" aria-controls="{{master.split("@")[1]}}">{{master.split("@")[1]}}</a></li>
{% else %}
<li role="presentation"><a href="#{{master.split("@")[1]}}" data-toggle="tab" aria-controls="{{master.split("@")[1]}}">{{master.split("@")[1]}}</a></li>
{% endif %}
{% endfor %}
</ul>
<div id="myTabContent" class="tab-content">
{% for master in allmachines %}
{% if loop.index == 1 %}
<div role="tabpanel" class="tab-pane active" aria-labelledby="{{master.split("@")[1]}}" id="{{master.split("@")[1]}}">
{% else %}
<div role="tabpanel" class="tab-pane" aria-labelledby="{{master.split("@")[1]}}" id="{{master.split("@")[1]}}">
{% endif %}
	  <div class="row">
	     <div class="col-md-12">
         <div class="box box-info">
              <div class="box-header with-border">
		      <h3 class="box-title">{{master.split("@")[1]}}</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
                     <div class="box-body table-responsive">
			     <p>
			     <a href="/cloud/{{master.split("@")[0]}}/node/add/"><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>Add Host</button></a>
			     </p>
                         <table class="table table-bordered">
                             <thead>
                             <tr>
				 <th>NO</th>
                                 <th>IP Address</th>
                                 <th>Status</th>
				 <th>Nodes running</th>
				 <th>Cpu used</th>
				 <th>Mem used</th>
				 <th>Disk used</th>
				 <th>Summary</th>
				 <th>Delete</th>
                             </tr>
                             </thead>
                             <tbody>
                             {% for phym in allmachines[master] %}
                             <tr>
                                 <td>{{ loop.index }}</td>
                                 <td>{{ phym['ip'] }}</td>
                                 {% if phym['status'] == 'STOPPED' %}
				 <td><div id='{{master.split("@")[1]}}_{{ loop.index }}_status' class="label label-danger">Stopped</div></td>
                                 {% else %}
				 <td><div id='{{master.split("@")[1]}}_{{ loop.index }}_status' class="label label-primary">Running</div></td>
                                 {% endif %}
                                 <td>
					 <label id='{{master.split("@")[1]}}_{{ loop.index }}_conrunning'>{{ phym['containers']['running'] }}</label> /
					 <a href='/hosts/{{master.split("@")[0]}}/{{ phym['ip'] }}/containers/' id='{{master.split("@")[1]}}_{{ loop.index }}_contotal' >{{ phym['containers']['total'] }}</a>
				 </td>
				 <td id='{{master.split("@")[1]}}_{{ loop.index }}_cpu'>--</td>
				 <td id='{{master.split("@")[1]}}_{{ loop.index }}_mem'>--</td>
				 <td id='{{master.split("@")[1]}}_{{ loop.index }}_disk'>--</td>
				 <td><a class="btn btn-info btn-xs" href='/hosts/{{master.split("@")[0]}}/{{ phym['ip'] }}/'>Realtime</a></td>
				 <td><button class="btn btn-xs btn-default">Delete</button></td>
			     </tr>
                             {% endfor %}
                             </tbody>
                         </table>

                     </div>
                 </div>
             </div>
	   </div>
</div>
{% endfor %}
{% endblock %}

{% block script_src %}
<script type='text/javascript'>
   function update(url,index)
   {

       var MB = 1024;
       $.post(url+"/status/",{},function(data){
	       console.log(data);
		var status = data.monitor.status;
		if(status == 'RUNNING')
       		{
           	    var tmp = $("#"+index+"_status");
                    tmp.removeClass();
	            tmp.addClass("label label-primary");
	   	    tmp.html("Running");
       		}
       		else if(status == 'STOPPED')
       		{
           	    var tmp = $("#"+index+"_status");
           	    tmp.removeClass();
	   	    tmp.addClass("label label-danger");
	   	    tmp.html("Stopped");
       		}

       		$.post(url+"/containers/",{},function(data){
       			var containers = data.monitor.containers;
       			$("#"+index+"_contotal").html(containers.total);
       			$("#"+index+"_conrunning").html(containers.running);
       			},"json");

		if(status == 'STOPPED')
		{
		       	$("#"+index+"_cpu").html('--');
		       	$("#"+index+"_mem").html('--');
		       	$("#"+index+"_disk").html('--');
			return;
		}

       		$.post(url+"/cpuinfo/",{},function(data){
		       	var idle = data.monitor.cpuinfo.idle;
			    var usedp = (100 - idle).toFixed(2);
		       	$("#"+index+"_cpu").html(String(usedp)+"%");
		       	},"json");

       		$.post(url+"/meminfo/",{},function(data){
			var used = data.monitor.meminfo.used;
			var total = data.monitor.meminfo.total;
			var usedp = String(((used/total)*100).toFixed(2))+"%";
		       	$("#"+index+"_mem").html(usedp);
		       	},"json");

  	     	$.post(url+"/diskinfo/",{},function(data){
		       	var val = data.monitor.diskinfo;
                var usedp = val[0].percent;
		       	$("#"+index+"_disk").html(String(usedp)+"%");
	               	},"json");
       		},"json");
   }

   function updateAll()
   {
        var host = window.location.host;
   {% for master in allmachines %}
   {% for phym in allmachines[master] %}
   	url = "//" + host + "/monitor/" + '{{master.split("@")[0]}}' + "/hosts/" + '{{phym["ip"]}}';
        // url = url0 + '{{ phym['ip'] }}';
	update(url,'{{master.split("@")[1]}}_{{ loop.index }}');
   {% endfor %}
   {% endfor %}
   }
   setInterval(updateAll,5000);

</script>
{% endblock %}