Revision 4e03ba30 snf-astakos-app/astakos/im/templates/im/resource_usage.html

b/snf-astakos-app/astakos/im/templates/im/resource_usage.html
1 1 
{% extends "im/account_base.html" %}
2 2 

  		





  3
  
  
    
{% load filters %}


  		





  
  3
  
    
{% load filters astakos_tags %}


  		





  4
  4
  
    

  		





  5
  5
  
    
{% block headjs %}


  		





  6
  6
  
    
{{ block.super }}


  		





  ......




  8
  8
  
    
{% endblock %}


  		





  9
  9
  
    

  		





  10
  10
  
    
{% block page.body %}


  		





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


  		





  12
  11
  
    

  		





  13
  
  
    
	<h2>RESOURCE USAGE</h2>


  		





  14
  
  
    
	<div class="stats clearfix">


  		





  15
  
  
    
		<ul>


  		





  16
  
  
    
			{% for rdata in resource_usage %}


  		





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


  		





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


  		





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


  		





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


  		





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


  		





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


  		





  23
  
  
    
						<p>							


  		





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


  		





  25
  
  
    
                        <span class="currValue">


  		





  26
  
  
    
                            {{ rdata.currValue }}


  		





  27
  
  
    
                        </span> out of  


  		





  28
  
  
    
                        <span class="maxValue">


  		





  29
  
  
    
                            {{ rdata.maxValue }}


  		





  30
  
  
    
                        </span>


  		





  31
  
  
    
                        {% else %}


  		





  32
  
  
    
                        <span class="currValue">


  		





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


  		





  34
  
  
    
                        </span>


  		





  35
  
  
    
                        out of  


  		





  36
  
  
    
                        <span class="maxValue">


  		





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


  		





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


  		





  39
  
  
    
                        </span>


  		





  40
  
  
    
						{% endif %}


  		





  41
  
  
    
                        {{rdata.pluralized_display_name}}


  		





  42
  
  
    
						</p>


  		





  43
  
  
    
					</div>


  		





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


  		





  45
  
  
    
						<div>


  		





  46
  
  
    
							


  		





  47
  
  
    
							<span style="width:{{ rdata.ratio_limited|floatformat }}%;" {% if rdata.ratio > 22 %}class="hovered"{% endif %}>


  		





  48
  
  
    
                               


  		





  49
  
  
    
							</span>


  		





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


  		





  51
  
  
    
						</div>


  		





  52
  
  
    
					</div>


  		





  53
  
  
    
		 		</li>


  		





  54
  
  
    
		 	{% endfor%}


  		





  55
  
  
    
		</ul>


  		





  56
  
  
    
			 


  		





  57
  
  
    
	</div>    


  		





  
  12
  
    
<script id="quotaTpl" type="text/template">


  		





  
  13
  
    
  {% verbatim %}


  		





  
  14
  
    
  {{#resources}}


  		





  
  15
  
    
  <li class="clearfix {{ resource_name }} {{ usage.cls }}" 


  		





  
  16
  
    
      data-resource="{{ name }}">


  		





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


  		





  
  18
  
    
  <div class="info" data-currvalue="" data-maxvalue="">


  		





  
  19
  
    
    <h3>{{ report_desc }}</h3>


  		





  
  20
  
    
    <p>


  		





  
  21
  
    
      <span class="currValue">{{ usage.curr }}</span> out of 


  		





  
  22
  
    
      <span class="maxValue">{{ usage.max }}</span> {{ report_desc }}


  		





  
  23
  
    
    </p>


  		





  
  24
  
    
  </div>


  		





  
  25
  
    
  <div class="bar">


  		





  
  26
  
    
    <div>


  		





  
  27
  
    
        <span style="width:{{ usage.perc }}%"></span>


  		





  
  28
  
    
        <em 


  		





  
  29
  
    
            class="value" 


  		





  
  30
  
    
            style="left: {{ usage.label_left }}%; color: {{ usage.label_color }}">


  		





  
  31
  
    
            {{ usage.perc }} %


  		





  
  32
  
    
        </em>


  		





  
  33
  
    
    </div>


  		





  
  34
  
    
  </div>


  		





  
  35
  
    
  </li>


  		





  
  36
  
    
  {{/resources}}


  		





  
  37
  
    
  {% endverbatim %}


  		





  
  38
  
    
</script>


  		





  
  39
  
    

  		





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


  		





  
  41
  
    
    <h2>RESOURCE USAGE</h2>


  		





  
  42
  
    
    <div id="quota-container">


  		





  
  43
  
    
    </div>


  		





  58
  44
  
    
</div>


  		





  59
  45
  
    
<script>


  		





  60
  
  
    
    $(document).ready(function(){


  		





  61
  
  
    
        var usageClient = new UsageClient({


  		





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


  		





  63
  
  
    
            'dataType': 'json',


  		





  64
  
  
    
            'container': 'div.stats'


  		





  65
  
  
    
        });


  		





  66
  
  
    
        


  		





  67
  
  
    
        window.setInterval(function() {


  		





  68
  
  
    
            usageClient.load();


  		





  69
  
  
    
        }, {{ usage_update_interval }});


  		





  70
  
  
    
        usageClient.load();


  		





  71
  
  
    
    })


  		





  
  46
  
    
$(document).ready(function(){


  		





  
  47
  
    
  var usageView = new UsageView({


  		





  
  48
  
    
    'url': '{% url astakos-api-quotas %}',


  		





  
  49
  
    
    'cookie_name': '{{ token_cookie_name|safe }}',


  		





  
  50
  
    
    'dataType': 'json',


  		





  
  51
  
    
    'container': '#quota-container',


  		





  
  52
  
    
    'quotas': {{ current_usage|safe }},


  		





  
  53
  
    
    'meta': {


  		





  
  54
  
    
      'resources': {{ resource_catalog|safe }},


  		





  
  55
  
    
      'groups': {{ resource_groups|safe }},


  		





  
  56
  
    
      'resources_order': {{ resources_order|safe }}


  		





  
  57
  
    
    }


  		





  
  58
  
    
  });


  		





  
  59
  
    
  window.usageView = usageView;


  		





  
  60
  
    

  		





  
  61
  
    
  window.setInterval(function(){


  		





  
  62
  
    
    window.usageView.updateQuotas();


  		





  
  63
  
    
  }, {{ usage_update_interval }});


  		





  72
  64
  
    

  		





  
  65
  
    
})


  		





  73
  66
  
    
</script>


  		





  74
  67
  
    
{% endblock %}


  		












Also available in:
  Unified diff