feat(graphs): working DC-based graphing, with date ranges enabled

bower.json

@@ -25,16 +25,17 @@
     "async": "~1.3.0",
     "version_compare": "~0.0.2",
     "angular-debounce": "~1.0.3",
-    "backshift": "https://github.com/j-white/backshift.git#master",
-    "c3": "https://github.com/masayuki0812/c3.git#v0.4.11-rc1",
+    "backshift": "https://github.com/OpenNMS/backshift.git#1.0.1-beta.1",
+    "c3": "https://github.com/masayuki0812/c3.git#v0.4.11-rc3",
     "pouchdb": "~3.6.0",
     "angular-pouchdb": "~2.1.1",
     "pouchdb-find": "~0.3.5",
     "angularjs-crypto": "~1.3.0",
     "cryptojslib": "~3.1.2",
     "uri.js": "~1.15.2",
     "ionic-service-deploy": "~0.1.1",
-    "angular-highlightjs": "~0.4.1"
+    "angular-highlightjs": "~0.4.1",
+    "dcjs": "https://github.com/dc-js/dc.js.git#2.0.0-beta.17"
   },
   "devDependencies": {
     "angular-mocks": "1.3.17",
@@ -47,6 +48,6 @@
     "angular-sanitize": "1.3.17",
     "angular-cookies": "1.3.17",
     "angular-ui-router": "~0.2.15",
-    "d3": "3.5.5"
+    "d3": "3.5.6"
   }
 }

package.json

@@ -38,6 +38,7 @@
     "jshint-stylish": "*",
     "karma": "*",
     "karma-chrome-launcher": "*",
+    "karma-cordova-launcher": "0.0.8",
     "karma-firefox-launcher": "*",
     "karma-jasmine": "*",
     "karma-phantomjs-launcher": "*",
@@ -98,4 +99,4 @@
       "locator": "ios"
     }
   ]
-}
+}

src/index.html

@@ -14,6 +14,7 @@
 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
 
 <link rel="stylesheet" href="css/opennms.min.css" />
+<link rel="stylesheet" href="lib/dcjs/dc.css" />
 
 <!-- build:shim scripts/shim.js -->
 <script src="lib/modernizr/modernizr.js"></script>
@@ -88,6 +89,8 @@
 	<script src="lib/d3/d3.js"></script>
 	<script src="lib/d3pie/d3pie/d3pie.js"></script>
 	<script src="lib/c3/c3.js"></script>
+	<script src="lib/crossfilter/crossfilter.js"></script>
+	<script src="lib/dcjs/dc.js"></script>
     <!-- endbuild -->
 
     <!-- build:backshift scripts/backshift.js -->

src/scripts/opennms/controllers/Dashboard.js

@@ -37,7 +37,7 @@
 		'opennms.services.Settings',
 		'opennms.services.Util',
 	])
