finish modular-izing about modal, delete scattered dependencies for old modal, resolves #1046

awx/ui/client/assets/cowsay-about.html

@@ -1,29 +0,0 @@
-
-<div id="about-dialog-body">
-    <div class="row">
-        <div class="col-xs-12 col-sm-5 About-cowsay">
-            <div style="width: 340px; margin: 0 auto;">
-<pre id="cowsay">
- ________________
-/  Tower Version \
-\<span id='about-modal-version'></span>/
- ----------------
-        \   ^__^
-         \  (oo)\_______
-            (__)\     A)\/\
-                ||----w |
-                ||     ||
-</pre>
-            </div>
-        </div>
-        <div  class="col-xs-12 col-sm-7 text-center">
-            <img id="about-modal-titlelogo" src="/static/assets/ansible_tower_logo_minimalc.png"><br>
-            <p>Copyright 2015.  All rights reserved.</p>
-            <p>Ansible and Ansible Tower are registered trademarks of Red Hat, Inc.</p>
-            <br>
-            <img class="About-redhat" src="/static/assets/redhat_ansible_lockup.png">
-            <br>
-            <p>Visit <a href="http://www.ansible.com" target="_blank">Ansible.com</a> for more information.</p>
-            <p><span id='about-modal-subscription'></span></p>
-    </div>
-</div>

awx/ui/client/src/about/about.block.less

@@ -1,14 +1,42 @@
 /** @define About */
-.About {
+@import "awx/ui/client/src/shared/branding/colors.default.less";
-    height: 309px !important;
-}
 
