Merge pull request #7047 from hashicorp/f-ui/node-drain-icons

UI: Node drain status light icons

ui/app/components/client-node-row.js

@@ -54,6 +54,8 @@ export default Component.extend(WithVisibilityDetection, {
       return 'status-text is-info';
     } else if (compositeStatus === 'ineligible') {
       return 'status-text is-warning';
+    } else if (compositeStatus === 'down') {
+      return 'status-text is-danger';
     } else {
       return '';
     }

ui/app/models/node.js

@@ -91,6 +91,17 @@ export default Model.extend({
     }
   }),
 
+  compositeStatusIcon: computed('isDraining', 'isEligible', 'status', function() {
+    if (this.isDraining || !this.isEligible) {
+      return 'alert-circle-fill';
+    } else if (this.status === 'down') {
+      return 'cancel-circle-fill';
+    } else if (this.status === 'initializing') {
+      return 'node-init-circle-fill';
+    }
+    return 'check-circle-fill';
+  }),
+
   setEligible() {
     if (this.isEligible) return RSVP.resolve();
     // Optimistically update schedulingEligibility for immediate feedback

ui/app/styles/components/node-status-light.scss

@@ -1,34 +1,52 @@
-$size: 1.3rem;
+$size: 1.6rem;
 
 .node-status-light {
-  display: inline-block;
+  display: inline-flex;
   height: $size;
   width: $size;
   border-radius: $size / 2;
   vertical-align: middle;
+  align-items: center;
+  justify-content: center;
 
-  background: $black;
+  // Compensate for the padding within the SVG
+  // (between the circle paths and the viewBox)
+  margin-left: -1px;
+  margin-right: -1px;
 
   &.ready {
-    background: $primary;
+    color: $primary;
   }
 
   &.down {
-    background: $danger;
+    color: $danger;
   }
 
   &.initializing {
-    background: repeating-linear-gradient(
-      -45deg,
-      $grey-lighter,
-      $grey-lighter 3px,
-      darken($grey-lighter, 25%) 3px,
-      darken($grey-lighter, 25%) 6px
-    );
+    color: $grey-light;
+
+    .blinking {
+      animation: node-status-light-initializing 0.7s infinite alternate ease-in-out;
+    }
   }
 
   &.ineligible,
   &.draining {
-    background: $warning;
+    color: $warning;
+  }
+
+  .icon {
+    width: $size;
+    height: $size;
+  }
+}
+
+@keyframes node-status-light-initializing {
+  0% {
+    opacity: 0.2;
+  }
+
+  100% {
+    opacity: 0.7;
   }
 }

ui/app/templates/clients/client.hbs

@@ -81,7 +81,9 @@
   <div class="toolbar">
     <div class="toolbar-item is-top-aligned is-minimum">
       <span class="title">
-        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}"></span>
+        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}">
+          {{x-icon model.compositeStatusIcon}}
+        </span>
       </span>
     </div>
     <div class="toolbar-item">

ui/public/images/icons/node-init-circle-fill.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="10" cy="10" r="10" fill="currentColor" transform="translate(2 2)"/>
+    <path fill="#FFF" d="M18 13v4H6v-4h12zM8 14a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+    <path class="blinking" fill="#FFF" d="M18 7v4H6V7h12zM8 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" opacity=".502"/>
+  </g>
+</svg>