IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

Progress on new filter/templating editor

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-08-26 14:17:46 +02:00
parent 625781c7f4
commit 647feb7b33
9 changed files with 154 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -4,7 +4,7 @@
"company": "Coding Instinct AB"
},
"name": "grafana",
"version": "1.7.0",
"version": "1.8.0",
"repository": {
"type": "git",
"url": "http://github.com/torkelo/grafana.git"

1
src/app/controllers/all.js
View File

@ -14,4 +14,5 @@ define([
'./inspectCtrl',
'./opentsdbTargetCtrl',
'./annotationsEditorCtrl',
'./templateEditorCtrl',
], function () {});

6
src/app/controllers/annotationsEditorCtrl.js
View File

@ -1,10 +1,9 @@
define([
'angular',
'app',
'lodash',
'jquery'
],
function (angular, app, _, $) {
function (angular, _, $) {
'use strict';
var module = angular.module('grafana.controllers');
@ -63,7 +62,8 @@ function (angular, app, _, $) {
$scope.add = function() {
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
$scope.annotations.push($scope.currentAnnotation);
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.reset();
$scope.editor.index = 0;
};
$scope.removeAnnotation = function(annotation) {

50
src/app/controllers/templateEditorCtrl.js Normal file
View File

@ -0,0 +1,50 @@
define([
'angular',
'lodash',
],
function (angular, _) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) {
var replacementDefaults = {
type: 'metric query',
datasource: null,
refresh_on_load: false,
name: '',
options: [],
};
$scope.init = function() {
$scope.editor = { index: 0 };
$scope.datasources = datasourceSrv.getMetricSources();
$scope.currentDatasource = _.findWhere($scope.datasources, { default: true });
$scope.templateParameters = $scope.filter.templateParameters;
$scope.reset();
};
$scope.add = function() {
$scope.current.datasource = $scope.currentDatasource.name;
$scope.templateParameters.push($scope.current);
$scope.reset();
};
$scope.reset = function() {
$scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults);
$scope.editor.index = 0;
};
$scope.removeTemplateParam = function(templateParam) {
var index = _.indexOf($scope.templateParameters, templateParam);
$scope.templateParameters.splice(index, 1);
};
$scope.setDatasource = function() {
};
});
});

2
src/app/panels/graph/styleEditor.html
View File

@ -68,7 +68,6 @@
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div>
<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<ul class="grafana-target-controls-left">
@ -103,7 +102,6 @@
</div>
</div>
</div>
</div>
<button class="btn btn-success" style="margin-top: 20px" ng-click="addSeriesOverride()">Add series override rule</button>
</div>

4
src/app/partials/playlist.html
View File

@ -38,8 +38,8 @@
<div class="editor-option">
<div class="span4">
<span><i class="icon-question-sign"></i>
Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite
dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
to mark a dashboard as favorite, use save icon in the menu and in the dropdown select mark as favorite
<br/><br/>
</span>
</div>

81
src/app/partials/templating_editor.html
View File

@ -1,4 +1,4 @@
<div class="dashboard-editor-header">
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="icon icon-code"></i>
Templating
@ -9,15 +9,78 @@
</div>
</div>
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 0">
</div>
<div class="dashboard-editor-body">
<div ng-if="editor.index == 0">
<div class="editor-row">
<div class="span4">
<div ng-if="templateParameters.length === 0">
<em>No replacements defined</em>
</div>
<table class="table table-striped">
<tr ng-repeat="templateParam in templateParameters">
<td>{{templateParam.name}}</td>
<td>{{templateParam.query}}</td>
<td>
<a ng-click="asd">
Edit
</a>
</td>
<td>
<a ng-click="removeTemplateParam(templateParam)">
Remove
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div ng-if="editor.index == 1">
<div class="editor-row">
<div class="editor-option">
<label class="small">Replacement name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
</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>
</div>
<div class="editor-option">
<label class="small">Datasource</label>
<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
</div>
</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>
</div>
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add template replacement</button>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();">Close</button>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();">Close</button>
</div>
<!-- <div class="span4"> -->
<!-- <tip class="info&#45;box"> -->
<!-- <i class="icon&#45;question&#45;sign"></i> -->
<!-- The templating feature in Grafana lets easily create and manage templated queries. Templated queries use [[replacement]] syntax -->
<!-- to replace a part of your metric key or query. By using this feature you can make your dashboards more generic. You can for example create -->
<!-- a query replacement for your cluster name or server name. Then use that replacement in your metric queries and change -->
<!-- it globably for all graphs on the dashboard. -->
<!-- <br/><br/> -->
<!-- </tip> -->
<!-- </div> -->

7
src/app/services/datasourceSrv.js
View File

@ -20,10 +20,12 @@ function (angular, _, config) {
this.init = function() {
_.each(config.datasources, function(value, key) {
datasources[key] = this.datasourceFactory(value);
var ds = this.datasourceFactory(value);
if (value.default) {
this.default = datasources[key];
this.default = ds;
ds.default = true;
}
datasources[key] = ds;
}, this);
if (!this.default) {
@ -37,6 +39,7 @@ function (angular, _, config) {
metricSources.push({
name: value.name,
value: value.default ? null : key,
default: value.default,
});
}
if (value.supportAnnotations) {

9
src/css/less/grafana.less
View File

@ -572,6 +572,15 @@ select.grafana-target-segment-input {
}
}
// .panel-fullscreen {
// .dashboard-editor-header {
// margin-left: -20px;
// margin-right: -20px;
// background: @grayDark;
// padding-left: 20px;
// }
// }
.dashboard-editor-title {
border-bottom: 1px solid @grayDark;
padding-right: 20px;