{% extends 'infrastructure/base.html' %}
{% load i18n %}
{% block title %}{% trans 'Node Details' %}{% endblock %}

{% block page_header %}
  {% include 'horizon/common/_page_header.html' with title=_('Node Details') %}
{% endblock page_header %}


{% block js %}
{{ block.super }}
<script src='{{ STATIC_URL }}infrastructure/js/angular/horizon.base64.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/angular/horizon.node_errata.js' type='text/javascript' charset='utf-8'></script>
{% endblock %}



{% block main %}
<div class="row-fluid">
  <div class="span12">
    <h4>{% trans "Info" %}</h4>
    <dl class="clearfix">
      <dt>{% trans "MAC Addresses" %}</dt>
      <dd>{{ node.addresses|join:", "|default:"&mdash;" }}</dd>
      <dt>{% trans "UUID" %}</dt>
      <dd>{{ node.uuid|default:"&mdash;" }}</dd>
      <dt>{% trans "Instance UUID" %}</dt>
      <dd>{{ node.instance_uuid|default:"&mdash;" }}</dd>
      <dt>{% trans "Driver" %}</dt>
      <dd>{{ node.driver|default:"&mdash;" }}</dd>
      <dt>{% trans "Power state" %}</dt>
      <dd>{{ node.power_state|default:"&mdash;" }}</dd>
    </dl>
  </div>
</div>
<div class="row-fluid">
  <div class="span6">
    <h4>{% trans "Driver Info" %}</h4>
    <dl class="clearfix">
      <dt>{% trans "IPMI address" %}</dt>
      <dd>{{ node.driver_info.ipmi_address|default:"&mdash;" }}</dd>
      <dt>{% trans "IPMI username" %}</dt>
      <dd>{{ node.driver_info.ipmi_username|default:"&mdash;" }}</dd>
    </dl>
  </div>
  <div class="span6">
    <h4>{% trans "Properties" %}</h4>
    <dl class="clearfix">
      <dt>{% trans "Local disk" %}</dt>
      <dd>{{ node.properties.local_disk|filesizeformat|default:"&mdash;" }}</dd>
      <dt>{% trans "RAM" %}</dt>
      <dd>{{ node.properties.ram|filesizeformat|default:"&mdash;" }}</dd>
      <dt>{% trans "CPU" %}</dt>
      <dd>{{ node.properties.cpu|default:"&mdash;" }}</dd>
    </dl>
  </div>

</div>

{% if node.uuid %}
<div>
<h2>{% trans "Content" %}</h2>
  <div ng-controller="ErrataController">
     <div satellite-errata uuid="'{{ node.uuid }}'"></div>
  </div>
</div>
{% endif %}


<h2>{% trans "Performance and Capacity" %}</h2>

{% if meters %}
<br />
{% url 'horizon:infrastructure:nodes:performance' node.id as node_perf_url %}

<div id="ceilometer-stats">
  <form class="form-horizontal" id="linechart_general_form">
    <div class="control-group">
      <label for="date_options" class="control-label">{% trans "Period" %}:&nbsp;</label>
      <div class="controls">
        <select data-line-chart-command="select_box_change"
                id="date_options"
                name="date_options"
                class="span2">
          <option value="1">{% trans "Last day" %}</option>
          <option value="7" selected="selected">{% trans "Last week" %}</option>
          <option value="{% now 'j' %}">{% trans "Month to date" %}</option>
          <option value="15">{% trans "Last 15 days" %}</option>
          <option value="30">{% trans "Last 30 days" %}</option>
          <option value="365">{% trans "Last year" %}</option>
          <option value="other">{% trans "Other" %}</option>
        </select>
      </div>
    </div>
    <div class="control-group" id="date_from">
      <label for="date_from" class="control-label">{% trans "From" %}:&nbsp;</label>
      <div class="controls">
        <input data-line-chart-command="date_picker_change"
               type="text"
               id="date_from"
               name="date_from"
               class="span2 example"/>
      </div>
    </div>
    <div class="control-group" id="date_to">
      <label for="date_to" class="control-label">{% trans "To" %}:&nbsp;</label>
      <div class="controls">
        <input data-line-chart-command="date_picker_change"
               type="text"
               name="date_to"
               class="span2 example"/>
      </div>
    </div>
  </form>
</div>

<script type="text/javascript">
  if (typeof $ !== 'undefined') {
    show_hide_datepickers();
  } else {
    addHorizonLoadEvent(function() {
      show_hide_datepickers();
    });
  }

  function show_hide_datepickers() {
    var date_options = $("#date_options");
    date_options.change(function(evt) {
        if ($(this).find("option:selected").val() == "other"){
          evt.stopPropagation();
          $("#date_from .controls input, #date_to .controls input").val('');
          $("#date_from, #date_to").show();
        } else {
          $("#date_from, #date_to").hide();
        }
    });
    if (date_options.find("option:selected").val() == "other"){
      $("#date_from, #date_to").show();
    } else {
      $("#date_from, #date_to").hide();
    }
  }
</script>

<div class="clear"></div>
<div>
  <table>
    {% for meter_name, meter_label in meters %}
      {% if forloop.counter0|divisibleby:"4" %}
        <tr>
      {% endif %}
      <td>
        {% include "infrastructure/_performance_chart.html" with label=meter_label url=node_perf_url|add:"?meter="|add:meter_name only %}
      </td>
      {% if forloop.counter|divisibleby:"4" %}
        </tr>
      {% endif %}
    {% endfor %}
  </table>
</div>
{% else %}
  Metering service is not enabled.
{% endif %}
{% endblock %}