-.About-cowsay {
+.About-cowsay--container{
-    margin-top: 30px;
+	width: 340px; 
+	margin: 0 auto;
 }
-
+.About-cowsay--code{
-.About-redhat {
+	background-color: @default-bg;
-    max-width: 100%;
+	padding-left: 30px;
-    margin-top: -61px;
+	border-style: none;
-    margin-bottom: -33px;
+	max-width: 340px;
+	padding-left: 30px;
+}
+.About .modal-header{
+	border: none;
+	padding-bottom: 0px;
+}
+.About .modal-dialog{
+	max-width: 500px;
+}
+.About .modal-body{
+	padding-top: 0px;
+}
+.About-brand--redhat{
+	max-width: 420px;
+	margin: 0 auto;
+	margin-top: -50px;
+	margin-bottom: -30px;
+}
+.About-brand--ansible{
+	max-width: 120px;
+	margin: 0 auto;
+}
+.About-close{
+	position: absolute;
+	top: 15px;
+	right: 15px;
+}
+.About p{
+	color: @default-interface-txt;
 }

awx/ui/client/src/about/about.controller.js

@@ -0,0 +1,32 @@
+export default
+	['$scope', '$state', 'CheckLicense', function($scope, $state, CheckLicense){
+		var processVersion = function(version){
+			// prettify version & calculate padding
+			// e,g 3.0.0-0.git201602191743/ -> 3.0.0
+			var split = version.split('-')[0]
+            var spaces = Math.floor((16-split.length)/2),
+                paddedStr  = "";
+            for(var i=0; i<=spaces; i++){
+                paddedStr = paddedStr +" ";
+            }
+            paddedStr = paddedStr + split;
+            for(var j = paddedStr.length; j<16; j++){
+                paddedStr = paddedStr + " ";
+            }
+            return paddedStr
+		}
+		var init = function(){
+			CheckLicense.get()
+				.then(function(res){
+					$scope.subscription = res.data.license_info.subscription_name;
+					$scope.version = processVersion(res.data.version);
+					$('#about-modal').modal('show');
+					console.log(window.cowsay)
+				});
+		};
+		var back = function(){
+			$state.go('setup');
+		}
+		init();
+	}
+	];

awx/ui/client/src/about/about.partial.html

@@ -0,0 +1,32 @@
+<div class="About modal fade" id="about-modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <img class="About-brand--ansible img-responsive" src="/static/assets/ansible_tower_logo_minimalc.png" />
+                <button type="button" class="close About-close" ng-click="back()">
+                    <span class="fa fa-times-circle"></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="About-cowsay--container">
+<!-- Don't indent this properly, you'll break the cow -->
+<pre class="About-cowsay--code">
+ ________________
+/  Tower Version \\
+\\<span>{{version}}</span>/
+ ----------------
+        \\   ^__^
+         \\  (oo)\\_______
+            (__)\     A)\\/\\
+                ||----w |
+                ||     ||
+</pre>
+                </div>
+                <img class="About-brand--redhat img-responsive" src="/static/assets/redhat_ansible_lockup.png" />
+                <p class="text-center">Copyright 2016. All rights reserved.<br>
+                Ansible and Ansible Tower are registered trademarks of <a href="http://www.redhat.com/" target="_blank">Red Hat, Inc</a>.<br>
+                Visit <a href="http://www.ansible.com/" target="_blank">Ansible.com</a> for more information.<br>
+                {{subscription}}</p>
+        </div>
+    </div>
+</div>

awx/ui/client/src/about/about.route.js

@@ -0,0 +1,12 @@
+import {templateUrl} from '../shared/template-url/template-url.factory';
+import controller from './about.controller';
+
+export default {
+    name: 'setup.about',
+    route: '/about',
+    controller: controller,
+    ncyBreadcrumb: {
+        label: "ABOUT"
+    },
+    templateUrl: templateUrl('about/about')
+};

awx/ui/client/src/about/main.js

@@ -0,0 +1,15 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+ import controller from './about.controller';
+ import route from './about.route';
+
+ export default
+ 	angular.module('aboutTower', [])
+ 		.controller('aboutTower', controller)
+ 		.run(['$stateExtender', function($stateExtender){
+ 			$stateExtender.addState(route);
+ 		}]);

awx/ui/client/src/app.js

@@ -32,6 +32,7 @@ import managementJobs from './management-jobs/main';
 import jobDetail from './job-detail/main';
 
 // modules
+import about from './about/main';
 import license from './license/main';
 import setupMenu from './setup-menu/main';
 import mainMenu from './main-menu/main';
@@ -78,6 +79,7 @@ var tower = angular.module('Tower', [
     // 'ngAnimate',
     'ngSanitize',
     'ngCookies',
+    about.name,
     license.name,
     RestServices.name,
     browserData.name,
@@ -179,7 +181,6 @@ var tower = angular.module('Tower', [
     'lrInfiniteScroll',
     'LoadConfigHelper',
     'SocketHelper',
-    'AboutAnsibleHelpModal',
     'PortalJobsListDefinition',
     'features',
     'longDateFilter',
@@ -882,9 +883,9 @@ var tower = angular.module('Tower', [
     }])
 
     .run(['$q', '$compile', '$cookieStore', '$rootScope', '$log', 'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'Timer', 'ClearScope', 'Socket',
-        'LoadConfig', 'Store', 'ShowSocketHelp', 'AboutAnsibleHelp', 'pendoService',
+        'LoadConfig', 'Store', 'ShowSocketHelp', 'pendoService',
         function ($q, $compile, $cookieStore, $rootScope, $log, CheckLicense, $location, Authorization, LoadBasePaths, Timer, ClearScope, Socket,
-        LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, pendoService) {
+        LoadConfig, Store, ShowSocketHelp, pendoService) {
 
 
             var sock;
@@ -1122,10 +1123,6 @@ var tower = angular.module('Tower', [
 
                 activateTab();
 
-                $rootScope.viewAboutTower = function(){
-                    AboutAnsibleHelp();
-                };
-
                 $rootScope.viewCurrentUser = function () {
                     $location.path('/users/' + $rootScope.current_user.id);
                 };

awx/ui/client/src/helpers.js

@@ -7,7 +7,6 @@
 import './forms';
 import './lists';
 
-import AboutAnsible from "./helpers/AboutAnsible";
 import Children from "./helpers/Children";
 import Credentials from "./helpers/Credentials";
 import EventViewer from "./helpers/EventViewer";
@@ -42,8 +41,7 @@ import ApiModelHelper from "./helpers/ApiModel";
 import ActivityStreamHelper from "./helpers/ActivityStream";
 
 export
-    {   AboutAnsible,
+    {   Children,
-        Children,
         Credentials,
         EventViewer,
         Events,

awx/ui/client/src/helpers/AboutAnsible.js

@@ -1,93 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-  /**
- * @ngdoc overview
- * @name helpers
- * @description These are helpers...figure it out :)
-*/
- /**
- * @ngdoc function
- * @name helpers.function:AboutAnsible
- * @description This is the code for the About Ansible modal window that pops up with cowsay giving company/tower info and copyright information.
-*/
-
-
-export default
-    angular.module('AboutAnsibleHelpModal', ['RestServices', 'Utilities','ModalDialog'])
-        .factory('AboutAnsibleHelp', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'CreateDialog',
-            function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors, Wait, CreateDialog) {
-                return function () {
-
-                    var scope= $rootScope.$new(),
-                    url;
-
-                    url = GetBasePath('config');
-                    Rest.setUrl(url);
-                    Rest.get()
-                        .success(function (data){
-                            scope.$emit('BuildAboutDialog', data);
-                        })
-                        .error(function (data, status) {
-                            ProcessErrors(scope, data, status, null, { hdr: 'Error!',
-                                msg: 'Failed to get: ' + url + ' GET returned: ' + status });
-                        });
-
-
-                    if (scope.removeDialogReady) {
-                        scope.removeDialogReady();
-                    }
-                    scope.removeDialogReady = scope.$on('DialogReady', function() {
-                       // element = angular.element(document.getElementById('about-modal-dialog'));
-                       // $compile(element)(scope);
-                        $('#about-modal-dialog').dialog('open');
-                    });
-
-                    if (scope.removeBuildAboutDialog) {
-                        scope.removeBuildAboutDialog();
-                    }
-                    scope.removeBuildAboutDialog = scope.$on('BuildAboutDialog', function(e, data) {
-                        var spaces, i, j,
-                        paddedStr  = "",
-                        versionParts,
-                        str = data.version,
-                        subscription = data.license_info.subscription_name || "";
-
-                        versionParts = str.split('-');
-                        spaces = Math.floor((16-versionParts[0].length)/2);
-                        for( i=0; i<=spaces; i++){
-                            paddedStr = paddedStr +" ";
-                        }
-                        paddedStr = paddedStr + versionParts[0];
-                        for( j = paddedStr.length; j<16; j++){
-                            paddedStr = paddedStr + " ";
-                        }
-                        $('#about-modal-version').html(paddedStr);
-                        $('#about-modal-subscription').html(subscription);
-                        scope.modalOK = function(){
-                            $('#about-modal-dialog').dialog('close');
-                        };
-                        CreateDialog({
-                            id: 'about-modal-dialog',
-                            scope: scope,
-                            // buttons: [],
-                            width: 710,
-                            height: 450,
-                            minWidth: 300,
-                            resizable: false,
-                            callback: 'DialogReady',
-                            onOpen: function(){
-                                $('#dialog-ok-button').focus();
-                                $('#about-modal-dialog').scrollTop(0);
-                                $('#about-modal-dialog').css('overflow-x', 'hidden');
-                                $('.ui-widget-overlay').css('width', '100%');
-                            }
-                        });
-                    });
-
-                };
-            }
-    ]);

awx/ui/client/src/setup-menu/main.js

@@ -3,9 +3,7 @@ import icon from '../shared/icon/main';
 
 export default
     angular.module('setupMenu',
-                   [    'AboutAnsibleHelpModal',
+        [ icon.name])
-                        icon.name
-                   ])
         .run(['$stateExtender', function($stateExtender) {
             $stateExtender.addState(route);
         }]);

awx/ui/client/src/setup-menu/setup-menu.partial.html

@@ -42,11 +42,12 @@
           View and edit your license information.
           </p>
         </a>
-        <a ng-click="showAboutModal()" class="SetupItem">
+        <a ui-sref="setup.about" class="SetupItem">
           <h4 class="SetupItem-title">About Tower</h4>
           <p class="SetupItem-description">
           View information about this version of Ansible Tower.
           </p>
       </a>
     </div>
+    <div ui-view></div>
 </section>

awx/ui/client/src/setup-menu/setup.controller.js

@@ -1,12 +0,0 @@
-export default
-    [   '$scope',
-        '$rootScope',
-        'AboutAnsibleHelp',
-        function(
-            $scope,
-            $rootScope,
-            showAboutModal
-        ) {
-            $scope.showAboutModal = showAboutModal;
-        }
-    ];

awx/ui/client/src/setup-menu/setup.route.js

@@ -1,10 +1,8 @@
 import {templateUrl} from '../shared/template-url/template-url.factory';
-import controller from './setup.controller';
 
 export default {
     name: 'setup',
     route: '/setup',
-    controller: controller,
     ncyBreadcrumb: {
         label: "SETUP"
     },