Fix: display the status of a pool node after deleting a node (Azure#584)

* Fix displaying the status of nodes of a pool after deleting node * Added specs * Fix tests
davidkydd · Jul 31, 2017 · a433c50 · a433c50
1 parent 0016f26
commit a433c50
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 22 deletions.
diff --git a/app/components/pool/base/pool-nodes-preview.component.ts b/app/components/pool/base/pool-nodes-preview.component.ts
@@ -2,6 +2,7 @@ import { Component, HostBinding, Input, OnChanges } from "@angular/core";
 
 import { Pool, PoolAllocationState } from "app/models";
 
+import { PoolUtils } from "app/utils";
 import "./pool-nodes-preview.scss";
 
 @Component({
@@ -20,12 +21,15 @@ export class PoolNodesPreviewComponent implements OnChanges {
     public size: ComponentSize = "normal";
     public tooltipMessage: string;
 
+    public prettyStatus: string = "";
+
     @HostBinding("class.resize-error")
     public hasResizeError: boolean = false;
     public ngOnChanges(inputs) {
         if (inputs.pool) {
             this.tooltipMessage = this._getTooltipMessage();
             this.hasResizeError = this.pool.resizeErrors.size > 0;
+            this.prettyStatus = PoolUtils.poolNodesStatus(this.pool, this.pool.currentNodes, this.pool.targetNodes);
         }
     }
 

diff --git a/app/components/pool/base/pool-nodes-preview.html b/app/components/pool/base/pool-nodes-preview.html
@@ -1,8 +1,4 @@
 <div md-tooltip="{{tooltipMessage}}" tooltip-position="{{tooltipPosition}}">
     <i class="fa fa-tv" [ngClass]="largeIcon ? 'fa-2' : ''"></i>
-    <span>{{pool.currentNodes}}</span>
-    <span *ngIf="pool.currentNodes !== pool.targetNodes">
-        <span >⇾</span>
-        <span>{{pool.targetNodes}}</span>
-    </span>
+    <span>{{prettyStatus}}</span>
 </div>
diff --git a/app/models/decorators/pool-decorator.ts b/app/models/decorators/pool-decorator.ts
@@ -4,6 +4,7 @@ import * as moment from "moment";
 import {
     ApplicationPackageReference, CertificateReference, Pool, UserAccount, UserAccountElevationLevel,
 } from "app/models";
+import { PoolUtils } from "app/utils";
 import { DecoratorBase } from "app/utils/decorators";
 import { CloudServiceConfigurationDecorator } from "./cloud-service-configuration-decorator";
 import { TaskSchedulingPolicyDecorator } from "./task-scheduling-policy-decorator";
@@ -69,8 +70,9 @@ export class PoolDecorator extends DecoratorBase<Pool> {
         this.vmSize = this.stringField(pool.vmSize);
         this.lastResized = moment(this.pool.allocationStateTransitionTime).fromNow();
         this.userAccounts = pool.userAccounts.map(x => this._decorateUserAccount(x)).join(", ");
-        this.dedicatedNodes = this._prettyNodes(pool.currentDedicatedNodes, pool.targetDedicatedNodes);
-        this.lowPriorityNodes = this._prettyNodes(pool.currentLowPriorityNodes, pool.targetLowPriorityNodes);
+        this.dedicatedNodes = PoolUtils.poolNodesStatus(pool, pool.currentDedicatedNodes, pool.targetDedicatedNodes);
+        this.lowPriorityNodes = PoolUtils.poolNodesStatus(pool,
+             pool.currentLowPriorityNodes, pool.targetLowPriorityNodes);
 
         this.poolOs = this._computePoolOs();
         this.poolOsIcon = this._computePoolOsIcon(this.poolOs);
@@ -98,14 +100,6 @@ export class PoolDecorator extends DecoratorBase<Pool> {
         return this.pool.osIconName();
     }
 
-    private _prettyNodes(current: number, target: number) {
-        if (current === target) {
-            return target.toString();
-        } else {
-            return `${current} → ${target}`;
-        }
-    }
-
     private _decorateUserAccount(user: UserAccount) {
         if (user.elevationLevel === UserAccountElevationLevel.admin) {
             return `${user.name} (admin)`;

diff --git a/app/utils/pool-utils.ts b/app/utils/pool-utils.ts
@@ -1,5 +1,5 @@
 import { Icon, IconSources } from "app/components/base/icon";
-import { Pool } from "app/models";
+import { Pool, PoolAllocationState } from "app/models";
 import * as Icons from "./icons";
 
 const iconMapping = {
@@ -134,4 +134,18 @@ export class PoolUtils {
 
         return "linux";
     }
+
+    /**
+     * Display the status of the pool nodes nicely.
+     * @param pool Pool
+     * @param current Current number of nodes
+     * @param target Target number of nodes
+     */
+    public static poolNodesStatus(pool: Pool, current: number, target: number) {
+        if (pool.allocationState === PoolAllocationState.resizing || pool.resizeErrors.size > 0) {
+            return `${current} → ${target}`;
+        } else {
+            return `${current}`;
+        }
+    }
 }
diff --git a/test/app/components/pool/base/pool-nodes-preview.component.spec.ts b/test/app/components/pool/base/pool-nodes-preview.component.spec.ts
@@ -34,7 +34,7 @@ describe("PoolNodesPreviewComponent", () => {
     describe("when pool is steady", () => {
         beforeEach(() => {
             testComponent.pool = new Pool({
-                state: "steady",
+                allocationState: "steady",
                 currentDedicatedNodes: 4, targetDedicatedNodes: 4,
                 currentLowPriorityNodes: 1, targetLowPriorityNodes: 1,
             });
@@ -49,14 +49,14 @@ describe("PoolNodesPreviewComponent", () => {
 
         it("should not show the arrow", () => {
             const text = de.nativeElement.textContent;
-            expect(text).not.toContain("⇾");
+            expect(text).not.toContain("→");
         });
     });
 
     describe("when pool is resizing", () => {
         beforeEach(() => {
             testComponent.pool = new Pool({
-                state: "resizing",
+                allocationState: "resizing",
                 currentDedicatedNodes: 2, targetDedicatedNodes: 8,
                 currentLowPriorityNodes: 1, targetLowPriorityNodes: 1,
             });
@@ -71,14 +71,14 @@ describe("PoolNodesPreviewComponent", () => {
 
         it("should show the arrow", () => {
             const text = de.nativeElement.textContent;
-            expect(text).toContain("⇾");
+            expect(text).toContain("→");
         });
     });
 
     describe("when there is a resize error", () => {
         beforeEach(() => {
             testComponent.pool = new Pool({
-                state: "steady",
+                allocationState: "steady",
                 currentDedicatedNodes: 2, targetDedicatedNodes: 8,
                 currentLowPriorityNodes: 1, targetLowPriorityNodes: 1,
                 resizeErrors: [{ code: "StoppedResize" }] as any,
@@ -94,7 +94,7 @@ describe("PoolNodesPreviewComponent", () => {
 
         it("should show the arrow", () => {
             const text = de.nativeElement.textContent;
-            expect(text).toContain("⇾");
+            expect(text).toContain("→");
         });
 
         it("Should have the resize error class", () => {

diff --git a/test/app/utils/pool-utils.spec.ts b/test/app/utils/pool-utils.spec.ts
@@ -153,4 +153,15 @@ describe("PoolUtils", () => {
             expect(PoolUtils.getComputePoolOsIcon(PoolUtils.getOsName(vm4Pool))).toBe("linux");
         });
     });
+
+    it("#poolNodesStatus()", () => {
+        const status1 = PoolUtils.poolNodesStatus(new Pool({ allocationState: "resizing" }), 1, 4);
+        expect(status1).toEqual("1 → 4");
+
+        const status2 = PoolUtils.poolNodesStatus(new Pool({ allocationState: "steady" }), 4, 0);
+        expect(status2).toEqual("4");
+
+        const status3 = PoolUtils.poolNodesStatus(new Pool({ allocationState: "steady", resizeErrors: [{}] }), 1, 10);
+        expect(status3).toEqual("1 → 10");
+    });
 });