Skip to content

N
nexpie-grafana-theme
Commit 79aa7e87 by Rashid Khan
Options

'Add panel' hinting in empty spaces

parent d071f3cb
Showing with 58 additions and 25 deletions
src/app/controllers/row.js
...@@ -20,7 +20,6 @@ function (angular, app, _) { ...@@ -20,7 +20,6 @@ function (angular, app, _) {
_.defaults($scope.row,_d); _.defaults($scope.row,_d);
$scope.init = function() { $scope.init = function() {
$scope.querySrv = querySrv; $scope.querySrv = querySrv;
$scope.reset_panel(); $scope.reset_panel();
...@@ -38,6 +37,12 @@ function (angular, app, _) { ...@@ -38,6 +37,12 @@ function (angular, app, _) {
} }
}; };
$scope.rowSpan = function(row) {
return _.reduce(_.pluck(row.panels,'span'), function(p,v) {
return p+v;
},0);
};
// This can be overridden by individual panels // This can be overridden by individual panels
$scope.close_edit = function() { $scope.close_edit = function() {
$scope.$broadcast('render'); $scope.$broadcast('render');
...@@ -48,9 +53,13 @@ function (angular, app, _) { ...@@ -48,9 +53,13 @@ function (angular, app, _) {
}; };
$scope.reset_panel = function(type) { $scope.reset_panel = function(type) {
var
defaultSpan = 4,
_as = 12-$scope.rowSpan($scope.row);
$scope.panel = { $scope.panel = {
error : false, error : false,
span : 3, span : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
editable: true, editable: true,
type : type type : type
}; };
......
src/app/directives/kibanaPanel.js
...@@ -28,8 +28,8 @@ function (angular) { ...@@ -28,8 +28,8 @@ function (angular) {
'<span class="small strong">{{panel.type}}</span> ' + '<span class="small strong">{{panel.type}}</span> ' +
'</span>' + '</span>' +
'<h4 ng-show="panel.title">' + '<h4 ng-show="panel.title" style="margin:0px;">' +
'{{panel.title}}' + '{{panel.title}}&nbsp' +
'<i class="icon-spinner smaller icon-spin icon-large"' + '<i class="icon-spinner smaller icon-spin icon-large"' +
'ng-show="panelMeta.loading == true && panel.title"></i>' + 'ng-show="panelMeta.loading == true && panel.title"></i>' +
'</h4>'; '</h4>';
......
src/app/partials/dashboard.html
<div class="row-fluid container" style="margin-top:10px"> <div class="row-fluid container" style="margin-top:10px">
<style>
.row-panel-filler {
opacity: 0;
}
.row-panel-filler:hover {
opacity: 0.3;
}
.row-name {
}
</style>
<!-- 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)">
<div class="row-control"> <div class="row-control">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px"> <div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
<div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;">
<span ng-class='{pointer:row.collapsable}' ng-click="toggle_row(row)">{{row.title}}</span> <div class="row-close" ng-show="row.collapse">
<i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i> <span bs-tooltip="'Show row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="row-name label label-inverse" ng-click="toggle_row(row)">{{row.title || 'Row '+$index}}</span>
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
<div class="clear"></div>
</div> </div>
<div class="row-open" ng-show="!row.collapse">
<i bs-tooltip="'Hide row'" data-placement="right" ng-class='{pointer:row.collapsable}' class="icon-chevron-up" ng-click="toggle_row(row)"></i><br>
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
</div>
</div> </div>
<div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse"> <div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
<!-- Panels --> <!-- Panels -->
...@@ -23,6 +43,12 @@ ...@@ -23,6 +43,12 @@
<kibana-panel type="panel.type" ng-cloak></kibana-panel> <kibana-panel type="panel.type" ng-cloak></kibana-panel>
</div> </div>
</div> </div>
<div ng-hide="(12-rowSpan(row)) < 1 || !dashboard.current.panel_hints" ng-class="'span'+(12-rowSpan(row))" class="bordered row-panel-filler" style="height:{{row.height}}; position:relative; border: 1px dashed; border-radius: 10px;text-align:center;vertical-align:middle;">
<span class="pointer addLink" ng-click="editor.index=2" bs-modal="'app/partials/roweditor.html'">
Add a panel here<br>
<i style="font-size:20px" class="icon-plus-sign" ></i>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
......
src/app/partials/dasheditor.html
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
<div class="span1"> <div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" /> <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
</div> </div>
<div class="span1">
<label class="small"> Hints <tip>Show 'Add panel' hints in empty spaces</tip></label><input type="checkbox" ng-model="dashboard.current.panel_hints" ng-checked="dashboard.current.panel_hints" />
</div>
<div class="span3"> <div class="span3">
<label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select> <label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select>
</div> </div>
......
src/app/partials/roweditor.html
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<thead> <thead>
<th>Title</th> <th>Title</th>
<th>Type</th> <th>Type</th>
<th>Span</th> <th>Span <span class="small">({{rowSpan(row)}}/12)</span></th>
<th>Delete</th> <th>Delete</th>
<th>Move</th> <th>Move</th>
<th></th> <th></th>
...@@ -47,9 +47,12 @@ ...@@ -47,9 +47,12 @@
</div> </div>
<div class="row-fluid" ng-show="editor.index == 2"> <div class="row-fluid" ng-show="editor.index == 2">
<h4>Select Panel Type</h4> <h4>Select Panel Type</h4>
<form class="input-append"> <form class="form-inline">
<select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select> <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
<small ng-show="!panel.type">Select Type</small></form> <small ng-show="rowSpan(row) > 11">
Note: This row is full, new panels will wrap to a new line. You should add another row.
</small>
</form>
<div ng-show="!(_.isUndefined(panel.type))"> <div ng-show="!(_.isUndefined(panel.type))">
<div add-panel="{{panel.type}}"></div> <div add-panel="{{panel.type}}"></div>
......
src/app/services/dashboard.js
...@@ -23,6 +23,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) { ...@@ -23,6 +23,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
style: "dark", style: "dark",
editable: true, editable: true,
failover: false, failover: false,
panel_hints: true,
rows: [], rows: [],
services: {}, services: {},
loader: { loader: {
......
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/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/overrides.less
...@@ -43,12 +43,12 @@ ...@@ -43,12 +43,12 @@
.kibana-row { .kibana-row {
margin-left: 15px; margin-left: 15px;
margin-bottom: 15px; margin-bottom: 10px;
} }
.row-close { .row-close {
color: #bbb; color: #bbb;
position: absolute; margin-left: -35px;
font-size: 9pt; font-size: 9pt;
font-weight: 200; font-weight: 200;
padding-left: 35px; padding-left: 35px;
...@@ -58,19 +58,10 @@ ...@@ -58,19 +58,10 @@
.row-open { .row-open {
text-align: right; text-align: right;
color: #bbb; color: #bbb;
margin-top:30px; left:-30px;
position: absolute; position: absolute;
font-size: 13pt; font-size: 13pt;
font-weight: 200; font-weight: 200;
-moz-transform-origin: 40px;
-ms-transform-origin: 40px;
-o-transform-origin: 40px;
-webkit-transform-origin: 40px;
transform-origin: 40px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
} }
.row-open i { .row-open i {
......
src/vendor/bootstrap/less/variables.light.less
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
// Links // Links
// ------------------------- // -------------------------
@linkColor: #08c; @linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%); @linkColorHover: lighten(@linkColor, 15%);
// Typography // Typography
......
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