From 6275f5a43bed2a5053df8b977026dda6f1683775 Mon Sep 17 00:00:00 2001
From: Jeremy Mitchell <mitchell852@gmail.com>
Date: Mon, 26 Jun 2017 09:16:44 -0600
Subject: [PATCH] adds the ability to define a custom menu via a json file

---
 traffic_ops/experimental/ui/app/src/app.js    | 18 +++++++-
 .../app/src/common/api/TrafficOpsService.js   | 12 ++++++
 .../app/src/common/models/PropertiesModel.js  | 31 ++++++++++++++
 .../ui/app/src/common/models/index.js         |  3 +-
 .../src/common/modules/header/header.tpl.html |  2 +-
 .../navigation/NavigationController.js        | 19 ++++++++-
 .../modules/navigation/navigation.tpl.html    |  8 +++-
 .../private/custom/CustomController.js        | 42 +++++++++++++++++++
 .../src/modules/private/custom/_custom.scss   | 36 ++++++++++++++++
 .../modules/private/custom/custom.tpl.html    | 20 +++++++++
 .../app/src/modules/private/custom/index.js   | 33 +++++++++++++++
 .../experimental/ui/app/src/styles/main.scss  |  7 +++-
 .../ui/app/src/traffic_ops_properties.json    | 10 +++++
 traffic_ops/experimental/ui/grunt/copy.js     |  6 ++-
 14 files changed, 237 insertions(+), 10 deletions(-)
 create mode 100644 traffic_ops/experimental/ui/app/src/common/models/PropertiesModel.js
 create mode 100644 traffic_ops/experimental/ui/app/src/modules/private/custom/CustomController.js
 create mode 100644 traffic_ops/experimental/ui/app/src/modules/private/custom/_custom.scss
 create mode 100644 traffic_ops/experimental/ui/app/src/modules/private/custom/custom.tpl.html
 create mode 100644 traffic_ops/experimental/ui/app/src/modules/private/custom/index.js
 create mode 100644 traffic_ops/experimental/ui/app/src/traffic_ops_properties.json

