aboutsummaryrefslogtreecommitdiff
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-rw-r--r--app/components/plan-node/plan-node.html22
-rw-r--r--app/components/plan-node/plan-node.ts55
-rw-r--r--app/components/plan-view/plan-view.html15
-rw-r--r--app/components/plan-view/plan-view.ts6
4 files changed, 78 insertions, 20 deletions
diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html
index 5ddf55c..60cdf50 100644
--- a/app/components/plan-node/plan-node.html
+++ b/app/components/plan-node/plan-node.html
@@ -1,8 +1,11 @@
-<div class="plan-node" [class.expanded]="showDetails" [class.compact]="viewOptions.showCompactView">
+<div class="plan-node"
+ [class.expanded]="showDetails"
+ [class.compact]="viewOptions.viewMode === viewModes.COMPACT"
+ [class.dot]="viewOptions.viewMode === viewModes.DOT">
+
<header (click)="showDetails = !showDetails" tooltip="view node details">
- <h4>{{node[_planService.NODE_TYPE_PROP] | uppercase}}
- </h4>
- <span *ngIf="!viewOptions.showCompactView">
+ <h4>{{getNodeName()}}</h4>
+ <span *ngIf="viewOptions.viewMode === viewModes.FULL || showDetails">
<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>
@@ -10,12 +13,12 @@
</span>
</header>
- <button *ngIf="plan.query && !viewOptions.showCompactView" tooltip="view corresponding query"
+ <button *ngIf="plan.query && viewOptions.viewMode === viewModes.FULL" tooltip="view corresponding query"
class="btn btn-sm btn-default btn-slim pull-right" (click)="showQuery = !showQuery">
<i class="fa fa-database"></i>
</button>
- <div *ngIf="!viewOptions.showCompactView">
+ <div *ngIf="viewOptions.viewMode === viewModes.FULL">
<div class="relation-name" *ngIf="node[_planService.RELATION_NAME_PROP]">
<span class="text-muted">on </span>
<span *ngIf="node[_planService.SCHEMA_PROP]">{{node[_planService.SCHEMA_PROP]}}.</span>{{node[_planService.RELATION_NAME_PROP]}}
@@ -33,20 +36,21 @@
<div class="relation-name" *ngIf="node[_planService.HASH_CONDITION_PROP]"><span class="text-muted">
on</span> {{node[_planService.HASH_CONDITION_PROP]}}</div>
</div>
+
<div class="tags" *ngIf="viewOptions.showTags && tags.length > 0">
- <span *ngFor="#tag of tags">{{tag}}</span>
+ <span *ngFor="#tag of tags">{{getTagName(tag)}}</span>
</div>
<div *ngIf="currentHighlightType !== highlightTypes.NONE">
<div class="node-bar-container">
<span class="node-bar" [style.width]="barWidth+'px'" [style.backgroundColor]="backgroundColor"></span>
</div>
- <span class="node-bar-label">
+ <span class="node-bar-label" *ngIf="shouldShowNodeBarLabel()">
<span class="text-muted">{{viewOptions.highlightType}}:</span> {{highlightValue | number:'.0-2'}}
</span>
</div>
- <div class="planner-estimate" *ngIf="viewOptions.showPlannerEstimate">
+ <div class="planner-estimate" *ngIf="shouldShowPlannerEstimate()">
<span *ngIf="plannerRowEstimateDirection === estimateDirections.over"><strong>over</strong> estimated rows</span>
<span *ngIf="plannerRowEstimateDirection === estimateDirections.under"><strong>under</strong> estimated rows</span>
<span> by <strong>{{plannerRowEstimateValue | number}}</strong>x</span>
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts
index 0d3c420..52590e8 100644
--- a/app/components/plan-node/plan-node.ts
+++ b/app/components/plan-node/plan-node.ts
@@ -1,6 +1,6 @@
import {IPlan} from '../../interfaces/iplan';
import {Component, OnInit} from 'angular2/core';
-import {HighlightType, EstimateDirection} from '../../enums';
+import {HighlightType, EstimateDirection, ViewMode} from '../../enums';
import {DurationPipe, DurationUnitPipe} from '../../pipes';
import {PlanService} from '../../services/plan-service';
@@ -23,6 +23,7 @@ export class PlanNode {
// consts
NORMAL_WIDTH: number = 220;
COMPACT_WIDTH: number = 140;
+ DOT_WIDTH: number = 30;
EXPANDED_WIDTH: number = 400;
MIN_ESTIMATE_MISS: number = 100;
@@ -58,6 +59,7 @@ export class PlanNode {
// expose enum to view
estimateDirections = EstimateDirection;
highlightTypes = HighlightType;
+ viewModes = ViewMode;
constructor(private _planService: PlanService,
private _syntaxHighlightService: SyntaxHighlightService,
@@ -122,7 +124,17 @@ export class PlanNode {
}
calculateBar() {
- this.barContainerWidth = this.viewOptions.showCompactView ? this.COMPACT_WIDTH : this.NORMAL_WIDTH;
+ switch (this.viewOptions.viewMode) {
+ case ViewMode.DOT:
+ this.barContainerWidth = this.DOT_WIDTH;
+ break;
+ case ViewMode.COMPACT:
+ this.barContainerWidth = this.COMPACT_WIDTH;
+ break;
+ default:
+ this.barContainerWidth = this.NORMAL_WIDTH;
+ break;
+ }
// expanded view width trumps others
if (this.currentExpandedView) {
@@ -184,4 +196,43 @@ export class PlanNode {
getNodeTypeDescription() {
return this._helpService.getNodeTypeDescription(this.node[this._planService.NODE_TYPE_PROP]);
}
+
+ getNodeName() {
+ if (this.viewOptions.viewMode === ViewMode.DOT && !this.showDetails) {
+ return this.node[this._planService.NODE_TYPE_PROP].replace(/[^A-Z]/g, '').toUpperCase();
+ }
+
+ return (this.node[this._planService.NODE_TYPE_PROP]).toUpperCase();
+ }
+
+ getTagName(tagName: String) {
+ if (this.viewOptions.viewMode === ViewMode.DOT && !this.showDetails) {
+ return tagName.charAt(0);
+ }
+ return tagName;
+ }
+
+ shouldShowPlannerEstimate() {
+ if (this.viewOptions.showPlannerEstimate && this.showDetails) {
+ return true;
+ }
+
+ if (this.viewOptions.viewMode === ViewMode.DOT) {
+ return false;
+ }
+
+ return this.viewOptions.showPlannerEstimate;
+ }
+
+ shouldShowNodeBarLabel() {
+ if (this.showDetails) {
+ return true;
+ }
+
+ if (this.viewOptions.viewMode === ViewMode.DOT) {
+ return false;
+ }
+
+ return true;
+ }
}
diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html
index 4ebb70c..70278f4 100644
--- a/app/components/plan-view/plan-view.html
+++ b/app/components/plan-view/plan-view.html
@@ -9,21 +9,22 @@
<input id="showPlanStats" type="checkbox" [(ngModel)]="viewOptions.showPlanStats">
<label class="clickable" for="showPlanStats"> show plan stats</label>
</li>
-
- <li>
- <input id="showCompactView" type="checkbox" [(ngModel)]="viewOptions.showCompactView">
- <label class="clickable" for="showCompactView"> show compact view</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>view mode: </label>
+ <div class="button-group">
+ <button [class.selected]="viewOptions.viewMode == viewModes.FULL" (click)="viewOptions.viewMode = viewModes.FULL">full</button>
+ <button [class.selected]="viewOptions.viewMode == viewModes.COMPACT" (click)="viewOptions.viewMode = viewModes.COMPACT">compact</button>
+ <button [class.selected]="viewOptions.viewMode == viewModes.DOT" (click)="viewOptions.viewMode = viewModes.DOT">dot</button>
+ </div>
+ </li>
<li>
<label>graph metric: </label>
diff --git a/app/components/plan-view/plan-view.ts b/app/components/plan-view/plan-view.ts
index 895cccf..9ba8782 100644
--- a/app/components/plan-view/plan-view.ts
+++ b/app/components/plan-view/plan-view.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteParams} from 'angular2/router';
import {IPlan} from '../../interfaces/iplan';
-import {HighlightType} from '../../enums';
+import {HighlightType, ViewMode} from '../../enums';
import {PlanNode} from '../plan-node/plan-node';
import {PlanService} from '../../services/plan-service';
import {SyntaxHighlightService} from '../../services/syntax-highlight-service';
@@ -26,13 +26,15 @@ export class PlanView {
showHighlightBar: true,
showPlannerEstimate: false,
showTags: true,
- highlightType: HighlightType.NONE
+ highlightType: HighlightType.NONE,
+ viewMode: ViewMode.FULL
};
showPlannerEstimate: boolean = true;
showMenu: boolean = false;
highlightTypes = HighlightType; // exposing the enum to the view
+ viewModes = ViewMode;
constructor(private _planService: PlanService, routeParams: RouteParams) {
this.id = routeParams.get('id');
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-19 07:03:15 +0000