{% extends "dashboard/base.html" %}
{% load pipeline %}
{% load sizefieldtags %}
{% load i18n %}
{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}

{% block title-page %}{% trans "Storage" %}{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-5">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="fa fa-database"></i> {% trans "Datastore" %}</h3>
      </div>
      <div class="panel-body">
        {% crispy form %}
      </div><!-- .panel-body -->
    </div>
  </div>
  <div class="col-md-7">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="fa fa-bar-chart"></i> {% trans "Statistics" %}</h3>
      </div>
      <div class="panel-body">
        <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-stripped"
            role="progressbar" style="min-width: 30px; width: {{ stats.used_percent }}%">
            {{ stats.used_percent }}%
          </div>
        </div>
        <div class="text-muted text-center">
          {{ stats.used_space}}/{{ stats.total_space }}
        </div>

        <h3>
          {% trans "Missing disks" %}
          <small>{% trans "disk objects without images files" %}</small>
        </h3>
        {% for m in missing_disks %}
          <p>
          {{ m }} - {{ m.filename }}
          </p>
          {% empty %}
          {% trans "None" %}
        {% endfor %}

        <h3>
          {% trans "Orphan disks" %}
          <small>{% trans "image files without disk object in the database" %}</small>
        </h3>
        {% for o in orphan_disks %}
          <p>
            {{ o }}
          </p>
          {% empty %}
          {% trans "None" %}
        {% endfor %}
      </div><!-- .panel-body -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="fa fa-file"></i> {% trans "Disks" %}</h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-9">
            <ul class="nav nav-pills" style="margin: 5px 0 20px 0;">
              <li class="disabled"><a href="#">{% trans "Filter by type" %}</a></li>
              <li {% if not request.GET.filter %} class="active"{% endif %}>
              <a href="{{ request.path }}?s={{ request.GET.s }}">{% trans "ALL" %}</a>
              </li>
              {% for f in filter_names %}
                <li{% if request.GET.filter == f.0 %} class="active"{% endif %}>
                <a href="?filter={{ f.0 }}&s={{ request.GET.s }}">{{ f.1|capfirst }}</a>
                </li>
              {% endfor %}
            </ul>
          </div>
          <div class="col-md-3">
            <form action="" method="GET" id="network-host-list-form">
              <div class="input-group">
                <input type="text" name="s" class="form-control"
                value="{{ request.GET.s }}" placeholder="{% trans "Search..." %}"/>
                <input type="hidden" name="filter" value="{{ request.GET.filter }}"/>
                <span class="input-group-btn">
                  <button class="btn btn-primary"><i class="fa fa-search"></i></button>
                </span>
              </div>
            </form>
          </div>
        </div><!-- .row -->
        <div class="table-responsive">
          {% render_table disk_table %}
        </div>
      </div><!-- .panel-body -->
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin">
          <i class="fa fa-pie-chart"></i>
          {% trans "Disk usage breakdown" %}
        </h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-9">
            <canvas id="datastore-chart"></canvas>
          </div>
          <div class="col-md-3">
            <div id="datastore-chart-legend"></div>
          </div>
        </div>
        <div id="chart-data" data-data='{
          "data": [{{stats.template_actual_size}},
                   {{stats.vm_actual_size}},
                   {{stats.dumps}},
                   {{stats.iso_raw}},
                   {{stats.trash}}],
          "readable_data": ["{{stats.template_actual_size|filesize}}",
                            "{{stats.vm_actual_size|filesize}}",
                            "{{stats.dumps|filesize}}",
                            "{{stats.iso_raw|filesize}}",
                            "{{stats.trash|filesize}}"],
          "labels": ["{% trans "Templates" %}",
                     "{% trans "Virtual machines" %}",
                     "{% trans "Memory dumps" %}",
                     "{% trans "ISO + Raw images" %}",
                     "{% trans "Trash" %}"]
          }
          '>
        </div>
        <div>
          {% trans "Total disk usage of virtual machines" %}:
          <strong>{{ stats.vm_actual_size|filesize }}</strong>
          <br />
          {% trans "Total virtual disk usage of virtual machines" %}:
          <strong>{{ stats.vm_size|filesize}}</strong>
        </div>
      </div><!-- .panel-body -->
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
  {% javascript "datastore" %}
{% endblock %}
