Skip to content

N
nexpie-grafana-theme
Commit fe34c8f2 by Torkel Ödegaard
Options

Worked on submenu row (templating, annotations), removed templating and… 

Worked on submenu row (templating, annotations), removed templating and annotation feature toggles, the submenu row will be visible as soon as there are any template vars or annotations, #1503
parent 923e18b2
Showing with 31 additions and 38 deletions
src/app/features/annotations/editorCtrl.js
...@@ -64,11 +64,13 @@ function (angular, _, $) { ...@@ -64,11 +64,13 @@ function (angular, _, $) {
$scope.annotations.push($scope.currentAnnotation); $scope.annotations.push($scope.currentAnnotation);
$scope.reset(); $scope.reset();
$scope.editor.index = 0; $scope.editor.index = 0;
$scope.updateSubmenuVisibility();
}; };
$scope.removeAnnotation = function(annotation) { $scope.removeAnnotation = function(annotation) {
var index = _.indexOf($scope.annotations, annotation); var index = _.indexOf($scope.annotations, annotation);
$scope.annotations.splice(index, 1); $scope.annotations.splice(index, 1);
$scope.updateSubmenuVisibility();
}; };
}); });
......
src/app/features/dashboard/dashboardCtrl.js
...@@ -51,14 +51,18 @@ function (angular, $, config) { ...@@ -51,14 +51,18 @@ function (angular, $, config) {
timeSrv.init($scope.dashboard); timeSrv.init($scope.dashboard);
templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState); templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState);
$scope.checkFeatureToggles();
dashboardKeybindings.shortcuts($scope); dashboardKeybindings.shortcuts($scope);
$scope.updateSubmenuVisibility();
$scope.setWindowTitleAndTheme(); $scope.setWindowTitleAndTheme();
$scope.appEvent("dashboard-loaded", $scope.dashboard); $scope.appEvent("dashboard-loaded", $scope.dashboard);
}; };
$scope.updateSubmenuVisibility = function() {
$scope.submenuEnabled = $scope.dashboard.hasTemplateVarsOrAnnotations();
};
$scope.setWindowTitleAndTheme = function() { $scope.setWindowTitleAndTheme = function() {
window.document.title = config.window_title_prefix + $scope.dashboard.title; window.document.title = config.window_title_prefix + $scope.dashboard.title;
$scope.contextSrv.lightTheme = $scope.dashboard.style === 'light'; $scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
...@@ -101,10 +105,6 @@ function (angular, $, config) { ...@@ -101,10 +105,6 @@ function (angular, $, config) {
$scope.appEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope }); $scope.appEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope });
}; };
$scope.checkFeatureToggles = function() {
$scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable || false;
};
$scope.onDrop = function(panelId, row, dropTarget) { $scope.onDrop = function(panelId, row, dropTarget) {
var info = $scope.dashboard.getPanelInfoById(panelId); var info = $scope.dashboard.getPanelInfoById(panelId);
if (dropTarget) { if (dropTarget) {
......
src/app/features/dashboard/dashboardSrv.js
...@@ -91,6 +91,10 @@ function (angular, $, kbn, _, moment) { ...@@ -91,6 +91,10 @@ function (angular, $, kbn, _, moment) {
row.panels.push(panel); row.panels.push(panel);
}; };
p.hasTemplateVarsOrAnnotations = function() {
return this.templating.list.length > 0 || this.annotations.list.length > 0;
};
p.getPanelInfoById = function(panelId) { p.getPanelInfoById = function(panelId) {
var result = {}; var result = {};
_.each(this.rows, function(row) { _.each(this.rows, function(row) {
...@@ -215,15 +219,11 @@ function (angular, $, kbn, _, moment) { ...@@ -215,15 +219,11 @@ function (angular, $, kbn, _, moment) {
if (oldVersion < 6) { if (oldVersion < 6) {
// move pulldowns to new schema // move pulldowns to new schema
var filtering = _.findWhere(old.pulldowns, { type: 'filtering' });
var annotations = _.findWhere(old.pulldowns, { type: 'annotations' }); var annotations = _.findWhere(old.pulldowns, { type: 'annotations' });
if (filtering) {
this.templating.enable = filtering.enable;
}
if (annotations) { if (annotations) {
this.annotations = { this.annotations = {
list: annotations.annotations, list: annotations.annotations || [],
enable: annotations.enable
}; };
} }
......
src/app/features/dashboard/submenuCtrl.js
...@@ -18,6 +18,7 @@ function (angular, _) { ...@@ -18,6 +18,7 @@ function (angular, _) {
$scope.panel = $scope.pulldown; $scope.panel = $scope.pulldown;
$scope.row = $scope.pulldown; $scope.row = $scope.pulldown;
$scope.variables = $scope.dashboard.templating.list; $scope.variables = $scope.dashboard.templating.list;
$scope.annotations = $scope.dashboard.templating.list;
}; };
$scope.disableAnnotation = function (annotation) { $scope.disableAnnotation = function (annotation) {
......
src/app/features/templating/editorCtrl.js
...@@ -36,6 +36,7 @@ function (angular, _) { ...@@ -36,6 +36,7 @@ function (angular, _) {
if ($scope.isValid()) { if ($scope.isValid()) {
$scope.variables.push($scope.current); $scope.variables.push($scope.current);
$scope.update(); $scope.update();
$scope.updateSubmenuVisibility();
} }
}; };
...@@ -104,6 +105,7 @@ function (angular, _) { ...@@ -104,6 +105,7 @@ function (angular, _) {
$scope.removeVariable = function(variable) { $scope.removeVariable = function(variable) {
var index = _.indexOf($scope.variables, variable); var index = _.indexOf($scope.variables, variable);
$scope.variables.splice(index, 1); $scope.variables.splice(index, 1);
$scope.updateSubmenuVisibility();
}; };
}); });
......
src/app/partials/dasheditor.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}"> <div ng-repeat="tab in ['General', 'Rows', 'Import']" data-title="{{tab}}">
</div> </div>
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}"> <div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
</div> </div>
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select> <select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div> </div>
<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool> <editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
<editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
<editor-opt-bool text="Editable" model="dashboard.editable"></editor-opt-bool> <editor-opt-bool text="Editable" model="dashboard.editable"></editor-opt-bool>
</div> </div>
</div> </div>
...@@ -70,25 +71,10 @@ ...@@ -70,25 +71,10 @@
</div> </div>
<div ng-if="editor.index == 2"> <div ng-if="editor.index == 2">
<div class="editor-row">
<div class="section">
<editor-opt-bool text="Templating" model="dashboard.templating.enable" change="checkFeatureToggles()"></editor-opt-bool>
<editor-opt-bool text="Annotations" model="dashboard.annotations.enable" change="checkFeatureToggles()"></editor-opt-bool>
<div class="editor-option text-center" ng-repeat="pulldown in dashboard.nav">
<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
<label for="pulldown{{pulldown.type}}" class="cr1"></label>
</div>
<editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
</div>
</div>
</div>
<div ng-if="editor.index == 3">
<ng-include src="'app/partials/import.html'"></ng-include> <ng-include src="'app/partials/import.html'"></ng-include>
</div> </div>
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index"> <div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include> <ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button> <button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
</div> </div>
......
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl"> <div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form borderless"> <div class="tight-form borderless">
<ul class="tight-form-list" ng-if="dashboard.templating.enable">
<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
<li class="tight-form-item"> <li class="tight-form-item">
<strong>Variables:</strong> <strong>Variables:</strong>
</li> </li>
...@@ -13,10 +14,15 @@ ...@@ -13,10 +14,15 @@
<li ng-repeat-end template-param-selector> <li ng-repeat-end template-param-selector>
</li> </li>
<li class="tight-form-item" style="width: 15px">
</li>
</ul> </ul>
<ul class="tight-form-list" ng-if="dashboard.annotations.enable"> <ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
<strong>ANNOTATIONS</strong> <li class="tight-form-item">
<strong>Annotations:</strong>
</li>
<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}"> <li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="disableAnnotation(annotation)"> <a ng-click="disableAnnotation(annotation)">
<i class="annotation-color-icon fa fa-bolt"></i> <i class="annotation-color-icon fa fa-bolt"></i>
...@@ -25,6 +31,7 @@ ...@@ -25,6 +31,7 @@
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</div> </div>
src/css/less/grafana.less
...@@ -26,9 +26,6 @@ ...@@ -26,9 +26,6 @@
.row-tab { .row-tab {
display: none; display: none;
} }
.submenu-controls {
display: none;
}
.add-row-panel-hint { .add-row-panel-hint {
display: none; display: none;
} }
......
src/css/less/submenu.less
.submenu-controls-visible:not(.hide-controls) { .submenu-controls-visible {
.panel-fullscreen { .panel-fullscreen {
top: 88px; top: 88px;
} }
} }
.submenu-controls { .submenu-controls {
margin: 5px 5px 0 10px; margin: 5px 10px 0 10px;
} }
.annotation-disabled, .annotation-disabled a { .annotation-disabled, .annotation-disabled a {
......
src/test/specs/dashboardSrv-specs.js
...@@ -157,8 +157,6 @@ define([ ...@@ -157,8 +157,6 @@ define([
}); });
it('should move pulldowns to new schema', function() { it('should move pulldowns to new schema', function() {
expect(model.templating.enable).to.be(true);
expect(model.annotations.enable).to.be(true);
expect(model.annotations.list[0].name).to.be('old'); expect(model.annotations.list[0].name).to.be('old');
}); });
......
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