-	.controller('DashboardCtrl', function($q, $rootScope, $scope, $interval, $timeout, $state, $document, $window, $ionicLoading, $ionicPopup, $ionicPopover, $ionicSlideBoxDelegate, debounce, resize, AlarmService, AvailabilityService, DonutWidget, Errors, Info, Modals, OutageService, ResourceService, Servers, Settings, util) {
+	.controller('DashboardCtrl', function($q, $rootScope, $scope, $injector, $interval, $timeout, $state, $document, $window, $ionicLoading, $ionicPopup, $ionicPopover, $ionicSlideBoxDelegate, debounce, resize, AlarmService, AvailabilityService, DonutWidget, Errors, Info, Modals, OutageService, ResourceService, Servers, Settings, util) {
 		console.log('DashboardCtrl: Initializing.');
 
 		var updateArrows = function(height) {
@@ -168,9 +168,11 @@
 					$scope.graphs = graphDefs;
 					$scope.favoriteGraphs = favs;
 
-					var delegate = $ionicSlideBoxDelegate.$getByHandle('graph-slide-box');
-					delegate.slide($scope.currentGraphSlide);
-					delegate.update();
+					$timeout(function() {
+						var delegate = $ionicSlideBoxDelegate.$getByHandle('graph-slide-box');
+						delegate.slide($scope.currentGraphSlide);
+						delegate.update();
+					});
 				});
 			}).finally(function() {
 				$scope.$broadcast('scroll.refreshComplete');
@@ -399,7 +401,9 @@
 		$scope.range = {
 			end: new Date()
 		};
-		$scope.range.start = new Date($scope.range.end.getTime() - (1*60*60*1000)); // 1 hour
+
+		var defaultRange = $injector.get('default-graph-range');
+		$scope.range.start = new Date($scope.range.end.getTime() - defaultRange);
 
 		updateLogo();
 

src/scripts/opennms/controllers/NodeResource.js

@@ -6,18 +6,18 @@
 	/* global moment: true */
 	/* global Backshift: true */
 
-	var defaultRange = 1 * 60 * 60 * 1000; // 1 hour
-
 	angular.module('opennms.controllers.NodeResource', [
 		'ionic',
 		'angularLocalStorage',
 		'opennms.services.Nodes',
 		'opennms.services.Resources',
 		'opennms.services.Settings',
 	])
-	.controller('NodeResourceCtrl', function($q, $scope, $timeout, $ionicScrollDelegate, NodeService, ResourceService) {
+	.controller('NodeResourceCtrl', function($q, $scope, $injector, $timeout, $ionicScrollDelegate, NodeService, ResourceService) {
 		console.log('NodeResourceCtrl: initializing.');
 
+		var defaultRange = $injector.get('default-graph-range');
+
 		var findElementById = function(id) {
 				var elm, scrollEl, position = 0;
 				elm = document.getElementById(id);

src/scripts/opennms/main.js

@@ -103,6 +103,35 @@
 		updateTheme();
 		util.onInfoUpdated(updateTheme);
 
+		Servers.all().then(function(servers) {
+			console.log('main: servers=' + angular.toJson(servers));
+			var defaultServer = servers.filter(function(s) {
+				return s.isDefault;
+			});
+			if (defaultServer.length === 0) {
+				console.log('main: server found, but not set to default.');
+				return Servers.setDefault(servers[0]).then(function() {
+					util.hideSplashscreen();
+					return true;
+				}, function(err) {
+					console.log('main: something went wrong setting the default server: ' + angular.toJson(err));
+					Modals.settings(true);
+					$timeout(function() {
+						util.hideSplashscreen();
+					}, 500);
+					return false;
+				});
+			} else {
+				console.log('main: no default server');
+				Modals.settings(true);
+				$timeout(function() {
+					util.hideSplashscreen();
+				}, 500);
+				return false;
+			}
+		});
+
+		/*
 		Servers.configured().then(function(isConfigured) {
 			if (!isConfigured) {
 				console.log('main: server not configured');
@@ -114,6 +143,7 @@
 				});
 			}
 		});
+		*/
 
 		var init = function() {
 			console.log('Ionic is ready.');

src/scripts/opennms/services/Resources.js

@@ -69,7 +69,7 @@
 					if ($scope.graph && $scope.graph._last) {
 						if ($scope.graph._last.ds         === $scope.ds &&
 							$scope.graph._last.graphModel === $scope.graphModel &&
-							$scope.graph._last.range      === $scope.range) {
+							angular.equals($scope.graph._last.range, $scope.range)) {
 							console.log('Graph is unchanged since last render.  Skipping.');
 							return;
 						}
@@ -79,7 +79,7 @@
 					onmsGraphElement.width($scope.width);
 					onmsGraphElement.height($scope.height);
 
-					var graph = new Backshift.Graph.C3({
+					var graph = new Backshift.Graph.DC({
 						element: onmsGraphElement[0],
 						start: $scope.range.start.getTime(),
 						end: $scope.range.end.getTime(),
@@ -92,12 +92,13 @@
 						title: $scope.graphModel.title,
 						verticalLabel: $scope.graphModel.verticalLabel,
 						exportIconSizeRatio: 0,
+						replaceDiv: false,
 					});
 
 					graph._last = {
 						ds: $scope.ds,
 						graphModel: $scope.graphModel,
-						range: $scope.range
+						range: angular.copy($scope.range)
 					};
 
 					if ($scope.graph && $scope.graph.destroy) {
@@ -111,7 +112,9 @@
 					$scope.graph = graph;
 
 					console.log('Displaying graph: ' + $scope.resourceId + ' / ' + $scope.graphModel.title);
-					graph.render();
+					$timeout(function() {
+						graph.render();
+					});
 				};
 
 				$scope.redraw = function() {
@@ -137,7 +140,7 @@
 						}
 					}
 					$scope.redraw();
-				});
+				}, true);
 				$scope.$watch('width', $scope.redraw);
 				$scope.$watch('height', $scope.redraw);
 
@@ -343,13 +346,13 @@
 							console.log('ResourceService.getFavorites: matched file ' + file);
 							favorites.push(StorageService.load('favorites/' + file));
 						} else {
-							console.log('ResourceService.getFavorites: ' + prefix + ' did not match file ' + file);
+							//console.log('ResourceService.getFavorites: ' + prefix + ' did not match file ' + file);
 						}
 					}
 					return $q.all(favorites);
 				});
 			}).then(function(favorites) {
-				console.log('ResourceService.getFavorites: found: ' + angular.toJson(favorites));
+				//console.log('ResourceService.getFavorites: found: ' + angular.toJson(favorites));
 				return favorites;
 				//return $q.reject('nope');
 			});

src/scripts/opennms/services/Settings.js

@@ -9,6 +9,7 @@
 		'opennms.services.BuildConfig',
 		'opennms.services.Storage',
 	])
+	.value('default-graph-range', 24 * 60 * 60 * 1000) // 1 day
 	.factory('Settings', function($q, $rootScope, $injector, storage, uuid4, StorageService) {
 		var $scope = $rootScope.$new();
 

src/scripts/opennms/services/Storage.js

@@ -13,7 +13,7 @@
 	]).factory('StorageService', function($q, $rootScope, $timeout, $window, $ionicPlatform, $cordovaFile, CloudStorage) {
 		console.log('StorageService: Initializing.');
 
-		CloudStorage.setBackend('local');
+		CloudStorage.setDefaultBackend('local');
 
 		var backendArg = function(local) {
 			return local? 'local':undefined;

src/templates/onms-graph.html

@@ -1,5 +1,4 @@
 <div class="onms-graph">
-	<!--
 	<div class="row">
 		<div class="col" style="text-align: left" ng-click="editDate('start')">
 			Start: <span class="datetime">{{range.start | date : 'short' }} <i class="icon ion-clock"></i></span>
@@ -8,6 +7,5 @@
 			End: <span class="datetime">{{range.end | date : 'short' }} <i class="icon ion-clock"></i></span>
 		</div>
 	</div>
-	-->
 	<div class="graph"></div>
 </div>