diff --git a/traffic_ops/experimental/ui/app/src/app.js b/traffic_ops/experimental/ui/app/src/app.js
index b02fd365f7..e74681f98b 100644
--- a/traffic_ops/experimental/ui/app/src/app.js
+++ b/traffic_ops/experimental/ui/app/src/app.js
@@ -151,12 +151,17 @@ var trafficOps = angular.module('trafficOps', [
         require('./modules/private/configure/servers/new').name,
         require('./modules/private/configure/servers/list').name,
 
+        // custom
+        require('./modules/private/custom').name,
+
         // monitor
         require('./modules/private/monitor').name,
 
-        // dashboards
+        // dashboard
         require('./modules/private/monitor/dashboard').name,
         require('./modules/private/monitor/dashboard/view').name,
+
+        // map
         require('./modules/private/monitor/map').name,
 
         // common modules
@@ -311,7 +316,16 @@ var trafficOps = angular.module('trafficOps', [
                 .state('trafficOps', {
                     url: '/',
                     abstract: true,
-                    templateUrl: 'common/templates/master.tpl.html'
+                    templateUrl: 'common/templates/master.tpl.html',
+                        resolve: {
+                                properties: function(trafficOpsService, propertiesModel) {
+                                        return trafficOpsService.getProperties()
+                                            .then(function(result) {
+                                                    propertiesModel.setProperties(result);
+                                            });
+                                }
+                        }
+
                 });
         })
 
diff --git a/traffic_ops/experimental/ui/app/src/common/api/TrafficOpsService.js b/traffic_ops/experimental/ui/app/src/common/api/TrafficOpsService.js
index 9b121e4337..0779dfa7a1 100644
--- a/traffic_ops/experimental/ui/app/src/common/api/TrafficOpsService.js
+++ b/traffic_ops/experimental/ui/app/src/common/api/TrafficOpsService.js
@@ -39,6 +39,18 @@ var TrafficOpsService = function($http, $q) {
         window.location = 'http://localhost:3000/api/1.2/dbdump';
     };
 
+    this.getProperties = function() {
+        var deferred = $q.defer();
+        $http.get('traffic_ops_properties.json')
+            .then(
+                function(result) {
+                    deferred.resolve(result.data.properties);
+                }
+            );
+
+        return deferred.promise;
+    };
+
 };
 
 TrafficOpsService.$inject = ['$http', '$q'];
diff --git a/traffic_ops/experimental/ui/app/src/common/models/PropertiesModel.js b/traffic_ops/experimental/ui/app/src/common/models/PropertiesModel.js
new file mode 100644
index 0000000000..5720a184d2
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/common/models/PropertiesModel.js
@@ -0,0 +1,31 @@
+/*
+
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+*/
+
+var PropertiesModel = function() {
+
+	this.properties = {};
+	this.loaded = false;
+
+	this.setProperties = function(properties) {
+		this.properties = properties;
+		this.loaded = true;
+	};
+
+};
+
+PropertiesModel.$inject = [];
+module.exports = PropertiesModel;
\ No newline at end of file
diff --git a/traffic_ops/experimental/ui/app/src/common/models/index.js b/traffic_ops/experimental/ui/app/src/common/models/index.js
index 8001b095a2..2925da5225 100644
--- a/traffic_ops/experimental/ui/app/src/common/models/index.js
+++ b/traffic_ops/experimental/ui/app/src/common/models/index.js
@@ -20,4 +20,5 @@
 module.exports = angular.module('trafficOps.models', [])
     .service('changeLogModel', require('./ChangeLogModel'))
     .service('messageModel', require('./MessageModel'))
-    .service('userModel', require('./UserModel'));
+	.service('propertiesModel', require('./PropertiesModel'))
+	.service('userModel', require('./UserModel'));
diff --git a/traffic_ops/experimental/ui/app/src/common/modules/header/header.tpl.html b/traffic_ops/experimental/ui/app/src/common/modules/header/header.tpl.html
index cf6ad47326..adf90e6e79 100644
--- a/traffic_ops/experimental/ui/app/src/common/modules/header/header.tpl.html
+++ b/traffic_ops/experimental/ui/app/src/common/modules/header/header.tpl.html
@@ -17,7 +17,7 @@
 under the License.
 -->
 
-<div class="nav_menu">
+<div id="header" class="nav_menu">
     <nav role="navigation">
         <div class="nav toggle">
             <a id="menu_toggle"><i class="fa fa-bars"></i></a>
diff --git a/traffic_ops/experimental/ui/app/src/common/modules/navigation/NavigationController.js b/traffic_ops/experimental/ui/app/src/common/modules/navigation/NavigationController.js
index c97ac1fedb..3d54a82740 100644
--- a/traffic_ops/experimental/ui/app/src/common/modules/navigation/NavigationController.js
+++ b/traffic_ops/experimental/ui/app/src/common/modules/navigation/NavigationController.js
@@ -17,7 +17,11 @@
  * under the License.
  */
 
-var NavigationController = function($scope, $log, $state, $location, $timeout, $uibModal, authService, trafficOpsService, userModel) {
+var NavigationController = function($scope, $log, $state, $location, $window, $timeout, $uibModal, authService, trafficOpsService, propertiesModel, userModel) {
+
+    $scope.appName = propertiesModel.properties.name;
+
+    $scope.customMenuItems = propertiesModel.properties.customMenu.items;
 
     $scope.userLoaded = userModel.loaded;
 
@@ -62,6 +66,17 @@ var NavigationController = function($scope, $log, $state, $location, $timeout, $
             });
     };
 
+    $scope.openCustomItem = function(url, embed) {
+        if (embed) {
+            $location.url('/custom').search({ url: encodeURIComponent(url) });
+        } else {
+            $window.open(
+                url,
+                '_blank'
+            );
+        }
+    };
+
     var explodeMenu = function() {
         var isBig = $('body').hasClass('nav-md');
 
@@ -133,5 +148,5 @@ var NavigationController = function($scope, $log, $state, $location, $timeout, $
 
 };
 
-NavigationController.$inject = ['$scope', '$log', '$state', '$location', '$timeout', '$uibModal', 'authService', 'trafficOpsService', 'userModel'];
+NavigationController.$inject = ['$scope', '$log', '$state', '$location', '$window', '$timeout', '$uibModal', 'authService', 'trafficOpsService', 'propertiesModel', 'userModel'];
 module.exports = NavigationController;
diff --git a/traffic_ops/experimental/ui/app/src/common/modules/navigation/navigation.tpl.html b/traffic_ops/experimental/ui/app/src/common/modules/navigation/navigation.tpl.html
index 41edd4175d..faf7512d6a 100644
--- a/traffic_ops/experimental/ui/app/src/common/modules/navigation/navigation.tpl.html
+++ b/traffic_ops/experimental/ui/app/src/common/modules/navigation/navigation.tpl.html
@@ -19,7 +19,7 @@
 
 <div class="main-nav scroll-view">
     <div class="navbar nav_title">
-        <span class="site_title">Traffic Portal</span>
+        <span class="site_title">{{appName}}</span>
     </div>
     <div class="clearfix"></div>
     <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
@@ -54,6 +54,12 @@
                         <li class="side-menu-category-item" ng-class="{'current-page': isState('trafficOps.private.admin.users')}"><a ng-click="navigateToPath('/admin/users')">Users</a></li>
                     </ul>
                 </li>
+                <li class="side-menu-category" ng-if="customMenuItems.length > 0"><a href="javascript:void(0);"><i class="fa fa-cog"></i> Custom <span class="fa fa-chevron-down"></span></a>
+                    <ul class="nav child_menu" style="display: none">
+                        <li class="side-menu-category-item" ng-repeat="item in ::customMenuItems"><a ng-click="openCustomItem(item.url, item.embed)">{{item.name}}</a></li>
+                    </ul>
+                </li>
+
             </ul>
         </div>
     </div>
diff --git a/traffic_ops/experimental/ui/app/src/modules/private/custom/CustomController.js b/traffic_ops/experimental/ui/app/src/modules/private/custom/CustomController.js
new file mode 100644
index 0000000000..66f0321bb8
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/modules/private/custom/CustomController.js
@@ -0,0 +1,42 @@
+/*
+
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ */
+
+var CustomController = function($scope, $sce, $timeout, $location) {
+
+	var pinIframe = function() {
+		var headerHeight = $('#header').css("height");
+		$('#customFrameWrapper').css("top", headerHeight);
+		$('#customFrameWrapper').css("bottom", 0);
+	};
+
+	$scope.url = decodeURIComponent($location.search().url);
+
+	$scope.trustSrc = function(src) {
+		return $sce.trustAsResourceUrl(src);
+	};
+
+	var init = function () {
+		$timeout(function () {
+			pinIframe();
+		}, 200);
+	};
+	init();
+
+};
+
+CustomController.$inject = ['$scope', '$sce', '$timeout', '$location'];
+module.exports = CustomController;
\ No newline at end of file
diff --git a/traffic_ops/experimental/ui/app/src/modules/private/custom/_custom.scss b/traffic_ops/experimental/ui/app/src/modules/private/custom/_custom.scss
new file mode 100644
index 0000000000..184957b56c
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/modules/private/custom/_custom.scss
@@ -0,0 +1,36 @@
+/*
+
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+*/
+
+#customFrameWrapper {
+  position:absolute;
+  right:0;
+}
+
+body.nav-sm .container.body #customFrameWrapper {
+  left: 70px;
+}
+
+@media(min-width:992px) {
+  body.nav-md .container.body #customFrameWrapper {
+    left: 230px;
+  }
+}
+
+#customFrame {
+  height:100%;
+  width:100%;
+}
\ No newline at end of file
diff --git a/traffic_ops/experimental/ui/app/src/modules/private/custom/custom.tpl.html b/traffic_ops/experimental/ui/app/src/modules/private/custom/custom.tpl.html
new file mode 100644
index 0000000000..85d3bfe08d
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/modules/private/custom/custom.tpl.html
@@ -0,0 +1,20 @@
+<!--
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+<div id="customFrameWrapper">
+    <iframe id="customFrame" ng-src="{{trustSrc(url)}}" frameborder="0"/>
+</div>
\ No newline at end of file
diff --git a/traffic_ops/experimental/ui/app/src/modules/private/custom/index.js b/traffic_ops/experimental/ui/app/src/modules/private/custom/index.js
new file mode 100644
index 0000000000..7548c90a99
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/modules/private/custom/index.js
@@ -0,0 +1,33 @@
+/*
+
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ */
+
+module.exports = angular.module('trafficOps.private.custom', [])
+	.controller('CustomController', require('./CustomController'))
+	.config(function($stateProvider, $urlRouterProvider) {
+		$stateProvider
+			.state('trafficOps.private.custom', {
+				url: 'custom',
+				views: {
+					privateContent: {
+						templateUrl: 'modules/private/custom/custom.tpl.html',
+						controller: 'CustomController'
+					}
+				}
+			})
+		;
+		$urlRouterProvider.otherwise('/');
+	});
\ No newline at end of file
diff --git a/traffic_ops/experimental/ui/app/src/styles/main.scss b/traffic_ops/experimental/ui/app/src/styles/main.scss
index 8cc2d8b069..752f7bd55d 100755
--- a/traffic_ops/experimental/ui/app/src/styles/main.scss
+++ b/traffic_ops/experimental/ui/app/src/styles/main.scss
@@ -59,11 +59,16 @@ $fa-font-path: "../assets/fonts";
 @import "../modules/private/configure/deliveryServices/deliveryServices";
 @import "../modules/private/configure/servers/servers";
 
