mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
'Add panel' hinting in empty spaces
This commit is contained in:
parent
d071f3cb4d
commit
79aa7e87bd
@ -20,7 +20,6 @@ function (angular, app, _) {
|
||||
|
||||
_.defaults($scope.row,_d);
|
||||
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.querySrv = querySrv;
|
||||
$scope.reset_panel();
|
||||
@ -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
|
||||
$scope.close_edit = function() {
|
||||
$scope.$broadcast('render');
|
||||
@ -48,9 +53,13 @@ function (angular, app, _) {
|
||||
};
|
||||
|
||||
$scope.reset_panel = function(type) {
|
||||
var
|
||||
defaultSpan = 4,
|
||||
_as = 12-$scope.rowSpan($scope.row);
|
||||
|
||||
$scope.panel = {
|
||||
error : false,
|
||||
span : 3,
|
||||
span : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
|
||||
editable: true,
|
||||
type : type
|
||||
};
|
||||
|
@ -28,8 +28,8 @@ function (angular) {
|
||||
'<span class="small strong">{{panel.type}}</span> ' +
|
||||
'</span>' +
|
||||
|
||||
'<h4 ng-show="panel.title">' +
|
||||
'{{panel.title}}' +
|
||||
'<h4 ng-show="panel.title" style="margin:0px;">' +
|
||||
'{{panel.title}} ' +
|
||||
'<i class="icon-spinner smaller icon-spin icon-large"' +
|
||||
'ng-show="panelMeta.loading == true && panel.title"></i>' +
|
||||
'</h4>';
|
||||
|
@ -1,12 +1,32 @@
|
||||
<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 -->
|
||||
<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-fluid row-header" style="padding:0px;margin:0px;height:0px">
|
||||
<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>
|
||||
<i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'app/partials/roweditor.html'"></i>
|
||||
<div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
|
||||
|
||||
<div class="row-close" ng-show="row.collapse">
|
||||
<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 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 class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
|
||||
<!-- Panels -->
|
||||
@ -23,6 +43,12 @@
|
||||
<kibana-panel type="panel.type" ng-cloak></kibana-panel>
|
||||
</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>
|
||||
|
@ -14,6 +14,9 @@
|
||||
<div class="span1">
|
||||
<label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable" ng-checked="dashboard.current.editable" />
|
||||
</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">
|
||||
<label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style" ng-options="f for f in ['dark','light']"></select>
|
||||
</div>
|
||||
|
@ -27,7 +27,7 @@
|
||||
<thead>
|
||||
<th>Title</th>
|
||||
<th>Type</th>
|
||||
<th>Span</th>
|
||||
<th>Span <span class="small">({{rowSpan(row)}}/12)</span></th>
|
||||
<th>Delete</th>
|
||||
<th>Move</th>
|
||||
<th></th>
|
||||
@ -47,9 +47,12 @@
|
||||
</div>
|
||||
<div class="row-fluid" ng-show="editor.index == 2">
|
||||
<h4>Select Panel Type</h4>
|
||||
<form class="input-append">
|
||||
<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>
|
||||
<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>
|
||||
<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 add-panel="{{panel.type}}"></div>
|
||||
|
@ -23,6 +23,7 @@ function (angular, $, kbn, _, config, moment, Modernizr) {
|
||||
style: "dark",
|
||||
editable: true,
|
||||
failover: false,
|
||||
panel_hints: true,
|
||||
rows: [],
|
||||
services: {},
|
||||
loader: {
|
||||
|
2
src/css/bootstrap.dark.min.css
vendored
2
src/css/bootstrap.dark.min.css
vendored
File diff suppressed because one or more lines are too long
2
src/css/bootstrap.light.min.css
vendored
2
src/css/bootstrap.light.min.css
vendored
File diff suppressed because one or more lines are too long
15
src/vendor/bootstrap/less/overrides.less
vendored
15
src/vendor/bootstrap/less/overrides.less
vendored
@ -43,12 +43,12 @@
|
||||
|
||||
.kibana-row {
|
||||
margin-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.row-close {
|
||||
color: #bbb;
|
||||
position: absolute;
|
||||
margin-left: -35px;
|
||||
font-size: 9pt;
|
||||
font-weight: 200;
|
||||
padding-left: 35px;
|
||||
@ -58,19 +58,10 @@
|
||||
.row-open {
|
||||
text-align: right;
|
||||
color: #bbb;
|
||||
margin-top:30px;
|
||||
left:-30px;
|
||||
position: absolute;
|
||||
font-size: 13pt;
|
||||
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 {
|
||||
|
@ -39,7 +39,7 @@
|
||||
// Links
|
||||
// -------------------------
|
||||
@linkColor: #08c;
|
||||
@linkColorHover: darken(@linkColor, 15%);
|
||||
@linkColorHover: lighten(@linkColor, 15%);
|
||||
|
||||
|
||||
// Typography
|
||||
|
Loading…
Reference in New Issue
Block a user