Synnefo

{% extends "im/account_base.html" %}

{% load filters %}

{% block headjs %}

{{ block.super }}

<script src="{{ IM_STATIC_URL }}js/usage.js"></script>        

{% endblock %}

{% block page.body %}

<div class="maincol {% block innerpage.class %}{% endblock %}"> 

        <h2>RESOURCE USAGE</h2>

        <div class="stats clearfix">

                <ul>

                        {% for rdata in resource_usage %}

            <li class="clearfix  {{ rdata.load_class }} {{ rdata.name|get_value_after_dot }}" 

                    data-resourcekey="{{ rdata.name }}" data-units="{{ rdata.unit }}">

                                         <div class="img-wrap">&nbsp;</div>

                    <div class="info" data-currvalue="{{ rdata.currValue }}"

                                      data-maxvalue="{{ rdata.maxValue }}">

                                                <h3>{{ rdata.report_desc }}</h3>

                                                <p>                                                        

                                                {% if rdata.unit == 'bytes' %}

                        <span class="currValue">

                            {{ rdata.currValue }}

                        </span> out of  

                        <span class="maxValue">

                            {{ rdata.maxValue }}

                        </span>

                        {% else %}

                        <span class="currValue">

                            <span class="value">{{ rdata.currValue }}</span>

                        </span>

                        out of  

                        <span class="maxValue">

                            <span class="value">{{ rdata.maxValue }}</span>

                            <span class="unit">{{ rdata.unit }}</span>

                        </span>

                                                {% endif %}

                        {{rdata.pluralized_display_name}}

                                                </p>

                                        </div>

                                        <div class="bar" data-steps="">

                                                <div>

                                                        {% if rdata.ratio > 18 %}

                                                        <span style="width:{{ rdata.ratio_limited|floatformat }}%;" class="hovered">

                                <em data-value="{{ rdata.ratio }}" class="value">{{ rdata.ratio|floatformat }}&#37; &nbsp;&nbsp;</em>        

                                                        </span>

                                                        {% else %}

                                                        <span style="width:{{ rdata.ratio_limited|floatformat }}%;">

                                         

                                                        </span>

                                                        <em data-value="{{ rdata.ratio }}" class="value">

                                        {{ rdata.ratio|floatformat }}%   

                                </em>

                                                        {% endif %}

                                                </div>

                                        </div>

                                 </li>

                         {% endfor%}

                </ul>

        </div>    

</div>

<script>

    $(document).ready(function(){

        var usageClient = new UsageClient({

            'url': '{% url resource_usage %}?json=1',

            'dataType': 'json',

            'container': 'div.stats'

        });

        window.setInterval(function() {

            usageClient.load();

        }, {{ usage_update_interval }});

        usageClient.load();

    })

</script>

{% endblock %}