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