Refactor distribution-bar chart derivatives to use composition instea…

…d of inheritance
hashicorp · Feb 6, 2018 · e818757 · e818757
1 parent 9e606f3
commit e818757
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}}