Skip to content

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

Progress on template editor & new templating features

parent e0a58dd1
Showing with 166 additions and 90 deletions
src/app/controllers/dashboardCtrl.js
......@@ -11,9 +11,16 @@ function (angular, $, config, _) {
var module = angular.module('grafana.controllers');
module.controller('DashboardCtrl', function(
$scope, $rootScope, dashboardKeybindings,
filterSrv, dashboardSrv, dashboardViewStateSrv,
panelMoveSrv, timer, $timeout) {
$scope,
$rootScope,
dashboardKeybindings,
filterSrv,
templateSrv,
dashboardSrv,
dashboardViewStateSrv,
panelMoveSrv,
timer,
$timeout) {
$scope.editor = { index: 0 };
$scope.panelNames = config.panels;
......@@ -47,6 +54,7 @@ function (angular, $, config, _) {
$scope.filter = filterSrv;
$scope.filter.init($scope.dashboard);
templateSrv.init($scope.dashboard);
$scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
......
src/app/controllers/submenuCtrl.js
......@@ -50,7 +50,6 @@ function (angular, app, _) {
$scope.applyFilter = function(templateParam) {
return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query)
.then(function (results) {
templateParam.editing = undefined;
templateParam.options = _.map(results, function(node) {
return { text: node.text, value: node.text };
});
......
src/app/controllers/templateEditorCtrl.js
......@@ -10,7 +10,7 @@ function (angular, _) {
module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) {
var replacementDefaults = {
type: 'metric query',
type: 'query',
datasource: null,
refresh_on_load: false,
name: '',
......@@ -24,8 +24,17 @@ function (angular, _) {
$scope.templateParameters = $scope.filter.templateParameters;
$scope.reset();
$scope.$watch('editor.index', function(newVal) {
if (newVal !== 2) { $scope.reset(); }
_.each($scope.templateParameters, function(param) {
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, _) {
$scope.current.datasource = $scope.currentDatasource.name;
$scope.templateParameters.push($scope.current);
$scope.reset();
$scope.editor.index = 0;
};
$scope.runQuery = function() {
$scope.filter.refreshTemplateParameter($scope.current);
};
$scope.edit = function(param) {
......@@ -47,10 +61,14 @@ function (angular, _) {
$scope.editor.index = 2;
};
$scope.update = function() {
$scope.reset();
$scope.editor.index = 0;
};
$scope.reset = function() {
$scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults);
$scope.editor.index = 0;
};
$scope.removeTemplateParam = function(templateParam) {
......
src/app/partials/influxdb/editor.html
......@@ -14,7 +14,7 @@
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="icon-cog"></i>
<i class="icon icon-cog"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
......@@ -26,7 +26,7 @@
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="icon-remove"></i>
<i class="icon icon-remove"></i>
</a>
</li>
</ul>
......@@ -171,7 +171,9 @@
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="pull-left metrics-editor-help" style="margin-top: 30px;">
<div class="span6">
<span class="pointer">
......
src/app/partials/inspector.html
<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-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
</div>
</div>
<div ng-model="editor.index" bs-tabs>
<div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
</div>
</div>
<div ng-if="editor.index == 0">
<h5>Request details</h5>
<table class="table table-striped small inspector-request-table">
<tr>
<td>Url</td>
<td>{{inspector.error.config.url}}</td>
</tr>
<tr>
<td>Method</td>
<td>{{inspector.error.config.method}}</td>
</tr>
<tr ng-repeat="(key, value) in inspector.error.config.headers">
<td>
{{key}}
</td>
<td>
{{value}}
</td>
</tr>
</table>
</div>
<h5>Request parameters</h5>
<table class="table table-striped small inspector-request-table">
<tr ng-repeat="param in request_parameters">
<td>
{{param.key}}
</td>
<td>
{{param.value}}
</td>
</tr>
</table>
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 1">
<h5 ng-if="response" ng-bind="response"></h5>
<div ng-if="editor.index == 0">
<h5>Request details</h5>
<table class="table table-striped small inspector-request-table">
<tr>
<td>Url</td>
<td>{{inspector.error.config.url}}</td>
</tr>
<tr>
<td>Method</td>
<td>{{inspector.error.config.method}}</td>
</tr>
<tr ng-repeat="(key, value) in inspector.error.config.headers">
<td>
{{key}}
</td>
<td>
{{value}}
</td>
</tr>
</table>
<div ng-if="response_html">
<div iframe-content="response_html"></div>
</div>
<h5>Request parameters</h5>
<table class="table table-striped small inspector-request-table">
<tr ng-repeat="param in request_parameters">
<td>
{{param.key}}
</td>
<td>
{{param.value}}
</td>
</tr>
</table>
</div>
</div>
<div ng-if="editor.index == 1">
<h5 ng-if="response" ng-bind="response"></h5>
<div ng-if="editor.index == 2">
<div ng-if="response_html">
<div iframe-content="response_html"></div>
</div>
<label>Message:</label>
<pre>
{{message}}
</pre>
</div>
<label>Stack trace:</label>
<pre>
{{stack_trace}}
</pre>
<div ng-if="editor.index == 2">
</div>
<label>Message:</label>
<pre>
{{message}}
</pre>
<label>Stack trace:</label>
<pre>
{{stack_trace}}
</pre>
</div>
</div>
</div>
<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>
src/app/partials/opentsdb/editor.html
......@@ -12,7 +12,7 @@
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="icon-cog"></i>
<i class="icon icon-cog"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
......@@ -25,7 +25,7 @@
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="icon-remove"></i>
<i class="icon icon-remove"></i>
</a>
</li>
</ul>
......
src/app/partials/templating_editor.html
......@@ -22,8 +22,8 @@
</div>
<table class="grafana-options-table">
<tr ng-repeat="templateParam in templateParameters">
<td>
{{templateParam.name}}
<td style="width: 1%">
[[{{templateParam.name}}]]
</td>
<td class="max-width" style="max-width: 200px;">
{{templateParam.query}}
......@@ -54,7 +54,7 @@
</div>
<div class="editor-option">
<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 class="editor-option">
<label class="small">Datasource</label>
......@@ -63,9 +63,29 @@
</div>
<div class="editor-row">
<div class="editor-option">
<label class="small">Metric query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="query"></input>
<div class="editor-option form-inline">
<label class="small">Metric name query</label>
<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>
......@@ -74,8 +94,8 @@
</div>
<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 === 1" ng-click="dismiss();">Add</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="add();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
</div>
</div>
......
src/app/services/all.js
......@@ -2,6 +2,7 @@ define([
'./alertSrv',
'./datasourceSrv',
'./filterSrv',
'./templateSrv',
'./panelSrv',
'./timer',
'./panelMove',
......
src/app/services/datasourceSrv.js
......@@ -12,7 +12,7 @@ function (angular, _, config) {
var module = angular.module('grafana.services');
module.service('datasourceSrv', function($q, filterSrv, $http, $injector) {
module.service('datasourceSrv', function($q, $http, $injector) {
var datasources = {};
var metricSources = [];
var annotationSources = [];
......
src/app/services/filterSrv.js
......@@ -78,11 +78,6 @@ define([
}
},
removeTemplateParameter: function(templateParameter) {
this.templateParameters = _.without(this.templateParameters, templateParameter);
this.dashboard.templating.list = this.templateParameters;
},
init: function(dashboard) {
this.dashboard = dashboard;
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 {
/*************************
* Right Positions
*************************/
.popover {
&.rightTop .arrow {
top: 10%;
......@@ -639,3 +638,4 @@ code, pre {
background-color: @grafanaPanelBackground;
color: @textColor;
}
src/css/less/tables_lists.less
......@@ -9,7 +9,12 @@
padding: 5px 10px;
white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop;
}
tr:first-child {
td {
border-top: 1px solid @grafanaListBorderBottom;
}
}
td:first-child {
......
src/css/less/variables.dark.less
......@@ -6,7 +6,7 @@
// -------------------------
@black: #000;
@gray: #bbb;
@grayDark: #303030;
@grayDark: #242424;
@grayDarker: #1f1f1f;
@grayLight: #ADAFAE;
......@@ -29,10 +29,6 @@
// -------------------------
@grafanaPanelBackground: @grayDarker;
// Submenu
@submenuBackground: #292929;
@submenuBorder: #202020;
// Tabs
@fullEditBorder: #555;
......@@ -43,8 +39,8 @@
@grafanaTargetColorHide: darken(#c8c8c8, 25%);
@grafanaTargetSegmentBorder: #050505;
@grafanaTargetFuncBackground: #444;
@grafanaTargetFuncHightlight: #555;
@grafanaTargetFuncBackground: #333;
@grafanaTargetFuncHightlight: #444;
// Scaffolding
// -------------------------
......@@ -133,7 +129,7 @@
// Forms
// -------------------------
@inputBackground: lighten(@grayDark,0%);
@inputBackground: lighten(@grayDark,5%);
@inputBorder: lighten(@grayDark,5%);
@inputBorderRadius: @baseBorderRadius;
@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