move duration formatting into separate pipes

5 files changed, 60 insertions, 58 deletions

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index 1b53c9c..da8cc00 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -3,8 +3,8 @@
       <h4>{{node[_planService.NODE_TYPE_PROP] | uppercase}}
       </h4>
       <span *ngIf="!viewOptions.showCompactView">
-         <span class="node-duration">{{duration}}
-            <span class="text-muted">{{durationUnit}} | </span><strong>{{executionTimePercent}}</strong>
+         <span class="node-duration">{{node[_planService.ACTUAL_DURATION_PROP] | duration}}
+            <span class="text-muted">{{node[_planService.ACTUAL_DURATION_PROP] | durationUnit}} | </span><strong>{{executionTimePercent}}</strong>
             <span class="text-muted">%</span>
          </span>
       </span>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index e78b5a2..0d3c420 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -1,6 +1,7 @@
 import {IPlan} from '../../interfaces/iplan';
 import {Component, OnInit} from 'angular2/core';
 import {HighlightType, EstimateDirection} from '../../enums';
+import {DurationPipe, DurationUnitPipe} from '../../pipes';
 
 import {PlanService} from '../../services/plan-service';
 import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
@@ -14,7 +15,8 @@ import {ColorService} from '../../services/color-service';
     inputs: ['plan', 'node', 'viewOptions'],
     templateUrl: './components/plan-node/plan-node.html',
     directives: [PlanNode],
