From d89ddcf3532937d395898f255c42f3d26303f1c4 Mon Sep 17 00:00:00 2001
From: Alex Tatiyants <atatiyan@gmail.com>
Date: Mon, 4 Jan 2016 19:42:44 -0800
Subject: add integrated query view with syntax highlighting

---
 app/components/plan-node/plan-node.html | 20 +++++++++++++++++---
 app/components/plan-node/plan-node.ts   | 26 ++++++++++++++++++--------
 2 files changed, 35 insertions(+), 11 deletions(-)

(limited to 'app/components/plan-node')

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index 49380a2..ddf6722 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,12 +1,18 @@
 <div class="plan-node">
    <header (click)="showDetails = !showDetails">
-      <h4>{{node['Node Type'] | uppercase}}</h4>
+      <h4>{{node['Node Type'] | uppercase}}
+      </h4>
       <span class="node-duration">{{duration}}<span class="text-muted">{{durationUnit}} | </span>
       <strong>{{executionTimePercent}}</strong><span class="text-muted">%</span>
       </span>
    </header>
 
-   <div class="relation-name" *ngIf="node['Relation Name']"><span class="text-muted">on </span>
+   <div class="relation-name" *ngIf="node['Relation Name']">
+      <button *ngIf="plan.formattedQuery" class="btn btn-sm btn-default btn-slim pull-right" (click)="showQuery = !showQuery">
+         <i class="fa fa-database"></i>
+      </button>
+
+      <span class="text-muted">on </span>
       <span *ngIf="node['Schema']">{{node['Schema']}}.</span>{{node['Relation Name']}}
       <span *ngIf="node['Alias']"> ({{node['Alias']}})</span>
    </div>
@@ -41,10 +47,18 @@
          <td>{{prop.value}}</td>
       <tr>
    </table>
+
+   <div *ngIf="showQuery" class="plan-query-container">
+      <button class="btn btn-close pull-right" (click)="showQuery = false">
+         <i class="fa fa-close"></i>
+      </button>
+      <h3>query</h3>
+      <pre class="plan-query-text"><code [innerHTML]="getFormattedQuery()"></code></pre>
+   </div>
 </div>
 
 <ul *ngIf="node.Plans">
   <li *ngFor="#subNode of node.Plans">
-    <plan-node [node]="subNode" [viewOptions]="viewOptions" [planStats]="planStats"></plan-node>
+    <plan-node [plan]="plan" [node]="subNode" [viewOptions]="viewOptions" [planStats]="planStats"></plan-node>
   </li>
 </ul>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 3562ea6..8aaab2c 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -1,14 +1,16 @@
+import {IPlan} from '../../interfaces/iplan';
 import {Component, OnInit} from 'angular2/core';
 import {HighlightType, EstimateDirection} from '../../enums';
 import {PlanService} from '../../services/plan-service';
+import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
 /// <reference path="lodash.d.ts" />
 
 @Component({
     selector: 'plan-node',
-    inputs: ['node', 'planStats', 'viewOptions'],
+    inputs: ['plan', 'node', 'viewOptions'],
     templateUrl: './components/plan-node/plan-node.html',
     directives: [PlanNode],
-    providers: [PlanService]
+    providers: [PlanService, SyntaxHighlightService]
 })
 
 export class PlanNode {
@@ -21,8 +23,8 @@ export class PlanNode {
     ESTIMATE_TAG: string = 'bad estimate';
 
     // inputs
+    plan: IPlan;
     node: any;
-    planStats: any;
     viewOptions: any;
 
     // calculated properties
@@ -42,7 +44,7 @@ export class PlanNode {
     estimateDirections = EstimateDirection;
     highlightTypes = HighlightType;
 
-    constructor(private _planService: PlanService) { }
+    constructor(private _planService: PlanService, private _syntaxHighlightService: SyntaxHighlightService) { }
 
     ngOnInit() {
         this.currentHighlightType = this.viewOptions.highlightType;
@@ -63,19 +65,27 @@ export class PlanNode {
         }
     }
 
+    getFormattedQuery() {
+      var keyItems: Array<string> = [];
+      keyItems.push(this.node['Schema'] + '.' + this.node['Relation Name']);
+      keyItems.push(' ' + this.node['Relation Name'] + ' ');
+      keyItems.push(' ' + this.node['Alias'] + ' ');
+      return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems);
+    }
+
     calculateBar() {
         switch (this.currentHighlightType) {
             case HighlightType.DURATION:
                 this.highlightValue = (this.node[this._planService.ACTUAL_DURATION_PROP]);
-                this.width = Math.round((this.highlightValue / this.planStats.maxDuration) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxDuration) * this.MAX_WIDTH);
                 break;
             case HighlightType.ROWS:
                 this.highlightValue = (this.node[this._planService.ACTUAL_ROWS_PROP]);
-                this.width = Math.round((this.highlightValue / this.planStats.maxRows) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxRows) * this.MAX_WIDTH);
                 break;
             case HighlightType.COST:
                 this.highlightValue = (this.node[this._planService.ACTUAL_COST_PROP]);
-                this.width = Math.round((this.highlightValue / this.planStats.maxCost) * this.MAX_WIDTH);
+                this.width = Math.round((this.highlightValue / this.plan.planStats.maxCost) * this.MAX_WIDTH);
                 break;
         }
 
@@ -96,7 +106,7 @@ export class PlanNode {
             this.duration = _.round(dur / 1000, 2).toString();
             this.durationUnit = 'mins';
         }
-        this.executionTimePercent = (_.round((dur / this.planStats.executionTime) * 100));
+        this.executionTimePercent = (_.round((dur / this.plan.planStats.executionTime) * 100));
     }
 
     // create an array of node propeties so that they can be displayed in the view
-- 
cgit v1.2.3