From 6e3792384a9c665189032b4e0ac50e41deafc4a8 Mon Sep 17 00:00:00 2001 From: Alex Tatiyants Date: Wed, 13 Jan 2016 09:29:14 -0800 Subject: move duration formatting into separate pipes --- app/components/plan-node/plan-node.html | 4 +-- app/components/plan-node/plan-node.ts | 32 ++++++++--------------- app/components/plan-view/plan-view.html | 8 +++--- app/components/plan-view/plan-view.ts | 29 +++------------------ app/pipes.ts | 45 +++++++++++++++++++++++++++++---- 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 @@

{{node[_planService.NODE_TYPE_PROP] | uppercase}}

- {{duration}} - {{durationUnit}} | {{executionTimePercent}} + {{node[_planService.ACTUAL_DURATION_PROP] | duration}} + {{node[_planService.ACTUAL_DURATION_PROP] | durationUnit}} | {{executionTimePercent}} % 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 @@

{{plan.name}}

- {{executionTime}} - execution time ({{executionTimeUnit}}) + {{plan.planStats.executionTime | duration}} + execution time ({{plan.planStats.executionTime | durationUnit}})
{{plan.planStats.planningTime | number:'.0-2'}} planning time (ms)
- {{plan.planStats.maxDuration | number:'.0-2'}} - slowest node (ms) + {{plan.planStats.maxDuration | duration}} + slowest node ({{plan.planStats.maxDuration | durationUnit}})
{{plan.planStats.maxRows | number:'.0-2'}} 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'; /// -@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; + } } -- cgit v1.2.3