From 6808fd285d54182da5dca9e4190ad9d766c4c783 Mon Sep 17 00:00:00 2001 From: Alex Tatiyants Date: Tue, 5 Jan 2016 21:50:10 -0800 Subject: add about page, multiple UI tweaks --- app/components/about/about.html | 41 +++++++++++++++++++++++++++++++++ app/components/about/about.ts | 7 ++++++ app/components/app/app.html | 3 ++- app/components/app/app.ts | 4 +++- app/components/plan-new/plan-new.html | 2 +- app/components/plan-node/plan-node.html | 13 ++++++----- app/components/plan-node/plan-node.ts | 2 +- app/components/plan-view/plan-view.html | 1 + 8 files changed, 63 insertions(+), 10 deletions(-) create mode 100644 app/components/about/about.html create mode 100644 app/components/about/about.ts (limited to 'app/components') diff --git a/app/components/about/about.html b/app/components/about/about.html new file mode 100644 index 0000000..08c913b --- /dev/null +++ b/app/components/about/about.html @@ -0,0 +1,41 @@ +
+

Postgres EXPLAIN Visualizer (Pev)

+

+ Pev is designed to make + Postgres query plans easier to grok. It displays a plan as a tree, with each node representing a step that takes in a row set + and produces another. Pev can show you a number of useful things:

+ + +

You can tweak display options using the menu on the right.

+ +

Usage tips

+

Pev currently accepts only JSON formatted plans. In fact, the get the most out of it, + I recommend generating a query plan using the following line: + EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON). I also recommend submitting a (decently formatted) + SQL query that generated the plan. Doing so will make Pev more useful. +

+ +

Pev will remember the plans you analyzed. They are stored locally and are not submitted to me. This is good + because no one but you will see your queries. It's also bad because you can't share them with others.

+ +

Acknowledgements

+

Pev was inspired and heavily influenced by the excellent explain.depesz.com. Both the + tool and the corresponding help files are a great resource to learn about Postgres and its planner. +

+ +

Help me improve Pev

+

If you want to help, there are multiple ways to contribute:

+ + +
diff --git a/app/components/about/about.ts b/app/components/about/about.ts new file mode 100644 index 0000000..64777fc --- /dev/null +++ b/app/components/about/about.ts @@ -0,0 +1,7 @@ +import {Component} from 'angular2/core'; + +@Component({ + selector: 'about', + templateUrl: './components/about/about.html' +}) +export class About {} diff --git a/app/components/app/app.html b/app/components/app/app.html index b87937f..8d5072b 100644 --- a/app/components/app/app.html +++ b/app/components/app/app.html @@ -1,6 +1,7 @@ diff --git a/app/components/app/app.ts b/app/components/app/app.ts index f9c83e0..1b78861 100644 --- a/app/components/app/app.ts +++ b/app/components/app/app.ts @@ -4,6 +4,7 @@ import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {PlanView} from '../plan-view/plan-view'; import {PlanList} from '../plan-list/plan-list'; import {PlanNew} from '../plan-new/plan-new'; +import {About} from '../about/about'; @Component({ selector: 'app', @@ -16,7 +17,8 @@ import {PlanNew} from '../plan-new/plan-new'; { path: '/', redirectTo: ['/PlanList'] }, { path: '/plans', component: PlanList, name: 'PlanList' }, { path: '/plans/new', component: PlanNew, name: 'PlanNew' }, - { path: '/plans/:id', component: PlanView, name: 'PlanView' } + { path: '/plans/:id', component: PlanView, name: 'PlanView' }, + { path: '/about', component: About, name: 'About'} ]) export class App { } diff --git a/app/components/plan-new/plan-new.html b/app/components/plan-new/plan-new.html index ba65d99..ee2565e 100644 --- a/app/components/plan-new/plan-new.html +++ b/app/components/plan-new/plan-new.html @@ -2,7 +2,7 @@ For best results, use EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)
- +
diff --git a/app/components/plan-node/plan-node.html b/app/components/plan-node/plan-node.html index 08a7a96..fdc2c89 100644 --- a/app/components/plan-node/plan-node.html +++ b/app/components/plan-node/plan-node.html @@ -1,5 +1,5 @@
-
+

{{node[_planService.NODE_TYPE_PROP] | uppercase}}

{{duration}}{{durationUnit}} | @@ -7,11 +7,12 @@
-
- + +
on {{node[_planService.SCHEMA_PROP]}}.{{node[_planService.RELATION_NAME_PROP]}} ({{node[_planService.ALIAS_PROP]}}) @@ -31,7 +32,7 @@
-
+
diff --git a/app/components/plan-node/plan-node.ts b/app/components/plan-node/plan-node.ts index fc865b8..2f3164e 100644 --- a/app/components/plan-node/plan-node.ts +++ b/app/components/plan-node/plan-node.ts @@ -66,7 +66,6 @@ export class PlanNode { } ngDoCheck() { - // console.log("check", this.currentHighlightType, this.viewOptions.highlightType); if (this.currentHighlightType !== this.viewOptions.highlightType) { this.currentHighlightType = this.viewOptions.highlightType; this.calculateBar(); @@ -78,6 +77,7 @@ export class PlanNode { keyItems.push(this.node[this._planService.SCHEMA_PROP] + '.' + this.node[this._planService.RELATION_NAME_PROP]); keyItems.push(' ' + this.node[this._planService.RELATION_NAME_PROP] + ' '); keyItems.push(' ' + this.node[this._planService.ALIAS_PROP] + ' '); + keyItems.push(this.node[this._planService.GROUP_KEY_PROP]); return this._syntaxHighlightService.highlightKeyItems(this.plan.formattedQuery, keyItems); } diff --git a/app/components/plan-view/plan-view.html b/app/components/plan-view/plan-view.html index c63c4d1..268bdac 100644 --- a/app/components/plan-view/plan-view.html +++ b/app/components/plan-view/plan-view.html @@ -55,6 +55,7 @@ {{plan.planStats.maxCost | number:'.0-2'}} costliest node
+
-- cgit v1.2.3