{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block title %}{% trans "Overview" %} - {{ compute.name }}{% endblock %}
{% block content %}
            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{{ compute.name }}</h1>
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa fa-dashboard"></i> {% trans "Overview" %}
                        </li>
                        <li>
                            <i class="fa fa-hdd-o"></i> <a href="{% url 'storages' compute.id %}">{% trans "Storages" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-sitemap"></i> <a href="{% url 'networks' compute.id %}">{% trans "Networks" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-wifi"></i> <a href="{% url 'interfaces' compute.id %}">{% trans "Interfaces" %}</a>
                        </li>
                        <li>
                            <i class="fa fa-key"></i> <a href="{% url 'secrets' compute.id %}">{% trans "Secrets" %}</a>
                        </li>
                    </ol>
                </div>
            </div>
            <!-- /.row -->

            {% include 'errors_block.html' %}

            <div class="row" id="max-width-page">
                <h3 class="page-header">{% trans "Basic details" %}</h3>
                <div class="col-xs-4 col-sm-3">
                    <p>{% trans "Hostname" %}</p>
                    <p>{% trans "Hypervisor" %}</p>
                    <p>{% trans "Memory" %}</p>
                    <p>{% trans "Architecture" %}</p>
                    <p>{% trans "Logical CPUs" %}</p>
                    <p>{% trans "Processor" %}</p>
                    <p>{% trans "Connection" %}</p>
                </div>
                <div class="col-xs-8 col-sm-7">
                    <p>{{ hostname }}</p>
                    <p>{{ hypervisor }}</p>
                    <p>{{ host_memory|filesizeformat }}</p>
                    <p>{{ host_arch }}</p>
                    <p>{{ logical_cpu }}</p>
                    <p>{{ model_cpu }}</p>
                    <p>{{ uri_conn }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">{% trans "Performance" %}</h3>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "CPU utilization" %}</h3>
                        </div>
                        <div class="panel-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
                                    <canvas id="cpuChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-long-arrow-right"></i> {% trans "RAM utilization" %}</h3>
                        </div>
                        <div class="panel-body">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-moving-line-chart" style="padding: 0px; position: relative;">
                                    <canvas id="memChart" width="735" height="160"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
{% endblock %}
{% block script %}
<script src="{% static "js/Chart.min.js" %}"></script>
<script>
    var cpuLineData = {
        labels : [0, 0, 0, 0, 0],
        datasets : [
            {
                fillColor: "rgba(241,72,70,0.5)",
                strokeColor: "rgba(241,72,70,1)",
                pointColor : "rgba(241,72,70,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [0, 0, 0, 0, 0]
            }
        ]
    }

    var cpu_ctx = document.getElementById("cpuChart").getContext("2d");
    var cpuChart = new Chart(cpu_ctx).Line(cpuLineData, {
        animation: false,
        pointDotRadius: 2,
        scaleLabel: "<%=value%> %",
        scaleOverride: true,
        scaleSteps: 5,
        scaleStepWidth: 20,
        scaleStartValue: 0,
        responsive: true
    });

    var memLineData = {
        labels : [0, 0, 0, 0, 0],
        datasets : [
            {
                fillColor : "rgba(249,134,33,0.5)",
                strokeColor : "rgba(249,134,33,1)",
                pointColor : "rgba(249,134,33,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [0, 0, 0, 0, 0]
            }
        ]
    }

    var mem_ctx = $("#memChart").get(0).getContext("2d");
    var memChart = new Chart(mem_ctx).Line(memLineData, {
        animation: false,
        pointDotRadius: 2,
        scaleLabel: "<%=value%> Mb",
        responsive: true
    });

    window.setInterval(function graph_usage() {
        $.getJSON('{% url 'compute_graph' compute_id %}', function (data) {
            cpuChart.scale.xLabels = data.timeline;
            memChart.scale.xLabels = data.timeline;
            for (var i = 0; i < 5; i++) {
                cpuChart.datasets[0].points[i].value = data.cpudata[i];
                memChart.datasets[0].points[i].value = data.memdata[i];
            }
            cpuChart.update();
            memChart.update();
        });
    }, 5000);
</script>
{% endblock %}