Merge pull request #27 from lsjostro/display-event-message

Toggle display of event message in reports

puppetboard/static/css/puppetboard.css

@@ -61,6 +61,18 @@ h1.success {
 h1.noop {
   color:#aaa;
 }
+tr.event {
+  cursor: pointer;
+}
+td.message {
+  padding: 0;
+  border: 0;
+  background-color: #FFFFE9;
+}
+div[id^='message-event'] {
+  display: none;
+  padding: 4px 15px 4px 15px;
+}
 .label-count {
   width:25px;
   text-align:center;

puppetboard/templates/report.html

@@ -39,15 +39,24 @@
   <tbody>
     {% for event in events %}
     {% if not event.failed and event.item['old'] != event.item['new'] %}
-      <tr class='success'>
+      <tr id='event-{{loop.index}}' class='success event'>
     {% elif event.failed %}
-      <tr class='error'>
+      <tr id='event-{{loop.index}}' class='error event'>
     {% endif %}
       <td>{{event.item['type']}}[{{event.item['title']}}]</td>
       <td>{{event.status}}</td>
       <td>{{event.item['old']}}</td>
       <td>{{event.item['new']}}</td>
     </tr>
+    {% if event.item['message'] %}
+    <tr>
+      <td class='message' colspan='4'>
+        <div id='message-event-{{loop.index}}'>
+          {{event.item['message']}}
+        </div>
+      </td>
+    </tr>
+    {% endif %}
     {% endfor %}
   </tbody>
 </table>
@@ -57,6 +66,10 @@
   <script type='text/javascript'>
     jQuery(function ($) {
       $("[rel=tooltip]").tooltip();
+      $(".event").click(function() {
+        $("#message-" + this.id).slideToggle(200);
+        return false;
+      });
     });
   </script>
 {% endblock script %}