dashboard: refactor node detail templates

circle/dashboard/templates/dashboard/node-detail.html

@@ -43,10 +43,10 @@
 	</ul>
 
         <div id="panel-body"  class="tab-content panel-body">
-          <div class="tab-pane active" id="home">{% include "dashboard/node-detail-home.html" %}</div>
-	  <div class="tab-pane" id="resources">{% include "dashboard/node-detail-resources.html" %}</div>
-          <div class="tab-pane" id="activity">{% include "dashboard/node-detail-activity.html" %}</div>
-          <div class="tab-pane" id="virtualmachines">{% include "dashboard/node-detail-vm.html" %}</div>
+          <div class="tab-pane active" id="home">{% include "dashboard/node-detail/home.html" %}</div>
+	  <div class="tab-pane" id="resources">{% include "dashboard/node-detail/resources.html" %}</div>
+          <div class="tab-pane" id="activity">{% include "dashboard/node-detail/activity.html" %}</div>
+          <div class="tab-pane" id="virtualmachines">{% include "dashboard/node-detail/vm.html" %}</div>
   	</div>
       </div>
     </div>

circle/dashboard/templates/dashboard/node-detail-activity.html → circle/dashboard/templates/dashboard/node-detail/_activity-timeline.html

 {% load i18n %}
-<h3>{% trans "Activity" %}</h3>
-<style>
-  .sub-timeline {
-    border-left: 3px solid green;
-    margin-left: 30px;
-    padding-left: 10px;
-  }
-</style>
-
-<div class="timeline">
-  {% for a in activity %}
-  <div class="activity" data-activity-id="{{ a.pk }}">
-    <span class="timeline-icon">
-      <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
-    </span> 
-    <strong>{{ a.get_readable_name }}</strong>
-    {{ a.started|date:"Y-m-d. H:i" }}, {{ a.user }}
-      {% if a.children.count > 0 %}
-        <div class="sub-timeline">
-          {% for s in a.children.all %}
-            <div data-activity-id="{{ s.pk }}" class="sub-activity">
-            {{ s.get_readable_name }} - 
-            {% if s.finished %}
-              {{ s.finished|time:"H:i:s" }}
-            {% else %}
-              <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
-            {% endif %}
-            </div>
-          {% endfor %}
+{% for a in activities %}
+<div class="activity" data-activity-id="{{ a.pk }}">
+  <span class="timeline-icon{% if a.has_failed %} timeline-icon-failed{% endif %}">
+  <i class="{% if not a.finished %} icon-refresh icon-spin {% else %}icon-plus{% endif %}"></i>
+</span>
+<strong>{{ a.get_readable_name }}</strong>
+{{ a.started|date:"Y-m-d H:i" }}, {{ a.user }}
+  {% if a.children.count > 0 %}
+    <div class="sub-timeline">
+      {% for s in a.children.all %}
+      <div data-activity-id="{{ s.pk }}" class="sub-activity{% if s.has_failed %} sub-activity-failed{% endif %}">
+        {{ s.get_readable_name }} - 
+        {% if s.finished %}
+          {{ s.finished|time:"H:i:s" }}
+        {% else %}
+          <i class="icon-refresh icon-spin" class="sub-activity-loading-icon"></i>
+        {% endif %}
+        {% if s.has_failed %}
+          <div class="label label-danger">{% trans "failed" %}</div>
+        {% endif %}
         </div>
-      {% endif %}
-  </div>
-  {% endfor %}
-  <div><span class="timeline-icon timeline-warning"><i class="icon-remove"></i></span> <strong>Removing</strong> 2013-11-21 15:32</div>
-  <div><span class="timeline-icon timeline-warning"><i class="icon-pause"></i></span> <strong>Suspending</strong> 2013-09-21 15:32</div>
-  <div><span class="timeline-icon"><i class="icon-ellipsis-vertical" ></i></span> <strong>(now)</strong></div>
-  <div><span class="timeline-icon"><i class="icon-truck"></i></span> <strong>Migrated to mega5</strong> 2013-04-21 15:32, ABC123</div>
-  <div><span class="timeline-icon"><i class="icon-refresh"></i></span> <strong>Forced reboot</strong> 2013-04-21 15:32, ABC123</div>
-  <div><span class="timeline-icon"><i class="icon-plus"></i></span> <strong>Created</strong> 2013-04-21 15:32, ABC123</div>
+      {% endfor %}
+    </div>
+  {% endif %}
 </div>
-
-{% block extra_js %}
-<script src="{{ STATIC_URL }}dashboard/vm-details.js"></script>
-{% endblock %}
+{% endfor %}

circle/dashboard/templates/dashboard/node-detail/activity.html

+{% load i18n %}
+
+<h3>{% trans "Activity" %}</h3>
+
+<div id="activity-timeline" class="timeline">
+  {% include "dashboard/node-detail/_activity-timeline.html" %}
+</div>