Add generic graph to service detail page

Change-Id: I2842b21a170cad2cf790d20886de514be14a819b

app/components/service/service.html

@@ -6,6 +6,8 @@
 
     <bansho-service-info service='service'></bansho-service-info>
 
+    <bansho-service-graphs service='service'></bansho-service-graphs>
+
     <!-- <bansho-service-metrics service='service'></bansho-service-metrics> -->
   </section>
 </article>

app/components/service/service.js

@@ -5,6 +5,7 @@ angular.module('bansho.service', ['bansho.surveil',
                                    'bansho.service.live',
                                    'bansho.service.info',
                                    'bansho.service.metrics',
+                                   'bansho.service.graphs',
                                    'bansho.table.state_icon'])
 
     .value('serviceConfig', {})

app/components/service/service_graphs/service_graphs.html

@@ -0,0 +1,6 @@
+<div data-ng-repeat="(metric, iframeUrl) in iframeUrls" class="subcomponent__live subcomponent__small">
+  <h2>Graph - {{metric}}</h2>
+  <iframe src="{{iframeUrl}}" width="450" height="200" frameborder="0"></iframe>
+  <table class="data-table">
+  </table>
+</div>

app/components/service/service_graphs/service_graphs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+angular.module('bansho.service.graphs', [])
+
+    .controller('ServiceGraphsCtrl', ['$scope', 'surveilStatus', 'iframeUrl', function ($scope, surveilStatus, iframeUrl) {
+        $scope.$watch('service', function(service) {
+            if (service) {
+                surveilStatus.getServiceMetricNames(service.host_name, service.service_description).then(function(metric_names){
+                    $scope.iframeUrls = {};
+                    angular.forEach(metric_names, function (metric) {
+                        var metricName = metric.metric_name.substr(7);
+                        $scope.iframeUrls[metricName] = iframeUrl.getIFrameUrl(metric.metric_name, service.host_name, service.service_description);
+                    })
+                })
+            }
+        })
+    }])
+
+    .directive('banshoServiceGraphs', ['iframeUrl', function (iframeUrl) {
+        return {
+            restrict: 'E',
+            scope: {
+              service: '=service'
+            },
+            controller: 'ServiceGraphsCtrl',
+            templateUrl: 'components/service/service_graphs/service_graphs.html'
+        };
+    }]);

app/components/surveil/status.js

@@ -64,6 +64,33 @@ angular.module('bansho.surveil')
                 return responsePromise.promise;
             };
 
+            var getMetricNames = function (host, service) {
+                var url = '/surveil/v2/status/hosts/' + host,
+                    responsePromise = $q.defer();
+
+                if (service !== undefined) {
+                    url += '/services/' + service;
+                }
+
+                url += '/metrics/';
+
+                $http.get(url).success(function (metrics) {
+                    var result = [];
+                    for (var i = 0; i < metrics.length; i += 1) {
+                        if (metrics[i].metric_name.indexOf("metric_") === 0)  {
+                            result.push(metrics[i]);
+                        }
+                    }
+
+                    responsePromise.resolve(result);
+                })
+                .error(function () {
+                    throw new Error('getMetricNames: GET Request failed');
+                });
+
+                return responsePromise.promise;
+            };
+
             var getService = function (hostName, description) {
                 var fields = [],
                     filters = {
@@ -220,10 +247,18 @@ angular.module('bansho.surveil')
                 return getMetric(host, undefined, metric);
             };
 
+            var getHostMetricNames = function (host, metric) {
+                return getMetricNames(host, undefined);
+            };
+
             var getServiceMetric = function (host, service, metric) {
                 return getMetric(host, service, metric);
             };
 
+            var getServiceMetricNames = function (host, service) {
+                return getMetricNames(host, service);
+            };
+
             var hostQueryTransform = function (fields, filters) {
                 var i,
                     transformations = {
@@ -381,6 +416,8 @@ angular.module('bansho.surveil')
                 getTotalServices: getTotalServices,
                 getServicesByHost: getServicesByHost,
                 getHostMetric: getHostMetric,
-                getServiceMetric: getServiceMetric
+                getHostMetricNames: getHostMetricNames,
+                getServiceMetric: getServiceMetric,
+                getServiceMetricNames: getServiceMetricNames
             };
         }]);

app/index.html

@@ -84,6 +84,7 @@
     <script src="components/service/service_main/service_main.js"></script>
     <script src="components/service/service_live/service_live.js"></script>
     <script src="components/service/service_info/service_info.js"></script>
+    <script src="components/service/service_graphs/service_graphs.js"></script>
     <script src="components/service/service_metrics/service_metrics.js"></script>
     <script src="components/drupal/drupal.js"></script>
     <script src="components/drupal/drupal_tile/drupal_tile.js"></script>