WIP: Add rhqm-charts.

hawkular · Feb 11, 2015 · 077de7e · 077de7e
1 parent 3b5c13b
commit 077de7e
Show file tree

Hide file tree

Showing 9 changed files with 559 additions and 580 deletions.
diff --git a/dist/hawkular-metrics.js b/dist/hawkular-metrics.js
diff --git a/plugins/metrics/bower.json b/plugins/metrics/bower.json
@@ -19,10 +19,12 @@
     "hawtio-utilities": "2.0.16",
     "moment": "2.9.0",
     "angular-bootstrap": "0.11.0",
-    "toastr": "2.0.3",
+    "toastr": "2.1.0",
     "lodash": "2.4.1",
-    "ngstorage": "0.3.0",
-    "rhqm-charts": "0.1.10"
+    "d3": "3.4.8",
+    "moment": "2.9.0",
+    "d3-tip": "0.6.4",
+    "rhqm-charts": "~0.1.10"
   },
   "devDependencies": {
     "bootstrap": "3.3.2",

diff --git a/plugins/metrics/gulpfile.js b/plugins/metrics/gulpfile.js
@@ -46,6 +46,7 @@ var config = {
     js: pkg.name + '.js',
     tsProject: plugins.typescript.createProject({
         target: 'ES5',
+        removeComments: true,
         module: 'commonjs',
         declarationFiles: true,
         noExternalResolve: false
@@ -78,6 +79,12 @@ gulp.task('clean-defs', function () {
 gulp.task('tsc', ['clean-defs'], function () {
     var cwd = process.cwd();
     var tsResult = gulp.src(config.ts)
+        .pipe(plugins.plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
         .pipe(plugins.typescript(config.tsProject))
         .on('error', plugins.notify.onError({
             message: '#{ error.message }',
@@ -86,6 +93,12 @@ gulp.task('tsc', ['clean-defs'], function () {
 
     return eventStream.merge(
         tsResult.js
+            .pipe(plugins.plumber({
+                handleError: function (err) {
+                    console.log(err);
+                    this.emit('end');
+                }
+            }))
             .pipe(plugins.concat('compiled.js'))
             .pipe(gulp.dest('.')),
         tsResult.dts
@@ -116,6 +129,12 @@ gulp.task('tslint-watch', function () {
 
 gulp.task('template', ['tsc'], function () {
     return gulp.src(config.templates)
+        .pipe(plugins.plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
         .pipe(plugins.angularTemplatecache({
             filename: 'templates.js',
             root: 'plugins/',
@@ -129,7 +148,14 @@ gulp.task('template', ['tsc'], function () {
 gulp.task('concat', ['template'], function () {
     var gZipSize = size(gZippedSizeOptions);
     return gulp.src(['compiled.js', 'templates.js'])
+        .pipe(plugins.plumber({
+            handleError: function (err) {
+                console.log(err);
+                this.emit('end');
+            }
+        }))
         .pipe(plugins.concat(config.js))
+        ///.pipe(plugins.ngAnnotate())
         .pipe(size(normalSizeOptions))
         .pipe(gZipSize)
         .pipe(gulp.dest(config.dist))

diff --git a/plugins/metrics/index.html b/plugins/metrics/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
 
-  <head>
+<head>
     <title>hawkular-metrics</title>
     <base href='/'></base>
     <meta charset="UTF8">
 
 
-    <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/bootstrap/dist/css/bootstrap.css"/>
+    <link rel="stylesheet" href="libs/patternfly/dist/css/patternfly.css"/>
+    <link rel="stylesheet" href="libs/rhqm-charts/css/d3-chart.css"/>
 
     <!-- bower:css -->
     <link rel="stylesheet" href="libs/toastr/toastr.css" />
@@ -45,7 +46,6 @@
     <script src="libs/moment/moment.js"></script>
     <script src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="libs/toastr/toastr.js"></script>
-    <script src="libs/ngstorage/ngStorage.js"></script>
     <script src="libs/d3/d3.js"></script>
     <script src="libs/d3-tip/index.js"></script>
     <script src="libs/numeral/numeral.js"></script>
@@ -54,21 +54,22 @@
 
     <script src="libs/bootstrap/dist/js/bootstrap.js"></script>
     <script src="libs/patternfly/dist/js/patternfly.js"></script>
+    <script type="node_modules/angular-hint/hint.js"></script>
 
-  </head>
+</head>
 
-  <body>
-    <nav class="navbar navbar-default navbar-pf" role="navigation">
-      <ul class="nav navbar-nav navbar-primary" hawtio-main-nav></ul>
-      <ul class="nav navbar-nav" hawtio-sub-tabs></ul>
-    </nav>
+<body>
+<nav class="navbar navbar-default navbar-pf" role="navigation">
+    <ul class="nav navbar-nav navbar-primary" hawtio-main-nav></ul>
+    <ul class="nav navbar-nav" hawtio-sub-tabs></ul>
+</nav>
 
-    <div id="main" class="container-fluid ng-cloak" ng-controller="HawtioNav.ViewController">
-      <div ng-include src="viewPartial"></div>
-    </div>
+<div id="main" class="container-fluid ng-cloak" ng-controller="HawtioNav.ViewController">
+    <div ng-include src="viewPartial"></div>
+</div>
 
-    <!-- add any scripts under dist/ here -->
-    <script src="dist/hawkular-metrics.js"></script>
+<!-- add any scripts under dist/ here -->
+<script src="dist/hawkular-metrics.js"></script>
 
-  </body>
+</body>
 </html>
diff --git a/plugins/metrics/package.json b/plugins/metrics/package.json
@@ -11,11 +11,13 @@
     "gulp-concat": "2.4.3",
     "gulp-connect": "2.2.0",
     "gulp-load-plugins": "0.8.0",
+    "gulp-ng-annotate": "0.5.2",
     "gulp-notify": "2.1.0",
+    "gulp-plumber": "0.6.6",
     "gulp-tslint": "1.4.2",
     "gulp-typescript": "2.4.2",
     "gulp-watch": "3.0.0",
-    "through2": "0.6.3",
+    "through2": "^0.6.3",
     "underscore.string": "2.4.0",
     "vinyl-map": "1.0.1",
     "which": "1.0.8",

diff --git a/plugins/metrics/plugins/metrics/html/graphs.html b/plugins/metrics/plugins/metrics/html/graphs.html
@@ -16,6 +16,8 @@
                               ng-show="chartForm.searchId.$dirty && chartForm.searchId.$error.required"> * Required.</span>
                         <span class="help-block">Example: 100, apache3.cpu1  </span>
                     </div>
+                    <h3>{{vm.startTimeStamp}}</h3>
+                    <h3>{{vm.endTimeStamp}}</h3>
                 </div>
 
                 <!--<div class="row">-->
@@ -99,15 +101,13 @@
             </form>
         </div>
 
+
         <div ng-show="vm.chartData.dataPoints.length > 4">
+            <p>Should see chart for: {{vm.chartData.dataPoints.length}} points</p>
             <div id="stackedBarChart" style="height:270px">
                 <!-- HINT: colors for the chart can be changed in the d3-chart.css -->
                 <rhqm-chart
                         data="{{vm.chartData.dataPoints}}"
-                        annotation-data="{{vm.chartData.annotationDataPoints}}"
-                        previous-range-data="{{vm.chartData.prevDataPoints}}"
-                        context-data="{{vm.chartData.contextDataPoints}}"
-                        multi-chart-overlay-data="{{vm.multiChartOverlayData}}"
                         chart-type="{{vm.chartType}}"
                         show-avg-line="{{vm.showAvgLine}}"
                         hide-high-low-values="{{vm.hideHighLowValues}}"

diff --git a/plugins/metrics/plugins/metrics/ts/graphs.ts b/plugins/metrics/plugins/metrics/ts/graphs.ts
@@ -18,12 +18,6 @@
 
 module HawkularMetrics {
 
-  //export var MetricsController = _module.controller("HawkularMetrics.MetricsController", ['$scope', ($scope) => {
-  //  $scope.searchId = "";
-  //
-  //}]);
-
-
     export interface IContextChartDataPoint {
         timestamp: number;
         value: number;
@@ -37,23 +31,23 @@ module HawkularMetrics {
         max: number;
     }
 
-//    export interface IChartParams {
-//        searchId: string;
-//        startTimeStamp: Date;
-//        endTimeStamp: Date;
-//        dateRange: string;
-//        updateEndTimeStampToNow: boolean;
-//        collapseTable: boolean;
-//        tableButtonLabel:  string;
-//        showAvgLine: boolean;
-//        hideHighLowValues:boolean;
-//        showPreviousRangeDataOverlay: boolean;
-//        showContextZoom: boolean;
-//        showAutoRefreshCancel:boolean;
-//        chartType: string;
-//        chartTypes: string[];
-//
-//    }
+///    export interface IChartParams {
+///        searchId: string;
+///        startTimeStamp: Date;
+///        endTimeStamp: Date;
+///        dateRange: string;
+///        updateEndTimeStampToNow: boolean;
+///        collapseTable: boolean;
+///        tableButtonLabel:  string;
+///        showAvgLine: boolean;
+///        hideHighLowValues:boolean;
+///        showPreviousRangeDataOverlay: boolean;
+///        showContextZoom: boolean;
+///        showAutoRefreshCancel:boolean;
+///        chartType: string;
+///        chartTypes: string[];
+///
+///    }
     export interface IChartController {
         searchId: string;
         startTimeStamp: Date;
@@ -101,7 +95,7 @@ module HawkularMetrics {
      * @param metricDataService
      */
     export class ChartController implements IChartController {
-        public static  $inject = ['$scope', '$rootScope', '$interval', '$log', 'metricDataService' ];
+        public static  $inject = ['$scope', '$rootScope', '$interval', '$log', 'metricDataService'];
 
         searchId = '';
         updateEndTimeStampToNow = false;
@@ -116,15 +110,15 @@ module HawkularMetrics {
         chartTypes:string[] = ['bar', 'line', 'area', 'scatter', 'scatterline', 'candlestick', 'histogram'];
 
         dateTimeRanges:IDateTimeRangeDropDown[] = [
-            { 'range': '1h', 'rangeInSeconds': 60 * 60 } ,
-            { 'range': '4h', 'rangeInSeconds': 4 * 60 * 60 } ,
-            { 'range': '8h', 'rangeInSeconds': 8 * 60 * 60 },
-            { 'range': '12h', 'rangeInSeconds': 12 * 60 * 60 },
-            { 'range': '1d', 'rangeInSeconds': 24 * 60 * 60 },
-            { 'range': '5d', 'rangeInSeconds': 5 * 24 * 60 * 60 },
-            { 'range': '1m', 'rangeInSeconds': 30 * 24 * 60 * 60 },
-            { 'range': '3m', 'rangeInSeconds': 3 * 30 * 24 * 60 * 60 },
-            { 'range': '6m', 'rangeInSeconds': 6 * 30 * 24 * 60 * 60 }
+            {'range': '1h', 'rangeInSeconds': 60 * 60},
+            {'range': '4h', 'rangeInSeconds': 4 * 60 * 60},
+            {'range': '8h', 'rangeInSeconds': 8 * 60 * 60},
+            {'range': '12h', 'rangeInSeconds': 12 * 60 * 60},
+            {'range': '1d', 'rangeInSeconds': 24 * 60 * 60},
+            {'range': '5d', 'rangeInSeconds': 5 * 24 * 60 * 60},
+            {'range': '1m', 'rangeInSeconds': 30 * 24 * 60 * 60},
+            {'range': '3m', 'rangeInSeconds': 3 * 30 * 24 * 60 * 60},
+            {'range': '6m', 'rangeInSeconds': 6 * 30 * 24 * 60 * 60}
         ];
 
         constructor(private $scope:any,
@@ -137,11 +131,11 @@ module HawkularMetrics {
                     public dateRange:string) {
             $scope.vm = this;
 
-            this.startTimeStamp = moment().subtract('hours', 24).toDate(); //default time period set to 24 hours
+            this.startTimeStamp = moment().subtract(72, 'hours').toDate();
             this.endTimeStamp = new Date();
-            this.dateRange = moment().subtract('hours', 24).from(moment(), true);
+            this.dateRange = moment().subtract(72, 'hours').from(moment());
 
-            $scope.$on('GraphTimeRangeChangedEvent', (event, timeRange) =>  {
+            $scope.$on('GraphTimeRangeChangedEvent', (event, timeRange) => {
                 $scope.vm.startTimeStamp = timeRange[0];
                 $scope.vm.endTimeStamp = timeRange[1];
                 $scope.vm.dateRange = moment(timeRange[0]).from(moment(timeRange[1]));
@@ -158,15 +152,12 @@ module HawkularMetrics {
         private chartData:any;
 
 
-        //@todo: refactor out vars to I/F object
-        //chartInputParams:IChartInputParams ;
-
-//       $rootScope.$on('DateRangeMove', (event, message) =>  {
-//            $log.debug('DateRangeMove on chart Detected.');
-//        });
-//
-
+        ///@todo: refactor out vars to I/F object
+        ///chartInputParams:IChartInputParams ;
 
+///       $rootScope.$on('DateRangeMove', (event, message) =>  {
+///            $log.debug('DateRangeMove on chart Detected.');
+///        });
 
         private noDataFoundForId(id:string):void {
             this.$log.warn('No Data found for id: ' + id);
@@ -259,7 +250,7 @@ module HawkularMetrics {
         }
 
         refreshChartDataNow(startTime:Date):void {
-            var adjStartTimeStamp:Date = moment().subtract('hours', 24).toDate(); //default time period set to 24 hours
+            var adjStartTimeStamp:Date = moment().subtract('hours', 72).toDate(); //default time period set to 24 hours
             this.$rootScope.$broadcast('MultiChartOverlayDataChanged');
             this.endTimeStamp = new Date();
             this.refreshHistoricalChartData(angular.isUndefined(startTime) ? adjStartTimeStamp : startTime, this.endTimeStamp);
@@ -287,11 +278,12 @@ module HawkularMetrics {
 
             if (this.searchId !== '') {
 
-                this.metricDataService.getMetricsForTimeRange(this.searchId, new Date(startTime), new Date(endTime))
+                this.metricDataService.getMetricsForTimeRange(this.searchId, new Date(startTime), new Date(endTime), 60)
                     .then((response) => {
                         console.dir(response);
                         // we want to isolate the response from the data we are feeding to the chart
                         this.bucketedDataPoints = this.formatBucketedChartOutput(response);
+                        console.dir(this.bucketedDataPoints);
 
                         if (this.bucketedDataPoints.length !== 0) {
                             // this is basically the DTO for the chart
@@ -317,7 +309,7 @@ module HawkularMetrics {
 
         private formatBucketedChartOutput(response):IChartDataPoint[] {
             //  The schema is different for bucketed output
-            return _.map(response.data, (point:IChartDataPoint) =>  {
+            return _.map(response.data, (point:IChartDataPoint) => {
                 return {
                     timestamp: point.timestamp,
                     date: new Date(point.timestamp),
@@ -403,7 +395,7 @@ module HawkularMetrics {
             var endTime = _.now(),
                 startTime = moment().subtract('months', 24).valueOf();
 
-            console.debug('refreshChartContext');
+            this.$log.debug('refreshChartContext');
             if (this.searchId !== '') {
                 if (startTime >= endTime) {
                     this.$log.warn('Start Date was >= End Date');
@@ -435,11 +427,7 @@ module HawkularMetrics {
                     empty: point.empty
                 };
             });
-
         }
-
-
-
     }
 
     _module.controller('ChartController', ChartController);

diff --git a/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts b/plugins/metrics/plugins/metrics/ts/metricsPlugin.ts
@@ -28,9 +28,9 @@ module HawkularMetrics {
             .id(HawkularMetrics.pluginName)
             .title(() => "Metrics")
             .href(() => "/metrics")
-            .subPath("Config", "config", navBuilder.join(HawkularMetrics.templatePath, 'config.html'))
             .subPath("Graphs", "graphs", navBuilder.join(HawkularMetrics.templatePath, 'graphs.html'))
             .subPath("Advanced", "advanced", navBuilder.join(HawkularMetrics.templatePath, 'advanced.html'))
+            .subPath("Config", "config", navBuilder.join(HawkularMetrics.templatePath, 'config.html'))
             .build();
 
         navBuilder.configureRouting($routeProvider, metricsTab);
@@ -40,8 +40,7 @@ module HawkularMetrics {
 
     _module.run(['HawtioNav', (HawtioNav:HawtioMainNav.Registry) => {
         HawtioNav.add(metricsTab);
-        log.debug("loaded");
-        console.warn("loaded");
+        log.debug("loaded Metrics");
     }]);