add a legend to the pipeline view

[#78782336]
concourse · Oct 12, 2014 · dc1ba85 · dc1ba85
1 parent 5cf56f1
commit dc1ba85
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/web/public/colors.css b/web/public/colors.css
@@ -46,6 +46,7 @@ svg #arrowhead-pending path { fill: #505050; }
 svg .node.job.pending rect { fill: #505050; }
 #build-title.pending { background: #505050; }
 li.pending { background: #505050; }
+.legend dt.pending { background: #505050; }
 #build-requires-auth input:hover { background: #505050; }
 
 /* good */
@@ -54,13 +55,15 @@ svg #arrowhead-succeeded path { fill: #90a959; }
 svg .node.job.succeeded rect { fill: #90a959; }
 #build-title.succeeded { background: #90a959; }
 li.succeeded { background: #90a959; }
+.legend dt.succeeded { background: #90a959; }
 
 /* bad */
 svg .edgePath.failed path { stroke: #ac4142; }
 svg #arrowhead-failed path { fill: #ac4142; }
 svg .node.job.failed rect { fill: #ac4142; }
 #build-title.failed { background: #ac4142; }
 li.failed { background: #ac4142; }
+.legend dt.failed { background: #ac4142; }
 #build-title .abort-build input { color: #ac4142; }
 #build-title .abort-build input:hover { background: #ac4142; }
 span.error { color: #ac4142; }
@@ -71,6 +74,7 @@ svg #arrowhead-errored path { fill: #d28445; }
 svg .node.job.errored rect { fill: #d28445; }
 #build-title.errored { background: #d28445; }
 li.errored { background: #d28445; }
+.legend dt.errored { background: #d28445; }
 svg .node.resource.failing rect { fill: #d28445; }
 .build-source.errored .resource-header { background: #d28445; }
 
@@ -80,6 +84,7 @@ svg #arrowhead-aborted path { fill: #8f5536; }
 svg .node.job.aborted rect { fill: #8f5536; }
 #build-title.aborted { background: #8f5536; }
 li.aborted { background: #8f5536; }
+.legend dt.aborted { background: #8f5536; }
 #build-title .abort-build input:active { background: #8f5536; }
 
 /* active */
@@ -88,6 +93,7 @@ svg #arrowhead-started path { fill: #f4bf75; }
 svg .node.job.started rect { fill: #f4bf75; }
 #build-title.started { background: #f4bf75; }
 li.started { background: #f4bf75; }
+.legend dt.started { background: #f4bf75; }
 
 /* ansi text */
 ::selection { background: #505050; color: #f5f5f5; }

diff --git a/web/public/main.css b/web/public/main.css
@@ -235,6 +235,12 @@ pre {
   100% { -webkit-transform: rotate(1deg); }
 }
 
+@-webkit-keyframes wiggle-build-wigglier {
+  0% { -webkit-transform: rotate(3deg); }
+  50% { -webkit-transform: rotate(-3deg); }
+  100% { -webkit-transform: rotate(3deg); }
+}
+
 @-webkit-keyframes pulsate {
   0% { opacity: 1.0; }
   50% { opacity: 0.5; }
@@ -406,6 +412,30 @@ span.error {
   right: 0;
 }
 
+#pipeline .legend {
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  margin: 0;
+  padding: 0;
+}
+
+#pipeline .legend dt {
+  width: 10px;
+  height: 10px;
+  margin: 4px;
+  float: left;
+}
+
+#pipeline .legend dt.started {
+  -webkit-animation: wiggle-build-wigglier 0.5s infinite;
+}
+
+#pipeline .legend dd {
+  margin-left: 22px;
+  line-height: 18px;
+}
+
 svg h1 {
   margin: 5px;
   width: 100%;

diff --git a/web/templates/index.html b/web/templates/index.html
@@ -10,6 +10,21 @@
 </div>
 
 <div id="pipeline">
+  <dl class="legend">
+    <dt class="pending"></dt>
+      <dd>pending</dd>
+    <dt class="started"></dt>
+      <dd>started</dd>
+    <dt class="succeeded"></dt>
+      <dd>succeeded</dd>
+    <dt class="failed"></dt>
+      <dd>failed</dd>
+    <dt class="errored"></dt>
+      <dd>errored</dd>
+    <dt class="aborted"></dt>
+      <dd>aborted</dd>
+  </dl>
+
   <svg width="100%" height="100%">
     <g>
       <defs>