diff --git a/ui/app/components/allocation-status-bar.js b/ui/app/components/allocation-status-bar.js
index 5322ac97eab0..653c5dbae668 100644
--- a/ui/app/components/allocation-status-bar.js
+++ b/ui/app/components/allocation-status-bar.js
@@ -1,14 +1,12 @@
+import Component from '@ember/component';
 import { computed } from '@ember/object';
-import DistributionBar from './distribution-bar';
 
-export default DistributionBar.extend({
-  layoutName: 'components/distribution-bar',
+export default Component.extend({
+  tagName: '',
 
   allocationContainer: null,
 
-  'data-test-allocation-status-bar': true,
-
-  data: computed(
+  allocationsByStatus: computed(
     'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs}',
     function() {
       if (!this.get('allocationContainer')) {
diff --git a/ui/app/components/children-status-bar.js b/ui/app/components/children-status-bar.js
index b95b4f240506..afafb3807eb9 100644
--- a/ui/app/components/children-status-bar.js
+++ b/ui/app/components/children-status-bar.js
@@ -1,14 +1,14 @@
+import Component from '@ember/component';
 import { computed } from '@ember/object';
-import DistributionBar from './distribution-bar';
 
-export default DistributionBar.extend({
-  layoutName: 'components/distribution-bar',
+export default Component.extend({
+  tagName: '',
 
   job: null,
 
   'data-test-children-status-bar': true,
 
-  data: computed('job.{pendingChildren,runningChildren,deadChildren}', function() {
+  childrenByStatus: computed('job.{pendingChildren,runningChildren,deadChildren}', function() {
     if (!this.get('job')) {
       return [];
     }
diff --git a/ui/app/templates/components/allocation-status-bar.hbs b/ui/app/templates/components/allocation-status-bar.hbs
new file mode 100644
index 000000000000..ef63698b1e24
--- /dev/null
+++ b/ui/app/templates/components/allocation-status-bar.hbs
@@ -0,0 +1,13 @@
+{{#if hasBlock}}
+  {{#distribution-bar data-test-allocation-status-bar
+    class=class
+    data=allocationsByStatus
+    isNarrow=isNarrow as |chart|}}
+    {{yield chart}}
+  {{/distribution-bar}}
+{{else}}
+  {{distribution-bar data-test-allocation-status
+    class=class
+    data=allocationsByStatus
+    isNarrow=isNarrow}}
+{{/if}}
diff --git a/ui/app/templates/components/children-status-bar.hbs b/ui/app/templates/components/children-status-bar.hbs
new file mode 100644
index 000000000000..41d469030cfb
--- /dev/null
+++ b/ui/app/templates/components/children-status-bar.hbs
@@ -0,0 +1,13 @@
+{{#if hasBlock}}
+  {{#distribution-bar data-test-children-status-bar
+    class=class
+    data=childrenByStatus
+    isNarrow=isNarrow as |chart|}}
+    {{yield chart}}
+  {{/distribution-bar}}
+{{else}}
+  {{distribution-bar data-test-children-status-bar
+    class=class
+    data=childrenByStatus
+    isNarrow=isNarrow}}
+{{/if}}