2 files changed, 23 insertions, 10 deletions
diff --git a/app/components/plan-new/plan-new.html b/app/components/plan-new/plan-new.html
index f74529d..42bb8f6 100644
--- a/app/components/plan-new/plan-new.html
+++ b/app/components/plan-new/plan-new.html
@@ -1,11 +1,15 @@
 <div class="page">
-   <span class="text-muted">For best results, use EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)</span>
-   <button class="btn btn-link" (click)="prefill()">create a sample plan</button>
+   <button class="pull-right btn btn-link" (click)="prefill()">create a sample plan</button>
+
+   <span class="text-muted">For best results, use <code>EXPLAIN (ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON)</code><br>
+      Psql users can export the plan to a file using <code>psql -qAt -f explain.sql > analyze.json</code></span>
+   <p class="pad-top">DISCLAIMER: Pev stores your plans locally (localStorage) and will not send them anywhere.</p>
   <div>
     <input placeholder="name (optional)" class="input-box input-box-main" type="text" [(ngModel)]="newPlanName">
     <button class="btn btn-default btn-lg pad-top pull-right" (click)="submitPlan()">submit</button>
   </div>
 
-  <textarea placeholder="paste execution plan" class="input-box input-box-lg" [(ngModel)]="newPlanContent"></textarea>
-  <textarea placeholder="paste corresponding SQL query" class="input-box input-box-lg" [(ngModel)]="newPlanQuery"></textarea>
+  <p *ngIf="validationMessage" class="error-message">{{validationMessage}}</p>
+  <textarea placeholder="paste execution plan" class="input-box input-box-lg code" [(ngModel)]="newPlanContent"></textarea>
+  <textarea placeholder="paste corresponding SQL query" class="input-box input-box-lg code" [(ngModel)]="newPlanQuery"></textarea>
 </div>
diff --git a/app/components/plan-new/plan-new.ts b/app/components/plan-new/plan-new.ts
index 93149e2..115fa82 100644
--- a/app/components/plan-new/plan-new.ts
+++ b/app/components/plan-new/plan-new.ts
@@ -16,19 +16,28 @@ export class PlanNew {
     newPlanContent: string;
     newPlanQuery: string;
     newPlan: IPlan;
+    validationMessage: string;
 
-    constructor( private _router: Router, private _planService: PlanService) { }
+    constructor(private _router: Router, private _planService: PlanService) { }
 
     submitPlan() {
+        // remove psql generated header
+        this.newPlanContent = this.newPlanContent.replace('QUERY PLAN', '');
+
+        if (!this._planService.isJsonString(this.newPlanContent)) {
+            this.validationMessage = 'The string you submitted is not valid JSON'
+            return;
+        }
+
         this.newPlan = this._planService.createPlan(this.newPlanName, this.newPlanContent, this.newPlanQuery);
-        this._router.navigate( ['PlanView', { id: this.newPlan.id }] );
+        this._router.navigate(['PlanView', { id: this.newPlan.id }]);
     }
 
     prefill() {
-      this.newPlanName = 'Sample plan';
-      this.newPlanContent = SAMPLE_JSON;
-      this.newPlanQuery = SAMPLE_QUERY;
-   }
+        this.newPlanName = 'Sample plan';
+        this.newPlanContent = SAMPLE_JSON;
+        this.newPlanQuery = SAMPLE_QUERY;
+    }
 }
 export var SAMPLE_JSON = `[
   {