diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 672ae29740b..f740718063c 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/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(); + }); } } diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 94d0b18f157..c6bb6492172 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/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); diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 976e4213920..92392fc80e8 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/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; + }); + } } diff --git a/public/app/routes/dashboard_loaders.ts b/public/app/routes/dashboard_loaders.ts index 9224ec33bcc..3642b54c790 100644 --- a/public/app/routes/dashboard_loaders.ts +++ b/public/app/routes/dashboard_loaders.ts @@ -38,9 +38,10 @@ export class LoadDashboardCtrl { } } - if ($routeParams.keepRows) { - result.meta.keepRows = true; + if ($routeParams.autofitpanels) { + result.meta.autofitpanels = true; } + $scope.initDashboard(result, $scope); }); } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 970b625c4f8..6225f840973 100644 --- a/public/sass/pages/_dashboard.scss +++ b/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%; }