{% 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>i
          {% trans "Datastore" %}
          <i id="ds-spinner" class="fa fa-spinner" style="display:none;"></i>
        </h3>
      </div>
      <div class="panel-body">
        <form method="get" action="">
          <div class="form-group">
            <label>{% trans "Datastore" %}</label>
            <select class="form-control" name="ds" data-autosubmit="1" onchange="this.form.submit()">
              <option value="new" {% if ds_selected == "new" %}selected{% endif %}>
                 -- {% trans "Create new datastore" %} --
              </option>
              {% for d in datastores %}
                <option value="{{ d.pk }}" {% if ds and ds.pk == d.pk %}selected{% endif %}>
                  {{ d.name }} — {{ d.hostname }} : {{ d.path }}
                </option>
              {% endfor %}
            </select>
          </div>
        
          {# tartsuk meg a filter/search paramokat, hogy ne vesszenek el #}
          <input type="hidden" name="filter" value="{{ request.GET.filter }}">
          <input type="hidden" name="s" value="{{ request.GET.s }}">
        </form>
        
        <hr/>
        
        <form method="post" action="">
          {% csrf_token %}
          <input type="hidden" name="ds" value="{{ ds_selected }}">
        
          {% crispy form %}
        
          <div class="form-actions">
            {% if mode == "create" %}
              <button type="submit" class="btn btn-success">
                <i class="fa fa-plus"></i> {% trans "Create" %}
              </button>
            {% else %}
              <button type="submit" class="btn btn-primary">
                <i class="fa fa-save"></i> {% trans "Save" %}
              </button>
            {% endif %}
          </div>
        </form>
        
      </div><!-- .panel-body -->
    </div>
  </div>
  {% if stats %}
  <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>
  {% endif %}
</div>

<div class="row">
  <div class="col-md-12">
  {% if stats %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="fa fa-file"></i> {% trans "Disks" %}
        <i id="disks-spinner" class="fa fa-spinner" style="display:none;"></i>
        </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 }}?ds={{ ds_selected }}&s={{ request.GET.s }}" class="storage-filter">
                {% trans "ALL" %}
              </a>
              </li>
              {% for f in filter_names %}
                <li{% if request.GET.filter == f.0 %} class="active"{% endif %}>
                <a href="?ds={{ ds_selected }}&filter={{ f.0 }}&s={{ request.GET.s }}"class="storage-filter">{{ 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 }}"/>
                <input type="hidden" name="ds" value="{{ ds_selected }}"/>
                <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>
  {% endif %}
  </div>
</div>

<div class="row">
  <div class="col-md-12">
  {% if stats %}
    <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>
  {% endif %}
  </div>
</div>

{% endblock %}

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