{% load i18n %}{% load staticfiles %}<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="icon" href="{% static "img/favicon.ico" %}">
    <title>{% block title %}PyDash v{{ version }}{% endblock %}</title>
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/bootstrap-responsive.min.css" %}" rel="stylesheet">
    <link href="{% static "css/fonts.css" %}" rel="stylesheet">
    <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">
    <link href="{% static "css/style.css" %}" rel="stylesheet">
    <link href="{% static "css/dashboard.css" %}" rel="stylesheet">

    {% block style %}{% endblock %}

    <script>
    /* Get pydash relative url that will be used to find the endpoints of the
       server. This is necessary because a user can change the url prefix
       of pydash in urls.py. */
       window.pydashUrls = {{ pydashUrls | safe }};
    </script>
</head>
<body>
<!-- Had a hard time pressing the logout button :(
<a href="https://github.com/k3oni/pydash"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:99999999;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div class="navbar navbar-fixed-top" style="">
    <div class="navbar-inner">
	<div class="container">
            <a class="brand" href="/">pyDash v{{ version }}</a>
            <ul class="btn btn-mini">
                {% if request.user.is_authenticated or user.is_authenticated %}
                        <a href="{% url 'logout' %}">{% trans "Sign out" %}</a>
                {% else %}
                        <a href="{% url 'login' %}">{% trans "Sign in" %}</a>
                {% endif %}
            </ul>
            <div class="nav-collapse">
	    </div>
        </div>
    </div>
 </div>
<div class="subnavbar visible-desktop visible-tablet">
  <div class="subnavbar-inner">
      <div class="container">
        <ul class="mainnav">
            <li><a href="#refresh-os"><i class="fa fa-dashboard"></i><span>General</span> </a> </li>
            <li><a href="#refresh-df"><i class="fa fa-hdd-o"></i><span>Disk</span> </a> </li>
            <li><a href="#refresh-cpu"><i class="fa fa-check"></i><span>CPU</span> </a> </li>
            <li><a href="#refresh-ram"><i class="fa fa-list-alt"></i><span>RAM</span> </a> </li>
            <li><a href="#refresh-load"><i class="fa fa-bolt"></i><span>Load</span> </a> </li>
            <li><a href="#refresh-online"><i class="fa fa-user"></i><span>Users</span> </a> </li>
            <li><a href="#refresh-netstat"><i class="fa fa-angle-down"></i><span>Netstat</span> </a> </li>
    	    <li><a href="#refresh-ispeed"><i class="fa fa-exchange"></i><span>Network</span> </a> </li>
    	    <li><a href="#refresh-ps"><i class="fa fa-list-alt"></i><span>Processes</span> </a> </li>
    	    <li></li>
	</ul>
      </div>
      <!-- /container -->
    </div>
  <!-- /subnavbar-inner -->
</div>
<div class="main">
  <div class="main-inner">
    <div class="container">
    {% block content %}

     <div class="row">

        <div class="span3">
         <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-dashboard"></i>
              <h3>General Info</h3><i class="fa fa-minus"></i>
              <div id="refresh-os">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
                <br>
              <div style="text-align:center;">
		<b>OS:</b> <span class="" id="get-osname"></span><br>
              	<b>Uptime:</b> <span class="" id="get-uptime"></span> Hours<br>
              	<b>Hostname:</b> <span class="" id="get-hostname"></span><br>
              	<b>Kernel:</b> <span class="" id="get-kernel"></span><br>
		<b>CPU(s):</b> <span class="" id="get-cpucount"></span> x <span class="" id="get-cputype"></span>
              	<br><br>
              </div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>

        <div class="span3">
         <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-check"></i>
              <h3>CPU Usage %</h3><i class="fa fa-minus"></i>
              <div id="refresh-cpu">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        	<p></p>
                <canvas id="cpuuChart" width="270" height="180"></canvas>
                <div>
        	    <span class="cpuf">{% trans "Free" %}</span>
        	    <span class="cpuu">{% trans "Used" %}</span>
    		</div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>

        <div class="span6">
         <div class="widget widget-nopad">
            <div class="widget-header"> <i class="fa fa-list-alt"></i>
                <h3>Memory Usage</h3><i class="fa fa-minus"></i>
                <div id="refresh-ram">
                </div>
            </div>
            <!-- /widget-header -->
                <div class="widget-content">
                    <p></p>
                    <canvas id="memoryChart" width="560" height="200"></canvas>
                    <div>
        		<span class="memf">{% trans "Free" %}</span>
        		<span class="memu">{% trans "Used" %}</span>
    		    </div>
                </div>
                <!-- /widget-content -->

              </div>
        </div>

     </div>

    <div class="row">
         <div class="span6">
           <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-hdd-o"></i>
              <h3>Disk Usage</h3><i class="fa fa-minus"></i>
              <div id="refresh-df">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
		<table id="get_disk" class="table table-hover table-condensed table-bordered" >
		</table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
          <div class="span6">
            <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-bolt"></i>
              <h3>Load Average</h3><i class="fa fa-minus"></i>
              <div id="refresh-load">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
                <p></p>
                <canvas id="loadChart" width="560" height="200"></canvas>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
          </div>
        <!-- /span6 -->
        </div>
    <!-- /row -->


      <div class="row">
    	<div class="span6">
           <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="fa fa-level-up"></i>
              <h3>IP Adresses</h3><i class="fa fa-minus"></i>
              <div id="refresh-ip">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
		<table id="get_ips" class="table table-hover table-condensed table-bordered">
		</table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
         <!-- /span -->

         <div class="span3">
           <div class="widget">
            <div class="widget-header"> <i class="fa fa-exchange"></i>
              <h3>Internet Traffic</h3><i class="fa fa-minus"></i>
              <div id="refresh-ispeed">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        	<p></p>
                <canvas id="trfChart" width="270" height="200"></canvas>
                <div>
        	    <span class="netin">{% trans "In" %}</span>
        	    <span class="netout">{% trans "Out" %}</span>
    		</div>
            </div>

            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div><!-- /span -->

         <div class="span3">
           <div class="widget">
            <div class="widget-header"> <i class="fa fa-angle-up"></i>
              <h3>Disk Reads/Writes</h3><i class="fa fa-minus"></i>
              <div id="refresh-diskio">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
        	<p></p>
                <canvas id="dskChart" width="270" height="200"></canvas>
                <div>
        	    <span class="diskr">{% trans "Reads" %}</span>
        	    <span class="diskw">{% trans "Writes" %}</span>
    		</div>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
         </div>
         <!-- /span -->
      </div>
      <!-- /row -->

    <div class="row">
        <div class="span6">
             <div class="widget widget-table action-table">
                <div class="widget-header"> <i class="fa fa-group"></i>
                  <h3>Online</h3><i class="fa fa-minus"></i>
                  <div id="refresh-online">
                  </div>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                    <table id="get_users" class="table table-hover table-condensed table-bordered">
                    </table>
                </div>
                <!-- /widget-content -->
             </div>
              <!-- /widget -->
        </div>
	    <!-- /span -->
        <div class="span6">
             <div class="widget widget-table action-table">
                <div class="widget-header"> <i class="fa fa-angle-down"></i>
                  <h3>Netstat</h3><i class="fa fa-minus"></i>
                  <div id="refresh-netstat">
                  </div>
                </div>
                <!-- /widget-header -->
                <div class="widget-content">
                    <table id="get_netstat" class="table table-hover table-condensed table-bordered">
                    </table>
                </div>
                <!-- /widget-content -->
             </div>
              <!-- /widget -->
        </div>
	    <!-- /span -->
    </div>
    <!-- /row -->

      <div class="row">
        <div class="span12">
          <div class="widget">
            <div class="widget-header"> <i class="fa fa-list-alt"></i>
              <h3> Processes </h3><i class="fa fa-minus"></i>
              <div id="refresh-ps">
              </div>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
		<table id="get_proc" class="table table-hover table-condensed table-bordered">
		</table>
            </div>
            <!-- /widget-content -->
          </div>
          <!-- /widget -->
        </div>
        <!-- /span -->
      </div>
      <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /main-inner -->
 </div>
<!-- /main -->

<div class="footer">
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span6">&copy; 2014 by <a href="http://github.com/k3oni">Florian Neagu</a> </div>
        <!-- /span12 -->
      </div>
      <!-- /row -->
    </div>
    <!-- /container -->
  </div>
  <!-- /footer-inner -->
</div>
<!-- /footer -->

{% endblock %}

{% block script %}
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/base.js" %}"></script>
<script src="{% static "js/Chart.min.js" %}"></script>
<script src="{% static "js/jquery.dataTables.min.js" %}"></script>
<script src="{% static "js/dashboard.js" %}"></script>
<!--[if lte IE 8]>
    <script src="{% static "js/excanvas.js" %}"></script>
<![endif]-->
<script type="text/javascript">

var mem_ctx = $("#memoryChart").get(0).getContext("2d");
        var memChart = new Chart(mem_ctx);
        function memory_usage(){
            $.getJSON(pydashUrls['memusage'], function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%> Mb"
                }
                memChart.Line(data, options);
            });
        }

