{% load i18n sizeformat %}
{% load url from future %}
{% load chart_helpers %}

{% if not rack.is_provisioned or rack.is_provisioning %}
  <div class="info row-fluid detail">
    <div class="span12">
      <div data-state="{{rack.state}}"
           data-url="{% url 'horizon:infrastructure:resource_management:racks:check_state' rack.id %}"
           data-interval="20000"
           class="overall-state provision-block">
          {% if not rack.is_provisioned %}
            <div class="well clearfix">
                <p class="pull-right">
                    {% trans "To make it ready to use," %}
                    <a href="{% url 'horizon:infrastructure:resource_management:index' %}?tab=resource_management_tabs__racks_tab">
                        {% trans "provision your whole deployment." %}
                    </a>
                </p>
                {% trans "Rack is not provisioned yet." %}
            </div>
          {% endif %}
      </div>
    </div>
  </div>
{% endif %}
<div class="info row-fluid detail">
  <div class="span4">
    <h4>{% trans "About" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "IP Subnet" %}</dt>
      <dd>{{ rack.subnet|default:_("None") }}</dd>
      <dt>{% trans "Switch IPs" %}</dt>
      <dd>{{ rack.switch_ips|default:_("None") }}</dd>
      <dt>{% trans "Location" %}</dt>
      <dd>{{ rack.location|default:_("None") }}</dd>
      <dt>{% trans "State" %}</dt>
      <dd>{{ rack.state|default:_("None") }}</dd>
    </dl>
  </div>
  <div class="span4">
    <h4>{% trans "Resource Assignment" %}</h4>
    <hr class="header_rule">
    <dl>
      <dt>{% trans "Nodes" %}</dt>
      <dd>
        <a href="{% url 'horizon:infrastructure:resource_management:racks:detail' rack.id %}?tab=rack_detail_tabs__nodes">
          {{ rack.nodes_count|default:_("None") }}
        </a>
      </dd>
      <dt>{% trans "Class" %}</dt>
      <dd>
        <a href="{% url 'horizon:infrastructure:resource_management:resource_classes:detail' rack.resource_class_id %}">
        {{ rack.resource_class.name|default:_("None") }}
        </a>
      </dd>
      <dt>{% trans "Class Image" %}</dt>
      <dd>overcloud-compute</dd> {# FIXME It will eventually have to be not-hardcoded later #}
    </dl>
  </div>
  <div class="span4">
    <h4>{% trans "Capacities" %}</h4>
    <hr class="header_rule">
    {% if rack.capacities %}
    <table class="capacities">
      {% for capacity in rack.capacities %}
      <tr>
        <td class="capacity_label">{{ capacity.name }}:</td>
        {% if rack.is_provisioned %}
        <td>
          <div id="{{ capacity.name }}_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart"
               data-capacity-limit="{{ capacity.value }}"
               data-capacity-used="{{ capacity.usage }}"
               data-average-capacity-used="{{ capacity.average }}">
          </div>
        </td>
        <td>
          <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ capacity.usage|default:_(" - ") }}/{{ capacity.value|default:_(" - ") }} {{ capacity.unit }}</a>
        </td>
        {% else %}
        <td>
          <div id="{{ capacity.name }}_capacity_usage"
               class="capacity_bar"
               data-chart-type="capacity_bar_chart">
          </div>
        </td>
        <td></td>
        {% endif %}
      </tr>
      {% endfor %}
    </table>
    {% else %}
      <p>No data available yet.</p>
    {% endif %}
  </div>
</div>

