diff options
Diffstat (limited to 'app/components/plan-view')
-rw-r--r-- | app/components/plan-view/plan-view.html | 72 | ||||
-rw-r--r-- | app/components/plan-view/plan-view.ts | 96 |
2 files changed, 168 insertions, 0 deletions
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html new file mode 100644 index 0000000..ab9b7dc --- /dev/null +++ b/app/components/plan-view/plan-view.html @@ -0,0 +1,72 @@ +<div class="menu" [class.menu-hidden]="hideMenu"> + <header> + <i class="fa fa-cogs menu-toggle" (click)="hideMenu = !hideMenu"></i> + <h3>display options</h3> + </header> + + <ul> + <li> + <input id="showPlanStats" type="checkbox" [(ngModel)]="viewOptions.showPlanStats"> + <label class="clickable" for="showPlanStats"> show plan stats</label> + </li> + + <li> + <input id="showPlannerEstimate" type="checkbox" [(ngModel)]="viewOptions.showPlannerEstimate"> + <label class="clickable" for="showPlannerEstimate"> show planner estimate</label> + </li> + + <li> + <input id="showTags" type="checkbox" [(ngModel)]="viewOptions.showTags"> + <label class="clickable" for="showTags"> show analysis tags</label> + </li> + + <li> + <label>graph metric: </label> + <select [(ngModel)]="viewOptions.highlightType"> + <option value="{{highlightTypes.NONE}}">{{highlightTypes.NONE}}</option> + <option value="{{highlightTypes.DURATION}}">{{highlightTypes.DURATION}}</option> + <option value="{{highlightTypes.ROWS}}">{{highlightTypes.ROWS}}</option> + <option value="{{highlightTypes.COST}}">{{highlightTypes.COST}}</option> + </select> + </li> + </ul> +</div> + +<nav> + <div class="nav-container"> + <a [routerLink]="['PlanList']">plans</a><span class="text-muted"> / </span>{{plan.name}} + </div> +</nav> + +<div class="page page-stretch"> + <div *ngIf="viewOptions.showPlanStats" class="plan-stats"> + <div> + <span class="stat-value">{{executionTime}}</span> + <span class="stat-label">execution time ({{executionTimeUnit}})</span> + </div> + <div *ngIf="planStats.planningTime"> + <span class="stat-value">{{planStats.planningTime | number:'.0-2'}}</span> + <span class="stat-label">planning time (ms)</span> + </div> + <div *ngIf="planStats.maxDuration"> + <span class="stat-value">{{planStats.maxDuration | number:'.0-2'}}</span> + <span class="stat-label">slowest node (ms)</span> + </div> + <div *ngIf="planStats.maxRows"> + <span class="stat-value">{{planStats.maxRows | number:'.0-2'}}</span> + <span class="stat-label">largest node (rows)</span> + </div> + <div *ngIf="planStats.maxCost"> + <span class="stat-value">{{planStats.maxCost | number:'.0-2'}}</span> + <span class="stat-label">costliest node</span> + </div> + </div> + + <div class="plan"> + <ul> + <li> + <plan-node [node]="rootContainer.Plan" [planStats]="planStats" [viewOptions]="viewOptions"></plan-node> + </li> + </ul> + </div> +</div> diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts new file mode 100644 index 0000000..ab4e6a3 --- /dev/null +++ b/app/components/plan-view/plan-view.ts @@ -0,0 +1,96 @@ +import {Component, OnInit} from 'angular2/core'; +import {RouteParams} from 'angular2/router'; +import {ROUTER_DIRECTIVES} from 'angular2/router'; + +import {IPlan} from '../../interfaces/iplan'; +import {PlanService} from '../../services/plan-service'; +import {HighlightType} from '../../enums'; +import {PlanNode} from '../plan-node/plan-node'; + +@Component({ + selector: 'plan-view', + templateUrl: './components/plan-view/plan-view.html', + directives: [ROUTER_DIRECTIVES, PlanNode], + providers: [PlanService] +}) +export class PlanView { + id: string; + plan: IPlan; + rootContainer: any; + executionTime: string; + executionTimeUnit: string; + hideMenu: boolean = true; + + planStats: any = { + executionTime: 0, + maxRows: 0, + maxCost: 0, + maxDuration: 0 + }; + + viewOptions: any = { + showPlanStats: true, + showHighlightBar: true, + showPlannerEstimate: false, + showTags: true, + highlightType: HighlightType.NONE + }; + + showPlannerEstimate: boolean = true; + showMenu: boolean = false; + + highlightTypes = HighlightType; // exposing the enum to the view + + constructor(private _planService: PlanService, routeParams: RouteParams) { + this.id = routeParams.get('id'); + } + + getPlan() { + if (!this.id) { + return; + } + + 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.planStats = { + executionTime: executionTime, + planningTime: this.rootContainer['Planning Time'], + maxRows: this.rootContainer[this._planService.MAXIMUM_ROWS_PROP], + maxCost: this.rootContainer[this._planService.MAXIMUM_COSTS_PROP], + maxDuration: this.rootContainer[this._planService.MAXIMUM_DURATION_PROP] + } + } + + ngOnInit() { + this.getPlan(); + } + + toggleHighlight(type: HighlightType) { + this.viewOptions.highlightType = type; + } + + 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]; + } +} |