var cpu_ctx = $("#cpuuChart").get(0).getContext("2d");
        var cpuChart = new Chart(cpu_ctx);
        function cpuu_usage(){
            $.getJSON(pydashUrls['cpuusage'], function(data) {
                var options = {
                    percentageInnerCutout : 50,
                    segmentStrokeWidth : 0
                }
                cpuChart.Doughnut(data, options);
            });
        }

var trf_ctx = $("#trfChart").get(0).getContext("2d");
        var trfChart = new Chart(trf_ctx);
        function traffic_usage(){
            $.getJSON(pydashUrls['gettraffic'], function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                trfChart.Line(data, options);
            });
        }

var dsk_ctx = $("#dskChart").get(0).getContext("2d");
        var dskChart = new Chart(dsk_ctx);
        function disk_io(){
            $.getJSON(pydashUrls['getdiskio'], function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                dskChart.Line(data, options);
            });
        }

var load_ctx = $("#loadChart").get(0).getContext("2d");
        var loadChart = new Chart(load_ctx);
        function load_average(){
            $.getJSON(pydashUrls['getdiskio'], function(data) {
                var options = {
                    animation : false,
                    pointDotRadius : 2,
                    scaleLabel : "<%=value%>"
                }
                loadChart.Line(data, options);
            });
        }

