column-monitor.html 1.5 KB
Newer Older
1
{% load sizefieldtags %}
2 3 4 5 6
{% load i18n %}

<i class="icon-gears"></i> {% trans "CPU" %}
 <div class="progress pull-right">
  <div class="progress-bar progress-bar-success" role="progressbar"
7 8 9 10 11
    aria-valuenow="{{ record.cpu_usage|stringformat:"f" }}"
    aria-valuemin="0" aria-valuemax="1"
    style="width: {% widthratio record.cpu_usage 1 100 %}%;">
    <span class="progress-bar-text">
      {% if record.cpu_usage != None %}
Bach Dániel committed
12
        {% widthratio record.cpu_usage 1 100 %} %
13 14 15
      {% else %}
        -
      {% endif %}
16
   </span>
17 18 19 20 21
  </div>
 </div>
<br>
<i class="icon-ticket"></i> {% trans "Memory" %}
 <div class="progress pull-right">
22 23 24 25 26 27 28 29 30 31 32
  <div class="progress-bar" role="progressbar"
    aria-valuenow="{{ record.ram_usage|stringformat:"f" }}"
    aria-valuemin="0" aria-valuemax="100"
    style="width: {% widthratio record.ram_usage 1 100 %}%;">
    <span class="progress-bar-text">
      {% if record.byte_ram_usage != None %}
        {% widthratio record.byte_ram_usage 1048576 1 %} MB
      {% else %}
        -
      {% endif %}
    </span>
33 34 35 36 37
  </div>
 </div>
<style>
  .progress {
    position: relative;
38 39 40 41
    width: 150px;
    height: 16px;
    margin-bottom: 4px;
    margin-top: 0px;
42
    background-image: linear-gradient(to bottom, #BBEBEB 0px, #F5F5F5 100%);
43 44 45 46 47 48 49
  }
  .progress-bar-text {
    position: absolute;
    display: block;
    width: 100%;
    color: white;
    /* outline */
50
    text-shadow:
51 52 53
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
54 55
      1px 1px 0 #000;
    font-size: 13px;
56 57 58 59
  }
</style>