Merge pull request #4 from CiscoDevNet/dev

Merging updated Pathman SR with new features related to user experience, bug fixes etc.

Author: alwye

.gitignore

@@ -2,5 +2,4 @@
 *.pyc
 *.xcodeproj
 client-src/pathman_sr/node_modules/
-client-src/pathman_sr/src/vendor/
-client/
+client-src/pathman_sr/src/vendor/

README.md

@@ -1,4 +1,4 @@
-# OpenDaylight Pathman SR App [![Creative Commons License](dcloud.png)](https://github.com/CiscoDevNet/pathman-sr/tree/master/dCloud)
+# OpenDaylight Pathman SR App <a style="float:right " href="https://dcloud.cisco.com/"><img src="dcloud.png" alt="IMAGE ALT TEXT HERE" align="right"/></a>  
 
 ![](demo/pahtmanlogo.png)
 
@@ -128,7 +128,7 @@ npm install gulp -g
 Assuming you are currently in the root directory of the project, navigate to *client-src/pathman-sr/* directory with *cd*:
 
 ```
-cd client-src/pathman-sr
+cd client-src/pathman_sr
 ```
 
 All GUI files are located in here.

client-src/pathman_sr/bower.json

@@ -13,7 +13,7 @@
 		"requirejs": "~2.1.22",
 		"restangular": "1.5.2",
 		"angular-material-data-table": "~0.9.11",
-		"NeXt": "~0.9.1",
+		"NeXt": "~0.10.0",
 		"jquery": "latest"
 	},
 	"authors": [

client-src/pathman_sr/gulpfile.js

@@ -5,13 +5,13 @@ var gulp = require('gulp'),
 	prefixer = require('gulp-autoprefixer'),
 	uglify = require('gulp-uglify'),
 	less = require('gulp-less'),
-	//sourcemaps = require('gulp-sourcemaps'),
 	rigger = require('gulp-rigger'),
 	cssmin = require('gulp-minify-css'),
 	rename = require('gulp-rename'),
 	del = require('del'),
 	browserSync = require("browser-sync"),
 	htmlmin = require("gulp-htmlmin"),
+	runSequence = require("run-sequence"),
 	reload = browserSync.reload;
 
 var config = {
@@ -57,39 +57,35 @@ var path = {
 };
 
 gulp.task('clean', function () {
-	del([path.clean], {force: true});
+	return del([path.clean], {force: true});
 });
 
 gulp.task('js:build', function () {
-	gulp.src(path.src.js)
+	return gulp.src(path.src.js)
 		.pipe(rigger())
-		//.pipe(sourcemaps.init())
 		.pipe(uglify())
-		//.pipe(sourcemaps.write())
 		.pipe(rename(path.fileNames.jsMinified))
 		.pipe(gulp.dest(path.build.js))
 		.pipe(reload({stream: true}));
 });
 
 gulp.task('style:build', function () {
-	gulp.src(path.src.style)
-		//.pipe(sourcemaps.init())
+	return gulp.src(path.src.style)
 		.pipe(less({
 			includePaths: ['src/style/'],
 			outputStyle: 'compressed',
-			sourceMap: true,
+			sourceMap: false,
 			errLogToConsole: true
 		}))
 		.pipe(prefixer())
 		.pipe(cssmin())
-		//.pipe(sourcemaps.write())
 		.pipe(rename(path.fileNames.cssMinified))
 		.pipe(gulp.dest(path.build.css))
 		.pipe(reload({stream: true}));
 });
 
 gulp.task('image:build', function () {
-	gulp.src(path.src.img)
+	return gulp.src(path.src.img)
 		.pipe(gulp.dest(path.build.img))
 		.pipe(reload({stream: true}));
 });
@@ -102,45 +98,49 @@ gulp.task('html:build', function(){
 		.pipe(gulp.dest(path.build.index));
 
 	// build templates
-	gulp.src(path.src.templates)
+	return gulp.src(path.src.templates)
 		.pipe(gulp.dest(path.build.templates))
 		.pipe(reload({stream: true}));
 });
 
 gulp.task('vendor:build', function(){
-	gulp.src(path.src.vendor)
+	return gulp.src(path.src.vendor)
 		.pipe(gulp.dest(path.build.vendor))
 });
 
-gulp.task('build', [
-	'html:build', // compile index.html
-	'js:build', // assemble and minify js
-	'style:build', // assemble and minify less/css
-	'image:build', // just copy images
-	'vendor:build' // copy vendor files
-]);
+gulp.task('build-full', function(){
+	return runSequence(
+		"clean",
+		["html:build", "js:build", "style:build", "image:build", "vendor:build"]
+	);
+});
 
+gulp.task('build', function(){
+	return runSequence(
+		"clean",
+		["html:build", "js:build", "style:build", "image:build"]
+	);
+});
 
 gulp.task('watch', function(){
 	watch([path.watch.index, path.watch.templates], function(event, cb) {
-		gulp.start('html:build');
+		return runSequence("html:build");
 	});
 	watch([path.watch.style], function(event, cb) {
-		gulp.start('style:build');
+		return runSequence("style:build");
 	});
 	watch([path.watch.js], function(event, cb) {
-		gulp.start('js:build');
+		return runSequence("js:build");
 	});
 	watch([path.watch.img], function(event, cb) {
-		gulp.start('image:build');
+		return runSequence("image:build");
 	});
 	watch([path.watch.vendor], function(event, cb) {
-		gulp.start('vendor:build');
+		return runSequence("vendor:build");
 	});
 });
 
 
-gulp.task('default', ['clean'], function(){
-	gulp.start('build');
-	gulp.start('watch');
+gulp.task('default', function(){
+	return runSequence("build-full", "watch");
 });

client-src/pathman_sr/src/app/controllers/path-setup.controller.js

@@ -14,14 +14,16 @@
 		$scope.onTabSelected = onTabSelected;
 		$scope.clearCurrentPath = clearCurrentPath;
 		$scope.getNodeNamesOnly = getNodeNamesOnly;
+		$scope.countTotalByMetrics = countTotalByMetrics;
 
 		$scope.HelpersService = HelpersService;
-		$scope.validCostMetrics = ['igp', 'hops'];
+		$scope.validCostMetrics = ['igp', 'hops', 'te'];
 		$scope.autoPathFormLoadingStatus = false;
 		$scope.computedPaths = [];
 		$scope.computedMetrics = [];
 		$scope.manualPath = [];
 		$scope.manualPathMetrics = [];
+		$scope.manualPathMetricsTotal = {};
 
 		$scope.nodeFilter = {
 			"pcepEnabled": {
@@ -47,7 +49,8 @@
 
 			var node = data.nodeData,
 				foundIndex, neighbors, errObj, lastIndex,
-				prevHop, currentLink, currentLinkModel;
+				prevHop, currentLink, currentLinkModel,
+				metricName, metricType;
 
 			foundIndex = ($scope.manualPath.findIndex(findRouterByName, {"node": node}));
 
@@ -60,18 +63,60 @@
 				if(foundIndex == 0){
 					$scope.manualPath = [];
 					$scope.manualPathMetrics = [];
+
+					for ( metricName in $scope.manualPathMetricsTotal) {
+						if( $scope.manualPathMetricsTotal.hasOwnProperty( metricName ) ) {
+							$scope.manualPathMetricsTotal[metricName] = 0;
+						}
+					}
+
 				}
-				// if it's the last point (destination)
+				// if it's the last point (current destination)
 				else if(foundIndex == lastIndex){
+
+					for ( metricName in $scope.manualPathMetricsTotal) {
+						if( $scope.manualPathMetricsTotal.hasOwnProperty( metricName ) ) {
+
+							metricType = $scope.manualPathMetrics[lastIndex - 1].type;
+
+							$scope.manualPathMetricsTotal[metricName] =
+								$scope.manualPathMetricsTotal[metricName] - $scope.manualPathMetrics[lastIndex - 1].metric[metricName][metricType];
+
+						}
+					}
+
 					$scope.manualPath.splice(lastIndex, 1);
 					$scope.manualPathMetrics.splice(lastIndex - 1);
 				}
+
 				// intermediate
 				else{
 					$scope.manualPath.splice(foundIndex + 1);
 					$scope.manualPathMetrics.splice(foundIndex);
 
+					for ( metricName in $scope.manualPathMetricsTotal) {
+						if( $scope.manualPathMetricsTotal.hasOwnProperty( metricName ) ) {
+							$scope.manualPathMetricsTotal[metricName] = 0;
+						}
+					}
+
+					$scope.manualPathMetrics.forEach(function(metric){
+
+						for ( metricName in metric.metric) {
+							if( metric.metric.hasOwnProperty( metricName ) ) {
+
+								metricType = metric.type;
+
+								$scope.manualPathMetricsTotal[metricName] =
+									$scope.manualPathMetricsTotal[metricName] + metric.metric[metricName][metricType];
+
+							}
+						}
+
+					});
+
 				}
+
 			}
 			// otherwise (if node is new to the path)...
 			else{
@@ -98,10 +143,38 @@
 								currentLinkModel = currentLink.model().getData();
 
 								if(currentLinkModel.source == prevHop.name){
-									$scope.manualPathMetrics.push(currentLinkModel.sourceTraffic);
+
+									metricType = "tx";
+
+									$scope.manualPathMetrics.push({
+										metric: angular.copy(currentLinkModel.metric),
+										type: metricType
+									});
+
+
+
 								}
 								else{
-									$scope.manualPathMetrics.push(currentLinkModel.targetTraffic);
+
+									metricType = "rx";
+
+									$scope.manualPathMetrics.push({
+										metric: angular.copy(currentLinkModel.metric),
+										type: metricType
+									});
+								}
+
+								// add up to total
+								for ( metricName in currentLinkModel.metric) {
+									if( currentLinkModel.metric.hasOwnProperty( metricName ) ) {
+
+										if(!$scope.manualPathMetricsTotal.hasOwnProperty(metricName))
+											$scope.manualPathMetricsTotal[metricName] = 0;
+
+										$scope.manualPathMetricsTotal[metricName] =
+											$scope.manualPathMetricsTotal[metricName] + currentLinkModel.metric[metricName][metricType];
+
+									}
 								}
 
 								$scope.manualPath.push(node);
@@ -177,7 +250,6 @@
 
 				// when a user is updating the path
 				if(SharedDataService.data.pathSetupUpdateData.mode == "update"){
-					console.log(SharedDataService.data.pathSetupUpdateData);
 
 					$scope.psForm = {
 						"source": SharedDataService.data.pathSetupUpdateData.pathDetails.source,
@@ -449,6 +521,7 @@
 
 			$scope.manualPath = [];
 			$scope.manualPathMetrics = [];
+			$scope.manualPathMetricsTotal = {};
 			NextTopologyService.clearPathLayer(topo);
 
 		}
@@ -467,6 +540,10 @@
 			return namesOnly;
 		}
 
+		function countTotalByMetrics(){
+
+		}
+
 	};
 
 	PathSetupCtrl.$inject = ["$scope", "PathListService", "NextTopologyService", "SharedDataService", "ErrorHandlerService", "HelpersService"];

client-src/pathman_sr/src/app/controllers/pathman.controller.js

@@ -48,6 +48,10 @@
 
 					// record the topology data
 					SharedDataService.data.topologyData = data;
+
+					console.log(SharedDataService.data.topologyData);
+
+
 					// render topology
 					SharedDataService.data.nxTopology.data(SharedDataService.data.topologyData);
 					// topology initialized = true

client-src/pathman_sr/src/app/services/helpers.service.js

@@ -54,10 +54,14 @@
 			};
 		}
 
-		function arraySum(arr){
+		function arraySum(arr, callback){
 			var total = 0;
-			arr.forEach(function(el){
-				total += el;
+			arr.forEach(function(el, index){
+
+				if(callback === undefined)
+					total += el;
+				else
+					total += callback(el, index, arr)
 			});
 			return total;
 		}

client-src/pathman_sr/src/app/services/next-topology.service.js

@@ -314,9 +314,8 @@
 					"pathWidth": 3,
 					"links": pathLinkList,
 					"arrow": "cap",
-					"pathStyle": {
-						"fill": pathColor
-					}
+					"sourceNode": hopList[0],
+					"color": pathColor
 				});
 
 				// add the path