diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js
index 947ae6e9a82..3b9a8f0c13c 100644
--- a/ui/app/components/client-node-row.js
+++ b/ui/app/components/client-node-row.js
@@ -3,6 +3,7 @@ import Component from '@ember/component';
 import { lazyClick } from '../helpers/lazy-click';
 import { watchRelationship } from 'nomad-ui/utils/properties/watch';
 import WithVisibilityDetection from 'nomad-ui/mixins/with-component-visibility-detection';
+import { computed } from '@ember/object';
 
 export default Component.extend(WithVisibilityDetection, {
   store: service(),
@@ -45,4 +46,16 @@ export default Component.extend(WithVisibilityDetection, {
   },
 
   watch: watchRelationship('allocations'),
+
+  stateClass: computed('node.state', function() {
+    let state = this.get('node.state');
+
+    if (state === 'draining') {
+      return 'status-text is-info';
+    } else if (state === 'ineligible') {
+      return 'status-text is-warning';
+    } else {
+      return '';
+    }
+  }),
 });
diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs
index 35619aa19b7..0f5b35d4e97 100644
--- a/ui/app/templates/components/client-node-row.hbs
+++ b/ui/app/templates/components/client-node-row.hbs
@@ -9,13 +9,7 @@
 <td data-test-client-name class="is-200px is-truncatable" title="{{node.name}}">{{node.name}}</td>
 <td data-test-client-state>
   <span class="tooltip" aria-label="{{node.status}} / {{if node.isDraining "draining" "not draining"}} / {{if node.isEligible "eligible" "not eligible"}}">
-    {{#if node.isDraining}}
-      <span class="status-text is-info">draining</span>
-    {{else if (not node.isEligible)}}
-      <span class="status-text is-warning">ineligible</span>
-    {{else}}
-      {{node.status}}
-    {{/if}}
+    <span class="{{stateClass}}">{{node.state}}</span>
   </span>
 </td>
 <td data-test-client-address>{{node.httpAddr}}</td>