mirror of
https://github.com/grafana/grafana.git
synced 2025-02-11 08:05:43 -06:00
Progress on template editor & new templating features
This commit is contained in:
Torkel Ödegaard
parent
e0a58dd1fe
commit
bb3b31829f
@ -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;
|
||||
|
||||
|
||||
@ -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 };
|
||||
});
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,69 +1,80 @@
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -2,6 +2,7 @@ define([
|
||||
'./alertSrv',
|
||||
'./datasourceSrv',
|
||||
'./filterSrv',
|
||||
'./templateSrv',
|
||||
'./panelSrv',
|
||||
'./timer',
|
||||
'./panelMove',
|
||||
|
||||
@ -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 = [];
|
||||
|
||||
@ -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 };
|
||||
|
||||
21
src/app/services/templateSrv.js
Normal file
21
src/app/services/templateSrv.js
Normal file
@ -0,0 +1,21 @@
|
||||
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;
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user