column-monitor.html

{% load sizefieldtags %}
{% load i18n %}

<i class="fa fa-gears"></i> {% trans "CPU" %}
 <div class="progress pull-right">
  <div class="progress-bar progress-bar-success" role="progressbar"
    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 %}
        {% widthratio record.cpu_usage 1 100 %} %
      {% else %}
        -
      {% endif %}
   </span>
  </div>
 </div>
<br>
<i class="fa fa-ticket"></i> {% trans "Memory" %}
 <div class="progress pull-right">
  <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>
  </div>
 </div>
<style>
  .progress {
    position: relative;
    width: 150px;
    height: 16px;
    margin-bottom: 4px;
    margin-top: 0px;
    background-image: linear-gradient(to bottom, #BBEBEB 0px, #F5F5F5 100%);
  }
  .progress-bar-text {
    position: absolute;
    display: block;
    width: 100%;
    color: white;
    /* outline */
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
    font-size: 13px;
  }
</style>