Show run setup errors

src/components/run.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <RunDetail :run="run"/>
-
+    <div v-if="run.phase != 'setuperror'">
       <div class="tabs">
         <ul>
           <li>
@@ -18,7 +18,10 @@
                 <span class="name">{{task.name}}</span>
               </router-link>
               <div class="column">
-              <span class="tag" v-if="run.tasks_waiting_approval.includes(task.id)">Waiting approval</span>
+                <span
+                  class="tag"
+                  v-if="run.tasks_waiting_approval.includes(task.id)"
+                >Waiting approval</span>
               </div>
               <div class="parents column">
                 <span v-if="parents(task).length > 0">depends on: &nbsp;</span>
@@ -33,6 +36,19 @@
         </div>
       </div>
     </div>
+    <div v-else>
+      <div class="tabs">
+        <ul>
+          <li>
+            <a>Setup Errors</a>
+          </li>
+        </ul>
+      </div>
+      <div class="setuperrors">
+        <span class="error-line" v-for="(error, i) in run.setup_errors" v-bind:key="i">{{error}}</span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -156,4 +172,23 @@ export default {
     }
   }
 }
+
+.setuperrors {
+  background-color: #222;
+  color: #f1f1f1;
+  font-family: Cousine, monospace;
+  font-size: 12px;
+  line-height: 19px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  text-align: left;
+  font-size: 12px;
+  padding: 5px;
+
+  .error-line {
+    pre {
+      line-height: 1.2;
+    }
+  }
+}
 </style>

src/components/rundetail.vue

@@ -117,6 +117,7 @@ export default {
     runResultClass(run) {
       let status = this.runStatus(run);
 
+      if (status == "setuperror") return "setuperror";
       if (status == "queued") return "unknown";
       if (status == "cancelled") return "failed";
       if (status == "running") return "running";
@@ -206,6 +207,10 @@ export default {
     border-left: 5px solid $grey-lighter;
   }
 
+  .setuperror {
+    border-left: 5px solid $yellow;
+  }
+
   .name {
     font-weight: bold;
     cursor: pointer;

src/components/runs.vue

@@ -102,6 +102,7 @@ export default {
     },
     runResultClass(run) {
       if (run.result == "unknown") {
+        if (run.phase == "setuperror") return "setuperror";
         if (run.phase == "queued") return "unknown";
         if (run.phase == "cancelled") return "failed";
         if (run.phase == "running") return "running";
@@ -218,6 +219,10 @@ export default {
     border-left: 5px solid $grey-lighter;
   }
 
+  .setuperror {
+    border-left: 5px solid $yellow;
+  }
+
   .name {
     flex: 0 0 30%;
     font-weight: bold;

src/css/_variables.scss

@@ -13,7 +13,6 @@ $purple: #8e44ad;
 $red: #e42522;
 $white-ter: #ecf0f1;
 $primary: #34495e !default;
-$yellow-invert: #fff;
 
 $grey-lighter-invert: findColorInvert($grey-lighter);
 $green-invert: findColorInvert($green);