Merge pull request #17 from ammendonca/HWKINVENT-2-II

HWKINVENT-2: Integrate with hawkular-charts
hawkular · Feb 25, 2015 · 5fe1b3f · 5fe1b3f
2 parents 62c1199 + 6abbf8a
commit 5fe1b3f
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/plugins/inventory/bower.json b/plugins/inventory/bower.json
@@ -27,6 +27,7 @@
     "hawtio-core-dts": "2.0.9",
     "angular-mocks": "~1.3.7",
     "angular-resource": "~1.3.7",
-    "hawkular-ui-services": "https://github.com/hawkular/hawkular-ui-services.git"
+    "hawkular-ui-services": "https://github.com/hawkular/hawkular-ui-services.git",
+    "hawkular-charts": "https://github.com/hawkular/hawkular-charts.git"
   }
 }
diff --git a/plugins/inventory/index.html b/plugins/inventory/index.html
@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="libs/patternfly/dist/css/patternfly.css" />
+    <link rel="stylesheet" href="libs/hawkular-charts/css/hawkular-chart.css" />
 
     <!-- bower:css -->
     <!-- endbower -->
@@ -48,6 +49,12 @@
     <script src="libs/angular-resource/angular-resource.js"></script>
     <script src="libs/hawkular-ui-services/dist/hawkular-ui-service.js"></script>
 
+    <script src="libs/numeral/numeral.js"></script>
+    <script src="libs/moment/moment.js"></script>
+    <script src="libs/d3/d3.js"></script>
+    <script src="libs/d3-tip/index.js"></script>
+    <script src="libs/hawkular-charts/hawkular-charts.js"></script>
+
   </head>
 
   <body>

diff --git a/plugins/inventory/plugins/inventory/html/inventory.html b/plugins/inventory/plugins/inventory/html/inventory.html
@@ -14,7 +14,7 @@ <h3 class="panel-title"><i class="fa fa-user"></i> Tenant</h3>
                         <div class="form-group has-clear">
                             <div class="search-pf-input-group">
                                 <label for="tenantId" class="sr-only">Tenant</label>
-                                <input id="tenantId" type="search" class="form-control" placeholder="Tenant ID" ng-model="tenantId" ng-enter="queryResources()" autofocus>
+                                <input id="tenantId" type="search" class="form-control" placeholder="Tenant ID" ng-model="tenantId" autofocus>
                                 <button type="button" class="clear" aria-hidden="true" ng-click="tenantId = ''"><span class="pficon pficon-close"></span></button>
                             </div>
                         </div>
@@ -92,12 +92,10 @@ <h1>Resources</h1>
         <div class="col-md-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <h3 class="panel-title">{{metricData.tenantId}} / {{metricData.resourceId}} / {{metricData.metricId}} <span class="pull-right" ng-click="closeChart()"><i class="pficon pficon-close"></i></span></h3>
+                    <h3 class="panel-title">{{metricData.tenantId}} / {{metricData.name}} <span class="pull-right" ng-click="closeChart()"><i class="pficon pficon-close"></i></span></h3>
                 </div>
-                <div class="panel-body">
-                    <div class="text-center">
-                        <i class="fa fa-area-chart" style="font-size: 33em; color: #199DDE;"></i><i class="fa fa-area-chart fa-flip-horizontal" style="font-size: 33em; color: #199DDE;"></i>
-                    </div>
+                <div class="panel-body" style="height: 280px;">
+                  <hawkular-chart data="{{metricData.data}}" chart-type="bar" chart-height="250" chart-width="1000px"></hawkular-chart>
                 </div>
             </div>
         </div>

diff --git a/plugins/inventory/plugins/inventory/ts/inventory.ts b/plugins/inventory/plugins/inventory/ts/inventory.ts
@@ -16,7 +16,7 @@
 /// <reference path="inventoryPlugin.ts"/>
 module Inventory {
 
-  export var InventoryController = _module.controller("Inventory.InventoryController", ['$scope', '$rootScope', 'HawkularInventory', ($scope, $rootScope, hkInventory) => {
+  export var InventoryController = _module.controller("Inventory.InventoryController", ['$scope', '$rootScope', 'HawkularInventory', 'HawkularMetric' ,($scope, $rootScope, hkInventory, hkMetric) => {
 
       $scope.queryResources = function() {
         if(this.tenantId) {
@@ -39,10 +39,9 @@ module Inventory {
         var _resourceId = resourceId || this.resourceId;
         var _metricId = metricId || this.metricId;
         if(_tenantId && _resourceId && _metricId) {
-            $rootScope.metricData = hkInventory.Metric.query({tenantId: _tenantId, resourceId: _resourceId, metricId: _metricId});
-            $rootScope.metricData.tenantId = _tenantId;
-            $rootScope.metricData.resourceId = _resourceId;
-            $rootScope.metricData.metricId = _metricId;
+          hkMetric.NumericMetricData.get({tenantId: _tenantId, numericId: _metricId, buckets: 60}, function (data) {
+            $rootScope.metricData = data;
+          });
         }
       };
 

diff --git a/plugins/inventory/plugins/inventory/ts/inventoryPlugin.ts b/plugins/inventory/plugins/inventory/ts/inventoryPlugin.ts
@@ -17,7 +17,7 @@
 /// <reference path="inventoryGlobals.ts"/>
 module Inventory {
 
-    export var _module = angular.module(Inventory.pluginName, ['ngResource','hawkular.services']);
+    export var _module = angular.module(Inventory.pluginName, ['ngResource','hawkular.services','hawkularCharts']);
 
     var tab = undefined;