<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="Omnios Zone Administration Utility">
    <meta name="author" content="uplink">
    <title><%= title %></title>
    <!-- Bootstrap 4 core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    <!-- Custom styles for this template -->
    <link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
    <link href="/stylesheets/uplink.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <!-- Google Charts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

    <script>
    function allowDrop(ev) {
      if(ev.target.className == "card-block") {
        ev.preventDefault();
      }
    }

    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }
  
    function zoneShutdown(vmIndex, zoneName, currState) {
      if(currState == 'installed') {
        $.get('/api/boot/' + vmIndex + '/' + zoneName);
      }
      else if(currState == 'running') {
        $.get('/api/poweroff/' + vmIndex + '/' + zoneName);
      }
    }
    </script>
  </head>

  <body>
    <div class="container-fluid" id="container">
      <div class="row row-offcanvas row-offcanvas-left">
        <div class="sidebar">
          <span class="logo"><img src="/images/uplink.png"></span>
          <div class="sidebar-razmik"></div>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Home"><i class="fa fa-home"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Servers"><i class="fa fa-server"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Virtual Servers"><i class="fa fa-cloud"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" data-toggle="tooltip" data-placement="right" title="Favourites"><i class="fa fa-star"></i></a>
          <div class="sidebar-razmik"></div>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Statistics"><i class="fa fa-pie-chart"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Settings"><i class="fa fa-wrench"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="About ..."><i class="fa fa-info-circle"></i></a>
          <div class="sidebar-razmik"></div>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="User Profile"><i class="fa fa-user"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Sign In"><i class="fa fa-sign-in"></i></a>
          <a href="#" class="btn btn-outline-success stranski-gumb" role="button" aria-pressed="true" data-toggle="tooltip" data-placement="right" title="Register"><i class="fa fa-user-plus"></i></a>
        </div>
        <div class="sidebar-menu">
          <div class="header">
            <h4>SERVERS</h4>
            <p id="serverCount">15 servers configured</p>
          </div>
          <div id="serverlist">
            <div class="kartica">
              <div class="card-block">
                <div class="card-menu">
                  <a href="#"><i class="fa fa-info-circle"></i></a>
                  <a href="#"><i class="fa fa-star-o"></i></a>
                  <a href="#"><i class="fa fa-trash-o"></i></a>
                </div>
                <h5 class="card-title">Moj strežnik</h5>
                <small>192.168.5.100</small>
                <p>Nekaj o strežniku</p>
              </div>
            </div>
          </div>
          
          
         
          <div class="header">
            <small>Uplink:SI</small>
          </div>
        </div><!-- sidebar-menu -->
        <script>
          $(function () {
            $('[data-toggle="tooltip"]').tooltip()
          })
        </script>
        <div class="container-fluid main col-sm-12" id="container">
          <div class="top-menu">
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-thermometer-three-quarters"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-user-o"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-area-chart "></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-exclamation-triangle"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-folder-open"></i></a>
            <span class="separator"></span>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-plus"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
            <a href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Iskalnik"><i class="fa fa-server"></i></a>
          </div>
          <div class="page-header">
            <h1 class="display-1" id="title"><%= title %></h1>
          </div>
          <div class="row">
            <div class="col-4">
              <canvas id="chart-area-cpu"></canvas>
            </div>
            <div class="col-4">
              <canvas id="chart-area-mem"></canvas>
            </div>
            <div class="col-4">
              <canvas id="chart-area-load"></canvas>
            </div>
          </div>
          <div class="row">
            &nbsp;
          </div>
          <div class="row" id="vm-list"></div>


          <div id="prstat"><img src="/images/ajax-loader.gif" /></div>
          <h1>List Zones</h1>
          <table class="table" id="list-zones"></table>
          <h1>List ZFS</h1>
          <table class="table" id="list-zfs"></table>
          <h1>Show Phys</h1>
          <table class="table" id="show-phys"></table>
          <h1>Show Vnic</h1>
          <table class="table" id="show-vnic"></table>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
      $.getJSON('/api/getServers', function(servers) {
        $('#serverlist').html('');
        for(var i = 0; i < servers.servers.length; i++) {
          $('#serverlist').append('<div ondrop="drop(event)" ondragover="allowDrop(event)" class="kartica rounded" id="server_'+ i +'">' +
              '<div class="card-block">'+
                '<div class="card-menu">'+
                  '<a href="#"><i class="fa fa-info-circle"></i></a>'+
                  '<a href="#"><i class="fa fa-star-o"></i></a>'+
                  '<a href="#"><i class="fa fa-trash-o"></i></a>'+
                '</div>'+
                '<h5 class="card-title">'+ servers.servers[i].name +'</h5>'+
                '<small>'+ servers.servers[i].ip +'</small>'+
                '<p>'+ servers.servers[i].description +'</p>'+
              '</div>'+
            '</div>');
        }
        $('#serverCount').html(servers.servers.length + ' servers configured');
      });
    });

    $( "#serverlist" ).on('click', ".kartica", function() {
      var index = this.id.toString().substring(7,this.id.toString().length);
      $.getJSON('/api/getServers', function(servers) {
        $('#title').html(servers.servers[index].name);
      });
      $.getJSON('/api/list-zones/'+index, function(data) {
        $('#list-zones').html("<tr><th>ID</th><th>NAME</th><th>STATUS</th><th>ZONEPATH</th><th>BRAND</th><th>IP</th></tr>");
        data.forEach(function(element) {
          $('#list-zones').append("<tr><td>" + element.id + "</td>" +
                                      "<td>" + element.name + "</td>" +
                                      "<td>" + element.status + "</td>" +
                                      "<td>" + element.zone_path + "</td>" +
                                      "<td>" + element.brand + "</td>" +
                                      "<td>" + element.ip + "</td>");
        }, this);
      });
      $.getJSON('/api/list-zfs/'+index, function(data) {
        $('#list-zfs').html("<tr><th>NAME</th><th>USED</th><th>AVAIL</th><th>REFER</th><th>MOUNTPOINT</th></tr>");
        data.forEach(function(element) {
          $("#list-zfs").append("<tr><td>" + element.name + "</td>" +
                                    "<td>" + element.used + "</td>" +
                                    "<td>" + element.avail + "</td>" +
                                    "<td>" + element.refer + "</td>" +
                                    "<td>" + element.mountpoint + "</td>")
        }, this);
      });
      $.getJSON('/api/show-phys/'+index, function(data) {
        $('#show-phys').html("<tr><th>LINK</th><th>MEDIA</th><th>STATE</th><th>SPEED</th><th>DUPLEX</th><th>DEVICE</th></tr>");
        data.forEach(function(element) {
          $("#show-phys").append("<tr><td>" + element.link + "</td>" +
                                     "<td>" + element.media + "</td>" +
                                     "<td>" + element.state + "</td>" +
                                     "<td>" + element.speed + "</td>" +
                                     "<td>" + element.duplex + "</td>" +
                                     "<td>" + element.device + "</td>")
        }, this);
      });
      $.getJSON('/api/show-vnic/'+index, function(data) {
        $('#show-vnic').html("<tr><th>LINK</th><th>OVER</th><th>SPEED</th><th>MACADDRESS</th><th>MACADDRTYPE</th><th>VID</th></tr>");
        data.forEach(function(element) {
          $("#show-vnic").append("<tr><td>" + element.link + "</td>" +
                                     "<td>" + element.over + "</td>" +
                                     "<td>" + element.speed + "</td>" +
                                     "<td>" + element.macaddress + "</td>" +
                                     "<td>" + element.macaddrtype + "</td>" +
                                     "<td>" + element.vid + "</td>")
        }, this)
      });
      $.get('/api/prstat/'+index, function(data) {
        $('#prstat').html(data);
      });
      $.getJSON('/api/list-zones/'+index, function(data) {
        $('#vm-list').html("");
        data.forEach(function(element) {
          $("#vm-list").append("<div class='col-4 vm-card'>" +
              "<div class='card' draggable='true' ondragstart='drag(event)'>" +
                "<div class='card-block'>" +
                  "<div class='rotate'>" +
                    "<i class='fa fa-server fa-5x'></i>" +
                  "</div>" +
                  "<div class='vm-card-menu'>" + 
                    "<a href='#' class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></i></a>" +
                    "<a href='#'><i class='fa fa-info-circle'></i></a>" +
                    "</div>" +
                  "<h4>" + element.name + "</h4>" +
                  "<p>Brand: " + element.brand + "</p>" +
                  "<p>Status: " + element.status + "</p>" +
                "</div>" +
              "</div>" +
            "</div>");
        }, this);
      });

      var cpuPoint = 0;

      $.getJSON('/api/statsCPU/'+index, function(data) {
        configCPU.data = data;
        console.log(data);
        window.myDoughnutCPU.update();
      });
      $.getJSON('/api/statsMEM/'+index, function(data) {
        configMEM.data = data;
        console.log(data);
        window.myDoughnutMEM.update();
      });
      $.getJSON('/api/cpu-load/'+index, function(data) {
        configLOAD.data.labels.push(cpuPoint.toString());
        cpuPoint ++;
        configLOAD.data.datasets[0].data.push(data[0]);
        if(configLOAD.data.datasets[0].data.length > 25) {
          configLOAD.data.datasets[0].data.splice(0,1);
          configLOAD.data.labels.splice(0,1);
        }
        console.log(data);
        window.myLine.update();
      });

      setInterval(function() {
        $.getJSON('/api/statsCPU/'+index, function(data) {
          configCPU.data = data;
          console.log(data);
          window.myDoughnutCPU.update();
        });

        $.getJSON('/api/statsMEM/'+index, function(data) {
          configMEM.data = data;
          console.log(data);
          window.myDoughnutMEM.update();
        });

        $.getJSON('/api/cpu-load/'+index, function(data) {
          configLOAD.data.labels.push(cpuPoint.toString());
          cpuPoint ++;
          configLOAD.data.datasets[0].data.push(data[0]);
          if(configLOAD.data.datasets[0].data.length > 25) {
            configLOAD.data.datasets[0].data.splice(0,1);
            configLOAD.data.labels.splice(0,1);
          }
          console.log(data);
          window.myLine.update();
        });

        $.getJSON('/api/list-zones/'+index, function(data) {
          $('#vm-list').html("");
          data.forEach(function(element) {
            $("#vm-list").append("<div class='col-4 vm-card'>" +
                "<div class='card' draggable='true' ondragstart='drag(event)'>" +
                  "<div class='card-block'>" +
                    "<div class='rotate'>" +
                      "<i class='fa fa-server fa-5x'></i>" +
                    "</div>" +
                    "<div class='vm-card-menu'>" + 
                      "<a href='#' class='"+ element.status +"' onclick=\"zoneShutdown(" + index + ", '" + element.name + "', '" + element.status +"')\"><i class='fa fa-power-off'></i></a>" +
                      "<a href='#'><i class='fa fa-info-circle'></i></a>" +
                      "</div>" +
                    "<h4>" + element.name + "</h4>" +
                    "<p>Brand: " + element.brand + "</p>" +
                    "<p>Status: " + element.status + "</p>" +
                  "</div>" +
                "</div>" +
              "</div>");
          }, this);
        });
      }, 15000);
    });

    var configCPU = {
      type: 'doughnut',
      data: {},
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'CPU Utilisation'
        },
        animation: {
          animateScale: false,
          animateRotate: false
        }
      }
    };

    var configMEM = {
      type: 'doughnut',
      data: {},
      options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Memory Utilisation'
        },
        animation: {
          animateScale: false,
          animateRotate: false
        }
      }
    };

    var configLOAD = {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          label: "CPU Load",
          backgroundColor: 'red',
          borderColor: 'red',
          data: [],
          fill: false,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        title:{
          display:true,
          text:'CPU Load'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: false,
              labelString: 'Point'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: false,
              labelString: 'Value'
            }
          }]
        }
      }
    };

    $(document).ready(function() {
      var ctxCPU = document.getElementById("chart-area-cpu").getContext("2d");
      window.myDoughnutCPU = new Chart(ctxCPU, configCPU);

      var ctxMEM = document.getElementById("chart-area-mem").getContext("2d");
      window.myDoughnutMEM = new Chart(ctxMEM, configMEM);

      var ctxLOAD = document.getElementById("chart-area-load").getContext("2d");
      window.myLine = new Chart(ctxLOAD, configLOAD);
    });
    
    </script>
  </body>
</html>
