Add ability to display view definition

static/css/app.css

@@ -558,6 +558,20 @@
   max-width: none;
 }
 
+#results_view {
+  display: none;
+  padding: 12px;
+  font-size: 14px;
+}
+
+#results_view .title {
+  margin-bottom: 8px;
+}
+
+#results_view pre {
+  border: 0px none;
+}
+
 .full #output {
   top: 0px !important;
 }
@@ -796,4 +810,4 @@
 
 .ace_autocomplete .ace_active-line {
   background: #eee !important;
-}
+}

static/index.html

@@ -102,6 +102,7 @@
             <thead id="results_header"></thead>
             <tbody id="results_body"></tbody>
           </table>
+          <div id="results_view"></div>
         </div>
       </div>
       <div id="pagination">
@@ -284,6 +285,7 @@
   </div>
   <div id="view_context_menu">
     <ul class="dropdown-menu" role="menu">
+      <li><a href="#" data-action="view_def">View Definition</a></li>
       <li><a href="#" data-action="copy">Copy View Name</a></li>
       <li><a href="#" data-action="copy_def">Copy View Definition</a></li>
       <li class="divider"></li>

static/js/app.js

@@ -204,13 +204,15 @@ function getCurrentObject() {
 }
 
 function resetTable() {
+  $("#results_header").html("");
+  $("#results_body").html("");
+  $("#results_view").html("").hide();
+
   $("#results").
     data("mode", "").
     removeClass("empty").
-    removeClass("no-crop");
+    removeClass("no-crop").
-
+    show();
-  $("#results_header").html("");
-  $("#results_body").html("");
 }
 
 function performTableAction(table, action, el) {
@@ -282,6 +284,15 @@ function performViewAction(view, action, el) {
         copyToClipboard(data.rows[0]);
       });
       break;
+    case "view_def":
+      executeQuery("SELECT pg_get_viewdef('" + view + "', true);", function(data) {
+        if (data.error) {
+          alert(data.error);
+          return;
+        }
+        showViewDefinition(view, data.rows[0]);
+      });
+      break;
   }
 }
 
@@ -561,6 +572,23 @@ function showTableStructure() {
   });
 }
 
+function showViewDefinition(viewName, viewDefintion) {
+  setCurrentTab("table_structure");
+
+  $("#results").addClass("no-crop");
+  $("#input").hide();
+  $("#body").prop("class", "full");
+  $("#results").hide();
+
+  var title = $("<div/>").prop("class", "title").html("View definition for: <strong>" + viewName + "</strong>");
+  var content = $("<pre/>").text(viewDefintion);
+
+  $("#results_view").html("");
+  title.appendTo("#results_view");
+  content.appendTo("#results_view");
+  $("#results_view").show();
+}
+
 function showQueryPanel() {
   if (!$("#table_query").hasClass("selected")) {
     resetTable();