Merge pull request #12796 from dehrax/12768-panel-heights

WIP: Fit panels to screen height

public/app/core/services/keybindingSrv.ts

@@ -15,7 +15,14 @@ export class KeybindingSrv {
   timepickerOpen = false;
 
   /** @ngInject */
-  constructor(private $rootScope, private $location, private datasourceSrv, private timeSrv, private contextSrv) {
+  constructor(
+    private $rootScope,
+    private $location,
+    private datasourceSrv,
+    private timeSrv,
+    private contextSrv,
+    private $route
+  ) {
     // clear out all shortcuts on route change
     $rootScope.$on('$routeChangeSuccess', () => {
       Mousetrap.reset();
@@ -259,6 +266,14 @@ export class KeybindingSrv {
     this.bind('d v', () => {
       appEvents.emit('toggle-view-mode');
     });
+
+    //Autofit panels
+    this.bind('d a', () => {
+      this.$location.search('autofitpanels', this.$location.search().autofitpanels ? null : true);
+      //Force reload
+
+      this.$route.reload();
+    });
   }
 }
 

public/app/features/dashboard/dashboard_ctrl.ts

@@ -62,6 +62,8 @@ export class DashboardCtrl implements PanelContainer {
       .finally(() => {
         this.dashboard = dashboard;
         this.dashboard.processRepeats();
+        this.dashboard.updateSubmenuVisibility();
+        this.dashboard.autoFitPanels(window.innerHeight);
 
         this.unsavedChangesSrv.init(dashboard, this.$scope);
 
@@ -70,8 +72,6 @@ export class DashboardCtrl implements PanelContainer {
         this.dashboardViewState = this.dashboardViewStateSrv.create(this.$scope);
 
         this.keybindingSrv.setupDashboardBindings(this.$scope, dashboard);
-
-        this.dashboard.updateSubmenuVisibility();
         this.setWindowTitleAndTheme();
 
         this.$scope.appEvent('dashboard-initialized', dashboard);

public/app/features/dashboard/dashboard_model.ts

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import _ from 'lodash';
 
-import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL } from 'app/core/constants';
+import { GRID_COLUMN_COUNT, REPEAT_DIR_VERTICAL, GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 import { DEFAULT_ANNOTATION_COLOR } from 'app/core/utils/colors';
 import { Emitter } from 'app/core/utils/emitter';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -830,4 +830,32 @@ export class DashboardModel {
 
     return !_.isEqual(updated, this.originalTemplating);
   }
+
+  autoFitPanels(viewHeight: number) {
+    if (!this.meta.autofitpanels) {
+      return;
+    }
+
+    const currentGridHeight = Math.max(
+      ...this.panels.map(panel => {
+        return panel.gridPos.h + panel.gridPos.y;
+      })
+    );
+
+    // Consider navbar and submenu controls, padding and margin
+    let visibleHeight = window.innerHeight - 55 - 20;
+
+    // Remove submenu if visible
+    if (this.meta.submenuEnabled) {
+      visibleHeight -= 50;
+    }
+
+    const visibleGridHeight = Math.floor(visibleHeight / (GRID_CELL_HEIGHT + GRID_CELL_VMARGIN));
+    const scaleFactor = currentGridHeight / visibleGridHeight;
+
+    this.panels.forEach((panel, i) => {
+      panel.gridPos.y = Math.round(panel.gridPos.y / scaleFactor) || 1;
+      panel.gridPos.h = Math.round(panel.gridPos.h / scaleFactor) || 1;
+    });
+  }
 }

public/app/routes/dashboard_loaders.ts

@@ -38,9 +38,10 @@ export class LoadDashboardCtrl {
         }
       }
 
-      if ($routeParams.keepRows) {
+      if ($routeParams.autofitpanels) {
-        result.meta.keepRows = true;
+        result.meta.autofitpanels = true;
       }
+
       $scope.initDashboard(result, $scope);
     });
   }

public/sass/pages/_dashboard.scss

@@ -1,5 +1,5 @@
 .dashboard-container {
-  padding: $dashboard-padding;
+  padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding;
   width: 100%;
   min-height: 100%;
 }