-    providers: [PlanService, SyntaxHighlightService, HelpService, ColorService]
+    providers: [PlanService, SyntaxHighlightService, HelpService, ColorService],
+    pipes: [DurationPipe, DurationUnitPipe]
 })
 
 export class PlanNode {
@@ -38,8 +40,6 @@ export class PlanNode {
     showDetails: boolean;
 
     // calculated properties
-    duration: string;
-    durationUnit: string;
     executionTimePercent: number;
     backgroundColor: string;
     highlightValue: number;
@@ -50,7 +50,7 @@ export class PlanNode {
     plannerRowEstimateValue: number;
     plannerRowEstimateDirection: EstimateDirection;
 
-     // required for custom change detection
+    // required for custom change detection
     currentHighlightType: string;
     currentCompactView: boolean;
     currentExpandedView: boolean;
@@ -87,8 +87,8 @@ export class PlanNode {
         }
 
         if (this.currentExpandedView !== this.showDetails) {
-           this.currentExpandedView = this.showDetails;
-           this.calculateBar();
+            this.currentExpandedView = this.showDetails;
+            this.calculateBar();
         }
     }
 
@@ -116,7 +116,7 @@ export class PlanNode {
         }
 
         if (this.node[this._planService.NODE_TYPE_PROP].toUpperCase() === 'LIMIT') {
-           keyItems.push('LIMIT');
+            keyItems.push('LIMIT');
         }
         return this._syntaxHighlightService.highlight(this.plan.query, keyItems);
     }
@@ -126,7 +126,7 @@ export class PlanNode {
 
         // expanded view width trumps others
         if (this.currentExpandedView) {
-           this.barContainerWidth = this.EXPANDED_WIDTH;
+            this.barContainerWidth = this.EXPANDED_WIDTH;
         }
 
         switch (this.currentHighlightType) {
@@ -145,26 +145,14 @@ export class PlanNode {
         }
 
         if (this.barWidth < 1) {
-           this.barWidth = 1;
+            this.barWidth = 1;
         }
 
         this.backgroundColor = this._colorService.numberToColorHsl(1 - this.barWidth / this.barContainerWidth);
     }
 
     calculateDuration() {
-        var dur: number = _.round(this.node[this._planService.ACTUAL_DURATION_PROP]);
-        // convert duration into approriate units
-        if (dur < 1) {
-            this.duration = '<1';
-            this.durationUnit = 'ms';
-        } else if (dur > 1 && dur < 1000) {
-            this.duration = dur.toString();
-            this.durationUnit = 'ms';
-        } else {
-            this.duration = _.round(dur / 1000, 2).toString();
-            this.durationUnit = 'mins';
-        }
-        this.executionTimePercent = (_.round((dur / this.plan.planStats.executionTime) * 100));
+        this.executionTimePercent = (_.round((this.node[this._planService.ACTUAL_DURATION_PROP] / this.plan.planStats.executionTime) * 100));
     }
 
     // create an array of node propeties so that they can be displayed in the view
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index c05a30e..6d6e5d4 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -41,16 +41,16 @@
    <h2>{{plan.name}}</h2>
    <div *ngIf="viewOptions.showPlanStats" class="plan-stats">
       <div>
-         <span class="stat-value">{{executionTime}}</span>
-         <span class="stat-label">execution time ({{executionTimeUnit}})</span>
+         <span class="stat-value">{{plan.planStats.executionTime | duration}}</span>
+         <span class="stat-label">execution time ({{plan.planStats.executionTime | durationUnit}})</span>
       </div>
       <div *ngIf="plan.planStats.planningTime">
          <span class="stat-value">{{plan.planStats.planningTime | number:'.0-2'}}</span>
          <span class="stat-label">planning time (ms)</span>
       </div>
       <div *ngIf="plan.planStats.maxDuration">
-         <span class="stat-value">{{plan.planStats.maxDuration | number:'.0-2'}}</span>
-         <span class="stat-label">slowest node (ms)</span>
+         <span class="stat-value">{{plan.planStats.maxDuration | duration}}</span>
+         <span class="stat-label">slowest node ({{plan.planStats.maxDuration | durationUnit}})</span>
       </div>
       <div *ngIf="plan.planStats.maxRows">
          <span class="stat-value">{{plan.planStats.maxRows | number:'.0-2'}}</span>
diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts
index 93b3a97..895cccf 100644
--- a/app/components/plan-view/plan-view.ts
+++ b/app/components/plan-view/plan-view.ts
@@ -6,19 +6,19 @@ import {HighlightType} from '../../enums';
 import {PlanNode} from '../plan-node/plan-node';
 import {PlanService} from '../../services/plan-service';
 import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
+import {DurationPipe, DurationUnitPipe} from '../../pipes';
 
 @Component({
     selector: 'plan-view',
     templateUrl: './components/plan-view/plan-view.html',
     directives: [ROUTER_DIRECTIVES, PlanNode],
-    providers: [PlanService, SyntaxHighlightService]
+    providers: [PlanService, SyntaxHighlightService],
+    pipes: [DurationPipe, DurationUnitPipe]
 })
 export class PlanView {
     id: string;
     plan: IPlan;
     rootContainer: any;
-    executionTime: string;
-    executionTimeUnit: string;
     hideMenu: boolean = true;
 
     viewOptions: any = {
@@ -45,12 +45,8 @@ export class PlanView {
 
         this.plan = this._planService.getPlan(this.id);
         this.rootContainer = this.plan.content;
-
-        var executionTime: number = this.rootContainer['Execution Time'] || this.rootContainer['Total Runtime'];
-        [this.executionTime, this.executionTimeUnit] = this.calculateDuration(executionTime);
-
         this.plan.planStats = {
-            executionTime: executionTime,
+            executionTime: this.rootContainer['Execution Time'] || this.rootContainer['Total Runtime'],
             planningTime: this.rootContainer['Planning Time'] || 0,
             maxRows: this.rootContainer[this._planService.MAXIMUM_ROWS_PROP] || 0,
             maxCost: this.rootContainer[this._planService.MAXIMUM_COSTS_PROP] || 0,
@@ -69,21 +65,4 @@ export class PlanView {
     analyzePlan() {
         this._planService.analyzePlan(this.plan);
     }
-
-    calculateDuration(originalValue: number) {
-        var duration: string = '';
-        var unit: string = '';
-
-        if (originalValue < 1) {
-            duration = '<1';
-            unit = 'ms';
-        } else if (originalValue > 1 && originalValue < 1000) {
-            duration = originalValue.toString();
-            unit = 'ms';
-        } else {
-            duration = _.round(originalValue / 1000, 2).toString();
-            unit = 'mins';
-        }
-        return [duration, unit];
-    }
 }
diff --git a/app/pipes.ts b/app/pipes.ts
index 214c87a..90ef59f 100644
--- a/app/pipes.ts
+++ b/app/pipes.ts
@@ -1,10 +1,45 @@
 import {Pipe} from 'angular2/core';
 /// <reference path="moment.d.ts" />
 
-@Pipe({name: 'momentDate'})
-
+@Pipe({ name: 'momentDate' })
 export class MomentDatePipe {
-  transform(value:string, args:string[]) : any {
-    return moment(value).format('LLL');
-  }
+    transform(value: string, args: string[]): any {
+        return moment(value).format('LLL');
+    }
+}
+
+@Pipe({ name: 'duration' })
+export class DurationPipe {
+    transform(value: number): string {
+        var duration: string = '';
+
+        if (value < 1) {
+            duration = '<1';
+        } else if (value > 1 && value < 1000) {
+            duration = _.round(value, 2).toString();
+        } else if (value >= 1000 && value < 60000) {
+            duration = _.round(value / 1000, 2).toString();
+        } else if (value >= 60000) {
+            duration = _.round(value / 60000, 2).toString();
+        }
+        return duration;
+    }
+}
+
+@Pipe({ name: 'durationUnit' })
+export class DurationUnitPipe {
+    transform(value: number) {
+        var unit: string = '';
+
+        if (value < 1) {
+            unit = 'ms';
+        } else if (value > 1 && value < 1000) {
+            unit = 'ms';
+        } else if (value >= 1000 && value < 60000) {
+            unit = 'secs';
+        } else if (value >= 60000) {
+            unit = 'mins';
+        }
+        return unit;
+    }
 }