<div class="info row-fluid detail">
  <div class="span6">
    <h4>{% trans "Summary of instances and Usage" %}</h4>
    <hr class="header_rule">
    {% if rack.is_provisioned %}
    <div>
      <strong>{{ rack.total_instances }}</strong> instances
      <strong>{{ rack.remaining_capacity }}%</strong>  capacity remaining
    </div>

    <div class="flavor_usage_bar"
         data-popup-free='{{ rack|remaining_capacity_by_flavors }}'
         data-single-bar-orientation="horizontal"
         data-single-bar-height="35"
         data-single-bar-width="100%"
         data-single-bar-used="{{ rack|all_used_instances }}"
         data-single-bar-auto-scale-selector=".flavors_scale_selector"
         data-single-bar-color-scale-range='["#000060", "#99FFFF"]'>
    </div>

    <table class="flavor_usages">
      <tr>
        {% for flavor in rack.list_flavors %}
          <td class="flavor_usage_label">
            <a href="{% url 'horizon:infrastructure:resource_management:resource_classes:flavors:detail' rack.resource_class.id flavor.id %}">{{ flavor.name }}</a>
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in rack.list_flavors %}
          <td>
            <div class="flavor_usage_bar flavors_scale_selector"
                 data-popup-average='<p>Average capacity consumed by instances of {{flavor.name}} flavor in {{rack.name}} class.</p>
                                     <p>{{ flavor.used_instances }}%, <strong>{{ flavor.used_instances }} instances</strong></p>'
                 data-single-bar-orientation="vertical"
                 data-single-bar-height="100%"
                 data-single-bar-width="30"
                 data-single-bar-used="{{ flavor.used_instances }}"
                 data-single-bar-average-used="{{ 50 }}"
                 data-single-bar-auto-scale-selector=".flavors_scale_selector"
                 data-single-bar-color-scale-range='["#000060", "#99FFFF"]'>
            </div>
          </td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in rack.list_flavors %}
          <td class="modal_chart flavor_usage_text"><a href="{{ "#" }}">{{ flavor.used_instances }}%</a></td>
        {% endfor %}
      </tr>
      <tr>
        {% for flavor in rack.list_flavors %}
          <td class="flavor_usage_text">{{ flavor.used_instances }} inst.</td>
        {% endfor %}
      </tr>
    </table>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
   </div>

  <div class="span6 alerts">
    <h4>{% trans "Active Alerts" %}</h4>
    <hr class="header_rule">
    {% if rack.is_provisioned %}
    <ul>
     {% for alert in rack.alerts %}
       <li><i class="icon-warning-sign"></i>{{ alert.message }}</li>
     {% endfor %}
     {% for tuskar_node in rack.aggregated_alerts %}
         <li>
           <i class="icon-warning-sign"></i>
           Node <a href="{% url 'horizon:infrastructure:resource_management:nodes:detail' tuskar_node.id %}">{{ tuskar_node.name }}</a> has some problems
         </li>
     {% endfor %}
    </ul>
    {% else %}
    <p>{% trans "No data available yet." %}</p>
    {% endif %}
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
    <!-- FIXME Will be added later
    <div class="circles_chart_time_picker">
      <select data-circles-chart-command="change_time"
              data-receiver="#most_contacting_racks, #most_contacted_racks">
        <option value="now">Now</option>
        <option value="yesterday">Yesterday</option>
        <option value="last_week">Last Week</option>
        <option value="last_month">Last Month</option>
      </select>
    </div>
    -->

    <h4>Top Communicating Racks</h4>
    <hr class="header_rule">
    <div class="clear"></div>
    {% if rack.nodes_count and rack.is_provisioned %}
    <div class="communication_charts_wrapper">
      <div class="communication_chart_wrapper">
        <h5>The most contacting</h5>
        <div id="most_contacting_racks"
             class="communication_chart"
             data-chart-type="circles_chart"
             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' rack.id %}?cond=from"
             data-time="now"
             data-size="22">
        </div>
      </div>
      <div class="communication_chart_connection"></div>
      <div class="communication_chart_wrapper">
        <h5>The most contacted</h5>
        <div id="most_contacted_racks"
             class="communication_chart"
             data-chart-type="circles_chart"
             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' rack.id %}?cond=to"
             data-time="now"
             data-size="22">
        </div>
      </div>
    </div>
    {% else %}
      <p>No data available yet.</p>
    {% endif %}
  </div>
  <div class="span6">
    <!-- FIXME Will be added later
    <div class="circles_chart_time_picker">
      <select data-circles-chart-command="change_time"
              data-receiver="#rack_health_chart">
        <option value="now">Now</option>
        <option value="yesterday">Yesterday</option>
        <option value="last_week">Last Week</option>
        <option value="last_month">Last Month</option>
      </select>
    </div>
    -->

    <h4>Node health</h4>
    {% if rack.nodes_count and rack.is_provisioned %}

    <ul class="nav nav-tabs"
        data-circles-chart-command="change_url"
        data-receiver="#rack_health_chart">
      <li class="active">
        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=overall_health" href="#">
          Overall Health</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=alerts" href="#">
          Alerts</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=capacities" href="#">
          Capacities</a>
      </li>
      <li>
        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=status" href="#">
          Status</a>
      </li>
    </ul>
    <div id ="rack_health_chart"
         class="health_chart"
         data-chart-type="circles_chart"
         data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}"
         data-time="now"
         data-size="22">
    </div>
    {% else %}
    <hr class="header_rule">
    <div class="clear"></div>

    <p>No data available yet.</p>
    {% endif %}
  </div>
</div>


<script type="text/javascript">
/* polling of status. */
horizon.detail_overview = {
  update: function () {
    var state_obj = $('.overall-state').first();
    var state = state_obj.data('state');
    var interval = state_obj.data('interval');
    var url = state_obj.data('url');
    if (state == 'provisioning') {
      // Wait and try to update again in next interval instead
      setTimeout(horizon.detail_overview.update, interval);

      this.jqxhr = $.getJSON( url, function() {
          state_obj.html('{% filter escapejs %}{% include "infrastructure/resource_management/_provision_progress.html" %}{% endfilter %}');
        })
        .done(function(data) {
          // FIXME find a way how to only update graph with new data
          // not delete and create
          if (data['state'] != 'provisioning'){
            window.location.reload();
          }
        })
        .fail(function() {
          // FIXME add proper fail message
          console.log( "error" );
        })
        .always(function() {
          // FIXME add behaviour that should be always done
        });
      }
  }
};


horizon.addInitFunction(function () {
  horizon.detail_overview.update();
});

</script>