+// custom
+@import "../modules/private/custom/custom";
+
 // monitor
 @import "../modules/private/monitor/monitor";
 
-// dashboards
+// dashboard
 @import "../modules/private/monitor/dashboard/dashboard";
+
+// map
 @import "../modules/private/monitor/map/map";
 
 [ng-click] {
diff --git a/traffic_ops/experimental/ui/app/src/traffic_ops_properties.json b/traffic_ops/experimental/ui/app/src/traffic_ops_properties.json
new file mode 100644
index 0000000000..d4e2a9c6b2
--- /dev/null
+++ b/traffic_ops/experimental/ui/app/src/traffic_ops_properties.json
@@ -0,0 +1,10 @@
+{
+  "_comment": "These are the default properties for Traffic Ops. To customize these values, create your own traffic_ops_properties.json and copy to your web root replacing the existing one.",
+  "properties": {
+    "name": "TP v2",
+    "customMenu": {
+      "_comments": "These are custom items you want to add to the menu. 'items' is an array of hashes where each hash has 'name' (the menu item name), 'embed' (true|false to determine if content is embedded in TP or not), and 'url' (the url of the content)",
+      "items": []
+    }
+  }
+}
diff --git a/traffic_ops/experimental/ui/grunt/copy.js b/traffic_ops/experimental/ui/grunt/copy.js
index 0bc3d60952..40b289091b 100644
--- a/traffic_ops/experimental/ui/grunt/copy.js
+++ b/traffic_ops/experimental/ui/grunt/copy.js
@@ -39,7 +39,8 @@ module.exports = {
                 dest: '<%= globalConfig.distdir %>/public',
                 src: [
                     '*.html',
-                    'trafficOps_release.json'
+                    'trafficOps_release.json',
+                    'traffic_ops_properties.json'
                 ]
             }
         ]
@@ -65,7 +66,8 @@ module.exports = {
                 dest: '<%= globalConfig.distdir %>/public',
                 src: [
                     '*.html',
-                    'trafficOps_release.json'
+                    'trafficOps_release.json',
+                    'traffic_ops_properties.json'
                 ]
             }
         ]