Commit 822a689b by Torkel Ödegaard

datasource(cloudwatch): began on polishing cloudwatch datasource, #684, #2445

parent ffbf70af
......@@ -5,6 +5,7 @@ define([
'kbn',
'moment',
'./queryCtrl',
'./directives',
'aws-sdk',
],
function (angular, _, kbn) {
......
define([
'angular',
],
function (angular) {
'use strict';
var module = angular.module('grafana.directives');
module.directive('metricQueryEditorCloudwatch', function() {
return {controller: 'CloudWatchQueryCtrl', templateUrl: 'app/plugins/datasource/cloudwatch/partials/query.editor.html'};
});
});
......@@ -2,11 +2,11 @@
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<li class="tight-form-item" style="width: 160px">
Default Region
</li>
<li>
<input type="text" class="tight-form-input input-large" ng-model='current.jsonData.defaultRegion' placeholder="" required></input>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.jsonData.defaultRegion' placeholder="" required></input>
</li>
</ul>
<ul class="tight-form-list">
......@@ -14,33 +14,37 @@
Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
</li>
<li>
<select class="input-medium tight-form-input" ng-model="current.jsonData.access" ng-options="f for f in ['direct', 'proxy']" ng-init="current.jsonData.access = current.jsonData.access || 'direct'"></select>
<select class="input-small tight-form-input" ng-model="current.jsonData.access" ng-options="f for f in ['direct', 'proxy']" ng-init="current.jsonData.access = current.jsonData.access || 'direct'"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-show="current.jsonData.access === 'direct'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<li class="tight-form-item" style="width: 160px">
Access Key Id
</li>
<li>
<input type="text" class="tight-form-input input-large" ng-model='current.jsonData.accessKeyId' placeholder="" ng-required="current.jsonData.access === 'direct'"></input>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.jsonData.accessKeyId' placeholder="" ng-required="current.jsonData.access === 'direct'"></input>
</li>
<li class="tight-form-item">
Secret Access Key
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
Secret Access Key
</li>
<li>
<input type="password" class="tight-form-input input-large" ng-model='current.jsonData.secretAccessKey' placeholder="" ng-required="current.jsonData.access === 'direct'"></input>
<input type="password" class="tight-form-input input-xlarge" ng-model='current.jsonData.secretAccessKey' placeholder="" ng-required="current.jsonData.access === 'direct'"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Custom Metrics Attributes
<li class="tight-form-item" style="width: 160px">
Custom Metric Attributes
</li>
<li>
<input type="text" class="tight-form-input input-xlarge" ng-model='current.jsonData.customMetricsAttributes[0]' ng-init="current.jsonData.customMetricsAttributes = current.jsonData.customMetricsAttributes || []" placeholder="JSON url" bs-tooltip="'Set JSON url of the result, \'aws cloudwatch list-metrics --output json\''"></input>
......
<div class="editor-row" style="margin-top: 10px;">
<div ng-repeat="target in panel.targets"
style="margin-bottom: 10px;"
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="CloudWatchQueryCtrl"
ng-init="init()">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li>
<a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 100px">
Namespace
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.namespace"
spellcheck='false'
bs-typeahead="suggestNamespace"
placeholder="namespace"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
<li class="tight-form-item">
Metric
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.metricName"
spellcheck='false'
bs-typeahead="suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Dimensions
</li>
<li ng-repeat="(key, value) in target.escapedDimensions track by $index" class="tight-form-item">
{{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="removeDimension(key)">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="tight-form-item" ng-hide="addDimensionMode">
<a ng-click="addDimension()">
<i class="fa fa-plus"></i>
</a>
</li>
<li ng-show="addDimensionMode">
<input type="text"
class="input-small tight-form-input"
spellcheck='false'
bs-typeahead="suggestDimensionKeys"
data-min-length=0 data-items=100
ng-model="target.currentDimensionKey"
placeholder="key">
<input type="text"
class="input-small tight-form-input"
spellcheck='false'
bs-typeahead="suggestDimensionValues"
data-min-length=0 data-items=100
ng-model="target.currentDimensionValue"
placeholder="value">
<a ng-click="addDimension()">
add dimension
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Statistics
</li>
<li class="tight-form-item">
<editor-checkbox text="Min" model="target.statistics.Minimum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Max" model="target.statistics.Maximum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Avg" model="target.statistics.Average" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Sum" model="target.statistics.Sum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="SampleCount" model="target.statistics.SampleCount" change="statisticsOptionChanged()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Period
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="target.period"
data-placement="right"
spellcheck='false'
placeholder="period"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
/>
<a bs-tooltip="target.errors.period"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.period">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item">
Region
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.region"
spellcheck='false'
bs-typeahead="suggestRegion"
placeholder="region"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item">
Legend Format
</li>
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="target.legendFormat"
spellcheck='false'
placeholder="legend format"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
<tip>Syntax: {{Region}} {{Namespace}} {{MetricName}} {{Statistics}} {{Dimensions[N].Name}} {{Dimensions[N].Value}}</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
</ul>
</div>
</li>
<li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list">
<li>
<a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();"
role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 100px">
Namespace
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.namespace"
spellcheck='false'
bs-typeahead="suggestNamespace"
placeholder="namespace"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
<li class="tight-form-item">
Metric
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.metricName"
spellcheck='false'
bs-typeahead="suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Dimensions
</li>
<li ng-repeat="(key, value) in target.escapedDimensions track by $index" class="tight-form-item">
{{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="removeDimension(key)">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="tight-form-item" ng-hide="addDimensionMode">
<a ng-click="addDimension()">
<i class="fa fa-plus"></i>
</a>
</li>
<li ng-show="addDimensionMode">
<input type="text"
class="input-small tight-form-input"
spellcheck='false'
bs-typeahead="suggestDimensionKeys"
data-min-length=0 data-items=100
ng-model="target.currentDimensionKey"
placeholder="key">
<input type="text"
class="input-small tight-form-input"
spellcheck='false'
bs-typeahead="suggestDimensionValues"
data-min-length=0 data-items=100
ng-model="target.currentDimensionValue"
placeholder="value">
<a ng-click="addDimension()">
add dimension
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Statistics
</li>
<li class="tight-form-item">
<editor-checkbox text="Min" model="target.statistics.Minimum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Max" model="target.statistics.Maximum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Avg" model="target.statistics.Average" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Sum" model="target.statistics.Sum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="SampleCount" model="target.statistics.SampleCount" change="statisticsOptionChanged()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Period
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="target.period"
data-placement="right"
spellcheck='false'
placeholder="period"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
/>
<a bs-tooltip="target.errors.period"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.period">
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item">
Region
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.region"
spellcheck='false'
bs-typeahead="suggestRegion"
placeholder="region"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item">
Legend Format
</li>
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="target.legendFormat"
spellcheck='false'
placeholder="legend format"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
<tip>Syntax: {{Region}} {{Namespace}} {{MetricName}} {{Statistics}} {{Dimensions[N].Name}} {{Dimensions[N].Value}}</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
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