$(function() {
            window.setInterval('dashboard.getProc()', {{ time_refresh_long }});
            window.setInterval('memory_usage()', {{ time_refresh }});
            window.setInterval('load_average()', {{ time_refresh }});
            window.setInterval('cpuu_usage()', {{ time_refresh }});
            window.setInterval('traffic_usage()', {{ time_refresh_net }});
            window.setInterval('disk_io()', {{ time_refresh_net }});
            window.setInterval('dashboard.getUptime()', {{ time_refresh_long }});
            window.setInterval('dashboard.getDisk()', {{ time_refresh_long }});
            window.setInterval('dashboard.getUsers()', {{ time_refresh_long }});
            window.setInterval('dashboard.getNetstat()', {{ time_refresh_long }});
        });

$(function pageLoad() {
    dashboard.getProc();
    memory_usage();
    load_average();
    cpuu_usage();
    traffic_usage();
    disk_io();
    dashboard.getOSname();
    dashboard.getUptime();
    dashboard.getHostname();
    dashboard.getKernel();
    dashboard.getCPUcount();
    dashboard.getCPUtype();
    dashboard.getDisk();
    dashboard.getUsers();
    dashboard.getNetstat();
    dashboard.getIps();
    });
</script>


{% endblock %}

</body>
</html>
