feat(plugins): updated cloudwatch to new plugin style

This commit is contained in:
Torkel Ödegaard
2016-01-14 15:15:45 +01:00
parent c4ce3293a2
commit 8699d49f93
9 changed files with 47 additions and 53 deletions

View File

@@ -28,7 +28,7 @@ class DynamicDirectiveSrv {
directiveInfo.fn.registered = true; directiveInfo.fn.registered = true;
} }
this.addDirective(elem, directiveInfo.name, directiveInfo.scope || scope); this.addDirective(elem, directiveInfo.name, scope);
}).catch(err => { }).catch(err => {
console.log('Plugin load:', err); console.log('Plugin load:', err);
this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]); this.$rootScope.appEvent('alert-error', ['Plugin error', err.toString()]);
@@ -41,7 +41,14 @@ class DynamicDirectiveSrv {
scope: options.scope, scope: options.scope,
link: (scope, elem, attrs) => { link: (scope, elem, attrs) => {
if (options.watch) { if (options.watch) {
scope.$watch(options.watch,() => this.link(scope, elem, attrs, options)); let childScope = null;
scope.$watch(options.watch, () => {
if (childScope) {
childScope.$destroy();
}
childScope = scope.$new();
this.link(childScope, elem, attrs, options);
});
} else { } else {
this.link(scope, elem, attrs, options); this.link(scope, elem, attrs, options);
} }

View File

@@ -31,10 +31,10 @@ function (angular, _, $) {
}; };
$scope.datasourceChanged = function() { $scope.datasourceChanged = function() {
$scope.currentDatasource = _.findWhere($scope.datasources, { name: $scope.currentAnnotation.datasource }); datasourceSrv.get($scope.currentAnnotation.datasource).then(function(ds) {
if (!$scope.currentDatasource) { $scope.currentDatasource = ds;
$scope.currentDatasource = $scope.datasources[0]; $scope.currentAnnotation.datasource = ds.name;
} });
}; };
$scope.edit = function(annotation) { $scope.edit = function(annotation) {
@@ -50,7 +50,6 @@ function (angular, _, $) {
$scope.currentAnnotation = angular.copy(annotationDefaults); $scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentIsNew = true; $scope.currentIsNew = true;
$scope.datasourceChanged(); $scope.datasourceChanged();
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
}; };
$scope.update = function() { $scope.update = function() {

View File

@@ -8,21 +8,13 @@ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) {
watch: "panel.datasource", watch: "panel.datasource",
directive: scope => { directive: scope => {
let datasource = scope.target.datasource || scope.panel.datasource; let datasource = scope.target.datasource || scope.panel.datasource;
let editorScope = null;
return datasourceSrv.get(datasource).then(ds => { return datasourceSrv.get(datasource).then(ds => {
if (editorScope) { scope.datasource = ds;
editorScope.$destroy();
}
editorScope = scope.$new();
editorScope.datasource = ds;
return System.import(ds.meta.module).then(dsModule => { return System.import(ds.meta.module).then(dsModule => {
return { return {
name: 'metrics-query-editor-' + ds.meta.id, name: 'metrics-query-editor-' + ds.meta.id,
fn: dsModule.metricsQueryEditor, fn: dsModule.metricsQueryEditor,
scope: editorScope,
}; };
}); });
}); });

View File

@@ -3,7 +3,6 @@ define([
'lodash', 'lodash',
'moment', 'moment',
'app/core/utils/datemath', 'app/core/utils/datemath',
'./query_ctrl',
], ],
function (angular, _, moment, dateMath) { function (angular, _, moment, dateMath) {
'use strict'; 'use strict';

View File

@@ -1,33 +1,18 @@
define([ define([
'angular',
'./datasource', './datasource',
'./query_parameter_ctrl', './query_parameter_ctrl',
'./query_ctrl',
], ],
function (angular, CloudWatchDatasource) { function (CloudWatchDatasource) {
'use strict'; 'use strict';
var module = angular.module('grafana.directives'); function metricsQueryEditor() {
module.directive('metricQueryEditorCloudwatch', function() {
return {controller: 'CloudWatchQueryCtrl', templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.editor.html'}; return {controller: 'CloudWatchQueryCtrl', templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.editor.html'};
}); }
module.directive('annotationsQueryEditorCloudwatch', function() { function annotationsQueryEditor() {
return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/annotations.editor.html'}; return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/annotations.editor.html'};
}); }
module.directive('cloudwatchQueryParameter', function() {
return {
templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
controller: 'CloudWatchQueryParameterCtrl',
restrict: 'E',
scope: {
target: "=",
datasourceName: "@",
onChange: "&",
}
};
});
function configView() { function configView() {
return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/edit_view.html'}; return {templateUrl: 'app/plugins/datasource/cloudwatch/partials/edit_view.html'};
@@ -36,5 +21,7 @@ function (angular, CloudWatchDatasource) {
return { return {
Datasource: CloudWatchDatasource, Datasource: CloudWatchDatasource,
configView: configView, configView: configView,
annotationsQueryEditor: annotationsQueryEditor,
metricsQueryEditor: metricsQueryEditor,
}; };
}); });

View File

@@ -1 +1 @@
<cloudwatch-query-parameter target="currentAnnotation" datasource-name="{{currentAnnotation.datasource}}"></cloudwatch-query-parameter> <cloudwatch-query-parameter target="annotation" datasource="datasource"></cloudwatch-query-parameter>

View File

@@ -35,4 +35,4 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<cloudwatch-query-parameter target="target" datasource-name="{{datasource.name}}" on-change="refreshMetricData()"></cloudwatch-query-parameter> <cloudwatch-query-parameter target="target" datasource="datasource" on-change="refreshMetricData()"></cloudwatch-query-parameter>

View File

@@ -7,6 +7,19 @@ function (angular, _) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.directive('cloudwatchQueryParameter', function() {
return {
templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.parameter.html',
controller: 'CloudWatchQueryParameterCtrl',
restrict: 'E',
scope: {
target: "=",
datasource: "=",
onChange: "&",
}
};
});
module.controller('CloudWatchQueryParameterCtrl', function($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) { module.controller('CloudWatchQueryParameterCtrl', function($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) {
$scope.init = function() { $scope.init = function() {
@@ -38,12 +51,9 @@ function (angular, _) {
$scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'}); $scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'});
$scope.removeStatSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove stat --'}); $scope.removeStatSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove stat --'});
datasourceSrv.get($scope.datasourceName).then(function(datasource) { if (_.isEmpty($scope.target.region)) {
$scope.datasource = datasource; $scope.target.region = $scope.datasource.getDefaultRegion();
if (_.isEmpty($scope.target.region)) { }
$scope.target.region = $scope.datasource.getDefaultRegion();
}
});
if (!$scope.onChange) { if (!$scope.onChange) {
$scope.onChange = function() {}; $scope.onChange = function() {};

View File

@@ -1,14 +1,14 @@
<div class="editor-row"> <div class="editor-row">
<div class="section" ng-if="currentAnnotation.index"> <div class="section" ng-if="annotation.index">
<h5>Index name</h5> <h5>Index name</h5>
<div class="editor-option"> <div class="editor-option">
<input type="text" class="span4" ng-model='currentAnnotation.index' placeholder="events-*"></input> <input type="text" class="span4" ng-model='annotation.index' placeholder="events-*"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5> <h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
<div class="editor-option"> <div class="editor-option">
<input type="text" class="span6" ng-model='currentAnnotation.query' placeholder="tags:deploy"></input> <input type="text" class="span6" ng-model='annotation.query' placeholder="tags:deploy"></input>
</div> </div>
</div> </div>
</div> </div>
@@ -18,22 +18,22 @@
<h5>Field mappings</h5> <h5>Field mappings</h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">Time</label> <label class="small">Time</label>
<input type="text" class="input-small" ng-model='currentAnnotation.timeField' placeholder="@timestamp"></input> <input type="text" class="input-small" ng-model='annotation.timeField' placeholder="@timestamp"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Title</label> <label class="small">Title</label>
<input type="text" class="input-small" ng-model='currentAnnotation.titleField' placeholder="desc"></input> <input type="text" class="input-small" ng-model='annotation.titleField' placeholder="desc"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Tags</label> <label class="small">Tags</label>
<input type="text" class="input-small" ng-model='currentAnnotation.tagsField' placeholder="tags"></input> <input type="text" class="input-small" ng-model='annotation.tagsField' placeholder="tags"></input>
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Text</label> <label class="small">Text</label>
<input type="text" class="input-small" ng-model='currentAnnotation.textField' placeholder=""></input> <input type="text" class="input-small" ng-model='annotation.textField' placeholder=""></input>
</div> </div>
</div> </div>
</div> </div>