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

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

{% block content %}

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin"><i class="fa fa-database"></i> {% trans "Data store" %}</h3>
      </div>
      <div class="panel-body">
        <form id="storage-create-form" action="" method="POST">
          {% include "dashboard/storage/form_chunk.html" %}
          <fieldset>
            <input type="submit" value="{% trans "Save" %}" class="btn btn-primary">
            {% if object.type == "ceph_block" %}
            <a class="btn btn-success pull-right" href="{% url "dashboard.views.storage-refresh_credential" pk=object.pk %}">
                <i class="fa fa-key"></i> {% trans "Refresh credential on all node" %}
            </a>
            {% endif %}
          </fieldset>
        </form>
      </div><!-- .panel-body -->
    </div>
  </div>

  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        {% if object.destroyed %}
        <a href="{% url "dashboard.views.storage-restore" pk=object.pk %}"
         class="btn btn-xs btn-warning pull-right storage-restore">
          {% trans "Restore" %}
        </a>
        <h4 class="no-margin"><i class="fa fa-medkit"></i> {% trans "Restore data store"  %}</h4>
        {% else %}
        <a href="{% url "dashboard.views.storage-delete" pk=object.pk %}"
         class="btn btn-xs btn-danger pull-right storage-delete">
          {% trans "Delete" %}
        </a>
        <h4 class="no-margin"><i class="fa fa-times"></i> {% trans "Delete data store"  %}</h4>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <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 %}
