IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-08-31 19:07:25 +02:00
parent ffbf70af25
commit 822a689b82
4 changed files with 256 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/plugins/datasource/cloudwatch/datasource.js
View File

@@ -5,6 +5,7 @@ define([
'kbn', 'kbn',
'moment', 'moment',
'./queryCtrl', './queryCtrl',
'./directives',
'aws-sdk', 'aws-sdk',
], ],
function (angular, _, kbn) { function (angular, _, kbn) {

13
public/app/plugins/datasource/cloudwatch/directives.js Normal file
View File

@@ -0,0 +1,13 @@
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'};
});
});

26
public/app/plugins/datasource/cloudwatch/partials/config.html
View File

@@ -2,11 +2,11 @@
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 160px">
Default Region Default Region
</li> </li>
<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> </li>
</ul> </ul>
<ul class="tight-form-list"> <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> Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
</li> </li>
<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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form" ng-show="current.jsonData.access === 'direct'"> <div class="tight-form" ng-show="current.jsonData.access === 'direct'">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 160px">
Access Key Id Access Key Id
</li> </li>
<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>
<li class="tight-form-item"> </ul>
Secret Access Key <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>
<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> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 160px">
Custom Metrics Attributes Custom Metric Attributes
</li> </li>
<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> <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>

464
public/app/plugins/datasource/cloudwatch/partials/query.editor.html
View File

@@ -1,241 +1,231 @@
<div class="editor-row" style="margin-top: 10px;"> <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>
<div ng-repeat="target in panel.targets" <ul class="tight-form-list">
style="margin-bottom: 10px;" <li>
ng-class="{'tight-form-disabled': target.hide}" <a class="tight-form-item"
ng-controller="CloudWatchQueryCtrl" ng-click="target.hide = !target.hide; get_data();"
ng-init="init()"> role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
<div class="tight-form"> <ul class="tight-form-list" role="menu">
<ul class="tight-form-list pull-right"> <li class="tight-form-item" style="width: 100px">
<li class="tight-form-item"> Namespace
<div class="dropdown"> </li>
<a class="pointer dropdown-toggle" <li>
data-toggle="dropdown" <input type="text"
tabindex="1"> class="input-medium tight-form-input"
<i class="fa fa-bars"></i> ng-model="target.namespace"
</a> spellcheck='false'
<ul class="dropdown-menu pull-right" role="menu"> bs-typeahead="suggestNamespace"
<li role="menuitem"> placeholder="namespace"
<a tabindex="1" data-min-length=0 data-items=100
ng-click="duplicate()"> ng-model-onblur
Duplicate ng-change="refreshMetricData()"
</a> >
</li> </li>
<li role="menuitem"> <li class="tight-form-item">
<a tabindex="1" Metric
ng-click="moveMetricQuery($index, $index-1)"> </li>
Move up <li>
</a> <input type="text"
</li> class="input-medium tight-form-input"
<li role="menuitem"> ng-model="target.metricName"
<a tabindex="1" spellcheck='false'
ng-click="moveMetricQuery($index, $index+1)"> bs-typeahead="suggestMetrics"
Move down placeholder="metric name"
</a> data-min-length=0 data-items=100
</li> ng-model-onblur
</ul> ng-change="refreshMetricData()"
</div> >
</li> </li>
<li class="tight-form-item last"> </ul>
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
<ul class="tight-form-list"> <div class="clearfix"></div>
<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> </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>