IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

progress on scrollable panels work

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-21 14:30:33 +01:00
parent 741e5a38bd
commit 830c307bba
12 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/scroll/scroll.ts
View File

@ -1,5 +1,3 @@
///<reference path="../../../headers/common.d.ts" />
import GeminiScrollbar from 'gemini-scrollbar';
import coreModule from 'app/core/core_module';

2
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@ -47,7 +47,7 @@ export class DashboardPanel extends React.Component<DashboardPanelProps, any> {
}
return (
<div ref={element => this.element = element} />
<div ref={element => this.element = element} className="panel-height-helper" />
);
}
}

2
public/app/features/dashboard/dashgrid/PanelLoader.ts
View File

@ -12,7 +12,7 @@ export class PanelLoader {
}
load(elem, panel, dashboard): AttachedPanel {
var template = '<plugin-component type="panel"></plugin-component>';
var template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
var panelScope = this.$rootScope.$new();
panelScope.panel = panel;
panelScope.dashboard = dashboard;

19
public/app/features/panel/panel_ctrl.ts
View File

@ -5,9 +5,7 @@ import {appEvents, profiler} from 'app/core/core';
import Remarkable from 'remarkable';
import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
const TITLE_HEIGHT = 25;
const EMPTY_TITLE_HEIGHT = 9;
const PANEL_PADDING = 5;
const TITLE_HEIGHT = 27;
const PANEL_BORDER = 2;
import {Emitter} from 'app/core/core';
@ -31,7 +29,6 @@ export class PanelCtrl {
containerHeight: any;
events: Emitter;
timing: any;
scrollable: boolean;
constructor($scope, $injector) {
this.$injector = $injector;
@ -40,7 +37,6 @@ export class PanelCtrl {
this.editorTabIndex = 0;
this.events = this.panel.events;
this.timing = {};
this.scrollable = false;
var plugin = config.panels[this.panel.type];
if (plugin) {
@ -66,7 +62,6 @@ export class PanelCtrl {
}
refresh() {
this.setPanelHeight();
this.events.emit('refresh', null);
}
@ -75,7 +70,6 @@ export class PanelCtrl {
}
changeView(fullscreen, edit) {
this.setPanelHeight();
this.publishAppEvent('panel-change-view', {
fullscreen: fullscreen, edit: edit, panelId: this.panel.id
});
@ -169,18 +163,13 @@ export class PanelCtrl {
this.containerHeight = this.panel.gridPos.h * GRID_CELL_HEIGHT + ((this.panel.gridPos.h-1) * GRID_CELL_VMARGIN);
}
this.height = this.containerHeight - (PANEL_BORDER + PANEL_PADDING + (this.panel.title ? TITLE_HEIGHT : EMPTY_TITLE_HEIGHT));
}
setPanelHeight() {
if (this.scrollable) {
this.$scope.setPanelHeight();
}
console.log(this.containerHeight);
this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
console.log(PANEL_BORDER + TITLE_HEIGHT);
}
render(payload?) {
this.timing.renderStart = new Date().getTime();
this.setPanelHeight();
this.events.emit('render', payload);
}

47
public/app/features/panel/panel_directive.ts
View File

@ -1,7 +1,6 @@
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import Drop from 'tether-drop';
import GeminiScrollbar from 'gemini-scrollbar';
var module = angular.module('grafana.directives');
@ -21,12 +20,7 @@ var panelTemplate = `
</div>
<div class="panel-content">
<div gemini-scrollbar ng-if="ctrl.scrollable">
<div class="panel-content--scrollable">
<ng-transclude></ng-transclude>
</div>
</div>
<ng-transclude ng-if="!ctrl.scrollable"></ng-transclude>
<ng-transclude></ng-transclude>
</div>
</div>
@ -78,7 +72,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
var lastHasAlertRule = false;
var lastAlertState;
var hasAlertRule;
var lastHeight = 0;
// var lastHeight = 0;
function mouseEnter() {
panelContainer.toggleClass('panel-hover-highlight', true);
@ -90,16 +84,17 @@ module.directive('grafanaPanel', function($rootScope, $document) {
ctrl.dashboard.setPanelFocus(0);
}
function setPanelHeight() {
panelContent.height(ctrl.height);
}
ctrl.$scope.setPanelHeight = setPanelHeight;
// set initial height
if (!ctrl.containerHeight) {
if (!ctrl.height) {
ctrl.calculatePanelHeight();
panelContainer.css({minHeight: ctrl.containerHeight});
lastHeight = ctrl.containerHeight;
if (ctrl.__proto__.constructor.scrollable) {
panelContent.addClass('panel-content--scrollable');
var myScrollbar = new GeminiScrollbar({
autoshow: false,
element: panelContent[0]
}).create();
}
}
// set initial transparency
@ -109,10 +104,10 @@ module.directive('grafanaPanel', function($rootScope, $document) {
}
ctrl.events.on('render', () => {
if (lastHeight !== ctrl.containerHeight) {
panelContainer.css({minHeight: ctrl.containerHeight});
lastHeight = ctrl.containerHeight;
}
// if (lastHeight !== ctrl.height) {
// panelContent.css({'height': ctrl.height + 'px'});
// lastHeight = ctrl.height;
// }
if (transparentLastState !== ctrl.panel.transparent) {
panelContainer.toggleClass('panel-transparent', ctrl.panel.transparent === true);
@ -201,11 +196,11 @@ module.directive('panelHelpCorner', function($rootScope) {
return {
restrict: 'E',
template: `
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
<span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span>
</span>
<span class="alert-error panel-error small pointer" ng-if="ctrl.error" ng-click="ctrl.openInspector()">
<span data-placement="top" bs-tooltip="ctrl.error">
<i class="fa fa-exclamation"></i><span class="panel-error-arrow"></span>
</span>
</span>
`,
link: function(scope, elem) {
}

4
public/app/features/plugins/plugin_component.ts
View File

@ -68,7 +68,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
var componentInfo: any = {
name: 'panel-plugin-' + scope.panel.type,
bindings: {dashboard: "=", panel: "=", row: "="},
attrs: {dashboard: "dashboard", panel: "panel"},
attrs: {dashboard: "dashboard", panel: "panel", class: "panel-height-helper"},
};
let panelInfo = config.panels[scope.panel.type];
@ -98,7 +98,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
PanelCtrl.templatePromise = getTemplate(PanelCtrl).then(template => {
PanelCtrl.templateUrl = null;
PanelCtrl.template = `<grafana-panel ctrl="ctrl">${template}</grafana-panel>`;
PanelCtrl.template = `<grafana-panel ctrl="ctrl" class="panel-height-helper">${template}</grafana-panel>`;
return componentInfo;
});

2
public/app/plugins/panel/alertlist/module.ts
View File

@ -9,6 +9,7 @@ import * as dateMath from 'app/core/utils/datemath';
class AlertListPanel extends PanelCtrl {
static templateUrl = 'module.html';
static scrollable = true;
showOptions = [
{ text: 'Current state', value: 'current' },
@ -38,7 +39,6 @@ class AlertListPanel extends PanelCtrl {
constructor($scope, $injector, private backendSrv) {
super($scope, $injector);
_.defaults(this.panel, this.panelDefaults);
this.scrollable = true;
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.events.on('refresh', this.onRefresh.bind(this));

2
public/app/plugins/panel/dashlist/module.ts
View File

@ -6,6 +6,7 @@ import {impressions} from 'app/features/dashboard/impression_store';
class DashListCtrl extends PanelCtrl {
static templateUrl = 'module.html';
static scrollable = true;
groups: any[];
modes: any[];
@ -25,7 +26,6 @@ class DashListCtrl extends PanelCtrl {
constructor($scope, $injector, private backendSrv, private dashboardSrv) {
super($scope, $injector);
_.defaults(this.panel, this.panelDefaults);
this.scrollable = true;
if (this.panel.tag) {
this.panel.tags = [this.panel.tag];

7
public/app/plugins/panel/singlestat/module.ts
View File

@ -395,9 +395,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
var data, linkInfo;
var $panelContainer = elem.find('.panel-container');
elem = elem.find('.singlestat-panel');
console.log('singlestat element', elem.length);
function setElementHeight() {
elem.css('height', ctrl.height + 'px');
/// elem.css('height', ctrl.height + 'px');
}
function applyColoringThresholds(value, valueString) {
@ -560,6 +561,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
plotCss.height = Math.floor(height * 0.25) + "px";
}
console.log('singlestat height', ctrl.height);
console.log('singlestat plotCss', plotCss.height);
plotCanvas.css(plotCss);
var options = {
@ -596,6 +599,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
if (!ctrl.data) { return; }
data = ctrl.data;
console.log('singlestat', elem.html());
// get thresholds
data.thresholds = panel.thresholds.split(',').map(function(strVale) {
return Number(strVale.trim());

3
public/app/plugins/panel/text/module.ts
View File

@ -5,6 +5,7 @@ import {PanelCtrl} from 'app/plugins/sdk';
export class TextPanelCtrl extends PanelCtrl {
static templateUrl = `public/app/plugins/panel/text/module.html`;
static scrollable = true;
remarkable: any;
content: string;
@ -19,11 +20,11 @@ export class TextPanelCtrl extends PanelCtrl {
super($scope, $injector);
_.defaults(this.panel, this.panelDefaults);
this.scrollable = true;
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.events.on('refresh', this.onRefresh.bind(this));
this.events.on('render', this.onRender.bind(this));
$scope.$watch('ctrl.panel.content',
_.throttle(() => {
this.render();

1
public/sass/components/_panel_singlestat.scss
View File

@ -2,6 +2,7 @@
position: relative;
display: table;
width: 100%;
height: 100%;
}
.singlestat-panel-value-container {

8
public/sass/pages/_dashboard.scss
View File

@ -23,6 +23,11 @@ div.flot-text {
}
}
.panel-height-helper {
display: block;
height: 100%;
}
.panel-container {
background-color: $panel-bg;
border: $panel-border;
@ -38,12 +43,11 @@ div.flot-text {
.panel-content {
padding: 0px 10px 5px 10px;
height: 100%;
height: calc(100% - 27px);
&--scrollable {
// Add space for scrollbar
padding-right: 10px;
padding-left: 6px;
}
}