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

public/app/plugins/datasource/cloudwatch/datasource.js

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

public/app/plugins/datasource/cloudwatch/directives.js

+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'};
+  });
+
+});

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">
+  </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>

public/app/plugins/datasource/cloudwatch/partials/query.editor.html

-<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">
+<div class="tight-form">
 	<ul class="tight-form-list pull-right">
 		<li class="tight-form-item">
 			<div class="dropdown">
@@ -88,9 +80,9 @@
 	</ul>
 
 	<div class="clearfix"></div>
-    </div>
+</div>
 
-    <div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
 		<li class="tight-form-item">
 			<i class="fa fa-eye invisible"></i>
@@ -134,9 +126,9 @@
 	</ul>
 
 	<div class="clearfix"></div>
-    </div>
+</div>
 
-    <div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
 		<li class="tight-form-item">
 			<i class="fa fa-eye invisible"></i>
@@ -163,9 +155,9 @@
 	</ul>
 
 	<div class="clearfix"></div>
-    </div>
+</div>
 
-    <div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
 		<li class="tight-form-item">
 			<i class="fa fa-eye invisible"></i>
@@ -209,9 +201,9 @@
 	</ul>
 
 	<div class="clearfix"></div>
-    </div>
+</div>
 
-    <div class="tight-form">
+<div class="tight-form">
 	<ul class="tight-form-list" role="menu">
 		<li class="tight-form-item">
 			<i class="fa fa-eye invisible"></i>
@@ -235,7 +227,5 @@
 	</ul>
 
 	<div class="clearfix"></div>
-    </div>
-
-  </div>
 </div>
+