Skip to content

N
nexpie-grafana-theme
Commit 2d73ab01 by Torkel Ödegaard
Options

added fullscreen only view

parent 41b57ef6
Showing with 82 additions and 62 deletions
src/app/controllers/dash.js
...@@ -60,12 +60,16 @@ function (angular, config, _) { ...@@ -60,12 +60,16 @@ function (angular, config, _) {
$scope.ejs = ejsResource(config.elasticsearch); $scope.ejs = ejsResource(config.elasticsearch);
$rootScope.$on('fullEditMode', function(evt, enabled) { $rootScope.$on('panel-fullscreen-enter', function() {
$scope.fullEditMode = enabled; $scope.fullscreenPanelExists = true;
});
$rootScope.$on('panel-fullscreen-exit', function() {
$scope.fullscreenPanelExists = false;
}); });
keyboardManager.bind('esc', function() { keyboardManager.bind('esc', function() {
$rootScope.$emit('fullEditMode', false); $rootScope.$emit('panel-fullscreen-exit');
}); });
}; };
......
src/app/controllers/pulldown.js
...@@ -8,7 +8,7 @@ function (angular, app, _) { ...@@ -8,7 +8,7 @@ function (angular, app, _) {
var module = angular.module('kibana.controllers'); var module = angular.module('kibana.controllers');
module.controller('PulldownCtrl', function($scope, $rootScope, $timeout,ejsResource) { module.controller('PulldownCtrl', function($scope, $rootScope, $timeout) {
var _d = { var _d = {
collapse: false, collapse: false,
notice: false, notice: false,
......
src/app/controllers/row.js
...@@ -8,7 +8,7 @@ function (angular, app, _) { ...@@ -8,7 +8,7 @@ function (angular, app, _) {
var module = angular.module('kibana.controllers'); var module = angular.module('kibana.controllers');
module.controller('RowCtrl', function($scope, $rootScope, $timeout,ejsResource) { module.controller('RowCtrl', function($scope, $rootScope, $timeout) {
var _d = { var _d = {
title: "Row", title: "Row",
height: "150px", height: "150px",
......
src/app/directives/kibanaPanel.js
...@@ -50,7 +50,7 @@ function (angular) { ...@@ -50,7 +50,7 @@ function (angular) {
'</span>'+ '</span>'+
'</span>' + '</span>' +
'<span class="row-button row-text panel-title pointer" ng-show="panel.title" ng-click="openConfigureModal()">' + '<span class="row-button row-text panel-title pointer" ng-show="panel.title" ng-click="toggleFullscreen()">' +
'{{panel.title}}' + '{{panel.title}}' +
'</span>'+ '</span>'+
......
src/app/panels/graphite/module.html
<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}" ng-class='{"panel-full-edit": inEditMode}'> <div ng-controller='graphite'
ng-init="init()"
style="min-height:{{panel.height || row.height}}"
ng-class='{"panel-fullscreen": showFullscreen}'
ng-dblclick="toggleFullscreen($event);"
>
<style> <style>
.histogram-legend { .histogram-legend {
display:inline-block; display:inline-block;
......
src/app/panels/graphite/module.js
...@@ -61,8 +61,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -61,8 +61,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
src:'app/panels/graphite/styleEditor.html' src:'app/panels/graphite/styleEditor.html'
} }
], ],
status : "Work in progress", status : "Unstable",
description : " Graphite graphing panel" description : "Graphite graphing panel <br /><br />"
}; };
// Set and populate defaults // Set and populate defaults
...@@ -240,8 +240,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -240,8 +240,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}; };
$scope.remove_panel_from_row = function(row, panel) { $scope.remove_panel_from_row = function(row, panel) {
if ($scope.inEditMode) { if ($scope.showFullscreen) {
$rootScope.$emit('fullEditMode', false); $rootScope.$emit('panel-fullscreen-exit');
} }
else { else {
$scope.$parent.remove_panel_from_row(row, panel); $scope.$parent.remove_panel_from_row(row, panel);
...@@ -253,10 +253,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -253,10 +253,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.get_data(); $scope.get_data();
}; };
$scope.closeEditMode = function() {
$rootScope.$emit('fullEditMode', false);
};
$scope.interval_label = function(interval) { $scope.interval_label = function(interval) {
return $scope.panel.auto_int && interval === $scope.panel.interval ? interval+" (auto)" : interval; return $scope.panel.auto_int && interval === $scope.panel.interval ? interval+" (auto)" : interval;
}; };
...@@ -322,7 +318,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -322,7 +318,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
return graphiteSrv.query(graphiteQuery) return graphiteSrv.query(graphiteQuery)
.then(function(results) { .then(function(results) {
$scope.panelMeta.loading = false; $scope.panelMeta.loading = false;
var data = $scope.receiveGraphiteData(results, range, interval) var data = $scope.receiveGraphiteData(results, range, interval);
$scope.$emit('render', data); $scope.$emit('render', data);
}) })
.then(null, function(err) { .then(null, function(err) {
...@@ -331,7 +327,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -331,7 +327,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
}; };
$scope.receiveGraphiteData = function(results, range, interval) { $scope.receiveGraphiteData = function(results, range, interval) {
var results = results.data; results = results.data;
$scope.legend = []; $scope.legend = [];
var data = []; var data = [];
...@@ -384,28 +380,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -384,28 +380,39 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.panel.targets.push({target: ''}); $scope.panel.targets.push({target: ''});
}; };
$scope.openConfigureModal = function() { $scope.enterFullscreenMode = function(options) {
if ($scope.inEditMode) {
$rootScope.$emit('fullEditMode', false);
return;
}
var oldHeight = $scope.row.height; var oldHeight = $scope.row.height;
$scope.row.height = 200; var docHeight = $(window).height();
$scope.row.height = options.edit ? 200 : Math.floor(docHeight * 0.7);
var closeEditMode = $rootScope.$on('fullEditMode', function(evt, enabled) { var closeEditMode = $rootScope.$on('panel-fullscreen-exit', function() {
$scope.inEditMode = enabled; $scope.inEditMode = false;
if (!enabled) { $scope.showFullscreen = false;
$scope.row.height = oldHeight; $scope.row.height = oldHeight;
closeEditMode();
} closeEditMode();
$timeout(function() { $timeout(function() {
$scope.$emit('render'); $scope.$emit('render');
}); });
}); });
$rootScope.$emit('fullEditMode', true); $scope.inEditMode = options.edit;
$scope.showFullscreen = true;
$rootScope.$emit('panel-fullscreen-enter');
$timeout(function() {
$scope.$emit('render');
});
};
$scope.openConfigureModal = function() {
if ($scope.showFullscreen) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
$scope.enterFullscreenMode({edit: true});
}; };
// I really don't like this function, too much dom manip. Break out into directive? // I really don't like this function, too much dom manip. Break out into directive?
...@@ -429,6 +436,23 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -429,6 +436,23 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.$emit('render'); $scope.$emit('render');
}; };
$scope.toggleFullscreen = function(evt) {
if ($scope.showFullscreen) {
$rootScope.$emit('panel-fullscreen-exit');
return;
}
if (evt) {
var elem = $(evt.target);
if (!elem.hasClass('panel-extra') ||
elem.attr('ng-click')) {
return;
}
}
$scope.enterFullscreenMode({edit: false});
};
$scope.toggleSeries = function(info) { $scope.toggleSeries = function(info) {
if ($scope.hiddenSeries[info.alias]) { if ($scope.hiddenSeries[info.alias]) {
delete $scope.hiddenSeries[info.alias]; delete $scope.hiddenSeries[info.alias];
......
src/app/partials/dashboard.html
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}"> <div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
<div class="row-fluid"> <div class="row-fluid">
<div class="row-fluid container" style="margin-top:10px; width:98%"> <div class="row-fluid container" style="margin-top:10px; width:98%">
<div ng-show="fullEditMode" class="modal-backdrop fade in"></div> <div ng-show="fullscreenPanelExists" class="modal-backdrop fade in"></div>
<!-- Rows --> <!-- Rows -->
<div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)"> <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.current.rows" ng-style="row_style(row)">
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
</div> </div>
<div class="row-fluid" ng-show='dashboard.current.editable'> <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
<div class="span12" style="text-align:right;"> <div class="span12" style="text-align:right;">
<span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'"> <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
<span ng-click="editor.index = 2"><i class="icon-plus-sign"></i> ADD A ROW</span> <span ng-click="editor.index = 2"><i class="icon-plus-sign"></i> ADD A ROW</span>
......
src/app/services/graphite/graphiteSrv.js
...@@ -46,17 +46,6 @@ function (angular, _, $, config) { ...@@ -46,17 +46,6 @@ function (angular, _, $, config) {
return found; return found;
}; };
/*function getGraphiteData(parameters) {
return $.ajax({
accepts: { text: 'application/json' },
cache: false,
dataType: 'json',
url: config.graphiteUrl + '/render/',
type: "POST",
data: parameters.join('&')
});
}
*/
function buildGraphitePostParams(options) { function buildGraphitePostParams(options) {
var clean_options = []; var clean_options = [];
var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints']; var graphite_options = ['target', 'targets', 'from', 'until', 'rawData', 'format', 'maxDataPoints'];
...@@ -64,19 +53,20 @@ function (angular, _, $, config) { ...@@ -64,19 +53,20 @@ function (angular, _, $, config) {
options['format'] = 'json'; options['format'] = 'json';
$.each(options, function (key, value) { $.each(options, function (key, value) {
if ($.inArray(key, graphite_options) === -1) { if ($.inArray(key, graphite_options) === -1) {
return; return;
} }
if (key === "targets") { if (key === "targets") {
$.each(value, function (index, value) { $.each(value, function (index, value) {
if (!value.hide) { if (!value.hide) {
clean_options.push("target=" + encodeURIComponent(value.target)); clean_options.push("target=" + encodeURIComponent(value.target));
} }
}); });
} else if (value !== null) { }
clean_options.push(key + "=" + encodeURIComponent(value)); else if (value !== null) {
} clean_options.push(key + "=" + encodeURIComponent(value));
}
}); });
return clean_options; return clean_options;
} }
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</head> </head>
<body ng-cloak ng-class="{'full-edit-mode': fullEditMode}"> <body ng-cloak>
<link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css"> <link rel="stylesheet" ng-href="css/bootstrap.{{dashboard.current.style||'dark'}}.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
......
src/vendor/bootstrap/less/grafana.less
...@@ -70,11 +70,7 @@ ...@@ -70,11 +70,7 @@
} }
} }
.full-edit-mode { .panel-fullscreen {
//display: none;
}
.panel-full-edit {
z-index: 1500; z-index: 1500;
display: block; display: block;
position: fixed; position: fixed;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment