aboutsummaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/components/plan-node/plan-node.html4
-rw-r--r--app/components/plan-node/plan-node.ts32
-rw-r--r--app/components/plan-view/plan-view.html8
-rw-r--r--app/components/plan-view/plan-view.ts29
-rw-r--r--app/pipes.ts45
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;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-12 03:30:24 +0000