Skip to content

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

Progress on template editor & new templating features

parent e0a58dd1
Showing with 113 additions and 37 deletions
src/app/controllers/dashboardCtrl.js
...@@ -11,9 +11,16 @@ function (angular, $, config, _) { ...@@ -11,9 +11,16 @@ function (angular, $, config, _) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.controller('DashboardCtrl', function( module.controller('DashboardCtrl', function(
$scope, $rootScope, dashboardKeybindings, $scope,
filterSrv, dashboardSrv, dashboardViewStateSrv, $rootScope,
panelMoveSrv, timer, $timeout) { dashboardKeybindings,
filterSrv,
templateSrv,
dashboardSrv,
dashboardViewStateSrv,
panelMoveSrv,
timer,
$timeout) {
$scope.editor = { index: 0 }; $scope.editor = { index: 0 };
$scope.panelNames = config.panels; $scope.panelNames = config.panels;
...@@ -47,6 +54,7 @@ function (angular, $, config, _) { ...@@ -47,6 +54,7 @@ function (angular, $, config, _) {
$scope.filter = filterSrv; $scope.filter = filterSrv;
$scope.filter.init($scope.dashboard); $scope.filter.init($scope.dashboard);
templateSrv.init($scope.dashboard);
$scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable; $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
......
src/app/controllers/submenuCtrl.js
...@@ -50,7 +50,6 @@ function (angular, app, _) { ...@@ -50,7 +50,6 @@ function (angular, app, _) {
$scope.applyFilter = function(templateParam) { $scope.applyFilter = function(templateParam) {
return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query) return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query)
.then(function (results) { .then(function (results) {
templateParam.editing = undefined;
templateParam.options = _.map(results, function(node) { templateParam.options = _.map(results, function(node) {
return { text: node.text, value: node.text }; return { text: node.text, value: node.text };
}); });
......
src/app/controllers/templateEditorCtrl.js
...@@ -10,7 +10,7 @@ function (angular, _) { ...@@ -10,7 +10,7 @@ function (angular, _) {
module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) { module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) {
var replacementDefaults = { var replacementDefaults = {
type: 'metric query', type: 'query',
datasource: null, datasource: null,
refresh_on_load: false, refresh_on_load: false,
name: '', name: '',
...@@ -24,8 +24,17 @@ function (angular, _) { ...@@ -24,8 +24,17 @@ function (angular, _) {
$scope.templateParameters = $scope.filter.templateParameters; $scope.templateParameters = $scope.filter.templateParameters;
$scope.reset(); $scope.reset();
$scope.$watch('editor.index', function(newVal) { _.each($scope.templateParameters, function(param) {
if (newVal !== 2) { $scope.reset(); } if (param.datasource === void 0) {
param.datasource = null;
param.type = 'query';
}
});
$scope.$watch('editor.index', function(index) {
if ($scope.currentIsNew === false && index === 1) {
$scope.reset();
}
}); });
}; };
...@@ -33,6 +42,11 @@ function (angular, _) { ...@@ -33,6 +42,11 @@ function (angular, _) {
$scope.current.datasource = $scope.currentDatasource.name; $scope.current.datasource = $scope.currentDatasource.name;
$scope.templateParameters.push($scope.current); $scope.templateParameters.push($scope.current);
$scope.reset(); $scope.reset();
$scope.editor.index = 0;
};
$scope.runQuery = function() {
$scope.filter.refreshTemplateParameter($scope.current);
}; };
$scope.edit = function(param) { $scope.edit = function(param) {
...@@ -47,10 +61,14 @@ function (angular, _) { ...@@ -47,10 +61,14 @@ function (angular, _) {
$scope.editor.index = 2; $scope.editor.index = 2;
}; };
$scope.update = function() {
$scope.reset();
$scope.editor.index = 0;
};
$scope.reset = function() { $scope.reset = function() {
$scope.currentIsNew = true; $scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults); $scope.current = angular.copy(replacementDefaults);
$scope.editor.index = 0;
}; };
$scope.removeTemplateParam = function(templateParam) { $scope.removeTemplateParam = function(templateParam) {
......
src/app/partials/influxdb/editor.html
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
tabindex="1"> tabindex="1">
<i class="icon-cog"></i> <i class="icon icon-cog"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"> <li role="menuitem">
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</li> </li>
<li> <li>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="icon-remove"></i> <i class="icon icon-remove"></i>
</a> </a>
</li> </li>
</ul> </ul>
...@@ -171,7 +171,9 @@ ...@@ -171,7 +171,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="editor-row">
<div class="pull-left metrics-editor-help" style="margin-top: 30px;"> <div class="pull-left metrics-editor-help" style="margin-top: 30px;">
<div class="span6"> <div class="span6">
<span class="pointer"> <span class="pointer">
......
src/app/partials/inspector.html
<div class="modal-body" ng-controller="InspectCtrl" ng-init="init()"> <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
<div class="pull-right editor-title">Inspector</div> <div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-eye-open"></i>
Inspector
</div>
<div ng-model="editor.index" bs-tabs> <div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}"> <div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
</div> </div>
</div> </div>
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 0">
<h5>Request details</h5> <h5>Request details</h5>
<table class="table table-striped small inspector-request-table"> <table class="table table-striped small inspector-request-table">
...@@ -63,7 +71,10 @@ ...@@ -63,7 +71,10 @@
</div> </div>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="dismiss()">Close</button> <button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
</div> </div>
src/app/partials/opentsdb/editor.html
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
tabindex="1"> tabindex="1">
<i class="icon-cog"></i> <i class="icon icon-cog"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"> <li role="menuitem">
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</li> </li>
<li> <li>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="icon-remove"></i> <i class="icon icon-remove"></i>
</a> </a>
</li> </li>
</ul> </ul>
......
src/app/partials/templating_editor.html
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</div> </div>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="templateParam in templateParameters"> <tr ng-repeat="templateParam in templateParameters">
<td> <td style="width: 1%">
{{templateParam.name}} [[{{templateParam.name}}]]
</td> </td>
<td class="max-width" style="max-width: 200px;"> <td class="max-width" style="max-width: 200px;">
{{templateParam.query}} {{templateParam.query}}
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Type</label> <label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['metric query', 'custom']"></select> <select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'custom']"></select>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Datasource</label> <label class="small">Datasource</label>
...@@ -63,9 +63,29 @@ ...@@ -63,9 +63,29 @@
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option form-inline">
<label class="small">Metric query</label> <label class="small">Metric name query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="query"></input> <input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin-top: 10px;">
<div class="editor-option form-inline">
<label class="small">Regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin-top: 10px;">
<div class="editor-option form-inline">
<label class="small">Current replacement values</label>
<ul>
<li ng-repeat="option in current.options">
{{option.text}}
</li>
</ul>
</div> </div>
</div> </div>
...@@ -74,8 +94,8 @@ ...@@ -74,8 +94,8 @@
</div> </div>
<div class="dashboard-editor-footer"> <div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="dismiss();">Update</button> <button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="dismiss();">Add</button> <button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button> <button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
</div> </div>
</div> </div>
......
src/app/services/all.js
...@@ -2,6 +2,7 @@ define([ ...@@ -2,6 +2,7 @@ define([
'./alertSrv', './alertSrv',
'./datasourceSrv', './datasourceSrv',
'./filterSrv', './filterSrv',
'./templateSrv',
'./panelSrv', './panelSrv',
'./timer', './timer',
'./panelMove', './panelMove',
......
src/app/services/datasourceSrv.js
...@@ -12,7 +12,7 @@ function (angular, _, config) { ...@@ -12,7 +12,7 @@ function (angular, _, config) {
var module = angular.module('grafana.services'); var module = angular.module('grafana.services');
module.service('datasourceSrv', function($q, filterSrv, $http, $injector) { module.service('datasourceSrv', function($q, $http, $injector) {
var datasources = {}; var datasources = {};
var metricSources = []; var metricSources = [];
var annotationSources = []; var annotationSources = [];
......
src/app/services/filterSrv.js
...@@ -78,11 +78,6 @@ define([ ...@@ -78,11 +78,6 @@ define([
} }
}, },
removeTemplateParameter: function(templateParameter) {
this.templateParameters = _.without(this.templateParameters, templateParameter);
this.dashboard.templating.list = this.templateParameters;
},
init: function(dashboard) { init: function(dashboard) {
this.dashboard = dashboard; this.dashboard = dashboard;
this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g };
......
src/app/services/templateSrv.js 0 → 100644
define([
'angular',
'lodash',
'kbn',
'store'
],
function (angular) {
'use strict';
var module = angular.module('grafana.services');
module.service('templateSrv', function() {
this.init = function(dashboard) {
this.dashboard = dashboard;
};
});
});
src/css/less/overrides.less
...@@ -467,7 +467,6 @@ div.flot-text { ...@@ -467,7 +467,6 @@ div.flot-text {
/************************* /*************************
* Right Positions * Right Positions
*************************/ *************************/
.popover { .popover {
&.rightTop .arrow { &.rightTop .arrow {
top: 10%; top: 10%;
...@@ -639,3 +638,4 @@ code, pre { ...@@ -639,3 +638,4 @@ code, pre {
background-color: @grafanaPanelBackground; background-color: @grafanaPanelBackground;
color: @textColor; color: @textColor;
} }
src/css/less/tables_lists.less
...@@ -9,7 +9,12 @@ ...@@ -9,7 +9,12 @@
padding: 5px 10px; padding: 5px 10px;
white-space: nowrap; white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom; border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop; }
tr:first-child {
td {
border-top: 1px solid @grafanaListBorderBottom;
}
} }
td:first-child { td:first-child {
......
src/css/less/variables.dark.less
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
// ------------------------- // -------------------------
@black: #000; @black: #000;
@gray: #bbb; @gray: #bbb;
@grayDark: #303030; @grayDark: #242424;
@grayDarker: #1f1f1f; @grayDarker: #1f1f1f;
@grayLight: #ADAFAE; @grayLight: #ADAFAE;
...@@ -29,10 +29,6 @@ ...@@ -29,10 +29,6 @@
// ------------------------- // -------------------------
@grafanaPanelBackground: @grayDarker; @grafanaPanelBackground: @grayDarker;
// Submenu
@submenuBackground: #292929;
@submenuBorder: #202020;
// Tabs // Tabs
@fullEditBorder: #555; @fullEditBorder: #555;
...@@ -43,8 +39,8 @@ ...@@ -43,8 +39,8 @@
@grafanaTargetColorHide: darken(#c8c8c8, 25%); @grafanaTargetColorHide: darken(#c8c8c8, 25%);
@grafanaTargetSegmentBorder: #050505; @grafanaTargetSegmentBorder: #050505;
@grafanaTargetFuncBackground: #444; @grafanaTargetFuncBackground: #333;
@grafanaTargetFuncHightlight: #555; @grafanaTargetFuncHightlight: #444;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
...@@ -133,7 +129,7 @@ ...@@ -133,7 +129,7 @@
// Forms // Forms
// ------------------------- // -------------------------
@inputBackground: lighten(@grayDark,0%); @inputBackground: lighten(@grayDark,5%);
@inputBorder: lighten(@grayDark,5%); @inputBorder: lighten(@grayDark,5%);
@inputBorderRadius: @baseBorderRadius; @inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: #555; @inputDisabledBackground: #555;
......
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