Fix: Pool node file preview

app/components/pool/base/index.ts

@@ -0,0 +1 @@
+export * from "./pool-nodes-preview.component";

app/components/pool/base/pool-nodes-preview.component.ts

@@ -1,28 +1,42 @@
-import { Component, Input } from "@angular/core";
+import { Component, HostBinding, Input, OnChanges } from "@angular/core";
 
 import { Pool } from "app/models";
 
+import "./pool-nodes-preview.scss";
+
 @Component({
     selector: "bl-pool-nodes-preview",
     templateUrl: "pool-nodes-preview.html",
 })
-export class PoolNodesPreviewComponent {
+export class PoolNodesPreviewComponent implements OnChanges {
     @Input()
     public pool: Pool;
 
     @Input()
     public tooltipPosition: string = "below";
 
     @Input()
-    public largeIcon: boolean = false;
+    @HostBinding("class")
+    public size: ComponentSize = "normal";
+    public tooltipMessage: string;
+
+    @HostBinding("class.resize-error")
+    public hasResizeError: boolean = false;
+    public ngOnChanges(inputs) {
+        if (inputs.pool) {
+            this.tooltipMessage = this._getTooltipMessage();
+            this.hasResizeError = Boolean(this.pool.resizeError);
+        }
+    }
 
-    public get tooltipMessage() {
-        if (this.pool.resizeError) {
+    private _getTooltipMessage() {
+        const pool = this.pool;
+        if (pool.resizeError) {
             return "There was a resize error";
-        } else if (this.pool.currentDedicated !== this.pool.targetDedicated) {
-            return `Pool is resizing from ${this.pool.currentDedicated} to ${this.pool.targetDedicated} nodes`;
+        } else if (pool.currentDedicated !== pool.targetDedicated) {
+            return `Pool is resizing from ${pool.currentDedicated} to ${pool.targetDedicated} nodes`;
         } else {
-            return `Pool has ${this.pool.currentDedicated} nodes`;
+            return `Pool has ${pool.currentDedicated} nodes`;
         }
     }
 }

app/components/pool/base/pool-nodes-preview.html

@@ -1,4 +1,4 @@
-<div [class.resize-error]="pool.resizeError" [class.large]="largeIcon" md-tooltip="{{tooltipMessage}}" tooltip-position="{{tooltipPosition}}">
+<div md-tooltip="{{tooltipMessage}}" tooltip-position="{{tooltipPosition}}">
     <i class="fa fa-tv" [ngClass]="largeIcon ? 'fa-2' : ''"></i>
     <span>{{pool.currentDedicated}}</span>
     <span *ngIf="pool.currentDedicated !== pool.targetDedicated">

app/components/pool/base/pool-nodes-preview.scss

@@ -0,0 +1,17 @@
+@import "app/styles/variables";
+
+bl-pool-nodes-preview {
+
+    &.small {
+        font-size: 10px;
+    }
+
+    &.large {
+        font-size: 24px;
+    }
+
+    &.resize-error {
+        color: $red;
+        font-weight: bold;
+    }
+}

app/components/pool/details/pool-details.html

@@ -10,7 +10,7 @@
                     <md-card-subtitle>{{pool.vmSize}}, {{pool.allocationState}}</md-card-subtitle>
                 </div>
                 <div>
-                    <bl-pool-nodes-preview [pool]="pool" [largeIcon]="true"></bl-pool-nodes-preview>
+                    <bl-pool-nodes-preview [pool]="pool" size="large"></bl-pool-nodes-preview>
                 </div>
             </md-card-title-group>
             <md-card-content>

app/styles/pool/base.scss

@@ -1,16 +1,3 @@
-bl-pool-nodes-preview {
-    > div.large {
-        span {
-            font-size: 1.5em;
-        }
-    }
-
-    .resize-error {
-        color: $red;
-        font-weight: bold;
-    }
-}
-
 bl-pool-advanced-filter {
     display: block;
 }

definitions/index.d.ts

@@ -32,3 +32,5 @@ type StringMap<V> = { [key: string]: V };
 type AttrOf<T> = {
     [P in keyof T]: T[P];
 };
+
+type ComponentSize = "small" | "normal" | "large";

test/app/components/pool/base/pool-nodes-preview.component.spec.ts

@@ -0,0 +1,94 @@
+import { Component, DebugElement, NO_ERRORS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { PoolNodesPreviewComponent } from "app/components/pool/base";
+import { Pool } from "app/models";
+
+@Component({
+    template: `<bl-pool-nodes-preview [pool]="pool"></bl-pool-nodes-preview>`,
+})
+class TestComponent {
+    public pool: Pool = new Pool({});
+}
+
+describe("PoolNodesPreviewComponent", () => {
+    let fixture: ComponentFixture<TestComponent>;
+    let testComponent: TestComponent;
+    let component: PoolNodesPreviewComponent;
+    let de: DebugElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [],
+            declarations: [PoolNodesPreviewComponent, TestComponent],
+            schemas: [NO_ERRORS_SCHEMA],
+        });
+        fixture = TestBed.createComponent(TestComponent);
+        testComponent = fixture.componentInstance;
+        de = fixture.debugElement.query(By.css("bl-pool-nodes-preview"));
+        component = de.componentInstance;
+        fixture.detectChanges();
+    });
+
+    describe("when pool is steady", () => {
+        beforeEach(() => {
+            testComponent.pool = new Pool({ state: "steady", currentDedicated: 4, targetDedicated: 4 });
+            fixture.detectChanges();
+        });
+
+        it("should just show the current dedicated", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).toContain("4");
+            expect((text.match(/4/g) || []).length).toBe(1, "Should only have one 4 in the content");
+        });
+
+        it("should not show the arrow", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).not.toContain("⇾");
+        });
+    });
+
+    describe("when pool is resizing", () => {
+        beforeEach(() => {
+            testComponent.pool = new Pool({ state: "resizing", currentDedicated: 2, targetDedicated: 8 });
+            fixture.detectChanges();
+        });
+
+        it("should just show the current dedicated", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).toContain("2");
+            expect(text).toContain("8");
+        });
+
+        it("should show the arrow", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).toContain("⇾");
+        });
+    });
+
+    describe("when there is a resize error", () => {
+        beforeEach(() => {
+            testComponent.pool = new Pool({
+                state: "steady", currentDedicated: 2, targetDedicated: 8,
+                resizeError: { code: "StoppedResize" } as any,
+            });
+            fixture.detectChanges();
+        });
+
+        it("should just show the current dedicated", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).toContain("2");
+            expect(text).toContain("8");
+        });
+
+        it("should show the arrow", () => {
+            const text = de.nativeElement.textContent;
+            expect(text).toContain("⇾");
+        });
+
+        it("Should have the resize error class", () => {
+            expect(de.classes["resize-error"]).toBe(true);
+        });
+    });
+});