Merge "Node detail styling and node state icon filter, role detail"

tuskar_ui/infrastructure/nodes/templates/nodes/_detail_overview.html

@@ -1,15 +1,12 @@
 {% load i18n %}
+{% load icon_helpers %}
 
 <div class="row node-details">
   <div class="col-lg-6 col-xs-12">
-    <h3>{% trans "Status" %}</h3>
+    <h4> {{ node.power_state|iconized_ironic_node_state|safe }} </h4>
-    <p>
-      <i class="fa fa-play-circle powerstate"></i>
-      <span>{% trans "Powered" %} {{ node.power_state|default:"&mdash;" }}</span>
-    </p>
 
     <h3>{% trans "Inventory" %}</h3>
-    <dl class="dl-horizontal">
+    <dl class="dl-horizontal dl-horizontal-left">
       <dt>{% trans "Node UUID" %}</dt>
       <dd>{{ node.uuid|default:"&mdash;" }}</dd>
       <dt>{% trans "Driver" %}</dt>
@@ -43,7 +40,11 @@
       <dt>{% trans "Network Cards" %}</dt>
       <dd>
         <a data-toggle="collapse" href="#collapseNetworkCards">
-          {{ node.addresses|length }}
+          {% blocktrans count addresses_length=node.addresses|length %}
+            {{ addresses_length }} interface
+            {% plural %}
+            {{ addresses_length }} interfaces
+          {% endblocktrans %}
           <span class="caret"></span>
         </a>
         <div id="collapseNetworkCards" class="panel-collapse collapse">
@@ -64,7 +65,7 @@
     </dl>
 
     <h3>{% trans "Deployment" %}</h3>
-    <dl class="dl-horizontal">
+    <dl class="dl-horizontal dl-horizontal-left">
       <dt>{% trans "Deployment Role" %}</dt>
       {% if stack and role %}
         <dd><a href="{% url 'horizon:infrastructure:roles:detail' role.id %}">{{ role.name }}</a></dd>

tuskar_ui/infrastructure/roles/templates/roles/detail.html

@@ -10,10 +10,10 @@
 {% block main %}
 
 <div class="row">
-  <div class="col-xs-3">
+  <div class="col-md-4">
     <h3>{% trans "Properties" %}</h3>
-    <p><strong>{% blocktrans count counter=nodes|length %}{{ counter }} instance{% plural %}{{ counter }} instances{% endblocktrans %}</strong></p>
+    <h4 class="info">{% blocktrans count counter=nodes|length %}{{ counter }} instance{% plural %}{{ counter }} instances{% endblocktrans %}</h4>
-    <dl>
+    <dl class="dl-horizontal dl-horizontal-left">
       <dt>{% trans 'Flavor' %}</dt>
       {% if flavor %}
         <dd><em>{{ flavor.name }}</em> {{ flavor.get_keys.cpu_arch }} | {{ flavor.vcpus }} {% trans "CPU" %} | {{ flavor.ram }} {% trans "MB RAM" %} | {{ flavor.disk }} {% trans "GB HDD" %}</dd>
@@ -28,7 +28,7 @@
       {% endif %}
     </dl>
   </div>
-  <div class="col-xs-9">
+  <div class="col-md-8">
     <h3>{% trans "Performance & Metrics" %}</h3>
     {% url 'horizon:infrastructure:roles:performance' role.uuid as node_perf_url %}
     {% include "infrastructure/_performance_chart_box.html" with meter_conf=meter_conf node_perf_url=node_perf_url col_size=4 %}

tuskar_ui/infrastructure/static/infrastructure/scss/_individual_pages.scss

@@ -115,10 +115,6 @@ $link-color: #428bca;
 .fa.powerstate {
   display: inline-block;
   vertical-align: middle;
-  font-size: 18px;
-  background: $gray-lighter;
-  border: 1px solid $gray-light;
-  padding: .2em;
   &.fa-play {
     color: $brand-success;
   }

tuskar_ui/infrastructure/templatetags/icon_helpers.py

@@ -0,0 +1,58 @@
+#
+#    Licensed under the Apache License, Version 2.0 (the "License"); you may
+#    not use this file except in compliance with the License. You may obtain
+#    a copy of the License at
+#
+#         http://www.apache.org/licenses/LICENSE-2.0
+#
+#    Unless required by applicable law or agreed to in writing, software
+#    distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+#    WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+#    License for the specific language governing permissions and limitations
+#    under the License.
+
+from django import template
+from django.utils.translation import ugettext_lazy as _
+
+
+register = template.Library()
+
+IRONIC_NODE_STATE_STRING_DICT = {
+    'active': _('powered on'),
+    'wait call-back': _('waiting'),
+    'deploying': _('deploying'),
+    'deploy failed': _('deployment failed'),
+    'deploy complete': _('deployment complete'),
+    'deleting': _('deleting'),
+    'deleted': _('deleted'),
+    'error': _('error'),
+    'rebuild': _('rebuilding'),
+    'power on': _('powered on'),
+    'power off': _('powered off'),
+    'rebooting': _('rebooting'),
+}
+
+IRONIC_NODE_STATE_ICON_DICT = {
+    'active': 'fa-play',
+    'wait call-back': 'fa-spinner',
+    'deploying': 'fa-spinner',
+    'deploy failed': 'fa-warning',
+    'deploy complete': 'fa-ok',
+    'deleting': 'fa-spinner',
+    'deleted': 'fa-cancel',
+    'error': 'fa-warning',
+    'rebuild': 'fa-spinner',
+    'power on': 'fa-play',
+    'power off': 'fa-stop',
+    'rebooting': 'fa-spinner',
+}
+
+
+@register.filter(is_safe=True)
+def iconized_ironic_node_state(node_power_state):
+    state = IRONIC_NODE_STATE_STRING_DICT.get(node_power_state, "—")
+    icon = IRONIC_NODE_STATE_ICON_DICT.get(node_power_state, None)
+    html_string = """<span class="fa %s powerstate"></span>
+                     <span>%s</span> """ % (icon, state)
+
+    return html_string