move duration formatting into separate pipes

2 files changed, 8 insertions, 29 deletions

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];
-    }
 }