Allow the user to close the dashboard panel. Fixes #2506

web/pgadmin/browser/static/js/panel.js

@@ -7,7 +7,8 @@ function(_, pgAdmin) {
   pgAdmin.Browser.Panel = function(options) {
     var defaults = [
       'name', 'title', 'width', 'height', 'showTitle', 'isCloseable',
-      'isPrivate', 'content', 'icon', 'events', 'onCreate', 'elContainer'
+      'isPrivate', 'content', 'icon', 'events', 'onCreate', 'elContainer',
+      'canHide', 'limit'
     ];
     _.extend(this, _.pick(options, defaults));
   }
@@ -25,12 +26,14 @@ function(_, pgAdmin) {
     panel: null,
     onCreate: null,
     elContainer: false,
+    limit: null,
     load: function(docker, title) {
       var that = this;
       if (!that.panel) {
         docker.registerPanelType(that.name, {
           title: that.title,
           isPrivate: that.isPrivate,
+          limit: that.limit,
           onCreate: function(myPanel) {
             $(myPanel).data('pgAdminName', that.name);
             myPanel.initSize(that.width, that.height);
@@ -85,6 +88,14 @@ function(_, pgAdmin) {
               });
               that.resizedContainer.apply(myPanel);
             }
+
+            // Bind events only if they are configurable
+            if (that.canHide) {
+              _.each([wcDocker.EVENT.CLOSED, wcDocker.EVENT.VISIBILITY_CHANGED],
+                function(ev) {
+                  myPanel.on(ev, that.handleVisibility.bind(myPanel, ev));
+                });
+            }
           }
         });
       }
@@ -134,7 +145,32 @@ function(_, pgAdmin) {
           100
         );
       }
+    },
+    handleVisibility: function(eventName) {
+      // Currently this function only works with dashboard panel but
+      // as per need it can be extended
+      if (this._type != 'dashboard')
+        return;
+
+      if (eventName == 'panelClosed') {
+        pgBrowser.save_current_layout(pgBrowser);
+        pgAdmin.Dashboard.toggleVisibility(false);
+      }
+      else if (eventName == 'panelVisibilityChanged') {
+        if (pgBrowser.tree) {
+          pgBrowser.save_current_layout(pgBrowser);
+          var selectedNode = pgBrowser.tree.selected();
+          // Discontinue this event after first time visible
+          this.off(wcDocker.EVENT.VISIBILITY_CHANGED);
+          if (!_.isUndefined(pgAdmin.Dashboard))
+            pgAdmin.Dashboard.toggleVisibility(true);
+          // Explicitly trigger tree selected event when we add the tab.
+          pgBrowser.Events.trigger('pgadmin-browser:tree:selected', selectedNode,
+          pgBrowser.tree.itemData(selectedNode), pgBrowser.Node);
+        }
+      }
     }
+
   });
 
   return pgAdmin.Browser.Panel;

web/pgadmin/browser/templates/browser/js/browser.js

@@ -177,7 +177,9 @@ define(
         showTitle: {% if panel_item.showTitle %}true{% else %}false{% endif %},
         isCloseable: {% if panel_item.isCloseable %}true{% else %}false{% endif %},
         isPrivate: {% if panel_item.isPrivate %}true{% else %}false{% endif %},
-        content: '{{ panel_item.content }}'{% if panel_item.events is not none %},
+        content: '{{ panel_item.content }}',
+        canHide: {% if panel_item.canHide %}true{% else %}false{% endif %}{% if panel_item.limit is not none %},
+        limit: {{ panel_item.limit }}{% endif %}{% if panel_item.events is not none %},
         events: {{ panel_item.events }} {% endif %}
       }){% endif %}{% endfor %}
     },
@@ -364,15 +366,17 @@ define(
 
         // Listen to panel attach/detach event so that last layout will be remembered
         _.each(obj.panels, function(panel, name) {
-          panel.panel.on(wcDocker.EVENT.ATTACHED, function() {
+          if (panel.panel) {
-            obj.save_current_layout(obj);
+            panel.panel.on(wcDocker.EVENT.ATTACHED, function() {
-          });
+              obj.save_current_layout(obj);
-          panel.panel.on(wcDocker.EVENT.DETACHED, function() {
+            });
-            obj.save_current_layout(obj);
+            panel.panel.on(wcDocker.EVENT.DETACHED, function() {
-          });
+              obj.save_current_layout(obj);
-          panel.panel.on(wcDocker.EVENT.MOVE_ENDED, function() {
+            });
-            obj.save_current_layout(obj);
+            panel.panel.on(wcDocker.EVENT.MOVE_ENDED, function() {
-          });
+              obj.save_current_layout(obj);
+            });
+          }
         });
       }
 

