From 822a689b82420236d3c9271ec086940bdcb988ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 31 Aug 2015 19:07:25 +0200
Subject: [PATCH] datasource(cloudwatch): began on polishing cloudwatch
 datasource, #684, #2445

---
 .../datasource/cloudwatch/datasource.js       |   1 +
 .../datasource/cloudwatch/directives.js       |  13 +
 .../cloudwatch/partials/config.html           |  26 +-
 .../cloudwatch/partials/query.editor.html     | 464 +++++++++---------
 4 files changed, 256 insertions(+), 248 deletions(-)
 create mode 100644 public/app/plugins/datasource/cloudwatch/directives.js

diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js
index 404c5deb72d..1dc87def301 100644
--- a/public/app/plugins/datasource/cloudwatch/datasource.js
+++ b/public/app/plugins/datasource/cloudwatch/datasource.js
@@ -5,6 +5,7 @@ define([
   'kbn',
   'moment',
   './queryCtrl',
+  './directives',
   'aws-sdk',
 ],
 function (angular, _, kbn) {
diff --git a/public/app/plugins/datasource/cloudwatch/directives.js b/public/app/plugins/datasource/cloudwatch/directives.js
new file mode 100644
index 00000000000..c758aa34e5c
--- /dev/null
+++ b/public/app/plugins/datasource/cloudwatch/directives.js
@@ -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'};
+  });
+
+});
diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html
index 6308fed2281..220e2efce7f 100644
--- a/public/app/plugins/datasource/cloudwatch/partials/config.html
+++ b/public/app/plugins/datasource/cloudwatch/partials/config.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>
diff --git a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
index 3fb8aa955ea..54f5467d4b7 100644
--- a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
+++ b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
@@ -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"
-       style="margin-bottom: 10px;"
-       ng-class="{'tight-form-disabled': target.hide}"
-       ng-controller="CloudWatchQueryCtrl"
-       ng-init="init()">
+	<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>
 
-    <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" 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>
 
-      <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="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>
+