Fix: managing deployment failure

client/custom.less

@@ -0,0 +1,41 @@
+// http://codepen.io/quickstep25/pen/BNOJXK
+// OPTIONAL WELL STYLES
+// VARS
+@state-primary-bg: darken(#428bca, 6.5%);
+@state-success-bg: #dff0d8;
+@state-info-bg: #d9edf7;
+@state-warning-bg: #fcf8e3;
+@state-danger-bg: #f2dede;
+// MIXINS - SHADOWS
+.box-shadow(@arguments: none) {
+    -webkit-box-shadow: @arguments;
+       -moz-box-shadow: @arguments;
+            box-shadow: @arguments;
+}
+// MIXINS - GRADIENT BACKGROUND
+.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
+	background: @start-color;
+	background-image:    -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); 
+	background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
+	background-image:     -ms-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
+	background-image:      -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@start-percent, @start-color), color-stop(@end-percent, @end-color)); 
+	background-image:         linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent);
+}
+// MIXINS - BOOTSTRAP - WELL VARIANT OVERRIDE
+.well-variant(@state; @bg) {
+    .well.bg-@{state} {
+        color: darken(@bg, 65%);
+        background-color: @bg;
+				.vertical(@start-color: darken(@bg, 5%); @end-color: @bg);
+  			border-color: darken(@bg, 10%);
+  			@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+  			.box-shadow(@shadow);
+    }
+}
+//  WELLS - CONTEXTUAL BACKGROUNDS
+.well-variant(primary;  @state-primary-bg);
+.well-variant(success;  @state-success-bg);
+.well-variant(info;  @state-info-bg);
+.well-variant(warning;  @state-warning-bg);
+.well-variant(danger;  @state-danger-bg);

client/project_details.controller.js

@@ -10,7 +10,20 @@ Template.deploymentDetails.helpers({
   },
   running: function() {
     var string = this.status;
+    if( !string ) {
+      return '';
+    }
     return string.charAt(0).toUpperCase() + string.slice(1);
+  },
+  deployment_status: function() {
+    switch( this.status ) {
+      case 'closed' :
+        return this.output[this.output.length - 1].error ? 'bg-danger' : 'bg-success';
+      case 'pending' :
+        return 'bg-info';
+      default :
+        return 'bg-default';
+    }
   }
 });
 

client/project_details.view.html

@@ -39,10 +39,10 @@
 
 <template name="deploymentDetails">
     <div role="tabpanel" class="tab-pane" id="collapseDeployment{{index}}">
-        <div class="well">
+        <div class="well well-sm {{deployment_status}}">
             <h4>Deployment # {{index}} - {{tm_cal timestamp}}</h4>
             {{#each output}}
-                <p>
+                <p class="{{error}}">
                     <samp>{{{format}}}</samp>
                 </p>
             {{/each}}