web/pgadmin/dashboard/__init__.py

@@ -58,9 +58,11 @@ class DashboardModule(PgAdminModule):
                 title=gettext('Dashboard'),
                 icon='fa fa-tachometer',
                 content='',
-                isCloseable=False,
+                isCloseable=True,
-                isPrivate=True,
+                isPrivate=False,
-                isIframe=False)
+                limit=1,
+                isIframe=False,
+                canHide=True)
         ]
 
     def register_preferences(self):

web/pgadmin/dashboard/templates/dashboard/js/dashboard.js

@@ -11,6 +11,8 @@ function(r, $, pgAdmin, _, Backbone, gettext) {
   if (pgAdmin.Dashboard)
     return;
 
+  var dashboardVisible = true;
+
   pgAdmin.Dashboard = {
         init: function() {
             if (this.initialized)
@@ -55,7 +57,7 @@ function(r, $, pgAdmin, _, Backbone, gettext) {
 
         // Handle treeview clicks
         object_selected: function(item, itemData, node) {
-            if (itemData && itemData._type) {
+            if (itemData && itemData._type && dashboardVisible) {
                 var treeHierarchy = node.getTreeNodeHierarchy(item),
                     url = '{{ url_for('dashboard.index') }}',
                     sid = -1, did = -1, b = pgAdmin.Browser,
@@ -124,6 +126,9 @@ function(r, $, pgAdmin, _, Backbone, gettext) {
             //     { data: [[0, y0], [1, y1]...], label: 'Label 3', [options] }
             // ]
 
+            if (!dashboardVisible)
+              return;
+
             y = 0;
             if (dataset.length == 0) {
                 if (counter == true)
@@ -862,6 +867,9 @@ function(r, $, pgAdmin, _, Backbone, gettext) {
                 }
             });
 
+        },
+        toggleVisibility: function(flag) {
+          dashboardVisible = flag;
         }
   };
 

web/pgadmin/tools/datagrid/templates/datagrid/js/datagrid.js

@@ -377,7 +377,7 @@ define([
                 newWin.document.title = grid_title;
               });
             } else {
-              var dashboardPanel = pgBrowser.docker.findPanels('dashboard');
+              var dashboardPanel = pgBrowser.docker.findPanels('properties');
               var dataGridPanel = pgBrowser.docker.addPanel('frm_datagrid', wcDocker.DOCK.STACKED, dashboardPanel[0]);
 
               // Set panel title and icon
@@ -493,7 +493,7 @@ define([
               /* On successfully initialization find the dashboard panel,
                * create new panel and add it to the dashboard panel.
                */
-              var dashboardPanel = pgBrowser.docker.findPanels('dashboard');
+              var dashboardPanel = pgBrowser.docker.findPanels('properties');
               var queryToolPanel = pgBrowser.docker.addPanel('frm_datagrid', wcDocker.DOCK.STACKED, dashboardPanel[0]);
 
               // Set panel title and icon

web/pgadmin/tools/debugger/templates/debugger/js/debugger_ui.js

@@ -562,7 +562,7 @@ define([
                       });
 
                       // Create the debugger panel as per the data received from user input dialog.
-                      var dashboardPanel = pgBrowser.docker.findPanels('dashboard'),
+                      var dashboardPanel = pgBrowser.docker.findPanels('properties'),
                           panel = pgBrowser.docker.addPanel(
                             'frm_debugger', wcDocker.DOCK.STACKED, dashboardPanel[0]
                           );

web/pgadmin/utils/menu.py

@@ -18,7 +18,7 @@ class MenuItem(object):
 class Panel(object):
     def __init__(self, name, title, content='', width=500, height=600, isIframe=True,
                  showTitle=True, isCloseable=True, isPrivate=False, priority=None,
-                 icon=None, data=None, events=None):
+                 icon=None, data=None, events=None, limit=None, canHide=False):
         self.name = name
         self.title = title
         self.content = content
@@ -31,6 +31,8 @@ class Panel(object):
         self.icon = icon
         self.data = data
         self.events = events
+        self.limit = limit
+        self.canHide = canHide
         if priority is None:
             global PRIORITY
             PRIORITY += 100