Skip to content

N
nexpie-grafana-theme
Commit 0ad4f3b8 by Torkel Ödegaard
Options

Row editing and adding new panel is now a lot quicker and easier with the new row menu (Issue #475)

parent 2d061ce4
Showing with 126 additions and 24 deletions
CHANGELOG.md
......@@ -13,9 +13,14 @@
- Partial support for url encoded metrics when using Graphite datasource (PR #327) - thx @axe-felix
- Improvement to InfluxDB query editor and function/value column selection (Issue #473)
- Initial support for filtering (templated queries) for InfluxDB (PR #375) - thx @mavimo
- Row editing and adding new panel is now a lot quicker and easier with the new
row menu (Issue #475)
#### Changes
- Graphite panel is now renamed graph (Existing dashboards will still work)
- Add panel icon and Row edit button is replaced by the Row edit menu (Issue #475)
- New graphs now have a default empty query
- Add Row button now creates a row with default height of 250px (no longer opens dashboard settings modal)
#### Fixes
- Filter option loading when having muliple nested filters now works better.
......
src/app/controllers/dash.js
......@@ -89,6 +89,12 @@ function (angular, $, config, _) {
dash.rows.push(row);
};
$scope.add_row_default = function() {
$scope.reset_row();
$scope.row.title = 'New row';
$scope.add_row(dashboard.current, $scope.row);
};
$scope.reset_row = function() {
$scope.row = {
title: '',
......
src/app/controllers/graphiteTarget.js
......@@ -13,6 +13,8 @@ function (angular, _, config, gfunc, Parser) {
module.controller('GraphiteTargetCtrl', function($scope) {
$scope.init = function() {
$scope.target.target = $scope.target.target || '';
parseTarget();
};
......
src/app/controllers/row.js
......@@ -53,10 +53,56 @@ function (angular, app, _) {
$scope.$broadcast('render');
};
$scope.add_panel = function(row,panel) {
$scope.add_panel = function(panel) {
var rowSpan = $scope.rowSpan($scope.row);
var panelCount = $scope.row.panels.length;
var space = (12 - rowSpan) - panel.span;
// try to make room of there is no space left
if (space <= 0) {
if (panelCount === 1) {
$scope.row.panels[0].span = 6;
panel.span = 6;
}
else if (panelCount === 2) {
$scope.row.panels[0].span = 4;
$scope.row.panels[1].span = 4;
panel.span = 4;
}
}
$scope.row.panels.push(panel);
};
$scope.delete_row = function() {
if (confirm("Are you sure you want to delete this row?")) {
$scope.dashboard.current.rows = _.without($scope.dashboard.current.rows, $scope.row);
}
};
$scope.move_row = function(direction) {
var rowsList = $scope.dashboard.current.rows;
var rowIndex = _.indexOf(rowsList, $scope.row);
var newIndex = rowIndex + direction;
if (newIndex >= 0 && newIndex <= (rowsList.length - 1)) {
_.move(rowsList, rowIndex, rowIndex + direction);
}
};
$scope.add_panel_default = function(type) {
$scope.reset_panel(type);
$scope.add_panel($scope.panel);
$timeout(function() {
$scope.$broadcast('render');
});
};
$scope.set_height = function(height) {
$scope.row.height = height;
$scope.$broadcast('render');
};
$scope.remove_panel_from_row = function(row, panel) {
if (confirm('Are you sure you want to remove this ' + panel.type + ' panel?')) {
row.panels = _.without(row.panels,panel);
......
src/app/panels/graph/module.js
......@@ -210,6 +210,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
$scope.datasources = datasourceSrv.listOptions();
$scope.setDatasource($scope.panel.datasource);
if ($scope.panel.targets.length === 0) {
$scope.panel.targets.push({});
}
};
$scope.setDatasource = function(datasource) {
......
src/app/partials/dashboard.html
......@@ -23,26 +23,59 @@
<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
</span>
<span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
<i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-left pointer" ></i>
<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
</span>
<span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
</div>
<div style="text-align:center" class="row-open" ng-show="!row.collapse">
<div class="row-open" ng-show="!row.collapse">
<div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
<i bs-tooltip="'Collapse row'" data-placement="right" class="icon-caret-right" ></i>
<br>
</div>
<div config-modal="app/partials/roweditor.html" class='row-tab bgWarning' ng-show="row.editable">
<i bs-tooltip="'Configure row'" data-placement="right" class="icon-cog pointer"></i>
<br>
<span class="row-tab-button">
<i class="icon-caret-right" ></i>
</span>
</div>
<div ng-show="rowSpan(row) > 12" class='row-tab bgDanger'>
<i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign"></i>
<br>
<div class='row-tab bgSuccess dropdown' ng-show="row.editable">
<span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-list"></i>
</span>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
<li class="dropdown-submenu">
<a href="#">Add Panel</a>
<ul class="dropdown-menu">
<li><a ng-click="add_panel_default('graph')">Graph</li></a>
<li><a ng-click="add_panel_default('text')">Text</li></a>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Set height</a>
<ul class="dropdown-menu">
<li><a ng-click="set_height('100px')">100 px</li></a>
<li><a ng-click="set_height('150px')">150 px</li></a>
<li><a ng-click="set_height('200px')">200 px</li></a>
<li><a ng-click="set_height('250px')">250 px</li></a>
<li><a ng-click="set_height('300px')">300 px</li></a>
<li><a ng-click="set_height('350px')">350 px</li></a>
<li><a ng-click="set_height('450px')">450 px</li></a>
<li><a ng-click="set_height('500px')">500 px</li></a>
<li><a ng-click="set_height('600px')">600 px</li></a>
<li><a ng-click="set_height('700px')">700 px</li></a>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">Move</a>
<ul class="dropdown-menu">
<li><a ng-click="move_row(-1)">Up</li></a>
<li><a ng-click="move_row(1)">Down</li></a>
</ul>
</li>
<li>
<a config-modal="app/partials/roweditor.html">Row editor</a>
</li>
<li>
<a ng-click="delete_row()">Delete row</a>
</li>
</ul>
</div>
</div>
</div>
<div style="padding-top:0px" ng-if="!row.collapse">
......@@ -58,10 +91,6 @@
<div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
</div>
<span config-modal="app/partials/roweditor.html" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
<i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
</span>
<div class="clearfix"></div>
</div>
</div>
......@@ -70,8 +99,8 @@
<div ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="row-fluid add-row-panel-hint">
<div class="span12" style="text-align:right;">
<span style="margin-left: 0px;" class="pointer btn btn-mini" config-modal="app/partials/dasheditor.html">
<span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
<span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
<span><i class="icon-plus-sign"></i> ADD A ROW</span>
</span>
</div>
</div>
......
src/app/partials/dasheditor.html
......@@ -64,7 +64,7 @@
<div class="span4">
<h4>Add Row</h4>
<label class="small">Title</label>
<input type="text" class="input-medium" ng-model='row.title' placeholder="New row"></input>
<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
<label class="small">Height</label>
<input type="text" class="input-mini" ng-model='row.height'></input>
</div>
......
src/app/partials/roweditor.html
......@@ -61,6 +61,6 @@
</div>
<div class="modal-footer">
<button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button ng-show="panel.type && editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button ng-show="panel.type && editor.index == 2" ng-click="add_panel(panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
</div>
\ No newline at end of file
src/app/services/graphite/graphiteDatasource.js
......@@ -173,7 +173,7 @@ function (angular, _, $, config, kbn, moment) {
if (key === "targets") {
_.each(value, function (value) {
if (!value.hide) {
if (value.target && !value.hide) {
var targetValue = filterSrv.applyTemplateToTarget(value.target);
clean_options.push("target=" + encodeURIComponent(targetValue));
}
......
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/css/default.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/overrides.less
......@@ -204,12 +204,21 @@ form input.ng-invalid {
}
.row-tab {
.dropdown-menu-right {
top: 0;
left: 33px;
}
}
.row-tab-button {
padding: 0px;
cursor: pointer;
vertical-align: middle;
width: 30px;
height: 30px;
text-align: center;
display: inline-block;
line-height: 30px;
vertical-align: middle;
}
.row-button {
......
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