add node descriptions, clean up plan-node.ts

1 files changed, 25 insertions, 15 deletions

diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index ddf6722..08a7a96 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,26 +1,30 @@
-<div class="plan-node">
+<div class="plan-node" [class.expanded]="showDetails">
    <header (click)="showDetails = !showDetails">
-      <h4>{{node['Node Type'] | uppercase}}
+      <h4>{{node[_planService.NODE_TYPE_PROP] | 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']">
+   <div class="relation-name" *ngIf="node[_planService.RELATION_NAME_PROP]">
       <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>
+      <span *ngIf="node[_planService.SCHEMA_PROP]">{{node[_planService.SCHEMA_PROP]}}.</span>{{node[_planService.RELATION_NAME_PROP]}}
+      <span *ngIf="node[_planService.ALIAS_PROP]"> ({{node[_planService.ALIAS_PROP]}})</span>
    </div>
 
-   <div class="relation-name" *ngIf="node['Group Key']"><span class="text-muted">by</span> {{node['Group Key']}}</div>
-   <div class="relation-name" *ngIf="node['Sort Key']"><span class="text-muted">by</span> {{node['Sort Key']}}</div>
-   <div class="relation-name" *ngIf="node['Join Type']">{{node['Join Type']}} <span class="text-muted">join</span></div>
-   <div class="relation-name" *ngIf="node['Index Name']"><span class="text-muted">using</span> {{node['Index Name']}}</div>
+   <div class="relation-name" *ngIf="node[_planService.GROUP_KEY_PROP]">
+      <span class="text-muted">by</span> {{node[_planService.GROUP_KEY_PROP]}}</div>
+   <div class="relation-name" *ngIf="node[_planService.SORT_KEY_PROP]">
+      <span class="text-muted">by</span> {{node[_planService.SORT_KEY_PROP]}}</div>
+   <div class="relation-name" *ngIf="node[_planService.JOIN_TYPE_PROP]">{{node[_planService.JOIN_TYPE_PROP]}}
+      <span class="text-muted">join</span></div>
+   <div class="relation-name" *ngIf="node[_planService.INDEX_NAME_PROP]"><span class="text-muted">
+      using</span> {{node[_planService.INDEX_NAME_PROP]}}</div>
 
    <div class="tags" *ngIf="viewOptions.showTags && tags.length > 0">
       <span *ngFor="#tag of tags">{{tag}}</span>
@@ -41,12 +45,18 @@
       <span> by <strong>{{plannerRowEstimateValue}}</strong>x</span>
    </div>
 
-   <table  *ngIf="showDetails" class="table prop-list">
-      <tr *ngFor="#prop of props">
-         <td width="40%">{{prop.key}}</td>
-         <td>{{prop.value}}</td>
-      <tr>
-   </table>
+   <div *ngIf="showDetails">
+      <div *ngIf="getNodeTypeDescription()" class="node-description">
+         <span class="node-type">{{node[_planService.NODE_TYPE_PROP]}} Node</span> <span [innerHtml]="getNodeTypeDescription()"></span>
+      </div>
+
+      <table class="table prop-list">
+         <tr *ngFor="#prop of props">
+            <td width="40%">{{prop.key}}</td>
+            <td>{{prop.value}}</td>
+         <tr>
+      </table>
+   </div>
 
    <div *ngIf="showQuery" class="plan-query-container">
       <button class="btn btn-close pull-right" (click)="showQuery = false">