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