mirror of https://github.com/grafana/grafana
Mitsuhiro Tanda
10 years ago
parent
6fa5e681aa
commit
d302c82c82
@ -1,41 +1 @@ |
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<div class="editor-option"> |
||||
<label class="small">Region</label> |
||||
<input type="text" class="input-medium" ng-model='currentAnnotation.region' placeholder="us-east-1"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Namespace</label> |
||||
<input type="text" class="input-medium" ng-model='currentAnnotation.namespace' placeholder="AWS/EC2"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Metric name</label> |
||||
<input type="text" class="input-large" ng-model='currentAnnotation.metricName' placeholder="CPUUtilization"></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<div class="editor-option"> |
||||
<label class="small">Dimensions</label> |
||||
<input type="text" class="input-large" ng-model='currentAnnotation.dimensions' placeholder="InstanceId=i-12345678"></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<div class="editor-option"> |
||||
<label class="small">Statistic</label> |
||||
<input type="text" class="input-small" ng-model='currentAnnotation.statistic' placeholder="Average"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Period</label> |
||||
<input type="text" class="input-mini" ng-model='currentAnnotation.period' placeholder="300"></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<cloudwatch-query-parameter target="currentAnnotation" datasource-name="{{currentAnnotation.datasource}}"></cloudwatch-query-parameter> |
||||
|
||||
@ -0,0 +1,53 @@ |
||||
<div class="tight-form"> |
||||
<ul class="tight-form-list" role="menu"> |
||||
<li class="tight-form-item query-keyword tight-form-align" style="width: 100px"> |
||||
Metric |
||||
</li> |
||||
<li> |
||||
<metric-segment segment="regionSegment" get-options="getRegions()" on-change="regionChanged()"></metric-segment> |
||||
</li> |
||||
<li> |
||||
<metric-segment segment="namespaceSegment" get-options="getNamespaces()" on-change="namespaceChanged()"></metric-segment> |
||||
</li> |
||||
<li> |
||||
<metric-segment segment="metricSegment" get-options="getMetrics()" on-change="metricChanged()"></metric-segment> |
||||
</li> |
||||
<li class="tight-form-item query-keyword"> |
||||
Stats |
||||
</li> |
||||
<li ng-repeat="segment in statSegments"> |
||||
<metric-segment segment="segment" get-options="getStatSegments(segment, $index)" on-change="statSegmentChanged(segment, $index)"></metric-segment> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
|
||||
<div class="tight-form"> |
||||
<ul class="tight-form-list" role="menu"> |
||||
<li class="tight-form-item query-keyword tight-form-align" style="width: 100px"> |
||||
Dimensions |
||||
</li> |
||||
<li ng-repeat="segment in dimSegments"> |
||||
<metric-segment segment="segment" get-options="getDimSegments(segment, $index)" on-change="dimSegmentChanged(segment, $index)"></metric-segment> |
||||
</li> |
||||
</ul> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
|
||||
<div class="tight-form"> |
||||
<ul class="tight-form-list" role="menu"> |
||||
<li class="tight-form-item query-keyword tight-form-align" style="width: 100px"> |
||||
Period |
||||
<tip>Interval between points in seconds</tip> |
||||
</li> |
||||
<li> |
||||
<input type="text" class="input-mini tight-form-input" ng-model="target.period" spellcheck='false' placeholder="auto" ng-model-onblur ng-change="refreshMetricData()" /> |
||||
</li> |
||||
|
||||
</ul> |
||||
|
||||
<div class="clearfix"></div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,192 @@ |
||||
define([ |
||||
'angular', |
||||
'lodash', |
||||
], |
||||
function (angular, _) { |
||||
'use strict'; |
||||
|
||||
var module = angular.module('grafana.controllers'); |
||||
|
||||
module.controller('CloudWatchQueryParameterCtrl', function($scope, templateSrv, uiSegmentSrv, datasourceSrv, $q) { |
||||
|
||||
$scope.init = function() { |
||||
var target = $scope.target; |
||||
target.namespace = target.namespace || ''; |
||||
target.metricName = target.metricName || ''; |
||||
target.statistics = target.statistics || ['Average']; |
||||
target.dimensions = target.dimensions || {}; |
||||
target.period = target.period || ''; |
||||
target.region = target.region || ''; |
||||
|
||||
$scope.regionSegment = uiSegmentSrv.getSegmentForValue($scope.target.region, 'select region'); |
||||
$scope.namespaceSegment = uiSegmentSrv.getSegmentForValue($scope.target.namespace, 'select namespace'); |
||||
$scope.metricSegment = uiSegmentSrv.getSegmentForValue($scope.target.metricName, 'select metric'); |
||||
|
||||
$scope.dimSegments = _.reduce($scope.target.dimensions, function(memo, value, key) { |
||||
memo.push(uiSegmentSrv.newKey(key)); |
||||
memo.push(uiSegmentSrv.newOperator("=")); |
||||
memo.push(uiSegmentSrv.newKeyValue(value)); |
||||
return memo; |
||||
}, []); |
||||
|
||||
$scope.statSegments = _.map($scope.target.statistics, function(stat) { |
||||
return uiSegmentSrv.getSegmentForValue(stat); |
||||
}); |
||||
|
||||
$scope.ensurePlusButton($scope.statSegments); |
||||
$scope.ensurePlusButton($scope.dimSegments); |
||||
$scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'}); |
||||
$scope.removeStatSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove stat --'}); |
||||
|
||||
datasourceSrv.get($scope.datasourceName).then(function(datasource) { |
||||
$scope.datasource = datasource; |
||||
if (_.isEmpty($scope.target.region)) { |
||||
$scope.target.region = $scope.datasource.getDefaultRegion(); |
||||
} |
||||
}); |
||||
|
||||
if (!$scope.onChange) { |
||||
$scope.onChange = function() {}; |
||||
} |
||||
}; |
||||
|
||||
$scope.getStatSegments = function() { |
||||
return $q.when([ |
||||
angular.copy($scope.removeStatSegment), |
||||
uiSegmentSrv.getSegmentForValue('Average'), |
||||
uiSegmentSrv.getSegmentForValue('Maximum'), |
||||
uiSegmentSrv.getSegmentForValue('Minimum'), |
||||
uiSegmentSrv.getSegmentForValue('Sum'), |
||||
uiSegmentSrv.getSegmentForValue('SampleCount'), |
||||
]); |
||||
}; |
||||
|
||||
$scope.statSegmentChanged = function(segment, index) { |
||||
if (segment.value === $scope.removeStatSegment.value) { |
||||
$scope.statSegments.splice(index, 1); |
||||
} else { |
||||
segment.type = 'value'; |
||||
} |
||||
|
||||
$scope.target.statistics = _.reduce($scope.statSegments, function(memo, seg) { |
||||
if (!seg.fake) { memo.push(seg.value); } return memo; |
||||
}, []); |
||||
|
||||
$scope.ensurePlusButton($scope.statSegments); |
||||
$scope.onChange(); |
||||
}; |
||||
|
||||
$scope.ensurePlusButton = function(segments) { |
||||
var count = segments.length; |
||||
var lastSegment = segments[Math.max(count-1, 0)]; |
||||
|
||||
if (!lastSegment || lastSegment.type !== 'plus-button') { |
||||
segments.push(uiSegmentSrv.newPlusButton()); |
||||
} |
||||
}; |
||||
|
||||
$scope.getDimSegments = function(segment, $index) { |
||||
if (segment.type === 'operator') { return $q.when([]); } |
||||
|
||||
var target = $scope.target; |
||||
var query = $q.when([]); |
||||
|
||||
if (segment.type === 'key' || segment.type === 'plus-button') { |
||||
query = $scope.datasource.getDimensionKeys($scope.target.namespace); |
||||
} else if (segment.type === 'value') { |
||||
var dimensionKey = $scope.dimSegments[$index-2].value; |
||||
query = $scope.datasource.getDimensionValues(target.region, target.namespace, target.metricName, dimensionKey, {}); |
||||
} |
||||
|
||||
return query.then($scope.transformToSegments(true)).then(function(results) { |
||||
if (segment.type === 'key') { |
||||
results.splice(0, 0, angular.copy($scope.removeDimSegment)); |
||||
} |
||||
return results; |
||||
}); |
||||
}; |
||||
|
||||
$scope.dimSegmentChanged = function(segment, index) { |
||||
$scope.dimSegments[index] = segment; |
||||
|
||||
if (segment.value === $scope.removeDimSegment.value) { |
||||
$scope.dimSegments.splice(index, 3); |
||||
} |
||||
else if (segment.type === 'plus-button') { |
||||
$scope.dimSegments.push(uiSegmentSrv.newOperator('=')); |
||||
$scope.dimSegments.push(uiSegmentSrv.newFake('select dimension value', 'value', 'query-segment-value')); |
||||
segment.type = 'key'; |
||||
segment.cssClass = 'query-segment-key'; |
||||
} |
||||
|
||||
$scope.syncDimSegmentsWithModel(); |
||||
$scope.ensurePlusButton($scope.dimSegments); |
||||
$scope.onChange(); |
||||
}; |
||||
|
||||
$scope.syncDimSegmentsWithModel = function() { |
||||
var dims = {}; |
||||
var length = $scope.dimSegments.length; |
||||
|
||||
for (var i = 0; i < length - 2; i += 3) { |
||||
var keySegment = $scope.dimSegments[i]; |
||||
var valueSegment = $scope.dimSegments[i + 2]; |
||||
if (!valueSegment.fake) { |
||||
dims[keySegment.value] = valueSegment.value; |
||||
} |
||||
} |
||||
|
||||
$scope.target.dimensions = dims; |
||||
}; |
||||
|
||||
$scope.getRegions = function() { |
||||
return $scope.datasource.metricFindQuery('regions()') |
||||
.then($scope.transformToSegments(true)); |
||||
}; |
||||
|
||||
$scope.getNamespaces = function() { |
||||
return $scope.datasource.metricFindQuery('namespaces()') |
||||
.then($scope.transformToSegments(true)); |
||||
}; |
||||
|
||||
$scope.getMetrics = function() { |
||||
return $scope.datasource.metricFindQuery('metrics(' + $scope.target.namespace + ')') |
||||
.then($scope.transformToSegments(true)); |
||||
}; |
||||
|
||||
$scope.regionChanged = function() { |
||||
$scope.target.region = $scope.regionSegment.value; |
||||
$scope.onChange(); |
||||
}; |
||||
|
||||
$scope.namespaceChanged = function() { |
||||
$scope.target.namespace = $scope.namespaceSegment.value; |
||||
$scope.onChange(); |
||||
}; |
||||
|
||||
$scope.metricChanged = function() { |
||||
$scope.target.metricName = $scope.metricSegment.value; |
||||
$scope.onChange(); |
||||
}; |
||||
|
||||
$scope.transformToSegments = function(addTemplateVars) { |
||||
return function(results) { |
||||
var segments = _.map(results, function(segment) { |
||||
return uiSegmentSrv.newSegment({ value: segment.text, expandable: segment.expandable }); |
||||
}); |
||||
|
||||
if (addTemplateVars) { |
||||
_.each(templateSrv.variables, function(variable) { |
||||
segments.unshift(uiSegmentSrv.newSegment({ type: 'template', value: '$' + variable.name, expandable: true })); |
||||
}); |
||||
} |
||||
|
||||
return segments; |
||||
}; |
||||
}; |
||||
|
||||
$scope.init(); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
Loading…
Reference in new issue